目录   -  创建页 -  定义和保留列表框属性 -  初始化列表框属性 -  将属性绑定到列表框 -  显示所选列表框项 -  向列表框中添加项并从中删除项

创建页

1. 创建一个新的 Web 应用程序项目，并将其命名为 ListExample。
   
   图 1 显示了将在以下步骤中创建的页。
   
   

   图 1：列表框示例：页面设计

    
   
2. 从组件面板的“基本”类别中将“列表框”组件拖放到页面上，并调整组件的宽度。
   
   “概要”窗口列出了与“列表框”组件关联的组件。列表框本身 (listbox1) 会跟踪列表中的所有项。列表框与 listbox1DefaultOptions 相关联，listbox1DefaultOptions 是一个非可视组件，包含列表框所显示的项的列表并跟踪列表框中选定的项。
   
   
3. 通过选中“属性”窗口中的复选框，将“列表框”的 multiple 属性设置为 True。
   
   multiple 属性位于“属性”窗口中的“数据”类别的下方。如果值为 True，则允许用户在“列表框”中选择多项。
   
   
4. 将一个“按钮”组件从组件面板拖放到页面上。将“按钮”放在“列表框”的右侧。将其 text 属性更改为 Submit。
   
   
5. 将一个“文本区域”组件拖动到页面上。并将其放在“列表框”组件的下方。
   
   文本区域将用于显示在列表框中选定的项。

设计和保留列表框属性

1. 在“概要”窗口中，右键单击 SessionBean1，然后选择“添加”>“属性”。
   
   将出现“新建属性模式”对话框，如图 2 所示。使用此对话框可以创建 SessionBean 的属性。
   
   

   图 2：“新建属性模式”对话框

    
   
2. 在“名称”字段中键入 listOptions。
   
   
3. 在“类型”字段中键入 com.sun.rave.web.ui.model.Option[]。
   
   
4. 单击“确定”。
   
   listOptions 数组将包含类型为 Option 的对象。每个对象都代表列表中的一个选项。每个选项都包含一个显示名称和一个值。显示名称始终是 String，但是值可以是任何种类的对象（在本例中是 String）。
   
   现在，再创建一个名为 choices 的属性，以保存当前选定项的值。
   
   
5. 在“概要”窗口中，右键单击 SessionBean1，然后选择“添加”>“属性”。
   
   
6. 在“新建属性模式”对话框中，在“名称”字段中输入 choices，在“类型”字段中输入 String[]，然后单击“确定”。
   
   
7. 在“概要”窗口中，展开 "SessionBean1" 节点。验证您刚创建的每个属性是否有一个子节点。

初始化列表框属性

1. 在“概要”窗口中，双击 SessionBean1 在 Java 编辑器中打开其源代码。
   
   
2. 在 Java 代码源文件中，为 Option 类（表示列表框中的单个项）添加 import 语句：
   
   

   代码样例 1：Import 语句

   package listexample; import com.sun.rave.web.ui.appbase.AbstractSessionBean; import javax.faces.FacesException; import com.sun.rave.web.ui.model.Option;

    
   
3. 将以下粗体代码行添加到 SessionBean1 构造函数中。此示例和以下示例中均包含用于说明代码的注释。
   
   

   代码样例 2：选项属性

   public SessionBean1() { // Initialize the property values and //add some choices to the listOptions property to get started. listOptions = new com.sun.rave.web.ui.model.Option[] { new Option("choice1", "My Choice 1"), new Option("choice2", "My Choice 2"), new Option("choice3", "My Choice 3")}; choices = new String[] {}; }

    
   上面代码样例中以粗体显示的第二行用于初始化 listOptions 属性。接下来的三行将一个项添加到列表框中。第一个参数（例如 choice1）是项的值。此值在您选择项时在列表框组件的值属性中被捕获。在本例中使用 String，您可以使用任何 Java 类的实例。第二个参数（例如 My Choice 1）是在列表框中显示的文本。最后一行用于初始化 choices 属性，使其在缺省情况下不选择任何内容。

将属性绑定到列表框

1. 在可视设计器中打开 Page1。右键单击“列表框”组件，然后选择“绑定到数据”。
   
   将打开“绑定到数据”对话框。
   
   
2. 在“绑定到对象”标签上，选择 SessionBean 1 > listOptions，如图 3 所示：
   
   

   图 3：绑定到对象

    
   
3. 单击“确定”。
   
   
4. 在列表框的“属性”窗口中，单击 selected 属性的省略号 (...) 按钮。此属性位于“属性”窗口中“数据”类别的下方。
   
   将打开 "listbox1 - selected" 对话框。
   
   
5. 在“绑定到对象”标签上，选择 SessionBean1 > choices，然后单击“确定”。

显示所选列表框项

1. 在可视设计器中，双击 "Submit" 按钮。
   
   
2. 将以下粗体显示的事件处理程序代码添加到 button1_action() 方法中。插入代码后，可以按 Ctrl-Shift-F 组合键自动重新设置代码格式。
   
   

   代码样例 3：Button1 事件处理程序

   public String button1_action() { //get the current selections from the SessionBean1 String[] mySelections = getSessionBean1().getChoices(); String showSelections = ""; if (mySelections != null) { // Create a list of the values of the selected items for (int i = 0; i < mySelections.length; i++) showSelections = showSelections + mySelections[i] +"\n"; } if (showSelections.equals("")) showSelections = "nothing selected"; else showSelections = "Values chosen:\n" + showSelections; // Display the list in the textArea1 text area getTextArea1().setValue(showSelections); return null; }

    
   
3. 单击主工具栏中的绿色箭头，或者选择“运行”>“运行主项目”生成并运行应用程序。
   
   
4. 在运行的应用程序中，选择列表框中的一项或多项，然后单击 "Submit" 按钮。要选择多项，请按住 Ctrl 键并单击所需项。
   
   单击 "Submit" 按钮时，选定项的值将出现在文本区域中。图 4 显示了正在运行的应用程序。
   
   

   图 4：列表框：最终页面

   
   

向列表框中添加项并从中删除项

1. 单击“设计”打开可视设计器。
   
   
2. 在 "Submit" 按钮下添加一个按钮。将此按钮的 text 属性更改为 Add。
   
   
3. 在 "Add" 按钮下再添加一个按钮。将此按钮的 text 属性更改为 Remove。
   
   
4. 双击 "Add" 按钮并将以下粗体代码插入到 button2_action 方法中。代码的 getSessionBean1().addOption() 行会上有错误，因为该方法尚未添加到会话 Bean 中。
   
   

   代码样例 4：Button2 操作方法

   public String button2_action() { // Add a new generated item to the listbox1 component getSessionBean1().addOption(); getTextArea1().setText("New Item Added"); return null; }

    
   
5. 单击“设计”返回到可视设计器中，然后双击 "Remove" 按钮。
   
   
6. 在 button3_action 方法中插入以下粗体代码。代码的 getSessionBean1().removeOptions() 行上会有错误，因为该方法尚未添加到会话 Bean。
   
   

   代码样例 5：Button3 操作方法

   public String button3_action() { // Remove the selected item or items getSessionBean1().removeOptions((String[])getListbox1().getSelected()); getTextArea1().setText("Selected Items Removed"); return null; }

    
   
7. 单击“设计”返回到可视设计器中，然后在“概要”窗口中，右键单击 SessionBean1，选择“添加”>“属性”。
   
   
8. 在“新建属性模式”对话框中，将“名称”设置为 counter，将“类型”设置为 int，然后单击“确定”。
   
   
9. 在“概要”窗口中，双击 SessionBean1 在 Java 编辑器中打开源代码。
   
   
10. 在 SessionBean1 构造函数中，通过在 choices = new String[] {}; 之后插入以下行来初始化计数器
    
    counter = 0;
    
    
11. 在 SessionBean1 构造函数之后插入以下方法。
    
    

    代码样例 6：addOption 和 removeOptions 方法

    public void addOption() { // add a new item to the list // by creating an updated array that contains the new item setCounter(getCounter() + 1); // counter to assure unique values String newItemVal = "newitem"+getCounter(); Option opt = new Option(newItemVal, "New Item "+getCounter()); Option[] current = getListOptions(); Option[] newOpts = new Option[current.length + 1]; // add the current items to the new array for (int i = 0; i < current.length; i++) newOpts[i] = current[i]; newOpts[current.length] = opt; setListOptions(newOpts); // update the list setChoices(new String[] {newItemVal}); // select the new item } public void removeOptions(String[] selectedValues) { // remove the options that are selected in the list // by matching the values to the options Option[] current = getListOptions(); int curLength = current.length; if (selectedValues != null) { int numSelected = selectedValues.length; int newLength = curLength - numSelected; Option[] newOpts = new Option[newLength]; // updated list array int k = 0; // counter for the updated list boolean found = false; for (int i = 0; i < current.length; i++) { // scan the current items to identify the ones to remove found = false; for (int j = 0; j < numSelected; j++) { if (current[i].getValue().equals(selectedValues[j])) { // this item will be removed found = true; break; } } if (!found) { // since this item was not selected, add it to the updated list newOpts[k] = current[i]; k++; } } setListOptions(newOpts); // update the list setChoices(null); // remove the existing selected values } }

     
    
12. 运行应用程序。
    
    要测试新代码，请单击“添加”按钮将一个新项添加到列表的结尾处，如图 5 所示。要删除一项或多项，请选择相应项，然后单击“删除”按钮。
    
    

    图 5：将项添加到列表框中

    
    

• 有关将组件绑定到数据库中数据的详细信息，请参见使用数据绑定组件访问数据库。