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.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/23/deleting-nodes-from-an-xml-object-in-flex/ -->
<mx:Application name="XML_delete_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            protected function btn1_clickHandler(evt:MouseEvent):void {
                delete someXML.nodeToDelete;
                txtArea.text = someXML.toXMLString();
            }
 
            protected function btn2_clickHandler(evt:MouseEvent):void {
                delete someXML.child.(@label == 'two')[0];
                txtArea.text = someXML.toXMLString();
            }
        ]]>
    </mx:Script>
 
    <mx:XML id="someXML">
        <root>
            <child label="one" />
            <child label="two" />
            <child label="three" />
            <nodeToDelete label="four" />
            <child label="five" />
            <nodeToDelete label="six">
                <child label="seven" />
                <child label="eight" />
            </nodeToDelete>
            <child label="nine" />
        </root>
    </mx:XML>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Button id="btn1"
                label="delete &lt;nodeToDelete&gt; nodes"
                click="btn1_clickHandler(event);" />
        <mx:Button id="btn2"
                label="delete &lt;child label='two'&gt; node"
                click="btn2_clickHandler(event);" />
    </mx:ApplicationControlBar>
 
    <mx:TextArea id="txtArea"
            text="{someXML.toXMLString()}"
            width="300" height="200" />
 
</mx:Application>

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/10/displaying-dynamically-loaded-xml-in-a-datagrid-control-in-flex/ -->
<mx:Application name="DataGrid_XML_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:net="flash.net.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

            public namespace sitemapNS = "http://www.google.com/schemas/sitemap/0.84";

            private function loadXML(targetURL:String):void {
                urlLdr.load(new URLRequest(targetURL));
                loadBtn.enabled = false;
            }

            private function urlLdr_complete(evt:Event):void {
                var xmlData:XML = new XML(URLLoader(evt.currentTarget).data);
                xmlListColl = new XMLListCollection(xmlData.children());
                dataGrid.enabled = true;
                loadBtn.enabled = true;
            }

            private function dataGrid_labelFunc(item:XML, col:DataGridColumn):String {
                var qN:QName = new QName(sitemapNS, col.dataField);
                return item[qN].text();
            }

            private function dataGrid_dateLabelFunc(item:XML, col:DataGridColumn):String {
                var qN:QName = new QName(sitemapNS, col.dataField);
                var value:String = item[qN].text();
                value = value.replace(/-/g, "/");
                value = value.replace("T", " ");
                value = value.replace("+00:00", "");
                return value;
            }

            private function dataGrid_itemDoubleClick(evt:ListEvent):void {
                use namespace sitemapNS;
                var url:String = evt.itemRenderer.data.loc;
                navigateToURL(new URLRequest(url), "_blank");
            }
        ]]>
    </mx:Script>

    <net:URLLoader id="urlLdr"
            complete="urlLdr_complete(event);" />
    <mx:XMLListCollection id="xmlListColl" />

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="loadBtn"
                label="Load XML"
                click="loadXML('http://blog.flexexamples.com/sitemap.xml');" />
        <mx:Spacer width="100%" />
        <mx:ProgressBar id="progressBar"
                mode="event"
                source="{urlLdr}"
                labelPlacement="center" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            dataProvider="{xmlListColl}"
            doubleClickEnabled="true"
            itemDoubleClick="dataGrid_itemDoubleClick(event);"
            enabled="false"
            width="100%"
            height="100%">
        <mx:columns>
            <mx:DataGridColumn dataField="loc"
                    labelFunction="dataGrid_labelFunc"
                    itemRenderer="mx.controls.Label" />
            <mx:DataGridColumn dataField="lastmod"
                    labelFunction="dataGrid_dateLabelFunc"
                    width="150" />
            <mx:DataGridColumn dataField="changefreq"
                    labelFunction="dataGrid_labelFunc"
                    width="100" />
            <mx:DataGridColumn dataField="priority"
                    labelFunction="dataGrid_labelFunc"
                    width="100" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/19/inspecting-the-properties-in-a-class-using-the-describetype-method-and-e4xxml/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import flash.utils.getDefinitionByName;

            import mx.collections.Sort;
            import mx.collections.SortField;
            import mx.collections.XMLListCollection;
            import mx.controls.*;
            import mx.utils.StringUtil;
            import mx.utils.ObjectUtil;

            [Embed("bullet_red.png")]
            private const WRITE_ONLY_ICON:Class;

            [Embed("bullet_yellow.png")]
            private const READ_ONLY_ICON:Class;

            [Embed("bullet_green.png")]
            private const READ_WRITE_ICON:Class;

            private var theXML:XML;
            private var theXMLList:XMLList;
            private var theXMLListColl:XMLListCollection;

            private function init():void {
                var theSortField:SortField = new SortField("@name", true);
                var theSort:Sort = new Sort();
                theSort.fields = [theSortField];

                // var theXML:XML = describeType(getDefinitionByName("mx.controls.Alert"));
                theXML = describeType(Label);
                theXMLList = theXML.factory.accessor.(@declaredBy == theXML.@name);
                theXMLListColl = new XMLListCollection(theXMLList);
                theXMLListColl.sort = theSort;
                theXMLListColl.refresh();
                list.dataProvider = theXMLListColl;
                panel.title = "Accessor methods for the " + theXML.@name + " class:"
            }

            private function list_labelFunc(item:XML):String {
                var itemName:String = item.@name;
                var itemType:String = item.@type.split("::").pop();
                return StringUtil.substitute("{0} : {1}",
                            itemName,
                            itemType);
            }

            private function list_iconFunc(item:XML):Class {
                var access:String = item.@access;
                switch (access) {
                    case "readwrite":
                        return READ_WRITE_ICON;
                        break;
                    case "readonly":
                        return READ_ONLY_ICON;
                        break;
                    case "writeonly":
                        return WRITE_ONLY_ICON;
                        break;
                    default:
                        break;
                }
                return null;
            }
        ]]>
    </mx:Script>

    <mx:Panel id="panel" width="350">
        <mx:List id="list"
                labelFunction="list_labelFunc"
                iconFunction="list_iconFunc"
                verticalScrollPolicy="on"
                width="100%"
                itemClick="Alert.show(list.selectedItem.toXMLString());" />

        <mx:ControlBar>
            <mx:Button label="Read/Write" icon="{READ_WRITE_ICON}" skin="{null}" />
            <mx:Button label="Read Only" icon="{READ_ONLY_ICON}" skin="{null}" />
            <mx:Button label="Write Only" icon="{WRITE_ONLY_ICON}" skin="{null}" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/28/parsing-xml-nodes-and-objects-with-dashes-in-their-names-in-actionscript-30/ -->
<mx:Application name="XML_parser_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.rpc.xml.SimpleXMLDecoder;
            import mx.utils.ObjectUtil;

            private function init():void {
                var obj:Object = xmlToObject(xmlDP);

                txtXML.text = xmlDP.toXMLString();
                txtObject.text = ObjectUtil.toString(obj);

                lblXML.text = xmlDP.entry.child('font-family').text();
                lblObject.text = String(obj.root.entry["font-family"]);
            }

            private function xmlToObject(value:XML):Object {
                var xmlStr:String = value.toXMLString();
                var xmlDoc:XMLDocument = new XMLDocument(xmlStr);
                var decoder:SimpleXMLDecoder = new SimpleXMLDecoder(true);
                var resultObj:Object = decoder.decodeXML(xmlDoc);
                return resultObj;
            }
        ]]>
    </mx:Script>

    <mx:XML id="xmlDP">
        <root>
            <entry>
                <font-family>Arial</font-family>
                <font-size>12</font-size>
                <font-weight>normal</font-weight>
                <text-decoration>underline</text-decoration>
                <text>Hello world!</text>
            </entry>
        </root>
    </mx:XML>

    <mx:Panel id="xmlPanel">
        <mx:Text id="txtXML" />
        <mx:ControlBar>
            <mx:Label text="font-family:" />
            <mx:Label id="lblXML" />
        </mx:ControlBar>
    </mx:Panel>

    <mx:Panel id="objPanel" height="{xmlPanel.height}">
        <mx:Text id="txtObject" />
        <mx:ControlBar>
            <mx:Label text="font-family:" />
            <mx:Label id="lblObject" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/23/setting-the-node-indentation-level-when-calling-the-toxmlstring-method-in-actionscript-30/ -->
<mx:Application name="XML_prettyIndent_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private const xmlObj:XML = describeType(Application);

            private function init():void {
                slider.value = XML.prettyIndent;
                textArea.text = xmlObj.toXMLString();
            }

            private function slider_change(evt:SliderEvent):void {
                XML.prettyIndent = evt.value;
                textArea.text = xmlObj.toXMLString();
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="prettyIndent:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="8"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TextArea id="textArea"
            editable="false"
            wordWrap="false"
            width="100%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/22/ignoring-comments-in-an-xml-file-in-actionscript-30/ -->
<mx:Application name="XML_ignoreComments_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            XML.ignoreComments = false;

            private const xmlObj:XML = <TestCase>
                        <setup>
                            <!-- TODO: implement -->
                        </setup>
                        <body>
                            <!-- TODO: implement -->
                        </body>
                    </TestCase>;

            private function init():void {
                XML.ignoreComments = ignoreCommentsCheckBox.selected;

                var newXMLObj:XML = xmlObj.copy();
                textArea.text = newXMLObj.toXMLString();
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="ignoreComments:">
                <mx:CheckBox id="ignoreCommentsCheckBox"
                        change="init();" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TextArea id="textArea"
            editable="false"
            width="100%"
            height="100%"
            creationComplete="init();" />

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/22/determining-the-xml-classs-settings-in-actionscript-30/ -->
<mx:Application name="XML_settings_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.utils.ObjectUtil;

            private function init():void {
                var obj:Object = XML.settings();
                textArea.text = ObjectUtil.toString(obj);
            }
        ]]>
    </mx:Script>

    <mx:TextArea id="textArea"
            editable="false"
            width="100%"
            height="100%"
            creationComplete="init();" />

    <mx:Label text="{Capabilities.version}" />

</mx:Application>

View source is enabled in the following example.

For more information on the XML class’s settings() method, see the Flex 3 documentation at http://livedocs.adobe.com/flex/3/langref/XML.html#settings().

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/03/displaying-images-from-an-xml-file-using-the-repeater-component/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XML id="imagesXML" source="images.xml" />

    <mx:Zoom id="zoom" />

    <mx:HBox id="hBox">
         <mx:Repeater id="rep"
                 dataProvider="{imagesXML.image}">
            <mx:Image source="{rep.currentItem.@src}"
                    toolTip="{rep.currentIndex}:{rep.currentItem.@alt}"
                    completeEffect="{zoom}" />
        </mx:Repeater>
    </mx:HBox>

</mx:Application>

images.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/03/displaying-images-from-an-xml-file-using-the-repeater-component/ -->
<images>
    <image src="images/Button.png" alt="Button" />
    <image src="images/ButtonBar.png" alt="ButtonBar" />
    <image src="images/CheckBox.png" alt="CheckBox" />
    <image src="images/ColorPicker.png" alt="ColorPicker" />
    <image src="images/ComboBox.png" alt="ComboBox" />
    <image src="images/DataGrid.png" alt="DataGrid" />
    <image src="images/DateChooser.png" alt="DateChooser" />
    <image src="images/DateField.png" alt="DateField" />
</images>

View source is enabled in the following example.