Jsf composite components tutorial

by

JSF provides the facility to create reusable custom components also known as composite components. Below are the steps to create composite components in JSF.

Steps to create and use the JSF composite components:

1. First create a resources folder.
2. Create an xhtml file in resources folder and declared the composite namespace.
3. Uses composite tags composite:interface, composite:attribute and composite:implementation, to define content of the composite component. The composite:interface tag is used to declare the configurable values. The composite:implementation tag is used to declare the XHTML markups. To access composite:interface attribute we can use #{cc.attrs.attributeName}.
4. For using the composite component create an xhtml file and use custom component’s namespace http://java.sun.com/jsf/folderName where folderName is the name of the folder under resources forlder containing the composite component.
5. Use the composite component like a normal JSF component.

Example:

test.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:ui="http://java.sun.com/jsf/facelets"
	xmlns:jwe="http://java.sun.com/jsf/composite/w3schools">
<h:body>
	<h2>JSF custom component example.</h2>
	<jwe:login 
      nameLabel="UserName: " 
      nameValue="#{test.userName}" 
      passwordLabel="Password: " 
      passwordValue="#{test.password}"
      loginButtonText="Submit" 
      loginButtonAction="#{test.login}"/>
</h:body>
</html>

login.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="nameLabel" />
      <composite:attribute name="nameValue" />
      <composite:attribute name="passwordLabel" />
      <composite:attribute name="passwordValue" />      
      <composite:attribute name="loginButtonText" />
      <composite:attribute name="loginButtonAction" 
        method-signature="java.lang.String action()" /> 
</composite:interface>
 
<composite:implementation>  
    <h:form>      
      <h:message for="textPanel" />      
      <h:panelGrid columns="2" id="textPanel">      
        #{cc.attrs.nameLabel} 
        <h:inputText id="name" value="#{cc.attrs.nameValue}" /> 
        #{cc.attrs.passwordLabel}
        <h:inputSecret id="password" value="#{cc.attrs.passwordValue}" /> 
      </h:panelGrid>      
      <h:commandButton action="#{cc.attrs.loginButtonAction}" 
        value="#{cc.attrs.loginButtonText}"/>
    </h:form>
</composite:implementation>
</html>

LoginTest.java

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
/**
 * Managed bean.
 * @author w3schools
 */
@ManagedBean(name="test")
@SessionScoped
public class LoginTest {
	private String userName;
	private String password;
 
	public String getUserName() {
		return userName;
	}
	public void setUserName(String userName) {
		this.userName = userName;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
 
	public String login(){
		if(userName == null || userName.equals("")
			|| password == null || password.equals("")){
			return "fail";
		}else{
			return "success";
		}
	}
}

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"
	xmlns:f="http://java.sun.com/jsf/core">
	<h:head>
		<title>JSF custom component example.</title>
	</h:head>
    <h:body> 
    	<h2>JSF custom component example.</h2>
    	<h3>Hello #{test.userName}</h3> 
    </h:body>
 
</html>

faces-config.xml

<?xml version="1.0" encoding="windows-1252"?>
<faces-config version="2.0" 
xmlns="http://java.sun.com/xml/ns/javaee" 
xmlns:xi="http://www.w3.org/2001/XInclude" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd">
 
<navigation-rule>
   <from-view-id>test.xhtml</from-view-id>
   <navigation-case>
      <from-outcome>success</from-outcome>
      <to-view-id>welcome.xhtml</to-view-id>
   </navigation-case>
 
   <navigation-case>
      <from-outcome>fail</from-outcome>
      <to-view-id>test.xhtml</to-view-id>
   </navigation-case>
 
</navigation-rule>
 
</faces-config>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" 
    	xmlns="http://java.sun.com/xml/ns/javaee" 
    	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    	http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
 
    <servlet>
        <servlet-name>faces</servlet-name>
        <servlet-class>
         javax.faces.webapp.FacesServlet
        </servlet-class>
    </servlet>
 
    <context-param>
      <param-name>
       javax.faces.FACELETS_LIBRARIES
      </param-name>
      <param-value>
       /WEB-INF/w3schools.taglib.xml
      </param-value>
    </context-param>
 
	<servlet-mapping>
        <servlet-name>faces</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
 
</web-app>

URL:

http://localhost:7001/JSFExample50/faces/test.xhtml

Output:

JSF example50-1
 
Enter username and password.
JSF example50-2
 
Click on Submit button.
JSF example50-3
 
Download this example.