在本教程中，您将使用 NetBeans Visual Web Pack 5.5 创建并运行一个简单的 Web 应用程序 "Hello Web"。该示例应用程序要求您输入名字，然后显示使用该名字的消息。首先，通过一个输入字段实现此页。然后，将输入字段替换为一个下拉列表，用户可以从中选择名字。下拉列表是用数据库表中的名字填充的。

目录

 


- 

创建项目

- 

设计页面

- 

添加一些行为

- 

运行应用程序

- 

将文本字段替换为下拉列表

- 

将下拉列表绑定到数据库表

- 

添加一些行为


- 

运行应用程序

- 

执行更多操作

 

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

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. 从主菜单中选择“文件”>“新建项目”。
  2. 在新建项目向导中，从“类别”列表中选择 "Web"，然后从“项目”列表中选择“Visual Web 应用程序”。
  3. 单击“下一步”。
  4. 将项目命名为 HelloWeb，然后单击“完成”。 将显示该项目，并且在可视设计器中打开其初始页 (Page1)。


设计页面

首先，设计一个页面，如下图所示。

图 1：Page1 设计

  1. 在“属性”窗口中，在“标题”属性的文本框中键入 Hello Web，如下图所示。
    当浏览器访问此页时，“标题”属性的值便会出现在浏览器的标题栏中。

图 2：“属性”窗口中的页面属性

  1. 提示：通过在可视设计器或“概要”窗口中选择某个组件，可以在“属性”窗口中访问该组件的属性。通过单击页面上的空白位置，可以访问页面的属性。
  2. 如果未展开“组件面板”窗口中的“基本”节点，请现在将其展开。
    本示例使用的所有组件都位于组件面板的“基本”类别中。
  3. 将一个标签组件从组件面板的“基本”类别拖动到可视设计器中的页面左侧，键入 Name:，然后按 Enter 键。
    请注意，组件与页面上的网格是对齐的。另请注意，“属性”窗口中的 text 属性的值为 Name:。 提示：通过右键单击组件，然后从弹出式菜单中选择“编辑文本”，可以将组件切换至编辑模式。
  4. 将一个文本字段组件从组件面板的“基本”类别拖动到可视设计器中，键入 Enter Your Name，然后按 Enter 键。
  5. 在“属性”窗口中，将文本字段的 id 属性由 textField1 更改为 nameField。
  6. 选择标签组件，然后按住 Ctrl-Shift 组合键，同时从标签组件拖动一条连线至文本字段组件。 请注意，标签组件的 for 属性现在被设置为 nameField。
  7. 将一个按钮组件拖动到文本字段组件的右侧，键入 Say Hello，然后按 Enter 键。
  8. 在“属性”窗口中，将按钮组件的 id 属性由 button1 更改为 helloButton。
  9. 将一个静态文本组件拖动到标签组件的下面。
  10. 将该静态文本组件的 id 属性由 staticText1 更改为 helloText。
  11. 将一个消息组组件拖动到页面上的边缘位置，如静态文本组件下方。
  12. 在编辑工具栏中，单击 "JSP" 以切换至 JavaServer Pages (JSP) 源代码编辑器。


添加一些行为


在本部分，您将添加代码使页面重新显示为 Hello <输入名字>。为此，将添加一个事件处理程序，每当单击按钮时应用程序都会调用此处理程序。此事件处理程序将静态文本组件的 text 属性设置为 "hello" 消息，然后使该页面重新显示以便出现该文本。


  1. 在编辑工具栏中，单击“设计”切换至可视设计器。
  2. 双击按钮组件。 编辑区域将切换至 Java 编辑器，并显示 Page1 的页面 Bean。按钮的事件处理程序 helloButton_action 已被添加到页面 Bean 中。
  3. 将 helloButton_action 方法的主体替换为下面以粗体显示的代码行。然后，按 Ctrl-Shift-F 组合键以重新设置代码格式。

代码样例 1：helloButton_action() 代码

public String helloButton_action() {
        String name = (String)nameField.getText();
        helloText.setText("Hello, " + name + "!");
        return null;

以粗体显示的第一行使用了 getText 方法获取文本字段组件 nameField 的 text 属性的值。该值是类型为 Object 的一个对象，它需要是一个字符串，因此将其转换为 String 对象。然后，将该对象赋给 name 变量。

  1. 以粗体显示的第二行设置了 helloText 静态文本组件的 text 属性值。此值包含用户输入到文本字段组件 nameField 中的名字。例如，如果用户输入了 Fred，则此行代码会将静态文本组件的 text 属性设置为 Hello, Fred!。


运行应用程序

  1. 请确保在 Java 编辑器中您的 Java 代码不包含任何错误。
    错误由红色下划线或代码左侧的红色框表示。如果代码中包含错误，则不会生成项目。 提示：将光标停在代码左侧的红色框上，可以看到错误描述。
  2. 单击“运行主项目”按钮 。
  3. 键入您的名字，然后单击 "Say Hello"。
    浏览器会将表单提交到 Web 服务器，该服务器将调用您的 Web 应用程序。应用程序将执行按钮操作方法，更新页面元素，使用更改的数据重新呈现同一页，并将页面发送回 Web 浏览器。下图便是提交 Gus Townsend 的名字时显示的结果。

图 3：Hello Web 及其结果


将文本字段替换为下拉列表

本教程的其余部分将介绍如何使用下拉列表组件而不是文本字段获取用户输入的内容，如下图所示。此下拉列表组件从捆绑的 PERSON 数据库表获取其选择列表。

图 4：Hello Web，最终版本

  1. 在编辑工具栏中，单击“设计”切换至可视设计器。
  2. 在可视设计器中，右键单击 nameField 文本字段组件，然后从弹出式菜单中选择“删除”。
  3. 将一个下拉列表组件从组件面板的“基本”类别拖动到可视设计器中的页面上。将该组件移动至文本字段组件原来所在的区域中。
    请注意，“概要”窗口显示了一个 dropDown1 组件和一个 dropDown1DefaultOptions 对象，如下图所示。下拉列表组件的 items 属性标识包含列表中选择的对象。当您将一个下拉列表组件添加到页面时，IDE 会创建一个缺省选项对象 (dropDown1DefaultOptions)，并将此对象设置为下拉列表组件的 items 属性的值。只有下拉列表组件在可视设计器中是可见的。缺省选项对象仅仅提供出现在列表中的选择。在本教程的后面部分，将修改下拉列表组件以便从其他来源获取其选项。

图 5：“概要”窗口中的组件

  1. 在“属性”窗口中，将组件的 id 更改为 nameDropDown。
  2. 选择标签组件，然后按住 Ctrl-Shift 组合键，同时从标签组件拖动一条连线至下拉列表组件。 请注意，标签组件的 for 属性现在被设置为 nameDropDown。


将下拉列表绑定到数据库表


位于 IDE 工作区左侧的“运行环境”窗口中，包括一个“数据库”节点。“数据库”节点显示了已添加到 IDE 中的所有数据库驱动程序和连接。



NetBeans Visual Web Pack 5.5 附带了一个样例 Travel 数据库。Travel 数据库显示在“数据库”节点的下方。在此部分的教程中，您将使用 Travel 数据库中的 PERSON 表为下拉列表组件提供选项。


  1. 在“运行环境”窗口中，展开“数据库”节点并检查是否已连接 TRAVEL 数据库。 如果 TRAVEL 数据库的 jdbc 节点标记显示为连接中断，并且无法展开该节点，则表明 IDE 未连接该数据库。要连接 TRAVEL 数据库，请右键单击 TRAVEL 数据库的 jdbc 节点，然后从弹出式菜单中选择“连接”。如果出现“连接”对话框，请输入 travel 作为口令，选中“在此会话期间记住口令”，然后单击“确定”。如果未看见 TRAVEL 数据库的 jdbc 节点，请参见 NetBeans Visual Web Pack 安装说明以了解如何为 IDE 提供可用的数据库。
  2. 展开“表”节点。
    在“表”节点下面，您可以看到数据库中每个表的节点，如 "CARRENTAL" 和 "FLIGHT"。下图显示了已展开“表”节点的“运行环境”窗口。

图 6：“运行环境”窗口

  1. 将 PERSON 表从“运行环境”窗口拖放到下拉列表上。
    列表上的显示内容将从 item1 更改为 abc，这表明列表正在显示绑定的数据，而且所显示的数据为 String 类型。 IDE 会为数据库表添加非可视的 personDataProvider 组件。personDataProvider 组件将显示在“概要”窗口中。IDE 还会将 personRowSet 属性添加到 SessionBean1 中。
  2. 右键单击下拉列表组件，然后从弹出式菜单中选择“绑定到数据”。将出现“绑定到数据”对话框，如下图所示。

图 7：将数据绑定到下拉列表

  1. 在将数据绑定到下拉列表组件时，必须指定要在列表中显示的内容(值字段)，并且必须指定要在底层程序中使用哪些值(显示字段)。通常，需要显示数据库表中的一些有意义的值（如人名），并在底层程序中使用唯一的标识符（如人员 ID）。然而对于此应用程序，我们将“值字段”和“显示字段”都绑定到同一数据库列，即 PERSON.NAME 列，如接下来的两个步骤所述。
  2. 将对话框中的“值字段”设置为 PERSON.NAME。
  3. 将“显示字段”的设置仍然保留为 PERSON.NAME。
  4. 单击“确定”。


添加一些行为

  1. 在可视设计器中，双击按钮组件。 编辑区域会切换到 Java 编辑器，并移动至 helloButton_action 方法上。
  2. 将 helloButton_action 方法的主体替换为下面以粗体显示的代码。

代码样例 2：helloButton_action 替换代码

public String helloButton_action() {
        String name = (String)nameDropDown.getSelected();
        String splitnames[] = name.split(",");
        helloText.setText("Hello, " + splitnames[1] + "!");
        return null;

第一行使用了 getSelected 方法获取下拉列表的当前值（即列表中当前选定的名称）。

由于数据以“<姓氏>, <名字>”的形式存储在数据库中，因此在显示字符串之前必须进行修改。否则，应用程序将输出“Hello, <姓氏>, <名字>!”第二行使用了 split 方法将字符串分成一个数组，该数组采用逗号作为分隔符。数组中的第一项（在位置 0）包含姓氏，位置 1 处包含名字。

在第三行中，静态文本组件的 text 属性被设置为一个包含名字的值。

  1. 注意：此方法假定表中的所有值均表示为“<姓氏>, <名字>”格式。因此，它不能很好地处理不使用此格式的字符串。
  2. 将以下代码添加到 prerender 方法中。此代码将列表中的第一项设置为缺省选择。

代码样例 3：prerender 方法代码

public void prerender() {
        // If no selection, set default selection
        if (nameDropDown.getSelected() == null) {
            personDataProvider.cursorFirst();
            nameDropDown.setSelected
                    ((String)personDataProvider.getValue("person.name"));
        }
    }


运行应用程序

  1. 单击“运行主项目”按钮。
  2. 从列表中选择一个名字，然后单击 "Say Hello"。 浏览器会将下拉列表组件的选定值发送到服务器，然后服务器将执行按钮的 helloButton_action 方法。


执行更多操作

试试看。列表框组件与下拉列表组件类似。请尝试将下拉列表组件替换为列表框组件。在应用程序中，不要选中列表框组件的 multiple 属性，因为一次只能选择一项。请切记，将列表框绑定到数据库表，并更改 helloButton_action 方法以获取列表框的选定值。

试试看。使用与本教程所学内容类似的步骤，尝试生成一个 Web 应用程序，该应用程序具有一个显示 TRIPTYPE 表中所有 DESCRIPTION 值的下拉列表组件。当用户单击 "Show Type Id" 按钮时，页面将显示行程类型的 TRIPTYPEID。为此，必须将下拉列表组件的“显示字段”绑定到 TRIPTYPE.DESCRIPTION，并将组件的“值字段”绑定到 TRIPTYPE.TRIPTYPEID。



小结


在 IDE 中设计 Web 页的一般工作流程包括如下步骤：


  1. 创建页。
  2. 将组件（如文本字段组件和按钮组件）放在页面上。
  3. 编辑组件的属性以更改其外观和行为。
  4. 在条件具备的情况下，将组件绑定到其数据连接。
  5. 编辑 Java 源代码以控制服务器端的行为，如事件处理。
  6. 生成并测试应用程序。