目录   -  设计主页 -  设计站点图页 -  配置树节点 -  定义页面导航 -  运行并测试应用程序 -  其他树功能 -  动态添加树节点

设计主页

1. 创建一个新的 Web 应用程序项目，并将其命名为 SiteMapExample。
   
   图 1 显示了将在以下步骤中创建的应用程序主页。
   
   

   图 1：站点图项目主页

    
   
2. 将一个“标签”组件从组件面板的“基本”类别拖放到页面顶部居中的位置。
   
   
3. 在“属性”窗口中，将 text 属性设置为 Site Map Example Home Page，并将 labelLevel 属性设置为强 (1)。强 (1) 值是创建大文本的预定义样式。
   
   
4. 将一个“超级链接”组件从组件面板的“基本”类别拖放到页面的左侧。将“超级链接”组件的 text 属性设置为 Site Map。
   
   
5. 将一个“静态文本”组件从组件面板拖放到“标签”组件的旁边。将其 text 属性设置为 Example using the Tree component to build a site map。

设计站点图页

1. 在“项目”窗口中，右键单击 "SiteMapExample" >“Web 页”，然后选择“新建”>“页”。
   
   
2. 在“文件名”字段中键入 SiteMap，然后单击“完成”。
   
   "SiteMap" 页将在可视设计器中打开。
   
   
3. 将“树”组件从组件面板的“基本”类别拖放到页面上。
   
   
4. 在选定“树”组件的情况下，键入 Site Map 以设置其标题文本。
   
   在“属性”窗口中，将更新 text 属性的值。要更改组件的显示文本，您既可以直接在组件中键入，也可以更改其 text 属性的值。
   
   
5. 选择 "Tree Node 1"，然后键入 Home Page 以设置其文本。
   
   
6. 转至组件面板的“基本”类别，然后展开“树”组件。
   
   该组件具有一个子组件，即“树节点”。
   
   
7. 将一个“树节点”组件从组件面板拖放到 "Site Map" 组件上。确保在放置“树节点”组件时整个 "Site Map" 组件的边框为蓝色。此操作将创建 "Tree Node 2" 作为 "Home Page" 节点的同级节点。
   
   要查看“树”组件在运行时的外观，请单击编辑器工具栏中的“在浏览器中预览”按钮 。
   
   
8. 将 "Tree Node 2" 的 text 属性更改为 Site Map Page。
   
   
9. 将一个“树节点”组件从组件面板拖放到 "Site Map" 组件上。确保在放置“树节点”组件时整个 "Site Map" 组件的边框为蓝色。此操作将创建 "Tree Node 3" 作为 "Site Map Page" 节点的同级节点。将新建树节点的 text 属性更改为 Documents。
   
   
10. 将一个“树节点”组件拖动到 "Documents" 节点上。确保在放置“树节点”组件时只有 "Documents" 节点（而不是整个 "Site Map" 组件）的边框为蓝色。将此节点的 text 属性更改为 Catalog。
    
    此节点是 "Documents" 节点的子节点。"Documents" 节点的图标将自动更改为一个文件夹，以表明它具有子节点。
    
    
11. 将另一个“树节点”组件拖动到 "Documents" 节点上。将此节点的 text 属性更改为 Specifications。
    
    图 2 显示了此时该页面的外观。
    
    

    图 2：站点图页

配置树节点

1. 在“概要”窗口中，选择 "TreeNode4: Catalog"。
   
   
2. 在“属性”窗口中，单击 url 属性旁边的省略号按钮 (...) 以打开此属性的属性编辑器。
   
   
3. 单击“添加文件”按钮，然后找到将样例文件（在 SiteMap.zip 中提供）解压缩到的目录。
   
   
4. 选择 catalog.pdf，然后单击“添加文件”。
   
   在属性编辑器中，该文件被添加到 resources 文件夹，而且 URL 字段被设置为 /resources/catalog.pdf。
   
   
5. 单击“确定”将 url 属性设置为 /resources/catalog.pdf。
   
   URL 是相对于应用程序所在的位置而指定的，并且指向 resources 目录中的文件。当用户单击 "Catalog" 节点时，浏览器会将 PDF 文件装入 Adobe Reader。如果您没有 Adobe Reader，可以从 Adobe Systems, Incorporated 免费下载。
   
   
6. 在“属性”窗口中，选择 toolTip 属性，单击省略号按钮 (...)，然后输入以下文本：PDF File: Requires Adobe Reader。
   
   每当用户将鼠标悬停在链接文本上时，此文本都将作为工具提示弹出。
   
   
7. 重复步骤 1 到 6，但这一次选择“概要”窗口中的 "treeNode5: Specifications"，然后添加 specs.pdf 文件。
   
   注意：在“项目”窗口中，如果展开 "SiteMapExample" >“Web 页”> "resources"，则可以看到 IDE 已将两个 PDF 文件添加到 resources 文件夹。该文件夹是供应用程序使用的图形文件和其他类型文件所在的标准位置。下图显示了添加这两个文件后的“项目”窗口。
   
   

   图 3：“项目”窗口

    
   

定义页面导航

1. 在可视设计器中，双击 "Site Map" 组件中的 "Home Page" 节点，以便为“树节点”组件创建一个操作方法，并在 Java 编辑器中打开该方法。
   
   将打开 Java 编辑器，插入点位于 treeNode1_action() 方法中。当引发组件操作（用户单击组件时出现此情况）时，将调用此方法。正如将在下面的步骤中定义的那样，当用户单击此节点的链接时，该方法将导航到由名为 home 的连线指示的页面。
   
   
2. 按如下所示更改 return 语句：
   
   return "home";
   
   在下面的步骤中，您将通过定义页面导航来启用此代码。
   
   
3. 在“项目”窗口中，双击 "SiteMapExample" >“页面导航”节点。
   
   将打开页面导航编辑器，并且显示表示应用程序的页面 Page1.jsp 和 SiteMap.jsp 的两个图标。
   
   
4. 单击 Page1.jsp 图标以将其展开并使其内容可见，然后将一条连线从 "hyperlink1" 拖动到 "SiteMap.jsp"。将连线的名称从 case1 更改为 sitemap。
   
   可以采用两种方法更改连线的名称。创建连线时，连线名称是选中的，只需键入新文本即可。您也可以选择连线，然后在连线的“属性”窗口中更改结果属性的值。
   
   
5. 将一条连线从 "SiteMap.jsp" 拖动到 "Page1.jsp"。将此连线命名为 home。
   
   图 4 显示了定义这两条连线后的页面导航编辑器。
   
   

   图 4：页面导航编辑器

运行并测试应用程序

1. 运行应用程序。
   
   
2. 单击应用程序主页上的 "Site Map" 超级链接。
   
   将打开应用程序的第二页，如图 5 所示。
   
   

   图 5：运行时的站点图页

    
   
3. 将鼠标悬停在 "Catalog" 链接上以查看其工具提示。
   
   
4. 单击 "Catalog" 链接和 "Specifications" 链接。关联的 PDF 文件将在 Adobe Reader 中打开。

其他树功能

1. 确保 "SiteMap" 页在可视设计器中处于选中状态，且处于设计模式。
   
   
2. 在“概要”窗口中，右键单击 "tree1: SiteMap" 节点，然后选择“添加树节点”以将新的顶级节点添加到树。将此节点的 text 属性更改为 Web Sites，并将其 id 属性更改为 webSitesNode。
   
   
3. 右键单击 "Web Sites" 节点，然后选择“添加树节点”以在 "Web Sites" 节点下添加一个新节点。将此节点的 text 属性更改为 Sun Developer Network。
   
   
4. 选择新节点，然后在“属性”窗口中将其 url 属性设置为 http://developers.sun.com/。
   
   
5. 选择 target 属性，然后从下拉列表中选择新窗口 (_blank)。
   
   设置此属性将使得在新的浏览器窗口中打开 Web 页。
   
   
6. 将另一个“树节点”组件添加到 "Web Sites" 节点，然后将此新节点的 text 属性更改为 Java Tutorial，并将其 url 属性设置为 http://java.sun.com/docs/books/tutorial/。
   
   此时，树应如下图所示：
   
   

   图 6：具有新的 "Web Sites" 节点的站点图

    
   
7. 选择 "Web Sites" 节点，然后取消选中其 expanded 属性。请注意，该节点已在可视设计器中关闭。如果单击节点左侧的蓝色三角形图标，则将打开该节点以显示它的两个子节点。另请注意，expanded 属性又被选中了。再次单击蓝色三角形，将关闭节点并取消选中 expanded 属性。
   
   注意：在可视设计器中不必展开节点即可使用其子节点。节点关闭时，仍然可以在“概要”窗口中选择其子节点。例如，如果在“概要”窗口中选择 "treeNode8: JavaTutorial"，则可以在“属性”窗口中看到该节点的属性。
   
   
8. 运行应用程序，并导航到第二页，该页显示 "Web Sites" 节点关闭（未展开）时的站点图树。必须打开 "Web Sites" 节点才能看到它的两个子节点。如果单击 "Sun Developer Network" 链接，则浏览器将打开一个新窗口，并显示它所包含的 Web 页。如果选择 "SiteMap" 页的浏览器窗口并单击 "Java Tutorial" 链接，则新的 Web 页将替换 "SiteMap" 页。

动态添加树节点

1. 从主菜单中选择“文件”>“添加现有项”>“图像文件”。
   
   
2. 在对话框中，找到将样例文件（在 SiteMap.zip 中提供）解压缩到的目录。
   
   
3. 选择 hyperlink_icon.gif，然后单击“添加”。
   
   IDE 会将该文件添加到项目的 Web 页/resources 文件夹。
   
   
4. 重复步骤 1 到 3，但这一次添加 tree_document.gif 文件。
   
   
5. 在编辑区域中，打开 "SiteMap" 页的“设计”视图。
   
   
6. 将一个“按钮”组件添加到 "Site Map" 组件的右侧。将“按钮”组件的 text 属性更改为 Add Main Node。
   
   
7. 双击 "Add Main Node" 按钮，然后将以下代码（以粗体显示）添加到 button1_action 方法：
   
   

   代码样例 1：动态添加新的树节点

   public String button1_action() { java.util.List treeChildren = tree1.getChildren(); // Get count of nodes at top level to // ensure that new node ID is unique. int nodeNum = tree1.getChildCount() + 1; // Create a new tree node and set its // text, imageURL, and ID properties. TreeNode newNode = new TreeNode(); newNode.setText("New Node " + nodeNum); newNode.setImageURL("/resources/tree_document.gif"); newNode.setId("newTreeNode" + nodeNum); // Add the node to the list and select it in the tree. treeChildren.add(newNode); tree1.setSelected(newNode.getId()); return null; }

   
   
   
8. 在 Java 编辑器中单击鼠标右键，然后选择“重新设置代码格式”以重新设置刚粘贴的代码的格式。
   
   此方法会将一个新节点添加到树的顶级。它将使用您添加到 resources 文件夹的一个 GIF 文件。下面的步骤显示了如何将一个新节点添加到树的子节点（即 "Web Sites" 节点）。
   
   
9. 单击编辑区域上方的“设计”工具栏按钮以返回到设计模式，然后单击 "Web Sites" 节点左侧的蓝色三角形以将其展开。
   
   由于此操作会选中节点的 expanded 属性，因此当应用程序运行时，此节点将被展开，并显示添加到它的任何新节点。
   
   
10. 在 "Add Main Node" 按钮的下方添加一个“按钮”组件。将“按钮”的 text 属性更改为 Add Web Sites Node。
    
    
11. 双击 "Add Web Sites Node" 按钮，然后将以下代码（以粗体显示）添加到 button2_action 方法：
    
    

    代码样例 2：动态添加新的子节点

    public String button2_action() { // Get children of Web Sites tree node. java.util.List treeNodeChildren = webSitesNode.getChildren(); // Get count of nodes at this level to // ensure that new node ID is unique. int nodeNum = webSitesNode.getChildCount() + 1; // Create a new tree node under Web Sites tree node and set // its text, imageURL, url, target, and id properties. TreeNode newNode = new TreeNode(); newNode.setText("Google Search " + nodeNum); newNode.setImageURL("/resources/hyperlink_icon.gif"); newNode.setUrl("http://www.google.com/"); newNode.setTarget("_blank"); newNode.setId("newWebSitesNode" + nodeNum); // Add the node to the list and select it in the tree. treeNodeChildren.add(newNode); tree1.setSelected(newNode.getId()); return null; }

    
    
    
12. 按 Ctrl-Shift-F 组合键重新设置代码格式。
    
    
13. 运行应用程序。
    
    
14. 单击 "Site Map" 链接以转至 "SiteMap" 页，然后单击 "Add Main Node" 按钮将一个新节点添加到树组件。
    
    注意：该节点将使用您添加到 resources 文件夹的 tree_document.gif 文件。其他文档节点（如 "Home Page" 节点）同样使用了此文件。这些节点是从 defaulttheme.jar 文件（它包含 IDE 使用的样式表、图形和其他文件以便为组件提供通用外观）获取此文件的。您可以从此 JAR 文件中提取文件以供自己使用。它位于 install-dir/rave2.0/modules/ext 中。
    
    
15. 单击 "Add Web Sites Node" 按钮，在 "Web Sites" 节点的下方添加一个新节点。单击此新节点以转至 Google™ Web 页。请注意，Google 页将在新的浏览器窗口中打开，因为 button2_action 方法将此节点的 target 属性设置为了 "_blank"。

• 使用列表框组件
• 使用页面片段