11 Replies Latest reply on Apr 24, 2009 2:18 PM by Steve Howard, ACP

    Newbie Question: Popup not visible when converted to a component

    Steve Howard, ACP Level 3

      I built a demo app a little while ago to get my feet wet with Flex. I don't have a good grasp of breaking everything into nice, clean components etc, so the initial demo was a single MXML file.

       

      Knowing the error of my ways, I've started recreating the app, trying to do it more better (yeah I know it will still be as not-quite-perfect as my grammar, but I'm trying  ... <grin>)

       

      So I made a simple app that reads XML and displays a popup menu with items populated from the XML. Works great while my popup code is in the main mxml file, but when I moved it to an MXML component, it broke. The popup doesn't display.

       

      Checking the debugger shows the popup is created, is populated, and Flex says it is visible with 0.8 alpha, as per my specs. So it seems to me that he code is working correctly, but the popup is somehow hidden ...

       

      In my main mxml I call the popup by clicking a button. The button click code is (not sure how well these forums deal with code, so I attached full source zip with .txt ext):-

       

       

       

       

       

      private function setMenu():void

      {

      reportsMenu=myXMLcall.xList;

      dispMenu=

      new navMenu;

      dispMenu.displayMenu(reportsMenu);

      }

       

       

      The navMenu component is as follows:-

       

       

       

       

       

       

       

       

       

       

      public function displayMenu(treeData:XMLListCollection):void

      {

       

       

      if (popupMenuContainer==null)

      {

       

       

       

      popupMenuContainer =

      new TitleWindow();

       

      popupMenuContainer.width = 400;

      popupMenuContainer.height=650;

      popupMenuContainer.x= 0;

      popupMenuContainer.y= 40;

      popupMenuContainer.alpha=0.8;

      popupMenuContainer.showCloseButton=

      true;

      popupMenuContainer.addEventListener(CloseEvent.CLOSE, titleWindow_close);

       

       

      popupMenuTree =

      new Tree();

      popupMenuTree.percentWidth=100;

      popupMenuTree.percentHeight=100;

      popupMenuTree.dataProvider=treeData;

      popupMenuTree.labelFunction=treeLabel;

      popupMenuTree.iconFunction=treeIcon;

      popupMenuTree.dataTipFunction=dataTipFunction;

      popupMenuTree.addEventListener(ListEvent.ITEM_CLICK, popupTree_itemClick);

       

      popupMenuContainer.addChild(popupMenuTree);

       

      }

       

      popupMenuContainer.title =

      "Select a report to view";

      PopUpManager.addPopUp(popupMenuContainer,

      this, true);

      }

       

       

      TIA

       

      Steve

       

      Message was edited by: Steve Howard

        • 1. Re: Newbie Question: Popup not visible when converted to a component
          Gregory Lafrance Level 6

          I tried to simplify for clarity:

           

          ---------------------- components/MyPopup.mxml ---------------------------

          <?xml version="1.0" encoding="utf-8"?>
          <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml">
          </mx:TitleWindow>

           

          ---------------------- MainApp.mxml -----------------------------------

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
            <mx:Script>
              <![CDATA[
                import mx.controls.Tree;
                import components.MyPopup;
                import mx.containers.TitleWindow;
                import mx.collections.XMLListCollection;
                import mx.managers.PopUpManager;
               
                private var popupMenuContainer:MyPopup;

                public function addPopup():void{
                  if (popupMenuContainer==null){
                    popupMenuContainer = new MyPopup();
                    popupMenuContainer.width = 400;
                    popupMenuContainer.height=650;
                    popupMenuContainer.x= 0;
                    popupMenuContainer.y= 40;
                    popupMenuContainer.alpha=0.8;
                    popupMenuContainer.showCloseButton = true;
                    var popupMenuTree:Tree = new Tree();
                    popupMenuTree.percentWidth=100;
                    popupMenuTree.percentHeight=100;
                    popupMenuContainer.addChild(popupMenuTree);
                  }
                  popupMenuContainer.title = "Select a report to view";
                  PopUpManager.addPopUp(popupMenuContainer,this, true);
                }     
              ]]>
            </mx:Script>
            <mx:Button label="Click" click="addPopup()"/>
          </mx:Application>

          • 2. Re: Newbie Question: Popup not visible when converted to a component
            Steve Howard, ACP Level 3

            Thanks.

             

            When I had it that way - with all the popup code in my main MXML, and with a button to click also in my main MXML, it worked perfectly.

             

            But when I move the code to a component "navMenu" , it stops displaying, even though the debugger says that the component exists, the data is populated, and visible property is true.

             

            I don't see that you changed anything other than taking the code back into the main MXML. Did I overlook something?

             

            Steve

            • 3. Re: Newbie Question: Popup not visible when converted to a component
              Gregory Lafrance Level 6

              The fact that you had this in your code led me to believe it was in the main app mxml file:

               

              PopUpManager.addPopUp(popupMenuContainer,

              this, true);

               

              You don't want to add the popup to itself, so I would think this line would be in the main app, so "this" refers to the main app as the parent of the popup.

               

              I guess your code was a bit confusing.

               

              Maybe post simplified yet complete code showing exactly what is in the component and what is in the main app. But cut out the unnecessary code like the tree.

              1 person found this helpful
              • 4. Re: Newbie Question: Popup not visible when converted to a component
                Steve Howard, ACP Level 3

                OK so this

                 

                 

                PopUpManager.addPopUp(popupMenuContainer,

                this, true);

                 

                 

                is likely to be my error - since the code was copied from my main XML. My newbie ignorance didn't realise that this would not work.

                 

                So I need to change 'this' to a reference to my main app? I'll have a play ...

                 

                Steve

                • 5. Re: Newbie Question: Popup not visible when converted to a component
                  colemanb

                  i don't think i've ever tried to call a popup from itself

                   

                  if you have the view for the poup in a class called let's say MyPopup

                  you could just do something like this (from the main app or any component) to call it on button click

                   

                  private function buttonClick():void{

                     var popup:MyPopup = PopUpManager.createPopUp(this, MyPopup, true) as MyPopup; 
                     PopUpManager.centerPopUp(popup);

                  }

                   

                  so then you aren't trying to call the popup from inside itself

                   

                  if you want to keep a reference to your popup going use something like

                   

                  private var popup:MyPopup;

                  private function buttonClick():void{

                     popup = PopUpManager.createPopUp(this, MyPopup, true) as MyPopup; 
                     PopUpManager.centerPopUp(popup);

                  }

                   

                  then you can reference public values of popup later on or whatever you want

                  1 person found this helpful
                  • 6. Re: Newbie Question: Popup not visible when converted to a component
                    Steve Howard, ACP Level 3

                    "i don't think i've ever tried to call a popup from itself"

                     

                    :-) Yeah now that I look at it with new eyes, what I have is a real mess isn't it. I had a fundamental misunderstanding that is slowly clearing up.

                     

                    What I need to do now is create the view that you mentioned, then I should be able to make this work.

                     

                    Please correct me if I'm wrong here - I should be aiming to create two files now

                     

                    myPopup.as

                    MyPopup.MXML

                     

                    One with logic, the other with the view component. One step at a time ...

                     

                    Thanks guys. With any luck I'll have this cracked by the end of the day  ;-)

                     

                    Steve

                    • 7. Re: Newbie Question: Popup not visible when converted to a component
                      colemanb Level 1

                      yeah or just one file, either the mxml or the as

                      you don't have to have 2, unless you have a ton of logic that just needs to be seperated out

                       

                      you could do it all in as by extending the TitleWindow class and doing everything in actionscript

                      • 8. Re: Newbie Question: Popup not visible when converted to a component
                        Steve Howard, ACP Level 3

                        "you could do it all in as by extending the TitleWindow class and doing everything in actionscript "

                         

                        That's actuallly what I am trying to do. I've just not grasped all the things I need to allign right yet. Working on it though :-)

                         

                        Steve

                        • 9. Re: Newbie Question: Popup not visible when converted to a component
                          Gregory Lafrance Level 6

                          Usually you create your component, in this case with a root tag of TitleWindow, in a separate .mxml file, and then you "pop it up" by having this code in your main app:

                           

                          PopUpManager.addPopUp(popupMenuContainer,this, true);

                          Because that code will be in your main app, "this" will naturally refer to your main app.

                           

                          See this LiveDocs link:

                           

                          http://livedocs.adobe.com/flex/3/html/help.html?content=layouts_12.html

                           

                           

                          ---------------- MyLoginForm.mxml --------------------

                          <?xml version="1.0"?>
                          <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml">
                             
                              <mx:Script>
                                  <![CDATA[
                                      import mx.managers.PopUpManager;
                                     
                                      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:TitleWindow>

                           

                          --------------------- MainApp.mxml --------------------------

                          <?xml version="1.0"?>
                          <!-- containers\layouts\MainMyLoginForm.mxml -->
                          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

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

                                      private function showLogin():void {
                                          // Create a non-modal TitleWindow container.
                                          var helpWindow:IFlexDisplayObject =
                                              PopUpManager.createPopUp(this, MyLoginForm, false);
                                      }
                                  ]]>
                              </mx:Script>
                             
                              <mx:VBox width="300" height="300"> 
                                  <mx:Button click="showLogin();" label="Login"/>
                              </mx:VBox>
                          </mx:Application>

                          • 10. Re: Newbie Question: Popup not visible when converted to a component
                            Steve Howard, ACP Level 3

                            OK thanks to the clues posted here I have a working popup - still got some things to address but hopefully I can work them out.

                             

                            For anyone hoping to learn from my mistake, here's what I have so far, and this correctly displays what I need but is not yet fully functional:-

                             

                            in my main app MXML

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                            private function setMenu(): void

                            {

                                 reportsMenu=myXMLcall.xList;

                                 dispMenu=

                            new navMenu;

                                 dispMenu.displayMenu(reportsMenu);

                                 PopUpManager.addPopUp(dispMenu,

                            this, true

                            );

                             

                             

                             

                             

                             

                            then in my component, navMenu (I omitted imports, var declarations, and additional functions like treeLabel)

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                             

                            <?xml version="1.0" encoding="utf-8"?>

                            <mx:TitleWindow

                             

                             

                            xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >

                             

                             

                             

                            <mx:Script>

                            <![CDATA[

                             

                             

                             

                             

                             

                             

                             

                            public function displayMenu(treeData:XMLListCollection):void

                            {

                             

                             

                                 popupMenuTree =

                            new Tree();

                                 popupMenuTree.percentWidth=100;

                                 popupMenuTree.percentHeight=100;

                                 popupMenuTree.dataProvider=treeData;

                                 popupMenuTree.labelFunction=treeLabel;

                                 popupMenuTree.iconFunction=treeIcon;

                                 popupMenuTree.dataTipFunction=dataTipFunction;

                                 popupMenuTree.addEventListener(ListEvent.ITEM_CLICK, popupTree_itemClick);

                             

                                

                            this.addChild(popupMenuTree);

                             

                            }

                             

                             

                             

                             

                             

                             

                             

                            ]]>

                             

                             

                            </mx:Script>

                             

                             

                             

                             

                            </mx:TitleWindow>