OrgChart with flipping renderers
Several times discussions at ILOG raised the fact that having an organization chart with a flip effect on renderers would be nice. Indeed you would see basic information on the main side of the renderer and (for example) clicking on it would flip the renderer with a nice effect, showing more information. Unfortunately we never had the time to implement the flip effect and it stayed at the “good idea” stage and never reached the feature stage.
However I recently came across the implementation of a flip effect made available by Alex Uhlmann on his blog. So it was then just a matter of mixing a Flex custom effect with a Flex custom component (ILOG Elixir OrgChart). That couldn’t be too hard, so I gave it a try and here is the result (click on a person to see the effect):
Basically what I did was pretty simple, I just created a new item renderer for the OrgChart component that is made of 2 sub components. The first one being the simple view and the second one being the detailed view. When calling the flip() method on the custom item renderer, the display is flipped using Alex effect from the current view to the other one.
Then in my application I just used the FlipRenderer instead of the default organization chart renderer and called its flip() method when someone is clicking on a given item renderer:
<ilog:OrgChart dataProvider="{employees}" width="100%" height="100%"
itemClick="FlipRenderer(event.itemRenderer).flip()">
<ilog:itemRenderer>
<mx:Component>
<local:FlipRenderer/>
</mx:Component>
</ilog:itemRenderer>
</ilog:OrgChart>
And that’s all! I’m always amazed how Flex components can be mixed pretty easily to enhance an existing display, and this example was yet another proof of that. You can have a look at the full source code of the demo by downloading the Flex Builder project here. To run it, you will need ILOG Elixir and Alex effects library.
Tags: Effects, Flex, ILOG Elixir, Org Chart
February 27th, 2008 at 1:41 am
Hi,
I trying to use the same effect for one of my demo purpose.
The functionality is working for me. Can you guide me thru the steps n procedures you had followed to make this work?
thanx in advance.
Rgds,
vinod aka V
February 27th, 2008 at 5:29 am
Hi Vinod,
Are you trying to use the effect with the OrgChart too? Or with another component?
April 18th, 2008 at 4:31 pm
Hello Christophe,
I was playing around with this and trying to plug this into my ILog Elixir dev environment in Flex Builder 3. I did include the DistortionEffects.swc into my project but still keep getting a “An internal build error occurred.”.
Does this work with Flex Builder 3 ? The reason I am asking is because the error log is referring to flex2 ?
This is what the error log says:
STACK 0
java.lang.NullPointerException
at flex2.compiler.util.LocalLogger.checkPath(LocalLogger.java:572)
at flex2.compiler.util.LocalLogger.logError(LocalLogger.java:322)
at flex2.compiler.mxml.LogAdapter.logError(LogAdapter.java:487)
at flex2.compiler.util.ThreadLocalToolkit.logError(ThreadLocalToolkit.java:370)
at flex2.compiler.as3.Compiler$CompilerHandler.error(Compiler.java:80)
[...]
April 19th, 2008 at 6:26 am
This is working perfectly fine with Flex Builder 3.0 here. I have no idea why it does not work for you. The full stack trace being in Adobe code I suggest you check with them in which case such an error can occur. A guess would be that one of the path in your library path or something is not available?
April 28th, 2008 at 8:10 pm
i want triggle the flip effect by doubleclick.what shall i do ?
April 30th, 2008 at 11:55 am
@yellow, just change the code of the application to call the flip function on itemDoubleClick instead of itemClick?
May 14th, 2008 at 1:54 am
Hi
I have read the post and found pretty impressive replies.
Hope you have suggestion/ comments for my post as well.Please HELP!
Would like to add the images (.gif, .jpg..) to the detailed item renders.Please suggest.
UR help will be highly appriciated
May 14th, 2008 at 5:59 am
@Ritesh, not sure what you want to do. But if you want to add pictures to the detailed item renderer that is feasible. See pictureField here
May 14th, 2008 at 6:47 am
Hi Christophe
Thanks for the message, but i dont want to show picture in the picture field.
There are certain status icons that i would like to display in the detailed item renderer.
Suppose i want to show the whether icon “Summer”, “snowfall” ,”rainy” after all the details like name , location etc.
Hope i have made my self clear this time.
May 14th, 2008 at 6:51 am
How can we add a customised field in the above code, lets suppose I want to show some icons in the node which are not mentioned in Org Chart. Tried a lot but to no success. Please suggest.
May 14th, 2008 at 6:58 am
Hi Ritesh,
I see you have posted your question on our forum at:
http://forums.ilog.com/elixir/index.php?topic=525.0 you should get an answer there pretty soon.
May 23rd, 2008 at 6:38 am
For those who experience weird drawing with the effect you might want to read that blog post:
http://twopointoh.vox.com/library/post/line-artifact-in-alex-uhlmanns-flip.html which highlights a problem in the effect library.
June 17th, 2008 at 10:58 am
I imported this file into FB3, updated the build-path toinclude the swc’s for elixir and distortionEffects and I get the following error:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at SimpleOrgChartItemRenderer/layoutChildren()[C:\Users\tmayo.HOME\Documents\Flex Builder 3\ilogFlipChart\src\SimpleOrgChartItemRenderer.as:61]
[...]
–it’s choking at line #61 of SimpleOrgChartItemRenderer.as -
image.move(x, y);
Any thoughts or suggestions as to what I may’ve neglected to include?
Thanks much -
tom
June 18th, 2008 at 2:54 am
@Tom it looks like you are running the example with ILOG Elixir patch 1? That is probably be the origin of the problem as we introduced an optimization that might cause the exception. I will come up with a fixed sample for patch 1 and let you know. Meanwhile you can try without the patch…
June 18th, 2008 at 4:33 am
As mentioned above, I have updated the sample linked in the blog post to be compatible with ILOG Elixir 1.0 patch 1 in addition to ILOG Elixir 1.0 base version.
June 19th, 2008 at 12:09 pm
That’s got it - Thanks Christophe!
-tom
August 23rd, 2008 at 7:56 pm
Christophe,
How would you suggest applying LOD to SimpleOrgChartItemRenderer?
Thx.
August 28th, 2008 at 2:31 am
@Jeff
I have no specific suggestion as my idea behind SimpleOrgChartItemRenderer was actually to just draw the name the person and not several stuff depending on the LOD. However I’m pretty sure that looking at the code of the OrgChartItemRenderer you could find information on how to implement LOD for a renderer. If you have more specific questions don’t hesitate to ask them on our forum at: http://forums.ilog.com/elixir/index.php?board=7.0