Fabio Biondi Blog » Blog Archive » Warning messages binding the ‘data’ property inside an itemRenderer (FX3)

Home » ActionScript 3.0, Adobe, Flex 3, _Featured

Warning messages binding the ‘data’ property inside an itemRenderer (FX3)

9 August 2009 One Comment

Problem: when you bind the data property inside an itemRenderer you got the following message:

warning: unable to bind to property ‘label’ on class ‘String’ (class is not an IEventDispatcher)

Solution: populate the data Provider using a Value Objects

This is a typical scenario where you’ll get this warning message:

Main.mxml

   <![CDATA[
 
      import mx.collections.*;
 
      [Bindable]
      private var TileListdp:ArrayCollection;
 
      private var sampleItems:Array = new Array("Fabio", "Giorgio", "Barbara", "Ivan");
 
      // Populate ArrayCollection
      private function populateAC():void {
 
      	 TileListdp = new ArrayCollection(sampleItems);
 
      }
 
  	  // Add Item to Array Collection
      private function addItem():void {
 
        TileListdp.addItem("New Item")
      }
 
   ]]>
   </mx:Script>
 
   <mx:TileList dataProvider="{TileListdp}"
      itemRenderer="itemRenderer.Row" columnWidth="80" />
 
   <mx:Button label="Add item" click="addItem()" />
 
</mx:Application>

itemRenderer/Row.mxml

 
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml" text="{data.label}">
 
</mx:Label>

The output will be the following:

and in your consolle panel you’ll get this warning:

HOW TO FIX IT
To fix this issue you will need to create a new ValueObject that contains a setter and a getter for each properties you’ll bind on the itemRenderer.
In our example we use the label property, so our Value Object class we’ll be the following:

model/ListVO.as

package model
{
	import flash.events.EventDispatcher;
 
	[Bindable]
	public class ListVO
	{
		private var _label:String;
 
		public function ListVO() {}
 
		public function set label(value:String):void {
			_label = value;
		}
 
		public function get label():String{
			return _label ;
		}
	}
}

So we need to modify our main.mxml :

 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   initialize="populateAC();" >
 
   <mx:Script>
   <![CDATA[
 
   	  import model.ListVO;
      import mx.collections.*;
 
      [Bindable]
      private var TileListdp:ArrayCollection;
      private var tempArray:Array = new Array();
      private var sampleItems:Array = new Array("Fabio", "Giorgio", "Barbara", "Ivan");
 
      // Populate ArrayCollection
      private function populateAC():void {
 
      	 // Loop over the sampleItems array, creating a new array of Value Objects
      	 for (var i:uint = 0; i < sampleItems.length; i++) {
 
      	 	 // create a new Value Object for each item
      	     var newItem:ListVO = new ListVO();
	       	 newItem.label = sampleItems[i]
 
	       	 // Push the VO on temparray
	      	 tempArray.push(newItem)
 
      	 }
 
      	 // Populate TileList with the new array
      	 TileListdp = new ArrayCollection(tempArray);
 
      }
 
  	  // Add Item to Array Collection
      private function addItem():void {
 
      	// Add a new Value Object to the TileList dataProvider
      	var newItem:ListVO = new ListVO;
      	newItem.label = "New Item"
        TileListdp.addItem(newItem)
      }
 
   ]]>