26033 - How to Create a JSP TreeView with Custom Tags

Sample 26033: How to Create a JSP TreeView with Custom Tags

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 scriplet. 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.

These steps can all be done inside of a custom tag.

After you expand the nodes, a default TreeView looks like the following:

TreeView

This sample shows how to create and render a JSP TreeView by using custom tags. The code shown on the Full Code tab will create a TreeView with a static model using custom tags. The code does not contain the customizations shown below.

Customizations

This sample contains the following customizations:

Customizing the Styles by Changing Syle Classess
Setting a Link on a Node
Setting the Image on a Node
Expanding a Node

This is what your TreeView would look like if you applied all of the customizations:

TreeView with customizations

Change Style Classes

You can change the styles of the components in the TreeView in order to get a different look. To change the styles by using custom tags, perform these tasks:

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;
       cursor: default;
    }

    .MyTreeSelected {
        font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        font-size: x-small;
        background: navy;
        color: orange;
        cursor: default;
    }
    </style>

Edit your TreeView tag to set new style names. Immediately before the first TreeNode tag, add the following lines of code (shown in bold) inside of the TreeView tag :

<sas:TreeView id="tagTreeView" nodeLoading="FULL"
              selectionMode="MULTIPLE_SELECTION" selectedNode="leaf21"
              rootNodeVisible="true">

   <sas:StyleMapKey key="TREEVIEW_TEXT" classid="MyTreeText"/>
   <sas:StyleMapKey key="TREEVIEW_SELECTED" classid="MyTreeSelected"/>

    <sas:TreeNode name="RootNode" text="Root Node">
        <sas:TreeNode name="SubRoot1" text="Sub Root 1">
            <sas:TreeNode name="leaf11" text="Leaf 11"/>
            <sas:TreeNode name="leaf12" text="Leaf 12"/>
            <sas:TreeNode name="subroot13" text="Sub Root 13">
                <sas:TreeNode name="leaf131" text="Leaf 131"/>
                <sas:TreeNode name="leaf132" text="Leaf 132"/>
            </sas:TreeNode>
        </sas:TreeNode>
        <sas:TreeNode name="subroot2" text="Sub Root 2">
            <sas:TreeNode name="leaf21" text="Leaf 21"/>
            <sas:TreeNode name="leaf22" text="Leaf 22"/>
        </sas:TreeNode>
    </sas:TreeNode>
</sas:TreeView>

Set a Link on a Node

You might want to add links to different nodes of your tree. To add a link to a node in the TreeView using custom tags, edit your TreeNode tag to add a URL. Modify the following line of code inside the TreeView tag:

<sas:TreeNode name="leaf21" text="Leaf 21"  

URL="http://www.sas.com"/>

Set the Image on a Node

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 using custom tags, edit your TreeNode tag to set a new image name. Modify the following line of code inside the TreeView tag:

<sas:TreeNode name="leaf11" text="Leaf 11" 

defaultImage="MultiplyBlack.gif"/>

Expand a Node

You might want to render your TreeView with a node initially expanded. To expand a node in the TreeView using custom tags, edit your TreeNode tag to expand that node. Modify the following line of code inside the TreeView tag:

<sas:TreeNode name="SubRoot1" text="Sub Root 1" 

expanded="true"/>

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 template is required.
Create a new jsp page named treeView.jsp. Replace the contents of the new jsp page with the code below.
Execute the jsp page 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 treeView.jsp


<%@ taglib uri="http://www.sas.com/taglib/sas" prefix="sas" %>
<%@ page pageEncoding="UTF-8"%>

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

<body>

<sas:TreeView id="tagTreeView" nodeLoading="FULL"
              selectionMode="MULTIPLE_SELECTION" selectedNode="leaf21"
              rootNodeVisible="true">
    <sas:TreeNode name="RootNode" text="Root Node">
        <sas:TreeNode name="SubRoot1" text="Sub Root 1">
            <sas:TreeNode name="leaf11" text="Leaf 11"/>
            <sas:TreeNode name="leaf12" text="Leaf 12"/>
            <sas:TreeNode name="subroot13" text="Sub Root 13">
                <sas:TreeNode name="leaf131" text="Leaf 131"/>
                <sas:TreeNode name="leaf132" text="Leaf 132"/>
            </sas:TreeNode>
        </sas:TreeNode>
        <sas:TreeNode name="subroot2" text="Sub Root 2">
            <sas:TreeNode name="leaf21" text="Leaf 21"/>
            <sas:TreeNode name="leaf22" text="Leaf 22"/>
        </sas:TreeNode>
    </sas:TreeNode>
</sas:TreeView>

</body>
</html>

Code for treeView.jsp with customizations included


<%@ taglib uri="http://www.sas.com/taglib/sas" prefix="sas" %>
<%@ page pageEncoding="UTF-8"%>

<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;
       cursor: default;
    }
    .MyTreeSelected {
        font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        font-size: x-small;
        background: navy;
        color: orange;
        cursor: default;
    }
    </style>
</head>

<body>

<sas:TreeView id="tagTreeView" nodeLoading="FULL"
              selectionMode="MULTIPLE_SELECTION" selectedNode="leaf21"
              rootNodeVisible="true">
   <sas:StyleMapKey key="TREEVIEW_TEXT" classid="MyTreeText"/>
   <sas:StyleMapKey key="TREEVIEW_SELECTED" classid="MyTreeSelected"/>                           
    <sas:TreeNode name="RootNode" text="Root Node">
        <sas:TreeNode name="SubRoot1" text="Sub Root 1" expanded="true">
            <sas:TreeNode name="leaf11" text="Leaf 11" defaultImage="MultiplyBlack.gif"/>
            <sas:TreeNode name="leaf12" text="Leaf 12"/>
            <sas:TreeNode name="subroot13" text="Sub Root 13">
                <sas:TreeNode name="leaf131" text="Leaf 131"/>
                <sas:TreeNode name="leaf132" text="Leaf 132"/>
            </sas:TreeNode>
        </sas:TreeNode>
        <sas:TreeNode name="subroot2" text="Sub Root 2">
            <sas:TreeNode name="leaf21" text="Leaf 21" URL="http://www.sas.com"/>
            <sas:TreeNode name="leaf22" text="Leaf 22"/>
        </sas:TreeNode>
    </sas:TreeNode>
</sas:TreeView>

</body>
</html>