Saturday, April 26, 2008

A Sample Woodstock Application

In this blog, I assume that you are reading Core JavaServer Faces, and that you want to use NetBeans and the nice component set (called Woodstock) rather than the plain-looking standard JSF tags. Woodstock components come bundled with NetBeans 6.x and I think, using them is relatively easy to give your JSF application a classy look without too much messing up of the existing code. Let's have a look at the screen shots of an application with JSF tags and the same converted to one with Woodstock tags :

with JSF tags:                           with Woodstock tags:


Now, let me explain what I did to convert the JSF tags to the corresponding woodstcok components for the 'numberquiz' example from chapter number two of the 'CoreJSF' book . This is a quite simple example with only three types of components. The only place where you need to do a few changes is the JSP page of the application. Here is the 'index.jsp' with the woodstock tags from the 'numberquiz'.

< jsp:root version="2.1" xmlns:f="http://java.sun.com/jsf/core" 
                         xmlns:h="http://java.sun.com/jsf/html" 
                         xmlns:jsp="http://java.sun.com/JSP/Page" 
                         xmlns:w="http://www.sun.com/webui/webuijsf" >
< jsp:directive.page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"/ >
    < w:page >
        < w:head >
            < title > < w:staticText text="#{msgs.title}" / > < /title >
        < /w:head >
        < w:body >
            < w:form >
                < h3 >
                    < w:staticText  text="#{msgs.heading}" / >
                < /h3 >
                < p >
                    < w:staticText text="#{msgs.currentScore}"  >
                        < f:param value="#{quiz.score}" / >
                    < /w:staticText >
                < /p >
                < p >
                    < w:staticText  text="#{msgs.guessNext}" / >
                < /p >
                < p >
                    < w:staticText text="#{quiz.current.sequence}" / >
                < /p >
                < p >
                    < w:staticText text="#{msgs.answer}" / >
                    < w:textField text="#{quiz.answer}"/ >
                < /p >
                < p >
                    < w:button text="#{msgs.next}" actionExpression="next" primary="true" / >
                < /p >
            < /w:form >
        < /w:body >
    < /w:page >
< /jsp:root >

And here are the steps:

  • Include the 'webuijsf' tag library in the JSP page. You do not have to use this long‭ '‬webuijsf‭' ‬prefix.‭ ‬Instead‭ ‬you can‭ ‬just‭ ‬change it to something simpler‭ –‬ for eg.‭ ‬using‭ ‬ 'w:‭' ‬would‭ ‬work‭ ‬just‭ ‬fine‭ ‬-‭ <‬jsp:root version‭="‬2.1‭" ‬xmlns:w‭="‬http://www.sun.com/webui/webuijsf‭">
  • Start the page with the w:page tag to indicate the beginning of the Web UI Components. After opening the w:page tag, you must first use the w:html and the w:head tags. Then you must use either the w:body tag or the w:frameset tag.
  • Replace the JSF tags with the corresponding Woodstock tags. As you can see in the above code snippet, h:outputText, h:inputText and h:commandButton have been replaced with the w:staticText, w:textField and w:button respectively. (The attribute specifications of Woodstock tags are well explained in the TLD documentation at http://webdev2.sun.com/woodstock-tlddocs).
  • Add the required libraries. For the above example you will need to add 'Web UI Components', 'JSF 1.1/1.2 Support' and 'Web UI Default Theme' libraries.

The complete source code of the above example can be found at http://patils.ashlesha.googlepages.com/woodstock as 'ch02_numberquiz' .

I hope this example will encourage you to use these refined components in your application. Using them will definitely save your coding efforts as well as time.
Posted by at