Relax Breath of Solution.

<?xml version="1.0" encoding="utf-8"?>
<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://www.beasrilankan.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>

Incoming search terms:

• datagrid displaying xml in flex (1)
• flex xml qname qn (1)
• flex qname datagrid (1)
• flex qname change (1)
• flex progressbar datagrid (1)
• flex 4 import xml datagrid (1)
• displaying-dynamically-loaded-xml-in-a-datagrid-control-in-flex (1)
• Displaying dynamically loaded XML in a DataGrid control in Flex (1)
• datagridcolumn datafield dynamic flex (1)
• namespace xml datagrid control flex 4 (1)

All of the informations about the images showcased in the gallery are stored in an XML file. Create an xml file that follows this structure and save it as datas.xml in the src directory :

Up until now working with XML data in Flash hasn’t been very intuitive. That was mainly due to the semantics of the ActionScript Language. But, with the birth of AS3 we have new hope in E4X. For those that don’t know E4X stands for ECMAScript for XML and this specification introduces some new functionality that makes working with XML a lot simpler. New to AS3 are the XML, XMLList,QSpace and Namespace E4X classes. E4X not only makes life simpler but provides greater code consistency and familiarity (we can use dot syntax more similiar to ActionScript).

Flex Photo gallery in Flex using the TileList control, Image control, and the PopUpManager class.

Structure