itVincent Blog - Java Working Fun!

技术引领时代!
posts - 117, comments - 181, trackbacks - 0, articles - 12

JSF html标签(2)

Posted on 2007-04-27 14:29 itVincent 阅读(5100) 评论(0)  编辑  收藏
   

JSF html标签

命令类标签包括commandButtoncommandLink

其主要作用在于提供一个命令按钮或链接,以下举例说明:

  • commandButton

显示一个命令按钮,即输出<input> HTML标签,其type属性可以设定为buttonsubmitreset,默认是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="#" onclick="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型态。

 

产生的html代码:

我同意<INPUT TYPE="checkbox" />

 

  • <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>

产生的html代码:

 

高中<INPUT TYPE="radio" NAME="1" value="高中"/>

大学<INPUT TYPE="radio" NAME="1" value="大学"/>

研究所以上<INPUT TYPE="radio" NAME="1" value="研究所以上">

 

您也可以设定layout属性,可设定的属性是lineDirectionpageDirection,预设是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: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数组,例如:

 package onlyfun.caterpillar;

 public class UserBean {
    private boolean[] preferColors;

    public boolean[] getPreferColors() {
        return preferColors;
    }

    public void setPreferColors(boolean[] preferColors) {
        this.preferColors = preferColors;
    }

    ......
 }

 

如果是其它型态的对象,必要时必须搭配转换器(Converter)进行字符串与对象之间的转换。

<h:selectManyListbox>的设定方法类似

 

 

选择类标签可以搭配<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,而第二个参数用以设定labelSelectItem还提供有数个构造函式,记得可以参考一下线上API文件。

您也可以提供一个传回Map对象的方法,Mapkey-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;
    }

 


只有注册用户登录后才能发表评论。


网站导航: