Lazy Loading the Dojo Tree with PHP on the server side  <ul><li>We will discusses web applications that utilize the Dojo a...
A lazy load approach is used to fetch on demand only a single node immediate subordinates data, providing responsive, tree...
Web Applications If anything about current interaction design can be called “glamorous,” it’s creating Web applications. A...
Web Applications <ul><li>utilizing the web as a software interface
browser-based
use the browser capabilities (HTML, CSS, JavaScript)
resemble rich user interface, interactivity, responsiveness, and flexibility of desktop-thick clients </li></ul>
Dojo Toolkit <ul><li>The Dojo Toolkit is an open source JavaScript framework
It is created to ease the rapid development of web applications
The Dojo has a highly flexible widget system named Dijit
Dijit is designed to handle a variety of use cases in a modular manner </li></ul>
The Dojo Widgets <ul><li>HTML template
CSS template
JavaScript file for logic
Widgets are created to address specific use case </li></ul>
Hierarchical  Data/Information <ul><li>Abundant in everyday life to the point that they are considered as trivial
Many data are naturally modeled by hierarchies, but often hierarchy itself is unobserved
Hierarchical models are used in various domains of science and technology </li></ul>
Visualizing   Hierarchies <ul><li>Show the data structure
Understand data
Summarize large amount of data
The Tree widget is created to handle such use cases </li></ul>
The User Can <ul><li>Move from summary information to detailed data
Focus only on something of interest
Set the level of detail
Access only desired level in the  hierarch y </li></ul>
Graphs, Trees and Hierarchies <ul><li>A graph is an abstract representation of collection of objects where pairs of object...
Vertices are mathematical abstractions representing objects in collection </li></ul><ul><li>Links connecting pairs of vert...
Upcoming SlideShare
Loading in …5
×

Lazy Loading the Dojo Tree

2,822 views

Published on

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,822
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lazy Loading the Dojo Tree

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

×