當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時(shí)間：2023/12/3 编程问答 42 豆豆

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

我已經(jīng)在即將出版的PrimeFaces Cookbook 2版中寫了一篇關(guān)于食譜的博客。在這篇文章中，我想發(fā)表第二篇關(guān)于一個(gè)名為Dialog Framework的小型框架的文章。我個(gè)人喜歡它，因?yàn)槲矣浀梦覟槭褂肧truts框架付出同樣的努力而付出的代價(jià)。當(dāng)您想將外部頁(yè)面加載到彈出窗口中并向該頁(yè)面提交一些數(shù)據(jù)時(shí)，您必須使用隱藏表單調(diào)用window.open ，將傳遞的值設(shè)置為隱藏字段，通過(guò)JavaScript將表單提交給外部頁(yè)面，然后等到該頁(yè)面已準(zhǔn)備好在window.onload或document.ready 。很多繁瑣的工作。 PrimeFaces可以為您完成這項(xiàng)工作，此外， p:dialog還提供了漂亮的用戶界面來(lái)替代彈出窗口。

PrimeFaces對(duì)話框的常規(guī)用法是使用p:dialog的聲明方法。除了這種聲明式方法之外，還有一種編程方法。編程方法基于編程API，其中在運(yùn)行時(shí)創(chuàng)建和銷毀對(duì)話框。它稱為Dialog Framework 。對(duì)話框框架用于在動(dòng)態(tài)生成的對(duì)話框中打開外部頁(yè)面。用法很簡(jiǎn)單， RequestContext提供兩個(gè)方法： openDialog和closeDialog允許打開和關(guān)閉動(dòng)態(tài)對(duì)話框。此外，對(duì)話框架使將數(shù)據(jù)從對(duì)話中顯示的頁(yè)面?zhèn)骰刂琳{(diào)用者頁(yè)面成為可能。

在本食譜中，我們將演示Dialog Framework中可用的所有功能。我們將以編程方式打開一個(gè)帶有選項(xiàng)的對(duì)話框，并將參數(shù)傳遞給該對(duì)話框中顯示的頁(yè)面。我們還將滿足在源（調(diào)用方）頁(yè)面和對(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è)帶有單選按鈕的頁(yè)面，以選擇一本可用的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ì)話框中的頁(yè)面是整頁(yè)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ì)話框。源（呼叫者）頁(yè)面顯示一條消息，其中所選的評(píng)級(jí)值在0到5之間。

最有趣的部分是bean中的邏輯。豆DialogFrameworkBean通過(guò)調(diào)用方法打開的對(duì)話框中的等級(jí)頁(yè)面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í)例來(lái)觸發(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 。在我們的案例中，我們輸入所選書籍的名稱。之后，通過(guò)f:viewParam在對(duì)話框頁(yè)面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指向整頁(yè)，在本例中為bookRating.xhtml 。該頁(yè)面將向下流并顯示在對(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ò)編程關(guān)閉invoking該方法closeDialog上RequestContext實(shí)例。在調(diào)用者頁(yè)面上，觸發(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)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：快速检查REST API是否有效的方法-
下一篇：电脑放偏振3d电影(放映机3d偏振镜片)