JSF——JSF 标签

JSF 标签

　　网页设计人员要作的就是了解JSF的标签的使用方式，这就像是学习进阶的HTML标签，另一件事就是与程序设计人员沟通好各个Bean的名称绑定。

• 标签入门
  卷标的相关属性查询，您可以参考 Tag Library Documentation，这边的介绍只是一些简单的入门实例。
  o 简介 JSF 标准标签
  o 输出类标签
  o 输入类标签
  o 命令类标签
  o 选择类标签 一
  o 选择类标签 二
  o 其它标签

简介 JSF 标准标签

JSF提供了标准的HTML Renderer Kit，可以让您搭配JSF组件输出HTML文件，标准的HTML Renderer Kit主要包括了几个类别： 输出（Outputs） 　　其名称以output作为开头，作用为输出指定的讯息或绑定值。 输入（Inputs） 　　其名称以input作为开头，其作用为提供使用者输入字段。 命令（Commands） 　　其名称以command作为开头，其作用为提供命令或连结按钮。 选择（Selections） 　　其名称以select作为开头，其作用为提供使用者选项的选取。 其它 　　包括了form、message、messages、graphicImage等等未分类的标签。 　　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等等。 　　除了JSF的标准HTML标签之外，您还需要一些标准核心卷标，这些卷标是独立于Renderer Kit的，JSF并不限制在HTML输出表示层，核心标签可以搭配其它的Renderer Kit来使用。 详细的HTML卷标或核心卷标的使用与属性说明可以查询 Tag Library Documentation 文件

输出类标签

输出类的标签包括了outputLabel、outputLink、outputFormat与 outputText，分别举例说明如下： outputLabel 　　产生<label> HTML卷标，使用for属性指定组件的client ID，例如： <h:inputText id="user" value="#{user.name}"/> <h:outputLabel for="user" value="#{user.name}"/> 　　这会产生像是以下的标签： <input id="user" type="text" name="user" value="guest" /> <label for="user"> 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:inputTextarea value="#{user.command}"/> inputSecret 　　显示密码输入字段，即输出<input> HTML卷标，其type属性设定为password，例如： <h:inputSecret value="#{user.password}"/> 　　您可以设定redisplay属性以决定是否要显示密码字段的值，预设是false。 inputHidden 　　隐藏字段，即输出<input> HTML卷标，其type属性设定为hidden，隐藏字段的值用于保留一些讯息于客户端，以在下一次发送窗体时一并送出，例如： <h:inputHidden value="#{user.hiddenInfo}"/>

命令类标签

命令类标签包括commandButton与commandLink，其主要作用在于提供一个命令按钮或连结，以下举例说明： commandButton 　　显示一个命令按钮，即输出<input> HTML卷标，其type属性可以设定为button、submit或reset，预设是submit，按下按钮会触发 javax.faces.event.ActionEvent，使用例子如下： <h:commandButton value="送出" action="#{user.verify}"/> 　　您可以设定image属性，指定图片的URL，设定了image属性的话，<input>卷标的type属性会被设定为image，例如： <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}"/> 　　产生的HTML输出范例如下： <a href="#" οnclick="document.forms['_id3']['_id3:_idcl'].value='_id3:_id13'; document.forms['_id3'].submit(); return false;">Submit</a> 　　如果搭配<f:param>来使用，则所设定的参数会被当作请求参数一并送出，例如： <h:commandLink>    <h:outputText value="welcome"/>    <f:param name="locale" value="zh_TW"/> </h:commandLink>

选择类标签 一

选择类的标签可略分为单选卷标与多选卷标，依外型的不同可以分为单选钮（Radio）、复选框（CheckBox）、列示方块（ListBox）与选单（Menu），以下分别先作简单的说明。 <h:selectBooleanCheckbox> 　　在视图上呈现一个复选框，例如： 我同意 <h:selectBooleanCheckbox value="#/{user.aggree/}"/> 　　value所绑定的属性必须接受与传回boolean型态。这个组件在网页上呈现的外观如下：   <h:selectOneRadio>、<h:selectOneListbox>、<h: selectOneMenu> 　　这三个标签的作用，是让使用者从其所提供的选项中选择一个项目，所不同的就是其外观上的差别，例如： <h:selectOneRadio value="#{user.education}">    <f:selectItem itemLabel="高中" itemValue="高中"/>    <f:selectItem itemLabel="大学" itemValue="大学"/>    <f:selectItem itemLabel="研究所以上" itemValue="研究所以上"/> </h:selectOneRadio><p> 　　value所绑定的属性可以接受字符串以外的型态或是自订型态，但记得如果是必须转换的型态或自订型态，必须搭配 标准转换器 或 自订转换器 来转换为对象，<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><p> 　　则外观如下：   　　<h:selectOneListbox>、<h:selectOneMenu>的设定方法类似于<h: selectOneRadio>，以下分别列出<h:selectOneListbox>、<h: selectOneMenu>的外观：     　<h:selectManyCheckbox>、<h:selectManyListbox>、<h: 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><p> 　　value所绑定的属性必须是数组或集合（Collection）对象，在这个例子中所使用的是boolean数组，例如： UserBean.java package onlyfun.caterpillar;   public class UserBean {     private boolean[] preferColors;       public boolean[] getPreferColors() {         return preferColors;     }       public void setPreferColors(boolean[] preferColors) {         this.preferColors = preferColors;     }       ...... } 　　如果是其它型态的对象，必要时必须搭配转换器（Converter）进行字符串与对象之间的转换。 　　下图是<h:selectManyCheckbox>的外观，这是将layout设定为pageDirection的外观：   　　<h:selectManyListbox>的设定方法类似，其外观如下：   　　<h:selectManyMenu>在不同的浏览器中会有不同的外观，在Mozilla Firefox中是这样的：   　　在Internet Explorer则是这样的：

选择类标签 二

选择类标签可以搭配<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><p> 　　这个例子中<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还提供有数个建构函式，记得可以参考一下线上API文件。 　　您也可以提供一个传回Map对象的方法，Map的key-value会分别作为选项的label-value，例如： <h:selectManyCheckbox layout="pageDirection"                        value="#{user.preferColors}">     <f:selectItems value="#{user.preferColorItems}"/>  </h:selectManyCheckbox><p> 　　您要提供下面的程序来搭配上面这个例子： ....     private Map preferColorItems;       public Map getPreferColorItems() {         if(preferColorItems == null) {             preferColorItems = new HashMap();             preferColorItems.put("红", "Red");             preferColorItems.put("黄", "Yellow");             preferColorItems.put("蓝", "Blue");         }           return preferColorItems;     }  ....

其它标签 <h:messages>或<h:message>标签的介绍，在 错误讯息处理 中已经有介绍了。 <h:graphicImage> 　　这个标签会绘制一个HTML <img>卷标，value可以指定路径或图片URL，路径可以指定相对路径或绝对路径，例如： <h:graphicImage value="/images/logowiki.jpg"/> <h:panelGrid> 　　这个卷标可以用来作简单的组件排版，它会使用HTML表格卷标来绘制表格，并将组件置于其中，主要指定columns属性，例如设定为 2： <h:panelGrid columns="2">     <h:outputText value="Username"/>     <h:inputText id="name" value="#{userBean.name}"/>     <h:outputText value="Password"/>                     <h:inputText id="password" value="#{userBean.password}"/>     <h:commandButton value="submit" action="login"/>     <h:commandButton value="reset" type="reset"/> </h:panelGrid> 　　则自动将组件分作 2 个 column来排列，排列出来的样子如下： 　　<h:panelGrid>的本体间只能包括JSF组件，如果想要放入非JSF组件，例如简单的样版（template）文字，则要使用 <f:verbatim>包括住，例如： <h:panelGrid columns="2">     <f:verbatim>Username</f:verbatim>     <h:inputText id="name" value="#{userBean.name}"/>     <f:verbatim>Password</f:verbatim>     <h:inputText id="password" value="#{userBean.password}"/>     <h:commandButton value="submit" action="login"/>     <h:commandButton value="reset" type="reset"/> </h:panelGrid> <h:panelGroup> 　　这个组件用来将数个JSF组件包装起来，使其看来像是一个组件，例如： <h:panelGrid columns="2">     <h:outputText value="Username"/>     <h:inputText id="name" value="#{userBean.name}"/>     <h:outputText value="Password"/>                     <h:inputText id="password" value="#{userBean.password}"/>     <h:panelGroup>         <h:commandButton value="submit" action="login"/>         <h:commandButton value="reset" type="reset"/>     </h:panelGroup> </h:panelGrid> 　　在<h:panelGroup>中包括了两个<h:commandButton>，这使得< h:panelGrid>在处理时，将那两个<h:commandButton>看作是一个组件来看待，其完成的版面配置如下所示：