7 Replies Latest reply on Jun 4, 2007 9:50 AM by peterent

    Child Panel behind Parent Panel


      I am not sure if it's possible but I am trying to emulate the OS X "drawer" widget using extended Panels.

      I currently have all the functionality that I want except for the hidden factor, i.e. The drawer panel is infront of it's parent window.

      <ui:ZWindow id="parent_window" drawer="{myDrawer}">
      <ui:Drawer id="myDrawer">

      Where Zwindow and Drawer and extended mx:Panels that can be moved around etc.

      Is this even possible? Clipping? I have tried setting the child Index with no luck....

      Any help is much appreciated!
        • 1. Re: Child Panel behind Parent Panel
          I don't know OS X but you should be able to bring ZWindow in front of Drawer with this in one of your classes:
          this.parent.setChildIndex(this.parent.getChildByName("parent_window"), this.parent.numChildren - 1);
          • 2. Re: Child Panel behind Parent Panel
            wasabi_gulper Level 1
            Thanks for the response, TheBorg!

            setChildIndex doesn't seem to be working though....

            What I have at the moment is a Panel called ZWindow with a Bindable public var "drawer" which gets binded to a Panel inside like so:

            [Bindable] public var drawer:Panel = new Panel();

            <ui:ZWindow id="parent_window" drawer="{myDrawer}">
            <mx:Panel id="myDrawer">

            So inside of ZWindow I add the drawer


            and then:

            override protected function createChildren():void {

            this.setChildIndex(drawer, -1);

            I can make the Drawer panel inside of the Window but I actually want it to appear behind, the panel out of view, so when i click a button inside of the ZWindow the Drawer panel slides out from left/right/bottom side....

            • 3. Re: Child Panel behind Parent Panel
              peterent Level 2
              You don't want to put anything behind anything for the type of effect you are talking about. The childIndex is the "depth" of the components as they are layered on top of each other like a deck of cards.

              For the effect you want - mx.effects.Move - you want to position the Drawer outside of the panel's visible area. For example, set the Drawer's x,y to be -1000,0 to be way off the left side. Then set the Move effect's xTo to be the place you want it to wind up:

              var m:Move = new Move( drawer );
              m.xTo = 100;

              Now the drawer will slide in from the left.
              • 4. Re: Child Panel behind Parent Panel
                wasabi_gulper Level 1
                Thanks, Peter!

                I am using mx.effects.Move - But I don't want the drawer to appear from the left, i want it to appear from behind the Window.

                Maybe I am not being clear, an example would be something like so:


                I have a Panel that has been extended so it can be moved around like a window and I want the ability to add sub panels (drawers) that will slide in/out from behind the left/right/bottom of the Window.

                What I have now is everything I want - the drawer is attached to the window and slides in and out wherever i drag the window - with the exception of the drawer being in front of the window.

                If childIndex is not the solution, what is? Maybe I am going about this the entirely wrong way...

                My desired workflow would be:

                1.) Create drawer(s)
                2.) Create window it's being attached to
                3.) Attach drawer(s) to the window and where its going to slide out from (left/right/bottom)

                Again, any help is greatly appreciated, even if it's impossible.
                • 5. Re: Child Panel behind Parent Panel
                  peterent Level 2
                  I think I understand. Check out the Distortion Effects from Alex Ulhmann's blog:

                  He's got some really cool effects and I think there's at least one you can use.
                  • 6. Re: Child Panel behind Parent Panel
                    wasabi_gulper Level 1
                    Thanks once again, Peter!

                    Those effects, although not quite what I am after, will definitely come in handy.

                    I think I have found a solution to my problem by enclosing 2 panels inside of parent container, like a canvas or a box, ala:

                    <mx:Panel id="drawer"></mx:Panel>
                    <mx:Panel id="window"></mx:Panel>

                    This way I have the drawer as childIndex[0] and the Window will be infront of it at childIndex[1].

                    I believe this will work, the only problem I see is a clipping problem as when I set focus on the drawer, I don't want the full drawer to come into focus, only the part that is visible outside from behind the window.... but I believe I can get around this by clipping...

                    If not, I guess I will just give up!
                    • 7. Re: Child Panel behind Parent Panel
                      peterent Level 2
                      Putting those components in a Canvas and using setChildIndex should work. For example, move drawer from behind window until it is fully visible, then change drawer's index to 1, which makes window's index 0, then move draw over top of window.

                      Each effect has an effectEnd event so once the move is complete you can change the index.

                      Also, check out clipContent on the Canvas to see if that helps.