GWT - Как составить мобильные перестановки

Question

Мне известно о том, как использовать отложенную привязку для компиляции приложения GWT для различных пользовательских агентов, но, похоже, это не дает возможности расхождения между настольными + мобильными браузерами.

Помимо создания нового приложения на основе gwt-mobile-webkit, как бы вы преобразовали существующее приложение GWT в мобильный интерфейс с рестайлингом?

Answer 1

Если вы используете шаблон 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>