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

Change Color

How to change color of SWF file .

[Embed(source="../../resources/assets/NormalNode.swf", symbol="Node_normal")]
public var normalSkin:Class;
[Embed(source="../../resources/assets/ActiveNode.swf", symbol="Node_active")]

The prefix "abc" for element "abc:abcChart" is not bound

TypeError: Error #1083: The prefix "xyz" for element "xyz:xyzChart" is not bound.
at xyz.controls::CardChart/getXML()[D:\ORGChartLibrary\xyz\controls\CardChart.as:287]
at xyzChart/handleGetXML()[D:\xyzOrgChart\src\xyzChart.mxml:68]
at xyzChart/___xyzChart_Button4_click()[D:\xyzOrgChart\src\xyzChart.mxml:133]

Thank you very much for your code

Hi,Jorge!
Thank you very much for your code,
it gives me a lot of help.
Thank you again.^_^
Xuan Chen

Newbie Help!

Hi Jorge!

Can you please help me compiling your application? I've downloaded and extracted the Projects.zip file. I've already installed Flex SDK 3 and added mxmlc into my path. Which is the command I compile your organigram-app, where will the swf-files be placed? I'm just very new to Flex/AS and try to make my first steps in the area.

Thanks in advance!
Anton

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

Getting The prefix "xyz" for element "xyz:xyzChart" is

Hi

while click on GETXML button am getting some error and my xml is not generating. As I have change the XML element to xyz:xyzChart. i am getting this error

================
TypeError: Error #1083: The prefix "xyz" for element "xyz:xyzChart" is not bound.
at xyz.controls::CardChart/getXML()[D:\ORGChartLibrary\xyz\controls\CardChart.as:287]
at xyzChart/handleGetXML()[D:\xyzOrgChart\src\xyzChart.mxml:68]
at xyzChart/___xyzChart_Button4_click()[D:\xyzOrgChart\src\xyzChart.mxml:133]
=======================
Could please help me in this regard. Any suggestion will highly appricate.

Thanks

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

How did it work?

Hi Hariharan!

I get the same errors like you:

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

But I don't understand what you mean by: "We have added the .as file to the path where the MXML file is present". Which .as file? how have you added it to which MXML-file? Please help me!
Thanks
Anton

May be you should add the reference to the library

Hi Anton!
I meet the same problem like you:
But I solve it by adding the Library path refer to the "FlexTutsLibrary" project when I create the Organigram flex project...
I think it may be help ^_^

Xuan Chen

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!