The following example shows how you can add and remove children from a Flex Accordion container by using the addChild() and removeChild() methods.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/18/dynamically-adding-new-children-to-a-flex-accordion-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.containers.VBox;
private const MAX_CHILDREN:uint = 5;
private function accordion_addChild():void {
if (accordion.numChildren < MAX_CHILDREN) {
var vbox:VBox = new VBox();
vbox.label = "child " + accordion.numChildren;
vbox.percentWidth = 100;
vbox.percentHeight = 100;
var randColor:uint = Math.random() * 0xFFFFFF;
vbox.setStyle("backgroundColor", randColor);
accordion.addChild(vbox);
}
}
private function accordion_deleteChild():void {
if (accordion.selectedChild) {
accordion.removeChild(accordion.selectedChild);
}
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:Button label="Add child"
click="accordion_addChild();" />
<mx:Button label="Delete child"
click="accordion_deleteChild();" />
</mx:ApplicationControlBar>
<mx:Accordion id="accordion" width="240" height="160" />
</mx:Application>
View source is enabled in the following example.
hello, citing from http://livedocs.adobe.com/flex/201/langref/mx/states/RemoveChild.html
“The RemoveChild class removes a child display object, such as a component, from a container as part of a view state. The child is only removed from the display list, it is not deleted.”
this will surely lead to memory leaking problems, and also forces me to reset the control’s contents each time they’re shown, how can I destroy a component?
Samus,
The component is destroyed just like any other class–when it is not accessible from the application (when all references are destroyed). Having a parent is a reference so being on the display list by definition keeps something alive. Having a reference to the component such as an instance variable also could keep it alive.
In the above example, however, the component is created as a function-local variable and added to the accordion. No other reference is kept so in this situation, the component is eligible for garbage collection when it’s removed from the display list.
HTH,
Sam
hi thanks for the reply! yes reading a little more seems that objects are destroyed when there’s no other reference to them, that reminds me of files in a unix filesystem; is quite tricky to me honestly I didn’t expected something like that because this forces me to keep track of references to the objects and it seems that event listeners also apply as references, perhaps you could suggest me some design patterns that are better to deal with this situation (I’m more used to the C approach and never worked in Java). I’m most worried about leaking memory because I left some references somewhere else :/ also I’ve found an interesting article about the garbage collectos itself here: http://www.adobe.com/devnet/flashplayer/articles/garbage_collection.html c’ya!
UPDATE: I’ve checked again that link and the links suggested there, there is a way to add the listeners as “weak references” that are ignored by the garbage collector; very interesting, that solves half of my problem of lost references.
check it here: http://www.adobe.com/devnet/flashplayer/articles/resource_management.html and here: http://www.gskinner.com/blog/archives/2006/07/as3_weakly_refe.html
hey, what if I wanted to put the add and remove functions into there own class? when i do that, it says that “accordian.addchild…” is undefined. I’m trying to learn how to make my code more modular, and if someone could explain this it would be very helpful. thanks!
on a dynamically created accordion like this, how would you create a DataGrid that pulls from live data? Been working on it for about 3 days now, and get stumped by adding a child under a child.
Awesome examples they are a huge help to new Flex-ers
peter,
what about the contents of the remaining children? i’ve got an accordion setup in mxml that i reconfigure by deleting children. what i’m seeing is the contents of the remaining children (all List) aren’t getting rendered until the user changes the selectedIndex. i’ve tried pretty much all the tricks i know to get the List contents to render after deleting the child (creationPolicy, etc.) but no luck.
any ideas?
ps: i guess no need to keep repeating how much we love this blog, but what the heck, “we love this blog” ;-)
PaulH,
Apart from setting the
creationPolicyproperty, I don’t have any other immediate ideas. And you tried setting thecreationPolicyto “all”, or setting it to “auto” then “all”?If you think it is a bug, file it at http://bugs.adobe.com/flex/ and solicit a few votes and then somebody at Adobe can take a look.
Peter