3 Replies Latest reply on Sep 22, 2008 12:48 PM by Newsgroup_User

    warning: unable to bind to property...

    thespark Level 1
      So I have small image gallery that has tilelist and I have custom itemrenderer in that. Now the image come from externall xml file that goes to XMLListCollection. I have added the bindable tag, but i still get the warning unable to binde...
      So how do I solve that? I have spend well over 2 days with this already.

      Item renderer:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle" width="100%" height="100%">
      <mx:Image scaleContent="true" source="{data.@data}" width="100%" height="100%"/>
      <mx:Label text="{data.@label}"/>
      </mx:VBox>

      Main app:

      ?xml version="1.0" encoding="utf-8"?>
      <mx:Module xmlns:mx=" http://www.adobe.com/2006/mxml" initialize="this.loadXML()" creationComplete="this.onCreationComplete()" layout="absolute" xmlns:ns1="Components.SmoothImage.*" xmlns:ns2="module.imagegallery.*" width="100%" height="100%">
      <mx:Script source="as//imageGallery.as"/>
      <mx:XML id="xmllc" source="assets/Imagegallery.xml"/>
      <mx:ProgressBar verticalCenter="0" horizontalCenter="0" id="pb" mode="manual"/>
      <mx:XMLListCollection id="xmlListColl"/>
      <ns1:SmoothImage horizontalAlign="center" verticalAlign="middle" id="imageLoader" scaleContent="true" right="0" height="73%" left="0" top="0"/>
      <mx:Button id="buttonNext" label="&gt;&gt;" fontFamily="Arial" width="45" height="128" right="10" bottom="10"/>
      <mx:Button id="buttonPrvious" label="&lt;&lt;" fontFamily="Arial" width="45" left="10" bottom="10" height="128"/>
      <mx:TileList liveScrolling="true" id="tileList" selectedIndex="0" creationComplete="initList(), trace(xmlListColl)" horizontalScrollPolicy="on" dataProvider="{xmlListColl}" rowHeight="128" height="128" direction="vertical" rowCount="1" bottom="10" right="63" left="63" columnWidth="128" allowMultipleSelection="false">
      <mx:itemRenderer>
      <mx:Component>
      <ns2:CustomItemRenderer>
      </ns2:CustomItemRenderer>
      </mx:Component>
      </mx:itemRenderer>
      </mx:TileList>
      </mx:Module>

      and my as code:


      import flash.display.Loader;
      import flash.events.Event;
      import flash.events.MouseEvent;
      import flash.events.ProgressEvent;
      import flash.net.URLLoader;
      import flash.net.URLRequest;

      import mx.collections.XMLListCollection;
      import mx.events.ListEvent;

      private var currentImage:Number = 0;
      [Bindable]
      public var myXML:XML;
      private var xPos:Number;
      private var yPos:Number;
      private var contentHeight:Number;
      private var contentWidth:Number;
      private var loader:Loader;

      private function loadXML():void
      {

      var loader:URLLoader = new URLLoader();
      loader.addEventListener(Event.COMPLETE, xmlLoaded);

      loader.load(new URLRequest('assets/Imagegallery' + parentApplication.langID + '.xml'));
      }

      private function xmlLoaded(event:Event):void
      {
      this.myXML = new XML(event.target.data);
      var xmllist:XMLList = XML(event.target.data).slide;
      xmlListColl = new XMLListCollection(xmllist);
      }


      private function PhotoLoadComplete(evt:Event):void
      {
      this.pb.visible = false;
      }

      private function changePicture(pict:String):void
      {
      this.buttonNext.removeEventListener(MouseEvent.CLICK, next);
      this.buttonPrvious.removeEventListener(MouseEvent.CLICK, previous);
      this.tileList.removeEventListener(ListEvent.CHANGE, onChange);
      this.pb.visible = true;
      loader = new Loader();
      this.tileList.horizontalScrollPosition = tileList.selectedIndex;
      loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
      var request:URLRequest = new URLRequest(pict);
      loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, handleProgress);

      loader.load(request);
      }

      private function handleProgress( e:ProgressEvent ):void
      {
      pb.setProgress(e.bytesLoaded, e.bytesTotal);
      }

      private function completeHandler(event:Event):void
      {

      event.target.removeEventListener(Event.COMPLETE, completeHandler);
      event.target.removeEventListener(ProgressEvent.PROGRESS, handleProgress);
      pb.setProgress(0,100);
      this.pb.visible = false;
      this.tileList.addEventListener(ListEvent.CHANGE, onChange);
      this.buttonNext.addEventListener(MouseEvent.CLICK, next);
      this.buttonPrvious.addEventListener(MouseEvent.CLICK, previous);
      this.imageLoader.data = loader.contentLoaderInfo.content;
      }

      private function initList():void
      {
      //this.tileList.addEventListener(ListEvent.CHANGE, onChange);
      this.buttonNext.addEventListener(MouseEvent.CLICK, next);
      this.buttonPrvious.addEventListener(MouseEvent.CLICK, previous);
      trace(this.tileList.selectedIndex);
      this.tileList.selectedIndex = 0;
      }
      private function ondata():void
      {
      trace(xmlListColl[tileList.selectedIndex].@data);
      }


      private function onChange(event:ListEvent):void
      {


      try{
      var i:Number = tileList.selectedIndex;
      var u:String = xmlListColl .@data;
      trace(i + " index " + u + " url");
      this.changePicture(u);
      }
      catch (err:Error)
      {
      trace(err);
      }
      }
      private function thumbnailClick(event:ListEvent):void
      {
      this.tileList.selectedIndex = event.columnIndex;
      }

      private function next(event:MouseEvent):void
      {
      this.tileList.selectedIndex +=1;
      }

      private function previous(event:MouseEvent):void
      {
      this.tileList.selectedIndex -=1;
      }


      Help would be much apreciated. Thank's for advance.

        • 1. Re: warning: unable to bind to property...
          Level 7

          "thespark" <webforumsuser@macromedia.com> wrote in message
          news:gb8n7d$lhq$1@forums.macromedia.com...
          > So I have small image gallery that has tilelist and I have custom
          > itemrenderer
          > in that. Now the image come from externall xml file that goes to
          > XMLListCollection. I have added the bindable tag, but i still get the
          > warning
          > unable to binde...
          > So how do I solve that? I have spend well over 2 days with this already.
          >
          > Item renderer:
          >
          > <?xml version="1.0" encoding="utf-8"?>
          > <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml"
          > horizontalAlign="center"
          > verticalAlign="middle" width="100%" height="100%">
          > <mx:Image scaleContent="true" source="{data.@data}" width="100%"
          > height="100%"/>
          > <mx:Label text="{data.@label}"/>
          > </mx:VBox>
          >
          > Main app:
          >
          > ?xml version="1.0" encoding="utf-8"?>
          > <mx:Module xmlns:mx=" http://www.adobe.com/2006/mxml"
          > initialize="this.loadXML()" creationComplete="this.onCreationComplete()"
          > layout="absolute" xmlns:ns1="Components.SmoothImage.*"
          > xmlns:ns2="module.imagegallery.*" width="100%" height="100%">
          > <mx:Script source="as//imageGallery.as"/>
          > <mx:XML id="xmllc" source="assets/Imagegallery.xml"/>
          > <mx:ProgressBar verticalCenter="0" horizontalCenter="0" id="pb"
          > mode="manual"/>
          > <mx:XMLListCollection id="xmlListColl"/>
          > <ns1:SmoothImage horizontalAlign="center" verticalAlign="middle"
          > id="imageLoader" scaleContent="true" right="0" height="73%" left="0"
          > top="0"/>
          > <mx:Button id="buttonNext" label=">>" fontFamily="Arial" width="45"
          > height="128" right="10" bottom="10"/>
          > <mx:Button id="buttonPrvious" label="<<" fontFamily="Arial" width="45"
          > left="10" bottom="10" height="128"/>
          > <mx:TileList liveScrolling="true" id="tileList" selectedIndex="0"
          > creationComplete="initList(), trace(xmlListColl)"
          > horizontalScrollPolicy="on"
          > dataProvider="{xmlListColl}" rowHeight="128" height="128"
          > direction="vertical"
          > rowCount="1" bottom="10" right="63" left="63" columnWidth="128"
          > allowMultipleSelection="false">
          > <mx:itemRenderer>
          > <mx:Component>
          > <ns2:CustomItemRenderer>
          > </ns2:CustomItemRenderer>
          > </mx:Component>
          > </mx:itemRenderer>
          > </mx:TileList>
          > </mx:Module>
          >
          > and my as code:
          >
          >
          > import flash.display.Loader;
          > import flash.events.Event;
          > import flash.events.MouseEvent;
          > import flash.events.ProgressEvent;
          > import flash.net.URLLoader;
          > import flash.net.URLRequest;
          >
          > import mx.collections.XMLListCollection;
          > import mx.events.ListEvent;
          >
          > private var currentImage:Number = 0;
          > [Bindable]
          > public var myXML:XML;
          > private var xPos:Number;
          > private var yPos:Number;
          > private var contentHeight:Number;
          > private var contentWidth:Number;
          > private var loader:Loader;
          >
          > private function loadXML():void
          > {
          >
          > var loader:URLLoader = new URLLoader();
          > loader.addEventListener(Event.COMPLETE, xmlLoaded);
          >
          > loader.load(new URLRequest('assets/Imagegallery' +
          > parentApplication.langID
          > + '.xml'));
          > }
          >
          > private function xmlLoaded(event:Event):void
          > {
          > this.myXML = new XML(event.target.data);
          > var xmllist:XMLList = XML(event.target.data).slide;
          > xmlListColl = new XMLListCollection(xmllist);
          > }
          >
          >
          > private function PhotoLoadComplete(evt:Event):void
          > {
          > this.pb.visible = false;
          > }
          >
          > private function changePicture(pict:String):void
          > {
          > this.buttonNext.removeEventListener(MouseEvent.CLICK, next);
          > this.buttonPrvious.removeEventListener(MouseEvent.CLICK, previous);
          > this.tileList.removeEventListener(ListEvent.CHANGE, onChange);
          > this.pb.visible = true;
          > loader = new Loader();
          > this.tileList.horizontalScrollPosition = tileList.selectedIndex;
          > loader.contentLoaderInfo.addEventListener(Event.COMPLETE,
          > completeHandler);
          > var request:URLRequest = new URLRequest(pict);
          > loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,
          > handleProgress);
          >
          > loader.load(request);
          > }
          >
          > private function handleProgress( e:ProgressEvent ):void
          > {
          > pb.setProgress(e.bytesLoaded, e.bytesTotal);
          > }
          >
          > private function completeHandler(event:Event):void
          > {
          >
          > event.target.removeEventListener(Event.COMPLETE, completeHandler);
          > event.target.removeEventListener(ProgressEvent.PROGRESS, handleProgress);
          > pb.setProgress(0,100);
          > this.pb.visible = false;
          > this.tileList.addEventListener(ListEvent.CHANGE, onChange);
          > this.buttonNext.addEventListener(MouseEvent.CLICK, next);
          > this.buttonPrvious.addEventListener(MouseEvent.CLICK, previous);
          > this.imageLoader.data = loader.contentLoaderInfo.content;
          > }
          >
          > private function initList():void
          > {
          > //this.tileList.addEventListener(ListEvent.CHANGE, onChange);
          > this.buttonNext.addEventListener(MouseEvent.CLICK, next);
          > this.buttonPrvious.addEventListener(MouseEvent.CLICK, previous);
          > trace(this.tileList.selectedIndex);
          > this.tileList.selectedIndex = 0;
          > }
          > private function ondata():void
          > {
          > trace(xmlListColl[tileList.selectedIndex].@data);
          > }
          >
          >
          > private function onChange(event:ListEvent):void
          > {
          >
          >
          > try{
          > var i:Number = tileList.selectedIndex;
          > var u:String = xmlListColl .@data;
          > trace(i + " index " + u + " url");
          > this.changePicture(u);
          > }
          > catch (err:Error)
          > {
          > trace(err);
          > }
          > }
          > private function thumbnailClick(event:ListEvent):void
          > {
          > this.tileList.selectedIndex = event.columnIndex;
          > }
          >
          > private function next(event:MouseEvent):void
          > {
          > this.tileList.selectedIndex +=1;
          > }
          >
          > private function previous(event:MouseEvent):void
          > {
          > this.tileList.selectedIndex -=1;
          > }

          Which part of the code is giving the warning?


          • 2. warning: unable to bind to property...
            thespark Level 1
            the data.@data and data.@label. the full warnigs are for every item:

            warning: unable to bind to property 'label' on class 'XML' (class is not an IEventDispatcher)
            warning: unable to bind to property 'data' on class 'XML' (class is not an IEventDispatcher)
            • 3. Re: warning: unable to bind to property...
              Level 7

              "thespark" <webforumsuser@macromedia.com> wrote in message
              news:gb8q6m$p55$1@forums.macromedia.com...
              > the data.@data and data.@label fu?? warnigs are for every item:
              >
              > warning: unable to bind to property 'label' on class 'XML' (class is not
              > an
              > IEventDispatcher)
              > warning: unable to bind to property 'data' on class 'XML' (class is not an
              > IEventDispatcher)


              Try:

              <?xml version="1.0" encoding="utf-8"?>
              <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" horizontalAlign="center"
              verticalAlign="middle" width="100%" height="100%">

              <mx:Script>
              <![CDATA[
              private var _data:Object;
              private var _dataChanged:Boolean;
              //note that when this function runs, sometimes the child
              //components don't exist yet, so you have to change the properties
              //after they are created but before they are measured or the
              //display list gets updated
              override protected function set data(value:Object):void{
              super.data=value;
              _data=value;
              //make sure commitProperties runs and sets the properties
              //on the child components
              _dataChanged=true;
              invalidateProperties();
              }
              //this function runs between createChildren and updateDisplayList
              override protected function commitProperties():void{
              super.commitProperties();
              if (_dataChanged){
              theImage.source=_data.attribute('data');
              theLabel.text=_data.attribute('label');
              }
              }
              ]]>
              </mx:Script>
              <mx:Image id="theImage" scaleContent="true" width="100%"
              height="100%"/>
              <mx:Label id="theLabel" />
              </mx:VBox>

              This takes out the binding and just sets the correct properties in the
              component whenever its data property changes. This should perform a bit
              better for you as well.

              HTH;

              Amy