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' .