lazy loading the dojo tree
If you can't read please download the document
TRANSCRIPT
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
Web Applications
If anything about current interaction design can be called glamorous, its creating Web applications. After all, when was the last time you heard someone rave about the interaction design of a product that wasnt 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
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
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
The Dojo Widgets
HTML template
CSS template
JavaScript file for logic
Widgets are created to address specific use case
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
Visualizing Hierarchies
Show the data structure
Understand data
Summarize large amount of data
The Tree widget is created to handle such use cases
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 hierarchy
Mentioning sample data sounds odd on this slideGraphs, 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
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
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
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
Hierarchies
A hierarchy is an ordered set or an acyclic graph
A directed tree with two extra properties, subordination and inheritance
Hierarchies (continued)
Some known hierarchies provide semantic meaning for the data a priori
F-Spot Photo Manager: Organizing photos by time
Hierarchies (continued)
Hierarchies can also be automatically derived using complex algorithms that classify the data
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
Semantic Mark-Up
I think its 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
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
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
The Tree Widget Structure
HTML code is structured as ordered set of nested containers
Each container represents the tree node
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
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
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
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
Data Structure
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
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
The End
http://kenai.com/projects/phplazyloaddojotree
Sample data are obtained from Wikipedia entry on Ethno-linguistic classification of the indigenous peoples of North America
Muokkaa otsikon tekstimuotoa napsauttamalla
Muokkaa jsennyksen tekstimuotoa napsauttamallaToinen jsennystasoKolmas jsennystasoNeljs jsennystasoViides jsennystasoKuudes jsennystasoSeitsems jsennystasoKahdeksas jsennystasoYhdekss jsennystaso
Muokkaa otsikon tekstimuotoa napsauttamalla
Muokkaa jsennyksen tekstimuotoa napsauttamallaToinen jsennystasoKolmas jsennystasoNeljs jsennystasoViides jsennystasoKuudes jsennystasoSeitsems jsennystasoKahdeksas jsennystasoYhdekss jsennystaso