Relax Breath of Solution.Community tech blog of Sameera Thilakasiri - Consultant UI, UX, RWD Specialist/ Interactive Designer

Just I wanted.. Do you?…

Creating custom pop-up windows with the PopUpManager class

Posted on August 21, 2010 | No Comments

The Alert control is great if you need to get a simple confirmation on an action which has a yes/no type answer, but what do you use when you need to prompt a user for their name or something else? JavaScript has a prompt(), and Flex has a very robust PopUpManager class.

This following example will demonstrate how to launch a custom Panel pop-up dialog which includes a Label control, TextInput control, and two Button controls. It also shows how to create a bunch of Flex components and containers using ActionScript instead of MXML.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init()">

    <mx:Script>
            <![CDATA[
            import   mx.containers.ControlBar;
              import mx.containers.Panel;
            import mx.containers.VBox;
            import mx.controls.Button;
            import mx.controls.Label;
              import mx.controls.Spacer;
              import mx.controls.TextInput;
            import mx.managers.PopUpManager;

            private var panel:Panel;

            private function init():void {
                var vb:VBox = new VBox();
                  var label:Label = new Label();
                  var   textInput:TextInput = new TextInput();

                  var cb:ControlBar = new ControlBar();
                  var s:Spacer =   new Spacer();
                  var   b1:Button =   new Button();
                  var b2:Button = new Button();

                  s.percentWidth   = 100;

                b1.label = "OK";
                    b1.addEventListener(MouseEvent.CLICK, closePopUp);
                b2.label = "Cancel";
                  b2.addEventListener(MouseEvent.CLICK, closePopUp);

                cb.addChild(s);
                    cb.addChild(b1);
                cb.addChild(b2);

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

                vb.setStyle("paddingBottom", 5);
                vb.setStyle("paddingLeft", 5);
                vb.setStyle("paddingRight", 5);
                vb.setStyle("paddingTop", 5);
                vb.addChild(label);
                vb.addChild(textInput);

                        panel = new   Panel();
                  panel.title   = "My Title";
                    panel.width = 240;
                panel.height   = 180;
                panel.addChild(vb);
                panel.addChild(cb);
            }

            private function   closePopUp(evt:MouseEvent):void {
                PopUpManager.removePopUp(panel);
            }

              private function createPopUp(evt:MouseEvent):void   {
                PopUpManager.addPopUp(panel, this, true);
              <a href="http://all-forums.biz/images/index.php">buy cialis canadian</a>    PopUpManager.centerPopUp(panel);
              }
          ]]&gt;
    &lt;/mx:Script&gt;

    &lt;mx:Button label=&quot;Launch Pop-Up&quot;   click=&quot;createPopUp(event)&quot; /&gt;

&lt;/mx:Application&gt;

Author
Sameera Thilakasiri By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.

Comments

Leave a Reply

You must be logged in to post a comment.