GWT - Comment compiler les permutations mobiles

Question

Je suis conscient de l'utilisation de la liaison différée pour compiler une application GWT pour différents agents utilisateurs, mais cela ne semble pas offrir un moyen de distinguer entre les navigateurs desktop + mobile.

Autre que en faisant une nouvelle application basée sur GWT mobile WebKit, comment voulez-vous convertir une application GWT existante pour avoir une interface mobile restylé?

Answer 1

Si vous utilisez le modèle MVP décrit here, vous pouvez changer les implémentations des vues en fonction de l'agent utilisateur.

Vous pouvez avoir un ClientFactoryImpl et un ClientFactoryMobileImpl. Vous utilisez ensuite GWT.create (ClientFactory.class) pour créer l'implémentation définie dans le fichier .gwt.xml.

Voici un exemple du fichier .gwt.xml

<replace-with class="com.bell.cts.e911.ers.web.client.ClientFactoryImpl"> 
    <when-type-is class="com.bell.cts.e911.ers.web.client.ClientFactory" /> 
    <when-property-is name="user.agent" value="ie6" /> 
</replace-with> 

<replace-with class="com.bell.cts.e911.ers.web.client.ClientFactoryMobileImpl"> 
    <when-type-is class="com.bell.cts.e911.ers.web.client.ClientFactory" /> 
    <when-property-is name="user.agent" value="mobilesafari" /> 
</replace-with> 

Vous pouvez toujours mettre en place user.agents selon la technique décrite ici: http://code.google.com/p/google-web-toolkit/wiki/ConditionalProperties

http://jectbd.com/?p=1282

Answer 2

Vous pouvez le voir exemple d'application de GWT: http://code.google.com/p/google-web-toolkit/source/browse/trunk/samples/mobilewebapp/src/com/google/gwt/sample/mobilewebapp/?r=10041 Il détecte le facteur de forme dans le module « FormFactor.gwt.xml » qui pourrait ressembler à ceci:

<?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"/> 

    <property-provider name="formfactor"> 
    <![CDATA[ 
     // Look for the formfactor as a url argument. 
     var args = location.search; 
     var start = args.indexOf("formfactor"); 
     if (start >= 0) { 
     var value = args.substring(start); 
     var begin = value.indexOf("=") + 1; 
     var end = value.indexOf("&"); 
     if (end == -1) { 
      end = value.length; 
     } 
     return value.substring(begin, end); 
     } 

     // Detect form factor from user agent. 
     var ua = navigator.userAgent.toLowerCase(); 
     if (ua.indexOf("iphone") != -1 || ua.indexOf("ipod") != -1) { 
     // iphone and ipod. 
     return "mobile"; 
     } else if (ua.indexOf("ipad") != -1) { 
     // ipad. 
     return "tablet"; 
     } else if (ua.indexOf("android") != -1 || ua.indexOf("mobile") != -1) { 
     /* 
     * Android - determine the form factor of android devices based on the diagonal screen 
     * size. Anything under six inches is a phone, anything over six inches is a tablet. 
     */ 
     var dpi = 160; 
     var width = $wnd.screen.width/dpi; 
     var height = $wnd.screen.height/dpi; 
     var size = Math.sqrt(width*width + height*height); 
     return (size < 6) ? "mobile" : "tablet"; 
     } 

     // Everything else is a desktop. 
     return "desktop"; 
    ]]> 
    </property-provider> 

</module>