The JSF HTML tags can be classified as follows:

Form	form
Navigation Must be in <form> tag	h:commandButton h:commandLink h:button h:link h:outputLink
Input Must be in <form> tag	h:inputText h:inputSecret h:inputTextarea h:selectBooleanCheckbox h:selectOneListbox h:selectOneRadio h:selectOneMenu h:selectManyCheckbox h:selectManyListbox h:selectManyMenu
Input Error Messages	h:message h:messages
Display	h:outputText h:outputFormat
Layout and Grouping	h:panelGrid h:panelGroup
Resource Access	h:outputStylesheet h:outputScript h:graphicImage

The form and navigation tags are described in JSF Navigation.

The input error tags and layout tags are described in Input Error Tags

Three types of tag attributes are shared among multiple HTML component tags:

• Basic attributes
• HTML 4.0 attributes
• Dynamic HTML (DHTML) event attributes

Basic attributes are shared by the majority of JSF HTML tags.

We have seen several examples of the value attribute, which simply specifies a component's value:

     <h:inputText value="#{user.name}"/>

     <h:inputSecret value="#{user.password}"/>

     <h:commandButton value="Login" action="welcome"/>

     <h:outputFormat value="#{msgs.currentScore}">
        <f:param value="#{quizBean.score}"/>
     </h:outputFormat>

This section also describes the id and rendered basic attributes.

The id attribute lets you access JSF components from other JSF tags.

For example, an error message for a component can be displayed like this:

	<h:inputText id="name" .../>
        <h:message for="name"/>
      

The id attribute is also useful for:

• Obtaining component references in Java code
• Accessing HTML elements from Javascript code

Recall that a JSF page has a component tree of UIComponents associated with it.

Here is the component tree associated with the login application's index.xhtml page:

A component is a Java object containing all information about a corresponding JSF element (tag), including its

• value
• parent
• children
• renderer
• converter
• validator, etc.

A JSF bean called a backing bean can gain access to a JSF page's component tree.

The JSF page provides access to its component tree through the binding attribute.

Suppose that a form bean has a read/write nameField property defined like this:

     private UIComponent nameField = new UIInput();
     public UIComponent getNameField() { return nameField; }
     public void setNameField(UIComponent newValue) { nameField = newValue; }
      

Now suppose a JSF page contains an element like:

     <h:inputText binding="#{form.nameField}" .../>
      

The form bean now has access to the UIInput object that "backs" the h:inputText tag. (UIInput is a subclass of UIComponent)

Now the entire component object can be manipulated by the bean (also called a "backing bean").

You use the rendered attribute to include or exclude a component from a page, depending on a condition.

For example, you may want to render a "LOGOUT" button only if the user is currently logged in:

     <h:commandButton ... rendered="#{user.loggedIn}"/>
      

Here, loggedIn is a boolean property in the user bean.

JSF HTML tags have appropriate HTML 4.0 "pass-through" attributes.

Such attribute/value pairs are passed through to the generated HTML element in the JSF-to-HTML encoding process.

For example,

     <h:inputText value="#{form.name.last}" size="25".../>
      

generates this HTML:

     <input type="text" size="25".../>
      

This section shows the full list of HTML 4.0 pass-through attributes.

Client-side scripting is useful for tasks such as syntax validation or rollover images.

HTML attributes that support scripting, such as onclick and onchange, are called dynamic HTML (DHTML) event attributes.

JSF supports DHTML event attributes for nearly all of the JSF HTML tags.

Those attributes are listed in this section. An example using Javascript is shown later in this chapter.