The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/10/10/displaying-an-fxg-file-in-a-spark-bitmapimage-control-in-flex-4/ -->
<s:Application name="Spark_BitmapImage_source_FXG_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:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            import assets.*;
        ]]>
    </fx:Script>
 
    <s:BitmapImage id="bmpImg" source="{Chevron}" />
 
</s:Application>

And the FXG file, assets/Chevron.fxg, is as follows:

<?xml version="1.0" encoding="UTF-8"?>
<!-- http://blog.flexexamples.com/2010/10/10/displaying-an-fxg-file-in-a-spark-bitmapimage-control-in-flex-4/ -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008"
        xmlns:d="http://ns.adobe.com/fxg/2008/dt"
        xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
        version="2.0">
    <Path y="1" data="M 2 0 L 7 7 L 2 14 L 0 14 L 5 7 L 0 0 L 2 0 Z">
        <fill>
            <SolidColor color="#000000" alpha="0.6"/>
        </fill>
    </Path>
    <Path data="M 2 0 L 7 7 L 2 14 L 0 14 L 5 7 L 0 0 L 2 0 Z">
        <fill>
            <SolidColor color="#FF0000"/>
        </fill>
    </Path>
</Graphic>

View source is enabled in the following example.

Or you can set the BitmapImage control’s source property using MXML, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/10/10/displaying-an-fxg-file-in-a-spark-bitmapimage-control-in-flex-4/ -->
<s:Application name="Spark_BitmapImage_source_FXG_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"
        xmlns:assets="assets.*">
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <s:BitmapImage id="bmpImg">
        <s:source>
            <assets:Chevron />
        </s:source>
    </s:BitmapImage>
 
</s:Application>

This entry is based on a beta version of the Flex 4 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 4 SDK.

 

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/24/using-a-bitmap-image-skin-in-a-spark-button-control-in-flex-4/ -->
<s:Application name="Spark_Button_skinClass_BitmapImage_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">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|Button#closeBtn {
            skinClass: ClassReference("skins.ImageButtonSkin");
        }
    </fx:Style>
 
    <s:Button id="closeBtn"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

And the custom Spark Button skin class, skins/ImageButtonSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/24/using-a-bitmap-image-skin-in-a-spark-button-control-in-flex-4/ -->
<s:SparkSkin name="ImageButtonSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        minWidth="21" minHeight="21"
        alpha.disabled="0.5">
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
 
    <!-- host component -->
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            /* Define the skin elements that should not be colorized.
            For button, the graphics are colorized but the label is not. */
            static private const exclusions:Array = ["labelDisplay"];
 
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
 
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
        ]]>
    </fx:Script>
 
    <s:BitmapImage source="@Embed('assets/images/close_button_up.png')"
            source.over="@Embed('assets/images/close_button_over.png')"
            source.down="@Embed('assets/images/close_button_down.png')"
            left="0" right="0" top="0" bottom="0" />
 
    <!-- layer 8: text -->
    <s:Label id="labelDisplay"
            textAlign="center"
            verticalAlign="middle"
            maxDisplayedLines="1"
            horizontalCenter="0" verticalCenter="1"
            left="10" right="10" top="2" bottom="2" />
 
</s:SparkSkin>

Icons copyright of famfamfam.com.

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 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 4 SDK.

 

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/12/14/playing-a-video-from-an-rtmp-server-using-the-spark-videoplayer-control-in-flex-4/ -->
<s:Application name="Spark_VideoPlayer_DynamicStreamingVideoSource_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    <s:VideoPlayer id="vidPlyr"
            loop="true"
            muted="true"
            left="100" right="100"
            top="100" bottom="100"
            horizontalCenter="0" verticalCenter="0">
        <s:source>
            <s:DynamicStreamingVideoSource host="rtmp://fmsexamples.adobe.com/vod/" streamType="recorded">
                <s:DynamicStreamingVideoItem streamName="mp4:_cs4promo_1000.f4v" />
            </s:DynamicStreamingVideoSource>
        </s:source>
    </s:VideoPlayer>
 
</s:Application>

This entry is based on a beta version of the Flex 4 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 4 SDK.

 

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2009/11/04/using-an-xml-data-provider-with-the-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_dataProvider_XML_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <s:List id="lst"
            labelField="@label"
            horizontalCenter="0" verticalCenter="0">
        <s:dataProvider>
            <s:XMLListCollection>
                <fx:XMLList xmlns="">
                    <node label="One" />
                    <node label="Two" />
                    <node label="Three" />
                    <node label="Four" />
                    <node label="Five" />
                    <node label="Six" />
                    <node label="Seven" />
                    <node label="Eight" />
                    <node label="Nine" />
                </fx:XMLList>
            </s:XMLListCollection>
        </s:dataProvider>
    </s:List>
 
</s:Application>

Or, if you wanted to embed the XML into your application, you could use the <fx:XML/> tag and bind to an XMLListCollection, as seen in the following example:

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2009/11/04/using-an-xml-data-provider-with-the-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_dataProvider_XML_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Declarations>
        <fx:XML id="nodes" source="nodesAndStuff.xml" />
    </fx:Declarations>
 
    <s:List id="lst"
            labelField="@label"
            horizontalCenter="0" verticalCenter="0">
        <s:dataProvider>
            <s:XMLListCollection source="{nodes.children()}" />
        </s:dataProvider>
    </s:List>
 
</s:Application>

And the external .XML file, nodesAndStuff.xml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/11/04/using-an-xml-data-provider-with-the-spark-list-control-in-flex-4/ -->
<root>
    <node label="One" />
    <node label="Two" />
    <node label="Three" />
    <node label="Four" />
    <node label="Five" />
    <node label="Six" />
    <node label="Seven" />
    <node label="Eight" />
    <node label="Nine" />
</root>

Or, if you didn’t want to use data binding, Corey, you could set the data provider using ActionScript, as seen in the following example:

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2009/11/04/using-an-xml-data-provider-with-the-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_dataProvider_XML_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            private function init():void {
                xmlListColl.source = nodes.children();
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <fx:XML id="nodes" source="nodesAndStuff.xml" />
    </fx:Declarations>
 
    <s:List id="lst"
            labelField="@label"
            horizontalCenter="0" verticalCenter="0">
        <s:dataProvider>
            <s:XMLListCollection id="xmlListColl" />
        </s:dataProvider>
    </s:List>
 
</s:Application>

This entry is based on a beta version of the Flex 4 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 4 SDK.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/29/preventing-an-image-from-automatically-loading-in-an-image-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="btn"
                label="Load Image"
                click="img.load();" />
    </mx:ApplicationControlBar>

    <mx:Image id="img"
            autoLoad="false"
            source="assets/Fx.png"
            maintainAspectRatio="true"
            percentWidth="100"
            percentHeight="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/29/preventing-an-image-from-automatically-loading-in-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.Button;
            import mx.controls.Image;

            private var btn:Button;
            private var img:Image;

            private function init():void {
                btn = new Button();
                btn.label = "Load Image";
                btn.addEventListener(MouseEvent.CLICK, btn_click);

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

                img = new Image();
                img.autoLoad = false;
                img.source = "assets/Fx.png";
                img.maintainAspectRatio = true;
                img.percentWidth = 100;
                img.percentHeight = 100;
                addChild(img);
            }

            private function btn_click(evt:MouseEvent):void {
                img.load();
            }
        ]]>
    </mx:Script>

</mx:Application>

 

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>

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/12/using-a-combobox-to-filter-items-in-a-datagrid-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

            private function toggleFilter():void {
                if (checkBox.selected) {
                    arrColl.filterFunction = processFilter;
                } else {
                    arrColl.filterFunction = null;
                }
                arrColl.refresh();
            }

            private function processFilter(item:Object):Boolean {
                return parseFloat(item.value) == 0;
            }

            private function value_labelFunc(item:Object, col:DataGridColumn):String {
                return item[col.dataField].toFixed(2);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object name="ColdFusion" value="0.00" />
                <mx:Object name="Dreamweaver" value="0.12" />
                <mx:Object name="Fireworks" value="1.01" />
                <mx:Object name="Flash" value="0" />
                <mx:Object name="Flash Player" value="-0.00" />
                <mx:Object name="Flex" value="0.00" />
                <mx:Object name="Illustrator" value="2.92" />
                <mx:Object name="Lightroom" value="0.32" />
                <mx:Object name="Photoshop" value="0.06" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:Panel status="{arrColl.length}/{arrColl.source.length} item(s)">
        <mx:DataGrid id="dataGrid"
                dataProvider="{arrColl}"
                verticalScrollPolicy="on">
            <mx:columns>
                <mx:DataGridColumn dataField="name" />
                <mx:DataGridColumn dataField="value"
                        labelFunction="value_labelFunc" />
            </mx:columns>
        </mx:DataGrid>
        <mx:ControlBar>
            <mx:CheckBox id="checkBox"
                    label="Filter DataGrid"
                    click="toggleFilter();" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.