很多人都知道，用：popup = window.open(url, name, features);popup.focus();可以弹出一个新的浏览器的窗口，这是一个十分方便常用的功能。但是如何在JSF中与弹出窗口交换数据？是很多人关心的问题。这里基于Core JSF书中的例子，谈到两个方法，列举到这里，希望对有需求的人有所帮助。
第一种方法较为简单，和所有其他的基于网络编程语言一样，使用URL链接来提交你所需要的变量和变量值。比如我们的例子中，使用：
window.open(“popup.faces?country=” + country[i].value, “popup”, features);
来将ID为country的控件的值提交为一个叫做country的URL变量。然后在JSF中使用“param.country”来获取这个值。
具体例子实现：
function doPopup(source) {
country = source.form[source.form.id + ":country"];
for ( var i = 0; i < country.length; i++) {
if (country[i].checked) {
popup = window.open("popup1.xhtml?country="
+ country[i].value, "popup",
"height=300,width=200,toolbar=no,menubar=no,"
+ "scrollbars=yes");
popup.openerFormId = source.form.id;
popup.focus();
}
}
}
function doSave(value) {
var formId = window.openerFormId;
opener.document.forms[formId][formId + ":state"].value = value;
window.close();
}<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<h:outputScript library="javascript" name="popup1.js"/>
<title>Popup window technique 1</title>
</h:head>
<h:body>
<h:form>
<table>
<tr>
<td>Country:</td>
<td><h:selectOneRadio id="country" value="#{bb.country}">
<f:selectItem itemLabel="USA" itemValue="USA"/>
<f:selectItem itemLabel="Canada" itemValue="Canada"/>
</h:selectOneRadio></td>
</tr>
<tr>
<td>State/Province:</td>
<td><h:inputText id="state" value="#{bb.state}"/></td>
<td><h:commandButton value="..."
onclick="doPopup(this); return false;"/></td>
</tr>
</table>
<p><h:commandButton value="Next" action="index"/></p>
</h:form>
</h:body>
</html>这是弹出窗口的内容：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<h:outputScript library="javascript" name="popup1.js"/>
<title>Select a state/province</title>
</h:head>
<h:body>
<h:form>
<h:dataTable value="#{bb.states[param.country]}" var="state">
<h:column>
<h:outputLink value="#" onclick="doSave('#{state}');">
#{state}
</h:outputLink>
</h:column>
</h:dataTable>
</h:form>
</h:body>
</html>第二种方法，是使用隐藏的表单，并且使用form的”target”属性来将值提交到需要的目标。
<h:form id=”hidden” target=”popup”>
<h:inputHidden id=”country” value=”#{bb.country}”/>
<h:commandLink id=”go” action=”showStates”/>
</h:form>
需要注意的是：
- Target=”‘的目标要指向到具体的弹出窗口，这样浏览器才会将你所需要的值提交给你所需要的页面。
- bb.country的值，由bb bean来维护
- commandlink的action=”"部分的输出可以用来给JSF navigation
handler做各种判断
JS中使用以下方式来获取这个隐藏表单所提交的值：
document.getElementById(“hidden:country”).value = country[i].value;
document.getElementById(“hidden:go”).onclick(null);
具体实现如下：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<h:outputScript library="javascript" name="popup1.js"/>
<title>Popup window technique 2</title>
</h:head>
<h:body>
<h:form>
<table>
<tr>
<td>Country:</td>
<td><h:selectOneRadio id="country" value="#{bb.country}">
<f:selectItem itemLabel="USA" itemValue="USA"/>
<f:selectItem itemLabel="Canada" itemValue="Canada"/>
</h:selectOneRadio></td>
</tr>
<tr>
<td>State/Province:</td>
<td><h:inputText id="state" value="#{bb.state}"/></td>
<td><h:commandButton value="..."
onclick="doPopup(this); return false;"/></td>
</tr>
</table>
<p><h:commandButton value="Next" action="index"/></p>
</h:form>
<!-- This hidden form sends a request to a popup window. -->
<h:form id="hidden" target="popup">
<h:inputHidden id="country" value="#{bb.country}"/>
<h:commandLink id="go" action="popup2"/>
</h:form>
</h:body>
</html><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<h:outputScript library="javascript" name="popup1.js"/>
<title>Select a state/province</title>
</h:head>
<h:body>
<h:form>
<h:dataTable value="#{bb.statesForCountry}" var="state">
<h:column>
<h:outputLink value="#" onclick="doSave('#{state}');">
#{state}
</h:outputLink>
</h:column>
</h:dataTable>
</h:form>
</h:body>
</html>function doPopup(source) {
country = source.form[source.form.id + ":country"];
for (var i = 0; i < country.length; i++) {
if (country[i].checked) {
popup = window.open("", "/faces/popup2.xhtml",
"height=300,width=200,toolbar=no,menubar=no,scrollbars=yes");
popup.openerFormId = source.form.id;
popup.focus();
document.getElementById("hidden:country").value = country[i].value;
document.getElementById("hidden:go").onclick(null);
}
}
}
function doSave(value) {
var formId = window.openerFormId;
opener.document.forms[formId][formId + ":state"].value = value;
window.close();
}
