Displaying a Message Box in a Flash Builder 4.5 Mobile application

I am working on a new development article that will be posted late Nov or early December 2011 that discusses how to create a message-based Tablet application using Data Services 4.6. This application will use the Message service and display stock data. The stock data will come from a real financial data provider such as Yahoo Finance as opposed to an XML file.

The great thing about creating a mobile application by using Flash Builder is that you can write once and then deploy to different Mobile devices including Android devices and iDevice devices, such as an iPad. That is correct -- you can create an application in Flash Builder and then deploy it to an iPad.

The tablet application will consist of three views as shown in the following diagram.


One of the objectives of Scott's Digital Community is to specify tips and tricks that I find useful as I develop applications by using Adobe technology. As I found, creating a pop up message (or Message Box) in a mobile application is not as straightforward as you may think. To begin, a mobile application does not support mx.controls.Alert. As a result, you have to create pop up messages by using another technique.

That other way is by using a fx:Component instance. You can think of a fx:Component as a class. You can create an instance of this class and then use the instance to display messages. The following code represent the fx:Component instance.

<fx:Declarations>
!-- This component represents a popup to show the user a message in a mobile application -->
<fx:Component className="AlertMsg">
<s:SkinnablePopUpContainer x="70" y="400">
<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="{localVar}" />
<s:Button label="OK" click="close()"/>
</s:VGroup>
<fx:Script>
<![CDATA[
// Variable in the renderer scope.
[Bindable] public var localVar:String="";

public function setValue(val:String)
{
this.localVar=val;
}
]]>
</fx:Script>
</s:TitleWindow>
</s:SkinnablePopUpContainer>
</fx:Component>
</fx:Declarations>

Then you can declare an instance of AlertMsg and then call its SetValue method and pass a string that represents the message that you want to display in your pop up message. For example:

//THIS IS HOW YOU SET A POPUP MESSAGE IN A MOBILE APP
var msg:AlertMsg = new AlertMsg();
msg.setValue("Hi There") ;
msg.open(this, false);