JSF标签的使用实例

原创 2007年09月21日 15:48:00
1、commandButton
使用方法:
<h:commandButton
id="submit"
value="#{msg.buttonHeader}"
action="nextPage">
</h:commandButton>
例子:
<input
id="_id0:submit"
type="submit"
name="_id0:submit"
value="Next Step"/>

2、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:
使用方法:
<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:

1、inputText
使用方法:
<h:inputText id="address"
value="#{jsfexample.address}" />
例子:
<input type="text" name="jsftags:_id1"
value="123 JSF Ave" />

2、inputSecret
使用方法:
<h:inputSecret redisplay="false"
value="#{jsfexample.password}" />
例子:
<input id="jsftags:password"
type="password"
name="jsftags:password"
value="secret" />

3、inputHidden
使用方法:
<h:inputHidden id="hidden"
value="userPreference" />
例子:
<input id="jsftags:hidden"
type="hidden"
name="jsftags:hidden"
value="userPreference" />

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

1、outputText
使用方法:
<h:outputText
value="#{jsfexample.zipCode}"/>
例子:

2、outputLabel
使用方法:
<h:outputLabel for="address">
<h:outputText id="addressLabel"
value="User Home Address"/>
</h:outputLabel>
例子:
<span id="jsftags:addressLabel">
User Home Address</span>

3、outputLink
使用方法:
<h:outputLink
value="#{msg['jsfstudio.home.url']">
<f:verbatim>JSF Studio</f:verbatim>
</h:outputLink>
例子:
<a href="http://www.jsf-studio.com">
JSF Studio
</a>

4、outputFormat
使用方法:
<h:outputFormat
value="#{msg.jsfstudioThankYou}">
<f:param value="Joe Blow"/>
<f:param id="productName"
value="#{msg['jsfstudio.label']}"/>
</h:outputFormat>
例子:
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" />

UIMessage and UIMessages
使用方法:
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:
使用方法:
<h:selectBooleanCheckbox
title="emailUpdates"
value="#{jsfexample.wantsEmailUpdates}" >
</h:selectBooleanCheckbox>
<h:outputText
value="Would you like email updates?"/>
例子:
<input type="checkbox"
name="jsftags:_id6" checked
title="emailUpdates" />
Would you like email updates?


UISelectMany
使用方法:
<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
使用方法:
<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>


selectOneBox
使用方法:
<h:selectOneListbox id="pickCar"
value="#{carBean.currentCar}">
<f:selectItems
value="#{carBean.carList}" />
</h:selectListbox>
例子:
<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
使用方法:
<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
使用方法:
<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
使用方法:
<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
使用方法:
<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>
 

润乾报表JSF FORM 标签中使用填报表解决方案

 需求 润乾报表的标签需要在jsf页面中和其他填报控件一起使用,润乾报表负责展现录入部分数据,并且这部分数据和页面的其它控件的数据存在前台和后台的交互。 问题 润乾报表在前台会生成自己的f...

jsf标签 验证器的使用

jsf验证器+正则表达式验证 密码,两次密码是否一致功能。  需求说明: 1,密码和确认后面显示(由10-15位字母或数字组成) 2,两次密码不一致时在确认密码后提示 3,更改内容后验证通过再次提示信...

jsf结合各种标签一起使用

jsf中有很多的不足可以用jstl标签来弥补。下面详细说一说具体的使用。

ajax4jsf常用标签的使用

和 ActionListener或者ValueChangeListener的工作方式一样, 只是仅用于AJAX容器. 添加一个指定的类作为AjaxEvent的监听器. (sent in case of...

jsf标签的使用

  • 2013年08月23日 18:17
  • 274KB
  • 下载

jsf标签使用文档

  • 2012年09月22日 18:41
  • 100KB
  • 下载

JSF标签之数据表h:dataTable

以下代码可以在我的资源中下载 JavaServer Faces核心编程(第3版)源码@ManagedBean @SessionScoped public class TableData { ...

jsf入门、配置使用及标签说明

  • 2013年01月11日 09:19
  • 933KB
  • 下载

JSF 标签使用

  • 2012年10月22日 16:42
  • 9.32MB
  • 下载

JSF —— Facelets 标签

最初是作为对JSF 1.x中基于JSP的视图处理程序的替代而开发的。在JSF2.0中,Facelets作为JSF的默认视图技术来替换JSP。除了是一种更好的视图处理程序外,Facelets还支持大量用...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JSF标签的使用实例
举报原因:
原因补充:

(最多只允许输入30个字)