Adding Icon

[Booma Devi]

Hi,

Can any one tell me how to display the image to the right side of alert box...

I can display the icon in the alert box through the property titleIcon.. But i want to display that icon to the right side..

[Booma Devi]

Hi,

I have placed the icon to the right side of alert box.. But click event is not fired.. 

<xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/06/removing-the-default-dropshadow-from-the-halo-alert-control-in-flex-4/ -->
<s:SparkSkin name="CustomPanelBorderSkin"
			 xmlns:fx="http://ns.adobe.com/mxml/2009"
			 xmlns:s="library://ns.adobe.com/flex/spark"
			 implements="mx.core.IRectangularBorder" xmlns:mx="library://ns.adobe.com/flex/mx" initialize="sparkskin1_initializeHandler()">
	
	<fx:Style source="/css/Alertstyle.css"/>
	
	<fx:Script>
		<![CDATA[
			import mx.core.EdgeMetrics;
			import mx.core.IUIComponent;
			import mx.events.FlexEvent;
			
			import spark.components.Button;
			import spark.components.Image;
			
			public function sparkskin1_initializeHandler():void
			{
				closeButton.addEventListener(MouseEvent.CLICK,close);
			}
			
			public function close(eve:MouseEvent):void     
			{        
				trace(eve.currentTarget.id);    
			
			}  
			/* Define the skin elements that should not be colorized. 
			For panel, border and title backround are skinned, but the content area and title text are not. */
			static private const exclusions:Array = ["background"];
			override public function get colorizeExclusions():Array {
				return exclusions;
			}
			
			/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
			static private const contentFill:Array = ["bgFill"];
			override public function get contentItems():Array {
				return contentFill
			}
			
			private var _metrics:EdgeMetrics = new EdgeMetrics(1, 32, 1, 1);
			public function get borderMetrics():EdgeMetrics {
				var hasPanelParent:Boolean = isPanel(parent);
				var controlBar:IUIComponent = hasPanelParent ? Object(parent).mx_internal::_controlBar : null;
				
				if (controlBar && controlBar.includeInLayout) {
					_metrics.bottom = controlBar.getExplicitOrMeasuredHeight() + 1;
				} else {
					_metrics.bottom = 1;
				}
				return _metrics;
			}
			
			public function get backgroundImageBounds():Rectangle {
				return null;
			}
			
			public function set backgroundImageBounds(value:Rectangle):void {
			}
			
			public function get hasBackgroundImage():Boolean {
				return false;
			}
			
			public function layoutBackgroundImage():void {
			}
			
			override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
				var em:EdgeMetrics = borderMetrics;
				if (em.bottom > 1) {
					cbbg.height = em.bottom - 1;
					cbdiv.bottom = cbbg.height;
					cbbg.visible = cbdiv.visible = true;
				} else {
					cbbg.visible = cbdiv.visible = false;
				}
				super.updateDisplayList(unscaledWidth, unscaledHeight);
			}
			
			private static var panels:Object = {};
			
			private static function isPanel(parent:Object):Boolean {
				var s:String = getQualifiedClassName(parent);
				if (panels[s] == 1) {
					return true;
				}
				if (panels[s] == 0) {
					return false;
				}
				if (s == "mx.containers::Panel") {
					panels[s] == 1;
					return true;
				}
				var x:XML = describeType(parent);
				var xmllist:XMLList = x.extendsClass.(@type == "mx.containers::Panel");
				if (xmllist.length() == 0) {
					panels[s] = 0;
					return false;
				}
				panels[s] = 1;
				return true;
			}
			

]]>
</fx:Script>

<!-- layer 1: border -->
<s:Rect left="0" right="0" top="0" bottom="0" bottomLeftRadiusX="5" topLeftRadiusX="5" topRightRadiusX="5" bottomRightRadiusY="5">
<s:fill>
<s:SolidColor color="0x4a494a" />
</s:fill>

</s:Rect>

<!-- layer 2: background fill -->
<s:Rect id="background" left="1" top="" right="1" bottom="0">
<s:fill>
<s:SolidColor color="black" id="bgFill" />
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0" alpha="0.50" weight="6" />
</s:stroke>
</s:Rect>

<!-- Layer 3: background fill with color -->

<s:Rect id="back" left="1" top="1" right="1" bottom="1" bottomLeftRadiusX="5" topLeftRadiusX="5" topRightRadiusX="5" bottomRightRadiusY="5">
<s:fill>
<s:LinearGradient>
<s:entries>
<mx:GradientEntry color="0x4a494a"/>
</s:entries>
</s:LinearGradient>
</s:fill>
</s:Rect>

<mx:HBox right="0" top="4" height="26" verticalAlign="middle" buttonMode="true" useHandCursor="true" mouseChildren="false">
<s:Image id="img" source="@Embed('assets/icon_close.gif')" click="close(event)"/>

<s:Button id="closeButton" label="Close" color="white" fontSize="10"
skinClass="skins.TransparentButton"/>


</mx:HBox>

<!-- layer 4: title bar highlight -->

<s:Rect left="1" right="1" top="1" bottom="1" height="30" bottomLeftRadiusX="5" topLeftRadiusX="5" topRightRadiusX="5" bottomRightRadiusY="5">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xe4e6e4" />
<s:GradientEntry color="0xe4e6e4" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>


<!-- layer 5: control bar background -->
<s:Rect id="cbbg" left="1" right="1" bottom="1" height="20" bottomLeftRadiusX="5" topLeftRadiusX="5" topRightRadiusX="5" bottomRightRadiusY="5">
<s:fill>
<s:SolidColor color="0xe4e6e4" />
</s:fill>
</s:Rect>

<!-- layer 6: control bar divider line -->
<s:Rect id="cbdiv" left="1" right="1" bottom="20" height="1" topLeftRadiusX="5" topRightRadiusX="5" bottomLeftRadiusX="5" bottomRightRadiusY="5">
<s:fill>
<s:SolidColor color="0xe4e6e4" />
</s:fill>
</s:Rect>

<!-- layer 7: content filling with color -->

<s:Rect id="backrev" left="1" top="30" right="1" bottom="1">
<s:fill>
<s:LinearGradient>
<s:entries>
<mx:GradientEntry color="0xe4e6e4"/>
</s:entries>
</s:LinearGradient>
</s:fill>
</s:Rect>

</s:SparkSkin>[/code]