JavaServer Faces HTML Tags Reference

No comments

l
l

JSF Tag Rendered Result HTML Source
UIForm
form 
<h:form id="jsftags">
 ...
</h:form>
 No Renderer 
<form id="jsftags" method="post"
    action="/jsftags/faces/pages/tags.jsp"
    enctype="application/x-www-form-urlencoded">
    ...
    <input type="hidden" name="jsftags"
      value="jsftags" />
    <input type="hidden" name="jsftags:link" />
</form>
UICommand
commandButton 
<h:commandButton
   id="submit"
   value="#{msg.buttonHeader}"
   action="nextPage">
</h:commandButton>
 
<input
      id="_id0:submit"
      type="submit"
      name="_id0:submit"
      value="Next Step"/>
commandLink 
<h:commandLink id="link" action="goto">
  <h:outputText value="#{msg.linkName}"/>
</h:commandLink>
 Next Page 
<a id="_id0:link"
href="#" onclick=
 "document.forms['_id0']['_id0:link'].value=
   '_id0:link';
         document.forms['_id0'].submit();
        return false;">Next Page</a>
UIGraphic
graphicImage 
<h:graphicImage id="image"
   alt="jsf-sun"
   url="/images/jsf-sun.gif">
</h:graphicImage>
 jsf-sun 
<img id="jsftags:image"
 src="/jsf-example/images/jsf-sun.gif"
  alt="jsf-sun" />
UIInput
inputText 
<h:inputText id="address"
  value="#{jsfexample.address}" />
 
<input type="text" name="jsftags:_id1"
  value="123 JSF Ave" />
inputSecret 
<h:inputSecret redisplay="false"
  value="#{jsfexample.password}" />
 
<input id="jsftags:password"
   type="password"
   name="jsftags:password"
   value="secret" />
inputHidden 
<h:inputHidden id="hidden"
   value="userPreference" />
 No Renderer
 
<input id="jsftags:hidden"
   type="hidden"
   name="jsftags:hidden"
   value="userPreference" />
inputTextArea 
<h:inputTextarea id="textArea"
   rows="4" cols="7"
   value="Text goes here.."/>
 
<textarea id="jsftags:textArea"
   name="jsftags:textArea"
   cols="5" rows="3">
    Text goes here..
</textarea>
UIOutput
outputText 
<h:outputText
 value="#{jsfexample.zipCode}"/>
 10032 
10032
outputLabel 
<h:outputLabel for="address">
  <h:outputText id="addressLabel"
    value="User Home Address"/>
</h:outputLabel>
 
<span id="jsftags:addressLabel">
  User Home Address</span>
outputLink 
<h:outputLink
 value="#{msg['jsfstudio.home.url']">
  <f:verbatim>JSF Studio</f:verbatim>
</h:outputLink>
 JSF Studio 
<a href="http://www.jsf-studio.com">
 JSF Studio
</a>
outputFormat 
<h:outputFormat
 value="#{msg.jsfstudioThankYou}">
  <f:param value="Joe Blow"/>
  <f:param id="productName"
    value="#{msg['jsfstudio.label']}"/>
</h:outputFormat>
 Thank you, Joe Blow, for trying Exadel JSF Studio! 
Thank you, Joe Blow, for tryimg Exadel JSF Studio!
UIMessage and UIMessages
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"/>
 Enter address: Validation Error: Value is required.
 
Enter address:
<span style="color: red">
  Validation Error: Value is required.
</span>
<input id="jsftags:useraddress"
 type="text"
  name="jsftags:useraddress" value="" />
<input type="submit" name="jsftags:_id1"
 value="Save" />
UISelectBoolean
selectBooleanCheckbox 
<h:selectBooleanCheckbox
 title="emailUpdates"
  value="#{jsfexample.wantsEmailUpdates}" >
</h:selectBooleanCheckbox>
<h:outputText
  value="Would you like email updates?"/>
 Would you like email updates? 
<input type="checkbox"
  name="jsftags:_id6" checked
    title="emailUpdates" />
Would you like email updates?
UISelectMany
selectManyCheckboxlist 
<h:selectManyCheckbox id="cars"
 value="#{carsBean.car}">
  <f:selectItems
   value="#{carBean.carList}"/>
</h:selectManyCheckbox>

 

 
<span id="jsftags:cars">
<table>
 <tr>
 <td><label for="jsftags:cars">
   <input name="jsftags:cars"
     value="accord" type="checkbox">
    Honda Accord</input>
   </label></td>
 <td><label for="jsftags:cars">
   <input name="jsftags:cars"
     value="4runner" type="checkbox">
    Toyota 4Runner</input>
    </label></td>
 <td><label for="jsftags:cars">
   <input name="jsftags:cars"
     value="nissan-z" type="checkbox">
    Nissan Z350</input<
   </label></td>
 </tr>
</table>
</span>
selectManyMenu 
<h:selectManyMenu
 id="cars_selectManyMenu"
  value="#{carBean.car}">
   <f:selectItems
    value="#{carBean.carList}"/>
</h:selectManyMenu>
 
<select id="jsftags:cars_selectManyMenu"
 name="jsftags:cars_selectManyMenu"
  multiple size="1">
  <option value="accord">Honda Accord</option>
  <option value="4runner">Toyota 4Runner</option>
  <option value="nissan-z">Nissan Z350</option>
</select>
selectManyListbox 
<h:selectManyListbox
 id="cars_selectManyListbox"
  value="#{carBean.car}">
   <f:selectItems
    value="#{carBean.carList}"/>
</h:selectManyListbox>
 
<select id="jsftags:cars_selectManyListbox"
 name="jsftags:cars_selectManyListbox"
  multiple size="3">
   <option value="accord">Honda Accord</option>
   <option value="4runner">Toyota 4Runner</option>
   <option value="nissan-z">Nissan Z350</option>
</select>
UISelectOne
selectOneRadio 
<h:selectOneRadio
 value="#{carBean.currentCar}">
  <f:selectItems
   value="#{carBean.carList}" />
</h:selectOneRadio>
 
<table><tr>
 <td>
  <label for="jsftags:_id9">
   <input type="radio"
    name="jsftags:_id9" value="accord">
      Honda Accord
     </input></label>
 </td>
 <td>
  <label for="jsftags:_id9">
   <input type="radio"
    name="jsftags:_id9" value="4runner">
      Toyota 4Runner
     </input></label>
 </td>
 <td>
  <label for="jsftags:_id9">
   <input type="radio"
    name="jsftags:_id9" value="nissan-z">
      Nissan Z350
     </input>/label>
 </td>
</tr></table>
selectOneMenu 
<h:selectOneMenu id="selectCar"
 value="#{carBean.currentCar}">
  <f:selectItems
   value="#{carBean.carList}" />
</h:selectOneMenu>
 
<select id="jsftags:selectCar"
 name="jsftags:selectCar" size="1">
  <option value="accord">Honda Accord</option>
  <option value="4runner">Toyota 4Runner</option>
  <option value="nissan-z">Nissan Z350</option>
</select>
selectOneListbox 
<h:selectOneListbox id="pickCar"
 value="#{carBean.currentCar}">
  <f:selectItems
   value="#{carBean.carList}" />
</h:selectOneListbox>
 
<select id="jsftags:pickCar"
 name="jsftags:selectCar" size="3">
  <option value="accord">Honda Accord</option>
  <option value="4runner">Toyota 4Runner</option>
  <option value="nissan-z">Nissan Z350</option>
</select>
UIPanel
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>
Table with numbers
one row grouped with panelGroup
1 2 3 4
5 6 7 
<table class="medium">
 <thead>
  <tr><th class="subtitlebig" colspan="4"
   scope="colgroup">Table with numbers</th>
  </tr>
 </thead>
 <tfoot>
  <tr><td class="subtitle"
   colspan="4">
    one row grouped with panelGroup
    </td>
  </tr>
 </tfoot>
 <tbody>
  <tr>
   <td class="subtitle">1</td>
   <td class="medium">2</td>
   <td class="subtitle">3</td>
   <td class="medium">4</td>
  </tr>
  <tr>
   <td class="subtitle">5</td>
   <td class="medium">6</td>
   <td class="subtitle">7</td>
   </tr>
 </tbody>
</table>
UIColumn and UIData
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>
Title Subject Price ($)
JSF For Dummies JSF 25.0
Struts For Dummies Struts 22.95 
<table id="jsftags:books"
 class="list-background">
 <thead>
  <tr>
   <th class="list-header"
    scope="col">Title</th>
   <th class="list-header"
    scope="col">Subject</th>
   <th class="list-header"
    scope="col">Price ($)</th>
  </tr>
 </thead>
 <tbody>
  <tr class="list-row">
   <td class="list-column-center">
    JSF For Dummies</td>
   <td class="list-column-right">
    JSF</td>
   <td class="list-column-center">
    25.0</td>
  </tr>
  <tr class="list-row">
   <td class="list-column-center">
    Struts For Dummies</td>
   <td class="list-column-right">
    Struts</td>
   <td class="list-column-center">
    22.95</td>
  </tr>
 </tbody>
</table>
UISelectItems
selectItems 
<h:selectOneMenu id="selectOneCar"
 value="#{carBean.currentCar}">
  <f:selectItems
   value="#{carBean.carList}" />
</h:selectOneMenu>
 
<select id="jsftags:selectOneCar"
 name="jsftags:selectCar" size="1">
  <option value="accord">Honda Accord</option>
  <option value="4runner">Toyota 4Runner</option>
  <option value="nissan-z">Nissan Z350</option>
</select>
UISelectItem
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>
 Select car color:
 
Select car color:
<select id="jsftags:chooseCarColor"
 name="jsftags:chooseCarColor" size="1">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="black">Black</option>
  <option value="green">Green</option>
  <option value="white">White</option>
</select>

Leave a Reply

Your email address will not be published. Required fields are marked *