HOME / Docs & Support / NetBeans 6.5

开发一个 Visual Web JSF 应用程序

由 NetBeans Tutorials Team 贡献

由 NetBeans 中文社区的 solaris_navi 翻译

2007年12月 [ 版本编号： V6.0 ]

在本教程中，您将使用 NetBeans IDE 创建并运行一个简单的 web 应用程序，Hello Web。本示例应用程序要求您输入一个名字，之后使用那个名字显示一条信息。首先，您需要使用一个输入框来实现这个页面。之后您使用一个用户可以选择名字的下拉列表来替换那个输入框。下拉列表中输入的名字来自数据库表。

预计时间：25 分钟

教程需求

在您开始之前，请确定您已经检查了本节的需求。

本教程需要的软件

在您开始之前，您需要安装一下软件到您的计算机上：

带有 Web 与 Java EE 特性的 NetBeans IDE 6.0 (包含 Web 与 Java EE 以及所有版本的下载)。 (下载)

创建一个项目

在主菜单中，选择“文件” > “新项目”。
“在新项目向导”中，从列表里选择“ Web ”然后从“项目”列表中选择“ Web 应用程序”。单击“下一步”。
将项目命名为 HelloWeb 然后单击“下一步”。
选择“ Visual Web JavaServer Faces 框架”并单击“完成”。
您的项目将被创建，并且在“可视化设计器”中打开了初始页面 (Page1) 。

设计一个页面

在开始之前，请您设计一个页面如下图所示。

图 1：Page1 的设计

在“属性”窗口里，如下图所示在 Title 属性文本框中输入 Hello Web 。

当此页面（或者项目）发布的时候 Title 的属性值将显示在浏览器的标题栏中。

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

提示： 您可以通过在“可视化设计器”或者“导航”窗口中选择组件的方式访问“属性”窗口中的组件的属性。如需打开“导航”窗口，选择“窗口” > “导航” > “导航器”。
您可通过单击页面上的空白区域访问页面属性。
如果“面板”窗口中的“基本组件”节点没有展开的话，请现在展开它。

在示例中您用到的所有组件均在面板的“基本组件”中。
如果“面板”是隐藏的，请选择“窗口” > “面板”以显示它。
从“面板”中从“基本组件”里拖一个“标签”组件放置在“可视化设计器”中页面的左侧，输入 Name: 并按“回车”键。

请注意组件是在页面中与网格自动对齐的。并请注意在“属性”窗口中 text 将属性的值改变为 Name:。
提示： 您可以通过右键单击组件从弹出菜单中选择“编辑标签文本”来进入编辑模式。
从“面板”的“基本组件”中向“可视化设计器”上拖拽一个“文本框”组件，输入 Enter Your Name，然后按“回车”键。
在“属性”窗口中，把文本框的 id 属性的值 textField1 更改为 nameField。
选择标签组件，按住 Ctrl-Shift 将标签组件拖动到“文本框”组件。
请注意标签组件的 for 属性现在被设定为 nameField。
将“按钮”组件拖动到“文本框”组件的右边，输入 Say Hello ，并按“回车”。
- 特别注意： 这里有一个已知的问题影响 JSF 1.2 “按钮”组件在 IE7 中的宽度。工作区中把“按钮”组件放置在“布局”组件（网格面板，组面板，或者布局面板）里。调整“布局”组件的大小可以自动的更改“按钮”组件的大小。
在“属性”窗口里，在按钮控件的 id 属性中将其值 button1 改为 helloButton。
拖动一个“静态文本”组件，将其放置在标签组件的下面。
把“静态文本”组件的 id 属性中将其值 staticText1 改为 helloText。
拖动一个消息组组件放置在页面的一个偏远的地方，比如放在“静态文本”组件下面。
添加一个消息组组件，可以在其他消息类型中显示运行时错误，对诊断错误十分有帮助。
在编辑工具栏中，单击 JSP 按钮切换到 JavaServer Pages (JSP) “源代码编辑器”。
查看代码并注意您在“属性”窗口中做的更改均已被保存。当页面第一次在浏览器中显示的时候，页面显示的是 JSP 页面中标签的内容。如果您的页面的 Bean 通过更改属性值而产生代码，这种改变只能在页面被提交或者随后的重新显示后才发生变化。

添加一些行为

本节中，您将添加代码使得页面重新显示为 Hello entered-name 的一段消息。您添加一个事件处理，令随时按钮被单击时让应用程序执行。这个事件处理将“静态文本”组件的 text 属性设置为一个 "hello" 的消息，并令页面重新加载使得这个文本显示出来。

在“编辑”工具栏中，单击“设计”切换至“可视化编辑器”。
双击“按钮”组件。
编辑区域切换到“ Java 编辑器”，显示出 Page1 页面的 Bean。按钮的事件处理 helloButton_action 已经添加到这个页面的 Bean 中。

将 helloButton_action 函数的主体部分替换为下列代码（显示为粗体），然后按 Alt-Shift-F 重定代码格式。

代码示例 1： helloButton_action() 代码

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

在代码段粗体显示的第一行为“文本框”组件 nameField 使用 getText 函数获取 text 属性的值。这个值是 Object 类型的一个对象，但这里需要为字符串，这样这个值被转换成 String 对象。然后该对象被分配给 name 变量。

在代码段粗体显示的第二行设置“静态文本”组件 helloText 的 text 属性的值。这个值包含了用户向文本框控件 nameField 输入的名称。举个例子，如果用户输入 Fred，这行代码将设置“静态文本”组件的 text 属性为 Hello, Fred!

运行应用程序

在“ Java 编辑器”中，确保您的 Java 代码没有包含任何错误。

错误以红色下划线或者代码左边的红色方块所表示。您的项目如果在代码中出现错误将无法生成应用程序。
提示：将光标停放在代码左侧的红色方块上，这样就可以看到错误的描述。
单击“运行主项目”按钮。
IDE 保存您的文件并且生成您的项目的应用程序。“生成输出”窗口出现在屏幕的下方，并显示相关的状态信息。一旦您的应用程序被生成并发布，IDE 将打开您默认的网页浏览器（如果浏览器没有被打开的话），您的 Web 应用程序便显示出来。
在文本框中输入您的名字，单击“ Say Hello ”。
"Hello your name" 在下方显示。

浏览器将表单提交给执行您的 Web 应用程序的 Web 服务器。应用程序执行按钮的行为函数，更新页面元素，将改变的数据重新交给相同的页面，并且将页面发送回 Web 浏览器中。下图显示的是提交姓名为 Gus Townsend的结果。

图 3： Hello Web 的运行结果

将文本框替换为下拉列表

本教程余下的部分展示了如何使用“下拉列表”组件获取用户的输入来替代“文本框”，如下图所示。这个“下拉列表”组件从数据库表 PERSON 绑定的所选项中获取列表。

图 4： Hello Web 的最终版本

在“编辑”工具栏中，单击“设计”切换到“可视化设计器”。
在“可视化设计器”中，右键单击“文本框”组件 nameField ，并从弹出菜单中选择“删除”。
从“面板”上的“基本组件”中拖拽一个“下拉列表”组件放置在您在“可视化设计器”的页面中。移动该组件，放置在之前“文本框”组件的区域里。

请注意，如下图所示，“导航器”窗口展示了 dropDown1 组件以及 dropDown1DefaultOptions 对象。该“下拉列表”组件的 items 属性识别包含列表中的选项的对象。当您在页面中添加“下拉列表”组件时， IDE 同时创建了一个“默认选项”对象（dropDown1DefaultOptions），并将这个对象设置为“下拉列表”组件的 items 属性的值。只有“下拉列表”组件在“可视化设计器”中可见。 “默认选项”仅仅提供了列表里出现的选项。在其后的教程中，您可以修改“下拉列表”组件，使它从不同的源中获取选项。

图 5：“导航器”窗口中的组件
在“属性”窗口中，更改组件的 id 为 nameDropDown.
选择“标签”组件，按住 Ctrl-Shift 从“标签”组件拖动到“下拉列表”组件。
请注意，“标签”组件的 for 属性现在为 nameDropDown。

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

在 IDE 工作区左侧显示的“服务”窗口，包含了一个“数据库”节点。 “数据库”节点显示所有已经在 IDE 中添加了的数据库驱动以及链接。

NetBeans IDE 中有一个示例数据库： Travel 。 Travel 数据库出现在“数据库”节点的下面。在教程的本节中，您将使用 Travel 数据库中的 PERSON 表来提供“下拉列表”组件的选项。

在“服务”窗口中，展开“数据库”节点，查看 Travel 数据库是否已经连接。
如果 TRAVEL 数据库的 JDBC 节点标志是损坏的，您将无法展开此节点。 IDE 并没有连接上数据库。则链接数据库，右键单击 TRAVEL 的 JDBC 节点并从弹出菜单中选择“链接”。输入密码为 travel ，选择“在此会话中保存密码”，单击“OK”。如果您没有看到 TRAVEL 数据库的 JDBC 节点，参阅“ NetBeans 安装指南”获取如何在 IDE 中令数据库可用的相应信息。
展开 TRAVEL 数据库的“表”节点。

在“表”下面，您能够看到数据库中为每一个表提供的节点，比如 CARRENTAL 以及 FLIGHT 。下图展示了“服务”窗口中的“表”节点。（译者注：原文为 Runtime window ，但由图理解后认为更改其为“服务”窗口更为贴切）

图 6：“服务”窗口
从“服务”窗口中拖动 PERSON 放到“下拉列表”上。

列表的显示将从 item 1 变为 abc，表明列表在显示的是绑定的数据，并且被显示的这些数据的类型是 String。
IDE 为数据库表添加了一个非可视化的“ personDataProvider ”组件。 “ personDataProvider ”组件出现在“导航器”窗口中。同时 IDE 也添加了一个 personRowSet 属性到 SessionBean1 里。
右键单击“下拉列表”，在弹出菜单中选择“绑定数据”。 “绑定数据”对话框出现，如下图所示。

图 7： “下拉列表”中绑定数据

当您将数据绑定在“下拉列表”组件时，您必须详细说明列表（显示区域）中显示什么并且您必须详细说明下面的程序（值区域）使用什么值。比如说，您需要显示数据库表中的一些有意义的值，比如一个人的姓名，但是您需要在使用下面程序中的一个独特的识别符，比如人的 ID 。但是在本应用程序中，您需要将“值”区域和“显示区域”绑定在同一数据库列：PERSON.NAME 上，在其后的一步进行了描述。（译者注：原文为 next two steps，可是下面只有一步，故做更改）。
在对话框中，将“值”区域设置为 PERSON.NAME，“显示”区域设置为 PERSON.NAME，然后单击“OK”。

添加一些行为

在“可视化设计器”中，双击“按钮”组件。
“编辑区域”切换到“ Java 编辑器”中，并移动到 helloButton_action 函数。

用以下代码（显示为加粗）替换 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 函数获取当前“下拉列表”的值，即当前在列表中选中的名字。

因为数据是以 lastname ， firstname 的方式存储的，在显示之前必须进行修改。否则，应用程序将打印出 "Hello, lastname, firstname!"。第二行使用 split 函数来讲字符串分割到一个数组里面，以逗号作为分隔符。数组的第一个项目（在0位置上）包含姓名的名，在1位置上包含着姓名的姓。

在第三行，“静态文本”组件的 text 属性被设置为一个包括姓氏的值。

注意：这个函数假定所有在数据表里的值都是遵循 lastname, firstname 格式的。您无法强制其解决不符合这个格式的字符串。

添加下列代码到 prerender 函数中。这些代码设置了列表中第一项为默认选项。

代码示例 3： prerender 函数代码

public void prerender() {
        // 如果没有选项，则设置默认选项
        if (nameDropDown.getSelected() == null) {
            personDataProvider.cursorFirst();
            nameDropDown.setSelected
                    ((String)personDataProvider.getValue("person.name"));
        }    
    }