The Node class was simple, the Organigram is not going to be different, as we did before we need to implement a constructor, override some functions and implement some additional functions.

Calculating the size (width and height) of the organigram
Let's check the picture

In the previous step I left an important implementation, it is important because every class visual or not must have it, it is called the constructor and it has the same as the class that is being implemented, in our case we have the following code for the constructor.

// Implement class constructor
public function Node(): void {
	super(); // always call the superclass constructor in aour case Canvas
		
	setStyle("backgroundImage", normalSkin); // Setting up the background image

Before reading this step, you have to download the source code of this control from the FlexTuts Library section, that way it will be easier to understand what we are doing.

Calculating the size (width and height) of a node
The following image will help us calculate the total width and height

from the image we can say:

nodeWidth = border + picture.width + space + title.width + border

In this step we will create and organize the library project and a flex application project to test the library, from now on I'll assume that you have installed the Flex Builder 3.

Creating the library project: FlexTutsLibrary
To create a library project in Flex Builder 3 go to File>New>Flex Library Project. A window will be shown. Then fill the Project name field with 'FlexTutsLibrary' or the name you want to give to your library and click Finish at the bottom.

Creating the flex application: Organigram

In order to create a visual control I think it is important to have an image where you can analyze the behavior, here is my first visualization for this control.

As you see it's not much impressive but good enough to analize behavior, from the image we can conclude and/or assume:

Conclusions

• Each box in the image will be called 'node'.
• Each node can have zero, one or more children.

There are many solutions for this out there but I haven’t found any of them for free or as Open Source, so here we are going to learn how to make one from scratch. This version is written in Action Script 3, and it is part of the FlexTutsLibrary. If you want to know what the final product of this tutorial looks like, see it here: view Demo.

To get the FlexTutsLibrary for your projects go to the FlexTuts Library section and download the latest release.