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