Flex 4.5 Mobile Development – Alert PopUp and other Skinnable PopUps (with source code)

June 7, 2011By 58 Comments

When doing mobile development using Flex 4.5, one of the first things you may discover is that you cannot use the mx.controls.Alert class, and then wonder what the best practice is to achieve this. The recommended way of displaying a popup control in Flex 4.5 mobile applications is via the new Spark SkinnablePopUpContainer class. I created a sample for Adobe AIR Launchpad and Tour de Flex to show how this component can be used as either a simple Alert type of popup control or as a more generic skinned popup container and wanted to also share it here. The source code is available via the fxp here if you want to download it and try it yourself.

Below are screenshots from the sample application showing the before and after for two types of popup controls…

Simple Alert popup

Skinned popup container

Here I’ve pasted in the relevant code snippets for the sample, but you can also download the FXP for the entire project source if desired.
Sample Alert View Class

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

SkinnablePopUpContainer View Class

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

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

MyPopupSkin Class (relevant parts)

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

Again, the source code/fxp for this sample can be downloaded here!

Filed in: Flash Builder 4.5Flex 4.5Flex 4.5/MobileFlex MobileMobile DevelopmentUncategorized Tags:

About the Author ()

Comments (58)

Trackback URL | Comments RSS Feed

  1. Lee Burrows says:

    Hi Holly,
    Very useful post – thanks very much.
    Is it still ok to use PopupManager to manage popups for mobile (is SkinnablePopupContainer using it behind the scenes maybe?)
    Cheers,
    Lee

  2. Leo Sapucaia says:

    Thx Holly,
    Very useful indeed.

    [ ]´s
    Leo Sapucaia

  3. Don Kerr says:

    Nice! Thanks Holly! I love Spark’s flexibility … but I already miss the ease of use of mx controls like Alert! One line of code was nice. Alert.show(‘is easy’,’mx’);

    Thanks for sharing! This post would be a great topic for you to speak on at Space City AUG online!

    Don

  4. I agree completely with Don. The idea behind Flex should be that development is easier than using the traditional (html) approach. Is it so hard to come up with a new Spark Alert component that uses the skinnable container behind the scenes?? It’s nice that we can do this all ourselves but why does everyone have to reinvent the wheel…

    • TheBouv says:

      I’m with Tom and Don, why the hell is this so complicated?

      Alert boxes should be built in and simple to use — have you ever used a mobile app without some sort of alert?

      I’m so tired of seeing all of these Spark examples that make it MORE complicated than to use the old mx component.

      All this work on Spark to separate skinning, but it has added a completely messy and unnecessary layer of complexity for the simplest things.

      I’m not just talking mobile either.

      • DevBuilder says:

        I’m with Tom, Don and TheBouv,

        Can’t phatom why simple things have become much more complicated. The flexibility is nice, but don’t force it upon us!

        Anyways, I do appreciate the article!

        • Homer Dokes says:

          I’m with Tom, Don, TheBouv, and DevBuilder,

          What an absolute PITA. Leave it to Adobe and their rocket scientists to make the simple unnecessarily complex. It’s enough to just say screw them and move on to a much more user friendly dev environment. I code to get apps out the door, not to sit there and bang my head against the proverbial wall trying to figure out what the hell they changed from the previous version of the IDE that has now BROKE all my source code.

  5. Mike K says:

    Any way to make it modal?

    • Yep, specify true as the 2nd parameter to the open() method to make it modal :)

      • Mike K says:

        Great, thanks!

      • Edgar says:

        Is there a way to have everything in the background (behind the pop up) become blurry in the same affect Alert did when making Flex applications?

        • Hi Edgar, you could put your content in a VGroup or HGroup and set the enabled property on it to false when you open the Alert, then set it back to true when it’s closed. Cheers! Holly

          • Edgar says:

            Does setting enable to false prevent anything from updating? I still want the background to update (it’s constantly pulling data from a server), but I just don’t want the user to focus on the background at all (thus the blur).

          • Andy says:

            Hi Holly,

            Did you figure out a way of making the background blur/grey out, as is the norm with alert boxes? Was hoping I would be able to add a filled rectangle with 50% opacity to the MyPopupComponent.xmxl file, but I cant figure out a way of doing that. Im probably missing something obvious here! I just want the box to be centred on whatever device it is going to work on, and a background behind it to slightly obscure the screen underneath the alert. Spending way too long on an alert box now! Any advice please…
            cheers
            Andy

          • Chad says:

            Thanks Holly, setting enabled to false on the view is a great solution.

  6. Li Yong Fei says:

    Very nice sample, Thanks

  7. Li Yong Fei says:

    I have added your blog in my blog’s right sidebar, Adobe Flex: “Devgirl’s Blog”, share your blog for other developers :)

  8. Li Yong Fei says:

    My blog is “Adobe Flash Libe Blog” http://www.adobe-flashlite.com , About some Flash Device news and resources

  9. iti says:

    Hi,

    I have a connexe question : do you know how to manage “push mode” with Flex Mobile: I mean , the application is running in background and lauching time to time a pop-up informing of some news for example. Thanks

    • Hi there, if you’re referring to push notifications, this is something that’s not quite supported yet with Flex/AIR for mobile but will be supported soon with native extensions :).

      • Do you have a link to any literature on Adobe’s site talking about push notification support? I’ve been browsing around and haven’t came across much more than your comment hinting at it. Thx!

      • This is the one feature our company is waiting for, we love the idea that you could build one set for the three operating systems but since there isn’t any push notification support it’s a no go and we will continue using XCode and Java to develop our products. :( Do you know the time frame of when this feature will be added?

  10. sovancheat says:

    Hi I am SovanCheat!
    I use your sample code by perfectly in
    Mobile Flex but I want to displaying messagebox in tow different location
    1.use with uersname
    2.use with password
    when user login into application
    Thank your sample code

  11. Yakov Fain says:

    Is there a non-hacking way to center the SkinnablePopupContainer on the screen? With PopupManager/TitleWindow this was simple.

  12. Dustin says:

    Holly,

    Thanks for the example. I just recently began digging into Flex Mobile due to customer request. Moving along quickly. I come from a ColdFusion, AJAX, JAVASCRIPT and SQL background.

    I got your code working for my project. However, instead of the static text display in the message, can you display a variable?

    For instance, I need to check for a directory on the device. For testing right now, I would like to display a message to the screen to see the directory name. Can you do this?

    Thanks for any help. I am excited about learning more.

  13. Hi

    Very cool. Added some imporvements so that the Alert Popup can be called from any class in the mobile project, and pops up centered on the Active View.

    Also uses a type of browser emulator so you can see the Mobile demo from within the browser!!! (based on a class post by http://www.riagora.com)

    http://bbishop.org/blog/?p=502

  14. Manuel says:

    Hi,
    I’m quite new and thus useless at coding so pls excuse my questions.

    I need to get a “dialog box type object” to show up after user clicks my “save” button and this dialog box should prompt basic “YES” and “NO” buttons which when “YES” is clicked then my “Save_event” fires else if “NO” is clicked then the “dialog box” closes.

    I have taken your code and plugged it into my flex4.5 MXML view but I am having issues getting it to work beyond the OK button being clicked.

    I am imagining that by adding 1 other button with label “YES” and simply changing your “OK” to a “NO” then I should be on the right track?!

    However beyond this all becomes confusing probably because I have too little theory. The other problem I have is that once I paste your code into the in my MXML view, then other components are not accessible from this – ie if I want to change your OK buttons click event and pass it something in the rest of my code the events don’t seem accessible.
    Hope I have been able to explain myself. Any help greatly appreciated.
    Thanks
    Manuel

  15. Thanks, Holly!

    I am making a SkinnablePopupContainer with a TextInput field inside — do you know how I can have that field get focus when I first place the dialog box?

    I thought I could set the focus in the creationComplete event handler in the skin class, but that is not working. When I try to set the focus after the “open”, that too is not working.

    Any thoughts on how to set the initial focus?

    Thanks for any suggestions!

  16. Bibiki says:

    Hey there,
    I was wondering if I could set OK button’s from SampleAlert file click handler to a method defined in SampleAlert, not inside the component AlertMsg. I am trying some things, but they won’t work.

    What I am trying to do is build a two-button alert, with an ok and a cancel button. Upon ok clicking, a record from my database should be deleted, upon cancel, nothing should happen. Is there maybe a better way to do it, or am I on the right track already and only need to figure out how to set the click handlers? Please advise. Thank you.

  17. Viv says:

    Thanks for this. I tried implementing this and wasn’t able to figure out how to implement closing the popup using the same button i.e. I want to click on a button to open a popup and when I click it again it should close the popup. It would also be good if the popup can be closed on using the back button.

  18. Marc Carmen says:

    I have been using a SkinnablePopUp container for popups but the one problem I have run into is maximizing the popup. I can initially maximize it without any problem using

    popup.width = this.stage.stageWidth;
    popup.height = this.stage.stageHeight;

    however as the software keyboard is shown or hidden and as the orientation changes the height and width do not always change correctly. I am listening to the various events related to the software keyboard and the orientation and adjusting the height and width accordingly. However, it doesn’t always work and sometimes the popup ends up going off the screen or only covering half the screen. Any suggestions on how to maximize and maintain that size with any orientation?

  19. Vshare says:

    Thanks for the post Holly It was very helpful !!

  20. Corey Osman says:

    Now that we have ANE how can we use the native popup alerts? Is there any prebuilt alert dialog ANE? I would like to have native popups for my iOS/ Android app.

  21. Nikos says:

    Cool post,

    how do you set the text, I tried this but get a null error:

    var am:AlertMsg = new AlertMsg();
    am.label.text = “Service error debug: \n\n” + event.fault.message;

  22. Ivan says:

    I’m having the same problem of Niko’s

  23. Nikos says:

    u need to add to the display list first

  24. Kim Jensen says:

    Where would I put the popup if I want it to show when a new view is displayed?
    I tried in view1_creationCompleteHandler but then I get an error saying that it have to be a child of the object.
    Thanks

  25. Marcio says:

    Very Good!,

    In the dialog box,
    I need change value one variable, in the
    begin code?

    [Bindable] public var codigo:String;

  26. Chinthaka says:

    Nice work. I use this for my Playbook development. Thanks

  27. baley says:

    In my first view I’m using a List and a ArrayCollection for loading the list. Then I’m have a SkinnablePopUpContainer
    with Yes/No buttons. When I click on the No, click=”close()”, it does close the popup but if I change my mind make the same selection from the List it doesn’t work. But, if I make another selection, goto another view and back, it works as expected.

    So, the question is… how do you
    keep the original view functioning without going to another view and back.
    I have tried to use a click=”PopUpManager.removePopUp(this);”.
    that didn’t work. I also tried a function
    with PopUpManager.removePopUp(this) in it. The click event wouldn’t recognize
    the function.

    Any suggestions?

  28. sanjeev says:

    thanks you save my day

  29. Jonathan says:

    Ah! Solved it!

    top, bottom, left and right don’t work, x and y with width and height, is rather a hit or miss affair.

    But by using the PopUpManager, you can centre it on it’s parent, e.g.

    PopUpManager.centerPopUp();

    For reference, this is the page I found the information: http://help.adobe.com/en_US/flex/using/WS67cd75b2532ad652-1abb110512d5bda966d-8000.html

    Hope this helps someone! :)

  30. thebouv says:

    Nice to hear you solved your issue, Jonathan and nice to hear people are still using Flex. I’m surprised actually.

  31. Jonathan says:

    @thebouv I started with flex/flash at the very beginning, I’ll stick with it until the very end. LMAO

  32. thebouv says:

    Don’t get me wrong, I loved Flex and was very sad to hear the death knell.

    Now just waiting for HTML5 to catch up and to see what toolset Adobe comes out with. Hopefully the figure out how to monetize it correctly this time so they won’t abandon it.

  33. Andy says:

    Yes, I think many people are still using Flex (me included) :)

  34. Andy says:

    …and why not? the technology is still there, it still works really well, and the open source community are embracing the Flash Builder environment. Its all good!

  35. thebouv says:

    Why not?

    Because I have no trust that Adobe will continue to update the iOS builder functionality, or even Flash Builder itself, adequately.

    They quite frankly said that Flex gave them no income beyond the flat fee for Flash Builder. One of their main reasons for abandoning the SDK to open source. Flash Builder is a low-cost, low-income, high-maintenance app. They already dropped Design View simply because they didn’t want to invest the man-hours to keep it up.

    iOS will continue to update and Adobe currently has to be the one to maintain that in their closed-sourced editor.

    Flash Player as a platform is dying and Adobe wants to put its focus on the HTML5 stack. Of course, HTML5 isn’t up to snuff yet, so we’re left with a dearth of options for RIA building.

    Why invest hundreds or thousands of hours of coding into a platform that has such a cloudy future?

    How do you convince a client to use Flex when “Flash is dead” and everyone knows it? Hell, how do you convince yourself? :)

    Especially after Adobe’s handling of the Flex announcement in the first place. Remember how crappy that was? Ha.

Leave a Reply