| JSF HTML tags represent the following kinds of components: Inputs Outputs Commands Selection Others
The Others category includes forms, messages, and components that layout other components. Table 4-2 lists all the HTML tags. Table 4-2. JSF HTML TagsTag | Description |
|---|
form | HTML form | inputText | Single-line text input control | inputTextarea | Multiline text input control | inputSecret | Password input control | inputHidden | Hidden field | outputLabel | Label for another component for accessibility | outputLink | HTML anchor | outputFormat | Like outputText, but formats compound messages | outputText | Single-line text output | commandButton | Button: submit, reset, or pushbutton | commandLink | Link that acts like a pushbutton | message | Displays the most recent message for a component | messages | Displays all messages | graphicImage | Displays an image | selectOneListbox | Single-select listbox | selectOneMenu | Single-select menu | selectOneRadio | Set of radio buttons | selectBooleanCheckbox | Checkbox | selectManyCheckbox | Set of checkboxes | selectManyListbox | Multiselect listbox | selectManyMenu | Multiselect menu | panelGrid | HTML table | panelGroup | Two or more components that are laid out as one | dataTable | A feature-rich table control | column | Column in a dataTable |
We can group the HTML tags in the following categories: Inputs (input...) Outputs (output...) Commands (commandButton and commandLink) Selections (checkbox, listbox, menu, radio) Layouts (panelGrid) Data Table (dataTable); see Chapter 5 Errors and messages (message, messages)
The JSF HTML tags share common attributes, HTML pass-through attributes, and attributes that support dynamic HTML. NOTE  | The HTML tags may seem overly verbose; for example, selectManyListbox could be more efficiently expressed as multiList. But those verbose names correspond to a component/renderer combination, so selectManyListbox represents a selectMany component paired with a listbox renderer. Knowing the type of component a tag represents is crucial if you want to access components programmatically. |
NOTE | Both JSF and Struts developers implement web pages with JSP custom tags. But Struts tags generate HTML directly, whereas JSF tags represent a component and renderer that generate HTML. That key difference makes it easy to adapt JSF applications to alternative display technologies, as we'll see when we implement a wireless JSF application in Chapter 11. |
Common Attributes Three types of tag attributes are shared among multiple HTML component tags: Basic HTML 4.0 DHTML events
Let's look at each type. Basic Attributes As you can see from Table 4-3, basic attributes are shared by the majority of JSF HTML tags. Table 4-3. Basic HTML Tag Attributes[a]Attribute | Component Types | Description |
|---|
id | A (25) | Identifier for a component | binding | A (25) | Reference to the component that can be used in a backing bean | rendered | A (25) | A boolean; false suppresses rendering | styleClass | A (23) | Cascading stylesheet (CSS) class name | value | I, O, C (19) | A component's value, typically a value binding | valueChangeListener | I (11) | A method binding to a method that responds to value changes | converter | I,O (15) | Converter class name | validator | I (11) | Class name of a validator that's created and attached to a component | required | I (11) | A boolean; if true, requires a value to be entered in the associated field |
[a] A = all, I = input, O = output, C = commands, (n) = number of tags with attribute
The id and binding attributes, applicable to all HTML tags, reference a component the former is used primarily by page authors, and the latter is used by Java developers. The value and converter attributes let you specify a component value and a means to convert it from a string to an object, or vice versa. The validator, required, and valueChangeListener attributes are available for input components so that you can validate values and react to changes to those values. See Chapter 6 for more information about validators and converters. The ubiquitous rendered and styleClass attributes affect how a component is rendered. Let's take a brief look at these important attributes. IDs and Bindings The versatile id attribute lets you do the following: Access JSF components from other JSF tags Obtain component references in Java code Access HTML elements with scripts
In this section we discuss the first two tasks listed above. See "Form Elements and JavaScript" on page 97 for more about the last task. The id attribute lets page authors reference a component from another tag. For example, an error message for a component can be displayed like this:
<h:inputText id="name".../> <h:message for="name"/>
You can also use component identifiers to get a component reference in your Java code. For example, you could access the name component in a listener, like this:
UIComponent component = event.getComponent().findComponent("name");
The preceding call to findComponent has a caveat: the component that generated the event and the name component must be in the same form (or data table). There is a better way to access a component in your Java code. Define the component as an instance field of a class. Provide property getters and setters for the component. Then use the binding attribute, which you specify in a JSF page like this:
<h:outputText binding="#{form.statePrompt}".../>
The binding attribute is specified with a value reference expression. That expression refers to a read-write bean property. See Chapter 2 for more information about the binding attribute. The JSF implementation sets the property to the component, so you can programatically manipulate components. You can also programmatically create a component that will be used in lieu of the component specified in the JSF page. For example, the form bean's statePrompt property could be implemented like this:
private UIComponent statePrompt = new UIOutput(); public UIComponent getStatePrompt() { return statePrompt; } public void setStatePrompt(UIComponent statePrompt) {...}
When the #{form.statePrompt} value binding is first encountered, the JSF framework calls Form.getStateOutput(). If that method returns null as is typically the case the JSF implementation creates the component specified in the JSF page. But if that method returns a reference to a component as is the case in the preceding code fragment that component is used instead. Values, Converters, and Validators Inputs, outputs, commands, and data tables all have values. Associated tags in the HTML library, such as h:inputText and h:dataTable, come with a value attribute. You can specify values with a string, like this:
<h:outputText value="William"/>
Most of the time you'll use a value binding, for example:
<h:outputText value="#{customer.name}"/>
The converter attribute, shared by inputs and outputs, lets you attach a converter to a component. Input tags also have a validator attribute that you can use to attach a validator to a component. Converters and validators are discussed at length in Chapter 6. Rendering and Styles You can use CSS styles, either inline (style) or classes (styleClass), to influence how components are rendered. Most of the time you'll specify string constants instead of value bindings for the style and styleClass attributes; for example:
<h:outputText value="#{customer.name}" style/> <h:outputText value="#{customer.id}" style="border: thin solid blue"/>
Value bindings are useful when you need programmatic control over styles. You can also control whether components are rendered at all with the rendered attribute. That attribute comes in handy in all sorts of situations, for example, an optional table column. TIP  | Instead of using a hardwired style, it's better to use a stylesheet. Define a CSS style such as
.prompts { color:red; }
Place it in a stylesheet, say, styles.css. Add a link element inside the head element in your JSF page:
<link href="styles.css" rel="stylesheet" type="text/css"/>
Then use the styleClass attribute:
<h:outputText value="#{msgs.namePrompt}" style/>
Now you can change the appearance of all prompts simply by updating the stylesheet. |
TIP | Remember, you can use operators in value reference expressions. For example, you might have a view that acts as a tabbed pane by optionally rendering a panel depending on the selected tab. In that case, you could use h:panelGrid like this:
<h:panelGrid rendered='#{bean.selectedTab == "Movies"}'/>
The preceding code renders the movies panel when the Movies tab is selected. |
HTML 4.0 Attributes JSF HTML tags have appropriate HTML 4.0 pass-through attributes. Those attribute values are passed through to the generated HTML element. For example, <h:inputText value="#{form.name.last}" size="25".../> generates this HTML: <input type="text" size="25".../>. Notice that the size attribute is passed through to HTML. The HTML 4.0 attributes are listed in Table 4-4. Table 4-4. HTML 4.0 Pass-through Attributes[a]Attribute | Description |
|---|
accesskey (14) | A key, typically combined with a system-defined metakey, that gives focus to an element | accept (1) | Comma-separated list of content types for a form | accept-charset (1) | Comma- or space-separated list of character encodings for a form. The accept-charset attribute is specified with the JSF HTML attribute named acceptcharset. | alt (4) | Alternative text for nontextual elements such as images or applets | border (4) | Pixel value for an element's border width | charset (3) | Character encoding for a linked resource | coords (2) | Coordinates for an element whose shape is a rectangle, circle, or polygon | dir (18) | Direction for text. Valid values are ltr (left to right) and rtl (right to left). | disabled (11) | Disabled state of an input element or button | hreflang (2) | Base language of a resource specified with the href attribute; hreflang may only be used with href. | lang (20) | Base language of an element's attributes and text | maxlength (2) | Maximum number of characters for text fields | readonly (11) | Read-only state of an input field; text can be selected in a read-only field but not edited | rel (2) | Relationship between the current document and a link specified with the href attribute | rev (2) | Reverse link from the anchor specified with href to the current document. The value of the attribute is a space-separated list of link types. | rows (1) | Number of visible rows in a text area. h:dataTable has a rows attribute, but it's not an HTML pass-through attribute. | shape (2) | Shape of a region. Valid values: default, rect, circle, poly. (default signifies the entire region) | size (4) | Size of an input field | style (23) | Inline style information | tabindex (14) | Numerical value specifying a tab index | target (3) | The name of a frame in which a document is opened | title (22) | A title, used for accessibility, that describes an element. Visual browsers typically create tooltips for the title's value | type (4) | Type of a link; for example, "stylesheet" | width (3) | Width of an element |
[a] (n) = number of tags with attribute
The attributes listed in Table 4-4 are defined in the HTML specification, which you can access on line at http://www.w3.org/TR/REC-html40. That web site is an excellent resource for deep digging into HTML. DHTML Events Client-side scripting is useful for all sorts of tasks, such as syntax validation or rollover images, and it is easy to use with JSF. HTML attributes that support scripting, such as onclick and onchange are referred to as dynamic HTML (DHTML) event attributes. JSF supports DHTML event attributes for nearly all of the JSF HTML tags. Those attributes are listed in Table 4-5. Table 4-5. DHTML Event Attributes [a]Attribute | Description |
|---|
onblur (14) | Element loses focus | onchange (11) | Element's value changes | onclick (17) | Mouse button is clicked over the element | ondblclick (18) | Mouse button is double-clicked over the element | onfocus (14) | Element receives focus | onkeydown (18) | Key is pressed | onkeypress (18) | Key is pressed and subsequently released | onkeyup (18) | Key is released | onmousedown (18) | Mouse button is pressed over the element | onmousemove (18) | Mouse moves over the element | onmouseout (18) | Mouse leaves the element's area | onmouseover (18) | Mouse moves onto an element | onmouseup (18) | Mouse button is released | onreset (1) | Form is reset | onselect (11) | Text is selected in an input field | onsubmit (1) | Form is submitted |
[a] (n) = number of tags with attribute
The DHTML event attributes listed in Table 4-5 let you associate client-side scripts with events. Typically, JavaScript is used as a scripting language, but you can use any scripting language you like. See the HTML specification for more details. TIP | You'll probably add client-side scripts to your JSF pages soon after you start using JSF. One common use is to submit a request when an input's value is changed so that value change listeners are immediately notified of the change, like this: <h:selectOneMenu onchange="submit()"...> |
| 