6 Replies Latest reply on Mar 11, 2010 6:59 AM by SiHoop

    Problem centering in a Panel

    SiHoop Level 1

      In the following code, I can't figure out how to center the Button and Text components that have been added to a Panel. I can move things vertically by using a Spacer, but I can't figure out how to move them horrizontally. I want to center them in the Panel.

       

      Can anyone tell me what I'm doing wrong?

      Thanks!

       

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

       

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"  horizontalAlign="center" verticalAlign="middle" backgroundColor="white"  applicationComplete="init()" borderStyle="none">

          <mx:Script>

              <![CDATA[

                  import mx.controls.Spacer;

                  import mx.controls.Text;

                  import mx.controls.Button;

                  import mx.controls.TextArea;

                  import mx.containers.Panel;

                  import mx.containers.Canvas;

                  import mx.containers.*;

                  import mx.managers.PopUpManager;

                  private var panel:Panel=new Panel();;

                  private function init():void {

                      var label:Text = new Text();

                      var spacer:Spacer=new Spacer

                      spacer.height=50

                      var button1:Button = new Button();

                      button1.label = "OK";

                      button1.addEventListener(MouseEvent.CLICK, closePopUp);

                      label.text = "Please enter your name:";

                      //panel.styleName="panel1"

                      panel.width = stage.stageWidth;

                      panel.height = 180;

                      panel.addChild(spacer);

                      panel.addChild(label);

                      panel.addChild(button1);

                      createPopUp()

                  }

                  private function closePopUp(evt:MouseEvent):void {

                      PopUpManager.removePopUp(panel);

                  }

                  private function createPopUp():void {

                      PopUpManager.addPopUp(panel, this, true);

                      PopUpManager.centerPopUp(panel);

                  }

              ]]>

          </mx:Script>

      </mx:Application>

        • 1. Re: Problem centering in a Panel
          Ansury Level 3

          Don't create your entire popup via ActionScript (ouch!), too painful.  Create a custom component like this, and then use that:

           

          PopupDialog.mxml:

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="156">
          
               <mx:Script>
                    <![CDATA[
                         import mx.managers.PopUpManager;
                         
                         private function ok():void {
                              
                              PopUpManager.removePopUp(this);
                         }
                    ]]>
               </mx:Script>
          
               <mx:Label x="55" y="30" text="Enter your name:"/>
               <mx:Button x="165" y="73" label="OK" click="ok()"/>
               <mx:TextInput x="165" y="28"/>
               
          </mx:Panel>
          
           
          

           

           

          (Of course design the component using whatever layout you want, doesn't need to be absolute, could use VBox, etc.)

           

           

          <?xml version="1.0" encoding="utf-8"?>
           
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"  horizontalAlign="center" verticalAlign="middle" backgroundColor="white"  applicationComplete="init()" borderStyle="none">
              <mx:Script>
                  <![CDATA[
                      import mx.managers.PopUpManager;
                      
                      private function init():void {
                           
                           var d:PopupDialog = PopUpManager.createPopUp(this, PopupDialog, true) as PopupDialog;
                           PopUpManager.centerPopUp(d);
                      }
                  ]]>
              </mx:Script>
              
          </mx:Application>
          
          • 2. Re: Problem centering in a Panel
            TanweerHq

            try this

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

             

             

            <mx:Application

             

             

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

            layout="

            absolute"

            backgroundColor="

            white"

            applicationComplete="init()"

            borderStyle="

            none">

             

             

             

            <mx:Script>

             

            <![CDATA[

             

             

             

            import mx.controls.Spacer;

             

             

            import mx.controls.Text;

             

             

            import mx.controls.Button;

             

             

            import mx.controls.TextArea;

             

             

            import mx.containers.Panel;

             

             

            import mx.containers.Canvas;

             

             

            import mx.containers.*;

             

             

            import mx.managers.PopUpManager;

             

             

            private var panel:Panel=new Panel();;

             

             

            private function init():void {

             

             

            var label:Text = new Text();

             

             

            var button1:Button = new Button();

             

            button1.label =

            "OK";

             

            button1.x = 200;

            button1.y = 200;

             

            button1.addEventListener(MouseEvent.CLICK, closePopUp);

             

            label.text =

            "Please enter your name:";

            label.x = 200;

             

             

            //panel.styleName="panel1"

             

            panel.width = stage.stageWidth;

             

            panel.height = 180;

             

             

            panel.addChild(label);

            panel.addChild(button1);

             

            createPopUp();

            panel.getChildAt(0).x = panel.width/2; //added by tanweer

            panel.getChildAt(1).x = panel.width/2; //added by tanweer

             

             

            }

             

             

             

            private function closePopUp(evt:MouseEvent):void {

             

            PopUpManager.removePopUp(panel);

             

            }

             

             

            private function createPopUp():void {

             

            PopUpManager.addPopUp(panel,

            this, true);

             

            PopUpManager.centerPopUp(panel);

             

            }

             

            ]]>

             

             

            </mx:Script>

             

            </mx:Application>

             

            in the place where i added code try to manipulate it according to your req.

            I suugest you to use Hbox container for such type of issues. get back to me for furthur questions

            • 3. Re: Problem centering in a Panel
              Arun Lal

              Before addChild() statement just write these two statements

               

              panel.setStyle("verticalAlign","middle");

              panel.setStyle("horizantalAlign","center");

               

               

              Let me know if it helps

              • 4. Re: Problem centering in a Panel
                Ansury Level 3

                I should also add that, not only is doing this in ActionScript the harder way to do this, but it's also harder to maintain compared to a custom component based popup.  If you ever need to add another field(s) to the popup one day or alter other aspects of the dialog, much better to do it in Flex design mode than to play around with hand-coding pixel coordinates or creating and configuring a bunch of containers/components in AS.  Or another example, if you want to add some kind of validation to the dialog you don't want that kind of thing cluttering the container of the dialog, etc.

                • 5. Re: Problem centering in a Panel
                  SiHoop Level 1

                  Thanks for your reply, unfortunately this didn't work.


                  • 6. Re: Problem centering in a Panel
                    SiHoop Level 1

                    Thanks very much for the solution. I have a question about how you structure your code. I understand the concept of casting, but I don't really understand what you've done here. It seems like your saying: Create an instance of PopupDialog and within that instance create a PopUpManager. Is that right?

                     

                    Instead of casting PopUpManager as PopupDialog could you have put PopUpManager directly into the PopupDialog component?

                     

                    Thank you again!

                                    var d:PopupDialog = PopUpManager.createPopUp(this, PopupDialog, true) as PopupDialog;