JSF标签与Html标签对照表

JSF HTML Tags索引

UIForm | UICommand | UIGraphic | UIInput | UIOutput | UIMessage and UIMessages | UISelectBoolean | UISelectMany | UISelectOne | UIPanel | UIColumn and UIData | UISelectItems | UISelectItem

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 >		< 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 >		< 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.." />	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	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 >	Honda AccordToyota 4RunnerNissan Z350	< 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 >	Honda AccordToyota 4RunnerNissan Z350	< 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 >	Honda AccordToyota 4RunnerNissan Z350	< 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 >	Honda AccordToyota 4RunnerNissan Z350	< 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 >	Honda AccordToyota 4RunnerNissan Z350	< 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: RedBlueBlackGreenWhite	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 >