7 Replies Latest reply on Nov 5, 2009 9:13 AM by TomDelorenzi

    PopUpManager centering issue on window resize

    TomDelorenzi

      I am trying to make a maximizable title window that when you click the maximize button it becomes a popup that is centered. The code works fine when its in maximized mode, until you stretch the browser. The gradient background stretches correctly but the title window will move in odd ways. For example if you stretch the web browser window to the right(larger), at first the title window moves left, then if you make it even bigger it starts to move right again. Is there a preferred way to do this? My title window component has no layout values set except horizontalCenter at 0 and verticalCenter at 0

       

      Here is the code:

      package com.ericsson.components.containers
      {
          import flash.display.DisplayObject;
          import flash.events.Event;
          import flash.geom.Point;
         
          import mx.core.FlexGlobals;
          import mx.core.IVisualElementContainer;
          import mx.events.ResizeEvent;
          import mx.graphics.GradientEntry;
          import mx.graphics.LinearGradient;
          import mx.managers.PopUpManager;
         
          import spark.components.Group;
          import spark.primitives.Rect;

       

          public class MaximizableTitleWindow extends SparkTitleWindow
          {
              private var oldParent:IVisualElementContainer;
              private var oldPosition:Point;
              private var oldChildIndex:int;
              private var popupManagerGroup:Group;
              private var popupManagerBackground:Rect;
              public function MaximizableTitleWindow()
              {
                  super();
                  addEventListener("actionButtonClick",toggleMaximize);
                  popupManagerGroup=new Group();
                  popupManagerBackground=new Rect();
                  var fill:LinearGradient=new LinearGradient();
                  fill.entries=[new GradientEntry(0xFFFFFF,0,1),new GradientEntry(0xCCCCCC,0.5,1)];

       

                  popupManagerBackground.fill=fill;
                  popupManagerGroup.addElement(popupManagerBackground);
              }
              private function stageResized(evt:Event):void
              {
                  adjustSizeAndCenter();
              }
              private function adjustSizeAndCenter():void
              {
                  popupManagerBackground.width=root.width;//these shouldn't be needed either but using percentWidth didnt work right and this did
                  popupManagerBackground.height=root.height;       
                  //x=Math.max(0,root.width/2-width/2); //I commented out because this doesn't help and it shouldn't be needed anyways
                  //y=Math.max(0,root.height/2-height/2);
              }
              private function toggleMaximize(event:Event):void//called when they click the maximize button
              {
                  if(oldParent==null)//if we are not already maximized
                  {
                      oldParent=parent as IVisualElementContainer;//store the old parent to restore us to him later
                      oldPosition=new Point(this.x,this.y);//store this so we can reset it if needed
                      oldChildIndex=parent.getChildIndex(this);//store this so we can put ourself back in the right place
                      oldParent.removeElement(this);
                      popupManagerGroup.addElement(this);
                      PopUpManager.addPopUp(popupManagerGroup,oldParent as DisplayObject,true);
                      adjustSizeAndCenter();
                      root.addEventListener(ResizeEvent.RESIZE,stageResized);
                  }
                  else //remove us from the popupmanager and put ourself back where we belong
                  {
                      root.removeEventListener(ResizeEvent.RESIZE,stageResized);
                      PopUpManager.removePopUp(popupManagerGroup);
                      oldParent.addElementAt(this,oldChildIndex);
                      move(oldPosition.x,oldPosition.y);
                      oldParent=null;
                  }
              }
          }
      }

        • 1. Re: PopUpManager centering issue on window resize
          Flex harUI Adobe Employee

          PopUpManager doesn't know about layout values.  I would call PopUpManager.centerPopUp after you've adjusted the width/height.

          1 person found this helpful
          • 2. Re: PopUpManager centering issue on window resize
            TomDelorenzi Level 1

            Well after looking at the docs on that I realized i wasn't doing add popup right. I should have been passing the top level component to make it centered on the entire screen. So I changed that line to this:

            PopUpManager.addPopUp(popupManagerGroup,(FlexGlobals.topLevelApplication as DisplayObject),true);

             

            and changed the resize to this:

            popupManagerBackground.width=root.width;
            popupManagerBackground.height=root.height;
            popupManagerGroup.width=root.width;
            popupManagerGroup.height=root.height;
            PopUpManager.centerPopUp(popupManagerGroup);

             

            The behaviour is different but its still not centered. It moves around more smoothly with the resizing but not to the right place(IE no changing directions now atleast ).

             

            Any other thoughts?

            • 3. Re: PopUpManager centering issue on window resize
              Flex harUI Adobe Employee

              I think I"d listen for systemManager.stage to resize and use systemManager.screen.width/height instead of root.

              • 4. Re: PopUpManager centering issue on window resize
                TomDelorenzi Level 1

                Some more info on this. I don't think the issue is with the outer group object. I actually checked the size values I am getting from root, and though that may not be the best place to get them they are correct(I measured with paint). The problem appears to be that the title window I put inside the group gets moved around after I place it.

                 

                I even took the step of setting horizontal center and vertical center to null before putting it in there but no effect. So if a group has no layout values set(so basic layout) and the child component was created in mxml and uses no layout params(like left\right etc) it should just use the x,y that is hard set.

                As per the comments:

                When no constraints determine the position in the horizontal or vertical  direction, the element is positioned according to its x and y coordinates.

                What other factor could cause its x value to change. Here is the flow of the change

                -Resize event

                  center popup

                  calculate x,y for title window(the child of the group that is the popup)

                 

                -Next resize event

                  inspect x,y we set before, they are not what we set them too.

                 

                The only other pieces of info that are remotely related is there is that background gradient rect in the container behind the panel and the panel was subjected to a move action in mxml at some previous point in the application.

                • 5. Re: PopUpManager centering issue on window resize
                  Flex harUI Adobe Employee

                  File a bug with a test case.  Once you popup something it doesn't belong to any layout.  Popping up something that was a child of the app might be problematic.

                  • 6. Re: PopUpManager centering issue on window resize
                    TomDelorenzi Level 1

                    I was not able to reproduce this outside of my project. I will keep poking and if I find what the issue was I'll post it.

                    • 7. Re: PopUpManager centering issue on window resize
                      TomDelorenzi Level 1

                      Ok I fixed it. I had some other code the centered. That code was still getting resize events when the window resized, even though when in "maximized" mode it was not visible. This makes sense and it was adjusting the positon. Sorry for wasting your time