• Like
Lazy Loading the Dojo Tree
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Lazy Loading the Dojo Tree


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 …

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Lazy Loading the Dojo Tree with PHP on the server side
    • We will discusses web applications that utilize the Dojo and the PHP to create visual representation of a hierarchically structured data
    • 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
  • 4. Web Applications
    • utilizing the web as a software interface
    • 5. browser-based
    • 6. use the browser capabilities (HTML, CSS, JavaScript)
    • 7. resemble rich user interface, interactivity, responsiveness, and flexibility of desktop-thick clients
  • 8. Dojo Toolkit
    • The Dojo Toolkit is an open source JavaScript framework
    • 9. It is created to ease the rapid development of web applications
    • 10. The Dojo has a highly flexible widget system named Dijit
    • 11. Dijit is designed to handle a variety of use cases in a modular manner
  • 12. The Dojo Widgets
    • HTML template
    • 13. CSS template
    • 14. JavaScript file for logic
    • 15. Widgets are created to address specific use case
  • 16. Hierarchical Data/Information
    • Abundant in everyday life to the point that they are considered as trivial
    • 17. Many data are naturally modeled by hierarchies, but often hierarchy itself is unobserved
    • 18. Hierarchical models are used in various domains of science and technology
  • 19. Visualizing Hierarchies
    • Show the data structure
    • 20. Understand data
    • 21. Summarize large amount of data
    • 22. The Tree widget is created to handle such use cases
  • 23. The User Can
    • Move from summary information to detailed data
    • 24. Focus only on something of interest
    • 25. Set the level of detail
    • 26. Access only desired level in the hierarch y
  • 27. Graphs, Trees and Hierarchies
    • A graph is an abstract representation of collection of objects where pairs of objects are connected by links.
    • 28. Vertices are mathematical abstractions representing objects in collection
    • Links connecting pairs of vertices are called edges
    • 29. Commonly a graph is pictured as set of nodes or dots representing vertices joined by lines or curves showing edges
  • 30. Directed and Undirected Graphs
    • No distinction can be made between the two nodes associated with each edge
    • 31. Edges may be directed from one node to another
    • 32. The vertices represent people in a social network
    • 33. There is an edge between two people if they a friends
    • 34. There is an edge when person likes someone else's photography
  • 35. Trees
    • A tree is a connected graph with no cycles
    • 36. A connected graph is one in which every pair of distinct vertices in the graph is connected
    • 37. There is no way to start at some node and follow a sequence of edges that eventually return back to starting node
  • 38. Trees (continue)
    • The tree is called rooted in the case when there is one vertex of the tree that is distinguished
    • 39. Rooted trees are often treated as directed acyclic graphs with the edges pointing away from the root
    • Every node is the root of a subtree
    • 40. A tree has one less edge then it has nodes
  • 41. Hierarchies
    • A hierarchy is an ordered set or an acyclic graph
    • 42. A directed tree with two extra properties, subordination and inheritance
  • 43. Hierarchies (continued)
    • Some known hierarchies provide semantic meaning for the data a priori
    F-Spot Photo Manager: Organizing photos by time
  • 44. Hierarchies (continued)
    • Hierarchies can also be automatically derived using complex algorithms that classify the data
  • 45. The Dojo Tree Widget
    • Gives a way of representing the hierarchical nature of a structure in a graphical form
    • 46. It is agnostic of data displayed and domain model
    • 47. It amazingly easy and fast to put together an application and display hierarchical data
    • 48. We hit a wall, when we need to go outside of the framework
  • 49. Semantic Mark-Up
    • I think it’s important for a web developer to view HTML documents without any external formatting applied. That means without CSS, no JavaScript enhancement, and, if you want, no images as well; instead just the raw content. Look at it, read it through. Does it make any sense? Do you understand which parts are more important than others, which texts are headings, which parts are connected to each other?
    • 50. If the answer is yes, the document is probably marked up in a nice understandable semantic fashion.
    Robert Nyman , Explaining Semantic Mark-up
  • 51. The Naked Tree
    • We will not be so strict and exclude JavaScript
    • 52. It is legal to use DOM API to “build documents, navigate their structure, and add, modify, or delete elements and content”
    • 53. We can review generated HTML code
  • 54. Does it make any sense?
    • Yes and No
    • 55. Structure of HTML code has semantic meaning
    • 56. When naked, semantic meaning is lost in representation
    • 57. The Dojo Tree widget renders as flat, ordered list
  • 58. The Tree Widget Structure
    • HTML code is structured as ordered set of nested containers
    • 59. Each container represents the tree node
  • 60. The Tree Widget Structure (continued)
    • The Tree widget is literally using CSS to create “Folders and documents” visual representation of a tree on the top of a nested set structure
  • 61. Modeling Data
    • Trees are traditionally drawn as boxes and arrows
    • 62. This tend to lock your mental image of a tree into a graph structure
    • 63. Trees can be represented as nested sets as well
  • 64. Nested Sets
    • Replace the boxes with containers
    • 65. Nest subordinate containers inside their parents
    • 66. Containment represents subordination
    • 67. The root will be the largest container
    • 68. The leaf nodes will be the innermost, empty containers
  • 69. Preorder Tree Traversal Algorithm
    • Preorder (or depth-first) tree traversal algorithm with a modification for numbering the nodes
    • 70. Model a tree with (left, right) nested sets with number pairs
    • 71. These number pairs will contain the pairs of their subordinates
    • 72. A child node is within the bounds of its parent
  • 73. Data Structure
  • 74. Lazy Loading
    • Lazy Loading is noting but a buzz
    • 75. We have to undo to make it work
    • 76. Containers that represent nodes that user did not open yet are empty
    • 77. The HTML code is “lazy generated”
    • 78. The Tree widget will ask only for immediate subordinate
    • 79. Lazy loading Is natural way to do it
  • 80. Lazy Loading (continue)
    • A large amount of data that has to be loaded to draw the entire tree
    • 81. The user will not open every single node but will drill down till desired information is found
    • 82. A faster rendering of the Tree widget
    • 83. A lower network traffic
    • 84. More HTTP requests
    • 85. A higher server load
  • 86. The End
    • http://kenai.com/projects/phplazyloaddojotree
    • 87. [email_address]
    • 88. Sample data are obtained from Wikipedia entry on Ethno-linguistic classification of the indigenous peoples of North America