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