JSF标签与Html标签对照表

来源：互联网发布：淘宝网恒源祥羊绒衫编辑：程序博客网时间：2024/04/28 01:49

JSF HTML Tags索引

JSF HTML Tag 参考

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>

commandLink

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

<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>

<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}"/>
<h:outputText
 value="#{jsfexample.zipCode}"/>

10032

outputLabel

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

User Home Address

<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>

Honda Accord Toyota 4Runner Nissan Z350

<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>

Honda Accord Toyota 4Runner Nissan Z350

<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>