|
The Subview tag creates a naming container (a container component with a
unique identifier) that contains all JavaServer Faces core and custom tags on a
nested page via "jsp:include" or any tag that dynamically includes another page
from the same web application, such as JSTL's "c:import".
The subview tag
wraps JSF components contained in an included JSP or Facelets page that allows
nested views. One advantage of this tag is that include files can be reused.
Since JSF requires a unique ID for each component, the subview tag creates a
unique "namespace" for child components.
JSF Example
<!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<body>
<f:view>
<h:form id="form_1">
<h:outputLabel value="Home Address" id="outputLabel_1" style="font-weight:bold" />
<f:subview id="subview_1">
<ui:include src="/WEB-INF/includes/addressPanel.xhtml">
<ui:param name="address" value="#{customerController.customer.homeAddress}" />
</ui:include>
</f:subview>
<h:outputLabel value="Work Address" id="outputLabel_2" style="font-weight:bold" />
<f:subview id="subview_2">
<ui:include src="/WEB-INF/includes/addressPanel.xhtml">
<ui:param name="address" value="#{customerController.customer.workAddress}" />
</ui:include>
</f:subview>
</h:form>
</f:view>
</body>
</html>
This example was formatted by JSFToolbox for Dreamweaver.
/WEB-INF/includes/addressPanel.xhtml
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head id="head_1"/>
<body>
<ui:composition>
<h:panelGrid columns="2" id="panelGrid_1">
<h:outputLabel value="Street address: " id="outputLabel_1" />
<h:inputText value="#{address.streetAddress}" id="inputText_1" />
<h:outputLabel value="City: " id="outputLabel_2" />
<h:inputText value="#{address.cityName}" id="inputText_2" />
<h:outputLabel value="Country" for="selectOneMenu_1" id="outputLabel_3" />
<h:selectOneMenu value="#{address.country}" converter="countryConverter"
id="selectOneMenu_1">
<f:selectItems value="#{countryController.countries}" var="country"
itemLabel="#{country.name}" itemValue="#{country}" />
</h:selectOneMenu>
</h:panelGrid>
</ui:composition>
</body>
</html>
This example was formatted by JSFToolbox for Dreamweaver.
Rendered Output
HTML Output
...
<tr>
<td>
<label id="form_1:subview_1:outputLabel_1">
Street address:
</label>
</td>
<td>
<input id="form_1:subview_1:inputText_1" type="text"
name="form_1:subview_1:inputText_1" />
</td>
</tr>
...
<tr>
<td>
<label id="form_1:subview_2:outputLabel_1">
Street address:
</label>
</td>
<td>
<input id="form_1:subview_2:inputText_1" type="text"
name="form_1:subview_2:inputText_1" />
</td>
</tr>
|
