Changing entry point class based on form factor - gwt

Question

Im looking to load a different user interface in my GWT application if the user is accessing from a mobile web browser or desktop web browser. I was wondering how I would edit my Application.gwt.xml file change which entry point class is loaded based on the the form factor. I thought it might be something along these lines but i'm kind of just hacking so I was wondering if anyone had any ideas?
<entry-point class="webapp.client.WebAppEntryPoint">
<when-property-is name="formfactor" value="desktop"/>
</entry-point>
<entry-point class="webapp.client.MobileAppEntryPoint">
<when-property-is name="formfactor" value="mobile"/>
</entry-point>
Cheers.

Answer 1

Its almost as easy as you describe it -- that is, once you have worked out the formfactor property and how to pick a value for it.
It turns out that when you create an entrypoint and declare it in your module, the compiler uses GWT.create to actually make an instance of it. This leaves it subject to the rebind rules declared in your module. So if both WebAppEntryPoint and MobileAppEntryPoint inherit from some common superclass, you can declare that entrypoint in the module, and a slight varient on the rules you made to trigger them to be selected:
<entry-point class="webapp.client.AbstractAppEntryPoint" />
<replace-with class="webapp.client.WebAppEntryPoint">
<when-type-is class="webapp.client.AbstractAppEntryPoint" />
<when-property-is name="formfactor" value="desktop"/>
</entry-point>
<replace-with class="webapp.client.MobileAppEntryPoint">
<when-type-is class="webapp.client.AbstractAppEntryPoint" />
<when-property-is name="formfactor" value="mobile"/>
</entry-point>
These rules state: "When GWT tries to start the app, use AbstractEntryPoint (which implements EntryPoint) to do so. When someone invokes GWT.create(AbstractEntryPoint) and formfactor is desktop, give them a WebAppEntryPoint instance. When someone invokes GWT.create(AbstractEntryPoint) and formfactor is mobil, give them a MobileAppEntryPoint instance.
This then leaves the hard part - how do you build the formfactor property, define the possible values, and let the app pick the right one on startup?
To help answer this, lets look at two standard properties that already existing in GWT - locale and user.agent. Useragent detection is managed in the com.google.gwt.useragent.UserAgent module - properties are defined, a way to select a property is listed, and some helpful 'make sure that this wiring worked' bits are added to the app. Possible locales are started in com.google.gwt.i18n.I18N, but are designed to be extended within your own app. There is lots of extra stuff in here as well, defining how to pick which locale should be activated. We'll want to steal the idea of pre-defining the possible formfactors from user.agent, and will want the idea of reading the right formfactor from the locale code.
First, define the property.
<define-property name="formfactor" values="desktop, mobile" />
In this example, we'll only allow these two possible values - in reality, you might want desktop (i.e. large and mouse/keyboard), tablet (large and touch), phone (small and touch), or some other variation on this.
Next, decide how to read the right property value. There are two basic ways to do this - via a simple snippet of javascript, written in your module file, and by writing a class that generates JavaScript, based on some configuration settings. I'm going to go with the simplest one first, and let you work out how to actually detect this detail in javascript (update the question or comment if you can clarify further what you have/need/expect):
<!-- borrowing/adapting from
http://code.google.com/p/google-web-toolkit/wiki/ConditionalProperties -->
<property-provider name="formfactor"><![CDATA[
{
var ua = window.navigator.userAgent.toLowerCase();
if (ua.indexOf('android') != -1) { return 'mobile'; }
if (ua.indexOf('iphone') != -1) { return 'mobile'; }
return 'desktop';
}
]]></property-provider>
Again, this goes in the module, and defines some simple JavaScript to pick the value for formfactor - if the useragent contains the string 'android' or 'iphone', activate the mobile value, otherwise activate desktop. This code will be placed in your .nocache.js file, and used to pick the right permutation (with the right entrypoint, as defined above).

Answer 2

Apart from Colin's detailed answer you might have a look at GWT's standard example for mobilewebapp - http://code.google.com/p/google-web-toolkit/source/browse/#svn%2Ftrunk%2Fsamples%2Fmobilewebapp
The example FormFactor.gwt.xml - http://code.google.com/p/google-web-toolkit/source/browse/trunk/samples/mobilewebapp/src/main/java/com/google/gwt/sample/mobilewebapp/FormFactor.gwt.xml

Answer 3

You can use replace with
<replace-with class="webapp.client.MobileAppEntryPoint">
<when-type-is class="webapp.client.WebAppEntryPoint" />
<any>
<when-property-is name="formfactor" value="mobile"/>
</any>
</replace-with>
NOTE :i am not tried with entry point class ..but working fine for some Widget classes
For details refer Gwt differed binding

Answer 4

SOLVED:
Okay, thanks to everyone who replied. I used a little bit of everyones answer to get to the solution! Firstly I followed SSRs and had a look at the example FormFactor.gwt.xml file. I copied this into my project and referred to it in my App.gwt.xml file. I then followed Colins and added the following code to my App.gwt.xml file in order to load a different EntryPoint based upon form factor:
<entry-point class="webapp.client.AbstractEntryPoint" />
<replace-with class="webapp.client.WebAppEntryPoint">
<when-type-is class="webapp.client.AbstractEntryPoint" />
<when-property-is name="formfactor" value="desktop"/>
</replace-with>
<replace-with class="webapp.client.MobileAppEntryPoint">
<when-type-is class="webapp.client.AbstractEntryPoint" />
<when-property-is name="formfactor" value="mobile"/>
</replace-with>