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.
