它几乎和你描述的一样简单——也就是说,一旦你弄清楚了formfactor
属性以及如何为其选择一个值。
事实证明,当您创建入口点并在模块中声明它时,编译器会使用GWT.create
实际做一个例子。这使得它受到模块中声明的重新绑定规则的约束。所以如果两者WebAppEntryPoint
and MobileAppEntryPoint
从一些常见的超类继承,您可以在模块中声明该入口点,并在您为触发它们被选择而制定的规则上略有不同:
<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>
这些规则规定:“当 GWT 尝试启动应用程序时,使用AbstractEntryPoint
(它实现了EntryPoint
)这样做。当有人调用GWT.create(AbstractEntryPoint)
and formfactor
is desktop
,给他们一个WebAppEntryPoint
实例。当有人调用GWT.create(AbstractEntryPoint)
and formfactor
is mobil
,给他们一个MobileAppEntryPoint
实例。
接下来剩下困难的部分 - 如何构建formfactor
属性,定义可能的值,并让应用程序在启动时选择正确的值?
为了帮助回答这个问题,让我们看一下 GWT 中已经存在的两个标准属性 -locale
and user.agent
。 Useragent 检测在 com.google.gwt.useragent.UserAgent 模块中进行管理 - 定义了属性,列出了选择属性的方法,并将一些有用的“确保此接线工作”位添加到应用程序中。可能的区域设置在 com.google.gwt.i18n.I18N 中启动,但设计为在您自己的应用程序中扩展。这里还有很多额外的东西,定义如何选择应该激活的区域设置。我们想要从 user.agent 中借鉴预先定义可能的形状因子的想法,并且想要从区域设置代码中读取正确的形状因子的想法。
首先,定义属性。
<define-property name="formfactor" values="desktop, mobile" />
在此示例中,我们只允许这两个可能的值 - 实际上,您可能需要桌面(即大型和鼠标/键盘)、平板电脑(大型和触摸)、手机(小型和触摸)或其他一些变体。
接下来,决定如何读取正确的属性值。有两种基本方法可以做到这一点 - 通过在模块文件中编写一个简单的 javascript 片段,以及编写一个基于某些配置设置生成 JavaScript 的类。我将首先讨论最简单的一个,然后让您了解如何在 javascript 中实际检测此细节(如果您可以进一步澄清您拥有/需要/期望的内容,请更新问题或评论):
<!-- 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>
同样,这位于模块中,并定义了一些简单的 JavaScript 来选择值formfactor
- 如果用户代理包含字符串“android”或“iphone”,则激活mobile
值,否则激活desktop
。该代码将被放置在您的.nocache.js
文件,并用于选择正确的排列(具有正确的入口点,如上所述)。