Sample 26032: How to Create a JSP TreeView
 |  |  |  |  |  |
Overview
The TreeView is a TransformationBeanTM 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:
Here is what a default TreeView looks like the following after you expand the nodes:
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:
- Add the following styles in the <head> section of your JSP file:
- Edit your TreeView tag to set new style names. Add the following lines of scriptlet code inside the TreeView tag:
<%@page import="com.sas.servlet.tbeans.StyleInfo" %>
<%@page import="com.sas.servlet.tbeans.models.TreeNodeInterface" %>
<%@page import="com.sas.servlet.tbeans.html.TreeView" %>
|
<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>
|
<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:
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:
- Edit your TreeView tag to set new image names. Add the following lines of scriptlet code inside the TreeView tag:
<%@page import="com.sas.servlet.tbeans.models.TreeNodeInterface" %>
<%@page import="com.sas.servlet.tbeans.html.TreeView" %>
|
<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:
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:
- Add the following scriptlet code inside your TreeView tag to expand nodes:
- Add the following scriptlet code inside your TreeView tag to select nodes:
- The resulting TreeView tag would look something like this:
<%@page import="com.sas.servlet.tbeans.models.TreeNodeInterface" %>
<%@page import="com.sas.servlet.tbeans.html.TreeView" %>
|
<%
// 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 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:
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.
These sample files and code examples are provided by SAS Institute Inc. "as is" without warranty of any kind, either express or implied, including but not limited to the implied warranties of merchantability and fitness for a particular purpose. Recipients acknowledge and agree that SAS Institute shall not be liable for any damages whatsoever arising out of their use of this material. In addition, SAS Institute will provide no support for the materials contained herein.
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>
|
These sample files and code examples are provided by SAS Institute Inc. "as is" without warranty of any kind, either express or implied, including but not limited to the implied warranties of merchantability and fitness for a particular purpose. Recipients acknowledge and agree that SAS Institute shall not be liable for any damages whatsoever arising out of their use of this material. In addition, SAS Institute will provide no support for the materials contained herein.
Default TreeView
TreeView with custom styles
TreeView with custom images
Expanded TreeView
This sample shows how to create and render a simple JSP TreeView.
| Type: | Sample |
| Date Modified: | 2008-08-29 14:52:11 |
| Date Created: | 2006-02-17 12:32:25 |
Operating System and Release Information
| Product Family | Product | Host | Product Release | SAS Release | ||
| 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 | ||||