primefaces_PrimeFaces Mobile入门

primefaces

介绍

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

掌握移动思维

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

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

创建移动根

现在，您已经对一些移动设计概念有了基本的了解，让我们看一下开始使用PrimeFaces mobile创建移动视图有多么容易。在PrimeFaces 5之前，移动版是单独下载的，需要包含在您的项目中。现在，PrimeFaces Mobile已打包为PrimeFaces 5的一部分，比以往任何时候都更容易进行。这使得在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移动设备的这些和其他重要功能的更多信息，请关注我即将发表的OTN文章。

资源资源

PrimeFaces展示柜： http : //www.primefaces.org/showcase/mobile/
jQuery Mobile： http ： //jquerymobile.com/

翻译自: https://www.javacodegeeks.com/2014/11/getting-started-with-primefaces-mobile.html

primefaces