16.3.2 Component rendering model

The JSF component architecture separates the functionality of the components from its rendering. In this way, the behavior of a component can be defined once, despite of the multiple renderers each of which defines a different way to render the component.

For example, a UISelectOne component has three different renderers. One of them renders the component as a set of radio buttons. Another renders it as a combo box. And the third one renders it as a list box.

The component tag library provides a set of tags, each one composed of the component functionality (defined in the UIComponent class) and the rendering attributes (defined by the Renderer class). This tag library supports all the component tags listed in Table 16-2.


Tag	Description	Rendered As	Appearance
<h:column>	Represents a column of data in a UIData component	A column in an HTML table	A column in a table
<h:commandButton>	Submits a form	An HTML <input type=type> element, where the type value can be submit, reset, or image	A button
<h:commandLink>	Links to another page or location on a page	An HTML <a href> tag	A hyperlink
<h:dataTable>	Represents a data wrapper.	An HTML <table> tag	A table that can be updated dynamically
<h:form>	Represents an input form.	An HTML <form> tag	Invisible
<h:graphicImage>	Displays an image	An HTML <img> tag	An image
<h:inputHidden>	A hidden variable in a page	An HTML <input type=hidden> tag	Invisible
<h:inputSecret>	Allows a user to input a string without the actual string appearing in the field	An HTML <input type=password> tag	A text field, which displays a row of characters instead of the actual string
<h:inputText>	Allows the user to input a string	An HTML <input type=text> tag	A text field
<h:inputTextarea>	Allows the user to input a multiline string	An HTML <input type=textarea> tag	A multirow text field
<h:message>	Displays a localized message	An HTML <span> tag if styles are used	A text string
<h:messages>	Displays localized messages	An HTML <span> tag if styles are used	A text string
<h:outputLabel>	Displays a nested component as a label for a specified input field	An HTML <label> tag	Plain text
<h:outputLink>	Links to another page or location on a page without generating an action event	An HTML <a> tag	A hyperlink
<h:outputFormat>	Displays a localized message	An HTML <p> tag	Plain text
<h:outputText>	Displays a line of text	An HTML <p> tag	Plain text
<h:panelGrid>	Displays a table	An HTML <table> tag with <tr> and <td> tags	A table
<h:panelGroup>	Groups a set of components under one parent	An HTML <tr> tag with <td> tags	A row in a table
<h:selectBooleanCheckbox>	Allows a user to change the value of a Boolean choice	An HTML <input type=checkbox> tag	A checkbox
<h:selectItem>	Represents one item in a list of items in a UISelectOne component	An HTML <option> tag	Invisible
<h:selectItems>	Represents a list of items in a UISelectOne component	A list of HTML <option> tags	Invisible
<h:selectManyCheckbox>	Displays a set of checkboxes from which the user can select multiple values	A set of HTML <input type=checkbox> tags	A set of checkboxes
<h:selectManyListbox>	Allows a user to select multiple items from a set of items, all displayed at once	An HTML <select> element	A list box
<h:selectManyMenu>	Allows a user to select multiple items from a set of items	An HTML <select> element	A scrollable combo box
<h:selectOneListbox>	Allows a user to select one item from a set of items, all displayed at once	An HTML <select> element	A list box
<h:selectOneMenu>	Allows a user to select one item from a set of items	An HTML <select> element	A scrollable combo box
<h:selectOneRadio>	Allows a user to select one item from a set of items	An HTML <input type=radio> element	A set of radio buttons