Flex 4 - Load image from external XML file to spark DataGrid

Question

I have done my EmployeeDetails application. But now I want to include image on DataGrid. I tried to do it. But I got a warning message like "warning: unable to bind to property 'url' on class 'XML' (class is not an IEventDispatcher)".

My sample code:

  <fx:Script>
    <![CDATA[
        private var urlRequest:URLRequest;

        private var xmlData:XML;
        private var loader:URLLoader = new URLLoader();

        private function loadXML(event:Event):void
        {
            xmlData = new XML(event.target.data);
            var xmlList:XMLList = xmlData.Employee;
            employeeXMLList = new XMLListCollection(xmlList);
        }

        private function load():void
        {
            urlRequest = new URLRequest("http://localhost/demo/TextXmlFile.xml");
            urlRequest.contentType = "XML";
            urlRequest.method = URLRequestMethod.POST;
            loader.addEventListener(Event.COMPLETE, loadXML);
            loader.load(urlRequest);
        } 

    ]]>
</fx:Script>        
<fx:Declarations>   
        <s:XMLListCollection id="employeeXMLList" filterFunction="xmlListCollectionFilterFun"/>
    </fx:Declarations>
    <s:DataGrid id="dataGrid" dataProvider="{employeeXMLList}" width="100%" height="500">
    <s:columns>
    <s:ArrayCollection>
    <s:GridColumn id="image" dataField="url" headerText="Employee">                     
        <s:itemRenderer>
            <fx:Component>
                <s:GridItemRenderer>                                    
                    <s:Image source="{data.url}"/>
                </s:GridItemRenderer>
            </fx:Component>
        </s:itemRenderer>
   </s:GridColumn>
   </s:ArrayCollection>
   </s:columns>
   </s:DataGrid>

And my XML file is like

<Employee>
    <Name>John</Name>
    <Id>234</Id>
    <DOB>1990/04/02</DOB>
    <gender>Male</gender>
    <Designation>Project manager</Designation>
    <Department>Mobile</Department>
    <DOJ>2008/04/11</DOJ>
    <Experience>15</Experience>
    <Mobile>9999999999</Mobile>
    <Email>john.a@Sybrant.com</Email>
   <url>http://localhost/demo/images/ale.jpg</url>
</Employee>   

<Employee>
    <Name>Ram</Name>
    <Id>432</Id>
    <DOB>1985/07/23</DOB>
    <gender>Male</gender>
    <Designation>Program manager</Designation>
    <Department>Testing</Department>
    <DOJ>2008/04/15</DOJ>
    <Experience>13</Experience>
    <Mobile>8967563423</Mobile>
    <Email>ram.a@Sybrant.com</Email>
    <url>http://localhost/demo/images/gthompson.jpg</url>
</Employee> 

Answer 1

To get rid of warning use ObjectProxy Class which implements IEventDispatcher. That warning clearly shows object not aware of property changes. Means UI can't update automatically when data changes happened. More details ObjectProxy

Basically our itemRenderer data object should be implements IEventDispatcher. Becasue flex databind techniques works via events called PropertyChangeEvent. If given data is not implement IEventDispatcher then it will shows Warning: unable to bind to property 'url' on class 'XML' (class is not an IEventDispatcher).

Best practices for programming always use Strongly Type object the key here is VO pattern Convert XML to VO

<fx:Script>
    <![CDATA[
        import mx.collections.IList;
        import mx.utils.ObjectProxy;

        private var urlRequest:URLRequest;

        private var xmlData:XML;

        private var loader:URLLoader = new URLLoader();

        [Bindable]
        public var employeeList:ArrayCollection;

        private function loadXML(event:Event):void
        {
            xmlData = new XML(event.target.data);

            var xmlList:XMLList = xmlData.Employee;

            var employeeObj:ObjectProxy;

            employeeList = new ArrayCollection();

            for each (var emp:XML in xmlList) 
            {
                employeeObj = new ObjectProxy();
                employeeObj.Name = emp.Name;
                employeeObj.Id = emp.Id;
                employeeObj.DOB = emp.DOB;
                employeeObj.gender = emp.gender;
                employeeObj.Designation = emp.Designation;
                employeeObj.Department = emp.Department;
                employeeObj.Experience = emp.Experience;
                employeeObj.Mobile = emp.Mobile;
                employeeObj.Email = emp.Email;
                employeeObj.url = emp.url;          

                employeeList.addItem(employeeObj);
            }               
        }

        private function load():void
        {
            urlRequest = new URLRequest("http://localhost/demo/TextXmlFile.xml");
            urlRequest.contentType = "XML";
            urlRequest.method = URLRequestMethod.POST;
            loader.addEventListener(Event.COMPLETE, loadXML);
            loader.load(urlRequest);
        } 

    ]]>
</fx:Script>
<fx:Declarations>   

</fx:Declarations>

<s:DataGrid id="dataGrid" dataProvider="{employeeList}" width="100%" height="500">
    <s:columns>
        <s:ArrayCollection>
            <s:GridColumn id="image" dataField="url" headerText="Employee">                     
                <s:itemRenderer>
                    <fx:Component>
                        <s:GridItemRenderer>                                    
                            <s:Image source="{data.url}"/>
                            <s:Label text="{data.Name}"/>
                        </s:GridItemRenderer>
                    </fx:Component>
                </s:itemRenderer>
            </s:GridColumn>
        </s:ArrayCollection>
    </s:columns>
</s:DataGrid>

Another ways :

To get rid of warnings use XML(data).url.toString() instead of data.url.

Updated

Problem here XML(data).url returns XMLList instead of String so use like XML(data).url.toString().

<s:DataGrid id="dataGrid" dataProvider="{employeeXMLList}" width="100%" height="500">
<s:columns>
    <s:ArrayCollection>
        <s:GridColumn id="image" dataField="url" headerText="Employee">                     
            <s:itemRenderer>
                <fx:Component>
                    <s:GridItemRenderer>                                    
                        <s:Image id="img" source="{XML(data).url.toString()}" toolTip="Hey tooltip here" /> //Note here
                        <s:Label text="{XML(data).Name}"/>
                    </s:GridItemRenderer>
                </fx:Component>
            </s:itemRenderer>
        </s:GridColumn>
    </s:ArrayCollection>
</s:columns>
</s:DataGrid>