< Day Day Up > |
C.3 HTML Render Kit ClassesA renderer attached to a component is responsible for generating a representation of the component suitable for the specific device type the renderer represents, such as one or more HTML elements for a browser device. It is also responsible for extracting submitted values and configuring the component instance with the values or queue an event signaling that the component was activated. A renderer instance must be threadsafe, because a single instance of each type may be used for multiple, parallel requests. The specification defines only the abstract Renderer class that all renderers must extend. The concrete renderers are defined in terms of their behavior only. This section describes the Renderer class, followed by descriptions of each concrete renderer in the standard HTML render kit. C.3.1 Renderer Class
This abstract class defines all methods that concrete renderer subclasses implement.
Constructor
Methods
C.3.2 Standard Renderer BehaviorThis section describes all implementation-dependent standard renderer classes. Each renderer is described by the component family/renderer type it's registered for, its encode and decode behavior, and the component attributes it supports in the same format as in Appendix A. For descriptions of the attributes, see the description of the corresponding JSF tag library custom action in Appendix A. If a component ID is explicitly set, the client ID for the component is rendered either as the id attribute on the main element representing the component, or as the id attribute of a <span> element around the text or element representation. All supported attributes may also be rendered on the main element or on a <span> element, and most of them are just passed through to the client, without any validation of their value. As general rules, a component with the rendered property set to true isn't rendered at all, and an input component with either the disabled or the readonly attributes set to true isn't decoded.
This renderer represents a command component as a button.
Encode behaviorRenders the component as an HTML <input> element with the type attribute set to submit, reset or image (depending on the value of this action element's type and image attribute values), the name attribute set to the component's client ID, and the value attribute set to the component's value. Decode behaviorLooks for a request parameter with the component's client ID as the name (possibly with a .x or .y suffix). If it finds the parameter and the type attribute isn't reset, the renderer creates a javax.faces.event.ActionEvent and passes it to the component's enqueueEvent() method. Attributes[type="submit |reset" | image="imageURL "] [accesskey="accessKey "] [alt="altText "] [dir="ltr|rtl"] [disabled="true|false "] [lang="lang "] [onblur="code "] [onchange="code "] [onclick="code "] [ondblclick="code "] [onfocus="code "] [onkeydown="code "] [onkeypress="code "] [onkeyup="code "] [onmousedown="code "] [onmousemove="code "] [onmouseout="code "] [onmouseover="code "] [onmouseup="code "] [onselect="code "] [readonly="true|false "] [style="style "] [styleClass="styleClass "] [tabindex="tabIndex "] [title="title "]
This renderer represents a command component as a link.
Encode behaviorRenders the component as an HTML <a> element an href attribute containing "#" and an onclick attribute containing JavaScript code for submitting the form the component belongs to with the component's client ID as a request parameter. If the component has UIParameter component children, the generated JavaScript code also ensures that each parameter is included as request parameters when the form is submitted, with both the name and value URL encoded. The component's children that are not UIParameter components are rendered as the content of the <a> element, i.e., as the link text or image. Decode behaviorLooks for a request parameter with the component's client ID as the name. If it finds the parameter and the type attribute isn't reset, the renderer creates a javax.faces.event.ActionEvent and passes it to the component's enqueueEvent() method. Attributes[accesskey="accessKey"] [charset="charset"] [coords="coords"] [dir="ltr|rtl"] [hreflang="lang"] [lang="lang"] [onblur="code"] [ondblclick="code"] [onfocus="code"] [onkeydown="code"] [onkeypress="code"] [onkeyup="code"] [onmousedown="code"] [onmousemove="code"] [onmouseout="code"] [onmouseover="code"] [onmouseup="code"] [rel="rel"] [rev="rev"] [shape="shape"] [style="style"] [styleClass="styleClass"] [tabindex="tabIndex"] [target="target"] [title="title"] [type="contentType"]
This renderer represents a data component as a table.
Encode behaviorRenders the component an HTML <table> element. UIColumn child components are responsible for rendering the table columns. The columns can hold any type of component, including input components and command components. Both the data table component and its column children may be equipped with header and footer facets. The table's header facet is rendered as one <th> element (with a colspan attribute set to the number of children) within a <tr> element, and column header facets are rendered as <th> elements within a separate <tr> element. A <thead> element encloses both header <tr> elements. The footer facets, if any, are rendered in a similar manner, but with <td> elements instead of <th> and a <tfoot> element instead of the <thead> element. CSS style classes for the header and footer cells can be specified by the headerClass and footerClass attributes. The table rows are rendered within a <tbody> element, with a <tr> element for each row and a <td> element for each column child. The first row to render and how many rows to render can be specified by the first and row attributes, and CSS style classes for the rows and cells can be specified by the rowClasses and columnClasses attributes. Decode behaviorNone. Attributes[bgcolor="color"] [border="border"] [cellpadding="padding"] [cellspacing="spacing"] [columnClasses="styleClasses"] [dir="ltr|rtl"] [footerClass="styleClass"] [frame="frame"] [headerClass="styleClass"] [lang="lang"] [onclick="code"] [ondblclick="code"] [onkeydown="code"] [onkeypress="code"] [onkeyup="code"] [onmousedown="code"] [onmousemove="code"] [onmouseout="code"] [onmouseover="code"] [onmouseup="code"] [rowClasses="styleClasses"] [rules="rules"] [style="style"] [styleClass="styleClass"] [summary="summary"] [title="title"] [width="width"]
This renderer represents a form component as a form.
Encode behaviorRenders the component as an HTML <form> element with an action attribute set to a URL that identifies the view containing the form (obtained by passing the view ID to the ViewHandler getActionURL( ) method, and passing the returned value to the ExternalContext encodeActionURL( ) method) and a method attribute set to post. Also renders hidden fields for all command link components in the form and implementation-dependent markup for including the component's client ID as a request parameter when the form is submitted. Decode behaviorLooks for a request parameter with the component's client ID as the name. If it finds the parameter, the renderer calls the component's setSubmitted() method with the value true; otherwise it calls the same method with the value false. AttributesNone.
This renderer represents a graphic component as an image.
Encode behaviorRenders the component as an HTML <img> element with a src attribute holding the component's value after passing through the ViewHandler getResourceURL() method and passing the returned value through the ExternalContext encodeResourceURL( ) method. Decode behaviorNone. Attributes[alt="altText "] [dir="ltr|rtl"] [height="height "] [ismap="true|false "] [lang="lang "] [longdesc="descURI"] [onclick="code "] [ondblclick="code "] [onkeydown="code "] [onkeypress="code "] [onkeyup="code "] [onmousedown="code "] [onmousemove="code "] [onmouseout="code "] [onmouseover="code "] [onmouseup="code "] [style="style "] [styleClass="styleClass "] [title="title "] [usemap="mapName "] [width="width "]
This renderer represents an input component as a hidden field.
Encode behaviorRenders the component as an HTML <input> element with a type attribute set to hidden, a name attribute set to the component's client ID, and a value attribute set to the component's value. Decode behaviorLooks for a request parameter with the component's client ID as the name. If it finds the parameter, the renderer passes the parameter value to the component's setSubmittedValue() method. AttributesNone.
This renderer represents an input component as a password field.
Encode behaviorRenders the component as an HTML <input> element with a type attribute set to password, a name attribute set to the component's client ID, and a value attribute set to the component's value only if the action's redisplay attribute is set to true. Decode behaviorLooks for a request parameter with the component's client ID as the name. If it finds the parameter, the renderer passes the parameter value to the component's setSubmittedValue() method. Attributes[accesskey="accessKey "] [alt="altText "] [dir="ltr|rtl"] [disabled="true|false "] [lang="lang "] [maxlength="maxLength "] [onblur="code "] [onchange="code "] [onclick="code "] [ondblclick="code "] [onfocus="code "] [onkeydown="code "] [onkeypress="code "] [onkeyup="code "] [onmousedown="code "] [onmousemove="code "] [onmouseout="code "] [onmouseover="code "] [onmouseup="code "] [onselect="code "] [readonly="true|false "] [redisplay="true|false "] [size="size"] [style="style "] [styleClass="styleClass "] [tabindex="tabIndex "] [title="title "]
This renderer represents an input component as a text field.
Encode behaviorRenders the component as an HTML <input> element with a type attribute set to text, a name attribute set to the component's client ID, and a value attribute set to the component's value. Decode behaviorLooks for a request parameter with the component's client ID as the name. If it finds the parameter, the renderer passes the parameter value to the component's setSubmittedValue() method. Attributes[accesskey="accessKey "] [alt="altText "] [dir="ltr|rtl"] [disabled="true|false "] [lang="lang "] [maxlength="maxLength "] [onblur="code "] [onchange="code "] [onclick="code "] [ondblclick="code "] [onfocus="code "] [onkeydown="code "] [onkeypress="code "] [onkeyup="code "] [onmousedown="code "] [onmousemove="code "] [onmouseout="code "] [onmouseover="code "] [onmouseup="code "] [onselect="code "] [readonly="true|false "] [size="size"] [style="style "] [styleClass="styleClass "] [tabindex="tabIndex "] [title="title "]
This renderer represents an input component as a text area.
Encode behaviorThe component is rendered as an HTML <textarea> element with a name attribute set to the component's client ID and a body holding the component's value. Decode behaviorLooks for a request parameter with the component's client ID as the name. If it finds the parameter, the renderer passes the parameter value to the component's setSubmittedValue() method. Attributes[accesskey="accessKey "] [cols="noOfCols "] [dir="ltr|rtl"] [disabled="true|false "] [lang="lang "] [onblur="code "] [onchange="code "] [onclick="code "] [ondblclick="code "] [onfocus="code "] [onkeydown="code "] [onkeypress="code "] [onkeyup="code "] [onmousedown="code "] [onmousemove="code "] [onmouseout="code "] [onmouseover="code "] [onmouseup="code "] [onselect="code "] [readonly="true|false "] [rows="noOfRows "] [style="style "] [styleClass="styleClass "] [tabindex="tabIndex "] [title="title "]
This renderer represents a message component as text.
Encode behaviorRenders the first message queued for the component identified by the component's for property. The message properties identified by the showDetail and showSummary component properties are rendered as text, within an HTML <span> element if any of the CSS style attributes apply or the component ID is set. If the tooltip attribute is set to true and both the summary and the detailed text are rendered, the message summary is rendered as the value of the <span> element's title attribute. Decode behaviorNone. Attributes[errorClass="styleClass "] [errorStyle="style "] [fatalClass="styleClass "] [fatalStyle="style "] [infoClass="styleClass "] [infoStyle="style "] [style="style "] [styleClass="styleClass "] [title="title "] [tooltip="true|false "] [warnClass="styleClass "] [warnStyle="style "]
This renderer represents a message component as text or a table.
Encode behaviorRenders all queued messages or only those queued without a component identifier if the component's globalOnly property is set to true. The message properties identified by the showDetail and showSummary component properties are rendered as cells in an HTML table if the layout attribute is set to table; otherwise within an HTML <span> element if any of the CSS style attributes apply or the component ID is set. If the tooltip attribute is set to true and both the summary and the detailed text are rendered, the message summary is rendered as the value of the <td> or <span> element's title attribute. Decode behaviorNone. Attributes[errorClass="styleClass "] [errorStyle="style "] [fatalClass="styleClass "] [fatalStyle="style "] [infoClass="styleClass "] [infoStyle="style "] [layout="list |table"] [style="style "] [styleClass="styleClass "] [title="title "] [tooltip="true|false "] [warnClass="styleClass "] [warnStyle="style "]
This renderer represents an output component as a formatted message, with parameter component children providing the parameter values.
Encode behaviorRenders the component as text, within an HTML <span> element if any of the CSS style attributes apply or the component ID is set. The component's value should be a parameterized message string. An Object[] is created from the component's UIParameter children and passed along with the component's value as arguments to the java.text.MessageFormat format() method to format a message, which is then rendered, with all special characters converted to their character entity equivalents if escape is set to true. Decode behaviorNone. Attributes[escape="true |false"] [style="style "] [styleClass="styleClass "] [title="title "]
This renderer represents an output component as a label for another component.
Encode behaviorRenders the component as an HTML <label> element with a for attribute set to the client ID for the component identified by the for attribute value. Decode behaviorNone. Attributes[accesskey="accessKey"] [dir="ltr|rtl"] for="componentId" [lang="lang"] [onblur="code"] [onchange="code"] [onclick="code"] [ondblclick="code"] [onfocus="code"] [onkeydown="code"] [onkeypress="code"] [onkeyup="code"] [onmousedown="code"] [onmousemove="code"] [onmouseout="code"] [onmouseover="code"] [onmouseup="code"] [style="style"] [styleClass="styleClass"] [tabindex="tabIndex"] [title="title"]
This renderer represents an output component as a link.
Encode behaviorRenders the component as an HTML <a> element with an href attribute set to the component's value. If the component has UIParameter component children, their name and value properties are added as query string parameters to the href attribute value, with both the name and value URL-encoded. The component's children that are not UIParameter components are rendered as the content of the <a> element, i.e., as the link text or image. Decode behaviorNone. Attributes[accesskey="accessKey"] [charset="charset"] [coords="coords"] [dir="ltr|rtl"] [hreflang="lang"] [lang="lang"] [onblur="code"] [onclick="code"] [ondblclick="code"] [onfocus="code"] [onkeydown="code"] [onkeypress="code"] [onkeyup="code"] [onmousedown="code"] [onmousemove="code"] [onmouseout="code"] [onmouseover="code"] [onmouseup="code"] [rel="rel"] [rev="rev"] [shape="shape"] [style="style"] [styleClass="styleClass"] [tabindex="tabIndex"] [target="target"] [title="title"] [type="contentType"]
This renderer represents an output component as a text.
Encode behaviorThe component is rendered as text, with all special characters converted to their character entity equivalents if escape is set to true, within an HTML <span> element if any of the HTML attributes or the component ID is set. Decode behaviorNone. Attributes[escape="true |false"] [style="style "] [styleClass="styleClass "] [title="title "]
This renderer represents a panel component as a table.
Encode behaviorRenders the component as an HTML table with the number of columns specified by the columns attribute. The renderer uses the component's children to render the table cells, with new rows as the number of columns is reached. The panel component may be equipped with a header and a footer facet. The table's header facet is rendered as one <th> element (with a colspan attribute set to the value of the columns attribute) within a <tr> element, enclosed within an <thead> element. The footer facet is rendered in a similar manner, but with a <td> element instead of <th> and a <tfoot> element instead of the <thead> element. CSS style classes for the header and footer cells can be specified by the headerClass and footerClass attributes. The table rows are rendered within a <tbody> element, with a <tr> element for each row and a <td> element for each column. CSS style classes for the rows and cells can be specified by the rowClasses and columnClasses attributes. Decode behaviorNone. Attributes[bgcolor="color"] [border="border"] [cellpadding="padding"] [cellspacing="spacing"] [columnClasses="styleClasses"] [columns="noOfColumns"] [dir="ltr|rtl"] [footerClass="styleClass"] [frame="frame"] [headerClass="styleClass"] [lang="lang"] [onclick="code"] [ondblclick="code"] [onkeydown="code"] [onkeypress="code"] [onkeyup="code"] [onmousedown="code"] [onmousemove="code"] [onmouseout="code"] [onmouseover="code"] [onmouseup="code"] [rowClasses="styleClasses"] [rules="rules"] [style="style"] [styleClass="styleClass"] [summary="summary"] [title="title"] [width="width"]
This renderer represents a panel component as a container.
Encode behaviorRenders the component's children, within an HTML <span> element if any of the HTML attributes or the component ID is set. Decode behaviorNone. Attributes[style="style"] [styleClass="styleClass"]
This renderer represents a select-boolean component as a checkbox.
Encode behaviorRenders the component as an HTML <input> element with a type attribute set to checkbox, a name attribute set to the component's client ID. If the component's value is true, a checked attribute is rendered as well. Decode behaviorLooks for a request parameter with the component's client ID as the name. If it finds the parameter and its value is "yes" or "true," ignoring case, the renderer calls the component's setSubmittedValue( ) method with the value true; otherwise it calls the same method with the value false. Attributes[accesskey="accessKey "] [dir="ltr|rtl"] [disabled="true|false "] [lang="lang "] [onblur="code "] [onchange="code "] [onclick="code "] [ondblclick="code "] [onfocus="code "] [onkeydown="code "] [onkeypress="code "] [onkeyup="code "] [onmousedown="code "] [onmousemove="code "] [onmouseout="code "] [onmouseover="code "] [onmouseup="code "] [onselect="code "] [readonly="true|false "] [style="style "] [styleClass="styleClass "] [tabindex="tabIndex "] [title="title "]
This renderer represents a select-many component as a group of checkboxes.
Encode behaviorRenders the component as an HTML <table> element with an <input> element for each choice represented by its children (one or more UISelectItem and UISelectItems components) as the table cells. If the layout attribute is set to pageDirection, each cell is rendered in a separate table row; otherwise all cells are rendered in one row. A UISelectItemGroup child component is rendered as a nested table within the corresponding outer table cell. If the component ID is set, a <span> element with an id attribute containing the component's client ID is rendered around the outer table. The <input> elements are rendered with a type attribute set to checkbox and a name attribute set to the component's client ID. Each <input> element is also nested within a <label> elements with a for attribute set to the component's client ID. For all choices that match one of the component's values, the checked attribute is set for the corresponding <input> element. Decode behaviorLooks for request parameters with the component's client ID as the name. If it finds parameters, the renderer the calls component's setSubmittedValue() method with a String[] holding all parameter values as the value; otherwise it calls the same method with an empty String[] as the value. Attributes[accesskey="accessKey "] [border="border "] [dir="ltr|rtl"] [disabled="true|false "] [disabledClass="styleClass "] [enabledClass="styleClass "] [lang="lang "] [layout="lineDirection |pageDirection"] [onblur="code "] [onchange="code "] [onclick="code "] [ondblclick="code "] [onfocus="code "] [onkeydown="code "] [onkeypress="code "] [onkeyup="code "] [onmousedown="code "] [onmousemove="code "] [onmouseout="code "] [onmouseover="code "] [onmouseup="code "] [onselect="code "] [readonly="true|false "] [style="style "] [styleClass="styleClass "] [tabindex="tabIndex "] [title="title "]
This renderer represents a select-many component as a selection list.
Encode behaviorRenders the component as an HTML <select> element with a name attribute set to the component's client ID and a multiple attribute. If the size attribute is set, it is added to the <select> element with the specified value; otherwise a size attribute with the number of choices as the value is added. Each choice represented by the component's children (one or more UISelectItem and UISelectItems components) is rendered as an <option> element or as an <optgroup> element if the child is of the UISelectItemGroup subtype. For all choices that match one of the component's values, the selected attribute is set for the corresponding <option> element. If a choice is marked as disabled, the disabled attribute is also added. Decode behaviorLooks for request parameters with the component's client ID as the name. If it finds parameters, the renderer the calls component's setSubmittedValue() method with a String[] holding all parameter values as the value; otherwise it calls the same method with an empty String[] as the value. Attributes[accesskey="accessKey "] [dir="ltr|rtl"] [disabled="true|false "] [lang="lang "] [onblur="code "] [onchange="code "] [onclick="code "] [ondblclick="code "] [onfocus="code "] [onkeydown="code "] [onkeypress="code "] [onkeyup="code "] [onmousedown="code "] [onmousemove="code "] [onmouseout="code "] [onmouseover="code "] [onmouseup="code "] [onselect="code "] [readonly="true|false "] [size="size"] [style="style "] [styleClass="styleClass "] [tabindex="tabIndex "] [title="title "]
This renderer represents a select-many component as a selection list drop-down menu.
Encode behaviorRenders the component as an HTML <select> element with a name attribute set to the component's client ID and a multiple attribute and a size attribute with 1 as the value. Each choice represented by the component's children (one or more UISelectItem and UISelectItems components) is rendered as an <option> element or as an <optgroup> element if the child is of the UISelectItemGroup subtype. For all choices that match one of the component's values, the selected attribute is set for the corresponding <option> element. If a choice is marked as disabled, the disabled attribute is also added. Decode behaviorLooks for request parameters with the component's client ID as the name. If it finds parameters, the renderer the calls component's setSubmittedValue() method with a String[] holding all parameter values as the value; otherwise it calls the same method with an empty String[] as the value. Attributes[accesskey="accessKey "] [dir="ltr|rtl"] [disabled="true|false "] [lang="lang "] [onblur="code "] [onchange="code "] [onclick="code "] [ondblclick="code "] [onfocus="code "] [onkeydown="code "] [onkeypress="code "] [onkeyup="code "] [onmousedown="code "] [onmousemove="code "] [onmouseout="code "] [onmouseover="code "] [onmouseup="code "] [onselect="code "] [readonly="true|false "] [style="style "] [styleClass="styleClass "] [tabindex="tabIndex "] [title="title "]
This renderer represents a select-one component as a selection list.
Encode behaviorRenders the component as an HTML <select> element with a name attribute set to the component's client ID. If the size attribute is set, it is added to the <select> element with the specified value; otherwise a size attribute with the number of choices as the value is added. Each choice represented by the component's children (one or more UISelectItem and UISelectItems components) is rendered as an <option> element or as an <optgroup> element if the child is of the UISelectItemGroup subtype. For the choice that matches the component's value, the selected attribute is set for the corresponding <option> element. If a choice is marked as disabled, the disabled attribute is also added. Decode behaviorLooks for a request parameter with the component's client ID as the name. If it finds the parameter, the renderer passes the parameter value to the component's setSubmittedValue() method. Attributes[accesskey="accessKey "] [dir="ltr|rtl"] [disabled="true|false "] [lang="lang "] [onblur="code "] [onchange="code "] [onclick="code "] [ondblclick="code "] [onfocus="code "] [onkeydown="code "] [onkeypress="code "] [onkeyup="code "] [onmousedown="code "] [onmousemove="code "] [onmouseout="code "] [onmouseover="code "] [onmouseup="code "] [onselect="code "] [readonly="true|false "] [size="size"] [style="style "] [styleClass="styleClass "] [tabindex="tabIndex "] [title="title "]
This renderer represents a select-one component as a selection list drop-down menu.
Encode behaviorRenders the component as an HTML <select> element with a name attribute set to the component's client ID and a multiple attribute and a size attribute with 1 as the value. Each choice represented by the component's children (one or more UISelectItem and UISelectItems components) is rendered as an <option> element or as an <optgroup> element if the child is of the UISelectItemGroup subtype. For the choice that matches the component's value, the selected attribute is set for the corresponding <option> element. If a choice is marked as disabled, the disabled attribute is also added. Decode behaviorLooks for a request parameter with the component's client ID as the name. If it finds the parameter, the renderer passes the parameter value to the component's setSubmittedValue() method. Attributes[accesskey="accessKey "] [dir="ltr|rtl"] [disabled="true|false "] [lang="lang "] [onblur="code "] [onchange="code "] [onclick="code "] [ondblclick="code "] [onfocus="code "] [onkeydown="code "] [onkeypress="code "] [onkeyup="code "] [onmousedown="code "] [onmousemove="code "] [onmouseout="code "] [onmouseover="code "] [onmouseup="code "] [onselect="code "] [readonly="true|false "] [style="style "] [styleClass="styleClass "] [tabindex="tabIndex "] [title="title "]
This renderer represents a select-one component as a radio button group.
Encode behaviorRenders the component as an HTML <table> element with an <input> element for each choice represented by the component's children (one or more UISelectItem and UISelectItems components) as the table cells. If the layout attribute is set to pageDirection, each cell is rendered in a separate table row; otherwise all cells are rendered in one row. A UISelectItemGroup child component is rendered as a nested table within the corresponding outer table cell. If the component ID is set, a <span> element with an id attribute containing the component's client ID is rendered around the outer table. The <input> elements are rendered with a type attribute set to radio and a name attribute set to the component's client ID. Each <input> element is also nested within a <label> elements with a for attribute set to the component's client ID. For all the choice that matches the component's value, the checked attribute is set for the corresponding <input> element. Decode behaviorLooks for a request parameter with the component's client ID as the name. If it finds the parameter, the renderer passes the parameter value to the component's setSubmittedValue() method. Attributes[accesskey="accessKey "] [border="border "] [dir="ltr|rtl"] [disabled="true|false "] [disabledClass="styleClass "] [enabledClass="styleClass "] [lang="lang "] [layout="lineDirection |pageDirection"] [onblur="code "] [onchange="code "] [onclick="code "] [ondblclick="code "] [onfocus="code "] [onkeydown="code "] [onkeypress="code "] [onkeyup="code "] [onmousedown="code "] [onmousemove="code "] [onmouseout="code "] [onmouseover="code "] [onmouseup="code "] [onselect="code "] [readonly="true|false "] [style="style "] [styleClass="styleClass "] [tabindex="tabIndex "] [title="title "] |
< Day Day Up > |