开发一个可视化的JSF web应用
word版下载
在本文中，你使用NetBeans IDE 和JSF 1.2组件来创建和运行一个简单的WEB应用，Hello Web.这个实例要求你输入一个名字，然后根据这个名字来显示一条信息。首先，你执行一个带输入框的页面，然后你在一个下拉列表中选择一个名字来代替你在输入框中输入，而这个下拉框中的名字来源于一个数据库表。
建议课时：25分钟
内容：
l 创建项目
l 设计页面
l 添加一些行为
l 运行应用
l 用一个下拉列表替换文本框
l 绑定下拉列表到数据库
l 添加一些行为
l 运行应用
l 其他
为了能继续学习该教程，你需要下列软件和资源
| Software or Resource
|
Version Required
|
| NetBeans IDE |
Web & Java EE version 6.1 or 6.0 |
| Java Developer Kit (JDK) |
version 6 or |
| JavaServer Faces Components/ |
1.2 with Java EE 5* or |
|
|
|
| GlassFish Application Server |
V2 |
| Travel Database |
Required |
为了能充分利用NetBeans IDE的 Java EE 5的特性，需要使用与Java EE 5完全兼容的应用服务器，例如GlassFish Application Server V2 UR2，如果你使用其他服务器，请查阅发行文档和FAQ，关于服务器和Java EE 平台的详细技术支持，请看Release Notes（发行文档）
NetBeans IDE 6.1用户的注意事项：
在NetBeans 6.1中创建一个项目时，包含一些新的选项，比如：没有被选中“使用专用的文件来存储库”复选框。NetBeans 6.1要求绑定特性：在组件要求用Java编码的地方，你必须在Visual Web JSF应用中手动添加绑定属性，要这样做可以右键组件，选择“添加绑定属性”，更多信息，可参考On-demand Binding Attribute Wiki
创建一个项目
1. 在主菜单中选择 文件 > 新建项目。
2. 在 新建项目对话框中，从 类别 中选择Web，然后从 项目 中选择 Web应用程序，点击 下一步 。
3. 命名项目为HelloWeb。NetBeans IDE 6.1用户注意: 在NetBeans 6.1中创建一个项目时，包含一些新的选项，比如：没有被选中“使用专用的文件来存储库”复选框。
4. 选择一个你想要用来部署你的应用的服务器，只有在IDE中已经注册的服务器被显示出来。
5. 选择你想要使用的Java EE 的版本，然后点击 下一步 。
6. 选择Visual Web JavaServer Faces框架，然后点击 完成 。
设计页面
首先，你将设计一个如下图片中的页面：
1、在属性窗口中，按如下图片显示中那样，在 标题 属性框中输入 Hello Web 。标题属性框的值将在页面被部署时显示在浏览器的标题栏上。
提示：在可视化设计器或导航窗口中选择组件，然后就可以在属性窗口中访问组件的属性。打开导航窗口，可选择 窗口 > 导航 > 导航。
要设置页面的属性，可以单击页面空白处。
2、在组件面板中，如果Woodstock基本 节点没有展开，现在展开它。
在这个实例中你看到的所有组件，都会在面板的Woodstock基本部分。
如果面板没有显示，选择 窗口 > 组件面板来显示它。
3、从组件面板的Woodstock基本 部分拖动一个标签组件到页面设计器的左边，输入Name: 按Enter。
注意：在页面中，组件会贴齐网格显示，而且在属性窗口中可以改变text属性的值为 Name:
提示：你能通过右键组件，选择 编辑标签文本 来改变组件编辑模式。
4、如上拖动一个文本框到页面中，输入 Enter Your Name ，按Enrer键。
5、在属性窗口中，把id属性改为nameField。
6、在页面中选择标签组件的同时按住Ctrl和Shift键，并拖动标签组件到文本框组件，这样标签组件的for属性现在就被设置为nameField。
7、拖动一个按钮到文本框的右边，输入Say Hello，然后按 Enter。注意：在IE7中，将影响JSF1.2按钮的显示宽度，将按钮放在一个布局组件（Panel, Group Panel, or Layout Panel）中，改变布局组件的大小将自动改变按钮的大小。
8、在属性窗口中，改变按钮的id属性为helloButton。
9、拖动一个静态文本到标签的下方区域。
10、更改静态文本的 id属性为helloText。
11、拖动 消息组 组件到页面的合适位置，例如在静态文本组件的下方。消息组 组件用于显示运行过程中发生的错误，这对于诊断程序错误非常有用。
12、在编辑工具条中，点击JSP，切换到JSP源码编辑器。查看全部代码，注意你在属性窗口中的设置是如何被保存的，当一个页面第一次在浏览器中显示时，页面能够精确地通过JSP页面标记来显示，如果你的页面已经改变了属性值，这些改变仅仅显示在页面递交的那里，然后重新显示。
添加一些动作
在这部分，你通过添加一些代码，使页面重新显示，显示的消息为：Hello entered-name ,而这仅仅就是在当按钮被点击时，应用通过调用添加的事件处理器来实现。
注意：NetBeans IDE 6.1 的绑定特性：在组件要求Java编码的时候，必须手动添加绑定属性到Visual Web JSF application 的组件中，也就是说，右键组件，然后选择“添加绑定属性”，更多信息，请参考On-demand Binding Attribute Wiki。
1. 在编辑工具条上，点击 设计 切换到可视化设计器。
2. 双击按钮组件。编辑区将切换到Java编辑器，显示该页的bean。按钮的事件处理器helloButton_action就被添加到页面bean当中。
3. 用下列代码替换helloButton_action方法，然后按Alt-Shift-F 来重新格式化代码。
第一行使用getText获取文本框的值，这个值是Object类，需要转换成String ，然后赋值给name变量；第二行是设置helloText静态文本框组件的text属性。
运行应用
1. 在Java编辑器中，务必保障你的代码没有任何错误。
有出错的地方将被标以红下划线，或者代码左边有个红色框，这时你的项目就不能被编译。
提示：把鼠标放到代码左边那个红色的框上，就可以看到有关错误的描述。
2. 点击 运行项目按钮
IDE保存你的所有文件并编译项目，编译输出窗口将显示有关状态信息。，一旦你的应用编译并部署，IDE将启动你的默认浏览器打开你的Web应用。
3. 在文本框中输入你的名字，然后点击Say Hello按钮。
“Hello your name”就会显示在下面
浏览器提交表单到web服务器，并调用你的应用，应用程序执行按钮动作方法，更新页面元素，用最新数据重新显示页面，发送页面返回给浏览器显示，下图显示了执行的结果：
用一个下拉列表替换文本框
接下来的课程展示怎样使用一个下拉列表来代替文本框的输入，如下图所示：这个下拉列表组件从绑定的数据库表中获取列表选项的。
注意：NetBeans IDE 6.1 的绑定特性：在组件要求Java编码的时候，必须手动添加绑定属性到Visual Web JSF application 的组件中，也就是说，右键组件，然后选择“添加绑定属性”，更多信息，请参考On-demand Binding Attribute Wiki。
1. 在编辑工具条上，点击 设计 切换到可视化设计器。
2. 删除nameField文本框。
3. 从组件面板中拖动下拉列表到页面中，并移动它到原文本框的位置。注意：如下图所示：导航窗口显示了一个DropDown1组件和一个dropDown1DefaultOptions对象。下拉列表组件DropDown1的 items属性标识了包含列表选项的对象dropDown1DefaultOptions的options属性。当你添加一个下拉列表到页面的时候，IDE就会自动创建一个默认的options对象，然后把它的options属性赋值给给下拉列表的items属性。而在页面中只有下拉列表会显示出来，自动产生的options对象只是起到填充下拉列表选项的作用，在稍后的课程中，你能修改下拉列表组件来获取不同的数据源。
4. 在属性窗口中，更改组件的id为nameDropDown。
5. 选择标签组件，按住Ctrl+Shift，然后拖动标签组件到下拉列表组件，这样就设置了标签组件的for属性为nameDropDown。
绑定下拉列表到数据库
在IDE工作区左边的服务窗口包含数据库节点，数据库节点显示了所有数据库驱动和已经被添加到IDE的连接。在NetBeans IDE中有一个例子数据库Travel，这里，我们将用到该数据库中的PERSON表来填充下拉列表组件。
1. 在服务窗口中，展开数据库节点，看Travel数据库是否已经链接。如果Travel数据库jdbc节点徽标断开，你就不能展开该节点，也就是说IDE还没有连接数据库。你可以通过右键jdbc 节点，选择链接，输入travel作为密码，选择在会话中记住密码，然后点击ok。如果没有看到Travel数据库的jdbc节点，查看NetBeans安装说明。
2. 展开Travel数据库的 表 节点，在下表中，你能看到数据库的每一个表，例如CARRENTAL和FLIGHT:
3. 拖动PERSON表格到下拉列表上。列表中显示的值就改变为1到abc，IDE为数据库表添加了一个personDataProvider 组件，该组件在导航窗口中可以看到，IDE也添加了一个personRowSet属性给SessionBean1。
4. 右键下拉列表，选择“绑定到数据”，就会出现如下绑定到数据的对话框：
当你绑定数据到一个下拉列表组件时，你必须指定在列表中显示什么，而且你必须指定在下面的程序中使用什么值，特别是，你想要显示一些来自数据库表中有意义的值，例如人的名字，但是你想要在下面的程序中使用一个统一的标识，例如人的id，然后，在这个应用中，你想要绑定值字段和显示字段到同一个数据库列，PERSON.NAME列。
5. 在对话框中设置值字段PERSON.NAME,显示字段PERSON.NAME，然后单击OK。
添加一些动作
1. 在可视设计器中，双击按钮组件。编辑区域就会切换到Java编辑器中的helloButton_action方法。注意，如果使用的是NetBeans IDE 6.1，你必须手动添加绑定属性到下拉列表组件和静态文本框组件。
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，所以字符串在显示之前必须进行分割，在第三行，把处理后的firstname赋值给静态文本框。注意：必须保证所有存储在数据库表中的数据为lastname, firstname这种格式
3. 用如下代码替换prerender方法，这部分代码用于设置下拉列表中默认的第一项的内容。
运行应用
1. 点击运行主项目按钮。IDE编译和部署应用，并在浏览器中显示页面。
2. 在列表中选择一个名字，并点击Say Hello按钮。
浏览器发送下拉列表组件被选择的值给服务器，服务器执行helloButton_action方法。