Szerkesztő:Zafir/JSF UI-könyvtára
Megjelenés
A JavaServer Faces HTML Tag-jei egy JSF-be épített "tag" könyvtár elemei, amelyek azt írják le, hogy lehet HTML komponenseket JSF-el használni.
Használatához az alábbi URI attribútumot kell a forrásfájl tetejébe illeszteni:
http://java.sun.com/jsf/html
form tag
[szerkesztés]JSF:
<h:form id="jsftags">
...
</h:form>
HTML:
<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>
commandButton tag
[szerkesztés]JSF:
<h:commandButton
id="submit"
value="#{msg.buttonHeader}"
action="nextPage">
</h:commandButton>
HTML:
<input
id="_id0:submit"
type="submit"
name="_id0:submit"
value="Next Step"/>
commandLink tag
[szerkesztés]JSF:
<h:commandLink id="link" action="goto">
<h:outputText value="#{msg.linkName}"/>
</h:commandLink>
HTML:
<a id="_id0:link" href="#" onclick=
"document.forms['_id0']['_id0:link'].value=
'_id0:link';
document.forms['_id0'].submit();
return false;">Next Page</a>
graphicImage tag
[szerkesztés]JSF:
<h:graphicImage id="image"
alt="jsf-sun"
url="/images/jsf-sun.gif">
</h:graphicImage>
HTML:
<img id="jsftags:image"
src="/jsf-example/images/jsf-sun.gif"
alt="jsf-sun" />
inputText tag
[szerkesztés]JSF:
<h:inputText id="address"
value="#{jsfexample.address}" />
HTML:
<input type="text" name="jsftags:_id1"
value="123 JSF Ave" />
inputSecret tag
[szerkesztés]JSF:
<h:inputSecret redisplay="false"
value="#{jsfexample.password}" />
HTML:
<input id="jsftags:password"
type="password"
name="jsftags:password"
value="secret" />
inputHidden tag
[szerkesztés]JSF:
<h:inputHidden id="hidden"
value="userPreference" />
HTML:
<input id="jsftags:hidden"
type="hidden"
name="jsftags:hidden"
value="userPreference" />
inputTextArea tag
[szerkesztés]JSF:
<h:inputTextarea id="textArea"
rows="4" cols="7"
value="Text goes here.."/>
HTML:
<textarea id="jsftags:textArea"
name="jsftags:textArea"
cols="5" rows="3">
Text goes here..
</textarea>
outputText tag
[szerkesztés]JSF:
<h:outputText
value="10032"/>
HMTL:
10032
outputLabel tag
[szerkesztés]JSF:
<h:outputLabel for="address">
<h:outputText id="addressLabel"
value="User Home Address"/>
</h:outputLabel>
HTML:
<span id="jsftags:addressLabel">
User Home Address</span>
outputLink tag
[szerkesztés]JSF:
<h:outputLink
value="#{msg['jsfstudio.home.url']">
<f:verbatim>JSF Studio</f:verbatim>
</h:outputLink>
HTML:
<a href="http://www.jsf-studio.com">
JSF Studio
</a>
outputFormat tag
[szerkesztés]JSF:
<h:outputFormat
value="#{msg.jsfstudioThankYou}">
<f:param value="Joe Blow"/>
<f:param id="productName"
value="#{msg['jsfstudio.label']}"/>
</h:outputFormat>
HTML:
Thank you, Joe Blow, for trying Exadel JSF Studio!
message tag
[szerkesztés]JSF:
Enter address:
<h:message style="color: red"
for="useraddress" />
<h:inputText id="useraddress"
value="#{jsfexample.address}"
required="true"/>
<h:commandButton action="save" value="Save"/>
HTML:
Enter address:
<sp an 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" />
selectBooleanCheckbox tag
[szerkesztés]JSF:
<h:selectBooleanCheckbox
title="emailUpdates" value="#{jsfexample.wantsEmailUpdates}" >
</h:selectBooleanCheckbox>
<h:outputText value="Would you like email updates?"/>
HTML:
<input type="checkbox" name="jsftags:_id6" checked
title="emailUpdates" />
Would you like email updates?
selectManyMenu tag
[szerkesztés]JSF:
<h:selectManyMenu
id="cars_selectManyMenu"
value="#{carBean.car}">
<f:selectItems
value="#{carBean.carList}"/>
</h:selectManyMenu>
HTML:
<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 tag
[szerkesztés]JSF:
<h:selectManyListbox
id="cars_selectManyListbox"
value="#{carBean.car}">
<f:selectItems
value="#{carBean.carList}"/>
</h:selectManyListbox>
HTML:
<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>
selectOneRadio tag
[szerkesztés]JSF:
<h:selectOneRadio
value="#{carBean.currentCar}">
<f:selectItems
value="#{carBean.carList}" />
</h:selectOneRadio>
HTML:
<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 tag
[szerkesztés]JSF:
<h:selectOneMenu id="selectCar"
value="#{carBean.currentCar}">
<f:selectItems
value="#{carBean.carList}" />
</h:selectOneMenu>
HTML:
<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 tag
[szerkesztés]JSF:
<h:selectOneListbox id="pickCar"
value="#{carBean.currentCar}">
<f:selectItems
value="#{carBean.carList}" />
</h:selectOneListbox>
HTML:
<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>
selectItems tag
[szerkesztés]JSF:
<h:selectOneMenu id="selectOneCar"
value="#{carBean.currentCar}">
<f:selectItems
value="#{carBean.carList}" />
</h:selectOneMenu>
HTML:
<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>
selectItem tag
[szerkesztés]JSF:
<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>
HTML:
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>
[[Kategória:JavaServer Faces]]