8. Primefaces Mobile 简介

8.1. Primefaces Mobile在JSF应用程序中的作用

让我们回顾本文开头所探讨的 Primefaces 应用程序架构：

当目标设备是手机浏览器时，我们需要调整页面布局。事实上，必须考虑智能手机的屏幕尺寸，并重新设计页面的用户体验。目前已有专门用于构建移动网页的库。例如 Primefaces 移动库，它本身就基于 JQuery 移动库。

移动网页应用的架构与前文所述相同，只是除了 JSF 和 Primefaces 之外，我们还将使用 Primefaces mobile 库（PFM）。

我们将重新回顾使用 JSF 和 Primefaces 时所学的所有概念。仅 [présentation] 层（主要是页面）会发生变化。

8.2. Primefaces mobile的贡献

Primefaces移动版网站

[http://www.primefaces.org/showcase-labs/mobile/showcase.jsf?javax.faces.RenderKitId=PRIMEFACES_MOBILE]

列出了可在 PFM [1, 2] 页面中使用的组件：

可以使用智能手机模拟器来查看上述演示应用。其中一款适用于 iPhone 4 的模拟器可在 URL [http://iphone4simulator.com/] [3] 处获取。在[4]中输入待测试应用的地址，该应用即会以iPhone的屏幕尺寸显示。此类模拟器在开发阶段非常有用，但最终仍需在不同手机上进行实际测试。

8.3. Primefaces Mobile 入门

PrimeFaces Mobile提供的组件远少于PrimeFaces。PrimeFaces Mobile的网站

[http://www.primefaces.org/showcase-labs/mobile/showcase.jsf?javax.faces.RenderKitId=PRIMEFACES_MOBILE]

列出了相关组件。例如，以下是可在表单中使用的组件 [1]、[2]、[3]：

可以下载示例 [4] 的源代码。由此我们发现，显示上述组件 [1]、[2]、[3] 的页面 PFM 如下所示：


<?xml version="1.0" encoding="windows-1250"?>
<f:view xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui"
        xmlns:pm="http://primefaces.org/mobile"
        contentType="text/html">

    <pm:page title="Components">
        <!-- 表单 -->
        <pm:view id="forms">
            <pm:header title="Forms">
                <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
            </pm:header>
            <pm:content>
                <p:inputText label="Input:" />   
                <p:inputText label="Search:" type="search"/>
                <p:inputText label="Phone:" type="tel"/>
                <p:inputTextarea id="inputTextarea" label="Textarea:"/>
                <pm:field>
                    <h:outputLabel for="selectOneMenu" value="Dropdown: "/>
                    <h:selectOneMenu id="selectOneMenu">
                        <f:selectItem itemLabel="Select One" itemValue="" />
                        <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                        <f:selectItem itemLabel="Option 2" itemValue="Option 2" />
                        <f:selectItem itemLabel="Option 3" itemValue="Option 3" />
                    </h:selectOneMenu>
                </pm:field>
                <pm:inputRange id="range" minValue="0" maxValue="100" label="Range:" />
                <pm:switch id="switch" onLabel="yes" offLabel="no" label="Switch:" />
                <p:selectBooleanCheckbox id="booleanCheckbox" value="false" itemLabel="I agree" label="Checkbox"/>
                <p:selectManyCheckbox id="checkbox" label="Checkboxes: ">
                    <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                    <f:selectItem itemLabel="Option 2" itemValue="Option 2" />
                    <f:selectItem itemLabel="Option 3" itemValue="Option 3" />
                </p:selectManyCheckbox>
                <p:selectOneRadio id="radio" label="Radios: ">
                    <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                    <f:selectItem itemLabel="Option 2" itemValue="Option 2" />
                    <f:selectItem itemLabel="Option 3" itemValue="Option 3" />
                </p:selectOneRadio>
            </pm:content>
        </pm:view>
    </pm:page>
</f:view>

第 7 行：出现了一个新的命名空间，即前缀为 pm 的 Primefaces 移动组件命名空间，
第10行：定义了一个页面。一个页面将由多个视图组成（第12行）。在任何给定时刻，仅有一个视图可见。这体现了我们在Primefaces示例中大量使用过的概念：一个页面包含多个片段，我们可以显示或隐藏它们。在此，我们无需进行这种操作。我们只需指定要显示的视图，其余视图则自动隐藏，
第12行：一个视图，
第13-15行：定义视图的标题：



<pm:header title="Forms">
    <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
</pm:header>

请注意用于生成按钮的标签。href 属性用于导航。此处的值为一个视图的名称。点击该按钮将返回（reverse=true）名为 main 的视图（此处未显示）。

第 16 行：引入视图内容，
第17行：生成一个输入框：


                <p:inputText label="Input:" />

第 18 行：一个带有特殊图标的输入框：


                <p:inputText label="Search:" type="search"/>

第19行：一个用于输入电话号码的输入框：


                <p:inputText label="Phone:" type="tel"/>

<inputText> 标签的 type 属性具有特定含义：它决定了向用户提供的输入键盘类型。因此，当 type='tel' 时，将显示数字键盘，

第20行：一个多行且可扩展的输入框：


                <p:inputTextarea id="inputTextarea" label="Textarea:"/>

第21-29行：一个包含多个组件的字段：


                <pm:field>
                    <h:outputLabel for="selectOneMenu" value="Dropdown: "/>
                    <h:selectOneMenu id="selectOneMenu">
                        <f:selectItem itemLabel="Select One" itemValue="" />
                        <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                        <f:selectItem itemLabel="Option 2" itemValue="Option 2" />
                        <f:selectItem itemLabel="Option 3" itemValue="Option 3" />
                    </h:selectOneMenu>
</pm:field>

第2行：第3行组件的标签；
第3行：一个下拉列表；
第4-7行：其内容，

第30行：一个滑块：


                <pm:inputRange id="range" minValue="0" maxValue="100" label="Range:" />

第31行：一个具有两个值的按钮：


                <pm:switch id="switch" onLabel="yes" offLabel="no" label="Switch:" />

第 32 行：一个复选框：


      <p:selectBooleanCheckbox id="booleanCheckbox" value="false" itemLabel="I agree" label="Checkbox"/>

第33-37行：一组复选框：


                  <p:selectManyCheckbox id="checkbox" label="Checkboxes: ">
                    <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                    <f:selectItem itemLabel="Option 2" itemValue="Option 2" />
                    <f:selectItem itemLabel="Option 3" itemValue="Option 3" />
                </p:selectManyCheckbox>

第38-42行：一组单选按钮


                    <p:selectOneRadio id="radio" label="Radios: ">
                    <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                    <f:selectItem itemLabel="Option 2" itemValue="Option 2" />
                    <f:selectItem itemLabel="Option 3" itemValue="Option 3" />
                </p:selectOneRadio>

需要注意的是，该页面使用了三个库的标签：JSF、PF 和 PFM。我们已经掌握了足够的基础知识，可以开始构建我们的第一个 Primefaces 移动项目了。

8.4. 首个 Primefaces 移动项目：mv-pfm-01

我们将沿用之前学习的示例，将其集成到一个 Maven 项目中。通过此过程，我们将了解 Primefaces 移动项目所需的依赖项。

8.4.1. NetBeans 项目

NetBeans 项目如下：

该 NetBeans 项目最初是一个基础的 Maven Web 项目，我们向其中添加了 [2] 依赖项。这在 [pom.xml] 文件中体现为以下代码：


<dependency>
      <groupId>com.sun.faces</groupId>
      <artifactId>jsf-impl</artifactId>
      <version>2.1.8</version>
    </dependency>
    <dependency>
      <groupId>org.primefaces</groupId>
      <artifactId>primefaces</artifactId>
      <version>3.2</version>
    </dependency>
    <dependency>
      <groupId>org.primefaces</groupId>
      <artifactId>mobile</artifactId>
      <version>0.9.1</version>
      <type>jar</type>
    </dependency>
  </dependencies>
  <repositories>
    <repository>
      <url>http://download.java.net/maven/2/</url>
      <id>jsf20</id>
      <layout>default</layout>
      <name>Repository for library Library[jsf20]</name>
    </repository>
    <repository>
      <url>http://repository.primefaces.org/</url>
      <id>primefaces</id>
      <layout>default</layout>
      <name>Repository for library Library[primefaces]</name>
    </repository>
  </repositories>

第 11-16 行是 Primefaces Mobile 的依赖项。这里我们采用了 0.9.1 版本（第 14 行）。此外，我们采用了 Primefaces 3.2 版本（第 9 行）。这些版本号至关重要。事实上，我在使用 PFM 时遇到了不少问题，因为该库尚未最终定版。此前曾存在过一个存在缺陷的 0.9.2 版本，现已下架。我们已回退至0.9.1版本。因此，PFM项目出现了功能退化。在2012年6月初正在构建的1.0版本（1.0-SNAPSHOT）中，测试同样失败。

[index.xhtml] [1] 主页是 Primefaces 移动组件的演示页面：


<?xml version="1.0" encoding="windows-1250"?>
<f:view xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui"
        xmlns:pm="http://primefaces.org/mobile"
        contentType="text/html">

  <pm:page title="Components">

    <!-- 主视图 -->
    <pm:view id="main">
      ...
    </pm:view>

    <!-- 表单 -->
    <pm:view id="forms">
      ...
    </pm:view>


    <!-- 按钮 -->
    <pm:view id="buttons">
      ...
    </pm:view>

    ...
  </pm:page>
</f:view>

该项目包含一个由十二个视图组成的单一页面（第10行）。我们在此不详细说明这些视图。此处的目的是简单展示如何构建一个Primefaces移动项目。

运行该项目后，会显示一个错误页面 [1]：

原因在于，Primefaces移动应用必须像[2]那样，通过[?javax.faces.RenderKitId=PRIMEFACES_MOBILE]参数进行调用。可以通过修改文件 [faces-config.xml]（或如本例中所示，若不存在则创建该文件）来省略此参数：

其内容如下：


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

<!-- =========== FULL CONFIGURATION FILE ================================== -->

<faces-config version="2.0"
              xmlns="http://java.sun.com/xml/ns/javaee" 
              xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
              xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd">

  <application>
    <default-render-kit-id>PRIMEFACES_MOBILE</default-render-kit-id>
  </application>
</faces-config>

第 11 行：设置参数 [javax.faces.RenderKitId] 的值。

运行时，得到的页面与之前相同，但无需为 URL 和 [4] 设置参数。我们留给读者自行测试此应用程序。测试中发现了一些错误：标签 <p:selectManyCheckbox> 无法显示，标签 <p:selectOneRadio> 同样无法显示，标签 <pm:range> 无法正常工作。这些故障在演示网站上并不存在，这让人怀疑该应用无法与这里使用的 Primefaces mobile 0.9.1 与 Primefaces 3.2 的组合兼容。但这仍然是一个起点，有助于探索这个正在构建中的库中的标签。

为了获得更真实的渲染效果，我们可以使用iPhone 4模拟器（如[http://iphone4simulator.com/]）测试该应用。结果如下：

我们输入 [5]，这与前一个浏览器使用的 URL 相同，即 [4]。

8.5. 示例 mv-pfm-02：表单与模型

在此项目中，我们将展示 Primefaces 移动版页面与其模型之间的交互。这些交互遵循 JSF 框架的规则，而 Primefaces 移动版最终正是基于该框架构建的。

8.5.1. 视图

该项目中有两个视图

视图 1 [1] 展示了一个可提交的表单 [2]，
视图 2 [3] 用于确认输入内容，并提供返回表单 [4] 的功能。

该项目展示了两点：

页面与其模型之间的关系，
页面视图之间的导航。

8.5.2. NetBeans 项目

NetBeans 项目如下：

在 [1] 中，PrimeFaces 移动页面，
[2]，其视图模板
在 [3] 中，消息文件（因为该应用程序已实现国际化），
[4]，项目依赖项。

8.5.3. 项目配置

我们提供配置文件但不作说明。这些文件现已成为标准配置。

[web.xml]：配置 Web 应用程序：


<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Development</param-value>
    </context-param>
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>faces/index.xhtml</welcome-file>
    </welcome-file-list>
</web-app>

[faces-config.xml]：配置应用程序 JSF：


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

<!-- =========== FULL CONFIGURATION FILE ================================== -->

<faces-config version="2.0"
              xmlns="http://java.sun.com/xml/ns/javaee" 
              xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
              xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd">

  <application>
    <resource-bundle>
      <base-name>
        messages
      </base-name>
      <var>msg</var>
    </resource-bundle>
    <message-bundle>messages</message-bundle>
    <default-render-kit-id>PRIMEFACES_MOBILE</default-render-kit-id>
  </application>
</faces-config>

[messages_fr.properties]：法语消息文件：


forms=Formulaire
input=Saisie de texte
textarea=Saisie multi-lignes
dropdown=Liste d\u00e9roulante
range=Slider
switch=Switch
checkbox=Case \u00e0 cocher
checkboxes=Cases \u00e0 cocher
radios=Boutons radio
valider=Valider
confirmations=Confirmations
back=Retour

8.5.4. PrimeFaces 移动页面

页面 [index.xhtml] 内容如下：


<?xml version="1.0" encoding='UTF-8'?>
<f:view xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui"
        xmlns:pm="http://primefaces.org/mobile"
        contentType="text/html">

  <pm:page title="mv-pfm-02">

    <!-- 表单视图 -->
    <pm:view id="forms" swatch="b">
      <pm:header title="#{msg['forms']}"/>
      <pm:content>
        <h:form id="formulaire">
          <p:inputText id="inputText" label="#{msg['input']}" value="#{form.inputText}"/>
          <p:inputTextarea id="inputTextArea" label="#{msg['textarea']}" value="#{form.inputTextArea}"/>
          <pm:field>
            <h:outputLabel for="selectOneMenu" value="#{msg['dropdown']}"/>
            <h:selectOneMenu id="selectOneMenu" value="#{form.selectOneMenu}">
              <f:selectItem itemLabel="Option 1" itemValue="1" />
              <f:selectItem itemLabel="Option 2" itemValue="2" />
              <f:selectItem itemLabel="Option 3" itemValue="3" />
            </h:selectOneMenu>
          </pm:field>
          <pm:inputRange id="range" minValue="0" maxValue="100" label="#{msg['range']}" value="#{form.range}"/>
          <pm:switch id="switch" onLabel="yes" offLabel="no" label="#{msg['switch']}" value="#{form.bswitch}"/>
          <p:selectBooleanCheckbox id="booleanCheckbox" itemLabel="I agree" label="#{msg['checkbox']}" value="#{form.booleanCheckbox}"/>
          <pm:field>
            <h:outputLabel for="manyCheckbox" value="#{msg['checkboxes']}"/>
            <h:selectManyCheckbox id="manyCheckbox" value="#{form.manyCheckbox}">
              <f:selectItem itemLabel="Option 1" itemValue="1" />
              <f:selectItem itemLabel="Option 2" itemValue="2" />
              <f:selectItem itemLabel="Option 3" itemValue="3" />
            </h:selectManyCheckbox>
          </pm:field>
          <pm:field>
            <h:outputLabel for="radio" value="#{msg['radios']}"/>
            <h:selectOneRadio id="radio" value="#{form.radio}">
              <f:selectItem itemLabel="Option 1" itemValue="1" />
              <f:selectItem itemLabel="Option 2" itemValue="2" />
              <f:selectItem itemLabel="Option 3" itemValue="3" />
            </h:selectOneRadio>
          </pm:field>
          <p:commandButton inline="true" value="#{msg['valider']}" update=":infos" action="#{form.valider}"/>
        </h:form>
      </pm:content>
    </pm:view>

    <!-- 信息视图 -->
    <pm:view id="infos" swatch="b">
      <pm:header title="#{msg['confirmations']}">
        <f:facet name="left"><p:button value="#{msg['back']}" icon="back" href="#forms?reverse=true"/></f:facet>
      </pm:header>
      <pm:content>
        <ul>
          <li>#{msg['input']} : ${form.inputText}</li>
          <li>#{msg['textarea']} : ${form.inputTextArea}</li>
          <li>#{msg['dropdown']} : ${form.selectOneMenu}</li>
          <li>#{msg['range']} : ${form.range}</li>
          <li>#{msg['switch']} : ${form.bswitch}</li>
          <li>#{msg['checkbox']} : ${form.booleanCheckbox}</li>
          <li>#{msg['checkboxes']} : ${form.manyCheckboxValue}</li>
          <li>#{msg['radios']} : ${form.radio}</li>
        </ul>
      </pm:content>
    </pm:view>
  </pm:page>
</f:view>

我们采用了 Primefaces 移动版网站的演示示例，并对其进行了调整以确保其正常运行：

标签 <p:selectManyCheckbox> 未显示。我们将其替换为标签 <h:selectManyCheckbox>（第 32 行），
标签 <p:selectOneRadio> 未显示。我们将其替换为标签 <p:selectOneRadio>（第 40 行），
第27行：我们保留了显示滑块的<pm:inputRange>标签。该滑块存在故障：无法移动滑块光标。但输入特定数值后，滑块即可移动，
需要注意的是，PFM特有的标签很少（第一视图中的第13、14、15、19、27、28行）。其余标签均为经典的 JSF 和 PF 标签。Primefaces Mobile 基于这两个框架。

请注意页面的结构：


<?xml version="1.0" encoding='UTF-8'?>
<f:view xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui"
        xmlns:pm="http://primefaces.org/mobile"
        contentType="text/html">

  <pm:page title="mv-pfm-02">

    <!-- 表单视图 -->
    <pm:view id="forms" swatch="b">
      <pm:header ...>
      <pm:content>
        <h:form id="formulaire">
          ...
          <p:commandButton inline="true" value="#{msg['valider']}" update=":infos" action="#{form.valider}"/>
        </h:form>
      </pm:content>
    </pm:view>

    <!-- 信息视图 -->
    <pm:view id="infos" swatch="b">
      <pm:header title="#{msg['confirmations']}">
        <f:facet name="left"><p:button value="#{msg['back']}" icon="back" href="#forms?reverse=true"/></f:facet>
      </pm:header>
      <pm:content>
        ...
      </pm:content>
    </pm:view>
  </pm:page>
</f:view>

第 10 行：定义了一个 PFM 页面。title 属性确定了浏览器显示的标题，
一个页面由一个或多个视图组成。页面首次加载时，显示的是第一个视图。随后可通过导航在各个视图之间切换。此处包含两个视图：第13行的表单视图和第24行的信息视图，
第14行：header标签定义视图的页眉，
第15行：content标签定义视图的内容，
第16行：forms视图包含一个JSF表单，
第18行：该表单将通过一个经典的Primefaces按钮进行提交。表单数据将提交至模型[Form]，并由方法[Form].valider进行处理。该方法将执行相应操作。我们将看到该方法要求显示“infos”视图。此前，该视图已通过调用 AJAX（update 属性）进行了更新，
第26行：可通过按钮在信息视图和表单视图之间切换。请注意href属性[href="#forms?reverse=true"]的写法。 #forms 表示表单视图。参数 reverse=true 用于返回上一页。我从演示中复用了该属性。在模拟器中移除它后，看起来没有任何区别……但在真实的智能手机上可能有所不同，
最后需注意第 7 行使用了 Primefaces mobile 库。

尽管引入了新功能，但页面 PFM 依然通俗易懂。其模板 [Form.java] 也是如此。

8.5.5. 模板 [Form.java]

该模板如下：


package beans;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class Form implements Serializable {
  // 模板

  private String inputText = "bonjour";
  private String inputTextArea = "ligne1\nligne2";
  private String selectOneMenu = "2";
  private int range = 4;
  private boolean bswitch = true;
  private boolean booleanCheckbox = false;
  private String[] manyCheckbox = {"1", "3"};
  private String radio = "3";

  public String valider() {
    // 跳转至信息视图
    return "pm:infos";
  }

  public String getManyCheckboxValue() {
    StringBuffer str = new StringBuffer("[");
    for (String checkbox : manyCheckbox) {
      str.append(checkbox);
    }
    str.append("]");
    return str.toString();
  }

  // 获取器和设置器
  ...
}

这里没有任何新内容。所有内容都已出现过。不过，我们仍需注意表单调用的valider方法的形式。第21行：它返回一个字符串，形式为'pm:要显示的视图名称'。因此，这里将显示信息视图。该方法除了执行此导航操作外别无他用。此前，第12至19行的字段已接收到了提交的值。这些值将用于更新“infos”视图（下文中的update属性）：


<p:commandButton inline="true" value="#{msg['valider']}" update=":infos" action="#{form.valider}"/>

“信息”视图将显示提交的值：


<pm:view id="infos" swatch="b">
      <pm:header title="#{msg['confirmations']}">
        <f:facet name="left"><p:button value="#{msg['back']}" icon="back" href="#forms"/></f:facet>
      </pm:header>
      <pm:content>
        <ul>
          <li>#{msg['input']} : ${form.inputText}</li>
          <li>#{msg['textarea']} : ${form.inputTextArea}</li>
          <li>#{msg['dropdown']} : ${form.selectOneMenu}</li>
          <li>#{msg['range']} : ${form.range}</li>
          <li>#{msg['switch']} : ${form.bswitch}</li>
          <li>#{msg['checkbox']} : ${form.booleanCheckbox}</li>
          <li>#{msg['checkboxes']} : ${form.manyCheckboxValue}</li>
          <li>#{msg['radios']} : ${form.radio}</li>
        </ul>
      </pm:content>
    </pm:view>

8.5.6. 测试

运行 NetBeans 项目。将项目部署到 Tomcat [1] 后，可在模拟器 [http://iphone4simulator.com/] [2] 上进行测试：

接下来我们将演示如何在真实的智能手机上进行测试。我们将把托管应用程序的服务器和智能手机连接到同一个网络WIFI上：

将服务器连接到Wi-Fi网络。随后可以验证其IP地址：

请注意上文中的服务器地址 IP：192.168.1.127。禁用服务器上的防火墙和杀毒软件：

在服务器上，通过 NetBeans 启动应用程序 [mv-pfm-02]：

将智能手机连接到与服务器相同的Wi-Fi网络，以便两台设备能够互相识别。然后打开浏览器，访问URL [http://192.168.1.127:8080/mv-pfm-02/] [2]。接下来即可测试该应用程序。令人欣喜的是，我们会发现模拟器中无法正常工作的滑块在智能手机上却能正常运行。这说明模拟器与实际设备之间存在差异。

8.6. 结论

我们仅介绍了 Primefaces Mobile 库中的表单标签，但这对于我们的示例应用程序已足够。

8.7. 使用 Eclipse 进行测试

将 Maven 项目 [1] 导入 Eclipse 并运行 [2]、

在 Tomcat 服务器 [3] 上运行。运行后的应用程序将显示在 Eclipse 内置浏览器 [4] 中。

需要注意的是，应用程序 [mv-pfm-02] 在 Eclipse 浏览器中出现了故障。如果将其加载到 Firefox 或 IE 浏览器中，这些故障便消失了。