JSF (Java Server Faces) Visual Tutorial

One more powerful feature of the Java Server Faces technology is component binding. Unlike value binding, component binding allows controlling all of the aspects of a bound component and its child hierarchy from a Java class that is usually called a "backing bean".

In step 5, we will demonstrate how this mechanism works. We will add a form with two buttons to our bannerpage.jsp page. One button will hide the box for our greeting message; the other button will return it back to the page. We will also create a backing bean that will control the form and the component located inside the form.

Actually, the binding mechanism is provided by the super class of our component. All we have to do it to add a new attribute with the name binding to the ticker.tld file. All other stuff added on this step has a testing purpose.

So, this is our ticker.tld file content:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN"
                        "http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd">
<taglib>
 <tlib-version>1.0</tlib-version>
 <jsp-version>1.2</jsp-version>
 <short-name>d</short-name>
 <uri>http://jsftutorials.com/</uri>
 <tag>
  <name>ticker</name>
  <tag-class>ticker.TickerTag</tag-class>
  <body-content>JSP</body-content>
  <attribute>
   <name>style</name>
  </attribute>
  <attribute>
   <name>styleClass</name>
  </attribute>
  <attribute>
   <name>id</name>
  </attribute>
  <attribute>
   <name>rendered</name>
  </attribute>
  <attribute>
   <name>title</name>
  </attribute>
  <attribute>
   <name>binding</name>
  </attribute>
 </tag>
</taglib>

Add the code marked with bold to the faces-config.xml file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE faces-config 
PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN"
       	                    "http://java.sun.com/dtd/web-facesconfig_1_0.dtd">
<faces-config>
 <component>
  <component-type>ticker</component-type>
  <component-class>ticker.UITicker</component-class>
 </component>
 <managed-bean>
  <managed-bean-name>BannerPageBean</managed-bean-name>
  <managed-bean-class>demo.BannerPageBean</managed-bean-class>
  <managed-bean-scope>request</managed-bean-scope>
  <managed-property>
   <property-name>rendered</property-name>
   <property-class>java.lang.Boolean</property-class>
   <value>true</value>
  </managed-property>
 </managed-bean>
 <lifecycle/>
 <application>
  <locale-config/>
 </application>
 <factory/>
</faces-config>

We have added the managed bean with name BannerPageBean that will play the role on backing bean for our form. We also have defined the rendered property that is set to true by default.

Create new file with the name BannerPageBean.java inside the demo package. Here is the content of this file:

package demo;

import ticker.UITicker;

public class BannerPageBean {
	Boolean rendered;
	UITicker ticker;
	
	public Boolean getRendered() {
		return rendered;
	}

	public void setRendered(Boolean rendered) {
		this.rendered = rendered;
	}
	public UITicker getTicker() {
		return ticker;
	}

	public void setTicker(UITicker ticker) {
		this.ticker = ticker;
	}
	
	public String TurnOn() {
		ticker.setRendered(true);
		return null;
	}

	public String TurnOff() {
		ticker.setRendered(false);
		return null;
	}

}

The bean has two properties: rendered that has a Boolean type and ticker that has a type of our UITicker class. The two last methods will be called when you click the buttons on the page. Those methods call the setter of the rendered property of the ticker. Actually, you have full control over the ticker component here and can change any attribute you need.

The bannerpage.jsp file should contain the following:

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://jsftutorials.com/" prefix="d" %>
<f:loadBundle basename="demo.resources" var="bundle" />
<html>
  <head>
    <title>Show Custom Component</title>
    <style>
       .banner {
       border: 1px solid darkblue;
       padding: 5px 5px 5px 5px;
       }
    </style>	
  </head>
  <body>
    <f:view>
      <h:form>
        <h:commandButton value="Turn Off" action="#{BannerPageBean.TurnOff}"/>
        <h:commandButton value="Turn On" action="#{BannerPageBean.TurnOn}"/>
        <d:ticker 	id="banner"
         		styleClass="banner"
         		style="width:100px"
         		title="#{bundle.banner_title}"
         		binding="#{BannerPageBean.ticker}">
	     			
          <f:verbatim>Hello JSF Component</f:verbatim>
        </d:ticker>
      </h:form>
    </f:view>
  </body>	
</html>

The binding attribute of our component refers to the ticker property of the backing bean. The buttons action attribute calls the corresponding method. We are done with step 5. When you launch your application you can see our fancy box and two buttons above them. Click the Turn Off button and the box disappears, click the Turn On button and the box appears again.

Are you lost? This is the final version of the project after this lesson is done: Step5.zip

How To Create Your Own Java Server Faces Components

Guidelines for Designing Reusable Custom Components Using JavaServer Faces Technology

Creating JSF Custom Components by Bill Dudney