| 在本教程中，您将使用 Sun Java Studio Creator 集成开发环境 (Integrated Development Environment, IDE) 创建并运行一个简单的 Web 应用程序 "Hello Web"。该示例应用程序要求您输入名字，然后显示使用该名字的消息。首先，通过一个输入字段实现此页。然后，将输入字段替换为一个下拉列表，用户可以从中选择名字。下拉列表是用数据库表中的名字填充的。 |
|
目录
|
![[spacer]](/im/a.gif) |
 |
使用本教程之前，您必须在系统上安装了 Java Studio Creator IDE。此外，您还要熟悉 IDE 的基本内容。 Java Studio Creator 入门指南对您了解 Sun Java Studio Creator IDE 提供了很有用的内容。
创建项目
- 在主菜单中，选择“文件”>“新建项目”。
- 在“新建项目”向导中，从“类别”列表中选择 "Web"，然后从“项目”列表中选择“Web 应用程序”。
- 单击“下一步”。
- 将项目命名为
HelloWeb，然后单击“完成”。
将出现该项目，并且其初始页 (Page1) 在可视设计器中打开。
设计页
首先，设计一个页面，如下图所示。
图 1：Page1 设计 |
- 在“属性”窗口中，在
标题属性的文本框中键入 Hello Web，如下图所示。
当浏览器访问此页时，标题属性的值会出现在浏览器的标题栏中。
图 2：“属性”窗口中的页面属性 |
提示：通过在可视设计器或“概要”窗口中选择组件，可以在“属性”窗口中访问该组件的属性。通过单击页面上的空白位置，可以访问页面的属性表单。
- 如果“组件面板”窗口中的“基本”节点没有展开，请现在展开它。
在本示例中使用的所有组件都位于组件面板的“基本”类别中。
如果组件面板不可见，请选择“视图”>“组件面板”以显示它。
- 将一个“标签”组件从组件面板的“基本”类别拖动到可视设计器中的页面左侧，键入
Name:，然后按 Enter 键。
请注意，组件与页面上的网格是对齐的。另外，“属性”窗口中的 text 属性的值为 Name:。
提示：通过右键单击组件，然后从弹出式菜单中选择“编辑 Text”，可以将组件切换到编辑模式。
- 将“文本字段”组件从组件面板的“基本”类别拖动到可视设计器中，键入
Enter Your Name，然后按 Enter 键。
- 在“属性”窗口中，将“文本字段”的
id 属性从 textField1 更改为 nameField。
- 按住 Ctrl-Shift 组合键，同时从“标签”组件拖动一条连线到“文本字段”组件。
- 选中“标签”组件，请注意其
for 属性现在被设置为 nameField。
- 将一个“按钮”组件拖动到“文本字段”组件的右侧，键入
Say Hello，然后按 Enter 键。
- 在“属性”窗口中，将“按钮”组件的
id 属性从 button1 更改为 helloButton。
- 将一个“静态文本”组件拖动到“标签”组件下面。
- 将该“静态文本”组件的
id 属性从 staticText1 更改为 helloText。
- 在编辑工具栏中，单击 "JSP" 切换到 JavaServer Pages (JSP) 源代码编辑器。
浏览代码，并注意在“属性”窗口中进行的更改是如何保存的。第一次在浏览器中显示页面时，该页面看起来与 JSP 页中的标记指示的完全相同。如果页面 Bean 包含更改属性值的代码，则只有发出提交页面并随后重新显示该页面的请求时出现此类更改。
添加一些行为
在本部分，您将添加代码使页面重新显示为 Hello <输入的名称>。为此，将添加一个事件处理程序，每当单击按钮时应用程序都会调用此处理程序。此事件处理程序将“静态文本”组件的 text 属性设置为 "hello" 消息，然后使该页面重新显示以便出现该文本。
- 在编辑工具栏中，单击“设计”切换到可视设计器。
- 双击“按钮”组件。
编辑区域切换到 Java 编辑器，并显示 Page1 的页面 Bean。按钮的事件处理程序 helloButton_action 被添加到页面 Bean 中。
- （可选）在主菜单中，选择“视图”>“待做任务”。
将出现“待做任务”窗口，如下图所示。请注意此窗口如何列出了当前程序中包含“//待做事项”注释的所有行。此窗口有助于提醒您需要进行哪些更改。
图 3：“待做任务”窗口 |
- 将
helloButton_action 方法的主体替换为以下代码行。然后按 Ctrl-Shift-F 组合键重新设置代码的格式。
| 代码样例 1：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!。
运行应用程序
- 确保在 Java 编辑器中您的 Java 代码不包含任何错误。错误由红色下划线或代码左侧的红色框表示。
如果代码中包含错误，则不会生成项目。
提示：将光标停在代码左侧的红色框上，可以看到错误描述。
- 单击“运行主项目”按钮
 。
IDE 将保存文件并生成项目。生成的“输出”窗口会出现在屏幕的底部，并显示相关的状态消息。在生成并部署应用程序之后，IDE 会启动 Web 浏览器（如果尚未运行），并且出现 Web 应用程序。
提示：如果没有生成项目，请从主菜单中选择“帮助”>“帮助内容”，然后展开“疑难解答”节点获取帮助提示。
- 键入您的名字，然后单击 "Say Hello"。
浏览器将表单提交到 Web 服务器，Web 服务器将调用您的 Web 应用程序。应用程序执行按钮操作方法，更新页面元素，使用更改的数据重新呈现同一页，并将页面发送回 Web 浏览器。下图便是提交的名字为 Gus Townsend 时的结果。
图 4：Hello Web，及其结果。 |
将文本字段替换为下拉列表
本教程的其余部分将介绍如何使用下拉列表组件而不是文本字段获取用户输入，如下图所示。此下拉列表组件从捆绑的 PERSON 数据库表获取其选择列表。
图 5：Hello Web，最终版本 |
- 在编辑工具栏中，单击“设计”切换到可视设计器。
- 在可视设计器中，选择“文本字段”组件
nameField，然后单击主工具栏中的“删除”按钮（带有垃圾桶图标的按钮）。
- 将组件面板的“基本”类别中的“下拉列表”组件拖动到可视设计器中的页面上。将该组件移动到“文本字段”组件原来所在的区域中。
请注意，如下图所示，“概要”窗口显示了一个 dropDown1 组件和一个 dropDown1DefaultOptions 对象。下拉列表组件的 items 属性标识包含列表中选择的对象。当您将一个下拉列表组件添加到页面时，IDE 会创建一个“缺省选项”对象 (dropDown1DefaultOptions)，并将此对象设置为下拉列表组件的 items 属性的值。只有下拉列表组件在可视设计器中是可见的。“缺省选项”对象仅仅提供出现在列表中的选择。在本教程的后面部分，将下拉列表组件修改为从其他源获取其选择。
图 6：“概要”窗口中的组件 |
- 在“属性”窗口中，将组件的
id 更改为 nameDropDown。
- 按住 Ctrl-Shift 组合键，同时从“标签”组件拖动一条连线到“下拉列表”组件。
-
选择“标签”组件，请注意
for 属性现在为 dropDown1。
将下拉列表绑定到数据库表
在 IDE 工作区左侧出现的“服务器”窗口包括一个“数据源”节点。“数据源”节点显示了已添加到 IDE 的所有数据库、Web 服务和 EJB 数据源。
Java Studio Creator 开发环境附带了嵌入式 DBMS（已使用示例 Travel 模式进行了预先填充）。Travel 模式出现在“数据源”节点的下方。可以使用 Travel 模式中的 PERSON 表，为下拉列表组件提供选择。
- 在“服务器”窗口中，展开 "Travel" 数据源，然后展开“表”。
在“表”下，可看到数据源中每个数据库表的节点，如 CARRENTAL、NORELATION、PERSON、TRIP 和 TRIPTYPE。下图显示了“服务器”窗口，其中“表”节点已展开。
注意：如果在 Travel 图标上出现一个红色的 X，或者在您尝试展开它时出现错误，则说明数据库服务器没有运行。要启动数据库服务器，请在服务器导航中右键单击“Bundled Database 服务器”节点，然后从上下文菜单中选择“启动 Bundled Database”。然后，右键单击 Travel 数据源并选择“刷新”。
图 7：“服务器”窗口 |
- 将 PERSON 表从“服务器”窗口拖放到下拉列表组件上。
列表上的显示内容将从 item1 更改为 abc，这表明列表正在显示绑定的数据，而且所显示的数据为 String 类型。
IDE 会为数据库表添加非可视的 personDataProvider 组件。在“概要”窗口中显示 personDataProvider 组件。IDE 还将 personRowSet 属性添加到 SessionBean1 中。
- 右键单击“下拉列表”组件，然后从上下文菜单中选择“绑定到数据”。将出现“绑定到数据”对话框，如下图所示。
图 8：将数据绑定到下拉列表 |
在将数据绑定到下拉列表组件时，必须指定要在列表中显示的内容(值字段)，并且必须指定要在底层程序中使用哪些值(显示字段)。通常，需要显示数据库表中的一些有意义的值（如人的名字），但在底层程序中使用唯一的标识符（如人员的 ID）。但对于这个应用程序，我们将“值字段”和“显示字段”都绑定到同一数据库列，即 PERSON.NAME 列，如接下来的两步所述。
- 将对话框中的“值字段”设置为
PERSON.NAME。
- 将“显示字段”的设置仍然保留为
PERSON.NAME。
-
单击“确定”。
- 将一个“消息组”组件拖放到页面上的边缘位置，如“静态文本”组件下方。
添加“消息组”组件（该组件在其他类型的消息中显示运行时错误）对于诊断编程错误是一种很好的方法。
添加一些行为
- 在可视设计器中，双击“按钮”组件。
编辑区域会切换到 Java 编辑器，并移动到 helloButton_action 方法上。
- 将
helloButton_action 方法的主体替换为以下代码。
| 代码样例 2：helloButton_action 替换代码 |
String name = (String)dropDown1.getSelected();
String splitnames [] = name.split(",");
helloText.setText("Hello, " + splitnames[1] + "!");
return null;
|
第一行使用了 getSelected 方法获取下拉列表的当前值（即列表中当前选定的名称）。
因为数据以“<姓氏>, <名字>”的形式存储在数据库中，因此在显示字符串之前必须修改它。否则，应用程序将输出“Hello, <姓氏>, <名字>!”第二行使用了 split 方法将字符串分成一个数组，使用逗号作为分隔符。数组中的第一项（在位置 0 处）包含姓氏，位置 1 处包含名字。
在第三行中，“静态文本”组件的 text 属性被设置为一个包含名字的值。
注意：此方法假定表中的所有值均表示为“<姓氏>, <名字>”格式。因为它不能很好地处理不使用此格式的字符串。那么，如何更改此方法以处理不遵循此规则的字符串呢？
- 将以下代码添加到
prerender 方法中。此代码将列表中的第一项设置为缺省选择。
| 代码样例 3：prerender 方法代码 |
// If no selection, set default selection
if (nameDropDown.getSelected() == null) {
personDataProvider.cursorFirst();
nameDropDown.setSelected
((String)personDataProvider.getValue("person.name"));
}
|
运行应用程序
- 单击“运行主项目”按钮。
IDE 生成并部署应用程序，然后在 Web 浏览器中显示页面。
- 从列表中选择一个姓名，然后单击 "Say Hello"。
浏览器将下拉列表组件的选定值发送到服务器，服务器将执行按钮的 helloButton_action 方法。
（可选）监视应用程序
使用 HTTP 监视器可以监视客户端-服务器通信并重新显示 HTTP 请求。当页面包含若干个输入字段，并且您希望在不必填写所有字段的情况下重新创建 HTTP 请求，使用重新显示请求功能会很有帮助。
前四步假定尚未启用 HTTP 监视器。如果已启用了 HTTP 监视器，则可以跳到步骤 5。
- 在“服务器”窗口中，右键单击“部署服务器”，然后从上下文菜单中选择“启动/停止服务器”。
- 在“服务器状态”对话框中，单击“停止服务器”。
- 在“部署服务器”的“属性”窗口中，从
Enable HTTP Monitor 属性的下拉菜单中选择 true。
- 通过右键单击“部署服务器”，从上下文菜单中选择“启动/停止服务器”，然后单击“启动服务器”来重新启动服务器。
- 单击“运行主项目”按钮。
将出现“HTTP 监视器”窗口。请注意“当前记录”下的请求记录列表，如下图所示。
图 9：HTTP 监视器 |
- 在 Web 浏览器中，单击 "Say Hello"。
请注意在“当前记录”列表中出现的新 GET 和 POST 记录。
- 右键单击 POST 记录，然后从上下文菜单中选择“编辑并重新显示”。
- 在“编辑并重新显示”对话框中，将
form1:nameDropDown 条目的 text 属性更改为 Chen, Larry（如下图所示），然后按 Enter 键。
必须按 Enter 键才能保存所做的更改。
图 10：“编辑并重新显示”对话框 |
- 单击“发送 HTTP 请求”。
Web 浏览器将重新显示该页面，并且会出现一则 "Hello Larry!" 的消息
您可以保存任何记录以供日后重新显示。
执行更多操作
试试看。列表框组件与下拉列表组件类似。请尝试将下拉列表组件替换为列表框组件。在应用程序中，不要选中列表框组件的 multiple 属性，因为一次只能选择一项。请记住，将列表框绑定到数据库表，并更改 helloButton_action 方法以获取列表框的选定值。
试试看。使用与本教程所学内容类似的步骤，尝试生成一个 Web 应用程序，该应用程序具有一个显示 TRIPTYPE 表中所有 DESCRIPTION 值的下拉列表组件。当用户单击 "Show Type Id" 按钮时，使页面显示行程类型的 TRIPTYPEID。为此，必须将下拉列表组件的“显示字段”绑定到 TRIPTYPE.DESCRIPTION，并将组件的“值字段”绑定到 TRIPTYPE.TRIPTYPEID。
小结
在 IDE 中设计 Web 页的一般工作流程包括如下步骤：
- 创建页。
- 将组件（如“文本字段”组件和“按钮”组件）放在页面上。
- 编辑组件的属性以更改其外观和行为。
- 在适当的时候，将组件绑定到其数据源和数据所有者。
- 编辑 Java 源代码以控制服务器端的行为，如事件处理。
- 生成并测试应用程序。
另请参见：
更多的开发者资源：
此页的最新修改时间：2006 年 4 月 14 日
|
