AboutFlex.net

flex,air,flash …

Archive for October, 2008

“Yes, it’s true the Flex camp Italy is now part of the Max Europe that will take place in december! [...]
Moreover I believe that these two events together are like nitro + glycerin, Max is great and the camp is totally user oriented…”

read the full article at http://www.flexcamp.it/2008/10/30/flex-camp-join-the-max-milan/

you can register here

CustomAlert

Posted by Fedele Marotti under ActionScript 3, Components, Flex, Mxml

This example shows you a message in a modal window like the Alert class; the difference is that you can skin the message window as you like using mxml.

This movie requires Flash Player 9

The Application:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" viewSourceURL="srcview/index.html">
	<mx:Script>
		<![CDATA[
			import it.creativesource.utility.CustomAlertEvent;
			import it.creativesource.utility.CustomAlert;

			private function handler(e:CustomAlertEvent):void{
				reports.text+=e+'\ndetail:'+e.detail+'\n---------------\n'
			}

		]]>
	</mx:Script>
	<mx:HBox width="400" horizontalAlign="center">
		<mx:Button label="btn1" click="{CustomAlert.show('hello from your custom alert!!','CUSTOM ALERT TITLE',null,handler)}" />
		<mx:Button label="btn2" click="{CustomAlert.show('hello from your custom alert!!','CUSTOM ALERT TITLE',['YES','NO'],handler)}" />
	</mx:HBox>
	<mx:TextArea id="reports"  height="174" width="400"/>
</mx:Application>

The CustomAlert class:

package it.creativesource.utility
{

	import flash.display.DisplayObject;
	import flash.events.MouseEvent;

	import mx.controls.LinkButton;
	import mx.core.Application;
	import mx.managers.PopUpManager;

	public class CustomAlert
	{

		private static var customAlertUI:CustomAlertUI=new CustomAlertUI();
		public static const CUSTOM_EVENT:String="CustomAlertEvent"

		public static function show(msg:String,title:String=null,btns:Array=null,closeHandler:Function = null):void{

			customAlertUI=CustomAlertUI(PopUpManager.createPopUp(Application.application as DisplayObject, CustomAlertUI , true));
			customAlertUI.msg.text=msg
			customAlertUI.title.text=title
			PopUpManager.centerPopUp (customAlertUI);

			if(closeHandler!=null)
				customAlertUI.addEventListener(CUSTOM_EVENT, closeHandler);

			var btn:LinkButton=new LinkButton();
			if(!btns || btns.length==0){
				btn.addEventListener(MouseEvent.CLICK,handleClick);
				btn.label="OK";
				customAlertUI.btns.addChild(btn)
			}else{
				for(var i:int=0;i<btns.length;i++){
					btn=new LinkButton();
					btn.addEventListener(MouseEvent.CLICK,handleClick);
					btn.label=btns[i];
					customAlertUI.btns.addChild(btn)
				}

			}

		}
		private static function handleClick(e:MouseEvent):void{
			PopUpManager.removePopUp(customAlertUI)
			customAlertUI.dispatchEvent(new CustomAlertEvent(CUSTOM_EVENT,e.currentTarget.label));

		}

	}
}

The CustomAlertEvent class:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
	cornerRadius="6" backgroundColor="#D7EEF6"
	borderStyle="solid" borderColor="#D7EEF6"
	paddingTop="6" paddingRight="6" paddingLeft="6" paddingBottom="6"
	horizontalAlign="center" width="274">
	<mx:Script>
		<![CDATA[
			import mx.managers.PopUpManager;
			private function handleDown(e:MouseEvent):void{
				if(!(e.target is Image))
				this.startDrag()
			}
			private function handleUp(e:MouseEvent):void{
				this.stopDrag()
			}
		]]>
	</mx:Script>
	<mx:HBox
		mouseDown="handleDown(event)"
		mouseUp="handleUp(event)"
		backgroundColor="#f6fcfe" width="100%"
		borderColor="#f6fcfe" borderStyle="solid" cornerRadius="6"
		height="24" verticalAlign="middle" horizontalAlign="left"
		id="hbox0" paddingRight="6">
			<mx:Label id="title"
				width="100%" textAlign="left" paddingLeft="6" paddingTop="2"/>
			<mx:Image source="@Embed('assets/close.png')" buttonMode="true"
				click="{PopUpManager.removePopUp(this)}" />
	</mx:HBox>
	<mx:VBox   backgroundColor="#f6fcfe"
		borderColor="#f6fcfe" borderStyle="solid" cornerRadius="6" verticalAlign="top"
		verticalGap="0" width="100%">

		<mx:Text
			id="msg"
			text=""
			textAlign="left" paddingTop="6" paddingBottom="6"
			paddingLeft="6" paddingRight="6" width="100%"/>

		<mx:HBox id="btns" width="100%" horizontalAlign="center" >
		
		</mx:HBox>
	</mx:VBox>

</mx:VBox>

The CustomAlertUI class:

package it.creativesource.utility
{
	import flash.events.Event;

	public class CustomAlertEvent extends Event
	{
		public var detail:String="";
		public function CustomAlertEvent(type:String, detail:String="" , bubbles:Boolean=false, cancelable:Boolean=false)
		{
			this.detail=detail;
			super(type, bubbles, cancelable);
		}

	}
}

related arguments