This is Part 4 of a multipart series of articles that cover tips and tricks for Flex mobile development. Part 1 focused on handling data when switching between views and between application executions. Part 2 covered styling the ActionBar and tab components in your mobile application. In Part 3, you learned how to hide those components, and you saw how to move the tab components to the top of your app. This part is about a mobile alternative for the mx.controls.Alert class.

When you're developing mobile applications using Flex 4.5, you may quickly discover that you cannot use the mx.controls.Alert class. At that point, you'll likely wonder what the best practice is to display an alert or a popup message. The recommended way to display a popup window in Flex 4.5 mobile applications is via the new Spark SkinnablePopUpContainer class.

To illustrate how this class is used, I created a sample for Adobe AIR Launchpad and Tour de Flex. I also created a simple application that shows how this class can be used create an alert popup control or a more generic skinned popup container. To try this application out yourself, download and unzip the sample files for this article and import the project into Adobe Flash Builder.

Creating a simple alert

When you run the application, you'll see two tabs: Simple Alert and Skinned PopUp (see Figure 1). The first tab has a Show Alert button that instantiates an AlertMsg component when clicked.

Figure 1. The sample application's main screen (left) and simple popup alert (right).

The AlertMsg component uses a SkinnablePopUpContainer to display a basic alert message. Here's the code:

        <?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:s="library://ns.adobe.com/flex/spark" title="SampleAlert" >
 
    <fx:Declarations>
        <fx:Component className="AlertMsg">
            <s:SkinnablePopUpContainer x="70" y="300">
                <s:TitleWindow title="My Message" close="close()">
                    <s:VGroup horizontalAlign="center" paddingTop="8" paddingBottom="8" paddingLeft="8" paddingRight="8" gap="5" width="100%">
                        <s:Label text="My alert message text here..."/>
                        <s:Button label="OK" click="close()"/>
                    </s:VGroup>
                </s:TitleWindow>
            </s:SkinnablePopUpContainer>
        </fx:Component>
    </fx:Declarations>
 
    <s:layout>
        <s:VerticalLayout paddingTop="5" paddingBottom="5" paddingLeft="5" paddingRight="5" gap="10"
                          horizontalAlign="center" verticalAlign="top"/>
    </s:layout>
 
    <s:TextArea text="This sample shows how you can display a simple alert message in a mobile application using the Spark SkinnablePopUpContainer. The mx.controls.Alert is not recommended for mobile."
                width="98%" editable="false"/>
    <s:Button label="Show Alert" click="(new AlertMsg()).open(this, false)"/>
</s:View>

    

If you set the second parameter in the open() call to true , then the alert message will be modal.

Creating a skinned popup container

The second tab in the application demonstrates a skinned popup container (see Figure 2).

Figure 2. The skinned popup view (left) and the skinned popup itself (right).

The code for the view itself is much like the code for the previous view. The main difference is that it uses the MyPopupComponent.mxml class to facilitate the skinning:

        <?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" title="SkinnablePopUpContainer" xmlns:components="components.*">
 
    <!-- Note: This class uses the MyPopupComponent.mxml class  -->
    <fx:Declarations>
        <components:MyPopupComponent id="popup"/>
    </fx:Declarations>
 
    <s:layout>
        <s:VerticalLayout paddingTop="5" paddingBottom="5" paddingLeft="5" paddingRight="5" gap="10"
                          horizontalAlign="center" verticalAlign="top"/>
    </s:layout>
 
    <s:TextArea width="98%" editable="false"
                text="Creates a skinnable pop-up that might be used as a simple window such as an alert or help that appears as a pop-up window on top of its parent rather than within the layout and is typically defined in its' own MXML file."/>
    <s:Label id="txt"/>
 
    <s:HGroup>
        <s:Button label="Open Popup" click="popup.open(this)"/>
    </s:HGroup>
</s:View>

    

Here is the code for the MyPopComponent class, which uses SkinnablePopUpContainer and the MyPopupSkin class:

        <?xml version="1.0" encoding="utf-8"?>
<s:SkinnablePopUpContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
                           xmlns:s="library://ns.adobe.com/flex/spark"
                           skinClass="skins.MyPopupSkin" x="70" y="300">
 
    <!-- Also uses the MyPopupSkin.mxml class -->
    <s:VGroup paddingTop="8" paddingBottom="8" paddingLeft="8" paddingRight="8" horizontalAlign="center">
        <s:Label text="My Skinned Popup Showing..."/>
        <s:Button label="Close" click="this.close()"/>
    </s:VGroup>
</s:SkinnablePopUpContainer>

    

Finally, here are the relevant parts of the skin class itself, which rounds the top right corner and adds a drop shadow:

        <!--- Defines the background and content group used by this skin. -->
    <s:Group id="chrome" left="0" right="0" top="0" bottom="0" visible.closedGroup="false">
 
        <!-- Background and border - sets one corner rounded and adds a drop shadow filter-->
        <s:Rect left="0" right="0" top="1" bottom="0" id="background" topRightRadiusX="15">
            <s:filters>
                <s:DropShadowFilter color="0x000000" blurX="20" />
            </s:filters>
            <s:fill>
                <s:SolidColor color="0xF9F1D3"/>
            </s:fill>
            <s:stroke>
                <s:SolidColorStroke  weight="2" color="#323232" joints="bevel" alpha=".5"/>
            </s:stroke>
        </s:Rect>
 
        <!--- @copy spark.components.SkinnableContainer#contentGroup -->
        <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">
            <s:layout>
                <s:BasicLayout/>
            </s:layout>
        </s:Group>
    </s:Group>

    

Where to go from here

To learn more about skinning for Flex mobile applications, read Jason San Jose's series, which begins with Flex mobile skins – Part 1: Optimized skinning basics. If you haven't already done so, you may also want to read Flex mobile development tips and tricks – Part 2: Styling your application's tabs and ActionBar, which covers some ways to style your app without skinning.

Also, if you're interested in adding view transitions to your mobile app, be sure to check out Part 5 of this series.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.

Flex mobile development tips and tricks—Part 4: Creating an alert popup and other skinnable popups

by Holly Schinsky

Content

Created

Page tools

Requirements

Prerequisite knowledge

User level

Required products

Sample files

Creating a simple alert

Creating a skinned popup container

Where to go from here

More Like This

Tutorials & Samples

Tutorials

Samples

Products

Download

Support & Learning

Buy

Company