>> 更多 Visual Web Pack 文档

使用列表组件

2007 年 5 月 [修订号：V5.5.1-1]

在本教程中，您将使用 NetBeans Visual Web Pack 5.5 创建一个应用程序，该应用程序使用了一个支持多项选择的列表框组件。从列表框中选择一项或多项并单击 "Submit" 按钮后，应用程序会在文本区域中显示选定的项。除列表框组件外，这些概念还适用于下拉列表、复选框组和单选按钮组组件。

目录 -  创建页面 -  设计并保存列表框属性 -  初始化列表框属性 -  将属性绑定到列表框 -  显示选定的列表框项 -  向列表框添加项并从中删除项

本教程将使用以下技术和资源：

JavaServer Faces 组件/ Java EE 平台	1.2/Java EE 5* 1.1/J2EE 1.4
Travel 数据库	不是必需的
BluePrints AJAX 组件库	不是必需的

* 该教程发布时，只有 Sun Java System Application Server 支持 Java EE 5。

本教程是针对使用 Sun Java Application Server PE 9.0 Update Release 1 和 Tomcat 5.5.17 进行定制的。如果您使用的是其他服务器，请参考发行说明和常见问题解答以了解已知问题和解决方法。有关支持的服务器和 Java EE 平台的详细信息，请参见发行说明。

创建页面

1. 创建一个新的 Visual Web 应用程序项目，并将其命名为 ListExample。

   下图显示了后续步骤中创建的页面的预览效果。

   图 1：样例页面设计

2. 将一个列表框组件从组件面板的“基本”类别拖放到页面上，然后单击并拖动该组件的右边缘以增加其宽度。

   “概要”窗口将列出与该列表框组件关联的组件。列表框组件本身 (listbox1) 会跟踪其列表中的所有项。列表框与 listbox1DefaultOptions 相关联，后者是一个非可视组件，它包含列表框所显示的项的列表，并且还跟踪列表框中选定的项。

3. 在“属性”窗口中，选中位于列表框组件的 multiple 属性旁边的复选框，以便将该属性设置为 True。

   multiple 属性位于“属性”窗口的“数据”类别下面。如果其值为 True，则允许用户在列表框中选择多项。
4. 将一个按钮组件从组件面板拖放到页面上列表框的右侧。将该按钮组件的 text 属性更改为 Submit。

5. 将一个文本区域组件拖放到页面上的列表框下面，然后调整该组件的宽度，使其与列表框宽度相同。

   文本区域将用于显示在列表框中选定的项。

设计并保存列表框属性

1. 在“概要”窗口中，右键单击 "SessionBean1"，然后从弹出式菜单中选择“添加”>“属性”。

   注意：如果未出现“添加”菜单，请关闭弹出式菜单，然后将其重新打开。

   将出现“新建属性模式”对话框，图 2 显示了已输入相应内容的对话框。您可以利用此对话框来创建会话 Bean 的属性。

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

2. 在“名称”字段中键入 listOptions。

3. 在“类型”字段中键入 Option[]。

   注意：您将在下一部分中添加 Option 类的 import 语句。

4. 单击“确定”以创建该属性。

   listOptions 数组将包含类型为 Option 的对象。每个对象代表列表中的一个选项。每个选项都包含一个显示名称和一个值。显示名称始终是 String，但是值可以是任意类型的对象（在本例中，值也是 String）。

5. 创建一个名为 choices 且类型为 String[] 的SessionBean1 属性来保存当前选定项的值。

   1. 在“概要”窗口中，右键单击 "SessionBean1"，然后选择“添加”>“属性”。
   2. 在“新建属性模式”对话框中，输入 choices 作为名称，输入 String[] 作为类型，然后单击“确定”。

   注意：在下一部分中将 Option 类的 import 语句添加到 SessionBean1 后，才能在 "SessionBean1" 节点下面看到新的属性。

初始化列表框属性

1. 在“概要”窗口中，双击 "SessionBean1" 以在 Java 编辑器中打开其源代码。

2. 在 Java 源文件中，单击鼠标右键，然后选择“修复导入”以打开“修复导入”对话框。

   您可以使用此对话框为 Option 类（表示列表框中的单个项）添加 import 语句。

3. 在“修复导入”对话框中，单击“全限定名称”下面的下拉列表，然后从列表中选择正确的 Option 类。

   • 如果应用程序基于 Java EE 5，请选择 "com.sun.webui.jsf.model.Option"。
   • 如果应用程序基于 J2EE 1.4，请选择 "com.sun.rave.web.ui.model.Option"。

4. 将下面以粗体显示的代码行添加到 SessionBean1 构造函数中。

   代码样例 1：Java EE 5 应用程序的 Option 属性

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

   
   上面代码样例中以粗体显示的第三行用于初始化 listOptions 属性。接下来的三行用于将项添加到列表框中。第一个参数（例如 choice1）是项的值。在您选择项时，将从列表框组件的 value 属性中捕获此值。在本例中使用的是 String，但是您可以使用任何 Java 类的实例。第二个参数（例如 My Choice 1）是在列表框中显示的文本。最后一行代码用于初始化 choices 属性，并可以确保在缺省情况下不选择任何内容。
5. 单击 "Page1" 标签以便在可视设计器中显示该页。
6. 在“概要”窗口中，展开 "SessionBean1" 节点并验证是否存在 listOptions 和 choices 属性的节点。

将属性绑定到列表框

1. 在可视设计器的 Page1 中，右键单击列表框组件，然后选择“绑定到数据”。

   将打开“绑定到数据”对话框。

2. 在“绑定到对象”标签中，选择 "SessionBean1" > "listOptions"，如图 3 所示：

   图 3：绑定到对象

3. 单击“确定”。

   现在，列表框的 items 属性会绑定到 SessionBean1 的 listOptions 数组。

4. 在列表框的“属性”窗口中，单击 selected 属性的省略号 (...) 按钮，该属性位于“属性”窗口的“数据”类别下面。

   将打开 selected 属性的属性编辑器，其标题为 "listbox1 - selected"。

5. 如有必要，请单击“绑定到对象”标签，选择 "SessionBean1" 节点下面的 choices，然后单击“确定”。

   现在，列表框的 selected 属性将绑定到 SessionBean1 的 choices 数组。

显示选定的列表框项

1. 在可视设计器的 Page1 中，双击 "Submit" 按钮以在 Java 编辑器中打开其操作方法。

2. 将下面以粗体显示的事件处理程序代码添加到 button1_action() 方法中。

   注意：插入代码后，可以按 Ctrl-Shift-F 组合键自动地重新设置代码格式。

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

   public String button1_action() { // Get the current selections from 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 textArea1 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 方法中。

   代码样例 3：Button2 操作方法

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

   
   注意：代码的 getSessionBean1().addOption() 行上存在错误，因为尚未将该方法添加到会话 Bean 中。由于存在此错误，您将无法使用“设计”视图，这就是为什么要在下一步中使用“概要”窗口。
5. 打开“概要”窗口，右键单击 "button3:Remove" 节点，然后选择“编辑 action 事件处理程序”。

6. 将下面以粗体显示的代码添加到 button3_action 方法中。

   代码样例 4：Button3 操作方法

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

   
   注意：代码中以 getSessionBean1().removeOptions 开头的行上存在错误，因为尚未将该方法添加到会话 Bean 中。
7. 在“概要”窗口中，右键单击 "SessionBean1"，然后选择“添加”>“属性”。
8. 在“新建属性模式”对话框中，将“名称”设置为 counter，将“类型”设置为 int，然后单击“确定”以添加新属性。
9. 在“概要”窗口中，双击 "SessionBean1" 以在 Java 编辑器中打开其源代码。

10. 在 SessionBean1 构造函数中，通过在
    choices = new String[] {}; 之后插入以下行来初始化 counter：

       counter = 0;

11. 在 SessionBean1 构造函数之后插入以下方法。

    代码样例 5：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. 现在，已将新方法添加到会话 Bean 中，请单击 "Page1.jsp" 标签以打开该页，然后单击“设计”按钮返回至可视设计器。

    该页上仍显示有错误条件。
13. 在可视设计器工具栏中，单击“刷新”按钮 以删除错误条件并在该页上显示组件。

14. 运行应用程序。

    要测试新代码，请单击 "Add" 按钮将一个新项添加到列表的结尾处，如图 5 所示。要删除一项或多项，请选择相应项，然后单击 "Remove" 按钮。

    图 5：向列表框添加项

另请参见：

• 深入研究组件
• 使用数据绑定组件访问数据库

---

请将您的意见和建议发送给我们