Updated May 17, 2023
Introduction to JSF Components
Java Server Faces which is also known as JSF is a User Interface component based on the Java MVC framework. It helps in simplifying the UI construction for applications which are server-based. Moreover, JSF has several other features such as:
- Provision of reusable User Interface components.
- Easy transfer of data between several User Interface components.
- Custom component implementation.
- Management of User Interface states across more than one server request.
- Client-side event writing to server-side application code.
- Applications of JSF are run in web containers such as Tomcat.
In this article, we will be discussing several UI components of JSF.
Types of JSF Components
In JSF application, there are certain significant components such as User Interface Components, Renderers, Managed Beans, Convertors, Events and Listeners, Validators, Page Navigations. In this section, we will see different UI components in detail.
In JSF components, there are two types:
- Standard UI Components
- Custom UI Components
1. Standard UI components
In Standard UI components, different components such as text fields, list boxes, checkboxes, labels, panel, radio buttons, etc will be present.
2. Custom UI Components
Custom components include reusable components that can be created and used by users.
Now, let us see different UI components of JSF in detail.
| Tag | Use/Function | Rendered as | Appearance of the component |
| h:form | Form will be represented as input. | HTML element
<form>
|
No appearance. |
| h:inputTextarea | Multiline String can be inputted by a user with the help of this tag. | HTML element
<textarea>
|
Field with multiple rows. |
| h:inputHidden | A hidden variable can be included in a page by a page author. | HTML element
<input type=”hidden”> |
No appearance. |
| h:inputText | String can be input by a user with the help of this tag. | HTML element
<input type=”text”>
|
A field. |
| h:inputFile | The file can be uploaded by the user. | HTML element
<input type=”file”> |
A browse button will be available along with a field. |
| h:outputText | A text line will be displayed. | Plain text | Plain text. |
| h:inputSecret | A string can be input by a user with the help of this tag. However, it can’t appear in the field. | HTML element
<input type=”password”>
|
A field where certain characters get displayed instead of the input string. |
| h:dataTable | A data wrapper will be represented here. | HTML element
<table>
|
A table that updates dynamically. |
| h:column | In a data component, a column of data will be represented. | Data column in an HTML table | Table column. |
| h:selectManyCheckbox | A checkbox set can be displayed where the user is able to choose multiple values. | HTML element
<input>of checkbox type. |
A set of checkboxes. |
| h:panelGroup | A set of components will be displayed under 1 parent. | HTML element
<div> or <span> |
Table row. |
| h:selectManyMenu | One or more items can be chosen by the user from an item set. | HTML element <select> | A menu. |
| h:message | Localized message will be displayed. | If styles are used, HTML tag will be <span> | A text string. |
| h:messages | Localized message will be displayed. | If styles are used, set of HTML tags will be of format <span> | A text string |
| h:outputLabel | A nested component will be displayed as a label for a particular input field. | HTML element
<label> |
Plain text |
| h:selectOneMenu | One item can be chosen by the user from an item set | HTML element <select> | A menu. |
| h:outputFormat | A formatted message will be displayed. | Plain text | Plain text. |
| h:selectOneRadio | One item can be chosen by the user from an item set | HTML element <input type=”radio”> | A set of options. |
| h:graphicImage | An image will be displayed. | HTML element <img> |
An image. |
| h:panelGrid | A table will be displayed. | HTML element
<table> with elements such as <tr> and <td> |
A table. |
| h:selectOneListbox | One item can be chosen by the user from an item set where all are displayed at once. | HTML element <select> | A box. |
| h:selectBooleanCheckbox | Boolean choice value can be changed by the user. | HTML element <input type=”checkbox”> | A check box. |
| h:selectManyListbox | One or more items can be chosen by the user from an item set where all are displayed at once. | HTML element <select> | A box. |
| h:commandButton | A form will be submitted to the application. | HTML element
<input type=”submit”> Or <input type=”reset”> Or <input type=”image”>
|
Button |
| h:commandLink | Links to a location or a page which is available on a page | HTML element
<a href>
|
Link |
| h:outputLink | Links to a location or a page which is available on a page. This will be done without creating an action event. | HTML element
<a> |
Link |
Examples of JSF UI Components
Below are the JSF UI Components:
| Component | Example |
| h:inputText | <h:inputText id=”uname” value=”#{u.name}” label=”uname” maxlength=”20″
size=”23″ alt=”uname” autocomplete=”off” required=”true” requiredMessage=”User name is must and type in capitals” style=”color:green” > </h:inputText> <h:inputText id=”age” value=”#{u.age}” label=”age” maxlength=”10″ size=”15″ alt=”age” autocomplete=”on” required=”false” requiredMessage=”Age as of the date provided in the secondary school certificate” style=”color:yellow” > </h:inputText> |
| h:outputText | <h:outputText value=”happy”></h:outputText> |
| h:form | <h:form id=”u-form”>
<h:outputLabel for=”uname”>Name of the user as mentioned in the passport and it should be in capitals</h:outputLabel> <h:inputText id=”uname” value=”#{u.name}” label=”uname” maxlength=”20″ size=”23″ alt=”uname” autocomplete=”off” required=”true” requiredMessage=” User name is must and type in capitals “ style=”color:green” > </h:inputText> <br/> <h:commandButton id=”s-button” value=”Submit “ action= “response.xhtml”/> </h:form>
|
| h:graphicImage | < h:graphicImage id=”image-id” name=”user-image” url=”#{user.fileLocation()}”
height=”50px” width=”50px” alt=”Image not found”></h:graphicImage>
|
| h:messages | <h:form id=”u-form”>
<h:outputLabel for=”uname”>Name of the user as mentioned in the passport and it should be in capitals</h:outputLabel> <h:inputText id=”uname” value=”#{u.name}” label=”uname” maxlength=”20″ size=”23″ alt=”uname” autocomplete=”off” required=”true” requiredMessage=” User name is must and type in capitals “ style=”color:green” > </h:inputText> <br/> <h:commandButton value=”Submit” action=”response.xhtml”></h:commandButton> <!– Display the errors. –> <h:messages style=”color: green”></h:messages> </h:form>
|
| h:inputFile | <h:inputFile id=”f-id” value=”#{u.fileName}” required=”true”
requiredMessage=”Uploading of a file is compulsory in the format pdf, jpeg, docx, ppt, excel” alt=”upload file”></h:inputFile>
|
| h:outputLabel | <h:outputLabel for=”uname”>Name of the user as mentioned in the passport</h:outputLabel> |
| h:commandButton | <h:commandButton id=”s-button” value=”Submit” action=”response.xhtml”/> |
| h:inputHidden | <h:inputHidden value=”#{u.id}” id=”uId” class=”uId-class”></h:inputHidden> |
Conclusion
Java Server Faces or JSF is a User Interface component that helps in simplifying the User Interface construction for applications which are server based. In this article, different UI components and example of some of the components are addressed.
Recommended Articles
This is a guide to JSF Components. Here we discuss a brief overview of JSF UI Components and its different types along with its Examples. You can also go through our other suggested articles to learn more –
