primefaces_PrimeFaces：在动态生成的对话框中打开外部页面
primefaces
我已經(jīng)在即將出版的PrimeFaces Cookbook版本2中寫過一篇食譜的博客。 在這篇文章中，我想發(fā)表第二篇關(guān)于一個名為Dialog Framework的小型框架的文章。 我個人喜歡它，因為我記得我為使用Struts框架付出同樣的代價。 當您想將外部頁面加載到彈出窗口中并向該頁面提交一些數(shù)據(jù)時，您必須調(diào)用window.open并使用隱藏表單，將傳遞的值設置為隱藏字段，通過JavaScript將表單提交給外部頁面，然后等到該頁面已準備好在window.onload或document.ready 。 很多繁瑣的工作。 PrimeFaces可以為您完成這項工作，此外， p:dialog還提供了漂亮的用戶界面來替代彈出窗口。
PrimeFaces對話框的常規(guī)用法是使用p:dialog的聲明方法。 除了這種聲明式方法之外，還有一種編程方法。 編程方法基于編程API，其中在運行時創(chuàng)建和銷毀對話框。 它稱為Dialog Framework 。 對話框框架用于在動態(tài)生成的對話框中打開外部頁面。 用法很簡單， RequestContext提供兩個方法： openDialog和closeDialog允許打開和關(guān)閉動態(tài)對話框。 此外，對話框框架還可以將數(shù)據(jù)從對話框中顯示的頁面?zhèn)骰氐秸{(diào)用者頁面。
在本食譜中，我們將演示Dialog Framework中可用的所有功能。 我們將以編程方式打開一個帶有選項的對話框，并將參數(shù)傳遞給該對話框中顯示的頁面。 我們還將滿足在源（調(diào)用方）頁面和對話框之間進行通信的可能性。
做好準備
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>怎么做…
我們將開發(fā)一個帶有單選按鈕的頁面，以選擇一本可用的PrimeFaces圖書進行評級。 單擊按鈕“ Rate the selected book后，評分本身將在對話框中發(fā)生。
屏幕快照的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>下一個屏幕截圖演示了對話框的外觀。
單擊評級星或取消符號將關(guān)閉對話框。 源（呼叫者）頁面顯示一條消息，其中所選的評級值在0到5之間。
最有趣的部分是bean中的邏輯。 豆DialogFrameworkBean通過調(diào)用方法打開的對話框中的等級頁面openDialog()與結(jié)果，選項和POST參數(shù)上RequestContext實例。 此外，bean定義了一個AJAX偵聽器onDialogReturn() ，當對話框關(guān)閉后從對話框返回數(shù)據(jù)（選定的評級）時，將調(diào)用該偵聽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定義了兩個偵聽器。 當用戶分別單擊星號和取消符號時，將調(diào)用它們。 我們呼吁有closeDialog()上RequestContext實例來觸發(fā)對話框關(guān)閉和額定電流值傳遞給聽眾提到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方法，可在運行時動態(tài)打開對話框。 第一個只有一個參數(shù)–用于解決導航案例的邏輯結(jié)果。 第二個參數(shù)包含三個參數(shù)-結(jié)果，對話框的配置選項和發(fā)送到對話框中顯示的視圖的參數(shù)。 在示例中，我們使用了第二個變體。 選項作為鍵值對放入Map中。 參數(shù)也放入Map 。 在我們的案例中，我們輸入所選書籍的名稱。 之后，通過f:viewParam在對話框頁面bookRating.xhtml接收該名稱。 f:viewParam將傳輸?shù)膮?shù)設置到BookRatingBean ，以便在Rating組件上方的標題中可用。
提示：請參閱《 PrimeFaces用戶指南》以查看受支持對話框的配置選項的完整列表。
讓我們經(jīng)歷請求-響應生命周期。 一旦收到由命令按鈕引起的請求響應，就會創(chuàng)建一個對話框，其中包含iframe 。 iframe的URL指向整頁，在本例中為bookRating.xhtml 。 該頁面將向下流并顯示在對話框中。 如您所見，總是有兩個請求：第一個初始POST和第二個GET由iframe發(fā)送。 請注意，對話框框架僅適用于初始AJAX請求。 非AJAX請求將被忽略。 另請注意，對話框的標題取自HTML title元素。
正如我們上面已經(jīng)提到，這個對話框可以通過編程關(guān)閉invoking該方法closeDialog上RequestContext實例。 在調(diào)用者頁面上，觸發(fā)對話框的按鈕需要有一個dialogReturn事件的AJAX偵聽器，以便能夠從對話框接收任何數(shù)據(jù)。 數(shù)據(jù)作為參數(shù)傳遞給方法closeDialog(Object data) 。 在示例中，我們傳遞了一個正整數(shù)值rateEvent.getRating()或0 。
翻譯自: https://www.javacodegeeks.com/2015/01/primefaces-opening-external-pages-in-dynamically-generated-dialog.html
primefaces
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的primefaces_PrimeFaces：在动态生成的对话框中打开外部页面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 权益净利率计算公式 权益净利率计算公式是
- 下一篇： java编译器jdk版本_以编程方式确定