當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

PrimeFaces Mobile入门

發(fā)布時(shí)間：2023/12/3 编程问答 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 PrimeFaces Mobile入门小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

介紹

如果您已經(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)槲覀兛赡芟Ｍ媚承〩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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：怀孕多久跟公司备案有效（怀孕多久跟公司备
下一篇：在WildFly和OpenShift上的