JSF Custom components

This article will concentrate on:

1. When to create JSF component ?
2. How to create JSF component?
3. Simple custom component
   

First: When to create JSF component?
Before jumping into custom JSF component development, you should know the purpose of creating JSF custom components.
you decide to create this component

1. when you want to visible components such as input/output fields.
2. when you want to handle things like basic validation and/or data conversion.

Second: How to create JSF component?
The general term "JSF UI Component" refers to a collection of the following:

• UIComponent Class:A Java class derived from either the UIComponentBase or extended from an existing JSF UIComponent such as outputText. This is the actual Java class representing the core logic of the component.
• Renderer Class:This is a class that only contains code to render a UIComponent. Rendering classes can provide different renderings for a UI Component. For such as either a button or hyperlink for the UICommand component.
• UI Component Tag Class:This is a JSP tag handler class that allows the UI Component to be used in a JSP.
• Tag Library Descriptor File:This is a standard J2EE JSP tag library descriptor (tld) file which associates the tag handler class with a usable tag in a JSP page.
• Associated helper classes:These include a collection of standard (included in JSF RI) or custom helper classes such as Converters, Validators, ActionListeners etc.

Third:Simple custom component
Step 1: Creating a UIComponent Class
UIComponent will extend the UIComponentBase abstract class.We could have also based our new UI Component class on the concrete UIOutput base class which is basically the same as the UIComponentBase with the exception that it has a "value" attribute.

package com.mufic.mufix.component.page;

import javax.faces.component.UIComponentBase;
import javax.faces.context.FacesContext;
import java.io.IOException;
import javax.faces.context.ResponseWriter;

public class UIComp extends UIComponentBase {

public void encodeBegin(FacesContext context) throws IOException {
ResponseWriter writer = context.getResponseWriter();
String title = (String)getAttributes().get("title");
writer.startElement("h3", this);
if(title != null)
writer.writeText(title, "title");
else
writer.writeText("Hello from a MUFIX custom JSF UI Component!", null);
writer.endElement("h3");
writer.startElement("p", this);
writer.endElement("p");
}

public String getFamily() {
return "MUFIX";
}
}

As you can see, this custom UI Component renders a formatted Hello MUFIX message using encodeBegin() method.

Step 2: Registering the custom UI Component in Faces-config.xml
We'll add a required entry for our custom component in the faces-config.xml file. The syntax for adding our custom UI component is:

Step 3. Building a Custom JSP Tag Library
we need a custom tag library comprised of a tag library descriptor file (TLD) along with references to taghandlers classes.

Building the Tag Handler

JSP taghandler class is derived from javax.faces.webapp.UIComponentTag. It's main purpose is to:

1. Associate a JSP callable tag (handler class) with the UI Component.
2. Associate a separate renderer class (if needed) to the UI Component.
3. Set the properties from the submitted tag attribute values to the UI Component.

Here is the source code for our tag handler class

package com.mufic.mufix.component.page;

import javax.faces.application.Application;
import javax.faces.webapp.UIComponentTag;
import javax.faces.component.UIComponent;
import javax.faces.el.ValueBinding;
import javax.faces.context.FacesContext;

public class FacesTag extends UIComponentTag {
// Declare a bean property for the hellomsg attribute.
private String title = null;


// Associate the renderer and component type.
public String getComponentType() {
return "com.mufic.mufix.component.page";
}
public String getRendererType() {
return null;
}


protected void setProperties(UIComponent component) {
super.setProperties(component);

if (title != null) {
component.getAttributes().put("title", title);
}
}
public void release() {
super.release();
setTitle(null);
}
public void setTitle(String title) {
this.title = title;
}
}

The first thing to note is the "title" bean property of type String along with its associated getter and setter methods at the bottom of the class. The title bean property, "title", is also an attribute in the JSP tag. title="title">

Finally: To use the page tag, we simply place it into the body of the JSP and set an optional "title" attribute.
<%@ taglib uri="http://mufic.com/component" prefix="mufix"%>

Rreferences :

1. JSF IN ACTION
2. http://www.theserverside.com/tt/articles/article.tss?l=BuildingCustomJSF

elTanahy