Detecting when the source changes on an Image control in Flex

The following example shows how you can detect when the source property has changed on a Flex Image control using the sourceChanged event.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/27/detecting-when-the-source-changes-on-an-image-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private function init():void {
                img.addEventListener("sourceChanged", image_sourceChanged);
            }

            private function image_sourceChanged(evt:Event):void {
                Alert.show(evt.toString(), evt.type);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Flash"
                click="img.source = 'assets/fl_appicon.jpg';" />
        <mx:Button label="Flash Player"
                click="img.source = 'assets/fl_player_appicon.jpg';" />
        <mx:Button label="Flex"
                click="img.source = 'assets/fx_appicon.jpg';" />
    </mx:ApplicationControlBar>

    <mx:Image id="img"
            source="assets/fx_appicon.jpg"
            initialize="init();"
            width="100"
            height="100" />

</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/27/detecting-when-the-source-changes-on-an-image-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.controls.Alert;
            import mx.controls.Button;
            import mx.controls.Image;

            private var button1:Button;
            private var button2:Button;
            private var button3:Button;
            private var img:Image;

            private function init():void {
                button1 = new Button();
                button1.label = "Flash";
                button1.addEventListener(MouseEvent.CLICK, function():void {
                    img.source = "assets/fl_appicon.jpg";
                });

                button2 = new Button();
                button2.label = "Flash Player";
                button2.addEventListener(MouseEvent.CLICK, function():void {
                    img.source = "assets/fl_player_appicon.jpg";
                });

                button3 = new Button();
                button3.label = "Flex";
                button3.addEventListener(MouseEvent.CLICK, function():void {
                    img.source = "assets/fx_appicon.jpg";
                });

                var appControlBar:ApplicationControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(button1);
                appControlBar.addChild(button2);
                appControlBar.addChild(button3);
                Application.application.addChildAt(appControlBar, 0);

                img = new Image();
                img.source = "assets/fx_appicon.jpg";
                img.width = 100;
                img.height = 100;
                img.addEventListener("sourceChanged", image_sourceChanged);
                addChild(img);
            }

            private function image_sourceChanged(evt:Event):void {
                Alert.show(evt.toString(), evt.type);
            }
        ]]>
    </mx:Script>

</mx:Application>

8 thoughts on “Detecting when the source changes on an Image control in Flex

  1. Thanks for the tip. I could not find any documentation on the “sourceChanged” Event in the Flex help and there doesn’t seem to be any popup hints for this event when coding the component in Flex. Any ideas?

  2. Brendan,

    There are several “undocumented” events in the Flex API. These events weren’t really meant for public use, but they can be useful in certain circumstances.

    Peter

  3. Do you know if there is a way to force the image to redraw? I’m very new to flex, but it looks as though the image is redrawn any time source is set, except in the case where I need it to.

    Any help is appreciated. Thanks in advance.

    Barry

  4. Thanks for this, I’ve spent a lot of time trying to look how to do this without having to override the load method and the source property. I’m a bit miffed they decided not to publish this particular event! Is there a source of information you would recommend that would reveal these “hidden” features?

    Thanks for the tip – very helpful!!

  5. Matt,

    I just look through the source code. The Image class (\frameworks\projects\framework\src\mx\controls\Image.as) isn’t very exciting. It only has the dataChange event metadata and there is only one instance of the dispatchEvent() method being called (from the data property setter function). The next trick is to browse the superclass (in this case SWFLoader.as) and see what it has.
    Quickly searching for “dispatchEvent(“, we can see the following undocumented events (probably since you’d probably never need them in your applications):
    — “autoLoadChanged” event (dispatched from autoLoad setter)
    — “loadForCompatibilityChanged” event (dispatched from loadForCompatibility setter)
    — “loaderContextChanged” event (dispatched from loaderContext setter)
    — “maintainAspectRatioChanged” event (dispatched from maintainAspectRatio setter)
    — “scaleContentChanged” event (dispatched from scaleContent setter)
    — “sourceChanged” event (dispatched from source setter)
    — “trustContentChanged” event (dispatched from trustContent setter)

    Or, another approach is to search the source code for the following string:

    new Event("

    Using TextPad, I searched the entire \frameworks\projects\framework\src\ folder for all .AS files and it found 245 occurrence(s) in 51 file(s).
    Here’s the results for the SWFLoader class (odd, I’m not sure why “loadForCompatibilityChanged” event didn’t appear in this list):

    mx\controls\SWFLoader.as(445): dispatchEvent(new Event(“autoLoadChanged”));
    mx\controls\SWFLoader.as(706): dispatchEvent(new Event(“loaderContextChanged”));
    mx\controls\SWFLoader.as(742): dispatchEvent(new Event(“maintainAspectRatioChanged”));
    mx\controls\SWFLoader.as(808): dispatchEvent(new Event(“scaleContentChanged”));
    mx\controls\SWFLoader.as(929): dispatchEvent(new Event(“sourceChanged”));
    mx\controls\SWFLoader.as(993): dispatchEvent(new Event(“trustContentChanged”));

    The entire list is too long (and boring) to post here though.

    Happy Flexing!
    Peter

Comments are closed.