CODEWITHSUNDEEP
actionscript-3apache-flex
Kishor Kumar
Kishor Kumar

Reputation: 543

Display List Architecture in Flex

I'm asked about Display List architecture in Flex at an interview. Later I searched about it but no use. Any help is appreciated.

Upvotes: 1

Views: 687

Answers (2)

www0z0k
www0z0k

Reputation: 4434

seems like the question should really sound as follows:
when you write <s:Application> (or any other SkinnableContainer / UIComponent) in your mxml code -- what is the structure of the resulting display list?

so you should do something like:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" applicationComplete="onAppComplete();">

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[

        import flash.display.DisplayObject;
        import flash.display.DisplayObjectContainer;
        import mx.controls.Alert;
        import mx.core.UIComponent;
        import spark.components.SkinnableContainer;
        private function onAppComplete(e:* = null):void {
            trace(parseList(stage));
            //Alert.show(parseList(stage));
        }

        private function parseList(uic:DisplayObjectContainer, prefix:String = '>'):String{
            prefix = prefix || '>';
            var retStr:String = '';
            for (var i:int = 0; i < uic.numChildren; i++ ) {
                retStr += prefix + uic.getChildAt(i).name + '\n';
                if (uic.getChildAt(i) is DisplayObjectContainer) {
                    retStr += parseList(uic.getChildAt(i) as DisplayObjectContainer, prefix + '>');
                }
            }
            return retStr; 
        }

        ]]>
    </fx:Script>
    <s:SkinnableContainer>
        <s:Panel>
            <mx:UIComponent>

            </mx:UIComponent>
        </s:Panel>
    </s:SkinnableContainer>
</s:Application>

(or maybe more complex) and study the output
the code above outputs

>root1
>>NewFile1
>>>ApplicationSkin3
>>>>Group4
>>>>>Group5
>>>>>>SkinnableContainer6
>>>>>>>SkinnableContainerSkin7
>>>>>>>>Group8
>>>>>>>>>Panel9
>>>>>>>>>>PanelSkin10
>>>>>>>>>>>RectangularDropShadow11
>>>>>>>>>>>Group12
>>>>>>>>>>>>Group13
>>>>>>>>>>>>instance36
>>>>>>>>>>>>Group14
>>>>>>>>>>>>>Group15
>>>>>>>>>>>>>>Label16
>>>>>>>>>>>>>>>instance33
>>>>>>>>>>>>>>>instance37
>>>>>>>>>>>>>Group17
>>>>>>>>>>>>>>UIComponent18

Upvotes: 1

user562566
user562566

Reputation:

The Display List is like a tree. Imagine the Stage object as the base of the tree. Think of MovieClips and Sprites that are added to the stage as branches and leaves coming off of the tree. The Display List also serves as the core for the event system in AVM2. Objects that are attached to the DisplayList (that is, they themselves or their parent, parents parent etc end up connecting to the Stage) can "bubble" events through the Display List.

Anyway that's my short little way of explaining it but you can get much more detailed information from these links:

http://www.adobe.com/devnet/flash/quickstart/display_list_programming_as3.html

http://tv.adobe.com/watch/colin-moocks-lost-actionscript-weekend/the-display-list/

Upvotes: 3

Related Questions