Code Pencil » java http://www.codepencil.com Manu Mahajan`s blog Tue, 14 Apr 2009 16:15:38 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Struts2 – Dojo Dynamic Tree http://www.codepencil.com/index.php/struts2-dojo-dynamic-tree/ http://www.codepencil.com/index.php/struts2-dojo-dynamic-tree/#comments Wed, 19 Sep 2007 06:50:22 +0000 Manu Mahajan http://www.codepencil.com/?p=7 In my previous attempt at creating a tree using struts2 and dojo, I stumbled upon a roadblock. As the size of the tree grew larger the performance started deteriorating. Our tree had 500 nodes and it took about 1min 20sec for the tree to render in internet explorer 6!

So the need was to create a dynamic tree which would load nodes as and when required.

I managed to create a simple application based on the struts-blank application which demonstrates how this can be achieved. I am pasting the code here so that it can help other people who want to achieve this using struts 2.0.9.

The JSP Code

I start by creating a dynamicTree.jsp file which will paint the tree.

I will create a tree with one root node in my html page and when that node is expanded its sub nodes will be loaded. It is possible to load a tree with any number of nodes in the beginning but I am going to keep this example simple so I am starting with a single node.

For painting the tree tag and the root node I could not use the struts2 taglib as I need to use attributes for dojo widgets that are not supported by struts2. Like the attribute ‘controller’ is not supported by the tree tag and ‘isFolder’ is not supported by the treeNode tag. The next version (2.1.0) has this fixed but the latest stable version at the moment is 2.0.9.

Here is what my jsp looks like

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
  <s:head theme="ajax" debug="true"/>
<script>
 
   //Load the tree controller and extensions
  dojo.require("dojo.widget.TreeLoadingController");
  dojo.require("dojo.widget.TreeControllerExtension");
 
  dojo.addOnLoad(function() {
    //Add the extensions to the controller
    dojo.lang.mixin(dojo.widget.byId('treeController'), dojo.widget.TreeControllerExtension.prototype);
  });
 
}
</script>
 
</head>
<body>
 
<div dojoType="TreeLoadingController"
  widgetId="treeController"
  RPCUrl="tree_gettreenodes.action"></div>
 
<dojo:TreeSelector widgetId="treeSelector_contentTree"
  eventNames="select:treeSelected;"></dojo:TreeSelector>
 
<div dojoType="Tree" 
  id="contentTree" selector="treeSelector_contentTree"
  controller="treeController" toggle="fade">
 
  <div dojoType="TreeNode" title="<s:property value='#request.rootNode.name'/>"
    id="<s:property value='#request.rootNode.id'/>" isFolder="true"></div>
 
</div>
 
</body>
</html>

struts.xml

My struts.xml is pretty simple. There is one mapping to an action class which will expose methods for painting the tree and a default result for loading the jsp.

<struts>
   <constant name="struts.enable.DynamicMethodInvocation" value="false" />
   <constant name="struts.devMode" value="false" />
   <package name="default" extends="struts-default">
	<action name="tree_*" method="{1}" 
            class="com.codepencil.sandbox.tree.web.action.DynamicTreeAction">
    	    <result>/tree/dynamicTree.jsp</result>
        </action>
   </package>
</struts>

The Action Class

In the action class I need to implement a method that will be called when child nodes of a tree are requested. When the request is made dojo passes a parameter name data which contains the JSON objects of the tree and the tree node that was clicked. The parameter looks something like this.

{"node":{"widgetId":"1" isFolder=\"true","objectId":"","index":1,"isFolder":true}, "tree":{"widgetId":"contentTree","objectId":""}}

The treeLoadingController expects the server response to be a JSON array of node objects. For dealing with JSON I am using the set of Java classes available at json.org Since my needs are very basic I can make do with these simple classes. You can use any JSON library of your choice.

After this I write an action class and create a function named gettreenodes which does this job for me.

This is my action code.

package com.codepencil.sandbox.tree.web.action;
 
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.interceptor.ServletRequestAware;
import org.apache.struts2.interceptor.ServletResponseAware;
import org.apache.struts2.showcase.ajax.tree.Category;
import org.json.JSONException;
import org.json.JSONObject;
import org.json.JSONStringer;
import com.opensymphony.xwork2.ActionSupport;
 
public class DynamicTreeAction extends ActionSupport implements ServletResponseAware,ServletRequestAware {
 
    private static final long serialVersionUID = -9131739831820245692L;
    private String data;
    private HttpServletResponse response;
    private HttpServletRequest request;
 
    public String getData() {
        return data;
    }
 
    public void setData(String data) {
        this.data = data;
    }
 
    public void setServletResponse(HttpServletResponse response) {
        this.response = response;
    }
 
    public void setServletRequest(HttpServletRequest request){
        this.request = request;
    }
 
    public String gettree(){
        Category rootNode = Category.getById(1);
        request.setAttribute("rootNode", rootNode);
        return SUCCESS;
    }
 
    public String gettreenodes(){
        JSONObject jsonData,node;
        PrintWriter writer;
        try {
            jsonData = new JSONObject(data);
            node = jsonData.getJSONObject("node");
            String nodeId = node.get("widgetId").toString();
            Category category = Category.getById(Long.parseLong(nodeId));
            JSONStringer stringer = new JSONStringer();
            stringer.array();
            List<Category> children = category.getChildren();  
            for (int i=0;i<children.size();i++){
                Category childCategory = children.get(i);
                stringer.object();
                stringer.key("id");
                stringer.value(childCategory.getId());
                stringer.key("title");
                stringer.value(childCategory.getName());
                stringer.key("isFolder");
                stringer.value(childCategory.getChildren().size()>0 ? true : false);
                stringer.endObject();
            }
            stringer.endArray();
            writer = response.getWriter();
            writer.write(stringer.toString());
        } catch (JSONException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }
}

For creating the tree I am using the Category class from the struts showcase application as I was feeling too lazy to write a brand new class for this purpose. In my actual application I have some complex hibernate mappings and I load the tree node objects from the database.

Another important thing that caused me a lot of frustration is that you should always return null from an action method that handles ajax calls otherwise you wont get the desired result.

The Sample Application

The code of the full application can be downloaded from the following link. You can simply deploy this as it is in a container. (I have tested it with Tomcat5.5 and jdk6)

Download the Dynamic Tree Sample Application

You can use the tree loading controller for saving and restoring the state of the tree in a similar way as in the previous example.

]]> http://www.codepencil.com/index.php/struts2-dojo-dynamic-tree/feed/ 39 Creating A Tree Widget Using Struts2 http://www.codepencil.com/index.php/creating-a-tree-widget-using-struts2/ http://www.codepencil.com/index.php/creating-a-tree-widget-using-struts2/#comments Wed, 12 Sep 2007 08:45:23 +0000 Manu Mahajan http://www.codepencil.com/?p=4 Struts 2 includes the dojo toolkit and provides a taglib for using dojo features in a java environment. The <s:tree> tag can be used to generate a tree widget which can be very useful for displaying hierarchical data. For example, I recently used it in a project to display the folder structure for a filesystem.

This is a screenshot of what the rendered tree looks like.

The tree widget

Our final tree will contain the following features

  • Ability to set a default selected node
  • Trapping node select events
  • Trapping expand/collapse events
  • Saving/restoring the state of the tree

If you are of the impatient type and want a quick solution you can jump to the summary with working code.

Struts2 contains the showcase web application which provides some sample code. It can be downloaded from struts2 downloads page. (Download the sample applications package).

Unfortunately, some features in the tree example are broken as of now. We can use the tree example as a reference and build upon it to add more features.

I am discussing the presentation logic in the jsp. If you want to understand how the data structure to be displayed is created have a look at the following class in the showcase application.

org.apache.struts2.showcase.ajax.tree.Category

Displaying the tree

To begin with our jsp must contain the <s:head> tag inside the <head> section. This tag tells struts to paint the initialization code for dojo.

<s:head theme="ajax" debug="true" />

To paint the tree we use the <s:tree> tag

<div style="float:left; margin-right: 50px;">
<s:tree 
    id="contentTree" 
    name="contentTree"
    theme="ajax"
    rootNode="%{rootNode}" 
    childCollectionProperty="children" 
    nodeIdProperty="id"
    nodeTitleProperty="name"
    treeSelectedTopic="treeSelected">
</s:tree> 
</div>

The “rootNode” attribute defines the data structure(Collection object) that will be displayed in the form of a tree. This needs to be set via an action. In the showcase example the ShowDynamicTreeAction.java is doing this job for us.

Capturing node select events

In the <s:tree> tag above the “treeSelectedTopic” defines the dojo event topic that will be published when a node of the tree is selected by the user.

This however, does not work by default in struts 2.0.9. A jira ticket has been lodged for this https://issues.apache.org/struts/browse/WW-1813 and it will be fixed in version 2.1.0

To work around this for the current version download the updated version of the file tree.ftl from the SVN and place it in your WEB_APPLICATION_ROOT/templates/ajax directory

For trapping node select events make a javascript funtion that would be called when the event fires and connect it to the event by using dojo.topic.subscribe as follows.

function treeNodeSelected(message) {
  /*
  * Place your logic here
  * I am just displaying the id of the node that was clicked
  */
             alert(message.node.widgetId);
     };
dojo.event.topic.subscribe("treeSelected",this,treeNodeSelected);

Trapping expand/collapse events

The TreeLoadingController widget is required for being able to capture expand and collapse events. We will also be using the tree controller extensions which will give us additional ability to control the loading of the tree.

First, tell dojo to load the required files

//Load the tree controller widget and controller extension
dojo.require("dojo.widget.TreeLoadingController");
dojo.require("dojo.widget.TreeControllerExtension");
 
// Add extensions to controller.
dojo.lang.mixin(dojo.widget.byId('treeController'), dojo.widget.TreeControllerExtension.prototype);

Also, add the tree controller widget to the body section of your page

<div dojoType="TreeLoadingController" widgetId="treeController" RPCUrl="local"></div>

Now subscribe to the expand and collapse events

dojo.event.topic.subscribe("contentTree/expand",saveExpandedIndices);
dojo.event.topic.subscribe("contentTree/collapse",saveExpandedIndices);

“saveExpandedIndices” is the name of the function that I am going to use to save the state of the tree every time a node is expanded/collapsed. You can have your own function in its place if you want.

Saving the state of the tree

For saving the state of the tree. The treeController widget provides a function called “saveExpandedIndices” which returns a multi dimension array of integers, each integer representing an expanded node. You can save this array based on your logic. For my implementation I am storing it inside a cookie. For converting the object to a string I use json.js which you can get from json.org

function saveExpandedIndices(message) {
  indices = dojo.widget.byId('treeController').saveExpandedIndices(
    dojo.widget.byId('contentTree')
  );
  if (readCookie("categoryTreeState")==null)
    createCookie("categoryTreeState",indices.toJSONString());
  else 
    updateCookie("categoryTreeState",indices.toJSONString());
}

We can load the same state of the tree anytime. I use it at the body onload event so that when the user revisits that page it is in the same state.

function restoreExpandedIndices(indices) {
  dojo.widget.byId('treeController').restoreExpandedIndices(
    dojo.widget.byId('contentTree'), indices
  );
}
function bodyOnLoad(){
  treeState = readCookie("categoryTreeState");
  indices = treeState.parseJSON();
  restoreExpandedIndices(indices);
}

Setting the default selected element

Sometime you might want to select a node of the tree on page load or at any other event. This can be accomplished by the following code.

treeSelector = dojo.widget.byId('treeSelector_contentTree') //The id will be treeSelector_TREENAME (its defined in tree.ftl)
 
try // try to select node based on ID
{
  treeNode = dojo.widget.byId(ID) 
  treeSelector.doSelect(treeNode);
  //publish treeSelected topic to trigger handling of event
  dojo.event.topic.publish("treeSelected", {node: dojo.widget.byId(treeSelection)}); 
}
catch (e)// if unable to select or node not found
{
  treeNode = tree.getDescendants()[1] // try selecting the root node
  treeSelector.doSelect(treeNode);
  dojo.event.topic.publish("treeSelected", {node: tree.getDescendants()[1]});
}

Summarizing

Here is a summary of the code snippets put together which you can directly use in your application.

 
<html>
<head>
  <s:head theme="ajax" debug="true"/>
  <script language="Javascript" type="text/javascript" src="/scripts/json.js"></script>
  <script language="Javascript" type="text/javascript" src="/scripts/cookies.js"></script>
  <script language="javascript">
 
  //The following extensions are required to save or restore state of a tree
  dojo.require("dojo.widget.TreeLoadingController");
  dojo.require("dojo.widget.TreeControllerExtension");
 
  //This function is called after dojo scripts are loaded
  dojo.addOnLoad(function() {
    dojo.lang.mixin(dojo.widget.byId('treeController'), dojo.widget.TreeControllerExtension.prototype);
    //The following code will make sure that the saveExpandedIndices function is called everytime a node is collapsed or expanded
    dojo.event.topic.subscribe("contentTree/expand",saveExpandedIndices);
    dojo.event.topic.subscribe("contentTree/collapse",saveExpandedIndices);
  });
 
  //The following function saves the state of the tree
  function saveExpandedIndices(message) {
    indices = dojo.widget.byId('treeController').saveExpandedIndices(
    dojo.widget.byId('contentTree')
  );
  if (readCookie("categoryTreeState")==null)
    createCookie("categoryTreeState",indices.toJSONString());
  else 
    updateCookie("categoryTreeState",indices.toJSONString());
  }
 
  //The following function restores the state of the tree. This can probably be called body-onload
  //You will have to pass it the stored indices object though
  function restoreExpandedIndices(indices) {
    dojo.widget.byId('treeController').restoreExpandedIndices(
    dojo.widget.byId('contentTree'), indices
    );
  }
function bodyOnLoad(){
  treeState = readCookie("categoryTreeState");
  indices = treeState.parseJSON();
  restoreExpandedIndices(indices);
}
</script>
 
</head>
<body onload="bodyOnLoad()">
 
<div dojoType="TreeLoadingController" widgetId="treeController" RPCUrl="local"></div>
<s:tree id="contentTree" 
    name="contentTree"
    theme = "ajax"
    rootNode="%{rootNode}"
    childCollectionProperty="children"
    nodeIdProperty="id"
    nodeTitleProperty="name">
</s:tree>
</body>

I am working on a tree with lazy loading that will load partially at first and the rest will be loaded based on when the user expands a node. I will post the code when I get it working!

Follow Ups:

• Struts2 – Dojo Dynamic Tree : In this example I have attempted to create a tree which loads partially at first and rest is loaded as and when requested by the user.

]]> http://www.codepencil.com/index.php/creating-a-tree-widget-using-struts2/feed/ 11