Tuesday, 25 October 2011

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


I hope that you find this useful. Stay tuned for more useful information on Scott's Digital Community. 

9 comments:

  1. Thank you for this code. I am simply amazed how difficult it has been to find simple code to do what I thought should be the easiest thing to do. I am just starting using Flash Builder and I am not impressed so far.

    Any new blog posts coming down the pipe?

    Francois

    ReplyDelete
  2. Thanks - yes - I am working on some new Blog content.

    ReplyDelete
  3. Mobile Applications are used to promote business, blogs, to make money. Everyone can create an application today, by hiring a developer or using an on-line app builder.Thanks for sharing!!

    ReplyDelete
  4. mobile marketing solutions
    Its good information about mobile applications.mobile phone is based on mobile applications Thank you so much

    ReplyDelete
  5. Nice blog! Thanks for all tips and information.I Appreciate it.
    App maker for android

    ReplyDelete
  6. But how do you make an instance in different view?

    ReplyDelete
  7. This is a completely different question. In the screenshot I can see you are using a grid component. Is it native flash grid or you are using any third party component?

    ReplyDelete
  8. The stock data will come from a real financial data provider such as Yahoo Finance as opposed to an XML file. SMO digital marketing

    ReplyDelete
  9. The stock data will come from a real financial data provider such as Yahoo Finance as opposed to an XML file.buy subscribers

    ReplyDelete