26026 - How to Create a JSP DualTreeSelector

Sample 26026: How to Create a JSP DualTreeSelector

Overview

The DualTreeSelector is a TransformationBean^TM that generates the appropriate HTML 4.0 and JavaScript for creating a tree-to-tree selector. A DualTreeSelector uses two tree views that enable you to move single or multiple items between the tree views and submit the selected item(s) that are on the target tree view.

Here are the steps for creating a simple DualTreeSelector:

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

This sample shows how to create and render a JSP DualTreeSelector. The Full Code tab contains the code to create a default example, as well as the full code for the customizations shown 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:

Adding validation before an item is moved
Using a user-defined form

A default DualTreeSelector looks like the following:

DualTreeSelector

Adding validation before an item is moved

You might want to add validation to your DualTreeSelector. For example, you might want to run a method that performs validation when a user tries to move an item to the target tree. To do this, you would set the JavaScript function that is called before a user moves an item to the target tree. This is called the preTargetTrigger. Here is more information about the different triggers:

preUpTrigger and postUpTrigger are run before and after an item is moved up in the target tree with the up arrow below the target tree.
preDownTrigger and postDownTrigger are run before and after an item is moved down in the target tree with the down arrow below the target tree.
preSourceTrigger and postSourceTrigger are run before and after an item is moved from the target tree to the source tree.
preTargetTrigger and postTargetTrigger are run before and after an item is moved from the source tree to the target tree.

To set the JavaScript functions that are executed before or after different actions in the DualListSelector, follow these steps:

After the jsp:useBean tag, add the following scriptlet code to set the following properties. The values being set here are JavaScript function names, which must be implemented in your JSP code or in a separate .js file.

<%
dualselector.setPreUpTrigger("preUp()");
dualselector.setPreDownTrigger("preDown()");
dualselector.setPostDownTrigger("postDown()");
dualselector.setPostUpTrigger("postUp()"); 
dualselector.setPreSourceTrigger("preSource()");
dualselector.setPreTargetTrigger("preTarget()");
dualselector.setPostSourceTrigger("postSource()");
dualselector.setPostTargetTrigger("postTarget()");
%>

Add the following JavaScript function definitions to the JSP page. These JavaScript function definitions can go after your scriptlet code, before or after the body and HTML tags, or in a separate .js file.

<script>
  function preUp()
  {
   alert("pre up");
   return true;
  }
  function preDown()
  {
    alert("pre down");
    return true;
  }
  function postUp()
  {
   alert("post up");
  }
  function postDown()
  {
    alert("post down");
  }
  function preSource()
  {
    alert("pre source");
    return true;
  }
  function postSource() 
  {
    alert("post source");
  }
  function preTarget()
  {
    alert("pre target");
    return true;
  }
  function postTarget()
  {
    alert("post target");
  }
</script>

You can see the validation working in the following screen capture. When you select an item in the source tree and click the right move arrow, you will see the alert pop up that you set in preTarget():

DualTreeSelector with validation

Using a user-defined form

You might want to use your own form for the DualTreeSelector. This would enable you to execute your own actions upon submitting the form.

You create your own form by using the Form TransformationBean in the JSP page before the selector is written out. Set formEnabled to false and set the form object that you created onto the selector.

<%
com.sas.servlet.tbeans.form.html.Form yourForm = new com.sas.servlet.tbeans.form.html.Form();
yourForm.setName("myFormName");
yourForm.writeHeader(out); 
//write other form elements, tbeans, etc.. 
dualselector.setFormEnabled(false);
dualselector.setFormObject(yourForm);
//write the dualselector here
yourForm.writeFooter(out); 
//since the form object on the dualselector is not enabled, 
//user is responsible for writing the footer.
%>

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 DualTreeSelector


<%@ 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.DualTreeSelector">
	  <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: Adding validation


<%@ 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"%>

<script>
  function preUp()
  {
   alert("pre up");
   return true;
  }
  function preDown()
  {
    alert("pre down");
    return true;
  }
  function postUp()
  {
   alert("post up");
  }
  function postDown()
  {
    alert("post down");
  }
  function preSource()
  {
    alert("pre source");
    return true;
  }
  function postSource() 
  {
    alert("post source");
  }
  function preTarget()
  {
    alert("pre target");
    return true;
  }
  function postTarget()
  {
    alert("post target");
  }
</script>

<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.DualTreeSelector">
	  <jsp:setProperty name="dualselector" property="name" value="dualselector" />        
</jsp:useBean>

<%
	dualselector.setPreUpTrigger("preUp()");
	dualselector.setPreDownTrigger("preDown()");
	dualselector.setPostDownTrigger("postDown()");
	dualselector.setPostUpTrigger("postUp()"); 
	dualselector.setPreSourceTrigger("preSource()");
	dualselector.setPreTargetTrigger("preTarget()");
	dualselector.setPostSourceTrigger("postSource()");
	dualselector.setPostTargetTrigger("postTarget()");

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

Code for customization: Using user-defined forms


<%@ 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"%>
<%@page import="com.sas.servlet.tbeans.form.html.Form"%>

<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.DualTreeSelector">
	  <jsp:setProperty name="dualselector" property="name" value="dualselector" />        
</jsp:useBean>

<%
	Form yourForm = new Form();
	yourForm.setName("myFormName");
	yourForm.writeHeader(out); 
	//write other form elements, tbeans, etc.. 
	dualselector.setFormEnabled(false);
	dualselector.setFormObject(yourForm);
	//write the dualselector here
	yourForm.writeFooter(out); 
	//since the form object on the dualselector is not enabled, 
	//user is responsible for writing the footer.

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

</body>
</html>