Creating a simple Organigram control in Flex AS3

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.

This may be a very basic tutorial for many of you; if so, you are free to skip it and find one that make you feel you are, in fact, learning something :)

AttachmentSize
Projects.zip386.14 KB

Comments

found a bug

the lines between the nodes don't move in sync with the nodes in case the organigram is too big for the container

Help on Organigram

Hi,

I have just downloaded your code and Compiled the same where, I get 2 errors

organigram.mxml

line28: 1046: Type was not found or was not a compile-time constant: Node.

line90: 1046: Type was not found or was not a compile-time constant: Organigram.

I tried to work out the same but ended up in vain. Please do help me out...

Thanks in advance..

Regards
Hariharan D

May be the reference to the library

Hello Hariharan,

I think you need to check if the project have a reference to the library, there are two projects included, the one you are compiling needs a reference to the another.

Pls let me know if you get it compiled successfully, I don't have any compiler at this time, I'll chek it out tonight.

Best regards ;)
Jorge Sánchez

Reg: Reference to Library

Hi Jorge

We have added the .as file to the path where the MXML file is present, and the application runs perfectly.

We are trying to add a copy / cut / paste and drag and drop feature to your application. IS there any method or procedure we need to follow. we are trying very hard to implement the same. Please do help us to achieve these functions.

We thought of adding a zoom functionality to the organigram so we added this script

/*slider*/

private var TWidth:Number=0;
private var THeight:Number=0;

private function changeSize():void
{
grapharea.width=uint(TWidth*hSlider.value/100);
grapharea.height=uint(THeight*hSlider.value/100);
}
/*slider*/

the MXML code as

ft:Organigram id="organigram" nodeSelected="handleNodeSelected(event);" x="168" y="0" creationComplete="TWidth=grapharea.width; THeight=grapharea.height;"

mx:HSlider id="hSlider" minimum="0" maximum="100" value="100"
dataTipPlacement="top"
tickColor="black"
snapInterval="1" tickInterval="10"
labels="['0%','100%']"
allowTrackClick="true"
liveDragging="true"
change="changeSize();"

but when the slider is operated the nodes get disappeared leaving the sticks behind overlapped. please do guide us in this too.

Advance thanks

Regards

Hariharan D

hi

Hi,can you give me a mxml file about this example?
My email:lioony@163.com
Thanks :)

Hi!!

Hello lioony, I'm glad you are interested,

I have attached a zip file containing all you need to compile and generate the application.

Keep comming, you'll see new post here very soon.

Jorge ;)

Thanks

Thanks for your codes.
lioony :)

Iam waiting for the next

Iam waiting for the next article! :-)
Nice work! Thanks!