Writing your own JSF custom component

Here Are the steps to write your own JSF1.2 custom components

Step1 :

First You need to write your Renderer Class

which will be looking like below . this is responsible for Rendering the
component at the client side

package org.extjsf.component.helloworld;

import java.io.IOException;

import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;
import javax.faces.render.Renderer;

public class HelloWorldRenderer extends Renderer {
@Override
public void encodeBegin(FacesContext context, UIComponent component)
throws IOException {
ResponseWriter writer = context.getResponseWriter();
writer.startElement("div", component);
writer.writeAttribute("style", "color: red", null);
writer.startElement("input", component);
writer.writeAttribute("value", component.getAttributes().get(
"onmouseup"), null);
writer.endElement("input");
writer.writeText("Welcome Sitaram for First Custom Component....!",
null);
writer.endElement("div");
}
}

Step 2:

Write your component class which will be looking like below

package org.extjsf.component.helloworld;

import javax.faces.component.UIComponentBase;
import javax.faces.context.FacesContext;

public class HtmlHelloWorld extends UIComponentBase {
public static final String COMPONENT_FAMILY = "A";
private String onmouseup;
public String getOnmouseup() {
return onmouseup;
}
public void setOnmouseup(String onmouseup) {
this.onmouseup = onmouseup;
}
@Override
public String getFamily() {
return COMPONENT_FAMILY;
}
@Override
public Object saveState(FacesContext arg0) {

Object values[]=new Object[2];
values[0]=super.saveState(arg0);
values[1]=onmouseup;
return values;

}

@Override
public void restoreState(FacesContext context, Object state) {
// TODO Auto-generated method stub
Object values[]=(Object[])(state);
super.restoreState(context, values[0]);
onmouseup=(String)values[1];
}

}

Step 3:

Write your Tag calss the tag which you defined in the jsp will be
communicating with server side code

package org.extjsf.component.helloworld;

import javax.faces.webapp.UIComponentTag;

public class HtmlHelloWorldTag extends UIComponentTag {

private String onmouseup;

public String getOnmouseup() {
return onmouseup;
}
public void setOnmouseup(String onmouseup) {
this.onmouseup = onmouseup;
}
@Override
public String getComponentType() {
return "C";
}
public String getRendererType() {
return "B";
}
}

Step4 :
Write your Taglib file as followes

<taglib xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi=
"http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation=
"http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd" version=
"2.0">
<tlib-version>1.0</tlib-version>
<uri>http://extjsf.org/components</uri>

<tag>
<description>Hello World Tag</description>
<name>sitaram</name>
<tag-class>org.extjsf.component.helloworld.HtmlHelloWorldTag</tag-class
>
<attribute>
<name>onmouseup</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
<description>HTML Event Attribute</description>
</attribute>
</tag>
</taglib>

Step 5:

Last but not least , register your componets with JSF as followes

<?xml version="1.0" encoding="UTF-8"?>
<faces-config version="1.2" 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_1_2.xsd"
xmlns:bridge="http://myfaces.apache.org/portletbridge">
<component>
<component-type>C</component-type>
<component-class>org.extjsf.component.helloworld.HtmlHelloWorld</
component-class>
</component>
<render-kit>
<renderer>
<component-family>A</component-family>
<renderer-type>B</renderer-type>
<renderer-class>org.extjsf.component.helloworld.HelloWorldRenderer
</renderer-class>
</renderer>
</render-kit>

</faces-config>

Output Screenshot :

(Embedded image moved to file: pic13877.jpg)

This e-Mail may contain proprietary and confidential information and is sent for the intended recipient(s) only. If by an addressing or transmission error this mail has been misdirected to you, you are requested to delete this mail immediately. You are also hereby notified that any use, any form of reproduction, dissemination, copying, disclosure, modification, distribution and/or publication of this e-mail message, contents or its attachment other than by its intended recipient/s is strictly prohibited.

Visit us at http://www.polaris.co.in