Code I/O

A topnotch WordPress.com site

5 Minutes on Adobe Flex – Extending Alert …

3 Comments

Alert is pretty nice component, it got better when it was extended further.

It can be used as a confirmation, error or information dialog for instance to improve user experience.  This reuseable component will be good for you to do so.

AlertEx.as

package foss.afxtionlib.mx
{
	import mx.controls.Alert;
	public class AlertEx extends Alert
	{
		[Bindable]
		[Embed(source="assets/icons/48x48/info.png")]
		private static var InfoIcon:Class;
		[Bindable]
		[Embed(source="assets/icons/48x48/error.png")]
		private static var ErrorIcon:Class;
		[Bindable]
		[Embed(source="assets/icons/48x48/confirm.png")]
		private static var ConfirmIcon:Class;
		public function AlertEx()
		{
			super();
		}
		public static function info(message:String, closehandler:Function=null):void
		{
			show(message, "Information", Alert.OK, null, closehandler, InfoIcon);
		}
		public static function error(message:String, closehandler:Function=null):void
		{
			show(message, "Error", Alert.OK, null, closehandler, ErrorIcon);
		}
		public static function confirm(message:String, closehandler:Function=null):void
		{
			show(message, "Confirm", Alert.YES|Alert.NO, null, closehandler, ConfirmIcon);
		}
	}
}

The caller can then write the callback function to be called when the dialog is closed or handle the button click accordingly.

public static function alertClosed(event:Event):void
{
	trace("Alert Closed Handler: URL ==> " + redirectURL);
	var request:URLRequest = new URLRequest(redirectURL);
	navigateToURL(request, "_self");
}

AlertEx.info("Redirecting you to my home page!", alertClosed);

Quick Testing



public static function processFaultEvent(fe:FaultEvent):void
{
	AlertEx.confirm("Do you want to resubmit request?", handleAlert);
}

public static function handleAlert(event:Object):void
{
	if(event.detail == Alert.YES)
	{
		trace("'Yes' button clicked");
	}
	else if(event.detail == Alert.NO)
	{
		trace("'No' button clicked");
	}
}
Advertisements

3 thoughts on “5 Minutes on Adobe Flex – Extending Alert …

  1. Hi, thanks for the info,

    Any chance you know how to add different styling (not just icon) for each alert type – lets say a different font color or border color.
    I now the alert can be styled using the CSS: Alert {property:value} but how can I style each type differently?

    thanks

    • I believe that you’re looking for something like this (Taken from http://blog.flexexamples.com)

      Alert {
      titleStyleName: “alertTitle”;
      messageStyleName: “alertMessage”;
      buttonStyleName: “alertButton”;
      dropShadowEnabled: true;
      shadowDistance: 5;
      shadowDirection: right;
      cornerRadius: 0;
      embedFonts: true;
      fontFamily: Base01;
      }

      .alertTitle {
      letterSpacing: 0;
      fontSize: 14;
      color: red;
      }

      .alertMessage {
      letterSpacing: 0;
      fontSize: 10;
      fontWeight: normal;
      color: black;
      }

      .alertButton {
      letterSpacing: 0;
      fontSize: 11;
      cornerRadius: 10;
      fontWeight: normal;
      textRollOverColor: white;
      color: red;
      skin: ClassReference(null);
      }

  2. thanks for the replay,
    but the problem is that i want lets say different border color for info alert and different border color for confirm alert. in the example you gave me the styling is changed for all alert types…

    any suggestions?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s