Tag JSF
|
Odpowiednik HTML
|
UIForm |
form |
<h:form id="jsftags"> ... </h:form>
|
<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>
|
<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" />
|
<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
|
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>Funkcje.net</f:verbatim> </h:outputLink>
|
<a href="http://www.funkcje.net"> Funkcje.net </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 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: <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="Tekst.."/>
|
<input type="checkbox" name="jsftags:_id6" checked title="emailUpdates" /> Tekst..?
|
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 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>
|
<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 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>
|