PrimeFaces Mobile入门

介绍

如果您已经开发了利用PrimeFaces的应用程序，或者打算开发可在台式机和移动设备上使用的Web应用程序，请考虑将PrimeFaces Mobile用于您的移动实施。这篇博客文章将介绍一些基础知识，以帮助您开始为现有的PrimeFaces应用程序开发移动界面。但是，可以将相同的过程应用于从头开始编写的应用程序。本文是我目前为OTN写的一篇文章的前一篇，它将更详细地介绍PrimeFaces Mobile API。该文章将于今年晚些时候发表。

掌握移动思维

移动项目中最重要的部分之一就是进入移动思维模式。虽然您可以在标准的Web应用程序上使用一组组件，但这些组件在转移到较小的屏幕时可能无法提供最佳的体验。因此，您需要考虑用户将如何在小屏幕上与应用程序进行交互，并为他们提供最方便的用户界面。需要考虑的一些事情是您希望用户输入的文本量。如果它们是在小型设备上，则键入大量文本可能很麻烦，因此我们希望为他们提供易于使用的组件，使其尽可能少地键入，甚至可以从列表中进行选择。我们还需要考虑房地产（不是房地产市场）。如果用户没有足够的屏幕轻松浏览应用程序，则在屏幕的顶部或底部添加菜单可能对用户没有好处。

这些只是为移动设备开发应用程序时出现的几个问题。 PrimeFaces Mobile基于领先的基于HTML5的移动UI框架之一，因此非常适合在这些领域提供帮助。 PrimeFaces Mobile由许多UI组件组成，可以使用户在移动设备上提高生产力。如果看一下PrimeFaces展示柜，您会看到许多这些移动组件正在运行。这使您可以了解这些组件的外观以及它们对用户的反应。建议您在智能手机或平板电脑等移动设备上访问PrimeFaces移动展示柜，以最好地了解它们的反应。

创建移动根

现在，您已经对一些移动设计概念有了基本的了解，让我们看一下开始使用PrimeFaces mobile创建移动视图有多么容易。在PrimeFaces 5之前，移动版是单独的下载，需要包含在您的项目中。现在，作为PrimeFaces 5的一部分进行打包，使用PrimeFaces Mobile变得比以往任何时候都更加容易。这使得在PrimeFaces上为标准浏览器构建企业Web应用程序变得容易，然后为移动设备构建单独的视图，通常每种方法都使用相同的后端业务方法。我建议创建一个专用于移动设备用户的起点或“根”视图。我还建议根据需要创建一个单独的MobileNavigationController类来处理整个移动视图中的导航。我们可以利用移动根视图来设置钩子，以使用MobileNavigationController与标准Web应用程序导航。

出于本文的目的，我们简单地将其移动根称为mobileRoot.xhtml。在这种情况下，mobleRoot.xhtml可能类似于以下内容：

<html xmlns:f="http://xmlns.jcp.org/jsf/core"xmlns:h="http://xmlns.jcp.org/jsf/html"xmlns:p="http://primefaces.org/ui"xmlns:ui="http://xmlns.jcp.org/jsf/facelets"xmlns="http://www.w3.org/1999/xhtml"><f:metadata><f:viewaction action="#{mobileNavigationController.doMobile()}" id="useMobile"></f:viewaction></f:metadata><h:head><h:outputscript library="js" name="addtohomescreen.js"><h:outputstylesheet library="css" name="addtohomescreen.css"><script>addToHomescreen();</script></h:outputstylesheet></h:outputscript></h:head><h:body></h:body>
</html>

在上面的视图中，使用JSF viewAction初始化MobileNavigationController doMobile（）方法，该方法将移动UI设置为运动状态。从这一点出发，导航可以将用户带到应用程序的主要移动视图，并且还可以设置任何其他必要的配置。还可以使用addtohomescreen.js脚本（ http://cubiq.org/add-to-home-screen ）提供一个漂亮的按钮，以建议移动设备用户将移动应用程序添加到其主屏幕以获得更丰富的体验。我将在以后的文章或即将发表的OTN文章中介绍全屏Web应用程序的一些其他自定义配置。

创建一个简单的移动视图

为用户提供访问移动视图的清晰路径后，我们需要确保使用PrimeFaces移动渲染工具包显示移动视图。要标记视图与PrimeFaces Mobile一起使用，请在视图的<f：view>标记中提供“ renderKitId”属性，并将PRIMEFACES_MOBILE用作该值。

<f:view renderKitId="PRIMEFACES_MOBILE">

建立PrimeFaces Mobile视图的另一个要求是添加移动名称空间（xmlns：pm =“ http://primefaces.org/mobile”），因为它将用于每个PrimeFaces Mobile特定组件。包括JSF直通（xmlns：pt =“ http://xmlns.jcp.org/jsf/passthrough”）命名空间也是一个好主意，因为我们可能希望利用某些HTML5特定的功能。

移动页面由页眉，内容和页脚组成。每个移动页面都包含在<pm：page>标记内。移动视图可以包含在<pm：page>中的单个页面或多个页面，每个页面都有自己的标识符。在此示例中，我们将创建两个构成两个移动页面的视图，第二个页面可通过第一个页面上的链接访问。可以使用Facelets模板来构建整个移动应用程序解决方案，但是在本示例中，我们将分别创建每个视图。也可以使用当前非常流行的“单页”应用程序策略进行开发……我们将在OTN文章中介绍更多内容。

这篇文章中的PrimeFaces Mobile示例以及即将发布的OTN文章都基于我在OTN的“企业PrimeFaces”文章中使用的Acme Pools示例（ http://www.oracle.com/technetwork/articles/java/ java-primefaces-2191907.html ）。在完整的Web版本中，根视图在表视图中包含Acme Pool客户列表（图1）。我们希望转换此视图（和其他视图）以使其在移动设备上更好地工作，并允许选择每一行，这将使我们获得有关所选客户的更多信息。

图1：标准Acme池视图

就本文而言，我们将使用初始客户视图将其转换为移动视图。该视图将包含一个客户列表，如果您在视图中选择特定的行，则将显示有关所选客户的更多信息。要使用PrimeFaces移动版显示表，必须使用DataList组件，该组件为每行数据提供方便的“可单击”链接或按钮。 DataList与DataTable的不同之处在于，DataList中没有列，但是每行数据都有一组相关数据。数据组应使用可单击的链接包装，然后将为用户提供导航到第二个视图，以显示有关所选项目的更多详细信息。以下代码用于开发客户数据列表的移动UI。

清单1：移动视图（mobile / index.xhtml）

<html xmlns="http://www.w3.org/1999/xhtml"xmlns:h="http://xmlns.jcp.org/jsf/html"xmlns:p="http://primefaces.org/ui"xmlns:f="http://xmlns.jcp.org/jsf/core"xmlns:pm="http://primefaces.org/mobile"xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"><f:view renderKitId="PRIMEFACES_MOBILE"><h:head></h:head><h:body><pm:page id="customerListing"><pm:header>Acme Pools</pm:header><pm:content><h:form id="indexForm"><p:panel header="Acme Pools Customer Listing"><p:dataList id="datalist"value="#{customerController.items}"var="item"    paginator="true"pt:data-role="listview" pt:data-filter="true"rows="10"rowsPerPageTemplate="10,20,30,40,50"><p:commandLinkaction="#{customerController.loadCustomer}"><f:param name="customer" value="#{item.customerId}"/><h:panelGroup><h:outputText value="#{item.customerId} - #{item.name}"/><br/><h:outputText value="#{item.email}"/></h:panelGroup></p:commandLink></p:dataList></p:panel></h:form></pm:content><pm:footer>Author: Josh Juneau</pm:footer></pm:page></h:body></f:view>
</html>

如您所见，我们通过<f：view>标记中的规范来标记PrimeFaces Mobile使用的视图。然后，我们创建一个<pm：page>，并且在页面内部具有<pm：header>，<pm：content>和<pm：footer>的部分。主要内容包括一个显示客户数据的PrimeFaces移动数据列表，该数据包装在ap：commandLink组件中。单击链接后，将调用＃{customerController.loadCustomer}方法，并传递所选客户的ID。请注意，DataList组件使用直通属性来指定data-role和data-filter HTML5属性。这些用于为用户提供更丰富的体验。筛选器使用户可以轻松地开始在筛选器文本框中输入值，并缩短列表以仅包含包含键入文本的记录。结果视图如图2所示。

图2：移动视图

清单2中的代码包含loadCustomer（）的实现。客户ID传递到EJB的find（）方法，然后返回选定的客户数据。

清单2：CustomerController loadCustomer（）

public String loadCustomer() {Map requestMap = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();String customer = (String) requestMap.get("customer");selected = ejbFacade.find(Integer.valueOf(customer));return "customerInfo";}

在DataList中选择一个客户时，将调用loadCustomer（）方法，并导致导航到我们的第二个移动视图customerInfo.xhtml（图3）。第二个移动视图基本上显示了客户详细信息，并提供了一个链接，可返回到客户的数据列表。 customerInfo的代码如清单3所示。

清单3：customerInfo.xhtml视图

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xmlns:h="http://xmlns.jcp.org/jsf/html"xmlns:p="http://primefaces.org/ui"xmlns:f="http://xmlns.jcp.org/jsf/core"xmlns:pm="http://primefaces.org/mobile"><f:view renderKitId="PRIMEFACES_MOBILE"><h:head></h:head><h:body><pm:page id="customerInfo"><pm:header>Acme Pools</pm:header><pm:content><h:form><p:panel header="Acme Pools Customer Information">#{customerController.selected.name}<br/>#{customerController.selected.addressline1}<br/>#{customerController.selected.addressline2}<br/>#{customerController.selected.phone}</p:panel><p:commandLink action="index?transition=slide" value="Go Back"/></h:form></pm:content><pm:footer>Author: Josh Juneau</pm:footer></pm:page></h:body></f:view>
</html>

如您所见，customerInfo视图包含与原始移动视图相同的结构。没有添加特殊的移动组件，但是从图3中可以看到，标准的PrimeFaces面板的样式设计为可以在移动设备上很好地显示。

图3：移动视图选择

结论

总结一下使用PrimeFaces移动版的简要信息。如您所见，很容易为您的应用程序开发一个移动界面。 PrimeFaces移动套件还包括用于导航，事件等的自定义框架，可轻松提供出色的移动体验。例如，事件框架包括一些滑动事件以及Taphold。甚至有可能挂钩到JQuery Mobile框架，以向您的应用程序提供更多移动事件。

PrimeFaces移动导航框架由过渡组成，最终可为您的应用程序提供更流畅的感觉。例如，可以提供“幻灯片”到按钮导航的过渡，这将导致UI视图在单击按钮时滑入焦点。所有这些都可以使用PrimeFaces Showcase进行测试。

有关PrimeFaces mobile的这些和其他重要功能的更多信息，请关注我即将发表的OTN文章。