GWT - 如何編譯移動排列

Question

我知道如何使用延遲綁定編譯爲不同的用戶代理一個GWT應用程序，但是這似乎並沒有提供一種方式桌面+移動瀏覽器之間distingiush。

除了通過基於GWT-移動WebKit的一個新的應用程序，你會如何轉換現有的GWT應用程序有一個重新設計的手機界面？

Answer 1

如果使用描述here MVP模式，可以基於所述用戶代理切換的意見的實施方式。

你可以有一個ClientFactoryImpl和ClientFactoryMobileImpl。然後使用GWT.create（ClientFactory.class）創建定義到.gwt.xml文件中的實現。

這裏是.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> 

可以使用這裏描述的技術永遠成立user.agents的例子：http://code.google.com/p/google-web-toolkit/wiki/ConditionalProperties

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

Answer 2

你可以看到這個從GWT示例應用程序： http://code.google.com/p/google-web-toolkit/source/browse/trunk/samples/mobilewebapp/src/com/google/gwt/sample/mobilewebapp/?r=10041 它檢測「FormFactor.gwt.xml」模塊中的形式因素可能是這樣的：

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