GWT and mobile fuseday 09/11

The lastfuse i was interesting to develop Web Application for different devices (Mobile/Tablet/Desktop) using GWT.

The following issues arise when dealing with such task:

1. Find a way to detect which device is running and show a different view accordingly.

2. Test our application on the Dev machine without compile and upload them each time.

3. Avoid rewriting the same code for each one of the devices.
    

   the result can be found in : http://fuseday.appspot.com (it has no real functionalty but you can see different view for mobile and desktop)
   
    

The soultion for these issues where as follow:

1. In order to detect device type (formfactor) we are using FormFactor module, which include PropertyProvider written in JavaScript.
    

   It was taken from GWT 2.4 example “gwt-2.4.0\samples\MobileWebApp”

    

   <?xml version="1.0" encoding="UTF-8"?>

<!-- Defines the formfactor property and its provider function. -->

<module>

<!-- Determine if we are in a mobile browser. -->

<define-property name="formfactor" values="desktop,tablet,mobile"/>

<collapse-property name="formfactor" values="*"/>

...

<property-provider name="formfactor">

<![CDATA[

// Look for the formfactor as a url argument.

]]>

</property-provider>

</module>

2. For our testing purposes, we used Android Development Kit (ADK) .

   Create a device and start emulator and open browser.
   Note: The Host IP that should be used for the Android browser is 10.0.2.2 and not 127.0.0.1

   
    

3. In order to avoid code rewriting we are using MVP (Model/View/Presenter) when Model and presenter are being used for all devices and each view is being created accordingly.
    

   To bind each of the views to it's corresponding fromfactor, we used deferred binding.
   

<replace-with class="com.tikal.fuseday11.client.views.DesktopTaskListView" >

<when-type-assignable class="com.tikal.fuseday11.client.views.TaskListView" />

<any>

<when-property-is name="formfactor" value="desktop"/>

<when-property-is name="formfactor" value="tablet"/>

</any>

</replace-with>

<replace-with class="com.tikal.fuseday11.client.views.MobileTaskListView" >

<when-type-assignable class="com.tikal.fuseday11.client.views.TaskListView" />

<when-property-is name="formfactor" value="mobile"/>

</replace-with>