Core JavaServer Faces

Web applications run on form submissions, and JSF applications are no exception. Table 4-6 lists all h:form attributes.

^[a] See Table 4-3 on page 90 for information about basic attributes.

^[b] See Table 4-4 on page 93 for information about HTML 4.0 attributes.

^[c] See Table 4-5 on page 95 for information about DHTML event attributes.

Although the HTML form tag has method and action attributes, h:form does not. Because you can save state in the client an option that is implemented as a hidden field posting forms with the GET method is disallowed. The contents of that hidden field can be quite large and may overrun the buffer for request parameters, so all JSF form submissions are implemented with the POST method. Also, if you don't specify navigation, JSF form submissions post to the current page (through the Faces servlet), although the actual page that's loaded as a result of a form submit can (and typically does) change as a result of actions that are fired on behalf of command components. See Chapter 2 for more details about actions.

The h:form tag generates an HTML form element. For example, if, in a JSF page named /index.jsp, you use an h:form tag with no attributes, the Form renderer generates HTML like this:

<form method="post" action="/forms/faces/index.jsp" enctype="application/x-www-form-urlencoded">

h:form comes with a full complement of DHTML event attributes. You can also specify the style or styleClass attributes for h:form. Those styles will then be applied to all output elements contained in the form.

Finally, the id attribute is passed through to the HTML form element. If you don't specify the id attribute explicitly, a value is generated by the JSF implementation, as is the case for all generated HTML elements. The id attribute is often explicitly specified for forms so that it can be referenced from stylesheets or scripts.

Form Elements and JavaScript

JavaServer Faces is all about server-side components, but it's also designed to work with scripting languages, such as JavaScript. For example, the application shown in Figure 4-1 uses JavaScript to confirm that a password field matches a password confirm field. If the fields don't match, a JavaScript dialog is displayed. If they do match, the form is submitted.

We use the id attribute to assign names to the relevant HTML elements so that we can access them with JavaScript:

<h:form > ... <h:inputText .../> <h:inputText .../> ... <h:commandButton type="button" onclick ="checkPassword(this.form)"/> ... </h:form>

When the button is clicked, a JavaScript function checkPassword is invoked. That function follows:

function checkPassword(form) { var password = form["registerForm:password"].value; var passwordConfirm = form["registerForm:passwordConfirm"].value; if (password == passwordConfirm) form.submit(); else alert("Password and password confirm fields don't match"); }

Notice the syntax used to access form elements. You might think you could access the form elements with a simpler syntax, like this:

documents.forms.registerForm.password

But that won't work. Let's look at the HTML produced by the preceding code to find out why:

<form method="post" action="/javascript/faces/index.jsp" enctype="application/x-www-form-urlencoded"> ... <input docEmphStrong">registerForm:password" type="text" name="registerForm:password"/> ... <input type="button" name="registerForm:_id5" value="Submit Form" onclick="checkPassword(this.form)"/> ... </form>

All form controls generated by JSF have names that conform to formName:componentName, where formName represents the name of the control's form and componentName represents the control's name. If you don't specify id attributes, the JSF framework creates identifiers for you, as you can see from the button in the preceding HTML fragment. Therefore, to access the password field in the preceding example, you must do this instead:

documents.forms.registerForm["registerForm:password"].value

The directory structure for the application shown in Figure 4-1 is shown in Figure 4-2. The JSF page is listed in Listing 4-1 and the English resource bundle is listed in Listing 4-2.

Listing 4-1. javascript/index.jsp

1. <html> 2. <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> 3. <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> 4. <f:view> 5. <f:loadBundle basename="com.corejsf.messages" var="msgs"/> 6. <head> 7. <title> 8. <h:outputText value="#{msgs.windowTitle}"/> 9. </title> 10. </head> 11. <body> 12. <h:form > 13. <table> 14. <tr> 15. <td> 16. <h:outputText value="#{msgs.namePrompt}"/> 17. </td> 18. <td> 19. <h:inputText/> 20. </td> 21. </tr> 22. <tr> 23. <td> 24. <h:outputText value="#{msgs.passwordPrompt}"/> 25. </td> 26. <td> 27. <h:inputSecret /> 28. </td> 29. </tr> 30. <tr> 31. <td> 32. <h:outputText value="#{msgs.confirmPasswordPrompt}"/> 33. </td> 34. <td> 35. <h:inputSecret /> 36. </td> 37. </tr> 38. </table> 39. <h:commandButton type="button" value="Submit Form" 40. onclick="checkPassword(this.form)"/> 41. </h:form> 42. </body> 43. <script type="text/javascript"> 44. <!-- 45. function checkPassword(form) { 46. var password = form["registerForm:password"].value; 47. var passwordConfirm = form["registerForm:passwordConfirm"].value; 48. 49. if(password == passwordConfirm) 50. form.submit(); 51. else 52. alert("Password and password confirm fields don't match"); 53. } 54. --> 55. </script> 56. </f:view> 57. </html>

Listing 4-2. javascript/WEB-INF/classes/com/corejsf/messages.properties

1. windowTitle=Accessing Form Elements with JavaScript 2. namePrompt=Name: 3. passwordPrompt=Password: 4. confirmPasswordPrompt=Confirm Password: