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.

TagFunctionsRendered AsAppearance
h:inputTextIt allows a user to input a string.An HTML <input type="text"> elementA field
h:outputTextIt displays a line of text.Plain textPlain text
h:formIt represents an input form.An HTML <form> elementNo appearance
h:commandButtonIt 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:inputSecretIt allows a user to input a string without the actual string appearing in the field.An HTML <input type="password"> elementA field that displays a row of characters instead of the actual string entered.
h:inputTextareaIt allows a user to enter a multiline string.An HTML <textarea> elementA multirow field
h:commandLinkIt links to another page or location on a page.An HTML <a href> elementA link
h:inputSecretIt allows a user to input a string without the actual string appearing in the field.An HTML <input type="password"> elementA field that displays a row of characters instead of the actual string entered.
h:inputHiddenIt allows a page author to include a hidden variable in a page.An HTML <input type="hidden"> elementNo appearance
h:inputFileIt allows a user to upload a file.An HTML <input type="file"> elementA field with a Browse button
h:graphicImageIt displays an image.An HTML <img> elementAn image
h:dataTableIt represents a data wrapper.An HTML <table> elementA table that can be updated dynamically.
h:messageIt displays a localized message.An HTML <span> tag if styles are usedA text string
h:messagesIt displays localized messages.A set of HTML <span> tags if styles are usedA text string
h:outputFormatIt displays a formatted message.Plain textPlain text
h:outputLabelIt displays a nested component as a label for a specified input field.An HTML <label> elementPlain text
h:outputLinkIt links to another page or location on a page without generating an action event.An HTML <a> elementA link
h:panelGridIt displays a table.An HTML <table> element with <tr> and <td> elementsA table
h:panelGroupIt groups a set of components under one parent.A HTML <div> or <span> elementA row in a table
h:selectBooleanCheckboxIt allows a user to change the value of a Boolean choice.An HTML <input type="checkbox"> elementA check box
h:selectManyCheckboxIt displays a set of check boxes from which the user can select multiple values.A set of HTML <input> elements of type checkboxA group of check boxes
h:selectManyListboxIt allows a user to select multiple items from a set of items all displayed at once.An HTML <select> elementA box
h:selectManyMenuIt allows a user to select multiple items from a set of items.An HTML <select> elementA menu
h:selectOneListboxIt allows a user to select one item from a set of items all displayed at once.An HTML <select> elementA box
h:selectOneMenuIt allows a user to select one item from a set of items.An HTML <select> elementA menu
h:selectOneRadioIt allows a user to select one item from a set of items.An HTML <input type="radio"> elementA group of options
h:columnIt represents a column of data in a data component.A column of data in an HTML tableA column in a table




Latest Courses