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);

PopUpManager.centerPopUp(panel);

}

]]>

</mx:Script>

<mx:Button label="Launch Pop-Up" click="createPopUp(event)" />

</mx:Application>