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>
Tags: addChild() | addEventListener() | addPopUp() | centerPopUp() | createPopUp() | MouseEvent | PopUpManager.centerPopUp() | removePopUp()
Author
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.
Community presentations of the blogger
Sameera at LinkedIn
BIOGRAPHY
Sameera Thilakasiri is a front-end developer and UX Architect based in Colombo, Sri Lanka, specialist in User Interface Design, User Experience, Usability and Accessibility, Information Architecture, Responsive Web Design, Interactive Design, Search Engine Optimization, Trainging and Public Speaking.
In his profession, follow the best practices, W3C web standards and guidelines, responsive, semantic, usable, accessible, SEO friendly to cutting edge cording using XHTML/HTML5, CSS and jQuery for Pixel-perfect cross browser compatibility.
In his leisure blogging for technical articles and lifestyle photographer.