I have gwt application based on GWTP. App supports two versions (tablet & desktop) and uses different widget libraries (sencha gxt and sencha touch). These libraries require different css files in host page. Moreother css are in conflict each to other. How I can load different css files in my host page?
I already read about gwt mobilewebapp sample, but they use single html-page and different implementations of components.
You can check the Useragent and decide which CSS File to deliver.
I recommend to use ClientBundles. This deliver only the css styles need, and speed up your page.
In your Entrypoint you just decide which css file you want to deliver:
if(useragent == "desktop") {
YourStyle.getTheme().getMGWTClientBundle().getDesktopCss().ensureInjected();
} else {
YourStyle.getTheme().getMGWTClientBundle().getAppCss().ensureInjected();
}
or you can make a switch inside your css files. But you have to use ClientBundles anyway.
There you can have something like this:
#external gwt-button;
#if user.agent safari {
.gwt-Button {
...
}
}
#external gwt-button is to avoid obfuscation errors. you can also use #external *;
You could also do this on the server side, by using a JSP file as the css source.
Then, in the JSP file, decide which set of properties to send based on the requesting user agent or other.
Another option is to write the host page as a JSP file, and it can include the proper CSS file based on the request.
This is a pretty easy way to go, but you must enable the JSP processor in your web.xml. It also requires your deployed system to have a java compiler on it, which is not the case if you only install the JRE on the webserver.
You have to create two classes which load the css file :
You can do some thing related to type in gwt.xml file
<replace-with
class="com.test.classMobile">
<when-type-is
class="com.Test.classBrowser" />
<when-property-is name="tablet.user.agent" value="ipad" />
</replace-with>
Just try this..I am not sure 100%
Related
I'm using the regular GWT project structure that is generated when creating a new GWT project via the Eclipse GWT plugin, e.g. com.mycompany.mygwtmodule.client for all the client stuff that is GWT-compiled into JavaScript.
Now I want to add some client code with a custom package structure, e.g. org.othercompany.somepackage...
Is that doable? And, if so, how?
I don't need a workaround, if it's not doable. However, it may still be helpful for you to know, why I want to do this: The custom package structure is from a 3rd-party GWT module that is used by my GWT project. I just need a small set of classes from it which I copied into my project instead of including the whole module which contains lots of stuff I don't care about. Those classes are using each other. As I do not want to touch their code at all, I am keeping their original package structure.
What I tried is to add <source path='my-eclipse-project-path/src/org/othercompany/somepackage'/> to my gwt.xml, but in hosted mode I'm getting the error: "No source code is available for type org.othercompany.somepackage.SomeClass; did you forget to inherit a required module?"
No, I didn't ;-) The code is all there, but I couldn't make GWT find it.
Thanks for any helpful comments!
Its Better you create two separate modules ,since you are taking the code from some other 3rd party jar.
First create module which contain the package structure
- com.mycompany.mygwtmodule (one module)
Second create another module
-org.othercompany.somepackage (another module)
Inherit the second module in first module.gwt.xml
<inherits name="org.othercompany.somepackage" />
You need to add the other source package in your sources.
This is done in your module.gwt.xml. There is an element source, that will list all source packages to be included for client:
<source path="client" />
<source path="shared" />
will include all packages in client and shared into the frontend code.
Details can be found here: http://www.gwtproject.org/doc/latest/DevGuideOrganizingProjects.html#DevGuidePathFiltering
Update: if your packages have no common package you need to create two seperate modules and one inherits the other.
We use this a lot, it works out very nice.
anybody knows how to check if a js/css file is already included with typoscript?
Example
[Template_A.ts]
page.includeJS {
jsfile = fileadmin/Template/js/jquery-1.10.2.min.js
}
now if i got an extension with the same include e.g.
[Extension_A.ts]
page.includeJS {
jsfile = fileadmin/Template/js/jquery-1.10.2.min.js
}
Is there a way to prevent this kind of double code injection? Maybe i got another Template e.g. Template_B.ts where jquery is not included - than the Extension_A.ts has to include jquery by itself.
Kinldy
You can use the same key inside includeJS such it just gets overridden if you include the file twice.
Other than that you should put jQuery into includeJSlibs, such that it is loaded before the other JS files.
Other than that, the TS should be unique for each page. Therefore you always to make sure anyway that all resources are included in-order.
You should not include JS libs with the automatic extension TS setups. Use your documentation to tell the integrator what needs to be included and what not.
The various and independent inclusion of scripts by plugins and templates is one of the tricky points in TYPO3. As far as I know, this point cannot be managed at one single point.
There is a plugin "t3jquery" that offers to build, compress and share a common jQuery library. It also has a service to analyze other plugins for their dependencies. But this doesn't solve the problem in general, as many plugins don't check for libraries already loaded.
The most stable way is to remove all plugin's references to libraries manually in your TypoSkript. This gives you some simple additional TypoSkript lines. I use lines like these:
plugin.tx_imagecycle_pi1.file.jQueryLibrary >
plugin.tx_imagecycle_pi1.jQueryLibrary >
plugin.tx_multicontent_pi1.file.jQueryLibrary >
plugin.tx_multicontent_pi1.jQueryLibrary >
# Fluid
page.headerData.998 >
You can find the matching TypoSkript descriptors by searching for the library name in the TypoSkript browser or by greping in the plugin's source code. You will also need this if you wish to add libraries as part of content that was get by AJAX, thus separating the libs from the page content.
Here's a tut (in German): http://jweiland.net/typo3/typoscript/javascript-manuell-entfernen-oder-einbinden.html
Futher possibilities you can check:
Some plugins are written in good structure and offer to keep back their Javascript in the settings.
Some script inclusions may come rather from the static template but from a plugin, so don't forget to have a look there.
I have a GWT application which uses a style sheet which is defined in a resource bundle and the injected into my main entrypoint as follows:
MyResources.INSTANCE.main().ensureInjected();
I then also have another stylesheet that I make use of which which is served by my cms and is injected via the bla.gwt.xml file as follows:
<stylesheet src="cms/clientSpecific.css"/>
The idea is that styles in clientSpecific.css should override those in main.css but it seems that main.css (the one in the resource bundle) takes preferance to the one that was defined in the bla.gwt.cml (served by my cms). Is there a way to tell the GWT application which style sheet takes priority?
It's not possible as the main is injected in JavaScript which is executed at a point past the loading of the style sheets. However, even if you could get it to work, you might have another problem, because the injected main css is obfuscated (unless you disabled that). Thus the original stylenames are gone and the styles in the clientSpecific.css won't match.
When I build a GWT application, it runs on all browsers like IE,chrome,firefox etc. provided GWT plugin is installed for that browser.
I want to know how can I prevent a GWT application from running on a particular browser i.e. if I don't want my GWT apps to run on say Firefox, how can I achieve that? What changes I need to do in my code?
Add <set-property name="user.agent" value="ie6,ie8,ie9,safari,opera" /> to your *.gwt.xml file and it will fail to load in Firefox (FYI, Firefox's user.agent token is gecko1_8).
If you don't want to support IE6 and IE7 for instance, you don't need to compile for them, and you can decrease your compilation time by removing the ie6 token from the user.agent value list.
GWT offers javascript files mainly for Fifefox, chrome....., but what happens if another browser is being used such as K Melon or another browser which GWT does not specifically generates the javascript for that browser!!
I have tested for K Melon, it works correctly but i just want to know, how GWT knows which Javascript files to load
This is probably way more information than you wanted.
As far as mechanics go, GWT grabs the user agent from the browser, then uses a mechanism called a "property provider" to classify the browser. So, a property provider sets a property named "user.agent" to one of several predefined classes of browsers.
Here is an XML file which defines constants for all classes of browsers GWT currently knows about:
http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/user/UserAgent.gwt.xml?
At compile time, your app is compiled separately for each class of browser you want to support, and a different batch of JS gets loaded for each type of browser. The beauty of this is that the end user downloads the minimum amount of code needed to run the app, and won't be bloated by having conditional code for IE when you are running Chrome or Firefox.
Its a bit complex, but you can peek at the code that writes out some JavaScript to examine the User Agent string here to determine which class of browser is currently running:
http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/user/rebind/UserAgentPropertyGenerator.java
Once it picks a value for the user.agent property, the various parts of GWT conditionally substitute in code where browser specific logic is needed. Most browsers return a long list of "compatible" user agents. GWT tries to pick the best match from those. You can see that there is a default case - if the user agent string isn't recognized at all it sets the user.agent value to 'unknown' and fires up a warning to alert that the developer needs to manually pick one.
To dive a little deeper, here's the mechanism the compiler uses to pull in browser specific code based on the user.agent property:
(from Window.gwt.xml)
<module>
<inherits name="com.google.gwt.core.Core"/>
<inherits name="com.google.gwt.user.UserAgent"/>
<replace-with class="com.google.gwt.user.client.impl.WindowImplIE">
<when-type-is class="com.google.gwt.user.client.impl.WindowImpl"/>
<any>
<when-property-is name="user.agent" value="ie6"/>
<when-property-is name="user.agent" value="ie8"/>
<when-property-is name="user.agent" value="ie9"/>
</any>
</replace-with>
</module>
You'll notice that if 'webkit' is seen in the user agent, GWT returns the string 'safari' to identify the class of browser. There is no separate class of browser for Chrome. Chrome and Safari are very similar, and pretty closely written to specs, so there's not a lot of special casing for them. But that's not to say that there isn't Chrome specific code in some places. Sometimes a difference in browser will be detected at runtime. Its only done this way when there are just small browser differences. Here's an example of the way a minor difference between Chrome and Safari is handled:
public class HyperlinkImplSafari extends HyperlinkImpl {
private static boolean shiftIsModifier = onChrome();
private static native boolean onChrome() /*-{
return navigator.userAgent.indexOf("Chrome") != -1;
}-*/;
#Override
public boolean handleAsClick(Event event) {
//...
boolean modifiers = alt || ctrl || meta;
if (shiftIsModifier) {
modifiers |= shift;
}
return !modifiers && !middle && !right;
}
}
Check this post out - Google GWT cross-browser support: is it BS?
Even with the big names in browser industry, my experience with GWT apps hasn't been 100% compatibility, but really comes close.
For other browsers, it will look for the engine (most of them are offshoots of webkit or variants of mozilla's offering), if that is recognized, GWT generates the code for it more or less.
Anyways, the user base for such browsers itself is too tiny. In practice, it mostly suffices to test compatibility between IE6 (sigh), IE7, IE8 (yes they behave differently!), Firefox, and nowadays, chrome, safari and IE9.