Basic GUI Components in JSF

JSF Basic GUI Components

 

In JSF based web appl ns we will use the following components to prepare user interface

<h: input text>2text field

<h: input secrete>2password field

<h: select many check box>2group of check boxes

<h: select  Boolean check box>2single check box

<h: select  many list box>2list box with multiple selections

<h: select  one list box>2list box with single. Selection

<h: select  many menu>2select  box with multiple selection

<h: select  one menu>2select  box with single selection

<h: select  one radio>2group of radio buttons with single  selection

<h:text area>àtext area

<h:command button>2button, submit button, reset button

<h:command link<>

2There are two ways to provide values to the GUI Components like check boxes, radio buttons, list boxes, select boxes.

  1. Static values
  2. Dynamic values

  • To provide static values, we have to use the following tags

<h: select many check box id=”sequel” value=”#{student bean. sequal}”>

<f: select item item label=”BSC”item value=”BSC”/>

=”MCA” =”MCA”/>

<h: select many check box>

  • In bean component

Private list<string>sequel;

Set()—

Get()—

  • To provide dynamic values, we have to use the following lags

<h: select many check box id=”squeal” value=”#{student bean. Squeal}”>

<f:select items value=”#”{student bean. qual}”>

</h:select many check box>

  • In managed bean component

Public class student bean{

Private static array list<select item>qual;

Private list<string> squals;

Static

{

Select item item1=new select item(“BSC”,”BSC”);

(“MCA”,”MCA”);

(“PHD”,”PH”);

Qual=new array list<select item>();

Qual.and(item1);

(item2);

(item3);

}

Public Arraylist<select item>getqual(){

Return qual;

}

Set qual(){---}

Set qual(){---}

 

Data table2 This GUI Component can be used to display data

Syntax2 <h: data table value=”--”var=”--”style class=”--”header class=”--” row classes=”--”column classes=”--”>

<h:column>

<f:facet name=”--”>value</f:facet>

</h:column>

------

 

</h: data table >

  • Where” value” attribute in<h: data table >tag will take JSF expression in order to refer a property in bean component to get data. In Bean component, the respective property should be either collection or object[]
  • Where ”var” attribute will take a variable to store element object reference at each and every iteration
  • Where ”style class” attribute will take a class name defined in the respective css file, which is representing table configurations.
  • Where ”header class” attribute will take a class name defined in the respective css file, which is representing table configurations
  • Where ”column classes” attribute will take a class name provided in the respective css file, which is representing table configurations
  • Where ”row classes” attribute will take a class name defined .css file, which is representing rows configurations