Flex 4-從外部XML文件加載圖像以觸發DataGrid

Question

我已經完成了EmployeeDetails應用程序。 但是現在我想在DataGrid上包含圖像。 我試圖做到這一點。 但是我收到了一條警告消息，例如“警告：無法綁定到類'XML'上的屬性'url'（類不是IEventDispatcher）”。

我的示例代碼：

  <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>

我的XML文件就像

<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

要擺脫警告，請使用實現IEventDispatcher的ObjectProxy類。 該警告清楚地表明對象不知道屬性更改。 意味着發生數據更改時，UI無法自動更新。 更多詳細信息ObjectProxy

基本上，我們的itemRenderer數據對象應該實現IEventDispatcher 。 因為flex數據綁定技術通過稱為PropertyChangeEvent的事件起作用。 如果給定的數據不是IEventDispatcher的實現，則它將顯示警告：無法綁定到類“ XML”上的屬性“ url”（類不是IEventDispatcher）。

編程的最佳實踐始終使用Strongly Type object ，這里的關鍵是VO模式將XML轉換為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>

另一種方式：

要擺脫警告，請使用XML(data).url.toString()而不是data.url 。

更新

這里的問題XML(data).url返回XMLList而不是String，因此像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>