Home > Articles > Programming > Java

  • Print
  • + Share This
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 jsf-1-2.jpg

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

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

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:
  • + Share This
  • 🔖 Save To Your Account