- An Overview of the JSF Core Tags
- An Overview of the JSF HTML Tags
- Panels
- The Head, Body, and Form Tags
- Text Fields and Text Areas
- Buttons and Links
- Selection Tags
- Messages
- Conclusion
This chapter is from the book
This chapter is from the book
This chapter is from the book
The Head, Body, and Form Tags
Table 4–10 shows the attributes of the h:head and h:body tags. All of them are basic or HTML/DHTML attributes.
Table 4–10. Attributes for h:head and h:body
|
Attributes |
Description |
|
id, binding, rendered |
Basic attributesa |
|
dir, lang h:body only: style, styleClass, target, title |
HTML 4.0b attributes |
|
h:body only: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onunload |
DHTML eventsc |
Web applications run on form submissions, and JSF applications are no exception. Table 4–11 lists all h:form attributes.
Table 4–11. Attributes for h:form
|
Attributes |
Description |
|
prependId |
true (default) if the ID of this form is prepended to the IDs of its components; false to suppress prepending the form ID (useful if the ID is used in JavaScript code) |
|
binding, id, rendered |
Basic attributesa |
|
accept, acceptcharset, dir, enctype, lang, style, styleClass, target, title |
HTML 4.0b attributes |
|
onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onsubmit |
DHTML eventsc |
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.
There is no need for an anchor attribute since JSF form submissions always post to the current page. (Navigation to a new page happens after the form data have been posted.)
The h:form tag generates an HTML form element. For example, if, in a JSF page named /index.xhtml, you use an h:form tag with no attributes, the Form renderer generates HTML like this:
<form id="_id0" method="post" action="/faces/index.xhtml" enctype="application/x-www-form-urlencoded">
If you do not specify the id attribute explicitly, a value is generated by the JSF implementation, as is the case for all generated HTML elements. You can explicitly specify the id attribute for forms so that it can be referenced in stylesheets or scripts.
Form Elements and JavaScript
JavaServer Faces is all about server-side components, but it is 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 do not match, a JavaScript dialog is displayed. If they do match, the form is submitted.
)
Figure 4–1 Using JavaScript to access form elements
We use the id attribute to assign names to the relevant HTML elements so that we can access them with JavaScript:
<h:form> ... <h:inputSecret id="password" .../> <h:inputSecret id="passwordConfirm" .../> ... <h:commandButton type="button" onclick="checkPassword(this.form)"/> ... </h:form>
When the user clicks the button, a JavaScript function checkPassword is invoked. Here is the implementation of the function:
function checkPassword(form) {
var password = form[form.id + ":password"].value;
var passwordConfirm = form[form.id + ":passwordConfirm"].value;
if (password == passwordConfirm)
form.submit();
else
alert("Password and password confirm fields don't match");
}
To understand the syntax used to access form elements, look at the HTML produced by the preceding code:
<form id="_id0" method="post"
action="/javascript/faces/index.xhtml"
enctype="application/x-www-form-urlencoded">
...
<input id="_id0:password"
type="text" name="registerForm:password"/>
...
<input type="button" name="_id0:_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 do not specify id attributes, the JSF implementation creates identifiers for you. In our case, we didn't specify an id for the form. Therefore, to access the password field in the preceding example, the script uses the expression:
form[form.id + ":password"]
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. The JavaScript code, stylesheets, and resource bundle are listed in Listings 4–2 through 4–4.
)
Figure 4–2 The JavaScript example directory structure
Listing 4–1. javascript/web/index.xhtml
1.<?xml version="1.0" encoding="UTF-8"?>
2.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3."http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4.<html xmlns="http://www.w3.org/1999/xhtml"
5. xmlns:h="http://java.sun.com/jsf/html">
6. <h:head>
7. <title>#{msgs.windowTitle}</title>
8. <h:outputStylesheet library="css" name="styles.css"/>
9. <h:outputScript library="javascript" name="checkPassword.js"/>
10. </h:head>
11. <h:body>
12. <h:form>
13. <h:panelGrid columns="2" columnClasses="evenColumns, oddColumns">
14. #{msgs.namePrompt}
15. <h:inputText/>
16. #{msgs.passwordPrompt}
17. <h:inputSecret id="password"/>
18. #{msgs.confirmPasswordPrompt}
19. <h:inputSecret id="passwordConfirm"/>
20. </h:panelGrid>
21. <h:commandButton type="button" value="Submit Form"
22. onclick="checkPassword(this.form)"/>
23. </h:form>
24. </h:body>
25. </html>
Listing 4–2. javascript/web/resources/javascript/checkPassword.js
1.function checkPassword(form) {
2. var password = form[form.id + ":password"].value;
3. var passwordConfirm = form[form.id + ":passwordConfirm"].value;
4.
5. if (password == passwordConfirm)
6. form.submit();
7. else
8. alert("Password and password confirm fields don't match");
9.}
Listing 4–3. javascript/web/resources/css/styles.css
1..evenColumns {
2. font-style: italic;
3. }
4.
5..oddColumns {
6. padding-left: 1em;
7. }
Listing 4–4. javascript/src/java/com/corejsf/messages.properties
1.windowTitle=Accessing Form Elements with JavaScript 2.namePrompt=Name: 3.passwordPrompt=Password: 4.confirmPasswordPrompt=Confirm Password: