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

我已经在即将出版的PrimeFaces Cookbook 2版中写了一篇关于食谱的博客。 在这篇文章中,我想发表第二篇关于一个名为Dialog Framework的小型框架的文章。 我个人喜欢它,因为我记得我为使用Struts框架付出同样的努力而付出的代价。 当您想将外部页面加载到弹出窗口中并向该页面提交一些数据时,您必须使用隐藏表单调用window.open ,将传递的值设置为隐藏字段,通过JavaScript将表单提交给外部页面,然后等到该页面已准备好在window.onloaddocument.ready 。 很多繁琐的工作。 PrimeFaces可以为您完成这项工作,此外, p:dialog还提供了漂亮的用户界面来替代弹出窗口。

PrimeFaces对话框的常规用法是使用p:dialog的声明方法。 除了这种声明式方法之外,还有一种编程方法。 编程方法基于编程API,其中在运行时创建和销毁对话框。 它称为Dialog Framework 。 对话框框架用于在动态生成的对话框中打开外部页面。 用法很简单, RequestContext提供两个方法: openDialogcloseDialog允许打开和关闭动态对话框。 此外,对话框架使将数据从对话中显示的页面传回至调用者页面成为可能。

在本食谱中,我们将演示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后,评分本身将在对话框中发生。

3427_11_04

屏幕快照的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>

下一个屏幕截图演示了对话框的外观。

3427_11_05

单击等级星级或取消符号将关闭对话框。 源(呼叫者)页面显示一条消息,其中所选的评级值在0到5之间。

3427_11_06

最有趣的部分是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 BookRatingBeanRating 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用户指南》以查看支持的对话框的配置选项的完整列表。

让我们经历一下请求-响应生命周期。 一旦收到由命令按钮引起的请求响应,便会创建一个对话框,其中包含iframeiframe的URL指向整页,在本例中为bookRating.xhtml 。 该页面将向下流并显示在对话框中。 如您所见,总是有两个请求:第一个初始POST和第二个GET由iframe发送。 请注意,对话框框架仅适用于初始AJAX请求。 非AJAX请求将被忽略。 另请注意,对话框的标题取自HTML title元素。

正如我们上面已经提到,这个对话框可以通过编程关闭invoking该方法closeDialogRequestContext实例。 在调用者页面上,触发对话框的按钮需要具有一个dialogReturn事件的AJAX侦听器,以便能够从对话框接收任何数据。 数据作为参数传递给方法closeDialog(Object data) 。 在示例中,我们传递了一个正整数值rateEvent.getRating()0

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361128.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ctags: 提示错误ctags: unrecognized option '--format=2'

ctags&#xff1a; 提示错误ctags: unrecognized option --format2 原来的 taglist 插件用的好好的&#xff0c;自从安装了 emacs 之后&#xff0c;每次触发 taglist 都提示以下错误&#xff1a; Taglist: Failed to generate tags for ....(a file) ctags: unrecognized optio…

vue-router之 beforeRouteEnter

beforeRouteEnter在每次路由切换都执行 ,而项目优化后,切换路由mounted只在最开始执行一次beforeRouteEnter的具体用法可参考官方文档 https://cn.vuejs.org/v2/guide/migration-vue-router.html#activate-替换 需要注意的是&#xff1a;在这期间路由跳转携带的数据发生改变会影…

突破极限–如何将AeroGear Unified Push用于Java EE和Node.js

在2014年底的AeroGear队宣布红帽的JBoss统一推送服务器的可用性xPaaS 。 让我们仔细看看&#xff01; 总览 统一推送服务器允许开发人员将本地推送消息发送到Apple的推送通知服务&#xff08;APNS&#xff09;和Google的云消息传递&#xff08;GCM&#xff09;。 它具有一个内…

sqlserver 中事务与错误机制的处理

成功返回1并提交事务,错误返回0并回滚事务 BEGIN try begin tran --其中userName为varchar类型,数据库中该字段存在不为int类型的数据,必然导致错误 update WebOA_User_t SET UserNameUserName where UserName1 select 1 commit tran end try begin catch select 0 r…

js 获取json数组里面数组的长度

作为一个前端页面开发者第一次处理json数据&#xff0c;遇到了‘js 获取json数组里面数组的长度’&#xff1f;竟然不知道 json没有.length属性&#xff08;真是要嘲讽下自己&#xff09;&#xff0c;少壮不努力老大徒伤悲啊&#xff01;以前都是去寻求男朋友帮助&#xff0c;但…

针对WildFly和EAP运行Java Mission Control和Flight Recorder

Java Mission Control &#xff08;JMC&#xff09;使您可以监视和管理Java应用程序&#xff0c;而无需引入通常与这些类型的工具相关的性能开销。 它使用为正常的JVM动态优化而收集的数据&#xff0c;从而形成了一种非常轻量级的方法来观察和分析应用程序代码中的问题。 JMC由…

C#堆栈和堆的讲解

OS和CLR通常将用于容纳数据的内存划分为两个独立的区域&#xff0c;每个区域都采用截然不同的方式来管理&#xff1a;堆栈&#xff08;Stack&#xff09;和堆&#xff08;heap&#xff09;。&#xff08;1&#xff09; 调用一个方法时&#xff0c;它的参数以及它的局部变…

jQuery中的常用内容总结(一)

jQuery中的常用内容总结(一) 前言 不好意思(✿◠‿◠)&#xff0c;由于回家看病以及处理一些其它事情耽搁了&#xff0c;不然这篇博客本该上上周或者上周写的&#xff1b;同时闲谈几句&#xff1a;在这里建议各位开发的童鞋&#xff0c;如果有疾病尽快治疗&#xff0c;不要拖&a…

关于Firefox在Win8下界面显示错乱的解决方法

最近又把Windows8安装上&#xff0c;由于平常做前端开发用的最多的还是Firefox&#xff0c;因此在家的机器上也安装上Firefox&#xff0c;但使用中发现Firefox界面老是错误&#xff0c;特别是那种乱套的颜色&#xff0c;不得其解&#xff0c;查看设置发现默认启用了硬件加速&am…

react ant design路由配置

最初的时候&#xff0c;只使用了antd中的menu&#xff0c;header和footer都是自己写的组件&#xff0c;在写路由时&#xff0c;总是报如下错误&#xff1a; 相关的路由配置如下&#xff1a; 在网上查的说是组件未暴露出去或者是return 这一行必须有个括号或者标签&#xff0c;我…

线程魔术技巧:Java线程可以做的5件事

Java线程最鲜为人知的事实和用例是什么&#xff1f; 有些人喜欢爬山&#xff0c;有些人喜欢跳伞。 我&#xff0c;我喜欢Java。 我喜欢它的一件事是&#xff0c;您永不停止学习。 您每天使用的工具通常可以向您展示全新的方面&#xff0c;以及您还没有机会看到的方法和有趣的用…

强制删除tfs未迁入项的两个方法。

方法1&#xff1a; 打开Vs2008的命令提示&#xff1a; 查看用户的工作区&#xff1a; 输入&#xff1a; Tf workspaces /owner:所有者或* /server:服务器名称或IP ex: tf workspaces /owner:stcct(所有者) /server:203.156.1.100(Ip地址) 删除用户的未迁入项&#xff1a; 输…

VUE 全选

<div id"vue_det"> <p>全选:</p> <input type"checkbox" id"checkbox" v-model"checked" change"changAllChecked"/> <label for"checkbox"> {{checked}} <…

RabbitMQ –使用Spring集成Java DSL串行处理消息

如果您曾经需要使用RabbitMQ来串行处理消息&#xff0c;并且有一群监听器来处理消息&#xff0c;那么我所看到的最好方法是在监听器上使用“独占消费者”标志&#xff0c;每个监听器上有1个线程来处理消息。 专用使用者标志可确保只有1个使用者可以从特定队列中读取消息&#…

添加删除约束脚本 ::fn_get_sql

添加约束&#xff1a;alter table table1 add constraint pk_name primary key (name) --添加主健约束,名称作为主健&#xff1b; alter table table1 add constraint pk_name unique (name) --添加唯一约束,…

jquery 实现 点击把数据移动右侧 点击再次移回到左侧

2018年第一发 希望新的一年和大家一下学习更多知识 JS&#xff1a;//把数据左边挪到了右边&#xff0c;再从右边移动回来function moveOption(e1, e2){ $("#" e1 " option").each(function(){ if($(this).is(:selected)){ var oVal…

企业Java中事务隔离级别的初学者指南

介绍 基于ACID事务属性的关系数据库强一致性模型。 在本文中&#xff0c;我们将阐明对资源本地事务和JTA事务使用不同的事务隔离级别和各种配置模式的背后原因。 隔离和一致性 在关系数据库系统中&#xff0c;原子性和持久性是严格的属性&#xff0c;而一致性和隔离性或多或少…

点击左侧跳到右侧

效果图 JS部分 function moveOption(e1, e2){ try{ for(var i0;i<e1.options.length;i ){ if(e1.options[i].selected){ var e e1.options[i]; e2.options.add(new Option(e.text, e.value)); e1.remove(i); iii-1 } } } catch(e){}} HTML以及CSS部分 <for…

好的微服务架构=企业服务总线(ESB)的灭亡?

这些天&#xff0c;似乎每个人都在谈论微服务。 您可以在数百篇文章和博客文章中读到很多有关该主题的文章&#xff0c;但是我建议的出发点是Martin Fowler的这篇文章 &#xff0c; 该文章引发了有关这种新建筑概念的大量讨论。 本文介绍了创建良好的微服务体系结构所面临的挑战…

移动端UC /QQ 浏览器的部分私有Meta 属性

<meta name"format-detection" content "telephoneno"/> 格式检测 禁止识别我们页面中的数字&#xff0c;防止把其当作电话识别&#xff0c;emailno 禁止识别邮箱 IOS设备对META的私有属性 <meta name"apple-mobile-web-app-capable&qu…