WebTree Getting Started

The WebTree project's whole purpose is to provide a simple way for developers to use a tree control in a web page.


The first step is testing your deployment environment by deploying the standard package. This is analagous to the "Hello, World!" example, it verifies you have all the pieces necessary to continue successfully.

Basically, you need to deploy the webtree.war file available from the dist/ directory into your application server. For Tomcat, this simply means putting the webtree.war in your webapps/ directory and restarting the server. For more detailed instructions, see the Installation Guide.

Verify Deployment

The next step is to verify that our installation from the last step worked. You should access our simple tree page with a URL like http://<YOUR_SERVER>:<YOUR_PORT>/webtree/examples/simple/index.jsp

Accessing the url above will bring up a very simple HTML based tree.

Modify Data Model

If you have successfully installed and verified deployment by bringing up the simple tree, you can now start modifying the data for this tree. If you refer back to the UML diagrams, you'll notice that we have broken apart the data model from the rest of the entities, which means as long as we conform to the TreeData interface, we can plug in any dataset we choose.

TreeData Customization

The simplest TreeData implementation is called SimpleData, and it uses SimpleNode as its basic unit of information.

Let's populate the SimpleData class with our own data. The hierarchial data we will use looks like this:


This is very contrived, but good for an example. The root node has 3 children A, B, and C. In addition, the node named B also has a child, B1.

Constructing this data structure using SimpleNode would look like this:

	// create node A
	SimpleNode nodeA = new SimpleNode("A","A",null);
	// create node B, and its subnode
	SimpleNode nodeBSub = new SimpleNode("B1","B1",null);
	SimpleNode nodeB = new SimpleNode("B","B",nodeBSub);
	// create node C
	SimpleNode nodeC = new SimpleNode("C","C",null);
	// create root, which has a list of children
	SimpleNode root = new SimpleNode("root","Root",new SimpleNode[] {nodeA,nodeB,nodeC});
	SimpleData data = new SimpleData(root);  	

Alright, a little explanation on the sytax of the above code. A SimpleNode takes the id, name, and children as it constructor parameters. Id is a unique identifier, (without spaces) that identifies the node. The second parameter, name, is what is shown to the user when the tree is rendered. And the last argument is the children that should be attached to the node. The last argument can either be an array of children or just a single child.


Now, let's go in and modify the data in the simple example included in the distribution. Open the jsp file examples/simple/simple.jsp. NOTE: If your app server does not explode the webtree.war archive (as Tomcat does), you'll have to manually unjar the war file, modify the file, then war the files back up.

Open simple.jsp, and scroll down to a few lines from the top where you can see the SimpleNode being defined. Play around, modify a few of the node Ids and labels. Add a couple of subnodes, rearrange the order of the children. All you have to do to test your changes is refresh your browser on the simple.jsp page.

Well, that's a very brief introduction to the WebTree project. We have included standard with the distribution implementations for modeling trees on XML files and the file system, so if you need help implementing more advanced data stores, it is always good to look at that source.

Where To Go From Here

If you have just finished this tutorial, and you want more advanced help, see the javadocs as well as the full documentation.

There is a more complex tree example available, point your browser at the url, http://<YOUR_SERVER>:<YOUR_PORT>/webtree/examples/html/index.jsp