27 Replies Latest reply on Jul 13, 2007 10:27 AM by jfillman

    Positioning Pop-Ups

    jfillman Level 1
      I seem to only be able to specify the X and Y coordinates for pop-ups. I need my pop-up to always take up the right 70% of the application size and 100% of the height. The percentages need to stay consistent if the user re-sizes the main window. With regular items, this is quite simple, but I can't figure out how to do this with a pop-up.
        • 1. Re: Positioning Pop-Ups
          ntsiii Level 3
          I think you will have to do this manually. Have a resize handler in the parent app set the x,y properties of the pop-up (declare a reference variable in instance scope).

          Tracy
          • 2. Re: Positioning Pop-Ups
            jfillman Level 1
            Doesn't the x and y depend on the screen resolution? Then I have to first figure out the screen resolution, then decide on the x and y accordingly. It seems easier to use display states, and use the inherent resizing capabilities within the parent app.
            • 3. Re: Positioning Pop-Ups
              jfillman Level 1
              AIR and Flex 3 can handle this, sort of. If you use a Window component with a type of "utility" or "lightweight". I'd like to see an "inline" option that stays within the constraints of the parent application and looks like the TitleWindow or Panel containers.
              • 4. Positioning Pop-Ups
                levancho Level 3
                you can look into code for centerPopUp(popUp); and reuse that :)
                • 5. Re: Positioning Pop-Ups
                  jfillman Level 1
                  I'm making progress. This works:

                  this.y = 0;
                  this.x = parent.width * .7;

                  However, if the parent window is resized, the popup is off the screen. Any ideas on how to resolve this?
                  • 6. Re: Positioning Pop-Ups
                    ntsiii Level 3
                    Create a resize handler function. In that, calculate the new position abd assign the values to an instance level reference to the pop-up. I've done this successfully. If you have trouble post here and I will try to find sopme code.

                    Tracy
                    • 7. Re: Positioning Pop-Ups
                      jfillman Level 1
                      Tracy,

                      I was playing with that idea but couldn't figure out how to consistently identify the popup so that I could assign the new x coordinate.
                      • 8. Re: Positioning Pop-Ups
                        ntsiii Level 3
                        CreatePopUp returns a reference to the pop-up, so declare an instance variable and assign that refernce to it:
                        private var _popup1:MyPopUpClass:

                        private function showPopUp1():void {
                        _popup1 =CreatePopUp(MyPopUpClass......
                        }

                        private function setPopUpPosition()
                        var iX:int = calcX();
                        var iY:int = calcY()
                        _popup1.x = iX;
                        ...

                        Tracy
                        • 9. Re: Positioning Pop-Ups
                          jfillman Level 1
                          I'm not doing something quite right. My code below:

                          <?xml version="1.0" encoding="utf-8"?>
                          <mx:WindowedApplication xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp();" resize="resizeApp();">

                          <mx:Script>
                          <![CDATA[
                          import mx.managers.PopUpManager;
                          import mx.core.IFlexDisplayObject;
                          import MyLoginForm;

                          private var helpWindow:IFlexDisplayObject;

                          private function initApp():void{
                          maximize();
                          }

                          private function showLogin():void {
                          helpWindow = PopUpManager.createPopUp(this, MyLoginForm, false);
                          }

                          private function resizeApp():void{
                          //This doesn't work
                          //helpWindow.x = 0;
                          //helpWindow.y = parent.width * .7
                          }

                          ]]>
                          </mx:Script>

                          <mx:VBox width="300" height="300">
                          </mx:VBox>
                          <mx:Button click="showLogin()" label="Login" x="10" y="10"/>
                          </mx:WindowedApplication>

                          *******MyLoginForm.mxml***************************
                          <?xml version="1.0"?>
                          <!-- containers\layouts\myComponents\MyLoginForm.mxml -->
                          <mx:TitleWindow xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="initWindow();" showCloseButton="true" close="PopUpManager.removePopUp(this);">

                          <mx:Script>
                          <![CDATA[
                          import mx.managers.PopUpManager;

                          private function initWindow():void {
                          PopUpManager.bringToFront(this);
                          this.y = 0;
                          this.x = parent.width * .3;
                          this.height = parent.height;
                          this.width = parent.width * .7;
                          }

                          private function processLogin():void {
                          // Check credentials (not shown) then remove pop up.
                          PopUpManager.removePopUp(this);
                          }
                          ]]>
                          </mx:Script>

                          <mx:Form>
                          <mx:FormItem label="User Name">
                          <mx:TextInput id="username" width="100%"/>
                          </mx:FormItem>
                          <mx:FormItem label="Password">
                          <mx:TextInput id="password"
                          displayAsPassword="true"
                          width="100%"/>
                          </mx:FormItem>
                          </mx:Form>
                          <mx:HBox>
                          <mx:Button click="processLogin();" label="OK"/>
                          <mx:Button
                          label="Cancel"
                          click="PopUpManager.removePopUp(this);"/>
                          </mx:HBox>
                          <mx:Text id="myText" text="{parent.width}" width="88"/>
                          </mx:TitleWindow>

                          • 10. Re: Positioning Pop-Ups
                            ntsiii Level 3
                            Hmm, that is almost exactly what I recall doing.

                            Where is the failure ocurring?

                            Tracy
                            • 11. Re: Positioning Pop-Ups
                              jfillman Level 1
                              This is where the problem is:

                              private function resizeApp():void{
                              //This doesn't work
                              helpWindow.x = 0;
                              helpWindow.y = parent.width * .7
                              }

                              This is the error:
                              TypeError: Error #1009: Cannot access a property or method of a null object reference.
                              at Windows/::resizeApp()
                              at Windows/___Windows_WindowedApplication1_resize()
                              at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
                              at flash.events::EventDispatcher/dispatchEvent()[C:\Documents and Settings\acrorel\Local Settings\Temp\aslibc-28157\EventDispatcher.as:209]
                              at mx.core::UIComponent/dispatchEvent()
                              at mx.core::UIComponent/::dispatchResizeEvent()
                              at mx.core::UIComponent/setActualSize()
                              at mx.managers::SystemManager/::initializeTopLevelWindow()
                              at mx.managers::SystemManager/::docFrameHandler()
                              • 12. Re: Positioning Pop-Ups
                                ntsiii Level 3
                                So the helpWindow variable is null?

                                See if you can access that var directly after the createPopUp call.
                                helpWindow = PopUpManager.createPopUp(this, MyLoginForm, false);
                                helpWindow.x = 100;
                                helpWindow.y = 100;
                                helpWindow.title = "some bogus string";
                                • 13. Re: Positioning Pop-Ups
                                  jfillman Level 1
                                  If I add the lines to set x and y, the popup doesn't appear at all, but I don't get an error either.

                                  private function showLogin():void {
                                  helpWindow = PopUpManager.createPopUp(this, MyLoginForm, false);
                                  helpWindow.x = 0;
                                  helpWindow.y = parent.width * .7
                                  }
                                  • 14. Re: Positioning Pop-Ups
                                    ntsiii Level 3
                                    Hmm, try typing the helpWindow as MyLoginForm instead of IFlexDisplayObject
                                    Tracy
                                    • 15. Positioning Pop-Ups
                                      jfillman Level 1
                                      That gives me a build error. I believe this to be a bug. I've tried it in Flex 2 and Flex 3, with and without AIR. None work. Flex 2 doesn't generate an error, but doesn't work either. It makes no sense that the creationComplete event can access the popup and the resize event cannot.

                                      Severity and Description Path Resource Location Creation Time Id
                                      1118: Implicit coercion of a value with static type mx.core:IFlexDisplayObject to a possibly unrelated type MyLoginForm. Windows Windows.mxml line 17 1183740043152 1162
                                      • 16. Re: Positioning Pop-Ups
                                        ntsiii Level 3
                                        You'd need to import MyLoginForm.
                                        • 17. Re: Positioning Pop-Ups
                                          jfillman Level 1
                                          Yes, I do import it. See code below:

                                          <mx:Script>
                                          <![CDATA[
                                          import mx.managers.PopUpManager;
                                          import mx.core.IFlexDisplayObject;
                                          import MyLoginForm;

                                          private var helpWindow:MyLoginForm;
                                          • 18. Re: Positioning Pop-Ups
                                            ntsiii Level 3
                                            Ok, I'll see if I can find my code.
                                            Tracy
                                            • 19. Re: Positioning Pop-Ups
                                              ntsiii Level 3
                                              Ok, I got a sample working.

                                              The error you were getting was because resize was firing before the popup was created. Putting a check around the propety setting lines fixed it.

                                              I'll post the full sample on cflex in a few minutes.
                                              Tracy
                                              • 21. Re: Positioning Pop-Ups
                                                jfillman Level 1
                                                Thank you!! Works great!
                                                • 22. Re: Positioning Pop-Ups
                                                  jfillman Level 1
                                                  Tracy, this doesn't work if you have multiple popups open. This only resizes the selected popup. Is there a way to control the height and width of all open popup windows?
                                                  • 23. Re: Positioning Pop-Ups
                                                    ntsiii Level 3
                                                    Do you have an instance variable reference for each popup?

                                                    And in the resize handler are you setting the values for each?

                                                    Tracy
                                                    • 24. Re: Positioning Pop-Ups
                                                      jfillman Level 1
                                                      I don't set any limits to the number of popups, so I can't specifically create an instance variable for each one.

                                                      My component is titled "Desktop", I import it and I declare the variable:

                                                      public var popup:Desktop;

                                                      When the user clicks the button, this is executed:

                                                      popup = Desktop(PopUpManager.createPopUp(this,Desktop,false));
                                                      • 25. Re: Positioning Pop-Ups
                                                        jfillman Level 1
                                                        I've worked around this by limiting it to only opening 1 popup at a time. I don't particularly like to do this, nor do I like that removePopup or removeChild only removes it from the display and not the application immediately. From a memory usage standpoint, that's problematic. I understand why it may need to reside in the application but not be displayed in some scenarios. Is there a way to immediately remove it from the application? This doesn't seem to be a possibility.
                                                        • 26. Re: Positioning Pop-Ups
                                                          ntsiii Level 3
                                                          Add your references to an instance-level array when created. Then, in the resize handler, loop through the array and do the positioning/sizing.

                                                          Automatic garbage collection should remove any components that are unreferenced. This might mean you nneed to programatically remove event listeners. That is a complex topic in itself. google it if you want more detail.

                                                          Tracy
                                                          • 27. Re: Positioning Pop-Ups
                                                            jfillman Level 1
                                                            Thanks, that makes sense. I'll look into the event listeners as well.