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
version 5

JavaServer Faces Components/
Java EE Platform

1.2 with Java EE 5* or
1.1 with J2EE 1.4

 

 

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 来重新格式化代码。 

public String helloButton_action() {
String name = (String)nameField.getText();


        helloText.setText("Hello, " + name + "!"); 


return null;

第一行使用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方法，这部分代码用于设置下拉列表中默认的第一项的内容。 

public void prerender() {
// If no selection, set default selection

if (nameDropDown.getSelected() == null) {
    
    
 
            personDataProvider.cursorFirst();
    
    
 
            nameDropDown.setSelected
    
    
 
                    ((String)personDataProvider.getValue("person.name"));
    
    
 
        }

}

运行应用

1.     点击运行主项目按钮。IDE编译和部署应用，并在浏览器中显示页面。

2.     在列表中选择一个名字，并点击Say Hello按钮。

浏览器发送下拉列表组件被选择的值给服务器，服务器执行helloButton_action方法。