PrimeFaces Mobile入门
介紹
如果您已經(jīng)開發(fā)了利用PrimeFaces的應(yīng)用程序,或者打算開發(fā)可在臺式機(jī)和移動設(shè)備上使用的Web應(yīng)用程序,請考慮將PrimeFaces Mobile用于您的移動實(shí)施。 這篇博客文章將介紹一些基礎(chǔ)知識,以幫助您開始為現(xiàn)有的PrimeFaces應(yīng)用程序開發(fā)移動界面。 但是,可以將相同的過程應(yīng)用于從頭開始編寫的應(yīng)用程序。 本文是我目前為OTN寫的一篇文章的前一篇,它將更詳細(xì)地介紹PrimeFaces Mobile API。 該文章將于今年晚些時(shí)候發(fā)表。
掌握移動思維
移動項(xiàng)目中最重要的部分之一就是進(jìn)入移動思維模式。 雖然您可以在標(biāo)準(zhǔn)的Web應(yīng)用程序上使用一組組件,但這些組件在轉(zhuǎn)移到較小的屏幕時(shí)可能無法提供最佳的體驗(yàn)。 因此,您需要考慮用戶將如何在小屏幕上與應(yīng)用程序進(jìn)行交互,并為他們提供最方便的用戶界面。 需要考慮的一些事情是您希望用戶輸入的文本量。 如果它們是在小型設(shè)備上,則鍵入大量文本可能很麻煩,因此我們希望為他們提供易于使用的組件,使其盡可能少地鍵入,甚至可以從列表中進(jìn)行選擇。 我們還需要考慮房地產(chǎn)(不是房地產(chǎn)市場)。 如果用戶沒有足夠的屏幕輕松瀏覽應(yīng)用程序,則在屏幕的頂部或底部添加菜單可能對用戶沒有好處。
這些只是為移動設(shè)備開發(fā)應(yīng)用程序時(shí)出現(xiàn)的幾個(gè)問題。 PrimeFaces Mobile基于領(lǐng)先的基于HTML5的移動UI框架之一,因此非常適合在這些領(lǐng)域提供幫助。 PrimeFaces Mobile由許多UI組件組成,可以使用戶在移動設(shè)備上提高生產(chǎn)力。 如果看一下PrimeFaces展示柜,您會看到許多這些移動組件正在運(yùn)行。 這使您可以了解這些組件的外觀以及它們對用戶的反應(yīng)。 建議您在智能手機(jī)或平板電腦等移動設(shè)備上訪問PrimeFaces移動展示柜,以最好地了解它們的反應(yīng)。
創(chuàng)建移動根
現(xiàn)在,您已經(jīng)對一些移動設(shè)計(jì)概念有了基本的了解,讓我們看一下開始使用PrimeFaces mobile創(chuàng)建移動視圖有多么容易。 在PrimeFaces 5之前,移動版是單獨(dú)的下載,需要包含在您的項(xiàng)目中。 現(xiàn)在,作為PrimeFaces 5的一部分進(jìn)行打包,使用PrimeFaces Mobile變得比以往任何時(shí)候都更加容易。這使得在PrimeFaces上為標(biāo)準(zhǔn)瀏覽器構(gòu)建企業(yè)Web應(yīng)用程序變得容易,然后為移動設(shè)備構(gòu)建單獨(dú)的視圖,通常每種方法都使用相同的后端業(yè)務(wù)方法。 我建議創(chuàng)建一個(gè)專用于移動設(shè)備用戶的起點(diǎn)或“根”視圖。 我還建議根據(jù)需要?jiǎng)?chuàng)建一個(gè)單獨(dú)的MobileNavigationController類來處理整個(gè)移動視圖中的導(dǎo)航。 我們可以利用移動根視圖來設(shè)置鉤子,以使用MobileNavigationController與標(biāo)準(zhǔn)Web應(yīng)用程序?qū)Ш健?
出于本文的目的,我們簡單地將其移動根稱為mobileRoot.xhtml。 在這種情況下,mobleRoot.xhtml可能類似于以下內(nèi)容:
<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設(shè)置為運(yùn)動狀態(tài)。 從這一點(diǎn)出發(fā),導(dǎo)航可以將用戶帶到應(yīng)用程序的主要移動視圖,并且還可以設(shè)置任何其他必要的配置。 還可以使用addtohomescreen.js腳本( http://cubiq.org/add-to-home-screen )提供一個(gè)漂亮的按鈕,以建議移動設(shè)備用戶將移動應(yīng)用程序添加到其主屏幕以獲得更豐富的體驗(yàn)。 我將在以后的文章或即將發(fā)表的OTN文章中介紹全屏Web應(yīng)用程序的一些其他自定義配置。
創(chuàng)建一個(gè)簡單的移動視圖
為用戶提供訪問移動視圖的清晰路徑后,我們需要確保使用PrimeFaces移動渲染工具包顯示移動視圖。 要標(biāo)記視圖與PrimeFaces Mobile一起使用,請?jiān)谝晥D的<f:view>標(biāo)記中提供“ renderKitId”屬性,并將PRIMEFACES_MOBILE用作該值。
<f:view renderKitId="PRIMEFACES_MOBILE">建立PrimeFaces Mobile視圖的另一個(gè)要求是添加移動名稱空間(xmlns:pm =“ http://primefaces.org/mobile”),因?yàn)樗鼘⒂糜诿總€(gè)PrimeFaces Mobile特定組件。 包括JSF直通(xmlns:pt =“ http://xmlns.jcp.org/jsf/passthrough”)命名空間也是一個(gè)好主意,因?yàn)槲覀兛赡芟M媚承〩TML5特定的功能。
移動頁面由頁眉,內(nèi)容和頁腳組成。 每個(gè)移動頁面都包含在<pm:page>標(biāo)記內(nèi)。 移動視圖可以包含在<pm:page>中的單個(gè)頁面或多個(gè)頁面,每個(gè)頁面都有自己的標(biāo)識符。 在此示例中,我們將創(chuàng)建兩個(gè)構(gòu)成兩個(gè)移動頁面的視圖,第二個(gè)頁面可通過第一個(gè)頁面上的鏈接訪問。 可以使用Facelets模板來構(gòu)建整個(gè)移動應(yīng)用程序解決方案,但是在本示例中,我們將分別創(chuàng)建每個(gè)視圖。 也可以使用當(dāng)前非常流行的“單頁”應(yīng)用程序策略進(jìn)行開發(fā)……我們將在OTN文章中介紹更多內(nèi)容。
這篇文章中的PrimeFaces Mobile示例以及即將發(fā)布的OTN文章都基于我在OTN的“企業(yè)PrimeFaces”文章中使用的Acme Pools示例( http://www.oracle.com/technetwork/articles/java/ java-primefaces-2191907.html )。 在完整的Web版本中,根視圖在表視圖中包含Acme Pool客戶列表(圖1)。 我們希望轉(zhuǎn)換此視圖(和其他視圖)以使其在移動設(shè)備上更好地工作,并允許選擇每一行,這將使我們獲得有關(guān)所選客戶的更多信息。
圖1:標(biāo)準(zhǔn)Acme池視圖
就本文而言,我們將使用初始客戶視圖將其轉(zhuǎn)換為移動視圖。 該視圖將包含一個(gè)客戶列表,如果您在視圖中選擇特定的行,則將顯示有關(guān)所選客戶的更多信息。 要使用PrimeFaces移動版顯示表,必須使用DataList組件,該組件為每行數(shù)據(jù)提供方便的“可單擊”鏈接或按鈕。 DataList與DataTable的不同之處在于,DataList中沒有列,但是每行數(shù)據(jù)都有一組相關(guān)數(shù)據(jù)。 數(shù)據(jù)組應(yīng)使用可單擊的鏈接包裝,然后將為用戶提供導(dǎo)航到第二個(gè)視圖,以顯示有關(guān)所選項(xiàng)目的更多詳細(xì)信息。 以下代碼用于開發(fā)客戶數(shù)據(jù)列表的移動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>標(biāo)記中的規(guī)范來標(biāo)記PrimeFaces Mobile使用的視圖。 然后,我們創(chuàng)建一個(gè)<pm:page>,并且在頁面內(nèi)部具有<pm:header>,<pm:content>和<pm:footer>的部分。 主要內(nèi)容包括一個(gè)顯示客戶數(shù)據(jù)的PrimeFaces移動數(shù)據(jù)列表,該數(shù)據(jù)包裝在ap:commandLink組件中。 單擊鏈接后,將調(diào)用#{customerController.loadCustomer}方法,并傳遞所選客戶的ID。 請注意,DataList組件使用直通屬性來指定data-role和data-filter HTML5屬性。 這些用于為用戶提供更豐富的體驗(yàn)。 篩選器使用戶可以輕松地開始在篩選器文本框中輸入值,并縮短列表以僅包含包含鍵入文本的記錄。 結(jié)果視圖如圖2所示。
圖2:移動視圖
清單2中的代碼包含loadCustomer()的實(shí)現(xiàn)。 客戶ID傳遞到EJB的find()方法,然后返回選定的客戶數(shù)據(jù)。
清單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中選擇一個(gè)客戶時(shí),將調(diào)用loadCustomer()方法,并導(dǎo)致導(dǎo)航到我們的第二個(gè)移動視圖customerInfo.xhtml(圖3)。 第二個(gè)移動視圖基本上顯示了客戶詳細(xì)信息,并提供了一個(gè)鏈接,可返回到客戶的數(shù)據(jù)列表。 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視圖包含與原始移動視圖相同的結(jié)構(gòu)。 沒有添加特殊的移動組件,但是從圖3中可以看到,標(biāo)準(zhǔn)的PrimeFaces面板的樣式設(shè)計(jì)為可以在移動設(shè)備上很好地顯示。
圖3:移動視圖選擇
結(jié)論
總結(jié)一下使用PrimeFaces移動版的簡要信息。 如您所見,很容易為您的應(yīng)用程序開發(fā)一個(gè)移動界面。 PrimeFaces移動套件還包括用于導(dǎo)航,事件等的自定義框架,可輕松提供出色的移動體驗(yàn)。 例如,事件框架包括一些滑動事件以及Taphold。 甚至有可能掛鉤到JQuery Mobile框架,以向您的應(yīng)用程序提供更多移動事件。
PrimeFaces移動導(dǎo)航框架由過渡組成,最終可為您的應(yīng)用程序提供更流暢的感覺。 例如,可以提供“幻燈片”到按鈕導(dǎo)航的過渡,這將導(dǎo)致UI視圖在單擊按鈕時(shí)滑入焦點(diǎn)。 所有這些都可以使用PrimeFaces Showcase進(jìn)行測試。
有關(guān)PrimeFaces mobile的這些和其他重要功能的更多信息,請關(guān)注我即將發(fā)表的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
總結(jié)
以上是生活随笔為你收集整理的PrimeFaces Mobile入门的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 怀孕多久跟公司备案有效(怀孕多久跟公司备
- 下一篇: 在WildFly和OpenShift上的