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); } ]]> </mx:Script> <mx:Button label="Launch Pop-Up" click="createPopUp(event)" /> </mx:Application>
Category: Flex 3, Flex 3 Action Script 3 Tutorial
Tags: addChild() | addEventListener() | addPopUp() | centerPopUp() | createPopUp() | MouseEvent | PopUpManager.centerPopUp() | removePopUp()
Tags: addChild() | addEventListener() | addPopUp() | centerPopUp() | createPopUp() | MouseEvent | PopUpManager.centerPopUp() | removePopUp()
Comments
Leave a Reply
You must be logged in to post a comment.