JSF example

Let’s look into a JSF example.This JSF example gives a good overview of the different components in JSF.

  • Create the web page using data table and radio button.
    • How to use the Data table
    • Radio button
    • Error messages
    • Resource Bundle

JSF Example- Data Table

  • Create a new web page and select the data table.
  • Set the properties of Data table.

.

  • Click on Add button

  • Select the radio group and set the properties of it.

  • Add Contained type as Customer bean
  • Drag drop the First name and Last name to output box in data table

Download the source code jsp-page , backing-bean

JSF Example-Properties file

  • Create a properties file

Set the name of file

And add the error message like

uk.galaxy.NotSelect = Please select any one row

Add entry of properties file into FacesConfig.xml file

<application>
<variable-resolver>com.ibm.faces.databind.SelectItemsVarResolver</variable-resolver>
<property-resolver>com.ibm.faces.databind.SelectItemsPropResolver</property-resolver>
<locale-config>
<default-locale>en</default-locale>
</locale-config>
<message-bundle>webMessages_en</message-bundle>
</application>

JSF Example – Error Message

Add error message on web pages

Add the Display error JSF component on page

<hx:scriptCollector id="scriptCollectorerror">
<h:messages styleClass="message" id="messages1"></h:messages>
</hx:scriptCollector>

JSF Example – Resource Bundle

  • JSF page:
<f:loadBundle basename="properties.webMessages_en" var="ResourceBundle"/>
<hx:commandExButton
type="submit" value="#{ResourceBundle.SelectButton}" id="button1"
action="#{pc_First.select}" styleClass="commandExButton"></hx:commandExButton>
  • Backing Bean:
protected static ResourceBundle webMessagesBundle = ResourceBundle.getBundle("properties.webMessages_en");
String errMsg= webMessagesBundle.getString("uk.galaxy.NotSelect");

JSF Example – Radio ButtonSnapshot

<h:selectOneRadio disabledClass="selectOneRadio_Disabled"
value="#{pc_First.id}"
onclick="return radioButtonClick(this, event);"
styleClass="selectOneRadio" id="radio1">
<f:selectItem itemValue="#{pc_First.selectedRowId}" />
</h:selectOneRadio>

JSF Example – Pager on JSF page

  • Select Data table and go to the properties of it
  • Select the pager from on properties and set the value of Rows per page.
  • Its looks like as below

JSF Example – Final Application

Final Application Look like as below