Latest Tutorials| Questions and Answers|Ask Questions?|Site Map



Home Java Javaee6 Composite Components

Related Tutorials


 
 

Share on Google+Share on Google+

Composite Components

Advertisement
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:

Download Source Code

Advertisements

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: December 3, 2011

Related Tutorials

Discuss: Composite Components  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:0
DMCA.com