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>text field <h: input secrete>password field <h: select many check box>group of check boxes <h: select  Boolean check box>single check box <h: select  many list box>list box with multiple selections <h: select  one list box>list box with single. Selection <h: select  many menu>select  box with multiple selection <h: select  one menu>select  box with single selection <h: select  one radio>group of radio buttons with single  selection <h:text area>àtext area <h:command button>button, submit button, reset button <h:command link<> There 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 table This GUI Component can be used to display data Syntax <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