设计页面

注意：NetBeans IDE 6.1 具有按需绑定功能。如果组件需要编写 Java 代码，则必须立即手动在 Visual Web JSF 应用程序中为组件添加绑定属性。要执行此操作，请右键单击每个组件，然后选择“添加绑定属性”。有关详细信息，请参见 On-demand Binding Attribute Wiki（按需绑定属性 Wiki）。

1. 创建一个使用 Visual Web JavaServer Faces 框架且名为 ListboxExample 的新 Web 应用程序。该应用程序的 Page1.jsp 文件将在可视设计器中打开。

   注意：NetBeans 6.1 提供了一些用于创建项目的新选项，对于这些选项，可以保留其缺省设置。例如，可以将“使用专用的文件夹来存储库”复选框保留为取消选中状态。

2. 将一个列表框组件从组件面板的“基本”类别拖动到页面的左上角。在“属性”窗口中，将其 id 属性更改为 personDD。

3. 通过在“属性”窗口中选中复选框，将列表框的 multiple 属性设置为 True。

   multiple 属性位于“属性”窗口的“数据”类别下。值为 True 可让用户在列表框中选择多个项。

4. 从组件面板的“基本”类别拖动一个文本区域组件。将此组件放在列表框下。

   文本区域将用于显示在列表框中选择的项。
5. 通过在“属性”窗口中设置属性值，将文本区域组件的 rows 属性设置为 10

设计和保留列表框属性

客户端浏览器在每次请求 Web 页时，服务器上都会生成一个请求范围内的新页。初始化新页时，将覆盖以前存储在页 Bean (Page1.java) 中的任何信息。要使应用程序可以跨请求保留列表框项，您必须将这些项保存在 Bean 属性（在会话范围内）中。

注意：NetBeans IDE 6.1 具有按需绑定功能。如果组件需要编写 Java 代码，则必须立即手动在 Visual Web JSF 应用程序中为组件添加绑定属性。要执行此操作，请右键单击每个组件，然后选择“添加绑定属性”。有关详细信息，请参见 On-demand Binding Attribute Wiki（按需绑定属性 Wiki）。

1. 在“导航”窗口中，右键单击 "SessionBean1"，然后选择“编辑 Java 源代码”。
2. 在 sessionBean1 类中键入 Option[] listOptions;。

3. 右键单击 "listOptions"，然后从上下文菜单中选择“插入代码”选项，其中显示了如下图所示的 "getter 和 setter" 选项

   
   将打开“生成 getter 和 setter”对话框。

4. 如下图所示，选中 listOptions 复选框，然后选择“生成”，为 listOptions 添加 getter 和 setter 方法。

   
5. 右键单击页面并选择修复导入。从列表中选择 com.sun.webui.jsf.model.Option。

6. 单击“确定”。

   listOptions 数组包含类型为 Option 的对象。每个对象代表列表中的一个选项。每个选项都包含一个显示名称和一个值。显示名称始终是 String，但是值可以是任何类型的对象（在此示例中为 String）。
7. 现在，创建一个名为 choices 的属性，以保存当前选定项的值。在 sessionBean1 类中键入 String[] choices;。
8. 右键单击 "choices"，然后选择“插入代码”选项以设置其 getter 和 setter 方法。使用与 listOptions 相同的方法添加它们。

初始化列表框属性

在本节中，将初始化在上一节创建的两个 SessionBean 属性的值。此外，还将使用列表框组件的一组初始项来填充 listOptions 属性。

• 将以下代码行添加到 SessionBean1 构造函数中。在此示例和以下示例中包含用于解释代码的注释。

  代码样例 1：初始化属性值和添加 choices

  // Initialize the property values and //add some 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）是项的值。在您选择项时，将在列表框组件的值属性中捕获此值。在此示例中使用 String，但是您可以使用任何 Java 类的实例。第二个参数（例如 My Choice 1）是在列表框中显示的文本。最后一行用于初始化 choices 属性，以便在缺省情况下不选择任何内容。

将属性绑定到列表框组件

现在，我们将 listbox1 和 choices 数组的 items 属性绑定到 SessionBean1.java 中的属性。绑定属性的过程实际上是将组件属性的值链接到 Bean 属性的值。

注意：NetBeans IDE 6.1 具有按需绑定功能。如果组件需要编写 Java 代码，则必须立即手动在 Visual Web JSF 应用程序中为组件添加绑定属性。要执行此操作，请右键单击每个组件，然后选择“添加绑定属性”。有关详细信息，请参见 On-demand Binding Attribute Wiki（按需绑定属性 Wiki）。

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

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

2. 在“绑定到对象”标签上，选择 SessionBean 1 > listOptions，如下图所示。

   
3. 单击“确定”。

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

   将打开 "listbox1 - selected" 对话框。
5. 选择 SessionBean1 > choices 作为绑定目标，然后单击“确定”。

显示所选列表框项

现在将行为添加到列表框组件中，以执行以下两项操作：从 SessionBean 中获取当前所选项的列表，并在文本区域中显示该列表而不使用 Ajax 功能刷新整个页面。

注意：NetBeans IDE 6.1 具有按需绑定功能。如果组件需要编写 Java 代码，则必须立即手动在 Visual Web JSF 应用程序中为组件添加绑定属性。要执行此操作，请右键单击每个组件，然后选择“添加绑定属性”。有关详细信息，请参见 On-demand Binding Attribute Wiki（按需绑定属性 Wiki）。

1. 在可视设计器中，右键单击列表框组件，然后选择“编辑事件处理程序”> "processValueChange"。
2. 将以下事件处理程序代码添加到 listbox1_processValueChange() 方法。在插入代码之后，可以按 Alt+Shift+F 组合键自动设置代码的格式。

   代码样例 2：listbox1_processValueChange() 方法。

   public String listbox1_processValueChange(ValueChangeEvent event) { //set the current selections in the SessionBean1 getSessionBean1().setChoices((String[]) listbox1.getSelected()); //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); }

3. 在可视设计器中，在列表框的“属性”窗口中，单击 onChange 属性的省略号 (...) 按钮。此属性位于“属性”窗口的 "JavaScript" 类别下。

4. 将以下代码添加到 JavaScript 表达式。

   代码样例 3：onChange 属性

   document.getElementById('form1:textArea1').refresh('form1:listbox1'); return false;

   此代码实际上使用 Ajax 功能刷新文本区域而不刷新整个页面。
5. 单击主工具栏中的绿色箭头，或者选择“运行”>“运行主项目”生成和运行应用程序。

6. 在运行的应用程序中，从列表框中选择一个或多个项，然后将在不刷新页面的情况下在文本区域中显示选定的项。要选择多个项，在按住 Ctrl 键的同时单击各项。

   下图显示了已部署的应用程序。

   

在列表框中添加和删除项

在最后一节中，将创建用于向列表框中添加和从中删除项的按钮。列表中的每个项都具有一个名称和一个值。根据新添加的项在列表中的位置，为该项设置值。此外，还将使用项的值来确定要从列表中删除的项。

注意：NetBeans IDE 6.1 具有按需绑定功能。如果组件需要编写 Java 代码，则必须立即手动在 Visual Web JSF 应用程序中为组件添加绑定属性。要执行此操作，请右键单击每个组件，然后选择“添加绑定属性”。有关详细信息，请参见 On-demand Binding Attribute Wiki（按需绑定属性 Wiki）。

1. 打开可视设计器。在“导航”窗口中，双击 "SessionBean1" 在 Java 编辑器中打开源代码。
2. 在 SessionBean1 中键入 int counter = 0;
3. 右键单击该计数器，然后选择“插入代码”选项以设置其 getter 和 setter 方法。使用与 listOptions 和 choices 相同的方法添加它们。

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

   代码样例 4：添加到 SessionBean1 构造函数。

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

5. 打开可视设计器。从组件面板中拖动一个按钮组件，并将其放在列表框组件的右侧。将此按钮的 text 属性更改为 Add。
6. 从组件面板中拖动另一个按钮，并将其放在 "Add" 按钮的下方。将此按钮的 text 属性更改为 Remove。

   注意：应将按钮放在网格中，或者在属性表单中明确设置其大小，以避免在 Internet Explorer 7 中发生呈现问题。

7. 双击 "Add" 按钮，并将以下代码插入到 button1_action 方法中。

   代码样例 5：button1_action 方法

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

8. 打开可视设计器。双击 "Remove" 按钮。

9. 将 button2_action 方法替换为以下代码。

   代码样例 6：button2_action 方法

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

10. 运行应用程序。

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

    

小结

在本教程中，您使用 NetBeans Visual Web JSF 框架创建了一个使用多项选择列表框的应用程序和一个使用 Ajax 功能的文本区域。

另请参见

• Visual Web JSF 应用程序开发入门指南
• 开发 Web 应用程序
• Web 应用程序学习资源