7 Replies Latest reply on Nov 4, 2009 7:39 AM by rexdtripod

    Anchor a button upper right in a panel?

    rexdtripod Level 1

      Have to anchor a button upper right in a panel.  Need it to stay anchored even when I use resize and move effects on the panel.  Want the button up top, not in the panel's content pane.

       

      The only way I know to get a button up there is to put it in the panel's titleBar.  If I want it to be anchored I'll have to put it in a container that supports constraints, like a Canvas, before putting it in the titleBar.  When I do this, constraints seem to go out the window.  They work somewhat but behave abnormally. 

       

      Here's a sample app (2 files) implementing this approach.  Compile and click the button down below.  The large panel with the button in its titleBar is supposed to shrink and hide behind the little video window.  It does, but the button in its titleBar doesn't go along for the ride.  It's not constrained.  Is there another approach to this?

       

      Main app file (constraints.mxml) followed by custom panel file (CustomPanel.mxml)...

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
          xmlns:custom="*"
          layout="absolute"
          initialize="init()">
          <mx:Script>
              <![CDATA[       
                  [Bindable]
                  private var vidX:Number;
                  [Bindable]
                  private var vidY:Number;
                  [Bindable]
                  private var vidW:Number;
                  [Bindable]
                  private var vidH:Number;
                  [Bindable]
                  private var panelX:Number;
                  [Bindable]
                  private var panelY:Number;
                  [Bindable]
                  private var panelW:Number
                  [Bindable]
                  private var panelH:Number;

       

                  private var open:Boolean = true;
                 
                  public function init():void
                  {
                      vidX = 20;
                      vidY = 20;
                      vidW = 180;
                      vidH = 120;
                     
                      panelX = 202;
                      panelY = 20;
                      panelW = 500;
                      panelH = 350;               
                 
                  }
                 
                  private function onButtonClick(e:MouseEvent):void
                  {
                      if(open)
                      {
                          inAndDownSize.play();
                          open = false;
                      }
                      else
                      {
                          outAndUpSize.play();
                          open = true;
                      }
                  }            
              ]]>
          </mx:Script>
         
          <!--  Effects -->
          <mx:Parallel id="outAndUpSize"
              duration="200">
              <mx:Move
                  target="{panel}"
                  xFrom="{vidX}" xTo="{panelX}"/>
              <mx:Resize
                  target="{panel}"
                  widthTo="{panelW}" heightTo="{panelH}"/>   
          </mx:Parallel>
          <mx:Parallel id="inAndDownSize">
              <mx:Move
                  target="{panel}"
                  xFrom="{panelX}" xTo="{vidX}"/>
              <mx:Resize
                  target="{panel}"
                  widthTo="{vid.width}" heightTo="{vid.height}"/>
          </mx:Parallel>
         
          <!--UI elements -->
          <custom:CustomPanel id="panel"
              x="{panelX}" y="{panelY}"
              width="{panelW}" height="{panelH}"
              layout="absolute">
          </custom:CustomPanel>   
          <mx:VideoDisplay id="vid"
              x="{vidX}" y="{vidY}"
              width="{vidW}" height="{vidH}"/>
          <mx:Button
              label="Click"
              horizontalCenter="0"
              bottom="10"
              click="onButtonClick(event)"/>
         
      </mx:Application>

       

       

       

      CustomPanel.mxml...

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
          layout="absolute"
          initialize="init()"
          creationComplete="onCreationComplete()">   
          <mx:Script>
              <![CDATA[
                  import mx.containers.Canvas;
                  import mx.controls.Button;       
                  private var button:Button = new Button();
                  private var canvas:Canvas = new Canvas();
                  private var style:CSSStyleDeclaration = new CSSStyleDeclaration();   
                 
                  private function onCreationComplete():void
                  {
                      canvas.width = parent.width;
                      canvas.height = parent.height;               
                      style.setStyle("left", 400);
                      button.id = "button";
                      button.label = "b";
                      button.width = 30;
                      button.height = 30;               
                      button.styleDeclaration = style;
                      canvas.addChild(button);
                      this.titleBar.addChild(canvas);
                  }   
              ]]>
          </mx:Script>   
      </mx:Panel>

        • 1. Re: Anchor a button upper right in a panel?
          Flex harUI Adobe Employee

          The title bar is pretty stupid.  It shouldn't require constraints.  Just move it on resize events.

          • 2. Re: Anchor a button upper right in a panel?
            rexdtripod Level 1

            The titleBar?  No, I guess you mean the button.  Trying that now.  Let me see if I can get that to work...

            • 3. Re: Anchor a button upper right in a panel?
              rexdtripod Level 1

              Hmmm...  Actually I can't get access to the titleBar.  Must be private.

               

              It's just odd that nobody considered that the top of the panel component might be used to hold sub combonents that would need to be constrained.  I have a button at the bottom of the panel that I can easily constrain inside a ControlBar.

              • 4. Re: Anchor a button upper right in a panel?
                Subeesh Arakkan Level 4

                Hi,

                There is not need to use Canvas to position it. override the updateDisplayList method and move the button. Check the code below.

                 

                <mx:Script>
                        <![CDATA[
                            import mx.controls.Button;
                            private var button:Button;
                            private var style:CSSStyleDeclaration = new CSSStyleDeclaration();  
                          
                               override protected function createChildren():void
                               {
                                   super.createChildren();
                                   button = new Button();
                                   button.label = "b";
                                button.styleDeclaration = style;
                                titleBar.addChild(button);
                               }
                            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                            {
                                super.updateDisplayList(unscaledWidth,unscaledHeight);
                                button.width = 30;
                                button.height = 30;
                                //move button to the top right
                                button.move(width - button.width - 5, 5);
                               
                            }
                        ]]>
                    </mx:Script>

                • 5. Re: Anchor a button upper right in a panel?
                  rexdtripod Level 1

                  Before you ever get to moving and resizing, there's the issue of anchoring the button in the first place.  Constraining it is how it should be done but there doesn't seem to be a way to do so.

                   

                  I've hardcoded it to an x position for now but it doesn't behave reliably.  When the app loads the button sometimes shows up in the middle of the panel and sometimes on the edge where it belongs.

                   

                  I keep thinking a panel might be the wrong component but I can't think of an alternative.

                  • 6. Re: Anchor a button upper right in a panel?
                    rexdtripod Level 1

                    I'll check that code out.

                    • 7. Re: Anchor a button upper right in a panel?
                      rexdtripod Level 1

                      Yep.  Does the trick.  I think I need a better understanding of UIComponent.

                       

                      Thanks for the assistance.