Sunday, February 9, 2014

Composite Components In JSF 2.0

Posted on November 18, 2010 , Last modified : August 29, 2012

Since JSF 2.0, it’s very easy to create a reusable component, known as composite components. In this tutorial, we show you how to create a simple composite components (stored as “register.xhtml“), which is an user registration form, includes name and email text fields (h:inputText) and a submit button (h:commandButton). In addition, we also show you how to use it.

Create a Composite Components

Here’s the steps to create a composite components :

1. Composite Namespace

Create a .xhtml file, and declared the composite namespace.

<html xmlns="http://www.w3.org/1999/xhtml"   
      //...
      xmlns:composite="http://java.sun.com/jsf/composite">
</html>

2. Interface & Implementation

Uses composite tags composite:interface, composite:attribute and composite:implementation, to define content of the composite component. For example,

<html xmlns="http://www.w3.org/1999/xhtml"   
      //...
      xmlns:composite="http://java.sun.com/jsf/composite">
 
	  
			name="anything" />

</composite:interface> #{cc.attrs.anything} </composite:implementation> </html>

The composite:interface tag is used to declare the configurable values which are expose to the developer who use it. And composite:implementation tag is declares all the XHTML markups, which are the content of the composite component, inside the composite:implementation tag, you can access composite:interface attribute with the expression#{cc.attrs.attributeName}.

3. Resources Folder

Put composite components (“.xhtml” file) into JSF’s resources folder, see figure 1:

Figure 1 : Directory structure of this example.

In this case, you put the “register.xhtml” composite components into a folder named “mkyong”.

4. Complete Example

Done, let see a complete example of “register.xhtml”.

File : register.xhtml

version="1.0" encoding="UTF-8"?>

"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" > name="nameLable" /> name="nameValue" /> name="emailLable" /> name="emailValue" /> name="registerButtonText" /> name="registerButtonAction" method-signature="java.lang.String action()" /> </composite:interface> for="textPanel" style="color:red;" /> ="2" id="textPanel"> #{cc.attrs.nameLable} : id="name" value="#{cc.attrs.nameValue}" /> #{cc.attrs.emailLable} : id="email" value="#{cc.attrs.emailValue}" /> </h:panelGrid> action="#{cc.attrs.registerButtonAction}" value="#{cc.attrs.registerButtonText}" /> </h:form> </composite:implementation> </html>

Use a Composite Components

You just created a composite component “register.xhtml”, and now we show you how to use it.

1. Composite Component Access Path

Refer to figure 1 above; the “register.xhtml” file is under the folder “mkyong”. Here’s how you access it :

<html xmlns="http://www.w3.org/1999/xhtml"   
      ///...
      xmlns:mkyong="http://java.sun.com/jsf/composite/mkyong"
      >
	  />

</html>

http://java.sun.com/jsf/composite/folder-name-in-resources-folder
The folder name of the composite components is defined the component access path, for example, if you put your “register.xhtml” file under folder named “abc”, then you should access it like this :

<html xmlns="http://www.w3.org/1999/xhtml"   
      ///...
      xmlns:mkyong="http://java.sun.com/jsf/composite/abc"
      >
	  />

</html>

2. Complete Example

Let’s see a complete example to show the use of “register.xhtml” composite components.

File : default.xhtml

version="1.0" encoding="UTF-8"?>

"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:mkyong="http://java.sun.com/jsf/composite/mkyong" > <h1>Composite Components in JSF 2.0</h1> nameLable="Name" nameValue="#{user.name}" emailLable="E-mail" emailValue="#{user.email}" registerButtonText="Register" registerButtonAction="#{user.registerAction}" /> </h:body> </html>

You are allowed to pass either hard-coded value or backing method or property into the composite component via exposed attributes, when the form is submitted, JSF will do all the backing bean binding automatically.

P.S Here’s the “user” managed or backing bean, for those who are interested.

package com.mkyong;
 
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
 
	public String name;
	public String email;
 
	//getter and setter methods for name and email
 
	public String registerAction(){
		return "result";
	}
}

Demo

Here’s the result.

URL : http://localhost:8080/JavaServerFaces/default.xhtml