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 ● 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

2. 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

3. Web Applications ● 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

4. Dojo Toolkit ● 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

5. The Dojo Widgets ● HTML template ● CSS template ● JavaScript file for logic ● Widgets are created to address specific use case

6. Hierarchical Data/Information ● 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

7. Visualizing Hierarchies ● Show the data structure ● Understand data ● Summarize large amount of data ● The Tree widget is created to handle such use cases

8. The User Can ● 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

9. Graphs, Trees and Hierarchies ● A graph is an abstract representation of collection of objects where pairs of objects are connected by links. ● Vertices are mathematical abstractions representing objects in collection ● Links connecting pairs of vertices are called edges ● Commonly a graph is pictured as set of nodes or dots representing vertices joined by lines or curves showing edges

10. Directed and Undirected Graphs ● No distinction can be made between the two nodes associated with each edge ● Edges may be directed from one node to another ● The vertices represent people in a social network ● There is an edge between two people if they a friends ● There is an edge when person likes someone else's photography

11. Trees ● A tree is a connected graph with no cycles ● A connected graph is one in which every pair of distinct vertices in the graph is connected ● There is no way to start at some node and follow a sequence of edges that eventually return back to starting node

12. Trees (continue) ● The tree is called rooted in the case when there is one vertex of the tree that is distinguished ● 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 ● A tree has one less edge then it has nodes

13. Hierarchies ● A hierarchy is an ordered set or an acyclic graph ● A directed tree with two extra properties, subordination and inheritance

14. Hierarchies (continued) ● Some known hierarchies provide semantic meaning for the data a priori F-Spot Photo Manager: Organizing photos by time

15. Hierarchies (continued) ● Hierarchies can also be automatically derived using complex algorithms that classify the data

16. The Dojo Tree Widget ● Gives a way of representing the hierarchical nature of a structure in a graphical form ● It is agnostic of data displayed and domain model ● It amazingly easy and fast to put together an application and display hierarchical data ● We hit a wall, when we need to go outside of the framework

17. 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? ● If the answer is yes, the document is probably marked up in a nice understandable semantic fashion. Robert Nyman, Explaining Semantic Mark-up

18. The Naked Tree ● We will not be so strict and exclude JavaScript ● It is legal to use DOM API to “build documents, navigate their structure, and add, modify, or delete elements and content” ● We can review generated HTML code

19. Does it make any sense? ● Yes and No ● Structure of HTML code has semantic meaning ● When naked, semantic meaning is lost in representation ● The Dojo Tree widget renders as flat, ordered list

20. The Tree Widget Structure ● HTML code is structured as ordered set of nested containers ● Each container represents the tree node

21. 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

22. Modeling Data ● Trees are traditionally drawn as boxes and arrows ● This tend to lock your mental image of a tree into a graph structure ● Trees can be represented as nested sets as well

23. Nested Sets ● Replace the boxes with containers ● Nest subordinate containers inside their parents ● Containment represents subordination ● The root will be the largest container ● The leaf nodes will be the innermost, empty containers

24. Preorder Tree Traversal Algorithm ● Preorder (or depth-first) tree traversal algorithm with a modification for numbering the nodes ● Model a tree with (left, right) nested sets with number pairs ● These number pairs will contain the pairs of their subordinates ● A child node is within the bounds of its parent

25. Data Structure

26. Lazy Loading ● Lazy Loading is noting but a buzz ● We have to undo to make it work ● Containers that represent nodes that user did not open yet are empty ● The HTML code is “lazy generated” ● The Tree widget will ask only for immediate subordinate ● Lazy loading Is natural way to do it

27. Lazy Loading (continue) ● A large amount of data that has to be loaded to draw the entire tree ● The user will not open every single node but will drill down till desired information is found ● A faster rendering of the Tree widget ● A lower network traffic ● More HTTP requests ● A higher server load

28. The End ● http://kenai.com/projects/phplazyloaddojotree http://kenai.com/projects/phplazyloaddojotree ● schkovich@gmail.com schkovich@gmail.com ● Sample data are obtained from Wikipedia entry on Ethno-linguistic classification of the indigenous peoples of North America