Site Map Tree

7/28/2019 Site Map Tree

1/11

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 apage 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 ZIPfile.

Designing the Home Page

1. Create a new web application project and name itSiteMapExample located in the downloadedZIP 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 topcenter of the page.

3. In the Properties window, set thetext property toSite Map Example Home Page and the

1


2/11

labelLevel to Strong (1) . The valueStrong (1) is a predefined style that creates largetext.

4. Drag a Hyperlink component from the Basic section of the Palette and drop it on the left side of thepage. Set the text of the Hyperlink toSite Map .

5. Drag a Static Text component from the Palette and drop it next to the Label. Set the text toExample 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. TypeSiteMap 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, typeSite Map to set the title text.

In the Properties window, the value of thetext property is updated. To change the displayed textfor the component, you can either type directly in the component or change the value of itstext property.

5. Select Tree Node 1 and typeHome 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 surethat 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 in theEditor toolbar.

8. Change the text of Tree Node 2 toSite Map Page .

9. Drag a Tree Node component from the Palette and drop it on the Site Map component. Make surethat 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 newTree Node toDocuments .

10. Drag a Tree Node onto the Documents node. Make sure that only the Documents node (and not theentire Site Map component) is outlined in blue when you drop the Tree Node. Change the text of thisnode toCatalog .

This node is a subnode of the Documents node. The icon for the Documents node automaticallychanges 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

2


3/11

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 andspecs.pdf , to your project. The files are includedin the SiteMap.zip. file that accompanies this tutorial. If you have not done so already, download theSiteMap.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 theurl property to open the propertyeditor for this property.

3. Click the Add File button, and then navigate to the directory where you extracted the sample filesprovided inSiteMap.zip .

4. Selectcatalog.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 theurl property to/resources/catalog.pdf .

The URL is relative to the application's location and points to files in theresources directory.When the user clicks the Catalog node, the browser loads the PDF file into Adobe Reader. If you donot have Adobe Reader, you can download it for free fromAdobe Systems, Incorporated.

6. In the Properties window, select thetooltip property, click the ellipsis button (...), and enter the

3
http://www.adobe.com/products/acrobat/readstep2.htmlhttp://www.adobe.com/products/acrobat/readstep2.html


4/11


5/11

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 fromhyperlink1 to SiteMap.jsp. Change the name of the connector fromcase1 to sitemap .

There are two ways you can change the connector name. When you create the connector, theconnector 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 theOutcome property.

5. Drag a connector from SiteMap.jsp to Page1.jsp. Name this connectorhome .

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.

5


6/11

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 openin 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 newtop-level node to the tree. Change the text of this node toWeb Sites and change itsid property towebSitesNode .

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 toSun Developer Network .

4. Select the new node and, in the Properties window, set itsurl property tohttp://developers.sun.com/.

5. Select thetarget property and chooseNew 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 toJava Tutorial and set the node'surl property tohttp://java.sun.com/docs/books/tutorial/ .

The tree should now look like the following figure:

6


7/11

Figure 6 : Site Map with New Web Site Nodes

7. Select the Web Sites node and uncheck itsexpanded property. Notice that the node closes in theVisual Designer. If you click the blue triangle icon to the left of the node, the node opens to show itstwo children. Notice also that theexpand property is set again. Click the blue triangle again toclose the node and unset theexpand property.

Note: You do not have to expand the node in the Visual Designer to work with its children. With thenode closed, you can still select its children in the Outline window. For example, in the Outlinewindow, if you select treeNode8: JavaTutorial, you can see that node's properties in the Propertieswindow.

8. Run the application and navigate to the second page that shows the Site Map tree with the Web Sitesnode closed (unexpanded). You must open the Web Sites node to see its two child nodes. If you clickthe 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 webpage 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 thefirst 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 inSiteMap.zip.

3. Selecthyperlink_icon.gif and then click Add.

7


8/11

The IDE adds the file to the project'sWeb Pages/resources folder.

4. Repeat steps 1 through 3, this time adding thetree_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 (inbold ) to thebutton1_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 addedto your resources folder. The next steps show how to add a new node to a child node of the tree, theWeb Sites node.

9. Click the Design toolbar button above the editing area to return to Design mode, and then click theblue triangle to the left of the Web Sites node to expand it.

Because this action sets the node'sexpanded property, when the application runs, this node will beexpanded 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 toAddWeb Sites Node .

11. Double-click the Add Web Sites Node button and add the following code (inbold ) to thebutton2_action method:

8


9/11

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 anew node to the Tree component.

Note: The node uses thetree_document.gif file that you added to the resources folder. Thisfile is the same one that the other document nodes use, such as the Home Page node. Those nodes get

the file from thedefaulttheme.jar file, which contains stylesheets, graphics, and other filesused by the IDE to provide a common look and feel to components. You can extract files from thisJAR file for your own use. It is located ininstall-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 nodeto go to the Google web page. Notice that the Google page opens in a new browser windowbecause thebutton2_action method set the node'starget property to"_blank" .

See Also :

q Using Listbox Componentsq Using Page Fragments

This page was last modified: February 10, 2006

Code Sample 2: Adding New Subnodes Dynamically

9
http://developers.sun.com/prodtech/javatools/jscreator/learning/tutorials/2/listbox_components.htmlhttp://developers.sun.com/prodtech/javatools/jscreator/learning/tutorials/2/pagefragments.htmlhttp://developers.sun.com/prodtech/javatools/jscreator/learning/tutorials/2/pagefragments.htmlhttp://developers.sun.com/prodtech/javatools/jscreator/learning/tutorials/2/listbox_components.html


10/11

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

q Sun Java Studio Creator integrated development environment (IDE)q Sun Java System Application Serverversion number (Application Server)q Java Platform, Standard Edition technology (Java SE(tm) platform)q JavaServer(tm) Faces technologyq JavaServer Pages(tm) technology (JSP(tm) technology)q Sun Java System Web Serverversion number (Web Server)q Java Database Connectivity software (JDBC software)q Enterprise JavaBeans(tm) specification (EJB(tm) specification)q 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 UNIX(R) softwareq SPARC(R) processor

Copyright 2006 Sun Microsystems, Inc., 4150 Network Circle, Santa Clara, California 95054, U.S.A. Allrights reserved.

Sun Microsystems, Inc. has intellectual property rights relating to technology embodied in the product that isdescribed in this document. In particular, and without limitation, these intellectual property rights may includeone or more of the U.S. patents listed at http://www.sun.com/patents and one or more additional patents orpending 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 applicableprovisions of the FAR and its supplements. Use is subject to license terms. Sun, Sun Microsystems, the Sunlogo, Java and the Java Coffee Cup logo are trademarks or registered trademarks of Sun Microsystems, Inc. inthe 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 nuclearmaritime end uses or end users, whether direct or indirect, are strictly prohibited. Export or reexport tocountries subject to U.S. embargo or to entities identified on U.S. export exclusion lists, including, but notlimited 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 doesnot endorse and is not responsible or liable for any content, advertising, products, or other materials on oravailable from such sites or resources. Sun will not be responsible or liable for any damage or loss caused oralleged to be caused by or in connection with use of or reliance on any such content, goods, or servicesavailable 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 leproduit qui est dcrit dans ce document. En particulier, et ce sans limitation, ces droits de propritintellectuelle peuvent inclure un ou plus des brevets amricains lists l'adresse http://www.sun.com/patents etun 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

Sun and Third-party Trademarked Terminology

10


11/11

Coffee Cup sont des marques de fabrique ou des marques dposes de Sun Microsystems, Inc. aux tats-Uniset dans d'autres pays.Ce produit est soumis la lgislation amricaine en matire de contrle des exportations etpeut tre soumis la rglementation en vigueur dans d'autres pays dans le domaine des exportations etimportations. Les utilisations, ou utilisateurs finaux, pour des armes nuclaires,des missiles, des armesbiologiques 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 leslistes d'exclusion d'exportation amricaines, y compris, mais de manire non exhaustive, la liste de personnesqui font objet d'un ordre de ne pas participer, d'une faon directe ou indirecte, aux exportations des produits oudes services qui sont rgis par la lgislation amricaine en matire de contrle des exportations et la liste deressortissants spcifiquement dsigns, sont rigoureusement interdites.

Sun Microsystems n'est pas responsable de la disponibilit de tiers emplacements d'enchanement mentionnsdans ce document et n'approuve pas et n'est pas responsable ou iresponsable d'aucun contenu, de la publicit, deproduits, ou d'autres matriaux dessus ou fournis par de tels emplacements ou ressources. Sun ne sera pasresponsable ou iresponsable d'aucuns dommages ou perte causs ou allgus pour tre caus par ou en liaisonavec l'utilisation de ce produit ou la confiance dans des tels contenu, marchandises, ou services disponibles surou par des tels emplacements ou ressources.

11