views:

39

answers:

2

I need to dynamically bind properties of components created at runtime. In this particular case please assume I need to use bindProperty.

I don't quite understand why the following simplistic test is failing (see code). When I click the button, the label text does not change.

I realize that there are simpler ways to go about this particular example using traditional non-dynamic binding, but I need to understand it in terms of using bindProperty.

Can someone please help me understand what I'm missing?

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="Tools.*" minWidth="684" minHeight="484" xmlns:ns2="*" creationComplete="Init();">
  <mx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.binding.utils.*;
      public var Available:ArrayCollection=new ArrayCollection();

      public function get Value():String {
        return (Available.getItemAt(0).toString());
      }

      public function Init():void {
        Available.addItemAt('Before', 0);
        BindingUtils.bindProperty(Lab, 'text', this, 'Value');
      }

      public function Test():void {
        Available.setItemAt('After', 0);
      }
    ]]>
  </mx:Script>
  <mx:Label x="142" y="51" id="Lab"/>
  <mx:Button x="142" y="157" label="Button" click="Test();"/>
</mx:WindowedApplication>

Thanks in advance.

+1  A: 

I never use the BindingUtils, but my first guess is that you're missing the [Bindable] tag on "Value".

Glenn
+3  A: 

As mentioned by Glenn, you need to add [Bindable] tag on Value.

Also, you haven't defined a setter for the property. Data binding is invoked only when the corresponding setter is called. The flow is something like: you call the setter - Flex updates the data by calling the getter.

  [Bindable]
  public function get value():String {
    return (Available.getItemAt(0).toString());
  }

  public function set value(v:String):void {
    Available.setItemAt(v, 0);
  }

  public function init():void {
    Available.addItemAt('Before', 0);
    BindingUtils.bindProperty(Lab, 'text', this, 'Value');
  }

  public function iest():void {
    value = "After";
  }

Note that I've changed names of functions and properties to lowercase as per the normal convention. InitialCaps are used only for class names.

Amarghosh
Yes, it looks like it is because I was missing a set method. I didn't realize that was required.
Joshua