Auto tab JSF 2.1 phone fields custom component using Jquery

This blog will describe how to create a custom UI for auto-tab component and server side component in JSF2.1 and jquery

Wouldn't it be cool to have your own custom components and just have one line of code in your jsf page which generates a whole block of code?
Well thats what custom components is all about.


Prerequisites

1. Existing JSF 2.1 project - Easy to create in Netbeans if you are a beginner
2. HTML knowledge


There are 2 ways of creating custom components

a. Server Side
b. UI Component


a. Server Side

This does not show how to do the auto tab but gives a start on how to create custom blogs on the server side.

i. Create a java class say PhoneComponent.java

   


ii. Create an xml file custom.taglib.xml under WEB-INF folder.

   

iii. Now we have to tell the application what this xml is
    Add an entry in web.xml to do this
    web.xml

    

iv. The jsf page say test.xhtml

     

    Thats it!! Now you can create as many custom columns as you want that willl do stuff that will reduce coding time in half... Have fun..

b. UI Custom Components

Now we can see how to create a custom UI component. No server side code here.

i. Create your component which will be a xhtml page with whatever feature or block of code.

   In this example i am creating an autotab feature for phones using jquery. 

   phoneComponent.xhtml

   


ii. Create a custom.taglib.xml under WEB-INF.

   


iii. Now we have to tell the application what this xml is
    Add an entry in web.xml to do this just like above server side config.
    web.xml
    

iv. Use it in your jsf page.. As easy as that..

    You will have to include the jquery libraries in your path 

    test.xhtml

   


That was easy right!