开发 Visual Web JSF 应用程序

在本教程中，您将使用 NetBeans IDE 和 JSF 1.2 (Woodstock) 组件创建并运行一个简单的 Web 应用程序：Hello Web。该样例应用程序将让您输入一个姓名，然后显示一条包含该姓名的消息。首先，使用一个输入字段来实现此页面。然后，使用下拉列表替换该输入字段，用户可以在该下拉列表中选择姓名。该下拉列表中将被填充某数据库表中的姓名。

预计时间： 25 分钟

 

      目录

 

• 创建项目
• 设计页面
• 添加一些行为
• 运行应用程序
• 使用“下拉列表”替换“文本字段”
• 设置数据库
• 将“下拉列表”绑定到“数据库表”
• 添加一些行为
• 运行应用程序
• 更多操作
• 结束语

 

要学习本教程，您需要具备以下软件和资源。

软件或资源 要求的版本

NetBeans IDE	6.5 Java 版
Java 开发工具包（Java Development Kit，JDK）	版本 6 或版本 5
JavaServer Faces 组件/ Java EE 平台	1.2（带有 Java EE 5*）或 1.1（带有 J2EE 1.4）
GlassFish 应用服务器	V2
Travel 数据库	必需

* 要利用 NetBeans IDE 的 Java EE 5 功能，请使用完全符合 Java EE 5 规范的应用服务器，例如 GlassFish Application Server V2 UR2。如果使用的是其他服务器，请查阅发行说明和常见问题解答，了解已知问题和解决方法。有关支持的服务器和 Java EE 平台的详细信息，请参见发行说明。

 

创建项目

1. 从主菜单中，选择“文件”>“新建项目”。
2. 在“新建项目向导”中，从“类别”列表中选择“Java Web”，并从“项目”列表中选择“Web 应用程序”。单击“下一步”。
3. 将项目命名为 HelloWeb。
4. （可选）选择“使用专用文件夹存储库”复选框，并指定库文件夹的位置。参见共享项目库，了解更多关于此选项的信息。
5. 单击“下一步”。
6. 选择要在其中部署应用程序的服务器。这里仅列出了已在 IDE 中注册的服务器。
7. 选择要与应用程序一起使用的 Java EE 版本，然后单击“下一步”。

8. 选择“可视化 Web JavaServer Faces 框架”并单击“完成”

   该项目将出现在可视设计器打开的初始页（Page1）中。

设计页面

首先，设计一个与下图类似的页面。

 

1. 在 Page1 的“属性”窗口中，在 Title 属性的文本框中键入 Hello Web，如下图所示。

   部署此页面（或项目）时，Title 属性的值将出现在浏览器标题栏中。

   

   提示：可以通过在可视设计器或“导航”窗口中选择组件，从而在“属性”窗口中访问该组件的属性。要打开“导航”窗口，请选择“窗口”>“导航”>“导航”。

   单击页面空白处访问该页面的属性。

2. 在“导航”窗口中，展开 Page 1 节点，右键单击 Page1 节点并选择“添加绑定属性”，如下图所示。

   

3. 如果“组件面板”窗口中的“Woodstock 基本”节点未展开，现在将其展开。

   本例使用的所有组件都包含在“组件面板”的“Woodstock 基本”部分中。

   如果“组件面板”不可见，请选择“窗口”>“组件面板”加以显示。

4. 从“组件面板”中的“Woodstock 基本”部分拖放一个“标签”到可视设计器页面的左侧，键入 Name: 并按下 Enter 键。

   注意，该组件将进入该页面的网格。此外，“属性”窗口中 text 属性的值将变为 Name:。

   提示：可通过右键单击该组件切换至编辑模式，并从弹出式菜单中选择“编辑标签文本”。

5. 从“组件面板”的“Woodstock 基本”部分拖放一个“文本字段”到可视设计器，键入 Enter Your Name，并按下 Enter 键。
6. 在“属性”窗口中，将“文本字段”的 id 属性由 textField1 更改为 nameField。

7. 右键单击“文本字段”组件，并选择 添加绑定属性。

   添加绑定属性时，IDE 会为该组件创建 getter 和 setter 方法。

8. 选择“标签”组件，并在“属性”窗口选择 nameField 作为 for 属性。

   

9. 拖放一个“按钮”组件到“文本字段”组件的右侧，键入Say Hello，然后按下 Enter 键。

   注意：这会影响 IE7 中“JSF 1.2 按钮”组件的宽度。解决方法是将“按钮”组件置于一个布局组件中（网格面板、组面板或布局面板）。自动重新改变布局组件的大小会重新改变“按钮”组件的大小。

10. 右键单击“按钮”组件并选择 “添加绑定属性”。

11. 在“属性”窗口中，将“按钮”组件的 id 属性由 button1 更改为 helloButton。
12. 拖放一个“静态文本”组件到“标签”组件下方。
13. 将该“静态文本”组件的 id 属性由 staticText1 更改为 helloText。
14. 右键单击“静态文本”组件并选择 “添加绑定属性”。

15. 将一个“消息组”组件拖至页面的不起眼处，比如拖至“静态文本”组件下面。

    添加一个“消息组”组件，显示运行时错误和其它消息类型，有助于诊断编程错误。

16. 在“编辑”工具栏中，单击 JSP 切换至 JavaServer 页面（JSP）源编辑器。

    查看代码，注意您在“属性”窗口中所做的更改是如何保存的。在浏览器中首次显示页面时，该页面将 JSP 页面标签的指示准确无误的显示。如果您的页面 bean 中含有更改属性值的代码，这些更改只出现在提交页面的请求中，并随后被重新显示。

添加一些行为

在本节中，您将添加一些代码，让该页面重新显示消息 "Hello entered-name"。为此，您需要添加一个事件处理程序，一旦单击该按钮，应用程序就会调用该事件处理程序。此事件处理程序将“静态文本”组件的 text 属性设定为 "hello" 消息，并让页面重新显示，以出现该文本。

1. 在编辑工具栏中，单击“设计”切换至“可视编辑器”。

2. 双击“按钮”组件。

   “编辑区将”切换至 Java 编辑器，并显示 Page1 的页面 bean。 该按钮的事件处理程序 helloButton_action 将被添加至该页面 bean 。

3. 用以下几行代码（显示为粗体）替换 helloButton_action方法。然后按下 Alt-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 变量。

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

运行应用程序

1. 在 Java 编辑器中，确保 Java 代码不含任何错误。

   错误在延着代码左边的红色下划线或红色方框中标出。如果代码中有任何错误，项目将无法生成。

   提示：将光标停在代码左边的红色框，查看错误描述。

2. 单击“运行主项目”按钮 。

   注意：缺省情况下，创建项目时会启用保存时编译功能，因此在 IDE 中运行应用程序无需首先编译代码。有关保存时编译功能的更多信息，请参见创建、导入并配置 Java 项目指南的“保存时编译”一节。

3. 在文本字段中输入您的姓名，并单击 "Say Hello"。

   随后，“Hello 您的姓名”就会显示在下面。

   浏览器将该表单提交给调用 Web 应用程序的 Web 服务器。该应用程序执行按钮行为方法、更新页面元素、用更改过的数据重新呈现相同的页面并将该页面发送回 Web 浏览器。下图显示了提交 Gus Townsend 姓名时的结果。

   

使用“下拉列表”替换“文本字段”

本教程余下的部分将介绍如何使用“下拉列表”组件替代“文本字段”获取用户输入，如下图所示。此“下拉列表”组件从绑定的 PERSON 数据库表中获取选择列表。

1. 在编辑工具栏中，单击“设计”切换至可视设计器。
2. 在可视设计器中，右键单击 nameField“文本字段”组件并从弹出式菜单中选择“删除”。

3. 从“组件面板”的“Woodstock 基本”部分拖放一个“下拉列表”组件到可视设计器的页面中。 将该组件移至“文本字段”组件所在的区域。

   请注意，如下图所示，“导航”窗口显示了一个 dropDown1 组件和一个 dropDown1DefaultOptions 对象。该“下拉列表”组件的 items 属性标明了包含列表中选项的对象。在页面中添加“下拉列表”组件之后，IDE 会创建一个“缺省选项”对象（dropDown1DefaultOptions），并将此对象设置为“下拉列表”组件的 items 属性的值。在可视设计器中，只有该“下拉列表”组件是可见的。“缺省选项”对象仅提供包含在列表中的选项。本教程其后的部分中，您将修改将“下拉列表”组件，将来自不同源的选项包含进去。

   
4. 在“属性”窗口中，将该组件的 id 更改为 nameDropDown。
5. 右键单击该“下拉列表”组件并选择“添加绑定属性”。

6. 选择“标签”组件，并在“属性”窗口中选择 nameDropDown 作为 for 属性。

设置数据库

在本节中，您将在 IDE 中设置 travel 数据库和 MySQL 数据库服务器。

1. 请确保您的机器已安装并正在运行 MySQL 数据库服务器。有关如何连接到 MySQL 数据库的更多信息，请参见连接到 MySQL 数据库。

2. 在“服务”窗口中，右键单击“MySQL 服务器”节点并选择“创建数据库”。

   此时将打开“创建新数据库”对话框。

   

3. 从下拉列表中，选择“样例数据库：travel”并单击“确定”。

   在“服务”窗口中， Travel 数据库将出现在“MySQL 服务器”节点下方。

   

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

“服务”窗口出现在 IDE 工作区的左侧，其中包含一个“数据库”节点。该“数据库”节点显示了已经添加到 IDE 中的所有数据库驱动程序和连接。

该 NetBeans IDE 带有一个样例 Travel 数据库。Travel 数据库出现在“数据库”节点下方。在本节中，您将使用 Travel 数据库中的 person 表，为“下拉列表”组件提供选项。

1. 在“服务”窗口中，展开“数据库”节点并检查是否已连接到 Travel 数据库。

   如果 travel 数据库标记的 jdbc 节点标记是断开的，并且无法展开该节点，则表示 IDE 未连接到数据库。要连接到 TRAVEL 数据库，右键单击 travel 数据库连接的 jdbc 节点，从弹出式菜单中选择“连接”。

2. 展开 travel 数据库的“表”节点。

   在“表”下方，可看到数据库中每个表的节点，如 carrental 和 flight。下图显示了“表”节点未展开时的“运行时”窗口。

   

3. 将 person 从“服务”窗口拖放至“下拉列表”。

   列表中显示的内容由 item 1 变为 abc，表明该列表正显示绑定数据，且显示的数据是 String 类型。

   IDE 将为数据库表添加一个不可见的 personDataProvider 组件。PersonDataProvider 组件将出现在“导航”窗口中。IDE 还将为 SessionBean1 添加一个 personRowSet 属性。

4. 右键单击“下拉列表”并从弹出式菜单中选择“绑定到数据”。此时将打开“绑定到数据”对话框，如下图所示。

   
   将数据绑定到“下拉列表”组件时，必须指明要在列表中显示什么（显示字段）还必须指定在下面的项目中使用何值（值字段）。通常，您想要显示数据库中的一些有意义的值，如人名，但您又想在下面的项目中使用惟一的标识符，比如个人 ID。 但在本应用程序中，要将“值”字段和“显示”字段都绑定到同一个数据库列中，即 person.name 列，如以下两个步骤所述。
5. 将对话框中的“值”字段设置为 person.name，将“显示”字段保留为 person.name，并单击“确定”。

添加一些行为

1. 在可视设计器中，双击“按钮”组件。

   “编辑区”将切换为 Java 编辑器，并移至 helloButton_action 方法。

2. 将 helloButton_action 方法的主体替换为以下代码（显示为粗体）。

   <!-- BEGIN CODE SAMPLE COMPONENT -->

   代码样例 2： helloButton_action 替换代码

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

   <!-- END CODE SAMPLE COMPONENT -->
   

   第一行代码使用 getSelected 方法获取下拉列表的当前值，即列表中当前选定的姓名。

   由于数据在数据库中以 lastname、firstname 存储，显示字符串前必须先对其进行修改。否则，应用程序将输出 "Hello, lastname, firstname!"第二行代码使用 split 方法将字符串分拆为数组，用逗号作为分隔符。数组中的第一个条目（位置 0）包含姓氏（last name），而位置 1 则包含名字（first name）。

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

   注意： 此方法假设此表中的所有值都采取 lastname、firstname 的格式。 并未强制处理不遵循此格式的字符串。

3. 将以下代码添加至 prerender 方法。此代码将列表中的第一条定为缺省选项。

   <!-- BEGIN CODE SAMPLE COMPONENT -->

   代码样例 3：prerender 方法代码

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

   <!-- END CODE SAMPLE COMPONENT -->

运行应用程序

1. 单击“运行主项目”按钮。

   注意：缺省情况下，创建项目时会启用保存时编译功能，因此在 IDE 中运行应用程序无需首先编译代码。有关保存时编译功能的更多信息，请参见创建、导入和配置 Java 项目指南的“保存时编译”一节。

2. 从列表中选择一个姓名，并单击 "Say Hello"。

   浏览器将“下拉列表”组件的选定值发送给服务器，服务器执行该按钮的 helloButton_action 方法。

   

更多内容

试试看。“列表框”组件与“下拉列表”组件类似。试着用“列表框”组件替换“下拉列表”组件。在此应用程序中，“列表框”组件的 multiple 属性必须不被检查，因为一次只能选定一个条目 。请记住将“列表框”绑定到数据库表，并修改 helloButton_action 方法以获取“列表框”的选定值。

试试看。 使用与您在本教程中学到的步骤的类似步骤，构建一个含“下拉列表”组件的 Web 应用程序，其“下拉列表”组件在 TRIPTYPE 表中显示所有 DESCRIPTION 值的。用户单击“显示类型 Id”按钮时，让页面显示 trip 类型的 TRIPTYPEID。 为此，必须将“下拉列表”组件的“显示”字段绑定到 TRIPTYPE.DESCRIPTION，并将该组件的“值”字段绑定到 TRIPTYPE.TRIPTYPEID。

结束语

在 IDE 中设计 Web 页面的典型的工作流包含以下步骤：

1. 创建页面。
2. 将组件添加到页面中，如“文本字段”组件和“按钮”组件。
3. 编辑组件属性以改变其外观和行为。
4. 如有必要，将组件绑定到其数据连接。
5. 编辑 Java 源以控制服务器端的行为，如事件处理行为。
6. 生成并测试应用程序。

 

另请参见

• 在 NetBeans IDE 中开发 Web 应用程序简介
• 针对 Web 应用程序的 NetBeans IDE 教程
• 连接到 MySQL 数据库
• Java Web 应用程序学习指南

[转自：http://www.netbeans.org/kb/docs/web/helloweb_zh_CN.html]