Search Flex Components Free

Custom Search

March 16, 2008

Setting a custom broken image skin for the Image control in Flex





The following example shows how you can set a custom broken image skin for the Flex Image control by setting the brokenImageSkin style.


Full code after the jump.


View MXML


<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"

verticalAlign="middle"

backgroundColor="white">



<mx:Script>

<![CDATA[

import mx.controls.Alert;



private var alert:Alert;



private function image_ioError(evt:IOErrorEvent):void {

alert = Alert.show(evt.text, evt.type);

}



private function loadImage(src:String):void {

image.source = src;

}

]]>

</mx:Script>



<mx:Style>

Image {

brokenImageSkin: Embed("assets/flex_logo.jpg");

}

</mx:Style>



<mx:ApplicationControlBar dock="true">

<mx:Button label="Good"

click="loadImage('assets/flashplayer_icon.jpg');" />

<mx:Button label="Bad"

click="loadImage('assets/404.gif');" />

</mx:ApplicationControlBar>



<mx:Image id="image"

maintainAspectRatio="true"

scaleContent="false"

width="200"

height="200"

ioError="image_ioError(event);" />



</mx:Application>



Related Flex Tutorials