深圳网站建设易通鼎,网站空间类型,推广赚佣金的软件排名,广告费内包括网站建设介绍 如果您已经开发了利用PrimeFaces的应用程序#xff0c;或者打算开发可在台式机和移动设备上使用的Web应用程序#xff0c;请考虑将PrimeFaces Mobile用于您的移动实施。 这篇博客文章将介绍一些基础知识#xff0c;以帮助您开始为现有的PrimeFaces应用程序开发移动界面… 介绍 如果您已经开发了利用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:fhttp://xmlns.jcp.org/jsf/corexmlns:hhttp://xmlns.jcp.org/jsf/htmlxmlns:phttp://primefaces.org/uixmlns:uihttp://xmlns.jcp.org/jsf/faceletsxmlnshttp://www.w3.org/1999/xhtmlf:metadataf:viewaction action#{mobileNavigationController.doMobile()} iduseMobile/f:viewaction/f:metadatah:headh:outputscript libraryjs nameaddtohomescreen.jsh:outputstylesheet librarycss nameaddtohomescreen.cssscriptaddToHomescreen();/script/h:outputstylesheet/h:outputscript/h:headh:body/h:body
/html 在上面的视图中使用JSF viewAction初始化MobileNavigationController doMobile方法该方法将移动UI设置为运动状态。 从这一点出发导航可以将用户带到应用程序的主要移动视图并且还可以设置任何其他必要的配置。 还可以使用addtohomescreen.js脚本 http://cubiq.org/add-to-home-screen 提供一个漂亮的按钮以建议移动设备用户将移动应用程序添加到其主屏幕以获得更丰富的体验。 我将在以后的文章或即将发表的OTN文章中介绍全屏Web应用程序的一些其他自定义配置。 创建一个简单的移动视图 为用户提供访问移动视图的清晰路径后我们需要确保使用PrimeFaces移动渲染工具包显示移动视图。 要标记视图与PrimeFaces Mobile一起使用请在视图的fview标记中提供“ renderKitId”属性并将PRIMEFACES_MOBILE用作该值。 f:view renderKitIdPRIMEFACES_MOBILE 建立PrimeFaces Mobile视图的另一个要求是添加移动名称空间xmlnspm “ http://primefaces.org/mobile”因为它将用于每个PrimeFaces Mobile特定组件。 包括JSF直通xmlnspt “ http://xmlns.jcp.org/jsf/passthrough”命名空间也是一个好主意因为我们可能希望利用某些HTML5特定的功能。 移动页面由页眉内容和页脚组成。 每个移动页面都包含在pmpage标记内。 移动视图可以包含在pmpage中的单个页面或多个页面每个页面都有自己的标识符。 在此示例中我们将创建两个构成两个移动页面的视图第二个页面可通过第一个页面上的链接访问。 可以使用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 xmlnshttp://www.w3.org/1999/xhtmlxmlns:hhttp://xmlns.jcp.org/jsf/htmlxmlns:phttp://primefaces.org/uixmlns:fhttp://xmlns.jcp.org/jsf/corexmlns:pmhttp://primefaces.org/mobilexmlns:pthttp://xmlns.jcp.org/jsf/passthroughf:view renderKitIdPRIMEFACES_MOBILEh:head/h:headh:bodypm:page idcustomerListingpm:headerAcme Pools/pm:headerpm:contenth:form idindexFormp:panel headerAcme Pools Customer Listingp:dataList iddatalistvalue#{customerController.items}varitem paginatortruept:data-rolelistview pt:data-filtertruerows10rowsPerPageTemplate10,20,30,40,50p:commandLinkaction#{customerController.loadCustomer}f:param namecustomer value#{item.customerId}/h:panelGrouph:outputText value#{item.customerId} - #{item.name}/br/h:outputText value#{item.email}//h:panelGroup/p:commandLink/p:dataList/p:panel/h:form/pm:contentpm:footerAuthor: Josh Juneau/pm:footer/pm:page/h:body/f:view
/html 如您所见我们通过fview标记中的规范来标记PrimeFaces Mobile使用的视图。 然后我们创建一个pmpage并且在页面内部具有pmheaderpmcontent和pmfooter的部分。 主要内容包括一个显示客户数据的PrimeFaces移动数据列表该数据包装在apcommandLink组件中。 单击链接后将调用{customerController.loadCustomer}方法并传递所选客户的ID。 请注意DataList组件使用直通属性来指定data-role和data-filter HTML5属性。 这些用于为用户提供更丰富的体验。 筛选器使用户可以轻松地开始在筛选器文本框中输入值并缩短列表以仅包含包含键入文本的记录。 结果视图如图2所示。 图2移动视图 清单2中的代码包含loadCustomer的实现。 客户ID传递到EJB的find方法然后返回选定的客户数据。 清单2CustomerController 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所示。 清单3customerInfo.xhtml视图 ?xml version1.0 encodingUTF-8 ?
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlnshttp://www.w3.org/1999/xhtmlxmlns:hhttp://xmlns.jcp.org/jsf/htmlxmlns:phttp://primefaces.org/uixmlns:fhttp://xmlns.jcp.org/jsf/corexmlns:pmhttp://primefaces.org/mobilef:view renderKitIdPRIMEFACES_MOBILEh:head/h:headh:bodypm:page idcustomerInfopm:headerAcme Pools/pm:headerpm:contenth:formp:panel headerAcme Pools Customer Information#{customerController.selected.name}br/#{customerController.selected.addressline1}br/#{customerController.selected.addressline2}br/#{customerController.selected.phone}/p:panelp:commandLink actionindex?transitionslide valueGo Back//h:form/pm:contentpm:footerAuthor: 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文章。 资源资源 PrimeFaces展示柜 http : //www.primefaces.org/showcase/mobile/ jQuery Mobile http //jquerymobile.com/ 翻译自: https://www.javacodegeeks.com/2014/11/getting-started-with-primefaces-mobile.html
