logo
Home Tutorial

How To Create Your Own Java Server Faces Components



Attribute binding is one of the most powerful Java Server Faces features. You can take the value from a bean property or resource bundle property rather than just hardcode it into your JSP file. In step 4, we add one new attribute with the name title whose value will be taken from the resource bundle instead of defining it directly in the JSP file (thatís also possible).

In order to separate the designed component and the code that test it, lets create an additional package with the name demo within the JavaSource folder. In the demo package, create the file with the name resources.properties with the following content:

banner_title=Creating JSF Components. Step-By-Step Tutorial.

Add the new attribute with the name title to the ticker.tld file next to the other attribute of the ticker tag.

<attribute>
	<name>title</name>
</attribute>

Add the text marked with bold to the ticker.TickerTag.java file:

package ticker;
import javax.faces.component.UIComponent;
import javax.faces.el.ValueBinding;
import javax.faces.webapp.UIComponentTag;


public class TickerTag extends UIComponentTag{
	String style;
	String styleClass;
	String title;
	
	public String getStyle() { 
		return style;
	}

	public void setStyle(String style) {
		this.style = style;
	}

	public String getStyleClass() {
		return styleClass;
	}

	public void setStyleClass(String styleClass) {
		this.styleClass = styleClass;
	}

	public String getTitle() {
		return title;
	}

	public void setTitle(String title) {
		this.title = title;
	}

	
	public void release() {
		// the super class method should be called 
		super.release();
		style = null ;
		styleClass = null ;
		title = null;
	}
	
	protected void setProperties(UIComponent component) {
		// the super class method should be called 
		super.setProperties(component);
		
		if(style != null)
			component.getAttributes().put("style", style);

		if(styleClass != null)
			component.getAttributes().put("styleClass", styleClass);


		if (title != null) {
	            if (isValueReference(title)) {
	                ValueBinding vb =
	                    getFacesContext().getApplication().
	                    createValueBinding(title);
	                component.setValueBinding("title", vb);
	            } else {
	                component.getAttributes().put("title", title);
	            }
		}
	}

	public String getComponentType() {
		return "ticker";
	}

	public String getRendererType() {
		// null means the component renders itself
		return null;
	}
}

The most important part of the added code is inside the setProperties method. We check there to see if this value is referenced and if so we create the value binding. Otherwise, we just pass the value taken from the JSP page.

The other code is similar to what we did previously. Add the code marked with bold to the encodeBegin method of the ticker.UITicker.java file:

public void encodeBegin(FacesContext context) throws IOException {
	ResponseWriter writer = context.getResponseWriter();
	writer.startElement("div", this);

	writer.writeAttribute("id", getClientId(context), null);
	    
	String style = (String)getAttributes().get("style");
	if (style!=null)
	 	writer.writeAttribute("style", style, null);

	String styleClass = (String)getAttributes().get("styleClass");
	if (styleClass!=null)
		writer.writeAttribute("class", styleClass, null);
	    
	String title = (String)getAttributes().get("title");
	if (title!=null)
	  	writer.writeAttribute("title", title, null);
}

Add the following code marked with bold to the bannerpage.jsp file:

<%@ 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>
      <d:ticker id="banner"
       	styleClass="banner"
       	style="width:100px"
       	rendered="true"
       	title="#{bundle.banner_title}">
	     			
        <f:verbatim>Hello JSF Component</f:verbatim>
      </d:ticker>
    </f:view>
  </body>	
</html>  

We have added here the reference to our bundle and taken the banner_title property as a title attribute for the <d:ticker> tag.

Now, we are done with step 4 of our tutorial. Run the application and hold the mouse cursor over the box. The tip message should appear. If you look at the source code on the rendered page, you can see the title attribute set to a value taken from the resource bundle property.

See Also:

Guidelines for Designing Reusable Custom Components Using JavaServer Faces Technology


This article gives you some basic guidelines for designing
custom components using ChartComponent as an example.


Creating JSF Custom Components by Bill Dudney


This article illustrates how to build custom components for use
in web applications based on JavaServer Faces (JSF).