This section contains a brief description and complete example over Composite Components in JSF2.0 .
Composite Components
This section contains a brief description and complete example over Composite Components in JSF2.0 .
About Composite Components
The composite component is a template which behaves as reusable component. These reusable componet can be use any where you want to use in your application and also have no restriction of how many time you can implement it.
Composite components consist of collections of markup-tags with other components. These user made components has a target functionality and can have Validators, converters, and listeners etc.
Due to Facelets, any XHTML page which have markup tags and other components can be modified to composite component. These composite component can be available throughout the application by storing them to a library using resources facility.
EXAMPLE
In the below example, we will create a sample registration form using composite component. This composite component contains two labels, two text input field and and submit button. In short, we can say that it contains a small form containing two fields.
The composite components' tag used in this example with it's description is given below :
<composite : interface>
Under this composite component tag we will declare the elements which will be used in the component.
<composite : attribute>
This composite component tag is used to declare the elements which will be used in the component.
<composite : implementation>
Under this tag, we will define the implementation of the composite component element.
Project hierarchy
The project hierarchy is given below :
If you are not aware of setting up JSF2.0 in eclipse click here
CODE
First you need to create the template page using composite component tag is given below :
formCompositeComponent.xhtml
<?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"
xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface>
<composite:attribute name="nameLable" />
<composite:attribute name="nameValue" />
<composite:attribute name="emailLable" />
<composite:attribute name="emailValue" />
<composite:attribute name="registerButtonText" />
<composite:attribute name="registerButtonAction"
method-signature="java.lang.String action()" />
</composite:interface>
<composite:implementation>
<h:form>
<h:message for="textPanel" style="color:red;" />
<h:panelGrid columns="2" id="textPanel">
#{cc.attrs.nameLable} :
<h:inputText id="name" value="#{cc.attrs.nameValue}" />
#{cc.attrs.emailLable} :
<h:inputText id="email" value="#{cc.attrs.emailValue}" />
</h:panelGrid>
<h:commandButton action="#{cc.attrs.registerButtonAction}"
value="#{cc.attrs.registerButtonText}" />
</h:form>
</composite:implementation>
</html>
Now the above composite component can be ready to utilize. In the below XHTML we are using this component as follows :
index.xhtml
<?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:roseindia="http://java.sun.com/jsf/composite/roseindia"
>
<h:body>
<h1>JSF 2 Composite Components Example</h1>
<roseindia:formCompositeComponent
nameLable="Name"
nameValue="#{user.name}"
emailLable="E-mail"
emailValue="#{user.email}"
registerButtonText="Register"
registerButtonAction="#{user.registerAction}"
/>
</h:body>
</html>
The bean class related to the above page is given below :
UserBean.java
package net.roseindia;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name="user")
@SessionScoped
public class UserBean {
public String name;
public String email;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String registerAction(){
return "welcome";
}
}
The welcome page returned by the bean class is given below :
welcome.xhtml
<?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:body>
<h1>Welcome #{user.name}</h1>
<p>You details are mentioned below :</p>
Name : #{user.name}
<br />
E-mail : #{user.email}
</h:body>
</html>
web.xml
The web.xml content is given below :
<?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_2_5.xsd" id="WebApp_ID" version="2.5"> <display-name>JSFCompsiteComponent</display-name> <!-- Welcome page --> <welcome-file-list> <welcome-file>faces/index.xhtml</welcome-file> </welcome-file-list> <!-- JSF mapping --> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <!-- Map these files with JSF --> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.jsf</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.faces</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.xhtml</url-pattern> </servlet-mapping> </web-app>
OUTPUT
The first page that will appear to you, will look like this:
After submitting button, the following content will welcomes you as follows:
0