Flex 4.5 Mobile Alert Box & Always Visible Scrollbars (with Mobile App in Browser Demo!)

I created a nice Flex Mobile Alert popup based on a DevGirl.org tutorial, but improved it so that it can be called from anywhere in the code, and will popup centered in the currently active view (in the web demo it will be off centre, but on a mobile device its fine). I have also added functionality (based on Flexponential.com article) so that the text area of the Alert will have scrollbars that are always visible (a dumb-ass limitation of the current Flex 4.5.1 SDK build – now fixed in Flex 6).

Always Visible ScrollBar

Check out the Mobile App demo (click picture below) – its the Flex mobile app running in the browser (use Firefox/Chrome – doesnt look quite right in IE yet) – this was based on a brilliant post by riagora.com. Will upload the source at some point, but the AlertBox code is in the full article, along with direct links to the tutorials.

Mobile App in Browser (Click to run Demo)

Use the Alert as follows from anywhere in a ViewNavigatorApplication project:

var alert:AlertPopUp = new AlertPopUp();
alert.addEventListener(PopUpEvent.CLOSE, onCloseAlert);


<?xml version="1.0" encoding="utf-8"?>
<s:SkinnablePopUpContainer xmlns:fx="http://ns.adobe.com/mxml/2009"

			import mx.core.FlexGlobals;

			import spark.components.View;

			private var activeView:View;
			private var message:String = "";

			public function show(msg:String = ""):void
				activeView = FlexGlobals.topLevelApplication.navigator.activeView;

				this.message = msg;
				this.open(activeView, true);


			public function center():void
				this.width = activeView.width * 0.7;
				this.height = activeView.height * 0.6;

				var newX:Number = (activeView.width / 2) - (this.width /2);
				var newY:Number = (activeView.height / 2) - (this.height/2);

				this.x = newX;
				this.y = newY;


		<!-- Place non-visual elements (e.g., services, value objects) here -->

	<!-- Also uses the MyPopupSkin.mxml class -->
	<s:VGroup  width="100%" height="100%" horizontalAlign="center">

		<s:TextArea id="alertMessageText" width="100%" height="100%" selectable="false"
					verticalScrollPolicy="on" text="{this.message}"	/>
		<s:Button label="Close" click="this.close()"/>



Always Visible Scrollbars:

Alert Popup Box

Mobile Flex App to run in the Browser


To answer Daniels usage query in the comments, here is how it would be used in a view:
Update: FXP for the mobile app is available here to download

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
			import components.AlertPopUp;
			import mx.events.FlexEvent;
			import spark.events.PopUpEvent;
			protected function examplePopup_clickHandler(event:MouseEvent):void
				// TODO Auto-generated method stub
				var alert:AlertPopUp = new AlertPopUp();
				alert.addEventListener(PopUpEvent.CLOSE, onCloseAlert);
				alert.show("asdf ");
			private function onCloseAlert(event:PopUpEvent):void
				// Do some stuff here	
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	<s:Scroller id="scroller" left="10" right="10" top="10" bottom="70">
		<s:VGroup paddingTop="3" paddingLeft="5" paddingRight="5" paddingBottom="3" 
			<s:Button id="examplePopup" label="Try Popup" click="examplePopup_clickHandler(event)" />


Tags: , ,

16 Responses to “Flex 4.5 Mobile Alert Box & Always Visible Scrollbars (with Mobile App in Browser Demo!)”

  1. Compynerd255 says:

    Thanks for extending this, and thanks to DevGirl for making this. Could you perhaps expand the control to also add Yes, No, Ok, and Cancel buttons, like in the mx Alert class? I’m making a quiz application and I am using the alert to give a confirmation on clearing your question scores for another go or the next user.

  2. Mike says:

    Did you use DevGirls skin for your ‘AlertSkin’ above? Any chance we have a peek at that please?


  3. Mike says:

    ReferenceError: Error #1069: Property navigator not found on xxxx and there is no default value.

    Any clue what might be missing from your sample?

    Thank you

  4. Andy says:

    Hi Brian,
    thanks for this. Any idea how to get a background blur working for this? basically, when the user clicks the button, I want the alert to show on top of a black background with something like 0.6 opacity… so the stuff underneath is blurred out… is that possible? Something like how the standard alert works in desktop Flex.

    been pulling my hair out on this, hope you can help!


  5. Oh my goodness! an amazing write-up dude. Thanks However I’m experiencing issue with ur rss . Dont know why Unable to subscribe to it. Is there anyone getting identical rss problem? Anyone who knows kindly respond. Thnkx

  6. Kim Jensen says:

    Hi I’m new to Flash Builder and I tried to follow your example, but where did you get the skinClass=”skins.AlertSkin”. In Devgirls example I can only find the skinClass MyPopupSkin. I tried to use that, but then the application shows an error “The supplied DisplayObject must be a child of the caller.
    Thanks, forv any help.

  7. Daniel says:

    I’m tearing my hair out here :) I’m new to Flex… (my 10 years of VB and PHP not helping me here!)

    AlertPopup.mxml, ok fine, got that, no errors, but the “Use the Alert as follows from anywhere in a ViewNavigatorApplication project:” means nothing to me…

    I’m trying to use this code from another view, and calling a function that calls the AlertPopUp does nothing, and the IDE displays “Type was not found or was not a compile-time constant: AlertPopUp.”

    Does this mean anything to anyone, and how do I work around this?


    I have

    • admin says:


      I put a usage example in the above post – this should help you out

    • admin says:

      I have also included an FXP for the project in the above post – now it should be much easier to follow

    • Chaos7703 says:

      For the sake of your hair and future reference Daniel, that statement means that the class hasn’t been imported into the scope/component you’re working in and the compiler doesn’t “know” what you’re referring to because you haven’t “told” it where the class definition is.

      If you’re using Flash Builder, it will automatically add needed import statements for you, BUT ONLY when you use code hinting/completion.

      If you’ve copied the class definition into your project, then typing something like “Aler” Ctrl + space will bring up suggestions in Flash Builder (assuming the default keyboard shortcuts) and “AlertPopUp” should be listed.

      If it’s not, then it’s probably not in anywhere your “src” folder. If it is, at for example “{project}/src/components/AlertPopUp.as”, then choosing it from the code completion list and pressing enter will automatically add

      import components.AlertPopUp;

      in a fx:Script tag for you. Without that import you’ll get: “Type was not found or was not a compile-time constant: AlertPopUp.”

      I hope this will save you and others headaches in the future.

  8. Daniel says:

    Thank you Brian, you are a saint :)


  9. Chaos7703 says:

    Thanks a lot for this Bishop! Very very nice. =D I just found this and moded it to match my app, size a bit better, and “blackout” the screen with .7 alpha. I’m still trying to figure out how to have it automatically listen for the “back” soktkey though. When I was tinkering with it, I clicked back on the phone and had to then close it on the previous View.

    I just need to dig around a bit to find the “handle” to grab for the “back” softkey. I know I’ve seen it, just can’t remember. =b

    Thanks again.

    • Brian Bishop says:

      Hi Todd

      Any chance you could show us what you did with the sizing and the alpha?



      P.S. Did you see the sample I put up of mobile components running on a desktop browser… I think it looks class if I may say so myself, lol :-)

  10. Tamas says:

    Hello Brian! :)

    Nice example, but it does not work in Flash Builder 4.6.

    Everything works fine, but the scrollbar does not appear.

    Neither when I’m scrolling. What’s wrong?

    Thank you in advance.


Leave a Reply

You must be logged in to post a comment.