Using Tree Components

January 2006 [Revision number: V2-3]

Copyright 2006 Sun Microsystems, Inc.

In this tutorial, you use the Sun Java Studio Creator integrated development environment (IDE) to create a page using a Tree component to display files and web pages, and you dynamically add nodes to the tree. Contents - Designing the Home Page - Designing the Site Map Page - Configuring the Tree Nodes - Defining the Page Navigation - Running and Testing the Application - Additional Tree Features - Dynamically Adding Tree Nodes Examples used in this tutorial SiteMap.zip located in the downloaded ZIP file.

Designing the Home Page

1. Create a new web application project and name it SiteMapExample located in the downloaded ZIP file. Figure 1 shows the application home page that you create in the following steps.

Figure 1: Site Map Project Home Page 2. From the Basic section of the Components Palette, drag a Label component and drop it on the top center of the page. 3. In the Properties window, set the text property to Site Map Example Home Page and the

labelLevel to Strong (1). The value Strong (1) is a predefined style that creates large text. 4. Drag a Hyperlink component from the Basic section of the Palette and drop it on the left side of the page. Set the text of the Hyperlink to Site Map. 5. Drag a Static Text component from the Palette and drop it next to the Label. Set the text to Example using the Tree component to build a site map.

Designing the Site Map Page

1. In the Projects window, right-click SiteMapExample > Web Pages and choose New > Page. 2. Type SiteMap in the File Name field and click Finish. The SiteMap page opens in the Visual Designer. 3. Drag the Tree component from the Basic section of the Palette and drop it on the page. 4. With the Tree component selected, type Site Map to set the title text. In the Properties window, the value of the text property is updated. To change the displayed text for the component, you can either type directly in the component or change the value of its text property. 5. Select Tree Node 1 and type Home Page to set the text. 6. Go to the Basic section of the Palette and expand the Tree component. The component has one subcomponent, Tree Node. 7. Drag a Tree Node component from the Palette and drop it on the Site Map component. Make sure that the entire Site Map component is outlined in blue when you drop the Tree Node component. This action creates Tree Node 2 as a sibling of the Home Page node. To see how the Tree component looks at run time, click the Preview in Browser button Editor toolbar. 8. Change the text of Tree Node 2 to Site Map Page. 9. Drag a Tree Node component from the Palette and drop it on the Site Map component. Make sure that the entire Site Map component is outlined in blue when you drop the Tree Node component. This action creates Tree Node 3 as a sibling of the Site Map Page node. Change the text of the new Tree Node to Documents. 10. Drag a Tree Node onto the Documents node. Make sure that only the Documents node (and not the entire Site Map component) is outlined in blue when you drop the Tree Node. Change the text of this node to Catalog. This node is a subnode of the Documents node. The icon for the Documents node automatically changes to a folder to indicate that it has subnodes. 11. Drag another Tree Node component onto the Documents node. Change the text of this node to in the

Specifications. Figure 2 show how the page should look at this point.

Figure 2: Site Map Page

Configuring the Tree Nodes

In this section, you add two files, catalog.pdf and specs.pdf, to your project. The files are included in the SiteMap.zip. file that accompanies this tutorial. If you have not done so already, download the SiteMap.zip file and extract its contents to your file system. Note: Be sure to also extract the two GIF files because you will need them later in this tutorial. 1. In the Outline Window, select TreeNode4: Catalog. 2. In the Properties window, click the ellipsis button (...) next to the url property to open the property editor for this property. 3. Click the Add File button, and then navigate to the directory where you extracted the sample files provided in SiteMap.zip. 4. Select catalog.pdf and click Add File. In the property editor, the file is added to the resources folder and the URL field is set to / resources/catalog.pdf. 5. Click OK to set the url property to /resources/catalog.pdf. The URL is relative to the application's location and points to files in the resources directory. When the user clicks the Catalog node, the browser loads the PDF file into Adobe Reader. If you do not have Adobe Reader, you can download it for free from Adobe Systems, Incorporated. 6. In the Properties window, select the tooltip property, click the ellipsis button (...), and enter the

following text: PDF File: Requires Adobe Acrobat. This text will pop up as a tooltip whenever the user hovers the mouse over the link text. 7. Repeat steps 1 through 6, this time selecting treeNode5: Specifications in the Outline window and adding the specs.pdf file. Note: In the Projects window, if you expand SiteMapExample > Web Pages > resources, you can see that the IDE has added the two PDF files to the resources folder. This folder is the standard location for graphics and other types of files that you want to make available to your application. The following figure shows the Projects window with these two files added.

Figure 3: Projects Window

Defining the Page Navigation

1. In the Visual Designer, double-click the Home Page node in the Site Map component to create an action method for the Tree Node component and open the method in the Java Editor. The Java Editor opens with the insertion point in the treeNode1_action() method. This method is called when the component's action is fired, which happens when the user clicks the component. As you will define in the steps that follow, when the user clicks this node's link, the method will navigate to the page indicated by the connector named home. 2. Change the return statement as follows: return "home"; You will enable this code in the next steps by defining the page navigation. 3. In the Projects window, double-click the SiteMapExample > Page Navigation node.

The Page Navigation Editor opens and displays two icons representing pages of the application, Page1.jsp and SiteMap.jsp. 4. Click the Page1.jsp icon to expand it and make its contents visible, and then drag a connector from hyperlink1 to SiteMap.jsp. Change the name of the connector from case1 to sitemap. There are two ways you can change the connector name. When you create the connector, the connector name is selected, and you can simply type the new text. You can also select the connector, and then in the connector's Properties window you can change the value of the Outcome property. 5. Drag a connector from SiteMap.jsp to Page1.jsp. Name this connector home. Figure 4 shows the Page Navigation Editor with these two connectors defined.

Figure 4: Page Navigation Editor

Running and Testing the Application

1. Run the application. 2. Click the Site Map hyperlink on the home page of the application. The second page of the application opens as shown in Figure 5.

Figure 5 : Site Map Page at Runtime 3. Hover the mouse over the Catalog link to see its tooltip. 4. Click the Catalog link and the Specifications link. The associated PDF files open in Adobe Reader.

Additional Tree Features

In this section, you add nodes to the tree that link to web pages. You then cause one of those pages to open in a separate browser window, and you set the parent node to be closed by default. 1. Make sure that the SiteMap page is selected in the Visual Designer and that it is in Design mode. 2. In the Outline window, right-click the tree1: SiteMap node and choose Add Tree Node to add a new top-level node to the tree. Change the text of this node to Web Sites and change its id property to webSitesNode. 3. Right-click the Web Sites node and choose Add Tree Node to make a new node under Web Sites. Change the text of this node to Sun Developer Network. 4. Select the new node and, in the Properties window, set its url property to http://developers. sun.com/. 5. Select the target property and choose New window (_blank) from the drop-down list. Setting this property will open the web page in a new browser window. 6. Add another Tree Node component to the Web Sites node and change the text of this new node to Java Tutorial and set the node's url property to http://java.sun.com/docs/books/ tutorial/. The tree should now look like the following figure:

Figure 6 : Site Map with New Web Site Nodes 7. Select the Web Sites node and uncheck its expanded property. Notice that the node closes in the Visual Designer. If you click the blue triangle icon to the left of the node, the node opens to show its two children. Notice also that the expand property is set again. Click the blue triangle again to close the node and unset the expand property. Note: You do not have to expand the node in the Visual Designer to work with its children. With the node closed, you can still select its children in the Outline window. For example, in the Outline window, if you select treeNode8: JavaTutorial, you can see that node's properties in the Properties window. 8. Run the application and navigate to the second page that shows the Site Map tree with the Web Sites node closed (unexpanded). You must open the Web Sites node to see its two child nodes. If you click the Sun Developer Network link, the browser opens a new window and displays that web page in it. If you select the browser window for the SiteMap page and click the Java Tutorial link, the new web page replaces the SiteMap page.

Dynamically Adding Tree Nodes

In this section, you add two Button components that add nodes to the tree when the user clicks them. In the first few steps, you add two GIF files to the project's resource folder so they can be used as images by the new nodes. 1. Choose File > Add Existing Item > Image File from the main menu. 2. In the dialog box, navigate to the directory to which you extracted the sample files provided in SiteMap.zip. 3. Select hyperlink_icon.gif and then click Add.

The IDE adds the file to the project's Web Pages/resources folder. 4. Repeat steps 1 through 3, this time adding the tree_document.gif file. 5. In the editing area, open the Site Map page in Design view. 6. Add a Button component to the right of the Site Map component. Change the text of the Button to Add Main Node. 7. Double-click the Add Main Node button and add the following code (in bold) to the button1_action method: Code Sample 1: Adding New Tree Nodes Dynamically 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. Right-click in the Java Editor and choose Reformat Code to reformat the code you just pasted. This method adds a new node to the top level of the tree. It uses one of the GIF files that you added to your resources folder. The next steps show how to add a new node to a child node of the tree, the Web Sites node. 9. Click the Design toolbar button above the editing area to return to Design mode, and then click the blue triangle to the left of the Web Sites node to expand it. Because this action sets the node's expanded property, when the application runs, this node will be expanded and will show any new nodes added to it. 10. Add a Button component below the Add Main Node button. Change the text of the Button to Add Web Sites Node. 11. Double-click the Add Web Sites Node button and add the following code (in bold) to the button2_action method:

Code Sample 2: Adding New Subnodes Dynamically 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. Press Ctrl-Shift-F to reformat your code. 13. Run the application. 14. Click the Site Map link to go to the SiteMap page, and then click the Add Main Node button to add a new node to the Tree component. Note: The node uses the tree_document.gif file that you added to the resources folder. This file is the same one that the other document nodes use, such as the Home Page node. Those nodes get the file from the defaulttheme.jar file, which contains stylesheets, graphics, and other files used by the IDE to provide a common look and feel to components. You can extract files from this JAR file for your own use. It is located in install-dir/rave2.0/modules/ext. 15. Click the Add Web Sites Node button to add a new node below the Web Sites node. Click the node to go to the Google web page. Notice that the Google page opens in a new browser window because the button2_action method set the node's target property to "_blank".

See Also:
q q

Using Listbox Components Using Page Fragments

This page was last modified: February 10, 2006

Sun and Third-party Trademarked Terminology

The following Sun trademarked terms might be used in the Sun Java(tm) Studio Creator tutorials:
q q q q q q q q q

Sun Java Studio Creator integrated development environment (IDE) Sun Java System Application Server version number (Application Server) Java Platform, Standard Edition technology (Java SE(tm) platform) JavaServer(tm) Faces technology JavaServer Pages(tm) technology (JSP(tm) technology) Sun Java System Web Server version number (Web Server) Java Database Connectivity software (JDBC software) Enterprise JavaBeans(tm) specification (EJB(tm) specification) Solaris(tm) Operating System software (Solaris OS software)

The following third-party trademarked terms might be used in the Sun Java Studio Creator tutorials:
q q

UNIX(R) software SPARC(R) processor

Copyright 2006 Sun Microsystems, Inc., 4150 Network Circle, Santa Clara, California 95054, U.S.A. All rights reserved. Sun Microsystems, Inc. has intellectual property rights relating to technology embodied in the product that is described in this document. In particular, and without limitation, these intellectual property rights may include one or more of the U.S. patents listed at http://www.sun.com/patents and one or more additional patents or pending patent applications in the U.S. and in other countries. U.S. Government Rights - Commercial software. Government users are subject to the Sun Microsystems, Inc. standard license agreement and applicable provisions of the FAR and its supplements. Use is subject to license terms. Sun, Sun Microsystems, the Sun logo, Java and the Java Coffee Cup logo are trademarks or registered trademarks of Sun Microsystems, Inc. in the U.S. and other countries.This product is covered and controlled by U.S. Export Control laws and may be subject to the export or import laws in other countries. Nuclear, missile, chemical biological weapons or nuclear maritime end uses or end users, whether direct or indirect, are strictly prohibited. Export or reexport to countries subject to U.S. embargo or to entities identified on U.S. export exclusion lists, including, but not limited to, the denied persons and specially designated nationals lists is strictly prohibited. Note: Sun is not responsible for the availability of third-party web sites mentioned in this document and does not endorse and is not responsible or liable for any content, advertising, products, or other materials on or available from such sites or resources. Sun will not be responsible or liable for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such content, goods, or services available on or through any such sites or resources.

Copyright 2006 Sun Microsystems, Inc., 4150 Network Circle, Santa Clara, California 95054, tats-Unis. Tous droits rservs. Sun Microsystems, Inc. dtient les droits de proprit intellectuels relatifs la technologie incorpore dans le produit qui est dcrit dans ce document. En particulier, et ce sans limitation, ces droits de proprit intellectuelle peuvent inclure un ou plus des brevets amricains lists l'adresse http://www.sun.com/patents et un ou les brevets supplmentaires ou les applications de brevet en attente aux tats-Unis et dans les autres pays. L'utilisation est soumise aux termes de la Licence. Sun, Sun Microsystems, le logo Sun, Java et le logo Java

10

Coffee Cup sont des marques de fabrique ou des marques dposes de Sun Microsystems, Inc. aux tats-Unis et dans d'autres pays.Ce produit est soumis la lgislation amricaine en matire de contrle des exportations et peut tre soumis la rglementation en vigueur dans d'autres pays dans le domaine des exportations et importations. Les utilisations, ou utilisateurs finaux, pour des armes nuclaires,des missiles, des armes biologiques et chimiques ou du nuclaire maritime, directement ou indirectement, sont strictement interdites. Les exportations ou rexportations vers les pays sous embargo amricain, ou vers des entits figurant sur les listes d'exclusion d'exportation amricaines, y compris, mais de manire non exhaustive, la liste de personnes qui font objet d'un ordre de ne pas participer, d'une faon directe ou indirecte, aux exportations des produits ou des services qui sont rgis par la lgislation amricaine en matire de contrle des exportations et la liste de ressortissants spcifiquement dsigns, sont rigoureusement interdites. Sun Microsystems n'est pas responsable de la disponibilit de tiers emplacements d'enchanement mentionns dans ce document et n'approuve pas et n'est pas responsable ou iresponsable d'aucun contenu, de la publicit, de produits, ou d'autres matriaux dessus ou fournis par de tels emplacements ou ressources. Sun ne sera pas responsable ou iresponsable d'aucuns dommages ou perte causs ou allgus pour tre caus par ou en liaison avec l'utilisation de ce produit ou la confiance dans des tels contenu, marchandises, ou services disponibles sur ou par des tels emplacements ou ressources.

11