26032 - How to Create a JSP TreeView

Sample 26032: How to Create a JSP TreeView

Overview

The TreeView is a TransformationBean^TM that generates the appropriate HTML 4.0 and JavaScript in order to represent a tree. You can use TreeView beans in a Java servlet or in a JSP scriptlet. The TreeView uses a javax.swing.tree.TreeModel, which should contain TreeNode tbeans for best performance. Other object types are supported in the TreeModel by transforming them into tbean TreeNodes, with the default transform simply setting the tbean TreeNode text to the result of the calling toString() on the object in the model.

Here are the steps for creating a simple TreeView:

Create a TreeModel.
Create a TreeView.
Set the model on the TreeView.
Render the TreeView.

This sample shows how to create and render a JSP TreeView. The Full Code tab contains both the default TreeView code, and also the full code for the customizations below.

The best practice for a JSP Web application is a JSP architecture that uses servlets and .jsp files in order to dynamically deliver content. JSP, Model 2 uses the Model-View-Controller paradigm. For simplicity, this sample does not use the JSP Model 2 approach.

Customizations

This example contains the following customizations:

Changing style classes
Customizing the images
Expanding and selecting nodes

Here is what a default TreeView looks like the following after you expand the nodes:

TreeView

Changing style classes

You might want to change the styles of the components in the TreeView to get a different look.

To change the styles, you should perform these tasks:

Add the following import statements to the top of your JSP file:

<%@page import="com.sas.servlet.tbeans.StyleInfo" %>
<%@page import="com.sas.servlet.tbeans.models.TreeNodeInterface" %>
<%@page import="com.sas.servlet.tbeans.html.TreeView" %>

Add the following styles in the <head> section of your JSP file:

<style>
    .MyTreeText {
        font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        font-size: x-small;
        color: blue;
        padding-left: 5;
        cursor: default;
    }
    .MyTreeSelected {
        font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        font-size: x-small;
        background: navy;
        color: orange;
        padding-left: 5;
        cursor: default;
    }
    .MyTreeNodeText {
        font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        font-size: x-small;
        font-style: italic;
        color: orange;
        padding-left: 5;
        cursor: default;
    }
    .MyTreeNodeSelected {
        font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        font-size: x-small;
        font-style: italic;
        background: red;
        color: yellow;
        padding-left: 5;
        cursor: default;
    }
    </style>

Edit your TreeView tag to set new style names. Add the following lines of scriptlet code inside the TreeView tag:

<sas:TreeView id="treeView1" model="model"
    nodeLoading="PROGRESSIVE" 
    selectionMode="SINGLE_SELECTION" 
    scope="session" >
    
	<%
	    // Set some styles for entire tree view
	    treeView1.getStyleMap().put( TreeView.TREEVIEW_TEXT,
					 new StyleInfo("MyTreeText") );
	    treeView1.getStyleMap().put( TreeView.TREEVIEW_SELECTED,
					 new StyleInfo("MyTreeSelected") );
	%>
    
	<%
	// Set some styles for leaf 12
	TreeNodeInterface root = (TreeNodeInterface)treeView1.getModel().getRoot();
	TreeNodeInterface node = (TreeNodeInterface)root.getChildAt(0).getChildAt(1);
	node.getStyleMap().put( TreeView.TREEVIEW_TEXT,
				new StyleInfo("MyTreeNodeText") );
	node.getStyleMap().put( TreeView.TREEVIEW_SELECTED,
				new StyleInfo("MyTreeNodeSelected") );
	%>

</sas:TreeView>

Your new TreeView will look like the following when you expand the nodes:

TreeView with custom styles

Customizing the images

You might want to change the way the TreeView looks by customizing the images displayed in different nodes of the tree.

To change the images shown in the TreeView, follow these steps:

Add the following import statements to the top of your JSP file:

<%@page import="com.sas.servlet.tbeans.models.TreeNodeInterface" %>
<%@page import="com.sas.servlet.tbeans.html.TreeView" %>

Edit your TreeView tag to set new image names. Add the following lines of scriptlet code inside the TreeView tag:

<sas:TreeView id="treeView1" model="model"
    nodeLoading="PROGRESSIVE" 
    selectionMode="SINGLE_SELECTION" 
    scope="session" >
    
	<%
	// Set some images for entire tree view
	treeView1.getImageMap().put( TreeView.OPEN_FOLDER,
				 "arrow-down-default.gif");
	treeView1.getImageMap().put( TreeView.CLOSED_FOLDER,
				 "arrow-right-default.gif" );
	treeView1.getImageMap().put( TreeView.LEAF_ICON, "MultiplyBlack.gif");
	%>
	
	<%
	// Set some images for Sub Root 2
	TreeNodeInterface root = (TreeNodeInterface)treeView1.getModel().getRoot();
	TreeNodeInterface node = (TreeNodeInterface)root.getChildAt(1);
	node.setDefaultImage("arrow-right-end-default.gif");
	node.setExpandedImage("arrow-down-end-default.gif");
	%>

</sas:TreeView>

You will get a TreeView that looks like this when you expand the nodes:

TreeView with custom images

Expand and Selecting Nodes

You might want to render your TableView with certain nodes initially expanded and selected.

To expand and select nodes, you should perform these steps:

Add the following import statements to the top of your JSP file:

<%@page import="com.sas.servlet.tbeans.models.TreeNodeInterface" %>
<%@page import="com.sas.servlet.tbeans.html.TreeView" %>

Add the following scriptlet code inside your TreeView tag to expand nodes:

	<%
	// expand sub root 1
	TreeNodeInterface root = (TreeNodeInterface)treeView1.getModel().getRoot();
	TreeNodeInterface node = (TreeNodeInterface)root.getChildAt(0);
	node.setExpanded(true);

	// expand sub root 2
	node = (TreeNodeInterface)root.getChildAt(1);
	node.setExpanded(true);
	%>

Add the following scriptlet code inside your TreeView tag to select nodes:

	<%
	// select leaf 21
	treeView1.setSelectedNode("leaf21");
	%>

The resulting TreeView tag would look something like this:

<sas:TreeView id="treeView1" model="model"
    nodeLoading="PROGRESSIVE" 
    selectionMode="SINGLE_SELECTION" 
    scope="session" >
    	
	<%
	// expand sub root 1
	TreeNodeInterface root = (TreeNodeInterface)treeView1.getModel().getRoot();
	TreeNodeInterface node = (TreeNodeInterface)root.getChildAt(0);
	node.setExpanded(true);

	// expand sub root 2
	node = (TreeNodeInterface)root.getChildAt(1);
	node.setExpanded(true);
	%>

	<%
	// select leaf 21
	treeView1.setSelectedNode("leaf21");
	%>
	
</sas:TreeView>

Your new TreeView will look like the following:

TreeView with nodes initially expanded and selected

Additional Documentation

For a list of samples for common tasks, see SAS Note 32218.
The SAS AppDev Studio Developer's Site contains detailed information that will assist you when developing Web applications with SAS AppDev Studio, including an API reference and the custom tag reference for the sas tagset.

Instructions

Build a new Web application project in SAS^® AppDev Studio. No Web application template is required
Create new JSP page(s) using the code below
Execute the JSP page(s) on the test Tomcat server.

Tip: For help with building a Web application project and testing a Web application, see SAS Note 32218.

Code for default TreeView


<%@ taglib uri="http://www.sas.com/taglib/sas" prefix="sas" %>
<%@ page pageEncoding="UTF-8"%>
<%@page import="com.sas.servlet.tbeans.models.TreeNode"%>
<%@page import="javax.swing.tree.TreeModel"%>
<%@page import="javax.swing.tree.DefaultTreeModel"%>

<html>
<head>
    <link href="styles/sasComponents.css" rel="STYLESHEET" type="text/css">
</head>

<body>

<%
	TreeNode rootNode1 = new TreeNode("RootNode", "Root Node", "rootnode");
	TreeNode subRoot1 = new TreeNode("SubRoot1", "Sub Root 1", "subroot1");
	TreeNode leaf11 = new TreeNode("leaf11", "Leaf 11", "leaf11");
	TreeNode leaf12 = new TreeNode("leaf12", "Leaf 12", "leaf12");
	rootNode1.add(subRoot1);
	subRoot1.add(leaf11);
	subRoot1.add(leaf12);

	TreeNode subRoot2 = new TreeNode("subroot2", "Sub Root 2", "subroot2");
	TreeNode leaf21 = new TreeNode("leaf21","Leaf 21", "leaf21");
	TreeNode leaf22 = new TreeNode("leaf22","Leaf 22","leaf122");
	rootNode1.add(subRoot2);
	subRoot2.add(leaf21);
	subRoot2.add(leaf22);

	TreeNode subRoot13 = new TreeNode("subroot13","Sub Root 13","subroot13");
	TreeNode leaf131 = new TreeNode("leaf131","Leaf 131","leaf131");
	TreeNode leaf132 = new TreeNode("leaf132","Leaf 132","leaf132");
	subRoot1.add(subRoot13);
	subRoot13.add(leaf131);
	subRoot13.add(leaf132);
	TreeModel model = new DefaultTreeModel(rootNode1);
	session.setAttribute("model", model); 

%>

<sas:TreeView id="treeView1" model="model"
    nodeLoading="PROGRESSIVE" 
	 selectionMode="SINGLE_SELECTION" 
    scope="session" >
</sas:TreeView>

</body>
</html>

Code for customization - Customizing the Styles by Changing Style Classes


<%@ taglib uri="http://www.sas.com/taglib/sas" prefix="sas" %>
<%@ page pageEncoding="UTF-8"%>
<%@page import="com.sas.servlet.tbeans.models.TreeNode"%>
<%@page import="com.sas.servlet.tbeans.models.TreeNodeInterface" %>
<%@page import="com.sas.servlet.tbeans.html.TreeView" %>
<%@page import="com.sas.servlet.tbeans.StyleInfo" %>
<%@page import="javax.swing.tree.TreeModel"%>

<%@page import="javax.swing.tree.DefaultTreeModel"%>
<html>
<head>
    <link href="styles/sasComponents.css" rel="STYLESHEET" type="text/css">
    <style>
    .MyTreeText {
        font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        font-size: x-small;
        color: blue;
        padding-left: 5;
        cursor: default;
    }
    .MyTreeSelected {
        font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        font-size: x-small;
        background: navy;
        color: orange;
        padding-left: 5;
        cursor: default;
    }
    .MyTreeNodeText {
        font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        font-size: x-small;
        font-style: italic;
        color: orange;
        padding-left: 5;
        cursor: default;
    }
    .MyTreeNodeSelected {
        font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        font-size: x-small;
        font-style: italic;
        background: red;
        color: yellow;
        padding-left: 5;
        cursor: default;
    }
    </style>
</head>

<body>

<%
	TreeNode rootNode1 = new TreeNode("RootNode", "Root Node", "rootnode");
	TreeNode subRoot1 = new TreeNode("SubRoot1", "Sub Root 1", "subroot1");
	TreeNode leaf11 = new TreeNode("leaf11", "Leaf 11", "leaf11");
	TreeNode leaf12 = new TreeNode("leaf12", "Leaf 12", "leaf12");
	rootNode1.add(subRoot1);
	subRoot1.add(leaf11);
	subRoot1.add(leaf12);

	TreeNode subRoot2 = new TreeNode("subroot2", "Sub Root 2", "subroot2");
	TreeNode leaf21 = new TreeNode("leaf21","Leaf 21", "leaf21");
	TreeNode leaf22 = new TreeNode("leaf22","Leaf 22","leaf122");
	rootNode1.add(subRoot2);
	subRoot2.add(leaf21);
	subRoot2.add(leaf22);

	TreeNode subRoot13 = new TreeNode("subroot13","Sub Root 13","subroot13");
	TreeNode leaf131 = new TreeNode("leaf131","Leaf 131","leaf131");
	TreeNode leaf132 = new TreeNode("leaf132","Leaf 132","leaf132");
	subRoot1.add(subRoot13);
	subRoot13.add(leaf131);
	subRoot13.add(leaf132);
	TreeModel model = new DefaultTreeModel(rootNode1);
	session.setAttribute("model", model); 
%>

<sas:TreeView id="treeView1" model="model"
	nodeLoading="PROGRESSIVE" 
	selectionMode="SINGLE_SELECTION" 
	scope="session" >
    
<%
    // Set some styles for entire tree view
    treeView1.getStyleMap().put( TreeView.TREEVIEW_TEXT,
				 new StyleInfo("MyTreeText") );
    treeView1.getStyleMap().put( TreeView.TREEVIEW_SELECTED,
				 new StyleInfo("MyTreeSelected") );
%>
    
<%
	// Set some styles for leaf 12
	TreeNodeInterface root = (TreeNodeInterface)treeView1.getModel().getRoot();
	TreeNodeInterface node = (TreeNodeInterface)root.getChildAt(0).getChildAt(1);
	node.getStyleMap().put( TreeView.TREEVIEW_TEXT,
				new StyleInfo("MyTreeNodeText") );
	node.getStyleMap().put( TreeView.TREEVIEW_SELECTED,
				new StyleInfo("MyTreeNodeSelected") );
%>

</sas:TreeView>
</body>
</html>

Code for customization - Customizing the Images


<%@ taglib uri="http://www.sas.com/taglib/sas" prefix="sas" %>
<%@ page pageEncoding="UTF-8"%>
<%@page import="com.sas.servlet.tbeans.models.TreeNode"%>
<%@page import="com.sas.servlet.tbeans.models.TreeNodeInterface" %>
<%@page import="com.sas.servlet.tbeans.html.TreeView" %>
<%@page import="javax.swing.tree.TreeModel"%>
<%@page import="javax.swing.tree.DefaultTreeModel"%>

<html>
<head>
    <link href="styles/sasComponents.css" rel="STYLESHEET" type="text/css">
</head>

<body>

<%
	TreeNode rootNode1 = new TreeNode("RootNode", "Root Node", "rootnode");
	TreeNode subRoot1 = new TreeNode("SubRoot1", "Sub Root 1", "subroot1");
	TreeNode leaf11 = new TreeNode("leaf11", "Leaf 11", "leaf11");
	TreeNode leaf12 = new TreeNode("leaf12", "Leaf 12", "leaf12");
	rootNode1.add(subRoot1);
	subRoot1.add(leaf11);
	subRoot1.add(leaf12);

	TreeNode subRoot2 = new TreeNode("subroot2", "Sub Root 2", "subroot2");
	TreeNode leaf21 = new TreeNode("leaf21","Leaf 21", "leaf21");
	TreeNode leaf22 = new TreeNode("leaf22","Leaf 22","leaf122");
	rootNode1.add(subRoot2);
	subRoot2.add(leaf21);
	subRoot2.add(leaf22);

	TreeNode subRoot13 = new TreeNode("subroot13","Sub Root 13","subroot13");
	TreeNode leaf131 = new TreeNode("leaf131","Leaf 131","leaf131");
	TreeNode leaf132 = new TreeNode("leaf132","Leaf 132","leaf132");
	subRoot1.add(subRoot13);
	subRoot13.add(leaf131);
	subRoot13.add(leaf132);
	TreeModel model = new DefaultTreeModel(rootNode1);
	session.setAttribute("model", model); 

%>

<sas:TreeView id="treeView1" model="model"
    nodeLoading="PROGRESSIVE" 
	 selectionMode="SINGLE_SELECTION" 
    scope="session" >
    
<%
	// Set some images for entire tree view
	treeView1.getImageMap().put( TreeView.OPEN_FOLDER,
				 "arrow-down-default.gif");
	treeView1.getImageMap().put( TreeView.CLOSED_FOLDER,
				 "arrow-right-default.gif" );
	treeView1.getImageMap().put( TreeView.LEAF_ICON, "MultiplyBlack.gif");
%>
	
<%
	// Set some images for Sub Root 2
	TreeNodeInterface root = (TreeNodeInterface)treeView1.getModel().getRoot();
	TreeNodeInterface node = (TreeNodeInterface)root.getChildAt(1);
	node.setDefaultImage("arrow-right-end-default.gif");
	node.setExpandedImage("arrow-down-end-default.gif");
%>

</sas:TreeView>
</body>
</html>

Code for customization - Expanding and Selecting Nodes


<%@ taglib uri="http://www.sas.com/taglib/sas" prefix="sas" %>
<%@ page pageEncoding="UTF-8"%>
<%@page import="com.sas.servlet.tbeans.models.TreeNode"%>
<%@page import="com.sas.servlet.tbeans.models.TreeNodeInterface" %>
<%@page import="javax.swing.tree.TreeModel"%>
<%@page import="javax.swing.tree.DefaultTreeModel"%>

<html>
<head>
    <link href="styles/sasComponents.css" rel="STYLESHEET" type="text/css">
</head>
<body>

<%
	TreeNode rootNode1 = new TreeNode("RootNode", "Root Node", "rootnode");
	TreeNode subRoot1 = new TreeNode("SubRoot1", "Sub Root 1", "subroot1");
	TreeNode leaf11 = new TreeNode("leaf11", "Leaf 11", "leaf11");
	TreeNode leaf12 = new TreeNode("leaf12", "Leaf 12", "leaf12");
	rootNode1.add(subRoot1);
	subRoot1.add(leaf11);
	subRoot1.add(leaf12);

	TreeNode subRoot2 = new TreeNode("subroot2", "Sub Root 2", "subroot2");
	TreeNode leaf21 = new TreeNode("leaf21","Leaf 21", "leaf21");
	TreeNode leaf22 = new TreeNode("leaf22","Leaf 22","leaf122");
	rootNode1.add(subRoot2);
	subRoot2.add(leaf21);
	subRoot2.add(leaf22);

	TreeNode subRoot13 = new TreeNode("subroot13","Sub Root 13","subroot13");
	TreeNode leaf131 = new TreeNode("leaf131","Leaf 131","leaf131");
	TreeNode leaf132 = new TreeNode("leaf132","Leaf 132","leaf132");
	subRoot1.add(subRoot13);
	subRoot13.add(leaf131);
	subRoot13.add(leaf132);
	TreeModel model = new DefaultTreeModel(rootNode1);
	session.setAttribute("model", model); 
%>

<sas:TreeView id="treeView1" model="model"
    nodeLoading="PROGRESSIVE" 
	selectionMode="SINGLE_SELECTION" 
    scope="session" >
    
<%
	// expand sub root 1
	TreeNodeInterface root = (TreeNodeInterface)treeView1.getModel().getRoot();
	root.setExpanded(true);
	TreeNodeInterface node = (TreeNodeInterface)root.getChildAt(0);
	node.setExpanded(true);

	// expand sub root 2
	node = (TreeNodeInterface)root.getChildAt(1);
	node.setExpanded(true);
%>

<%
	// select leaf 21
	treeView1.setSelectedNode("leaf21");
%>

</sas:TreeView>
</body>
</html>

Date Modified:	2008-08-29 14:52:11
Date Created:	2006-02-17 12:32:25

Product Family	Product	Host	Product Release		SAS Release
Product Family	Product	Host	Starting	Ending	Starting	Ending
SAS System	SAS AppDev Studio	Microsoft Windows Server 2003 Enterprise Edition	3.2		9.1 TS1M3 SP4
		Microsoft Windows Server 2003 Datacenter Edition	3.2		9.1 TS1M3 SP4
		Microsoft Windows NT Workstation	3.2		9.1 TS1M3 SP4
		Microsoft Windows 2000 Professional	3.2		9.1 TS1M3 SP4
		Microsoft Windows 2000 Server	3.2		9.1 TS1M3 SP4
		Microsoft Windows 2000 Datacenter Server	3.2		9.1 TS1M3 SP4
		Microsoft Windows 2000 Advanced Server	3.2		9.1 TS1M3 SP4
		Microsoft® Windows® for x64	3.2		9.1 TS1M3 SP4
		Windows Vista	3.2		9.1 TS1M3 SP4
		Microsoft Windows XP Professional	3.2		9.1 TS1M3 SP4
		Microsoft Windows Server 2003 Standard Edition	3.2		9.1 TS1M3 SP4

Knowledge Base