JSF---->输入、输出、命令、选择、表格、其他标签

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>

<h:graphicImage>图片

<h:panelGrid>排版， 本体间只能包括JSF组件，如果想要放入非JSF组件，例如简单的样版（template）文字，则要使用<f:verbatim>包括住。

<h:panelGroup>包装组件