PopUp class

• The PopUp.makeText() method
• The PopUp.makeContent() method
• The PopUp.makeDialog() method
• The PopUp.makeAlert() method
• The PopUp.makeMessageAlert() method
• The PopUp.show() method
• The PopUp.close() method
• The PopUp properties

The PopUp class

The PopUp class is a popup manager that allows;

• Modal/non-modal - PopUp.modal
• Duration length of visibility - PopUp.duration
• Custom content renderer - PopUp.contentRenderer
• Custom content - PopUp.content
• Access to the underlying IDialog instance - PopUp.dialog
• Text message string - PopUp.text
• Custom layout placement - PopUp.layoutPlacement
• Custom layout offset from screen edges - PopUp.layoutPlacement

The PopUp class uses the following static methods to create utility popups very quickly;

• PopUp.makeText(text:String, duration:int):PopUp
• PopUp.makeContent(content:IVisualElement, duration:int):PopUp
• PopUp.makeDialog(contentRenderer:IFactory, title:String = null, icon:Object = null):PopUp
• PopUp.makeAlert(title:String, icon:Object = null, message:String = null, messageIcon:Object = null):PopUp
• PopUp.makeMessageAlert(message:String, messageIcon:Object = null):PopUp

The PopUp. makeText() method

A simple Hello World makeText() example

Use the makeText() method within an event handler.

Code:

PopUp.makeText("Hello World", PopUp.LENGTH_LONG).show();

The above example;

• Creates a TextDialog
• Passes the Hello World message to the content
• Sets the duration on the screen to LENGTH_LONG which is 4 seconds
• Calls the PopUp.show() method to create and show the underlying TextDialog instance

Text wrapping in the TextDialog

Use the \n character to create newlines in the dialogs message text.

Code:

PopUp.makeText("Hello World, Hello World,\nHello World,Hello World," +
	"Hello World,\nHello World,Hello World, ", PopUp.LENGTH_LONG).show();

The PopUp.makeContent() method

A simple Hello World makeContent() example

The PopUp.makeContent() method allows a custom content to be assigned to the dialog when created.

Code:

[Embed(source="assets/common/android_normal.png")]
private var iconClass:Class;
 
protected function makeContent_clickHandler(event:MouseEvent):void
{
	var content:IconLabelRenderer = new IconLabelRenderer();
	content.icon = iconClass;
	content.text = "Hello makeContent()!";
	PopUp.makeContent(content, PopUp.LENGTH_SHORT).show();
}

The above example;

• Embeds and icon for use in the custom content
• Creates a new MXML declared IconLabelRenderer
• Sets the icon and text property on the custom content
• Calls PopUp.makeContent() and passes the instantiated content to be shown within the PopUp's dialog

The PopUp.makeDialog() method

A simple Hello World makeDialog() example

The PopUp.makeDialog() method allows a custom dialog to be created, the popup duration is automatically set to 0. This means the close() method of the dialog will need to be called when interaction is finished.

The method automatically sets the Dialogs;

• contentRenderer - The IFactory used to display the dialog's view
• title - The String displayed in the titlebar
• icon - The Object displayed in the titlebar

Code:

protected function makeDialog_clickHandler(event:MouseEvent):void
{
	PopUp.makeDialog(new ClassFactory(DeclartiveDialog), "Hello Dialog!", titleIconClass).show();
}

The Dialog can be made using the fx:Declarations tag with a child fx:Component tag;

<fx:Declarations>
<fx:Component className="DeclartiveDialog">
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009" 
		  xmlns:s="library://ns.adobe.com/flex/spark" 
		  paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10">
	<fx:Script>
 
			import com.teotigraphix.ui.events.DialogEvent;
 
	</fx:Script>
 
	<s:Label text="This is a Label" 
			 color="#FFFFFF" fontWeight="bold"/>
 
	<s:Button label="OK" 
			  click="dispatchEvent(new DialogEvent(DialogEvent.DIALOG_CLOSE, true, false))"
			  width="100%"/>
</s:VGroup>
</fx:Component>
</fx:Declarations>

Will result in the following;

Note the DialogEvent.DIALOG_CLOSE event dispatched from the click handler of the Button. This event is listened to by the PopUp and dismisses the Dialog when the event is dispatched.

Note also that the fx:Component  declaration could easily be moved to a custom MyDialog.mxml file for better reuse.

The PopUp.makeAlert() method

A simple Hello World makeAlert() example

Code:

[Embed(source="assets/common/android_normal.png")]
private var iconClass:Class;
 
[Embed(source="assets/common/emblem-important-160.png")]
private var titleIconClass:Class;
 
protected function makeAlert_clickHandler(event:MouseEvent):void
{
	PopUp.makeAlert("Hello AlertDialog!", titleIconClass, 
		"The alert message", iconClass).show();
}

The PopUp.makeMessageAlert() method

A simple Hello World makeMessageAlert() example

Code:

[Embed(source="assets/common/android_normal.png")]
private var iconClass:Class;
 
protected function makeMessageAlert_clickHandler(event:MouseEvent):void
{
	PopUp.makeMessageAlert("The alert message without\n" +
		"the titlebar", iconClass).show();
}

The PopUp.show() method

The PopUp.show() method is an instance method that is responsible for;

• Assigning the owner where the dialog will be popped up over
• Creating the underlying IDialog instance
• Creating and assigning the dialog's content based on the PopUp.contentRenderer or PopUp.content
• Configuring the dialog content
• Adding the handlers to the IDialog such as DIALOG_CLOSE for automatic dismissal
• Opening the IDialog with the PopUpManager
• Laying out the dialog based on the PopUp.layoutPosition and PopUp.layoutOffset values.

When using the simple code style below, the PopUp.duration property is set to LENGTH_SHORT which will show the PopUp for seconds and then fade out.

A simple Hello World show() example

Code:

var popup:PopUp = new PopUp();
popup.text = "Hello show() World";
popup.show();

The PopUp.close() method

A simple Hello World close() example

var popup:PopUp = new PopUp();
popup.text = "Hello close() World";
popup.show();
button.addEventListener(MouseEvent.CLICK, 
function(event:MouseEvent):void {popup.close();});

Notice in the example above, the popup.close() method is being called from a click handler.

The PopUp Properties

content

Every PopUp instance uses an underlying IDialog instance for it's stage component. All IDialog instances use a content property that represents it's view. The content property can be used to set that view either through one of the static methods on the PopUp class or through setting the content property before the PopUp.show() method is called.

Static methods for content

• PopUp.makeContent() - uses an IVisualElement instance to assign the content
• PopUp.makeDialog() -uses and IFactory to create the content

Setting the content on the PopUp

Code:

var popup:PopUp = new PopUp();
var content:Label = new Label();
content.text = "I'm Label content";
popup.content = content;
popup.show();

In the above code;

• The PopUp is created
• A simple content instance of Label is created
• Text is set on the Label content
• The Label is assigned to the PopUp.content
• The PopUp is shown using the Label as the content view

contentRenderer

Code:

var popup:PopUp = new PopUp();
var factory:ClassFactory = new ClassFactory(Label);
factory.properties = {text:"I'm Label content factory"};
popup.contentRenderer = factory;
popup.show();

In the above code;

• The PopUp is created
• A simple content IFactory for Label is created
• Text is set on IFactory properties to be set when the Label is instantiated
• The IFactory is assigned to the PopUp.contentRenderer
• The PopUp is shown using theIFactory as the content view

dialog

The dialog property points to the underlying IDialog instance that has been created for the PopUp. The dialog property can be set on the PopUp before the popup is shown and will be used when the show() method is called.

Code:

var popup:PopUp = new PopUp();
popup.dialog = new AlertDialog() as IDialog;
popup.duration = PopUp.LENGTH_NONE;
var parent:Group = new Group();
var content:Label = new Label();
content.text = "I'm in the AlertDialog";
content.top = content.right = content.bottom = content.left = 20;
parent.addElement(content);
popup.content = parent;
popup.show(this, true); // modal

duration

Sets the duration of the popup. When using the static methods or setting the duration property on the PopUp itself, the amount of time can be specified in milliseconds as well.

• PopUp.LENGTH_NONE - indefinite
• PopUp.LENGTH_SHORT - 2 seconds
• PopUp.LENGTH_LONG - 4 seconds

layoutOffset

The amount of offset using a x and y from the PopUp.owner edge reletive to the layoutPlacement value.

layoutPlacement

The placement of the PopUp reletive to it's owner in Stage coordinates.

See LayoutPlacement

modal

Whether the PopUp blocks user interaction

text

The simple text message. This property is not used with most of the static methods.