Custom JSF component - Birthday

One of the powerful feature of JSF is to extend its tag library and create custom tags. Developers can use this feature and enhance the tags that are provided by JSF implementations (e.g. sun, myfaces, etc). Or they can straight away start writing the tags of their own. Today we’ll see how easy it is to create a custom tag in JSF. Let’s try out with an example, to create a tag, which will display today’s date and a list of people who has birthday today.

Make an entry for the custom tags definition file.

We need to define 2 configurations,

URI that will be used when this tag is used inside a JSF page.

Location of the tags definition file.

Step 2 – custom-tags.tld

Create custom-tags.tld in the specified location and mention details about the custom tag.

Here we mention the name of the tag, the class which will provide additional information about this tag.

Step 3 – faces-config.xml

Next step is to modify the faces-config.xml file and make an entry for this tag.

Here we specify 2 configurations,

• Component which will act as a model (data holder) for this tag.
• Renderer which will create UI for this tag.

  Step 4 – Tag class

  

  Then we create a class file that was defined in custom-tags.tld file. This class MUST extend UIComponentTag. We need to implement 2 abstract methods to get the component and the renderer for this tag. Copy+paste these from the faces-config.xml file.

  Step 5 – Model class

  

  The model class will extend from UIComponentBase. We need to implement a method to return the family of this tag. Copy paste the family from faces-config.xml file.

  Step 6 – Renderer class

  

  The renderer class extends from Renderer to override encodeBegin and encodeEnd methods. The encodeBegin method should contain the HTML code which will get written when the tag is opened. Similarly the encodeEnd method should contain the HTML code which will get written when the tag is closed.

  Step 7 – JSF Page

  

  The last step is to write the JSF page. For this we need to include the custom tag library that we had written and give a prefix for its tags. Then use the custom tag in the page.

  Output

  

  HTML Source code

  

  Conclusion

  Similarly we can write more complex tags which defines a set of attributes which can be used in the HTML code, e.g. style, width, height, etc. We can also extend any predefined tag and override the functionality as per the requirement.

   

Source code

Download the source code for this article.


Author: gauravk