If in the previous recipe, you saw how to open a pop-up window, in this recipe, you will see how to implement a communication between parent pop-up windows. To understand our example, please refer to the following figure:
First the user selects one of the three car companies (represented by three radio buttons) and then presses the Browse button. The action will be to open a pop-up window that contains a set of links with the names of cars constructed by the selected company. When a car is selected, the pop-up window closes, and the parent text field (labelled with Select car text) will be automatically filled with the name of the selected car.
We have developed this recipe with NetBeans 6.8, JSF 2.0, and GlassFish v3. The JSF 2.0 classes were obtained from the NetBeans JSF 2.0 bundled library.
Actually, everything you see in this recipe is a resume of parts of the previous recipes regarding JSF and JS. We use the window.open JS object to open a pop-up window, and we use JSF-JS communication to create a bridge between the main window (parent) and the pop-up window (child). After you see the code everything should be clear. The parent window is listed next:
<?xml version='1.0' ?>
<!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>
<title>Open a popup window</title>
<script type="text/javascript" language="javascript">
function carsPopup(){
var popup = null;
var companies = document.forms["formId"].
elements["formId:companyId"];
for (var company in companies) {
if (companies[company].checked){
popup = window.open("popupwindow.xhtml?company=" +
companies[company].value, "popup",
"height=350,width=250,toolbar=no,
menubar=no," + "scrollbars=yes");
popup.openerFormId = "formId";
parent-pop-up windowscommunication, implementingpopup.focus();
}
}
}
</script>
</h:head>
<h:body>
<h:form id="formId">
<h:panelGrid columns="3" border="1">
<f:facet name="header">
<h:outputText value="Car Chooser"/>
</f:facet>
<h:outputText value="Companies:"/>
<h:selectOneRadio id="companyId" value="#{bean.carCompany}">
<f:selectItem itemLabel="Renault" itemValue="Renault"/>
<f:selectItem itemLabel="Fiat" itemValue="Fiat"/>
<f:selectItem itemLabel="Dacia" itemValue="Dacia"/>
</h:selectOneRadio>
<h:outputText/>
<h:outputText value="Select car:"/>
<h:inputText id="carId" value="#{bean.carName}"/>
<h:commandButton id="btnId" value="Browse"
onclick="carsPopup(); return false;"/>
</h:panelGrid>
</h:form>
</h:body>
</html>
The parent window renders three radio buttons to list the car companies, and implement the onclick event of the Browse button, which calls a JS function responsible for displaying the pop-up window and passing it the selected company.
The pop-up window code is as shown next:
<?xml version='1.0' ?>
<!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>
<title>Open a popup window</title>
<script type="text/javascript" language="javascript">
function fillUpCarName(car) {
var formId = window.openerFormId;
opener.document.forms[formId][formId + ":carId"].value = car;
window.close();
}
</script>
</h:head>
<h:body>
<h:form>
<h:outputText value="Available cars
for #{param.company} company:" />
<h:dataTable value="#{bean.allCars[param.company]}" var="car">
<h:column>
<h:outputLink value="#" onclick="fillUpCarName('#{car}'),">
<h:outputText value="#{car}" />
</h:outputLink>
</h:column>
</h:dataTable>
</h:form>
</h:body>
</html>
The pop-up window renders the cars produced by the selected company. In addition, when a user clicks on a car, the fillUpCarName JS function is responsible for filling up the parent window's form with the name of the selected car and closing the pop-up window.
The helper managed bean used in this recipe is:
package bean;
import java.util.HashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class Bean {
private String carCompany = "Renault";
private String carName;
private Map<String, String[]> allCars = new HashMap<String,
String[]>();
private static final String[] carsRenault =
new String[]{"Clio", "Clio Estate", "Clio RS", "Symbol",
"Fluence", "Sedan", "Megane", "Megane Coupe",
"Megan Sport Tourer", "Scenic", "Grand Scenic",
"Kangoo", "Coupe", "Koleos", "Espace", "Laguna",
"Laguna Estate"};
private static final String[] carsFiat =
new String[]{"500", "Panda", "Punto Classic",
"Grande Punto Unico", "Albea", "Bravo", "Linea", "Croma",
"Sedici", "Doblo Panorama"};
private static final String[] carsDacia =
new String[]{"Sandero", "Logan", "Logan MCV",
"Van", "Pick-up"};
public Bean() {
allCars.put("Renault", carsRenault);
allCars.put("Fiat", carsFiat);
allCars.put("Dacia", carsDacia);
}
public String getCarCompany() {
return carCompany;
}
public void setCarCompany(String carCompany) {
this.carCompany = carCompany;
}
public String getCarName() {
return carName;
}
public void setCarName(String carName) {
this.carName = carName;
}
public Map<String, String[]> getAllCars() {
return allCars;
}
public void setAllCars(Map<String, String[]> allCars) {
this.allCars = allCars;
}
}
There are a few important mechanisms that interact in this application:
- Calling a JS function from JSF
- Opening a pop-up window with JSF and JS
- Passing variables from JS to JSF
- Passing variables from JSF to JS
- Getting variables from HTTP GET with JSF