Since a Android-looking popup box doesn't yet exist in the Hero SDK, I thought I would put a pretty good looking component together.
You can download it (and the sample code) here:
A real simple example in in the project, for both an Info and an Alert.
I currently only support an "OK" button, but I will be adding a Yes/No and OK/Cancel later this week.
Hopefully this will save someone some time.
Enjoy and feel free to use this in your code (commercial or non-commercial), just leave the copyright code in the component source file in place.
Here's an updated library. I changed it to MessageBox and uploaded a new Flex Project:
This take the popup messages and adds an OK/CANCEL and a YES/NO option.
Thanks for this! It looks great and saved me a ton of grief.
I wrote up a quick blog post about it, with an additional bit of code to auto set a default parent: http://mattguest.com/2010/12/air-for-android-alert-box-solution/
I'm very glad to be able to help, and glad someone found it useful.
Assuming you don't mind, I'll include the new code into the component and update it.
And thanks for the blog post and credit.
I want to have a look at your Alert component, but it seems that the link is broken ?
Could you email it to me / provide a mirror ?
I tried to open this with Catalyst CS5 as well as the latest Panini build, but both say they can't open it.
I would really like to use this in a Flex project... what do I need to do? Is there any chance you can just export it to a Flex Class and provide that?
You can import a FXP into FB.
Since it's a little easier to work with, I compiled a SWC from the code, which can be downloaded here: http://dl.dropbox.com/u/3831772/adbe/AndroidAlerts.swc
Hm, actually I've just realized the images aren't included in the SWC, and I had to include them in my project to get them to show up. I've never built a SWC that includes images before, can it be done? How?
A simple approach is to use @Embed. This should cause your SWC to include the image sources that are actually used.
I tried to embed images and create a library but there is a bug in Flex Hero. I post my code here to let someone build it when it will be fixed.
I tried the Messagebox and it works great but is it possible to use a TextInput with it?
I added a Textinput and when i enter the Textinput i got an Focusmanager is null error:
private function touchMouseDownHandler(event:MouseEvent):void
isMouseDown = true;
mouseDownTarget = event.target as InteractiveObject;
// If we already have focus, make sure to open soft keyboard
// on mouse up
if (focusManager.getFocus() == this)
delaySetFocus = true;
// Wait for a mouseUp somewhere
MouseEvent.MOUSE_UP, touchMouseUpHandler, false, 0, true);
SandboxMouseEvent.MOUSE_UP_SOMEWHERE, touchMouseUpHandler, false, 0, true);
TypeError: Error #1009: Cannot access a property or method of a null object reference. at spark.components.supportClasses::SkinnableTextBase/touchMouseDownHandler()[E:\dev\hero_private\frameworks\projects\spark\src\spark\components\supportClasses\SkinnableTextBase.as:2140] at flash.events::EventDispatcher/dispatchEventFunction() at flash.events::EventDispatcher/dispatchEvent() at mx.managers::SystemManager/mouseEventHandler()[E:\dev\hero_private\frameworks\projects\framework\src\mx\managers\SystemManager.as:2924]
Does anyone tried to use a TextInput or Textarea?
I think it's the a problem with the Keyboard. Does mobile air can't use the "Android" Keyboard in Popup's?
I tried it in a mobile Air Application for Android in Flash Builder 4.5.
I changed <components:MobileApplication> to <s:ViewNavigatorApplication> in the main.mxml to get it work.
And when i use a Textinput instead of Label for the title i got the error.
Sorry for forgotten this information.
I was going to ask if anyone had made a version that looks like the Gingerbread dialogs, but ultimately I think the onus is on the AIR development team to expose some API to us to create native dialogs, because we're now at the point where it's very possible that our applications will look outdated and disjointed for using a dialog style that doesn't match the system style. Native applications don't have this problem, which is a problem for us.
@Thomas_Ah: I never used ViewNavigatorApplication. The modifications steps you described don't compile for me. May you give us a project example?
The thing I made to use "alert and information popup boxes" is to add MessageBox component in my application (a MobileApplication) and then use it (or modify it). It would be greate to use it as an external library but it was not embedding assets because of a Flex Hero bug.
I hope this could help you.
like i've posted here, I've compiled EhlersD's code into a library. Since Flex 4.5 has been released, my project has no more bug.
You can download the library here:
Have fun ;-)
Thanks for the great component
But one quick question. How can we listen for YES, NO, OK and CANCEL button click events of the MessageBox ? I couldn't find any function parameter like how we have for Alert, to listen for CloseEvent.
Actually you use this component like every Flex component: just subscribe to the event by calling "addEventListener". There is 4 events (messageBoxOK, messageBoxCANCEL, messageBoxYES, messageBoxNO).
You should have something like this to use this component (not tested):
var msgBox:MessageBox = MessageBox.show(null, MessageBox.MB_OK, MessageBox.IC_HELP, "help box!", "show something helpfull");
Of course, you can use instanciate your component with MXML. I let you try it.
Thanks naelmskine. That helped me. But MessageBox.show(null.... using null gave me a null object runtime error. So I used the parent instead and it worked fine. However, I'm not sure if icons like MessageBox.IC_HELP, MessageBox.IC_DELETE, MessageBox.IC_ADD etc are in built. Because they doesn't seem to work. It always shows up some broken icon.
when i first tried to compile this component as a library i think i got this problem but it was a bug and Adobe fixed it. As I remember it was working with the SWC but you can simply copy this component in your project and it should avoid this problem.
I have no time to test it and fix the problem but here is the flash builder project: http://dl.dropbox.com/u/22049158/MesssageBox-digitalRetro.fxpl (if you have an other IDE just unzip it).
Feel free to modify this component but don't forget to share your code.
That's great! thanks again. Sure, I'll have a look at it
I am actually using this component for an ipad app. When I am in portrait mode and when I get this message and then when i tilt the device to landscape mode, the message box just stays where ever it was when the device was in portrait mode. I think, I need to listen for stage rotate events and position the x and y co ordinates of the message box based on the width, height and available space. But just wanted to know if there is any simple way already in the component to achieve this requirement, which I might be missing out?
I made following changes to achieve it:
Root Group's creationComplete event handler:
protected function group1_creationCompleteHandler(event:FlexEvent):void
private function onDeviceOrientationChange(event:StageOrientationEvent):void
if(this != null && stage != null)
this.x = stage.stageWidth/2 - this.width/2;
this.y = stage.stageHeight /2 - this.height/2;
With this, based on device rotation, the message box's x and y co-ordinates get set in such a way that box appears in the middle of the stage always. Hope this helps someone...