Question

I have placed two custom components in the flex 4 application

<preload:PreLoader horizontalCenter="0" verticalCenter="0" fontWeight="bold" fontSize="50" id="preLoader"/>
<util:Debug  top ="0" right="0" id="debug"/>

As per the order components added in the MXML, Debug will stay on top.

My intention is to always keep the Debug component on the top

the PreLoader component has all the logic to initializing the application including instantiation of some of the classes which intern has logic to add some other elements to the application (like below)

   FlexGlobals.topLevelApplication,addElement(someotherflexcomp);

Now, every time I add an element the normal behavior of flex/AS is that newly added element will stay on top of displaylist.

So I have written an function in the main app which needs to be called when ever a component/element is added to the main app.

       public function bringDebuggerFront():void{

            if (numElements > 2){

                swapElementsAt(numElements - 1,numElements - 2);
            }
        }

The idea here is straight forward, swap the display position of the last Nth(last element) element with the N-1 element which will be Debug component if called every time an element is added.

So, I need to add an extra line to reposition the debugger widow like this

    FlexGlobals.topLevelApplication,addElement(someotherflexcomp);
    FlexGlobals.topLevelApplication.bringDebuggerFront();

Not a big problem for now because, currently I am adding only three components in the run time, but I might add more in future and more over, I will have to work more (comment or remove that code scattered in multiple places) to disable this feature which is meant only for the debugging.

To avoid this, I attached add event listener which is suppose to be called when ever I add an element to the application but it seems like this is being called only for the two components which I have added in the mxml but not called when an element is added to the application using addElement() method

Here is the complete code of my main app

<?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" minWidth="955" minHeight="600" xmlns:util="util.*" xmlns:preload="preload.*"
               add="bringDebuggerFront()">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <preload:PreLoader horizontalCenter="0" verticalCenter="0" fontWeight="bold" fontSize="50" id="preLoader"/>
    <util:Debug  top ="0" right="0" id="debug"/>
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            public function bringDebuggerFront():void{

                if (numElements > 2){

                    swapElementsAt(numElements - 1,numElements - 2);
                }
            }
        ]]>
    </fx:Script>
</s:Application>

I even tried with added event also but I think thats the not correct one as its triggerning so many times which I am assuming is called for every internal displayobjects is added and also is giving errors which I did not digged into details

Thanks for the help in advance

Answer 1

If you are using Flex 4, you can achieve this with the depth property of the components