Not Understanding Basics Of Dynamic DataBinding (bindPropety) In Flex

Question

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.

Answer 1

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

Answer 2

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.