FOSS.IN has always focused on contribution but this year they are taking it a step further and there will be less talks and more code. There are a set of Workouts planned and people will come prepared with a goal in mind, and code together on the spot.

So in the spirit of the FOSS.IN workouts I’ve decided that these five days (actually nights since I’m working during the days) I’ll spend all the time that I can and try to put in some contribution from my side. I hope to explore the java-gnome bindings and use them to write my first application for GNOME.

So even though I’m not going to the event I’ll hopefully be taking my first steps towards contributing to FOSS

I spent the first night exploring java-gnome and starting with my application. I will write about the java-gnome experience in my next post. But for now it’s back to coding…

So the idea is to create a web site that uses the so called best practices:

• Semantic HTML
• Separation of content and markup
• Cross browser support
• Search engine friendliness

And everything else that a modern web site should have.

Why a CSS strategy?

The problem is simple – A big web site with multiple developers working on it simultaneously along with their individual coding styles.

There needs to be a set of guidelines for everyone to follow. At a bare minimum you need consistency in coding and (a sense of) ease of maintainence. Anything above that (like good readability) is a bonus.

For me I don’t know what is more readable – hundreds of lines of CSS code or a couple of dozen tables nested inside each other. I’ve seen both and I’ve pulled my hair out trying to debug seemingly trivial issues.

CSS is not like any other programming language where you have standard design patterns or best practices to refer to. Quite often there are a zillion ways to do the same thing. You could chose between using external stylesheets or inline styles; If you use external stylesheets you need to organize them effectively; You could define selectors for ids or classes or for html elements; You could use nested styles based on multiple things; You need hacks to support older browsers and so on…

What will be the components of my CSS strategy?

There are multiple challenges involved in a project like this. The ones that I can think of at the moment are

1. CSS framework – Is there need to use an external CSS framework or should one build everything from scratch.
2. Organisation of CSS code – It is a matter of time that your CSS code will grow and if you’re building a big site with complex styling you will need a strategy to organize your CSS files.
3. Guidelines for coders – There needs to be a set of rules for consistency and for efficiency (code reuse, tackling common problems etc.)
4. Workflow definition – Can a coder modify a file that is used globally and where a simple change might impact the whole site? At what level should new styles be added?
5. CSS hacks – Sooner or later you face a situation where you need to apply browser specific hacks. This is definitely a last resort but you need have a plan to tackle such issues.

I do not know the answers to these questions yet but I have some vague ideas forming in my head based on some resources on the web and my instincts. Let’s see how they develop over the next few days.

I am constantly getting Delivery Status Notification(Failures) from so many email servers. It seems that some stupid spammers are sending emails with fake addresses that seem to be originating from my domain(knowyourraga.com). And so if an email address does not exist a failure mail is sent to back to the address which appears to be from my domain and I happen to get all the messages send to that domain in the catch-all mailbox(which is also my primary mailbox).

I have tried various tests to confirm that my domain is not an open relay and I mention it here because if anyone out there can find a weakness in my server than I could correct that. I am getting hundreds of failure notification messages in a day which means that someone is sending thousands or millions of messages appearing to come from my domain. This is scary! I have no clue how to tackle this

It’s a pretty large project and to be able to understand how things work you need to work with a lot of different things like tomcat, maven, spring, hibernate, jsf and many design patterns It took me a while to get used to the terminology and different elements that make up the project. In this post I’m describing my effort in setting up a development environment which could be the starting point for any development effort and the various useful links that I came across while searching for information.

Development Environment Set Up

Sakai 2.4 is the stable version but I decided to go for 2.5 which is in development and brings in a lot of new features. There is a very useful page which describes most of the stuff that’s required but there are some small things that have the potential to make you want to pull your hair out when things don’t work. I suggest you read the comments at the bottom of the page very carefuly.
http://bugs.sakaiproject.org/confluence/display/BOOT/ Development+Environment+Setup+Walkthrough

Another, simpler way to start could be to have a look at this screencast by Zach Thomas of Aerpolane Software
aeroplanesoftware.com/wordpress/wp-content/uploads/2008/01/ developing-for-sakai-getting-started960×540.mov

I set-up everything on an ubuntu machine based on the above guide and here are a few things that bugged me:-

Java 1.6 does not work – I had Sun jdk 6 installed but sakai doesn’t yet support java 1.6 so I had to set-up java 1.5 as my primary jvm. (Particularly, I got compile errors with java 6)
Tomcat 5.5 tar/zip version only – Make sure you download and install the Tomcat zip or tar version which can unzipped into a folder. It’s necessary to have a separate tomcat just for running sakai.
No Spaces – For windows users it is VERY IMPORTANT to not have spaces in the paths to jdk, tomcat and the maven repositories. I tried running the demo on a Windows machine which had a jdk installed in the default location(C:\Program Files\Java\…) and I started getting a lot of exceptions all over the site
“mvn clean install sakai:deploy” is not same as “mvn clean install + mvn sakai:deploy” – I don’t know why this happens but sometimes after changing code if i run mvn clean install sakai:deploy it doesn’t work and I don’t see code getting updated in tomcat but running the 2 commands separately always works.
Memory – Default memory settings for either of eclipse,tomcat or maven are not going to work so you need to make sure you give them all a high amount of RAM as described in the guides above or you will start getting java.lang.outOfMemory errors. For development purposes I found that running tomcat from within eclipse saves you a lot of RAM instead of running them both in separate virtual machines.

One thing that I had trouble with in particular, was trying to add the projects to ecplise. Eclipse did not recognize individual projects and kept showing the whole code as one large project. I had to add each sub project individually. I faced this problem with code downloaded from the ‘trunk’. After that I downloaded the ‘beta2′ tag from subversion and the problem did not arise with that.

Debugging

If you are setting up a development environment sooner or later you will need to be able to debug the code in some way. And especially with this project because of the time that is required to restart the server every time you make a change in the code. On my laptop tomcat takes about 4 mins to restart.

There are various approaches available for debugging. The following page describes them in detail.
http://bugs.sakaiproject.org/confluence/display/BOOT/ Debugging+Tomcat+Remotely+Using+Eclipse

For me the third approach in which tomcat is set up as a server within eclipse seems to work best on an ubuntu system. I have also found that when you run tomcat from within eclipse you need less amount of total RAM. So I’d recommend this approach unless you have tomcat and eclipse on separate machines.

Sakai Tools

Sakai Tools are responsible for generating user interfaces. If you download the source code you will see a couple of projects in the samples folder namely –

• sample-tool-jsf
• sample-tool-servlet

Studying these tools seems to be a good way to start exploring. I haven’t used jsf in any of the projects that I’ve worked with so it that’s one new thing to learn in the next few days

I will post more about my encounters with sakai in the next few days.

I have an HP tx1003au laptop which is known to be slightly difficult to configure with linux. There is a huge thread(33 pages so far) on ubuntuforums.org specifically for this series of machines. I’ve been following this thread right since the beginning and I am posting the steps that I had to take. The information in this thread is a lot more than you need and it took me hours to go through it and get every piece of hardware going one by one.

Booting from live CD

As with recent ubuntu distributions gutsy comes with a live CD. I was not able to boot from the live CD directly. I had a similar problem with Feisty so I knew that I need to supply a certain set of kernel parameters to get my laptop to boot. The following parameters seem to work for me

quiet splash noapic irqpoll

If you are new to linux then follow the following steps.

Load the CD in your CD ROM and restart the computer. You will be shown a screen with options. Press F6 for “other options”. Now a line of text would be visible at the bottom of the screen. Type “noapic irqpoll” at the end of the line(before the –) and press enter.

Installation

Once I was able to boot from the live CD the installation went off smoothly. The only thing was that after installing the boot parameters were not automatically added to the boot configuration. So don’t restart your system straight away after installation. Edit the following file em>/boot/grub/menu.lst and add the boot parameters string at the end of the line that looks something like this

kernel		/boot/vmlinuz-2.6.22-14-generic root=UUID=aa0998d4-b656-4ad4-854f-8fe9d950d17f quiet splash noapic irqpoll

Wireless

The first thing that I needed to configure was wireless networking. For this I used ndiswrapper. The instructions are given very nicely in this post.

http://ubuntuforums.org/showpost.php?p=3491929&postcount=257

Note: I needed to install wine since I wasn’t able to extract the driver directly from the exe. For installing wine type this in a terminal window(applications -> accessories -> terminal)

sudo apt-get install wine

And after installing wine I double clicked on the driver file and installed it. Then I was able to locate the driver file by browsing the the following directory on my system
~/.wine/drive_c/SWSetup (~ stands for home directory)

For connecting and disconecting to wireless networks you can use the networking application provided by default which can be accessed via system -> administration -> network. But I prefer to use the software wifi-radar which seems to work better in my case. For installing wifi radar type this in a terminal

sudo apt-get install wifi-radar

Note: You might need to enable some repositories for using the above software. For more information see this
https://help.ubuntu.com/community/Repositories

Audio

The audio didn’t work by default. To make it work I had to add the following line to the file /etc/modprobe.d/alsa-base

options snd-hda-intel index=0 model=3stack position_fix=0 single_cmd=0

I had to restart after this. The audio now works but the front jacks are not recognized. I’ve read that the front jacks can be made to work by downloading and compiling the latest version of alsa drivers. I will try that at a later stage. For the moment I just wanted basic functionality running so that I could start using my system for some coding

Edit: The audio works perfectly after compiling and installing latest alsa drivers. Here are the instructions.

1. Download the latest alsa drivers from here
   ftp://ftp.alsa-project.org/pub/driver/alsa-driver-1.0.15.tar.bz2
2. Untar the archive

   $ tar -xvf alsa-driver-1.0.15.tar.bz2
   

3. Compile and build the drivers

   $ cd alsa-driver-1.0.15/
   $ ./configure
   $ make
   $ sudo make install
   

   make should take a few minutes because it is compiling the source code.
   (in case you get a message that make cannot be found then you need to install the “build-essentials” package)

4. Reboot your system

Audio should be working now. In case it doesn’t try unmuting the controls in the volume mixer or increasing the volume.

Things that work out of the box

Not everything required tweaking and some of the things worked by default. Here’s what I was able to test.

• Hardware buttons (Sound volume buttons, DVD button and playback control buttons)
• Memory card slot (tried Memory Stick Pro)
• Infra-red remote
• Microphones on the screen
• Web cam (To use the webcam select the V4L2 as the video driver in your selected application. I tested this with Ekiga)

Display Drivers(NVidia)

For installing the display drivers System -> Administration -> Restricted Drivers Manager. Click on the Nvidia accelerated graphics driver checkbox. The drivers should be installed automatically.

Touchscreen

This is the most tricky bit. With my previous installation I spent many days making this work. And I was hoping that this time it would take less time. I still have to calibrate the touch screen and I will be able to do that later in the evening. In the meantime here are the steps that I followed to get it running and some notes that I had from last time. The basic steps are given in this post.
http://ubuntuforums.org/showpost.php?p=2792971&postcount=16

Edit: The touchscreen works perfectly and is very easy to setup based on this post by waspbr on the ubuntu forums
http://ubuntuforums.org/showpost.php?p=4197376&postcount=542

External Display

I tried connecting my laptop to a projector. The standard System -> Administration -> Screens and Graphics did not work for me. I then installed nvidia-settings.

sudo apt-get install nvidia-settings

After installing you can launch the application by typing “nvidia-settings” in the shell. This seems to work well at the moment and I was able to connect to an external display.

Things I did not try

• Getting the remaining buttons on the panel to work
• Internal modem

That’s it for the moment. Hope it helps save time for others with a similar setup.

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.

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

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.