Code Pencil » ajax 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