Home » JSF UI Components

JSF UI Components

by Online Tutorials Library

JSF User Interface Component Model

JavaServer Faces provides rich set of components library to define the architecture of application.

It includes the following:

Rich set of classes for specifying the state and behavior of user interface components.

  • A rendering model that defines how to render the components in various ways.
  • A conversion model that defines how to register data converters onto a component.
  • An event and listener model that defines how to handle component events.
  • A validation model that defines how to register validators onto a component.

JSF User Interface Components

JavaServer Faces HTML tag library represents HTML form components and other basic HTML elements, which are used to display or accept data from the user. A JSF form send this data to the server after submitting the form.

The following table contains the user interface components.

Tag Functions Rendered As Appearance
h:inputText It allows a user to input a string. An HTML <input type=”text”> element A field
h:outputText It displays a line of text. Plain text Plain text
h:form It represents an input form. An HTML <form> element No appearance
h:commandButton It submits a form to the application. An HTML <input type=value> element for which the type value can be “submit”, “reset”, or “image” A button
h:inputSecret It allows a user to input a string without the actual string appearing in the field. An HTML <input type=”password”> element A field that displays a row of characters instead of the actual string entered.
h:inputTextarea It allows a user to enter a multiline string. An HTML <textarea> element A multirow field
h:commandLink It links to another page or location on a page. An HTML <a href> element A link
h:inputSecret It allows a user to input a string without the actual string appearing in the field. An HTML <input type=”password”> element A field that displays a row of characters instead of the actual string entered.
h:inputHidden It allows a page author to include a hidden variable in a page. An HTML <input type=”hidden”> element No appearance
h:inputFile It allows a user to upload a file. An HTML <input type=”file”> element A field with a Browse button
h:graphicImage It displays an image. An HTML <img> element An image
h:dataTable It represents a data wrapper. An HTML <table> element A table that can be updated dynamically.
h:message It displays a localized message. An HTML <span> tag if styles are used A text string
h:messages It displays localized messages. A set of HTML <span> tags if styles are used A text string
h:outputFormat It displays a formatted message. Plain text Plain text
h:outputLabel It displays a nested component as a label for a specified input field. An HTML <label> element Plain text
h:outputLink It links to another page or location on a page without generating an action event. An HTML <a> element A link
h:panelGrid It displays a table. An HTML <table> element with <tr> and <td> elements A table
h:panelGroup It groups a set of components under one parent. A HTML <div> or <span> element A row in a table
h:selectBooleanCheckbox It allows a user to change the value of a Boolean choice. An HTML <input type=”checkbox”> element A check box
h:selectManyCheckbox It displays a set of check boxes from which the user can select multiple values. A set of HTML <input> elements of type checkbox A group of check boxes
h:selectManyListbox It allows a user to select multiple items from a set of items all displayed at once. An HTML <select> element A box
h:selectManyMenu It allows a user to select multiple items from a set of items. An HTML <select> element A menu
h:selectOneListbox It allows a user to select one item from a set of items all displayed at once. An HTML <select> element A box
h:selectOneMenu It allows a user to select one item from a set of items. An HTML <select> element A menu
h:selectOneRadio It allows a user to select one item from a set of items. An HTML <input type=”radio”> element A group of options
h:column It represents a column of data in a data component. A column of data in an HTML table A column in a table
Next TopicJSF UI Components

You may also like