下拉列表（drop-down list）

   <h:selectone_menu>标记用于生成包含几个颜色选项的下拉列表。

   <h:selectitem>标记包含在<h:selectone_menu>中，作为下拉列表的选项：

 

<f:use_faces>     <h:form formname="pform">         ..........         <p><h:output_text value="color:"/><br>         <h:selectone_menu id="color" valueref="pbean.color">             <f:validate_required/>             <h:selectitem itemvalue="black" itemlabel="black"/>             <h:selectitem itemvalue="red" itemlabel="red"/>             <h:selectitem itemvalue="blue" itemlabel="blue"/>             <h:selectitem itemvalue="green" itemlabel="green"/>         </h:selectone_menu>         <br><h:output_errors for="color"/>         ..........     </h:form> </f:use_faces>

 

   上面的jsp代码生成下面的html片断：

 

<form method="post" action="/usingjsf/faces/edit.jsp">     ..........     <p>color:<br>     <select name="color" size="1">         <option value="black">black</option>         <option value="red">red</option>         <option value="blue">blue</option>         <option value="green" selected>green</option>     </select>     <br>     .......... </form>

 

   下拉列表定义为color，类型为字符串（string）：

 

public class pbean implements java.io.serializable {       ..........       private string color;       public string getcolor() {         return color;     }       public void setcolor(string color) {         this.color = color;     }       ..........   }

 

   当html表单被生成时，jsf将html属性selected加入到值与javabean模型color属性相同的列表项中。假设没有验证错误，jsf收到包含新颜色值的用户输入后会刷新javabean属性。

单选钮（radio button）

<h:selectone_radio>与<h:selectitem>标记用于生成一组单选钮：

 

<f:use_faces>     <h:form formname="pform">         ..........         <p><h:output_text value="alignment:"/><br>         <h:selectone_radio id="align" valueref="pbean.align"                 layout="line_direction">             <f:validate_required/>             <h:selectitem itemvalue="left" itemlabel="left"/>             <h:selectitem itemvalue="center" itemlabel="center"/>             <h:selectitem itemvalue="right" itemlabel="right"/>         </h:selectone_radio>         <br><h:output_errors for="align"/>         ..........     </h:form> </f:use_faces>

 

   上面的jsp代码生成如下代码：

 

<form method="post" action="/usingjsf/faces/edit.jsp">     ..........     <p>alignment:<br>     <table border="0">         <tr>             <td><input type="radio" checked                  name="align" value="left"> left</td>  &nbp;          <td><input type="radio"                  name="align" value="center"> center</td>             <td><input type="radio"                 name="align" value="right"> right</td>         </tr>     </table>     <br>     .......... </form>

 

   单选钮定义为align：

 

public class pbean implements java.io.serializable {       ..........       private string align;       public string getalign() {         return align;     }       public void setalign(string align) {         this.align = align;     }       ..........   }

 

   html表单生成时，jsf将html属性checked加入到与javabean模型的align属性值相同的单选钮中。假如没有验证错误，jsf收到新摆放位置的用户输入时刷新javabean属性。

复选钮（checkbox）

   文件edit.jsp包含3个由<h:selectboolean_checkbox>标记生成的复选钮。这些界面组件包含在由<h:panel_grid>与<h:panel_group>标记生成的表格（table）中：

 

<f:use_faces>     <h:form formname="pform">         ..........         <p><h:output_text value="style:"/><br>         <h:panel_grid columns="3" border="0" cellspacing="5">             <h:panel_group>                 <h:selectboolean_checkbox id="bold"                     valueref="pbean.bold"/>                 <h:output_text value="bold"/>             </h:panel_group>             <h:panel_group>                 <h:selectboolean_checkbox id="italic"                     valueref="pbean.italic"/>                 <h:output_text value="italic"/>             </h:panel_group>             <h:panel_group>                 <h:selectboolean_checkbox id="underline"                     valueref="pbean.underline"/>                 <h:output_text value="underline"/>             </h:panel_group>         </h:panel_grid>         ..........     </h:form> </f:use_faces>

 

   上面代码生成如下片断：

 

<form method="post" action="/usingjsf/faces/edit.jsp">     ..........     <p>style:<br>     <table border="0" cellspacing="5">         <tr>             <td><input type="checkbox"                   name="bold">bold</td>             <td><input type="checkbox"                    name="italic" checked>italic</td>             <td><input type="checkbox"                    name="underline">underline</td>         </tr>     </table>     .......... </form>

 

   3个复选钮分别与类型为布尔（boolean）的bold、italic、underline绑定在一起：

 

public class pbean implements java.io.serializable {       ..........       private boolean bold;       public boolean isbold() {         return bold;     }       public void setbold(boolean bold) {         this.bold = bold;     }     private boolean italic;       public boolean isitalic() {         return italic;     }       public void setitalic(boolean italic) {         this.italic = italic;     }     private boolean underline;       public boolean isunderline() {         return underline;     }       public void setunderline(boolean underline) {         this.underline = underline;     }       ..........   }

 

    生成html表单时，jsf将checked属性加入到每一个javabean属性为真（true）的复选钮中。假如没有验证错误，jsf收到用户输入后就会刷新javabean属性。

 

   在本例中，复选钮是分别独立生成的。jsf也提供了<h:selectmany_checkboxlist>标记用于生成一组复选钮。还提供了<h:panel_list>和<h:panel_data>两个标记用于从集合与数组中生成表格。

命令按钮（command buttons）

   文件faces-config.xml定义了导航规则，决定jsf在用户点击网页中的命令按钮时做什么，网页的路径由<from-tree-id>标记（/edit.jsp）指定。由<navigation-case>元素分别定义了两个导航块（navigation case）：

 

.......... <faces-config>     <navigation-rule>         <from-tree-id>/edit.jsp</from-tree-id>         <navigation-case>             <from-outcome>editoutcome</from-outcome>             <to-tree-id>/edit.jsp</to-tree-id>         </navigation-case>         <navigation-case>             <from-outcome>viewoutcome</from-outcome>             <to-tree-id>/view.jsp</to-tree-id>         </navigation-case>     </navigation-rule>     .......... </faces-config>

 

   文件edit.jsp包含由标记<h:command_button>生成的两个按钮。每个都有一个标识（id）、一个标签、一个命令名称（这里没有使用，但jsf需要）以及一个action或actionref属性：

 

<f:use_faces>     <h:form formname="pform">         ..........         <p>         <h:command_button id="view" label="view"             commandname="viewcmd" action="viewoutcome"/>         <h:command_button id="bolduppercase"             label="bold upper case / view"             commandname="bolduppercasecmd"             actionref="pbean.bolduppercaseaction"/>     </h:form> </f:use_faces>

 

    上面jsp代码生成如下html片断：

 

<form method="post" action="/usingjsf/faces/edit.jsp">     ..........     <p>     <input type="submit" name="view" value="view">     <input type="submit" name="bolduppercase"          value="bold upper case / view"> </form>

 

   jsf会在每次浏览器提交用户输入时验证表单中的数据。如果验证器没有发出错误信号而且没有类型转换错误，jsf便会分析导航块（navigation case）。对于第一个按钮，jsf会得到action属性的值viewoutcome，该值与第二个导航块的<from-outcome>元素中的文本匹配。因此，jsf将http请求转发给view.jsp，文件view.jsp的路径包含在第二个导航块的<to-tree-id>元素中。

 

   当用户点击第二个按钮时，jsf则调用pbean对象的getbolduppercaseaction()方法。该方法返回一个bolduppercaseaction的实例，bolduppercaseaction则是pbean的内部类。接着，jsf调用invoke()方法，该方法返回一个在运行时决定的结果而不是固定不变的html文件：

 

public class pbean implements java.io.erializable {       ..........       public bolduppercaseaction getbolduppercaseaction() {         return new bolduppercaseaction();     }       public class bolduppercaseaction             extends javax.faces.application.action {         public string invoke() {             string uctext = gettext().touppercase();             if (isbold() && gettext().equals(uctext))                 return "viewoutcome";             else {                 setbold(true);                 settext(uctext);                 return "editoutcome";             }         }     }   }

 

   如果bold（粗体）属性的值为true（真）并且文本的所有字符为大写的，jsf就按照第二个导航块中的定义，与另一个按钮情况一样jsf将http请求转发给view.jsp。另外，invoke()方法会将bold属性设为true，并将文本的所有字符改为大写的，最后返回字符串editoutcome，使jsf按照第一个导航块的定义，保持edit.jsp为当前页。

文章来源：www.matrix.org.cn,转载请与原作者联系