JSF---->输入、输出、命令、选择、表格、其他标签
2012-05-17 23:11
597 查看
jsf标签
Tag Library DocumentationJSF标准HTML标签包括了几个共通的属性,整理如下:
属性名称 | 适用 | 说明 |
id | 所有组件 | 可指定id名称,以让其它卷标或组件参考 |
binding | 所有组件 | 绑定至UIComponent |
rendered | 所有组件 | 是否显示组件 |
styleClass | 所有组件 | 设定Cascading stylesheet (CSS) |
value | 输入、输出、命令组件 | 设定值或绑定至指定的值 |
valueChangeListener | 输入组件 | 设定值变事件处理者 |
converter | 输入、输出组件 | 设定转换器 |
validator | 输入组件 | 设定验证器 |
required | 输入组件 | 是否验证必填字段 |
immediate | 输入、命令组件 | 是否为立即事件 |
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与 outputTextoutputLabel
产生<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><h:graphicImage>图片
<h:panelGrid>排版,本体间只能包括JSF组件,如果想要放入非JSF组件,例如简单的样版(template)文字,则要使用<f:verbatim>包括住。
<h:panelGroup>包装组件
相关文章推荐
- JSF---->输入、输出、命令、选择、表格、其他标签
- JSF---->其他标签
- <textarea>中嵌套其他标签输出出现不必要的空格和换行问题
- JSF---->其他标签
- JSF---->其他标签
- struts2标签:<s:if><s:else>实现选择输出
- General>>Content Types,选择Text>>Html,点击Add,输入*.vm,保存。
- 对StringGrid输入一个数后对其他表格填充的代码
- mac系统命令行窗口输入javac命令,输出中文乱码得问题
- 从键盘上输入一个字符,如果是小写字母,则转换成大写字母输出。其他的则不变
- 如何把用VB进行控制台命令的输入和输出.
- html工作中表格<tbody>标签的使用技巧
- 两端输出<字符从两端移动,向中间汇聚>。模拟三次密码输入
- <!DOCTYPE> 标签的深度剖析以及使用选择
- Linux 输入命令后获输出的内容方法
- JAVA高级视频_IO输入与输出 Java程序与其他进程的数据通讯 学习笔记
- JavaScript中输出</script>标签的方法
- c语言:有一函数:当x<0,y=-1;x=0,y=0;x>0,y=1;编一程序,输入一个x值,要求输出相应的y值。
- 习题 4.6 有一个函数:y=x (x<1) y=2x-1 (1<=x<10) y=3x-11 (x>=10) 写程序,输入x的值,输出y相应的值。
- 关于shell命令的定向输出 2>&1