CustomTags in JSF with or without Facelets

Just goolge custom tags in JSF we will get a lot of websites which says how to write a custom tags in JSF.But most of the tutorials are very lengthy and many are really very confusing.So i thought I will write a blog where I wil just give an intro(a very simple example) on how to create our own custom tags with and without facelets.So once we know how to create a sample ,one can play around in it and experiment a lot on the same.So lets gets started.well first its

CustomTags in JSF without Facelets:

We can create our custom tags in JSF without facelets in 5 simple steps.Here I am assuming that you have the required software support like eclipse with capability to create a new JSF project.(Else kindly download the eclipse with this capability :-))



Step1:

create a new JSFProject(empty project) in your eclipse.

Step2:

create a folder named tlds under web-inf.Save a file with name simplerandom.tld.The contents of the file is as follows


This tld(Tag Library Descriptor)file says that the name of the tag is simplerandom and the tag definition is placed in the class named as SimpleRandomTag in the package test.tags.Thats it now we are ready to write the our TagDefenition class.

Step 3:

The tag defenition class is SimpleRandomTag inside the packaeg test.tags and the contents is as follows.

package test.tags;
import java.io.IOException;
import javax.servlet.jsp.JspException;import javax.servlet.jsp.JspWriter;import javax.servlet.jsp.tagext.SimpleTagSupport;
public class SimpleRandomTag extends SimpleTagSupport { protected int length = 50;
public void doTag() throws JspException, IOException { JspWriter out = getJspContext().getOut(); Double prime = Math.random();
out.print(prime); }}

Step 4:

Finally we will create a output page to test our customtags.Now lets create a page sample.jsp.The contents are given below:





Note that we need to declare a taglib directive here and point it the tld placed inside the /web-inf/tlds.Now we can use the tag with the following format



Step 5:

Just run the server and request for the page.Woo,we get some random numbers for every page request.We have done our sample customtags succecfully.Now lets look into how to craete a custom tag with facelets.




Custom Tags with Facelets:
Custom Tags with facelets need slightly more configuration than without JSF.Here I am assuming that JSF is already integrated with Facelets(required configurations are done).I will explicity say only te configurations required for CustomTags to work.Well lets get started



We can create the JSF with Facelets 6 simple steps.



Step 1:

Create a new JSF project.

Step 2:

Create a folder named tlds under the web-inf folder.Create a file named simple.taglib.xml and the contents are as follows

Hope here the entries are self explanatory



Step 3:

Goto to web.xml and add the following entry as
context-param
facelets.LIBRARIES
/WEB-INF/tlds/simple.taglib.xml


Thats it the required configuraions are over

Step 4:

Lets create a the tag defenition.Create a class named SimpleTag inside the package test.tags

package test.tags;
import java.io.IOException;
import javax.el.ELException;import javax.faces.FacesException;import javax.faces.component.UIComponent;
import com.sun.facelets.FaceletContext;import com.sun.facelets.FaceletException;import com.sun.facelets.tag.TagConfig;import com.sun.facelets.tag.TagHandler;
public class SimpleTag extends TagHandler { public SimpleRandomTag(TagConfig config) { super(config);
}
public void apply(FaceletContext arg0, UIComponent arg1) throws IOException, FacesException, FaceletException, ELException {
Double random = Math.random(); if (random >0.5) { this.nextHandler.apply(arg0, arg1); }
}}

Her our Class should extend TagHandler(provided by Facelets) instead of
SimpleTagSupport.The apply method states that if the random number is >0.5 the take will move on the nextHandler.Else the flow will not proceed to next handler.

Step 5:

Create a output xhtml file to test our custom tag.Lets assume I have a facelets template
sample-template.xhtml and I am creating a client page for this template





Step 6:

Start the server and request for this page.We will get teh output from h:outputText tag only if the random number generated is >0.5.







Hope you got the basics.So would play around and create your own advanced custom tags.Bye bye meet you in my next post