Skip navigation
Currently Being Moderated

Flex Mobile - Alert and Information Popup Boxes

Nov 23, 2010 5:55 PM

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:

 

http://www.digitalretro.tv/components/InformationBoxTest.fxp

 

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.

 

Thanks.

 

Darren

 
Replies
  • Currently Being Moderated
    Nov 26, 2010 12:48 AM   in reply to EhlersD

    Nice work!

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 2, 2010 3:05 PM   in reply to EhlersD

    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/

     

    Thanks again!

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 31, 2010 3:32 AM   in reply to EhlersD

    Hi Darren..

     

    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 ?

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 4, 2011 11:25 PM   in reply to EhlersD

    It seems the link is still broken. Could you please reuplode the file somewhere else?

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 17, 2011 7:39 AM   in reply to EhlersD

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 17, 2011 7:58 AM   in reply to Adam Tuttle
     
    |
    Mark as:
  • Currently Being Moderated
    Jan 18, 2011 1:35 PM   in reply to EhlersD

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 20, 2011 10:23 PM   in reply to Adam Tuttle

    A simple approach is to use @Embed[1].  This should cause your SWC to include the image sources that are actually used.

     

    [1] http://livedocs.adobe.com/flex/3/html/embed_3.html

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 25, 2011 5:05 AM   in reply to EhlersD

    It could be a good idea to add events metadata. But thank you for this greate component.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 25, 2011 8:55 AM   in reply to naelmskine

    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.

    http://dl.dropbox.com/u/22049158/MesssageBox-digitalRetro.fxpl

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2011 2:02 AM   in reply to naelmskine

    Hi.

     

    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
             systemManager.getSandboxRoot().addEventListener(
                 MouseEvent.MOUSE_UP, touchMouseUpHandler, false, 0, true);
             systemManager.getSandboxRoot().addEventListener(
                 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?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 7, 2011 2:15 PM   in reply to Thomas_Ahl

    Well ... i don't really understand your problem but i tried replacing the message Label with a TextInput and i had no problem. It just worked fine (after removing "maxDisplayedLines" parameter).

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 7, 2011 11:29 PM   in reply to naelmskine

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 8, 2011 5:29 AM   in reply to EhlersD

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 9, 2011 12:44 AM   in reply to Adam Tuttle

    @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.

     

     
    |
    Mark as:
  • Currently Being Moderated
    May 6, 2011 7:31 AM   in reply to Thomas_Ahl
     
    |
    Mark as:
  • Currently Being Moderated
    Jun 24, 2011 3:46 PM   in reply to EhlersD

    Hi,

     

    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:

    http://dl.dropbox.com/u/22049158/MesssageBox-digitalRetro.swc

     

    Have fun ;-)

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 3, 2012 10:49 AM   in reply to EhlersD

    Excellent! Thanks man

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 7, 2013 6:17 AM   in reply to EhlersD

    Hi there,

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 7, 2013 11:44 AM   in reply to megharajdeepak

    Hi,

     

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

    msgBox.addEventListener(MessageBoxEvent.MESSAGEBOX_OK, myHandler);

     

    Of course, you can use instanciate your component with MXML. I let you try it.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 8, 2013 1:27 AM   in reply to naelmskine

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 8, 2013 2:44 AM   in reply to megharajdeepak

    Hi megharajdeepak,

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 8, 2013 2:54 AM   in reply to naelmskine

    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?

     

    Cheers!

    Deepak

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 8, 2013 5:25 AM   in reply to megharajdeepak

    I didn't used this component for an app with rotation management so I don't know how to do.

    I hope you will find how to do soon.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 9, 2013 3:39 AM   in reply to naelmskine

    I made following changes to achieve it:

    MessageBox.mxml:

    Root Group's creationComplete event handler:

    protected function group1_creationCompleteHandler(event:FlexEvent):void

                {

                    if(stage.supportedOrientations)

                    {

                        stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE, onDeviceOrientationChange);

                     

                    }

                }

     

    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...

     

    Cheers!

    Deepak

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)