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

编程问答

PrimeFaces：在动态生成的对话框中打开外部页面

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

生活随笔收集整理的這篇文章主要介紹了 PrimeFaces：在动态生成的对话框中打开外部页面小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

我已經在即將出版的PrimeFaces Cookbook 2版中寫了一篇關于食譜的博客。在這篇文章中，我想發表第二篇關于一個名為Dialog Framework的小型框架的文章。我個人喜歡它，因為我記得我為使用Struts框架付出同樣的努力而付出的代價。當您想將外部頁面加載到彈出窗口中并向該頁面提交一些數據時，您必須使用隱藏表單調用window.open ，將傳遞的值設置為隱藏字段，通過JavaScript將表單提交給外部頁面，然后等到該頁面已準備好在window.onload或document.ready 。很多繁瑣的工作。 PrimeFaces可以為您完成這項工作，此外， p:dialog還提供了漂亮的用戶界面來替代彈出窗口。

PrimeFaces對話框的常規用法是使用p:dialog的聲明方法。除了這種聲明式方法之外，還有一種編程方法。編程方法基于編程API，其中在運行時創建和銷毀對話框。它稱為Dialog Framework 。對話框框架用于在動態生成的對話框中打開外部頁面。用法很簡單， RequestContext提供兩個方法： openDialog和closeDialog允許打開和關閉動態對話框。此外，對話框架使將數據從對話中顯示的頁面傳回至調用者頁面成為可能。

在本食譜中，我們將演示Dialog Framework中可用的所有功能。我們將以編程方式打開一個帶有選項的對話框，并將參數傳遞給該對話框中顯示的頁面。我們還將滿足在源（調用方）頁面和對話框之間進行通信的可能性。

做好準備

Dialog Framework在faces-config.xml需要以下配置：

<application><action-listener>org.primefaces.application.DialogActionListener</action-listener><navigation-handler>org.primefaces.application.DialogNavigationHandler</navigation-handler><view-handler>org.primefaces.application.DialogViewHandler</view-handler> </application>

怎么做…

我們將開發一個帶有單選按鈕的頁面，以選擇一本可用的PrimeFaces圖書進行評級。單擊按鈕“ Rate the selected book后，評分本身將在對話框中發生。

屏幕快照的XHTML代碼段在下面列出。

<p:messages id="messages" showSummary="true" showDetail="false"/><p:selectOneRadio id="books" layout="pageDirection" value="#{dialogFrameworkBean.bookName}"><f:selectItem itemLabel="PrimeFaces Cookbook" itemValue="PrimeFaces Cookbook"/><f:selectItem itemLabel="PrimeFaces Starter" itemValue="PrimeFaces Starter"/><f:selectItem itemLabel="PrimeFaces Beginner's Guide" itemValue="PrimeFaces Beginner's Guide"/><f:selectItem itemLabel="PrimeFaces Blueprints" itemValue="PrimeFaces Blueprints"/> </p:selectOneRadio><p:commandButton value="Rate the selected book"process="@this books"actionListener="#{dialogFrameworkBean.showRatingDialog}"style="margin-top: 15px"><p:ajax event="dialogReturn" update="messages" listener="#{dialogFrameworkBean.onDialogReturn}"/> </p:commandButton>

對話框中的頁面是整頁bookRating.xhtml其中包含Rating組件p:rating 。它還顯示選擇進行評級的書的名稱。

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"xmlns:f="http://xmlns.jcp.org/jsf/core"xmlns:h="http://xmlns.jcp.org/jsf/html"xmlns:p="http://primefaces.org/ui"> <f:view contentType="text/html" locale="en"><f:metadata><f:viewParam name="bookName" value="#{bookRatingBean.bookName}"/></f:metadata><h:head><title>Rate the book!</title></h:head><h:body><h:form>What is your rating for the book <strong>#{bookRatingBean.bookName}</strong>?<p/><p:rating id="rating"><p:ajax event="rate" listener="#{bookRatingBean.onrate}"/><p:ajax event="cancel" listener="#{bookRatingBean.oncancel}"/></p:rating></h:form></h:body> </f:view> </html>

下一個屏幕截圖演示了對話框的外觀。

單擊等級星級或取消符號將關閉對話框。源（呼叫者）頁面顯示一條消息，其中所選的評級值在0到5之間。

最有趣的部分是bean中的邏輯。豆DialogFrameworkBean通過調用方法打開的對話框中的等級頁面openDialog()與結果，選項和POST參數上RequestContext實例。此外，bean定義了一個AJAX偵聽器onDialogReturn() ，當對話框關閉后從對話框返回數據（選定的評級）時，將調用該偵聽onDialogReturn() 。

@Named @ViewScoped public class DialogFrameworkBean implements Serializable {private String bookName;public void showRatingDialog() {Map<String, Object> options = new HashMap<String, Object>();options.put("modal", true);options.put("draggable", false);options.put("resizable", false);options.put("contentWidth", 500);options.put("contentHeight", 100);options.put("includeViewParams", true);Map<String, List<String>> params = new HashMap<String, List<String>>();List<String> values = new ArrayList<String>();values.add(bookName);params.put("bookName", values);RequestContext.getCurrentInstance().openDialog("/views/chapter11/bookRating", options, params);}public void onDialogReturn(SelectEvent event) {Object rating = event.getObject();FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "You rated the book with " + rating, null);FacesContext.getCurrentInstance().addMessage(null, message);}// getters / setters... }

Bean BookRatingBean為Rating component定義了兩個偵聽器。當用戶分別單擊星號和取消符號時，將調用它們。我們呼吁有closeDialog()上RequestContext實例來觸發對話框關閉和額定電流值傳遞給聽眾提到onDialogReturn()

@Named @RequestScoped public class BookRatingBean {private String bookName;public void onrate(RateEvent rateEvent) {RequestContext.getCurrentInstance().closeDialog(rateEvent.getRating());}public void oncancel() {RequestContext.getCurrentInstance().closeDialog(0);}// getters / setters... }

怎么運行的…

RequestContext提供了兩個同名openDialog方法，可在運行時動態打開對話框。第一個只有一個參數–用于解決導航案例的邏輯結果。第二個參數包含三個參數-結果，對話框的配置選項和發送到對話框中顯示的視圖的參數。在示例中，我們使用了第二個變體。選項作為鍵值對放入Map中。參數也放入Map 。在我們的案例中，我們輸入所選書籍的名稱。之后，通過f:viewParam在對話框頁面bookRating.xhtml接收該名稱。 f:viewParam將傳輸的參數設置到BookRatingBean ，以便在Rating組件上方的標題中可用。

提示：請參閱《 PrimeFaces用戶指南》以查看支持的對話框的配置選項的完整列表。

讓我們經歷一下請求-響應生命周期。一旦收到由命令按鈕引起的請求響應，便會創建一個對話框，其中包含iframe 。 iframe的URL指向整頁，在本例中為bookRating.xhtml 。該頁面將向下流并顯示在對話框中。如您所見，總是有兩個請求：第一個初始POST和第二個GET由iframe發送。請注意，對話框框架僅適用于初始AJAX請求。非AJAX請求將被忽略。另請注意，對話框的標題取自HTML title元素。

正如我們上面已經提到，這個對話框可以通過編程關閉invoking該方法closeDialog上RequestContext實例。在調用者頁面上，觸發對話框的按鈕需要具有一個dialogReturn事件的AJAX偵聽器，以便能夠從對話框接收任何數據。數據作為參數傳遞給方法closeDialog(Object data) 。在示例中，我們傳遞了一個正整數值rateEvent.getRating()或0 。

翻譯自: https://www.javacodegeeks.com/2015/01/primefaces-opening-external-pages-in-dynamically-generated-dialog.html

總結

以上是生活随笔為你收集整理的PrimeFaces：在动态生成的对话框中打开外部页面的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：快速检查REST API是否有效的方法-
下一篇：好的微服务架构=企业服务总线（ESB）的