JavaServer Faces HTML Tags Reference

 

1.   Form

<h:form id="jsftags">
 ...
</h:form>

2.   commandButton

<h:commandButton
   id="submit"
   value="#{msg.buttonHeader}"
   action="nextPage">
</h:commandButton>

3.   commandLink

<h:commandLink id="link" action="goto">
  <h:outputText value="#{msg.linkName}"/>
</h:commandLink>

4.   graphicImage

 <h:graphicImage id=”image”

   alt=”jsf-sun”

url=”/images/jsf-sun.gif”>

 </h:grahicImage>

 

 5.   inputText

 

 <h:inputText id=”address”

value=”#{jsfexample.address}” />

 

 6.    inputSecret
<h:inputSecret redisplay="false"
  value="#{jsfexample.password}" />
 

7.    inputHidden

<h:inputHidden id="hidden"
   value="userPreference" />

8.    inputTextArea

<h:inputTextarea id="textArea"
   rows="4" cols="7"
   value="Text goes here.."/>

9.    outputText

<h:outputText
 value="#{jsfexample.zipCode}"/>

10.   outputLabel

<h:outputLabel for="address">
  <h:outputText id="addressLabel"
    value="User Home Address"/>
</h:outputLabel>

11.   outputLink

<h:outputLink
 value="#{msg['jsfstudio.home.url']">
  <f:verbatim>JSF Studio</f:verbatim>
</h:outputLink>

12.   outputFormat

<h:outputFormat
 value="#{msg.jsfstudioThankYou}">
  <f:param value="Joe Blow"/>
  <f:param id="productName"
    value="#{msg['jsfstudio.label']}"/>
</h:outputFormat> 

13.   Message

Enter address:
<h:message style="color: red"
 for="useraddress" />
<h:inputText id="useraddress"
 value="#{jsfexample.address}"
  required="true"/>
<h:commandButton action="save" value="Save"/>

14.   selectBooleanCheckbox

<h:selectBooleanCheckbox
 title="emailUpdates"
  value="#{jsfexample.wantsEmailUpdates}" >
</h:selectBooleanCheckbox>
<h:outputText
  value="Would you like email updates?"/>

 

15.   selectManyCheckboxlist

<h:selectManyCheckbox id="cars"
 value="#{carsBean.car}">
  <f:selectItems
   value="#{carBean.carList}"/>
</h:selectManyCheckbox>

16.   selectManyMenu

<h:selectManyMenu
 id="cars_selectManyMenu"
  value="#{carBean.car}">
   <f:selectItems
    value="#{carBean.carList}"/>
</h:selectManyMenu>

17.   selectManyListbox

<h:selectManyListbox
 id="cars_selectManyListbox"
  value="#{carBean.car}">
   <f:selectItems
    value="#{carBean.carList}"/>
</h:selectManyListbox>

18.   selectOneRadio

<h:selectOneRadio
 value="#{carBean.currentCar}">
  <f:selectItems
   value="#{carBean.carList}" />
</h:selectOneRadio>

19.   selectOneMenu

<h:selectOneMenu id="selectCar"
 value="#{carBean.currentCar}">
  <f:selectItems
   value="#{carBean.carList}" />
</h:selectOneMenu> 

20.   selectOneListbox

<h:selectOneListbox id="pickCar"
 value="#{carBean.currentCar}">
  <f:selectItems
   value="#{carBean.carList}" />
</h:selectOneListbox> 

21.   Grid and Group

<h:panelGrid columns=”4″ footerClass=”subtitle”

  headerClass=”subtitlebig” styleClass=”medium”

  columnClasses=”subtitle,medium”>

  <f:facet name=”header”>

    <h:outputText value=”Table with numbers”/>

  </f:facet>

  <h:outputText value=”1″ />

  <h:outputText value=”2″ />

  <h:outputText value=”3″ />

  <h:outputText value=”4″ />

  <h:outputText value=”5″ />

  <h:outputText value=”6″ />

  <h:outputText value=”7″ />

  <f:facet name=”footer”>

    <h:panelGroup>

      <h:outputText value=”one row”  />

      <h:outputText value=” “  />

      <h:outputText

       value=”grouped with panelGroup” />

    </h:panelGroup>

  </f:facet>

</h:panelGrid>

22.   dataTable and column

<h:dataTable id="books"
 columnClasses="list-column-center,
  list-column-right, list-column-center,
list-column-right" headerClass="list-header"
 rowClasses="list-row" styleClass="list-
background" value="#{BookStore.items}" var="store">   
  <h:column>
    <f:facet name="header">
      <h:outputText  value="#{msg.storeNameLabel}"/>
    </f:facet>
     <h:outputText value="#{store.name}"/>
  </h:column>
  <h:column>
    <f:facet name="header">
     <Subject
    </f:facet>
     <h:outputText value="#{store.subject}"/>
  </h:column>
  <h:column>
    <f:facet name="header">
      <h:outputText  value="#{msg.storePriceLabel}"/>
    </f:facet>
     <h:outputText value="#{store.price}"/>
  </h:column>
</h:dataTable> 

23.   selectItems

<h:selectOneMenu id="selectOneCar"
 value="#{carBean.currentCar}">
  <f:selectItems
   value="#{carBean.carList}" />
</h:selectOneMenu> 

24.   selectItem

<h:outputText value="Select car color:" />
<h:selectOneMenu id="chooseCarColor"
  value="apple">
  <f:selectItem
    itemValue="red" itemLabel="Red"/>
  <f:selectItem 
    itemValue="blue" itemLabel="Blue"/>
  <f:selectItem 
    itemValue="black" itemLabel="Black"/>
  <f:selectItem 
    itemValue="green" itemLabel="Green"/>
  <f:selectItem 
    itemValue="white" itemLabel="White"/>
</h:selectOneMenu> 

 JSF Tag Details