ActiveOC

ActiveOC is a standard windowless ActiveX control for constructing and representing hierarchical data (or tree) such as organizational charts, site maps, family trees. It can be used in both .Net programms and traditional ASP programms.

Tree Construction

OCNode is the interface for constructing a tree. The root node object of the tree is created explicitly. Then the 'Add' method of the root node object is called to create the second level nodes, and similarly, the 'Add' method of the second-level nodes is called to create the third level nodes. This way, by calling the 'Add' method of each node that has children node, the full tree is constructed.

For each node, application specific infomation can be stored by calling its SetProperty method. The information is stored in name/value pairs. The application can store as many number of name/value pairs as needed. The information can later be retrieved by calling the GetProperty method of the node.

Below are sample codes that build a simple tree of 5 nodes in 3 levels:

var root=new ActiveXObject("ActiveOC.OCNode");
var a=root.Add();
var b=root.Add();
var a1=a.Add();
var a2=a.Add();
root.SetProperty("name", "Root");
a.SetProperty("name", "A");
b.SetProperty("name", "B");
a1.SetProperty("name", "A1");
a1.SetProperty("name", "A2");



var mat=root.CreateMatrix(0, false);

using ActiveOCLib;
...
OCNode root=new OCNode();
OCNode a=root.Add();
OCNode b=root.Add();
OCNode a1=a.Add();
OCNode a2=a.Add();
root.SetProperty("name", "Root");
a.SetProperty("name", "A");
b.SetProperty("name", "B");
a1.SetProperty("name", "A1");
a1.SetProperty("name", "A2");

OCMatrix mat= root.CreateMatrix(0, false);

Tree Representation

After the tree constructed, the CreateMatrix method of the root method is calle to create a OCMatrix object. A OCMatrix object is a 2-dim array. based on this array, In ASP or ASPX for example, a HTML TABLE can be easily created:

var table="<TABLE>";
for (var row=0; row<mat.Rows; row++)
{
    var tr="<TR>";
    for(var col=0; col<mat.Columns; col++)
    {
        var node=mat.GetNode(row, col);
        var name=node.GetProperty("name");
        var td="<TD>" + name + "</TD>";
        tr+=td;
    }
    tr+="</TR>";
    table+=tr;
}
table+="</TABLE>";

Table table = new Table();
for (int row=0; row<mat.Rows; row++)
{
    TableRow tr = new TableRow();
    table.Controls.Add(tr);
    for(int col=0; col<mat.Columns; col++)
    {
        OCNode node=mat.GetNode(row, col);
        TableCell td = new TableCell();
        td.Text = node.GetProperty("Name");
        tr.Controls.Add(td);
    }
}

The table is not good enough yet, because it missed one important thing: the relations between the nodes. Just like a family, apart from parent/child relationship, a node may have elder or younger brothers.

When the array is being created, activeOC stores the relationship in the "ImageName" property of node objects. "ImageName" is a string value. It may be empty or contain one or more characters from 'A' to 'Q'. The picture on the right explains the definition of characters that may appears in "ImageName"

If "ImageName" is empty, then the node is an empty node added by "CreateMatrix" just to make the array regular - each row has the same number of columns. If it contains 'A', the node is a real node added by the application. If it is not empty but does not contain 'A', the node is a connection node added by "CreateMatrix".

Now it is obvious that if we have a proper background image for each node (or table cell), then the table will just look like what we want as shown below.

• InitNodeImageRectangle (rectangle)
• InitNodeImageOval (oval)
• InitNodeImageFromFile (using an existing picture)

The node images can be saved to a folder by calling the SaveNodeImages method of OCMatrix. Another method of OCMatrix is SaveMatrixImage, which makes a complete image to be used as the background of the table.

Layout

A node can lay out its children horizontally or vertically. This is controled by the "SubNodesHorizontal" property of the parent node. In the above example, "Root" lays out its children ("A" and "B") horizontally, while "A" lays out its children ("A1" and "A2") vertically.

Another way is to let ActiveOC decide the layout by specifying a none-zero value for the first argument of CreateMatrix.

Further Readings

• OCNode Interface
• OCMatrix Interface