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

编程问答

primefaces_PrimeFaces Mobile入门

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

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