AS3 / Flex 4: The Most Practical Way To Find Nested Children

Question

I’m kind of jumping in headfirst into some Flex / AIR stuff. I have a pretty solid background with AS3, but considering Flex’s inherent hierarchical complexity (compared to regular Flash), I ran into a problem.

Suppose you have an application in which almost everything is related to events (general). Access to elements in the immediate vicinity of the purpose of the event or the purpose of the event itself is trivial. However, I am trying to find the most practical (readable: best, most effective) way to find children who are far from the current context.

I know there are functions like getChildAt() and getChildByName() , but this assumes a parent context; What if the element (Flex) you are looking for is a few parents, a sibling, and then a few children? We take for granted things like jQuery that make it easy, but obviously we don't have that luxury in AS3.

Are there any of the following statements? Is there a better way?

• Iterate through the parents and parents of the parents until you find a breakpoint, find a sibling and repeat the game through the children and their children until you find your goal;

• Store key objects in the global object storage (sic) and reference them as needed (yech)

• Use a specific point notation to achieve the goal, including elements (for example, skins and their containers - again).

Any thoughts would be appreciated.

Edit:

To clarify, let's take the empty Flex 4 AIR application. Obviously, we have WindowedApplication as the root and add two SkinnableContainer children with the identifiers navContainer and mainContainer respectively. Both have custom skins. Inside mainContainer , we have another SkinnableContainer with vertical layout and mainContent ID, and as one of its child objects it has an object (anyone can do it - BorderContainer spark, possibly) with identifier animatedBox , for example. Inside navContainer we have a Button spark that has a listener rating for MouseEvent.CLICK . As part of this function, we will want to access the animatedBox ( nativeWindow.mainContainer.mainContent.animatedBox ) and animate it to change, say, its width.

The goal is to access this remote DisplayObject ( animatedBox ) in such a way that it is as unobtrusive and efficient as possible, although it meets Flex standards that I obviously did not already have. :)

Answer 1

in my implementation it is easy to do (however, this is in pure AS3):

in the display object that handles the click:

 private function onClick(e:MouseEvent):void{ Radio.broadcast(new CustomEvent(id, ..params)); } 

in animatedBox:

 Radio.addListener(id, new Reciever(uid, animate)); private function animate(e:CustomEvent) { //needed code and access of CustomEvent props you pass } 

UPD:

 package lazylib.broadcast { /** * ... * @author www0z0k */ public class Reciever { private var id: String; private var toRun: Function; /*@param nm - unique listener id - required *@param fn - event handler function - required*/ public function Reciever(nm:String, fn:Function) { id = nm; toRun = fn; } public function onEvent(e:* = null):String { if (e == null) { return id; } toRun(e); return id; } public function get ID():String { return id; } } } 

and

 package lazylib.broadcast { import flash.events.Event; import flash.events.EventDispatcher; /** * ... * @author www0z0k */ public final class Radio extends EventDispatcher { private static var listeners: Object = new Object(); private static var archive: Array = new Array(); private static var forSlowpokes: Object = new Object(); public static function get ForSlowpokes():Object { return forSlowpokes; } public static function addListener(type: String , listener: Reciever):Boolean { listeners['anchor'] = null; if (!listeners[type]) { var o: Object = new Object(); listeners[type] = o; } if (!listeners[type][listener.ID]) { listeners[type][listener.ID] = listener; return true; }else { return false; } } public static function broadcast(evt: * , singleUse:Boolean = false):void { var type:String = (evt as Event).type; if (listeners[type]) { var returned: Array = new Array(); for (var i: String in listeners[type]) { if(listeners[type][i]){ var fnRetVal: String = listeners[type][i].onEvent(evt); returned.push(fnRetVal); }else{ //trace("no listener for id = " + i + ' , type = ' + type); } } }else { //trace("nobody interested in : \"" + type + "\""); } if (singleUse) { forSlowpokes[type] = 'you missed it realtime'; delete listeners[type]; } } public static function clearDeadFuncs(namez:Object):void { for (var a:String in namez) { if (a != 'anchor') { killListener(a, namez[a]); } } } public static function killListener(type: String , id: String):Boolean { if (!listeners[type]) { //trace("there are no listeners for event : " + "\"" + type + "\""); return false; }else { if (!listeners[type][id]) { //trace("there is no \"" + id + "\" listener for event : " + "\"" + type + "\""); return false; }else { listeners[type][id] = null; //trace("removed listener \"" + id + "\" for event : " + "\"" + type + "\""); var evt2kill: Number = 0; for (var str: String in listeners[type]) { if (listeners[type][str]) { evt2kill++; } } if (evt2kill == 0) { delete listeners[type]; //trace("no more listeners for event : " + "\"" + type + "\""); return true; } return true; } } } } } 

delivered as is;)

Answer 2

We take for granted things like jQuery that make it easy, but obviously we don't have that luxury in AS3.

well there is this: http://tech.nitoyon.com/blog/2008/01/as3query_alpha.html

Answer 3

I have also asked myself this question many times. Still not figured out the final solution to the problem. Iterating through parents and parents is definitely a way, but it should be taken carefully, as relationships can change in your application at runtime. A few days ago, I wrote a simple method that allows you to iterate over all the parents of a given object. Definitely not an elegant solution, but it still works. The SWIZ framework also offers good methods to facilitate the exchange of information between objects through code entry and Event mediation. Maybe worth a look ...