當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

PrimeFaces Mobile入门

發布時間：2023/12/3 编程问答 71 豆豆

生活随笔收集整理的這篇文章主要介紹了 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文章。

資源資源

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 Mobile入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

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