In this tutorial we will discuss about the f:subView in JSF.
JSF 2 f subView
In this tutorial we will discuss about the f:subView in JSF.
<f:subView> tag is used to create another named container context. This container may contains all the JavaServer Faces core and custom component actions that can be used on a nested page using any custom action which can include the another page of same context (web application) e.g. <c:import> or using the <jsp:include> tag. Basically this tag is used for reusing the include file which may have some fixed component IDs in the same view root if, not used it may give the duplicate component ID errors.
Attributes of <f:subView>
- binding : This is not a required attribute. This attribute is used to bound the value of backing bean property to the component.
- id : This is a required attribute for this tag. This attribute is an unique identifier that identifies the component uniquely.
- rendered : This is not a required attribute. This attribute evaluates to a boolean (true/false) value which presence specifies that whether the component and its children should be rendered.
Example :
Here a simple example is being given for you which will demonstrate about how to use JSF 2 f subView. To understand the use of f subView JSF through an example we will required to create the pages that can be included on a nested page using <jsp:include> or by the tags that may include the other pages dynamically e.g <c:import>(JSTL core tag) from the same context. Then we will required to create a JSF page onto which the file will be included.
In this example I have created Java Bean class with the property 'name' and its setter getter method. Then created a JSP page that will be included to the JSF page. Then created a JSF page and included the JSP page and also used the <h:inputText> tag for the input text box the value to be entered and the <h:outputText> tag to show the value of the textbox entered into. And the <h:commandButton> tag which will submit the form's textbox value after clicked.
Directory Structure
In this example we will required the JSP JSTL jar files so I have put these jar files into the lib folder under the WEB-INF folder in Eclipse.
NOTE : jstl.jar file in lib folder is the JSP's tag library jar files to add support of tags in the JSP pages and the jstl.jar file in jsfJarFiles is the JSF tag library jar files to add support of JSP tags in the JSF page.
NameBean.java
package devmanuals;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean(name="nameBean")
@RequestScoped
public class NameBean {
public String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
head.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>JSP page</title> </head> <body> <h3>Welcome to Devmanuals JSF f subView Tag Tutorial</h3> </body> </html>
inputPage.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>JSF f subView Tag</title>
</head>
<body>
<f:view>
<f:subview id="head">
<jsp:include page="/pages/head.jsp" />
<!--<c:import url="/pages/head.jsp" />-->
</f:subview>
<h:form>
Enter the text :
<h:inputText value="#{nameBean.name}" /> <br/>
<h:commandButton value="submit" />
</h:form>
<br/>
<br/>
<h:outputText value="You have entered the text : #{nameBean.name}" />
</f:view>
</body>
</html>
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"> <display-name>jsfSubView</display-name> <welcome-file-list> <welcome-file>jsfPages/inputPage.jsf</welcome-file> </welcome-file-list> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> <url-pattern>*.jsf</url-pattern> <url-pattern>*.xhtml</url-pattern> </servlet-mapping> <context-param> <description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description> <param-name>javax.faces.STATE_SAVING_METHOD</param-name> <param-value>client</param-value> </context-param> <context-param> <param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name> <param-value>resources.application</param-value> </context-param> <listener> <listener-class>com.sun.faces.config.ConfigureListener</listener-class> </listener> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.faces</url-pattern> </servlet-mapping> </web-app>
How to Run
Firstly start your web server and then use the following link http://localhost:8080/jsfSubView/jsfPages/inputPage.jsf in the address bar of your web browser.
Output :
When you will execute the above example you will get the output as follows :
When you will entered the text into the given textbox as given in the image below and clicked on button named 'submit' then the output will be as follows :
[ 0 ] Comments