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">
 
	  <composite:interface>
			<composite:attribute name="anything" />
	  </composite:interface>
 
	  <composite:implementation>
			#{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.

jsf2-composite-component-folder

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

<?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>

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"
      >
	  <mkyong:register />
</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"
      >
	  <mkyong:register />
</html>

2. Complete Example

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

File : default.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:mkyong="http://java.sun.com/jsf/composite/mkyong"
      >
 
    <h:body>
 
    	<h1>Composite Components in JSF 2.0</h1>
 
	<mkyong:register 
		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

jsf2-composite-component-example

Download Source Code

Download It – JSF-2-Composite-Components-Example.zip (11KB)

Reference

  1. JSF 2 composite:interface JavaDoc
  2. JSF 2 composite:implementation JavaDoc
  3. JSF 2 composite:attribute JavaDoc
Note : You can find more similar articles at - JSF 2 Tutorials
You might also like this tutorials :
JAX-RS Tutorials
Spring Security Tutorials
Spring Tutorials
Java RegEx Tutorials
Apache Wicket Tutorials