Setting a custom broken image icon for the Spark Image control in Flex Hero

In a previous example, “Setting a custom broken image skin for the Image control in Flex”, we saw how you could set a custom broken image skin for the Flex Image control by setting the brokenImageSkin style.

The following example shows how you can set a custom broken image skin for the Spark Image control in Flex Hero by creating a custom skin and creating a BitmapImage instance in the invalid state.

The following example(s) require Flash Player 10 and the beta Adobe Flex Hero SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex Hero SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+Hero.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/10/25/setting-a-custom-broken-image-icon-for-the-spark-image-control-in-flex-hero/ -->
<s:Application name="Spark_Image_skinClass_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <s:Button label="Good"
                click="loadImage('http://helpexamples.com/flash/images/image1.jpg');" />
        <s:Button label="Bad"
                click="loadImage('404.gif');" />
    </s:controlBarContent>
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
 
            private function image_ioError(evt:IOErrorEvent):void {
                Alert.show(evt.text, evt.type);
            }
 
            private function loadImage(src:String):void {
                image.source = src;
            }
        ]]>
    </fx:Script>
 
    <s:Image id="image"
            skinClass="skins.CustomImageSkin"
            width="200" height="200"
            ioError="image_ioError(event);" />
 
</s:Application>

And the custom Spark Image skin class, skins/CustomImageSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/10/25/setting-a-custom-broken-image-icon-for-the-spark-image-control-in-flex-hero/ -->
<s:Skin name="CustomImageSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        alpha.disabled="0.5">
    <!-- states -->
    <s:states>
        <s:State name="uninitialized" />
        <s:State name="loading"/>
        <s:State name="ready" />
        <s:State name="invalid" />
        <s:State name="disabled" />
    </s:states>
 
    <!-- host component -->
    <fx:Metadata>
        [HostComponent("spark.components.Image")]
    </fx:Metadata>
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                // Push backgroundColor and backgroundAlpha directly.
                // Handle undefined backgroundColor by hiding the background object.
                if (isNaN(getStyle("backgroundColor"))) {
                    background.visible = false;
                    background.includeInLayout = false;
                } else {
                    background.visible = true;
                    background.includeInLayout = true;
                    bgFill.color = getStyle("backgroundColor");
                    bgFill.alpha = getStyle("backgroundAlpha");
                }
 
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>        
    </fx:Script>
 
    <!-- Defines the appearance of the image background. -->
    <s:Rect id="background" left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:SolidColor id="bgFill"/>
        </s:fill>
    </s:Rect>
 
    <!-- Primary image display part -->
    <s:BitmapImage id="imageDisplay" left="0" top="0" right="0" bottom="0"/>
 
    <!-- Progress indicator part -->
    <s:Range id="progressIndicator" skinClass="spark.skins.spark.ImageLoadingSkin" verticalCenter="0" horizontalCenter="0" includeIn="loading" layoutDirection="ltr" />
 
    <!-- Invalid image icon -->
    <s:BitmapImage includeIn="invalid" source="@Embed('assets/error.png')" verticalCenter="0" horizontalCenter="0"/>
 
    <s:Rect includeIn="invalid" left="0" right="0" top="0" bottom="0">
        <s:stroke>
            <s:SolidColorStroke weight="0" color="#000000" />
        </s:stroke>
    </s:Rect>
 
</s:Skin>

This entry is based on a beta version of the Flex Hero SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Hero SDK.