2008-05-02T11:57:00.000-07:00

In my previous blog at 'http://ashleshapatil.blogspot.com/' , I have discussed Woodstock components and have explained how to use these components in 'numberquiz' example from 'Core JSF' book. Proceeding to the next example from 'Core JSF' , let's see how to use the javascript with Woodstock components. I have converted the JSF tags used in 'javascript' example from chapter number four of ' Core JSF' to Woodstock tags. Let's have a look at the application snapshots:

   with JSF tags:              with woodstock tags:

In this example, a javascript function is used to confirm that password field matches with password confirm field. Here is the 'index.jsp' page with the Woodstock components and the javascript function.


<  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:html > 
        < w:head >  
            < title > < w:staticText text="#{msgs.windowTitle}"/ > < /title > 
        < /w:head > 
        < w:body > 
            < w:form id="registerForm" > 
                < table > 
                    < tr > 
                        < td > 
                            < w:staticText text="#{msgs.namePrompt}"/ > 
                        < /td > 
                        < td > 
                            < w:textField/ > 
                        < /td > 
                    < /tr > 
                    < tr > 
                        < td > 
                            < w:staticText text="#{msgs.passwordPrompt}"/ > 
                        < /td > 
                        < td > 
                            < w:passwordField id="password"/ > 
                        < /td > 
                    < /tr > 
                    < tr > 
                        < td > 
                            < w:staticText text="#{msgs.confirmPasswordPrompt}"/ > 
                        < /td > 
                        < td > 
                            < w:passwordField id="passwordConfirm"/ > 
                        < /td > 
                    < /tr > 
                < /table > 
                < w:button text="Submit Form" primary="true"
                          onClick="checkPassword()"  / > 
            < /w:form > 
            
            < w:script > 
                function checkPassword() {
                var password = document.getElementById("registerForm:password").
getProps().value;
                var passwordConfirm = document.getElementById
("registerForm:passwordConfirm").getProps().value;
                if(password == passwordConfirm)
                form.submit();
                else
                alert("Password and password confirm fields don't match");
                }
                
            < /w:script > 
            
        < /w:body > 
    < /w:html > 
    < /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.
Change the h:form tag to the Woodstock form tag - w:form.Specify the 'id' attribute, so that it can be referenced from the scrip function. For eg. < id="registerForm">
Replace the remaining JSF tags with the corresponding Woodstock tags. As you can see in the above code snippet, h:outputText, h:inputText, h:inputSecret and h:commandButton have been replaced with the w:staticText, w:textField, w:passwordField and w:button tags respectively. (The attribute specifications of Woodstock tags are well explained in the TLD documentation at http://webdev2.sun.com/woodstock-tlddocs).
Embed the javascript code inside w:script tag.The w:script tag must be used within the w:head tag, or within the w:body tag.
To get the component's value in the javascript function, invoke document.getElementById(id).getProps().value
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 'ch04_javascript' .

Woodstock Components