JSF---->输入、输出、命令、选择、表格、其他标签
来源:互联网 发布:一知f君13张碧晨 编辑:程序博客网 时间:2024/06/06 07:25
jsf标签
Tag Library Documentation
JSF标准HTML标签包括了几个共通的属性,整理如下:
属性名称
适用
说明
id
所有组件
可指定id名称,以让其它卷标或组件参考
binding
所有组件
绑定至UIComponent
rendered
所有组件
是否显示组件
styleClass
所有组件
设定Cascading stylesheet (CSS)
value
输入、输出、命令组件
设定值或绑定至指定的值
valueChangeListener
输入组件
设定值变事件处理者
converter
输入、输出组件
设定转换器
validator
输入组件
设定验证器
required
输入组件
是否验证必填字段
immediate
输入、命令组件
是否为立即事件
除了共通的属性之外,您还可以在某些组件上设定卷标HTML 4.01的属性,像是size、alt、width等属性,或者是设定DHTML事件属性,例如onchange、onclick等等。
HTML组件库 映射标准的HTML输入元素
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
Core库 辅助常见的应用程序开发任务(如验证/转换数据、事件处理等)
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
一、输出类标签
输出类的标签包括了outputLabel、outputLink、outputFormat与 outputText
outputLabel
产生<label> HTML卷标,使用for属性指定组件的client ID,例如:
<h:outputLabel for="user" value="用户名"><h:inputText id="user" value="#{user.name}"/>
outputLink
产生<a> HTML标签,例如:
<h:outputLink value="../index.jsp"> <h:outputText value="Link to Index"/> <f:param name="name" value="MyName"/></h:outputLink>
你可搭配<f:param>帮链接加上参数,所有的参数都会变成 name=value 的型态附加在连结后。
value所指定的内容也可以是JSF EL绑定。
outputFormat
产生指定的文字讯息,可以搭配<f:param>来设定讯息的参数以格式化文字讯息,例如
<f:loadBundle basename="messages" var="msgs"/> <h:outputFormat value="#{msgs.welcomeText}"> <f:param value="Hello"/> <f:param value="Guest"/> </h:outputFormat>
如果您的messages.properties包括以下的内容:
welcomeText={0}, Your name is {1}.
则{0}与{1}会被取代为<f:param>设定的文字,最后显示的文字会是:
Hello, Your name is Guest.
另一个使用的方法则是:
<h:outputFormat value="{0}, Your name is {1}."> <f:param value="Hello"/> <f:param value="Guest"/> </h:outputFormat>
outputText :
简单的显示指定的值或绑定的讯息,例如:
<h:outputText value="#{user.name}"/>
二、输入类标签
输入类标签包括了inputText、inputTextarea、inputSecret、 inputHidden,分别举例说明如下:
inputText
显示单行输入字段,即输出<input> HTML卷标,其type属性设定为text,例如:
<h:inputText value="#{user.name}"/>
inputTextarea
显示多行输入文字区域,即输出<textarea> HTML标签,例如:
<h:inputTextareavalue="#{user.command}"/>
inputSecret
显示密码输入字段,即输出<input> HTML卷标,其type属性设定为password,您可以设定redisplay属性以决定是否要显示密码字段的值,预设是false。例如:
<h:inputSecretvalue="#{user.password}"/>
inputHidden
隐藏字段,即输出<input> HTML卷标,其type属性设定为hidden,隐藏字段的值用于保留一些讯息于客户端,以在下一次发送窗体时一并送出,例如:
<h:inputHiddenvalue="#{user.hiddenInfo}"/>
三、命令类标签
命令类标签包括commandButton与commandLink,其主要作用在于提供一个命令按钮或连结,以下举例说明:
commandButton
显示一个命令按钮,即输出<input> HTML卷标,其type属性可以设定为button、submit或reset,预设是submit,按下按钮会触发 javax.faces.event.ActionEvent,使用例子如下:
<h:commandButton value="送出" action="#{user.verify}"/>
您可以设定image属性,指定图片的URL,
<h:commandButton value="#{msgs.commandText}" image="images/logowiki.jpg" action="#{user.verify}"/>
commandLink
产生超级链接,会输出<a> HTML卷标,而href属性会有'#',而onclick属性会含有一段JavaScript程序,这个JavaScript的目的是按下连结后自动提交窗体,具体来说其作用就像按钮,但外观却是超级链接,包括在本体部份的内容都会成为超级链接的一部份,一个使用的例子如下:
<h:commandLink value="#{msgs.commandText}" action="#{user.verify}"/>
如果搭配<f:param>来使用,则所设定的参数会被当作请求参数一并送出,例如:
<h:commandLink> <h:outputText value="welcome"/> <f:param name="locale" value="zh_CN"/> </h:commandLink>
四、选择类标签
选择类的标签可略分为单选卷标与多选卷标,依外型的不同可以分为单选钮(Radio)、复选框(CheckBox)、列示方块(ListBox)与选单(Menu)。
selectBooleanCheckbox
在视图上呈现一个复选框,例如:
我同意 <h:selectBooleanCheckbox value="#\{user.aggree\}"/>
selectOneRadio selectOneListbox selectOneMenu
这三个标签设定方法类似,作用是让使用者从其所提供的选项中选择一个项目,所不同的就是其外观上的差别,
<h:selectOneRadio value="#{user.education}"> <f:selectItem itemLabel="高中" itemValue="高中"/> <f:selectItem itemLabel="大学" itemValue="大学"/> <f:selectItem itemLabel="研究所以上" itemValue="研究所以上"/> </h:selectOneRadio>
您也可以设定layout属性,可设定的属性是lineDirection、pageDirection,预设是lineDirection,也就是由左到右来排列选项,如果设定为pageDirection,则是由上至下排列选项,例如设定为:
<h:selectOneRadio layout="pageDirection" value="#{user.education}"> <f:selectItem itemLabel="高中" itemValue="高中"/> <f:selectItem itemLabel="大学" itemValue="大学"/> <f:selectItem itemLabel="研究所以上" itemValue="研究所以上"/> </h:selectOneRadio>
selectManyCheckbox selectManyListbox selectManyMenu
这三个卷标提供使用者复选项目的功能,一个<h:selectManyCheckbox>例子如下:
<h:selectManyCheckbox layout="pageDirection" value="#{user.preferColors}"> <f:selectItem itemLabel="红" itemValue="false"/> <f:selectItem itemLabel="黄" itemValue="false"/> <f:selectItem itemLabel="蓝" itemValue="false"/> </h:selectManyCheckbox>
value所绑定的属性必须是数组或集合(Collection)对象,在这个例子中所使用的是boolean数组,例如
UserBean.java
public class UserBean { private boolean[] preferColors; public boolean[] getPreferColors() { return preferColors; } public void setPreferColors(boolean[] preferColors) { this.preferColors = preferColors; } ...... }
<h:selectManyListbox>和<h:selectManyMenu>的设定方法和<h:selectManyCheckbox>类似,其外观分别如下:
selectItem selectItems
选择类标签可以搭配<f:selectItem>或<f:selectItems>卷标来设定选项,例如:
<f:selectItem itemLabel="高中" itemValue="高中" itemDescription="学历" itemDisabled="true"/>
itemLabel属性设定显示在网页上的文字,itemValue设定发送至伺服端时的值,itemDescription 设定文字描述,它只作用于一些工具程序,对HTML没有什么影响,itemDisabled设定是否选项是否作用,这些属性也都可以使用JSF Expression Language来绑定至一个值。
<f:selectItem>也可以使用value来绑定一个传回javax.faces.model.SelectItem的方法,例如:
<f:selectItem value="#{user.sex}"/>
则绑定的Bean上必须提供下面这个方法:
public SelectItem getSex() { return new SelectItem("男"); }
如果要一次提供多个选项,则可以使用<f:selectItems>,它的value绑定至一个提供传回SelectItem的数组、集合,或者是Map对象的方法,例如:
<h:selectOneRadio value="#{user.education}"> <f:selectItems value="#{user.educationItems}"/> </h:selectOneRadio>
这个例子中<f:selectItems>的value绑定至user.educationItems,其内容如下
private SelectItem[] educationItems; public SelectItem[] getEducationItems() { if(educationItems == null) { educationItems = new SelectItem[3]; educationItems[0] = new SelectItem("高中", "高中"); educationItems[1] =new SelectItem("大学", "大学"); educationItems[2] =new SelectItem("研究所以上", "研究所以上"); } return educationItems; }
在这个例子中,SelectItem的第一个建构参数用以设定value,而第二个参数用以设定label,SelectItem还提供有数个建构函式,您也可以提供一个传回Map对象的方法,Map的key-value会分别作为选项的label-value,例如:
<h:selectManyCheckbox layout="pageDirection" value="#{user.preferColors}"> <f:selectItems value="#{user.preferColorItems}"/></h:selectManyCheckbox>
您要提供下面的程序来搭配上面这个例子:
private Map preferColorItems; public Map getPreferColorItems() { if(preferColorItems == null) { preferColorItems = new HashMap(); preferColorItems.put("红", "Red"); preferColorItems.put("黄", "Yellow"); preferColorItems.put("蓝", "Blue"); } return preferColorItems; }
五、表格标签
<h:dataTable>配合<h:column>实现以表格的方式显示数据
<f:facet> header与footer分别表示表头和表尾
使用DataModel处理复杂的数据
<h:dataTable value="#{tableBean.userList}" var="user"styleClass="orders" headerClass="ordersHeader"rowClasses="evenColumn,oddColumn"><h:column><f:facet name="header"><h:outputText value="Name" /></f:facet><h:outputText value="#{user.name}" /><f:facet name="footer"><h:outputText value="****" /></f:facet></h:column><h:column><f:facet name="header"><h:outputText value="Password" /></f:facet><h:outputText value="#{user.password}" /><f:facet name="footer"><h:outputText value="****" /></f:facet></h:column></h:dataTable>
六、其他标签
<h:messages>或<h:message>
- JSF---->输入、输出、命令、选择、表格、其他标签
- JSF---->其他标签
- 与JSTL以及其他JSP定制标签一起使用JSF
- 理解表格二:其他表格相关标签及属性
- [JSF]JSF标签
- JSF标签
- JSF标签
- jsf标签
- 选择标签中不包含指定标签的其他元素
- JSF——JSF 标签
- JSF 动态表格 写法
- jsf追加表格
- JSF---->表格处理
- java基础教程-输入/输出、小应用程序和其他主题
- java基础<IO输入与输出>--->其他类
- linux下命令执行结果作为其他命令输入参数
- linux下命令执行结果作为其他命令输入参数
- 表格单元格内嵌IP地址输入选择控件
- UIScrollView
- 第十三周任务2-1
- 查看一个编码所得的文件中的序列参数集
- HTMLParser 使用详解
- Nginx源码分析-Epoll模块
- JSF---->输入、输出、命令、选择、表格、其他标签
- JNDI配置原理详解
- JSF---->事件处理---动作事件
- 孙鑫教程14课网络编程
- JSF---->事件处理----实时事件
- ubuntu中的文件管理器
- C# 特性(Attribute)详细介绍
- ftp检查是否成功的方法
- JSF---->事件处理--值变事件