The JSF HTML tags can be classified as follows:

Display
  • outputText
  • outputFormat
  • graphicImage
Text Input
  • inputText
  • inputSecret
  • inputTextarea
Form
  • form
Layout and Grouping
  • panelGroup
  • panelGrid
Selection
  • selectOneMenu
  • selectOneListbox
  • selectOneRadio
  • selectManyMenu
  • selectManyListbox
  • selectBooleanCheckbox
  • selectManyCheckbox
Buttons and Links
  • commandButton
  • commandLink
  • button
  • link
  • outputLink
Message
  • message
  • messages
Resource
  • outputStylesheet
  • outputScript
Common Attributes Display Tags Input Text Tags Selection Tags Button and Link Tags Layout and Grouping Tags Message Tags
Three types of tag attributes are shared among multiple HTML component tags:
Basic Attributes HTML 4.0 Attributes 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, binding, and rendered basic attributes.

The others will be introduced in later chapters.

List The id Attribute The binding Attribute The rendered Attribute

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:
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

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.

Example
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.
Listing 1 Listing 2
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.

Listing