Orgchart: a tree browser that offers a convenient way for displaying data

March 14, 2013 by | 4 Comments »

Introduction

Orgchart is a tree browser (or the so called SpaceTree) that offers a convenient way to display data, inspired by JavaScript InfoVis Toolkit. The Orgchart consists of nodes and paths while path represents the links connecting the nodes. You can expand or collapse individual nodes in the tree to show or hide its children. You can also change the attributes to affect how the tree is displayed. For example, you can use level to adjust the number of levels that are shown in the tree.

Example Scenario

Suppose we want to make an orgchart to display a company’s staffs’ information and their relations.

SpaceTree Layout

To show the SpaceTree layout visualization, we need an orgchart component. The template tag refers the staff’s name as the node label. We have also added a button for adding or removing a node.

ZUL

<zk>
    <window id="mainWin" apply="test.ctrl.SpaceTreeComposer">
        <orgchart id="myComp" level="3" nodetype="circle"
            duration="250" orient="right" align="right">
            <template name="model">
                <label value="${each.name}"></label>
            </template>
        </orgchart>
        <button id="add" label="add" />
        <button id="remove" label="remove" />
    </window>
</zk>

Now, we can put the staffs’ information into a Java bean (or the data of node) which is called UserDataBean, then we use the UserDataBean as the data of SpaceTreeNode and create their relations in SpaceTreeNode.

Insert staff information into Java Bean

UserDataBean represents the data of SpaceTreeNode and SpaceTreeNode makes up the SpaceTree. You can use template tag in zul or customize the item renderer in a composer to generate the value which shows on the node label. By default the value will be object#toString().

Java Bean

// customize your java bean
public class UserDataBean {

    private String name;
    private int age;

    // constructor, getter and setter

}

Initialize SpaceTree

Create some SpaceTree nodes and combine all nodes together. The ItemRenderer is used to customize the value that shows on the node label. You can customize the item renderer if you don’t want to use template tag in zul or override object#toString().

Composer

public class SpaceTreeComposer extends SelectorComposer<Window> {

    @Wire("#myComp")
    private Orgchart myComp;

    public void doAfterCompose(Window comp) throws Exception {
        super.doAfterCompose(comp);

        // set true in last argument, that means is root
        SpaceTreeNode<UserDataBean> root = 
          new SpaceTreeNode(null, null, true);
        SpaceTreeNode<UserDataBean> spacetreeRoot = 
          new SpaceTreeNode(new UserDataBean("Peter", 23), null);
        root.add(spacetreeRoot);
        SpaceTreeNode<UserDataBean> first = 
          new SpaceTreeNode(new UserDataBean("Jason", 1), null);
        SpaceTreeNode<UserDataBean> second = 
          new SpaceTreeNode(new UserDataBean("Partick", 23), null);
        spacetreeRoot.add(first);
        spacetreeRoot.add(second);
        SpaceTreeNode jack = 
          new SpaceTreeNode(new UserDataBean("Jack", 11),
                null);
        SpaceTreeNode mary = 
          new SpaceTreeNode(new UserDataBean("Mary", 12),
                null);
        first.add(jack);
        first.add(mary);
        first.add(new SpaceTreeNode(new UserDataBean("Jean", 13), null));
        second.add(new SpaceTreeNode(new UserDataBean("Sam", 21), null));
        second.add(new SpaceTreeNode(new UserDataBean("Tom", 22), null));
        second.add(new SpaceTreeNode(new UserDataBean("Tim", 23), null));

        // customize your renderer, the data means your bean, and index means the node id
        // myComp.setItemRenderer(new ItemRenderer() {
        // @Override
        // public String render(Component owner, Object data, int index) {
        // return ((UserDataBean) data).getName();
        // }
        // });

        SpaceTreeModel model = new SpaceTreeModel(root);
        model.addToSelection(mary);

        myComp.setModel(model);
    }

    @Listen("onClick= #add")
    public void addNode() {
        SpaceTreeNode<UserDataBean> childNode = new SpaceTreeNode(
                new UserDataBean("Allen", 27), null);
        SpaceTreeNode seldNode = myComp.getSelectedNode();
        if (seldNode != null) {
            seldNode.add(childNode);
        }
    }

    @Listen("onClick= #remove")
    public void removeNode() {
        SpaceTreeNode seldNode = myComp.getSelectedNode();
        if (seldNode != null) {
            seldNode.removeFromParent();
        }
    }

    @Listen("onSelect= #myComp")
    public void editNode() {
        SpaceTreeNode seld = myComp.getSelectedNode();
        UserDataBean data = (UserDataBean) seld.getData();
        data.setName("Augustin");
        seld.setData(data);
    }

}

Demo

You can download the complete source code for this example from its github repository here.

Reference: ZK Small Talk – Integrate 3rd Party Javascript Libraries In ZK

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

4 Responses to “Orgchart: a tree browser that offers a convenient way for displaying data”

  1. Stefano says:
    03/18/2013 at 02:37

    Well done guys!
    Working with knowledge modelling and ontologies I’ve been expecting such a component for a long time.
    Will it be added to the default component set?
    Any further development planned?
    It would be great if not only hierarchical relations are shown but also point-to-point relations as well…
    S

  2. anjuman says:
    03/27/2013 at 05:05

    Thank’s for shearing that.

  3. Naman Shah says:
    07/17/2013 at 05:26

    how to start using this?

  4. Darshan says:
    08/26/2013 at 07:14

    If data is more the 40 than how to make orgchart scrollable window to see all organization without drag and drop with mouse???.

Leave a Reply