This article discusses web applications that use lazy loading to create a responsive, tree like, representation of a hierarchically structured data. Instead of getting the entire tree structure at once, a lazy load approach is used to fetch only a single node immediate subordinates on demand. This article shows how to use the Dojo libraries and the Dojo Tree widget in particular, to easily create visual representation of a hierarchical list and update it dynamically.
Graph theory is concerned with the topology of interconnected sets of nodes, abstracting away from concrete objects and the exact nature of the relation between objects. Trees are special case of graphs: Tree is a graph whose nodes are all reachable from some starting node and one that has no cycles.
Dojo Tree widget HTML code is structured as ordered set of nested containers. Visual representation of tree structure is created using CSS. Modified preorder tree traversal algorithm[1] gives a way to structure data in the very same way, as nested sets with number pairs. Starting from that point, custom JavaScript data model is created using left-right number pairs.
The client side of the sample web application is built using the Dojo JavaScript toolkit, while the server side of the sample web application is coded in the PHP programming language.
On the server side, a simple web service is created to serve XHR requests. Domain service[2] is accessing repository[3] having in backend data stored in ini formated text files.
The sample web application is developed using the NetBeans IDE.
This article focuses on creating the web service, the customization of a Dojo functionality and modeling data. The details of the Dojo libraries attributes shown in the examples are not described. Throughout the article, the reader is assumed to have a basic knowledge of the JavaScript, the Dojo and the PHP. The examples in this article are based on Dojo 1.5.0 and PHP 5.3.3.
The first part of the article was presented at LinuxTag 2010[4] conference.
Source code and UML models: https://svn.kenai.com/svn/phplazyloaddojotree~subversion
[1] http://www.ibase.ru/devinfo/DBMSTrees/sqltrees.html
[2] http://devlicio.us/blogs/casey/archive/2009/02/17/ddd-services.aspx
[3] http://devlicio.us/blogs/casey/archive/2009/02/20/ddd-the-repository-pattern.aspx
[4] http://www.linuxtag.org/2010/en/program/free-conference/popup/details-talkid364.html?talkid=364
Genislab builds better products and faster go-to-market with Lean project man...
Lazy Loading the Dojo Tree
1.
2. A lazy load approach is used to fetch on demand only a single node immediate subordinates data, providing responsive, tree like, dynamically updated visual representation of hierarchical list
3. Web Applications If anything about current interaction design can be called “glamorous,” it’s creating Web applications. After all, when was the last time you heard someone rave about the interaction design of a product that wasn’t on the Web? (Okay, besides the iPod.) All the cool, innovative new projects are online. Jesse James Garrett , Ajax: A New Approach to Web Applications