sushain.com

Abstract: Layouts play a key role in any UI-based application requiring even marginal display formatting. The idea is to encapsulate the screen-level details into a library and to completely decouple the rendering knowledge from the actual business / enterprise logic details. This would then allow a UI-specialist team to work in tandem with business analysts, or core product-development teams without getting too much up-close and personal with the underlying product-level details. Alternatively, a properly designed layout library could be used off-the-shelf by a development team. The framework discussed here relates to either of these scenarios and many more.

Description: The framework is developed as a javascript service that defines vertical / horizontal hierarchical layout method handlers. There are different handlers based on whether one wants to organize divisions (div tags), separate nodes, or node hierarchies. Apart from the structuring logic, the file also includes the rendering logic that paints the node(s) and their associated relations to build the actual hierarchy.

Now, the layouts are provided out of the box and all one requires is a nodelist (supporting composite pattern), which will then be consumed to draw the actual hierarchy. Such hierarchies can be utilized for a particular filtered view within a social networking graph.

The node definition(s) should comply to the following generic template to be able to fed and subsequently consumed properly by the framework: -

var Node = function(id) {
this.id = id;
this.coords;
this.shape;
this.text;
this.group;
this.childList = new dojox.collections.ArrayList();
}

Illustration: -

- Get a hierarchy object (pass the ultimate parent of the node hierarchy and specify the alignment [horizontal / vertical]: -

HierarchyLayout newLayout = new HierarchyLayout (document, ultimateParent, alignment);

- Invoke addNodeHierarchy: -

newLayout.addNodeHierarchy (ultimateParent, “”); // 2nd argument is yet to be utilized

This invocation would assign a value to the node coordinates (node.coords.x, node.coords.y) for each node in the hierarchy according to the passed alignment.

- Invoke renderHierarchy on a node: -

node.renderHierarchy ();

This invocation would render the immediate child nodes considering “node” as the parent.

The library can be downloaded from - Layout Lib

You can see a demo-usage @ SoNet home under “Demo” –> “Layout service demo”.

Please feel free to drop a note in case you’ve comments / feedback.

Programming framework, hierarchical, Javascript, layout, linkedin