目录   -  创建包括一个下拉列表组件的页 -  将组件连接到数据库 -  添加表组件 -  修改 SQL 查询 -  控制所显示的行

创建包括一个下拉列表组件的页

图 1：Travel Center Web 应用程序

1. 然后创建一个新项目并将其命名为 DataboundComponents。
   
   IDE 会创建一个名为 Page1 的缺省主页，并将该页显示在可视设计器中。
   
   
2. 如果“组件面板”窗口中的“基本”节点没有展开，请现在展开它。
   
   
3. 将“标签”组件拖动到页的左侧，键入 Select Name:，然后按 Enter 键。
   
   
4. 将“下拉列表”组件拖到“标签”组件的右侧。
   
   
5. 在“属性”窗口中，将其 id 更改为 personIdDD。
   
   
6. 按住 Ctrl-Shift 组合键，同时从“下拉列表”组件拖动一条连线到“标签”组件，以使这两个组件相关联。
   
   “标签”组件的 for 属性现在被设置为 personIdDD。
   
   
7. 将一个“消息组”组件从组件面板窗口拖动到页面上的边缘位置，如页面的右上角。
   
   此组件对于诊断编程错误是很有用的。通过调用 info(String)、error(String)、warn(String) 或 fatal(String) 方法，可以使诊断消息出现在此组件中。“消息组”组件会显示 String 参数的值。此外在缺省情况下，有关运行时错误、验证错误和转换错误的消息都会出现在此组件中。

将组件连接到数据库

图 2：下拉列表组件的“绑定到数据”对话框

1. 请打开“服务器”窗口，确保捆绑的数据库服务器正在运行。
   
   节点的状态图标和工具提示会表明服务器是否正在运行。如果捆绑的数据库服务器没有运行，请右键单击“Bundled Database 服务器”节点，然后从弹出式菜单中选择“启动 Bundled Database”。
   
   
2. 在可视设计器中，右键单击“下拉列表”组件，然后从上下文菜单中选择“绑定到数据”。
   
   将出现“绑定到数据”对话框。
   
   
3. 如有必要，请单击“绑定到数据提供器”标签将其置于前端。
   
   
4. 单击“添加数据提供器”。
   
   
5. 在“添加数据提供器”对话框中，选择“数据源”> "Travel" >“表”> "PERSON"，然后单击“添加”。
   
   现在在“概要”窗口的 "Page1" 部分中显示 "personDataProvider" 节点，在 "SessionBean1" 部分中显示 "personRowSet" 节点。
   
   
6. 在“绑定到数据”对话框中，从“值字段”列表中选择 "PERSON.PERSONID"，以使组件的 getSelected 方法为当前选择返回 PERSON.PERSONID。
   
   
7. 在“显示字段”列表中选择 "PERSON.NAME"，以使浏览器用数据库中的 PERSON.NAME 列的值来填充下拉列表。
   
   
8. 单击“确定”。
   
   文本 abc 将出现在下拉列表组件中。出现 abc 文本表明“显示字段”已绑定到 String 对象（在本例中，此对象为 SQL varchar 类型的数据库列）。
   
   
9. 单击主工具栏中的“运行主项目”。
   
   IDE 将保存所有更改，然后生成、部署并运行 Web 应用程序。首先会在 IDE 的底部出现“输出”窗口。IDE 会将编译和部署的准备信息写入此窗口中（因此，如果在生成过程中出现任何问题，请首先检查“输出”窗口）。接下来，会出现一个对话框显示部署的状态。部署完成后，IDE 会打开一个 Web 浏览器来装入该应用程序。当浏览器呈现页面时，它使用 "PERSON" 表的 "NAME" 列中的数据来填充下拉列表。

添加表组件

1. 从组件面板中拖动一个“表”组件，并将它放在“下拉列表”组件的下方。
   
   
2. 右键单击“表”组件，然后从弹出式菜单中选择“绑定到数据”。
   
   
3. 在“表布局”对话框中，单击“添加数据提供器”。
   
   
4. 在“添加数据提供器”对话框中，选择“数据源”> "Travel" >“表”> "TRIP"，然后单击“添加”。
   
   现在“表布局”框中的“选定”列表会显示表的所有列。“选定”列表用于指定哪些列应该出现在表组件中。
   
   
5. 选择“选定”列表中的第一个条目 (TRIP.TRIPID)。按住 Ctrl 键单击第二个条目 (TRIP.PERSONID) 和最后一个条目 (TRIP.TRIPTYPEID)，以便也选中后面这两个条目。
   
   
6. 单击 < 按钮。
   
   选定的条目将从“选定”列表中移除。以下三个条目保留在“选定”列表中，如下图所示：
   
   
   • TRIP.DEPDATE
   • TRIP.DEPCITY
   • TRIP.DESTCITY
   
   
   

   图 3：表组件的“绑定到数据”对话框

    
   
7. 单击“确定”。
   
   此时，可视设计器在表组件中显示三列，如下图所示。
   
   

   图 4：显示的表列

    
   

修改 SQL 查询

1. 在“概要”窗口中，展开 "SessionBean1" 节点（如果它尚未展开）。
   
   

   图 5：“概要”窗口中的 "SessionBean1" 部分

    
   
2. 在“概要”窗口的 "SessionBean1" 部分中，右键单击 "tripRowSet" 节点，然后选择“编辑 SQL 语句”。
   
   查询编辑器将以 "tripRowSet" 为标签出现在编辑区域中。
   
   提示：如果“输出”窗口已打开，请将其关闭，以便有更多的空间来使用查询编辑器。
   
   
3. 将 "Travel" >“表”> "TRIPTYPE" 节点从“服务器”窗口拖放到设计视图，如图 6 所示。
   
   将出现另一个表图，在两个表图之间有一个链接。此链接表示一个连接。请注意，IDE 在“源代码”窗格中如何修改了 select 语句。
   
   
4. 在 TRIPTYPE 表中清除 TRIPTYPEID 的复选框。
   
   此操作将从结果集和 SQL 查询（在“源代码”窗格中）中删除列，如下图所示。
   
   

   图 6：查询编辑器

    
   
5. 使查询编辑器仍然处于打开状态。
   
   
6. 在编辑区域中单击 "Page1" 标签。
   
   
7. 在可视设计器中，右键单击“表”组件，然后选择“表布局”。
   
   将出现“表布局”对话框。由于您已经更改了 tripRowSet 的 SQL 查询，因此有更多可以显示的列。
   
   
8. 将 TRIPTYPE.DESCRIPTION 列添加到“选定”列表中。
   
   
9. 单击“确定”。
   
   表组件中将出现第四列。

控制所显示的行

1. 单击编辑区域中的 tripRowSet (SessionBean1) 标签，以切换到查询编辑器。
   
   
2. 在查询编辑器的“设计网格”中，右键单击 PERSONID 行中的任意单元格，然后选择“添加查询条件”。
   
   
3. 将“比较”下拉列表设置为 = 等于，并选择“参数”单选按钮。
   
   
4. 单击“确定”。
   
   您将在 PERSONID 的“条件”列中看到 =?，因而会在 SQL 查询中添加以下 WHERE 子句。
   
   

   代码样例 1：SQL 查询中的 WHERE 子句

   WHERE TRAVEL.TRIP.PERSONID = ?

    
   
5. 在查询编辑器的“设计网格”中，从 DEPDATE 行“排序类型”单元格的下拉列表中选择“升序”。
   
   IDE 将自动设置排序顺序，并将 sort 子句添加到 SQL 查询中。
   
   
6. 关闭查询编辑器。
   
   
7. 在可视设计器中，双击“下拉列表”组件。
   
   将在 Java 编辑器中打开 Page1 类的源代码，而且插入点位于 personIdDD_processValueChange 方法的主体内。第一次双击下拉列表组件时，IDE 会创建此事件处理程序的方法桩模块。
   
   
8. 将 personIdDD_processValueChange 方法的主体替换为以下粗体显示的代码。
   
   

   代码样例 2：下拉列表组件的值更改事件处理

   public void personIdDD_processValueChange(ValueChangeEvent event) { try { getSessionBean1().getTripRowSet().setObject( 1, personIdDD.getSelected()); tripDataProvider.refresh(); } catch (Exception e) { error("Cannot switch to person " + personDataProvider.getValue( "PERSON.PERSONID")); log("Cannot switch to person " + personDataProvider.getValue( "PERSON.PERSONID"), e); } }

    
   此代码会将下拉列表中当前选择的 NAME 的 PERSONID 值绑定到为 tripRowSet 对象准备的 SQL 语句中的参数，执行查询，并获取新的结果集。
   
   setObject 方法将查询中的 ? 替换为 PERSONID 的值。refresh 方法将提交新查询并刷新结果集。要了解任何一种方法的详细信息，请右键单击该方法调用，然后从弹出式菜单中选择“显示 Javadoc”。此外，可以从“动态帮助”窗口访问“数据提供器引用”和“行集引用”。
   
   log 方法会将消息和关联的栈跟踪发送到应用服务器的日志，以帮助发现和诊断用户问题。通过在“服务器”窗口中右键单击“部署服务器”，然后从弹出式菜单中选择“查看服务器日志”，您可以查看服务器的日志。
   
   
9. 按 Ctrl-Shift-F 组合键重新设置代码格式。
   
   
10. 在“导航”窗口中单击，然后键入 prerender。一旦开始键入，就会出现“快速搜索”对话框，如下图所示。IDE 会在“导航”窗口中突出显示第一个匹配条目。
    
    请注意，“导航”窗口和“概要”窗口共用同一个空间。通过单击窗口的标题，可以将某一窗口置于前端。
    
    

    图 7：“导航”窗口中的“快速搜索”

     
    
11. 按 Enter 键。Java 编辑器将显示 prerender 方法。
    
    
12. 将 prerender 方法的主体替换为以下粗体显示的代码。
    
    

    代码样例 3：第一次显示页时同步主要-详细数据

    public void prerender() { if ( personIdDD.getSelected() == null ) { try { personDataProvider.cursorFirst(); getSessionBean1().getTripRowSet().setObject( 1, personDataProvider.getValue("PERSON.PERSONID")); tripDataProvider.refresh(); } catch (Exception e) { error("Cannot switch to person " + personDataProvider.getValue("PERSON.PERSONID")); log("Cannot switch to person " + personDataProvider.getValue("PERSON.PERSONID"), e); } } }

     
    在 Web 浏览器开始显示页之前调用的此代码会处理第一次访问页时的情况。
    
    
13. 按 Ctrl-Shift-F 组合键重新设置代码格式。
    
    
14. 单击编辑工具栏中的“设计”以返回到可视设计器。
    
    
15. 右键单击下拉列表组件，然后选择“更改时自动提交”。在“属性”窗口中，以下代码将出现在 onchange 属性中。
    
    

    代码样例 4：onchange 属性代码

    common_timeoutSubmitForm(this.form, 'personIdDD');

     
    此时，当用户在运行的 Web 应用程序中更改下拉列表选择时，Web 浏览器将自动提交页面。
    
    
16. 单击主工具栏中的“运行主项目”。
    
    IDE 将保存所有已更改的文件并重新生成应用程序，然后将应用程序重新部署到服务器中。在下拉列表中选择其他名字时，请注意会更新旅行表使其显示新选定人员的旅行信息。
    
    
17. 从下拉列表组件中选择某人，以查看表组件如何与主要数据和详细数据同步的。单击 DESTCITY 列的标题以查看表组件如何对行进行排序。

执行更多操作

  
public void prerender() {
    if ( personIdDD.getSelected() == null ) {
        try {
            personDataProvider.cursorFirst();
            getSessionBean1().getTripRowSet().setObject(
                1, personDataProvider.getValue("PERSON.PERSONID"));
            tripDataProvider.refresh();
        } catch (Exception e) {
            error("Cannot switch to person " +
                    personDataProvider.getValue("PERSON.PERSONID"));
            log("Cannot switch to person " +
                    personDataProvider.getValue("PERSON.PERSONID"), e);
        }
    }
    else {
        try {
            // Synchronize data provider with current selection
            personDataProvider.setCursorRow(
                    personDataProvider.findFirst(
                    "PERSON.PERSONID", personIdDD.getSelected()));
        } catch (Exception e) {
            error("Cannot switch to person " +
                    personIdDD.getSelected());
            log("Cannot switch to person " +
                    personIdDD.getSelected(), e);
        }
    }      
}

1. constuctor
2. prerender
3. constuctor
4. personIdDD_processValueChange

小结

1. 将数据库表的节点拖放到组件上，或从弹出式菜单中选择“绑定到数据”，然后从下拉列表中选择现有的数据提供器，以将组件绑定到数据库表。
   
   
2. 使用“绑定到数据”对话框可以配置组件所显示的数据库列，对于列表类型组件还可以配置它所返回的列。还可以使用“表布局”菜单操作配置表组件显示哪些数据库表列。
   
   
3. 要修改 RowSet 对象的查询，请从“概要”窗口打开 RowSet 对象的查询编辑器。
   
   
4. 调用 RowSet 对象的 setObject 方法可以设置查询参数的值。调用数据提供器的 refresh 方法可以执行查询并刷新结果集。
   
   
5. 使用“更改时自动提交”菜单操作，可以在组件的值发生更改时自动提交页。
   
   
6. 执行以下步骤以使详细组件与主要组件保持同步：
   
   
   1. 将代码添加到页面 Bean 的 prerender 方法，以调用详细 RowSet 对象的 setObject 方法，从而将查询参数设置为某个缺省值，如下拉列表中的第一个人。然后调用 refresh 方法执行查询。
      
      
   2. 将主组件绑定到 <processValueChanged> 方法。使此方法调用详细 RowSet 对象的 setObject 方法，以设置新的查询参数。然后调用 refresh 方法执行查询。

• 使用数据提供器教程
• 执行插入、更新和删除操作教程
• IDE 的“动态帮助”窗口中的“数据提供器引用”。
• IDE 的“动态帮助”窗口中的“JDBC 行集引用”。