构建数据库数据的树状结构

本教程介绍如何用数据库中的数据，动态地构建一个树状结构。使用 NetBeans Visual Web Pack 5.5，构建一个两页应用程序，第一页包含一个 Tree 组件。使用来自数据库的名称，将一级节点填充在 Tree 中，使用人员的 trip 填充二级节点。trip 节点与第二页链接，显示该 trip 的详细信息。

目录

l      设计主页

l      连接数据库

l      使用数据库表格构建树状结构

l      添加详细信息页

l      添加代码

l      定以页面导航

l      更多操作：将 Action 方法与 Tree 节点绑定

l      关于选择 Tree 节点的一点说明

 

 本教程将使用以下技术和资源

JavaServer Faces 组件/
Java EE 平台

1.2 with Java EE 5*
1.1 with J2EE 1.4

Travel 数据库

 

 

必需的

BluePrints AJAX 组件库

不是必需的

* 该教程发布时，只有 Sun Java System Application Server 支持 Java EE 5

本教程与 Sun Java Application Server PE 9.0 Update Release 1 和 Tomcat 5.5.17 配合使用。

设计主页

从构建包含 Tree 组件和 TRIP 数据库表格的主页开始。

1. 创建一个新的可视化 Web 应用程序项目，并将其命名为 DatabaseTree。

2.      从 Palette 的 Basic 部分，将一个 Tree 组件拖动到页面上，键入 Travel Information，并按 Enter。在 Properties 窗口中，将 id 属性设置为 displayTree，将 clientSide 属性设置为 True。

当 clientSide 为 True 时，每个子节点（无论展开与否）都被发送给客户端，但是在父节点展开之前它们是不可见的。当 clientSide 为 False 时，仅提供展开父节点的子节点。

3.      选择 Tree Node 1，右键单击，从弹出菜单中选择 Delete。

在本应用程序中，不需要 IDE 创建的初始 tree 节点，因为正在以编程方式填充 tree。如果未删除该节点，在 JSP 标记属性中设置的值将优于运行时设置，该页将显示此节点。

4. 从 Palette 中将 Message Group 组件拖动到页面上较边远的位置，比如页面的右上角。

连接数据库

下一步，将页面与 Travel 数据源中的数据库表格连接。然后使用 Query Editor 修改用于检索数据的 SQL 查询，使游客的姓名按字母顺序显示，旅行日期则按时间顺序显示。

1.      打开 Runtime 窗口，展开 Databases 节点，验证 Travel 数据库已连接。

如果代表 TRAVEL 数据库标记的 jdbc 节点断开，而且不能展开该节点，则 IDE 未与数据库连接。右键单击 TRAVEL 的 jdbc 节点，并从弹出菜单中选择 Connect。如果出现 Connect 对话框，为 Password 输入 travel，选择 Remember Password During This Session，然后单击 OK。如果未看到 TRAVEL 数据库的 jdbc 节点，请参见 NetBeans Visual Web Pack 安装说明，了解有关使数据库为 IDE 所用的信息。

注意：如果正在使用 Apache Tomcat，在尝试连接数据库之前，将 derbyClient.jar 文件复制到 /common/lib 目录。

2.      展开 TRAVEL 数据库的 jdbc 节点，然后展开 Tables 节点。

3.      将 TRIP 节点拖动到 Visual Designer 上面。

Outline 窗口显示 Page1 部分的 tripDataProvider 节点，以及 SessionBean1 部分的 tripRowSet 节点。

4.      在 Outline 窗口中，右键单击 tripRowSet 节点，并选择 Edit SQL Statement。

在编辑区域出现带有 TRIP 表格图的 Query Editor。

5.      从 Runtime 窗口中拖动 Travel > Tables > PERSON 节点，并将其放置在 Query Editor 中 Trip 表格图的旁边，另一个表格图出现，且在两个表格图之间带有链接或连接。

6. 在 PERSON 表格中，清除对 PERSONID 复选框的选择。

7.      在 Query Editor 的 Design Grid 中，找到 TRAVEL.PERSON 表格的 NAME 行。单击 Sort Type 单元格，并在下拉列表中选择 Ascending。

此操作将数据库表格中的姓名按姓氏字母顺序分类。

8.      找到 TRAVEL.TRIP 表格的 DEPDATE 行。单击 Sort Type 单元格，并在下拉列表中选择 Ascending。

此操作将旅行日期按照由早到晚的顺序分类。使用数据库表格构建树状结构

现在添加一个请求 bean 属性，来保存应用程序中两个页都要使用的信息。然后向 prerender() 方法添加代码，使用 TRIP 和 PERSON 数据库表格动态地构建 Tree 组件。

1.      打开 Page1，使 Outline 窗口可见。在 Outline 窗口中，右键单击 RequestBean1 节点，并选择 Add ＞ Property。将属性命名为 personId，将类型输入为 Integer，然后单击 OK。

该属性保存游客的 ID，如下图所示。然后，构建一个使用该属性的 Trip 详细页面，将当前游客的 id 传递给 Page 1。设置该属性时，Page 1 将该游客的节点展开。

注意：由于该版本产品存在一个错误，可能需要关闭弹出菜单，然后再一次右键单击 RequestBean 节点，激活 Add 子菜单。

2.      打开 Java Editor 中的 Page1，然后滚动到 prerender 方法。使用以下以黑体显示的代码替换 prerender 方法的主体部分：

代码示例 1：Page1 的 prerender 方法

    public void prerender() {

        // If the Request Bean's personId is set, then

        // we just came back from the Trip page

        // and had displayed a selected trip.

        // We use the personId later to determine whether

        // to expand a person's node

        Integer expandedPersonId = getRequestBean1().getPersonId();

        try {

            // Set up the variables we will need

            Integer currentPersonId = new Integer(-1);

            // If nbrChildren is not 0 then this is a

            // postback and we have our tree already

            int nbrChildren = displayTree.getChildCount();

            if (nbrChildren == 0) {

                // List of outer (person) nodes

                List outerChildren = displayTree.getChildren();

                // Erase previous contents

                outerChildren.clear();

                // List of inner (trip) nodes

                List innerChildren = null;

                // Execute the SQL query

                tripDataProvider.refresh();

                // Iterate over the rows of the result set.

                // Every time we encounter a new person, add first level node.

                // Add second level trip nodes to the parent person node.

                boolean hasNext = tripDataProvider.cursorFirst();

                while (hasNext) {

                    Integer newPersonId =

                            (Integer) tripDataProvider.getValue(

                            "TRIP.PERSONID");

                    if (!newPersonId.equals(currentPersonId)) {

                        currentPersonId = newPersonId;

                        TreeNode personNode = new TreeNode();

                        personNode.setId("person" + newPersonId.toString());

                        personNode.setText(

                                (String)tripDataProvider.getValue(

                                "PERSON.NAME"));

                        // If the request bean passed a person id,

                        // expand that person's node

                        personNode.setExpanded(newPersonId.equals

                                (expandedPersonId));

                        outerChildren.add(personNode);

                        innerChildren = personNode.getChildren();

                    }

                    // Create a new trip node

                    TreeNode tripNode = new TreeNode();

                    tripNode.setId("trip" +

                            tripDataProvider.getValue("TRIP.TRIPID").toString());

                    tripNode.setText(

                            tripDataProvider.getValue("TRIP.DEPDATE").toString());

                    tripNode.setUrl("/faces/Trip.jsp?tripId=" +

                            tripDataProvider.getValue("TRIP.TRIPID").toString());

                    innerChildren.add(tripNode);

                    hasNext = tripDataProvider.cursorNext();

                }

            }

        } catch (Exception ex) {

            log("Exception gathering tree data", ex);

            error("Exception gathering tree data: " + ex);

        } 

     }

3. 
   该代码读取 trip 记录，这些记录按 personId 顺序排列。代码为每个 personId 在 Tree 中创建一个新的一级节点。然后代码为与该 personId 相关的每个 trip 创建一个二级节点（嵌入节点）。最后，代码将二级 trip 节点与 tripNode_action 方法绑定，本节的后面将创建该方法。
4. 按 Alt-Shift-F 来修正未发现类的错误。在 Fix Imports 对话框中，确保 java.util.List 出现在 Fully Qualified Name 字段中，然后单击 OK。 

5.      运行项目。

Web 浏览器打开并显示 Tree 组件，该组件在每个一级节点显示有一个人员的姓名。展开一个节点，显示该人员的旅行日期。注意，姓名按姓氏的字母顺序显示，日期按时间先后顺序显示，在下一节，您将添加代码以便在用户单击 trip 节点时导航到第二页。第二页显示用户所选 trip 的详细信息。

添加详细信息页

在此，向应用程序添加了第二页。本页使用了 Property Sheet 组件，动态地显示用户在第一页上所选 trip 的详细信息。

1. 打开 Projects 窗口，右键单击 Web Pages 节点，然后从弹出菜单中选择 New ＞Page。将新页命名为 Trip。

2.      打开 Runtime Window，然后将 Tables > TRIP 节点拖动到 Trip 页面的 Visual Designer 上。在对话框中，选择 Create SessionBean1 tripRowSet1 旁边的单选按钮．
Outline 窗口显示 Trip 部分中的 tripDataProvider1 节点，以及 SessionBean1 部分中的 tripRowSet1 节点。

3. 在 Outline 窗口中，右键单击 tripRowSet1 节点，并选择 Edit SQL Statement。

4.      在 Query Editor 的 Design Grid 中，右键单击 TRIPID 行中的任一单元格，然后选择 Add Query Criteria。在对话框中，将 Comparison 下拉菜单设置为 =Equals，然后选择 Parameter 单选按钮。单击 OK。

在 TRIPID 的 Criteria 列中可以看到 =?，它在 SQL 查询中添加以下 WHERE 子句。

WHERE TRAVEL.TRIP.TRIPID = ? 

5. 在 Visual Designer 中打开 Trip Page。从 Palette 的 Basic 部分，将一个 Hyperlink 组件拖动到页面上，键入 Home，并按 Enter。

6.      在 Hyperlink 组件的 Properties 窗口中，单击 action 属性的省略号(…)按钮，从下拉列表中选择 hyperlink1_action，然后单击 OK。

IDE 将 hyperlink1_action 事件处理程序添加到 Java 源。

7. 从 Palette 中将 Message Group 组件拖动到页面，并将其放在 Hyperlink 组件的右面。

8.      从 Palette 的 Layout 部分，将 Property Sheet 组件拖动到页面上。将它放在 Hyperlink 组件的下方。

Property Sheet 组件为布置 trip 信息提供了一个容器。Property Sheet 组件包含 Property Sheet Section，而 Property Sheet Section 则包含 Property 组件。

9.      选择 Property Sheet Section 1。在 Properties 窗口中，将 label 属性设置为 Trip Details。

注意：如果项目源级别被设置为 1.4，则在 Properties 窗口中更改属性表标签后，属性表标签不会被更新。

10. 在 Outline 窗口中，展开 propertySheet1 ＞ section1，然后选择 property1 节点。在 Properties 窗口中，将 label 属性设置为 Departure Date：并按 Enter。
11. 在 Outline 窗口内，选择 section1，右键单击，并从弹出菜单中选择 Add Property。在 Properties 窗口中，将 label 属性设置为 Departure City：并按 Enter。

12. 从 Palette 中拖动 Static Text 组件，并把它放在 Outline 窗口中的 property1 节点上。

Static Text 成为 property1 的一个子结点。Visual Designer 中也出现了 Static Text。

13. 右键单击 Static Text 组件，然后从弹出菜单中选择 Bind to Data。如有必要，单击 Bind to Data Provider 选项卡，将该选项卡置于前端。在对话框中，选择 Data 字段中的 TRIP.DEPDATE。

在 Visual Designer 的 Static Text 组件中出现当前日期。

14. 将 Static Text 组件添加到 property2。将 Static Text 与 TRIP.DEPCITY 绑定。