26027 - How to Create a JSP TreeListSelector

Sample 26027: How to Create a JSP TreeListSelector

Overview

The TreeListSelector is a TransformationBean^TM that generates the appropriate HTML 4.0 and JavaScript for creating a tree-to-list selector. The TreeListSelector enables you to move single or multiple items between the tree and list and submit the items that are selected on the target list.

Here are the steps for creating a simple TreeListSelector:

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

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:

Setting a target model
Setting additional parameters and retrieving selections

A default TreeListSelector looks like the following:

TreeListSelector

Setting a target model

You might want to set your own target model instead of using the default target model that is created from your source model.

Create a new TreeModel that contains nodes with the same names as the nodes on the source model.

Add the following code to your JSP file before you write out the selector.

<%
TreeNode targetRootNode1 = new TreeNode("TargetRootNode", "Root Node", "rootnode");
TreeNode leaf11_target = new TreeNode("leaf11", "Leaf 11", "leaf11");
TreeNode leaf12_target = new TreeNode("leaf12", "Leaf 12", "leaf12");
targetRootNode1.add(leaf11_target);
targetRootNode1.add(leaf12_target);
TreeModel targetModel = new DefaultTreeModel(targetRootNode1);
dualselector.setTargetModel(targetModel);
%>

You will see your new target model in the TreeListSelector:

TreeListSelector with new target model

Setting additional parameters and retrieving selections

You might need to set some additional parameters on the TreeListSelector, such as mode and type, and you might want to know what items are selected.

To add parameters and print out the selected items, add the following code before the selector is written out:

<%
dualselector.setAdditionalParameter("mode", "process");
dualselector.setAdditionalParameter("type", "selector");
//retrieve the selected values and the additional parameters passed.
//"dualselector" is the name of the selector
String[] submittedParm = request.getParameterValues("dualselector");
if (submittedParm != null)
{
      out.println(" Selected Values:   ");
      for (int i=0; i < submittedParm.length; i++)
       {
     out.println(submittedParm[i] + "");      
     }
}
%>

You will see a list of the selected values after you move items to the target list and click submit:

TreeListSelector with selections printed

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 necessary.
Create new JSP pages using 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 defaultTree.jsp


<%@ 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); 
%>

<jsp:useBean id="dualselector" class="com.sas.servlet.tbeans.dualselector.html.TreeListSelector">
	  <jsp:setProperty name="dualselector" property="name" value="dualselector" />        
</jsp:useBean>

<%
	TreeModel model2 = (TreeModel)session.getAttribute("model"); 
	dualselector.setModel(model2); 
	dualselector.setResponse(response);
	dualselector.setRequest(request);
	dualselector.write(out);
%>
</body>
</html>

Code for customization - Setting a target model


<%@ 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); 
%>

<jsp:useBean id="dualselector" class="com.sas.servlet.tbeans.dualselector.html.TreeListSelector">
	  <jsp:setProperty name="dualselector" property="name" value="dualselector" />        
</jsp:useBean>

<%
	TreeNode targetRootNode1 = new TreeNode("TargetRootNode", "Root Node", "rootnode");
	TreeNode leaf11_target = new TreeNode("leaf11", "Leaf 11", "leaf11");
	TreeNode leaf12_target = new TreeNode("leaf12", "Leaf 12", "leaf12");
	targetRootNode1.add(leaf11_target);
	targetRootNode1.add(leaf12_target);
	TreeModel targetModel = new DefaultTreeModel(targetRootNode1);
	dualselector.setTargetModel(targetModel);
	
	TreeModel model2 = (TreeModel)session.getAttribute("model"); 
	dualselector.setModel(model2); 
	dualselector.setResponse(response);
	dualselector.setRequest(request);
	dualselector.write(out);
%>
</body>
</html>

Code for customization - Setting additional parameters and retrieving selections


<%@ 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); 
%>

<jsp:useBean id="dualselector" class="com.sas.servlet.tbeans.dualselector.html.TreeListSelector">
	  <jsp:setProperty name="dualselector" property="name" value="dualselector" />        
</jsp:useBean>

<%
	dualselector.setAdditionalParameter("mode", "process");
	dualselector.setAdditionalParameter("type", "selector");
	//retrieve the selected values and the additional parameters passed.
	//"dualselector" is the name of the selector
	String[] submittedParm = request.getParameterValues("dualselector");
	if (submittedParm != null)
	{
	      out.println("<i> Selected Values: </i> <br> ");
	      for (int i=0; i < submittedParm.length; i++)
	       {
	     out.println(submittedParm[i] + "<br>");      
	     }
	}

	TreeModel model2 = (TreeModel)session.getAttribute("model"); 
	dualselector.setModel(model2); 
	dualselector.setResponse(response);
	dualselector.setRequest(request);
	dualselector.write(out);
%>
</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.

Date Modified:	2008-08-25 15:04:57
Date Created:	2006-02-09 22:46:11

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
		Microsoft Windows Server 2003 Standard Edition	3.2		9.1 TS1M3 SP4
		Microsoft Windows XP Professional	3.2		9.1 TS1M3 SP4
		Windows Vista	3.2		9.1 TS1M3 SP4

Support