Building a Tree From Database Data

This tutorial shows you how to dynamically build a tree structure from data in a database. Using NetBeans IDE 6.5, you build a two-page application, the first page of which includes a JSF 1.2 (Woodstock) Tree component. You populate the first-level nodes in the Tree with names from a database, and the second-level nodes with the trips for that person. The trip nodes are links to a second page, which displays the details for that trip.

Expected duration: 30 minutes

Contents

• Designing the Home Page
• Configuring the Database
  • Setting up the Database
  • Connecting to the Database
• Building the Tree from the Database Table
• Adding the Detail Page
• Adding Code
• Defining Page Navigation
• Doing More: Binding Action Methods to Tree Nodes
• A Note About the Selection of Tree Nodes
• Summary

To follow this tutorial, you need the following software and resources.

Software or Resource	Version Required
NetBeans IDE	6.5 Java Version
Java Development Kit (JDK)	Version 6 or version 5
JavaServer Faces Components/ Java EE Platform	1.2 with Java EE 5* or 1.1 with J2EE 1.4
GlassFish Application Server	V2
Travel Database	Required

* To take advantage of NetBeans IDE's Java EE 5 capabilities, use an application server that is fully compliant with the Java EE 5 specification, such as the GlassFish Application Server V2 UR2. If you are using a different server, consult the Release Notes and FAQs for known problems and workarounds. For detailed information about the supported servers and Java EE platform, see the Release Notes.

You can also use ICEfaces with this tutorial. ICEfaces is an integrated Ajax application framework that enables Java EE application developers to easily create and deploy thin-client rich Internet applications (RIA) in pure Java. To take advantage of ICEfaces functionality, download the ICEfaces Project Integration plugin in the NetBeans UpDate Center (Tools > Plugins), and consult the Woodstock to ICEfaces Porting Guide for information on porting Woodstock applications to ICEfaces.

Designing the Home Page

You begin by building a home page that includes the Tree component and the trip database table. The following figure shows the page.

1. Create a new Visual Web JSF application project, name it DatabaseTree, and enable the Visual Web JavaServer Faces framework.

2. From the Woodstock Basic section of the Palette, drag a Tree component onto the Page, type Travel Information, and press Enter. In the Properties window, set the id property to displayTree and the clientSide property to True.

   When clientSide is True, every child node (expanded or not) is sent to the client, but is not made visible unless the parent node is expanded. When clientSide is False, only the child nodes of the expanded parent nodes are rendered.

3. Select Tree Node 1, right-click, and choose Delete from the pop-up menu.

   For this application, you do not need the initial tree node that the IDE creates because you are populating the tree programmatically. If you do not remove the node, the values set in the JSP tag attributes take precedence over the runtime settings, and the page displays the node.
4. Right-click the Tree component an choose Add Binding Attribute.
5. Drag a Message Group component from the Palette onto an out-of-the-way place on the page, such as the upper right corner of the page.

Configuring the Database

Setting up the Database

In this section, you set up the travel database and MySQL database server in the IDE.

1. Make sure that the MySQL database server is installed and running on your machine. For more information about connecting to a MySQL database, see Connecting to a MySQL Database

2. In the Services window, right-click the MySQL Server node and choose Create Database.

   The Create New Database dialog box opens.

   

3. From the New Database Name drop down list, select Sample database: travel and click OK.

   In the Services window, the travel database appears under the MySQL Server node.

   

Connecting to the Database

Next, you connect the page with a database table in the Travel data source. You then use the Query Editor to modify the SQL query used to retrieve the data so that the traveler names appear in alphabetical order and the travel dates appear in chronological order.

1. Open the Services window, expand the Databases node and verify that the Travel database is connected.

   If the jdbc node for the Travel database's badge is broken and you cannot expand the node, the IDE is not connected to the database. To connect to the travel database, right-click the jdbc node for travel and choose Connect from the pop-up menu.

2. Expand the jdbc node for the Travel database, then expand the Tables node as seen in the following figure.

   

3. Drag the trip node onto the Visual Designer.

   The Navigator window shows a tripDataProvider node in the Page1 section and a tripRowSet node in the SessionBean1 section.

4. In the Navigator window, expand the SessionBean1 node, right-click the tripRowSet node, and choose Edit SQL Statement.

   The Query Editor appears in the editing area, with a trip table diagram.

5. From the Services window, drag the Travel > Tables > person node and drop it next to the trip table diagram in the Query Editor, as shown in the figure below.

   Another table diagram appears next to the first diagram.
6. In the person table, clear the checkbox for personid.

7. In the Design Grid of the Query Editor, find the name row for the person table. Click in the Sort Type cell and choose Ascending from the drop-down list.

   This action sorts the names in the database table alphabetically by last name.

8. Find the depdate row for the trip table. Click in the Sort Type cell and choose Ascending from the drop-down list.

   This action sorts the trip dates from earliest date to latest date. The following figure shows the Query Editor.

   

Building the Tree from the Database Table

Now you add a request bean property to store information for use by both pages in the application. You then add code to the prerender() method to dynamically build the Tree component from the TRIP and PERSON database tables.

1. Open Page1 so that the Navigator window is visible. In the Navigator window, right-click the RequestBean1 node and choose Edit Java Source.

2. Under the constructor public class RequestBean1 extends AbstractRequestBean, declare the property as follows:

   private Integer personId;

3. Right-click in the Java Editor and select Refactor > Encapsulate Fields.
4. In the Encapsulate Fields dialog, check the boxes to create getter and setter methods as shown in the figure below. Make sure that the variable declaration for field visibility is private and accessor visibility public, and click Refactor.
   

5. Open Page1 in the Java Editor and scroll to the prerender method. Replace the body of the prerender method with the following code shown in bold:

   Code Sample 1: prerender Method for Page1

   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); } }

   
   This code reads the trip records, which are ordered by the personId. For every personId, the code creates a new level-one node in the Tree. The code then creates a level-two node (nested node) for every trip associated with that personId. Finally, the code binds the second-level trip node to the tripNode_action method, which you create later in this section.
6. Right-click in the source and choose Fix Imports from the popup menu to fix the class not found errors. In the Fix All Imports dialog box, ensure that com.sun.webui.jsf.component.TreeNode appears in the TreeNode field and java.util.List appears in the List field. Click OK.

7. Run the project.

   The web browser opens and displays a Tree component with each first-level node showing the name of a person, as shown in the following figure. Expand a node to show the travel dates for that person. Note that the names appear alphabetically by last name and the dates appear in chronological order, as shown in the following figure. In the next section, you add code to navigate to a second page when the user clicks a trip node. The second page shows the details for the trip that the user selected.

   

Adding the Detail Page

Here you add a second page to the application, as shown in the following figure. This page uses a Property Sheet component to dynamically show the details of the trip that the user selected on the first page.

1. Open the Projects window, right-click the Web Pages node and choose New > Visual Web JSF Page from the pop-up menu. Name the new page Trip.

2. Open the Services Window and drag the Tables > trip node onto the Visual Designer for the Trip page.

   The Add New Data Provider dialog box appears.

3. In the Add New Data Provider dialog box, select Create tripRowSet1 in SessionBean1, as seen in the following figure. Click OK.

   

   The Navigator window shows a tripDataProvider node in the Trip section and a tripRowSet1 node in the SessionBean1 section.

4. In the Navigator Window, right-click the tripRowSet1 node and choose Edit SQL Statement.

5. In the Design Grid of the Query Editor, right-click any cell in the TRIPID row and choose Add Query Criteria. In the dialog box, set the Comparison drop-down list to =Equals and select the Parameter radio button. Click OK.

   You see =? in the Criteria column for TRIPID, which adds the following WHERE clause in the SQL query.

   WHERE trip.tripid = ? 

6. Open the Trip Page in the Visual Designer. From the Woodstock Basic section of the Palette, drag a Hyperlink component on the page, type Home, and press Enter.

7. In the Properties window for the Hyperlink component, click the ellipsis button for the action property, select hyperlink1_action from the drop-down list, and click OK.

   The IDE adds the hyperlink1_action event handler to the Java source.
8. Right-click the Hyperlink component and choose Add Binding Attribute.
9. Drag a Message Group component from the Palette to the page and place it to the right of the Hyperlink component.

10. From the Woodstock Layout section of the Palette, drag a Property Sheet component onto the page. Place it below the Hyperlink component.

    The Property Sheet component provides a container for laying out the trip information. The Property Sheet component contains a Property Sheet Section, which in turn contains a Property component.

11. Select Property Sheet Section 1. In the Properties window, set the label property to Trip Details.

    Note: If the project source level is set to 1.4, the property sheet label is not updated after you change it in the Properties window.
12. In the Navigator window, expand propertySheet1 > section1 and then select the property1 node. In the Properties window, set the label property to Departure Date: and press Enter.
13. In the Navigator window, select section1, right-click, and choose Add Property from the pop-up menu. In the Properties window, set the label property to Departure City: and press Enter.

14. Drag a Static Text component from the Palette and drop it on the property1 node in the Navigator window.

    The Static Text becomes a subnode of property1. The Static Text also appears in the Visual Designer.
15. Right-click the Static Text component and choose Add Binding Attribute.

16. Right-click the Static Text component and choose Bind to Data from the pop-up menu. If necessary, click the Bind to Data Provider tab to bring that tab to the front. In the dialog box, select trip.depdate in the Data field, as shown in the following figure, and click OK.

    The current date appears in the Static Text component in the Visual Designer.

    
17. Add a Static Text component to property2. Bind the Static Text to trip.depcity.
18. Right-click the Static Text component and choose Add Binding Attribute.

Adding Code

Here you add code so that the Trip page can get the tripid stored in Page1 and Page1 can get the personid stored in the Trip page.

1. Open the Trip page in the Java Editor and scroll to the prerender method. Add the following code (shown in bold) so that the method gets the tripId that was stored in Page1.

   Code Sample 2: prerender Method for Trip page

   public void prerender() { // Get the person id from the request parameters String parmTripId = (String) getExternalContext().getRequestParameterMap().get("tripId"); if (parmTripId != null) { Integer tripId = new Integer(parmTripId); try { getSessionBean1().getTripRowSet1().setObject(1, tripId); tripDataProvider1.refresh(); } catch (Exception e) { error("Cannot display trip " + tripId); log("Cannot display trip " + tripId, e); } }else { error("No trip id specified."); } }

   
   The setObject method sets the trip query's first argument to the tripId. That is, the method replaces the ? in the query with the tripId. This query only has one argument so you only have to call setObject once. The call to tripDataProvider1.refresh() calls CachedRowSet.release() and resets the CachedRowSetDataProvider's cursor. It does not execute the CachesRowSet at this time.

2. Scroll to the hyperlink1_action method. Add the following code (shown in bold) to pass the personId to Page1:

   Code Sample 3: hyperlink1_action Method for Trip Page

   public String hyperlink1_action() { getRequestBean1().setPersonId( (Integer)tripDataProvider1.getValue("trip.personid")); return null; }

Defining Page Navigation

Finally, you specify the navigation from the Tree nodes on Page1 to the Trip page.

1. Right-click anywhere in the Design view of the Visual Designer and choose Page Navigation.
2. Click the connector port on the Page1.jsp icon and drag a connector to the Trip.jsp icon.

3. Expand the Trip.jsp icon and drag a connector from the Hyperlink component to the Page1.jsp icon. The following figure shows the page navigation setup.

   

4. Run the application. On the Home page, expand an traveler name and click a trip date.

   The Trip page opens with details for that trip, as shown in the following figure.

   
5. On the Trip page, click the Home link. Note that on the Home page, the first-level node of the last trip you selected is still expanded.
6. Continue exploring the application by expanding and contracting the first-level Tree nodes and clicking the trip dates.

Doing More: Binding Action Methods to Tree Nodes

If you are using the JavaServer Faces 1.2 Tree component (that is, the Java EE Version setting for your project is the Java EE 5 platform), then you can bind action methods to the tree nodes, and, in the action method, call the Tree component's getSelected() method to determine which node was clicked, as illustrated in the following steps.

1. Add a tripId property to the Request Bean of type Integer.
2. Right-click in the Source Editor and choose Refactor > Encapsulate Fields.
3. Add getter and setter methods for tripId and click OK.
4. In the Navigator window, expand Page1 > html1 > body1, right click form1 and choose Add Binding Attribute.

5. Add the following method to the Java source for Page1:

   Code Sample 4: tripNode_action Method for Page1

   public String tripNode_action() { // Get the id of the currently selected tree node String nodeId = displayTree.getSelected(); // Find the tree node component with the given id TreeNode selectedNode = (TreeNode) this.getForm1().findComponentById(nodeId); try { // Node's id property is composed of "trip" plus the trip id // Extract the trip id and save it for the next page Integer tripId = Integer.valueOf(selectedNode.getId().substring(4)); getRequestBean1().setTripId(tripId); } catch (Exception e) { error("Can't convert node id to Integer: " + selectedNode.getId().substring(4)); return null; } return "case1"; }

7. In the page 1 prerender method, replace the following code with the code in Code Sample 5.

        tripNode.setUrl("/faces/Trip.jsp?tripId=" +
                   tripDataProvider.getValue("TRIP.TRIPID").toString());  

   Code Sample 5: Tweaking the prerender Method

   ExpressionFactory exFactory = getApplication().getExpressionFactory(); ELContext elContext = getFacesContext().getELContext(); tripNode.setActionExpression( exFactory.createMethodExpression( elContext, "#{Page1.tripNode_action}", String.class, new Class<?>[0]));

8. Press Alt-Shift-F to fix imports.

9. In the Trip page prerender() method, replace the body with the following code:

   Code Sample 6: prerender Method for Trip Page

   public void prerender() { Integer tripId = getRequestBean1().getTripId(); try { getSessionBean1().getTripRowSet1().setObject(1, tripId); tripDataProvider1.refresh(); } catch (Exception e) { error("Cannot display trip " + tripId); log("Cannot display trip " + tripId, e); } }

10. Run the application.

A Note About the Selection of Tree Nodes

If your project is a J2EE 1.4 project, here are some things you should know about the selection of Tree nodes:

• The JavaServer Faces 1.1 Tree component cannot use the getSelected method or the getCookieSelectedTreeNode method to determine which node was selected. If users have their browser cookies turned off, these methods will not return the correct values. Also, for browsers with the cookies turned on, the cookie might return the wrong value the first time the user visits a page and clicks a node. If there are leftover cookies from a previous visit, the previously selected value might be returned. Because the JavaServer Faces 1.2 version of the Tree component does not use cookies to save the selected value, this is not an issue for the 1.2 version.
• The highlighting of Tree nodes is not cleared between sessions. If you run the program in this tutorial more than once, the node that was selected in the last session is highlighted in the new session when the page first opens. This problem is due to the use of cookies to transmit the selected node ID.

Summary

In this tutorial, you built a tree structure from data in a database. You built a two-page application, the first page of which included a Tree component. You populated the first-level nodes in the Tree with names from a database, and the second-level nodes with the trips for that person. You linked each trip on the first page to a second page, which displayed the details for that trip.

See Also

• Using Databound Components to Access a Database
• Performing Inserts, Updates, and Deletes
• Connecting to a MySQL Database
• Java Web Application Learning Trail

---

Send Us Your Feedback