Search code examples
apache-flexdata-bindingactionscriptmxmlcairngorm

How do I implement data binding in an ActionScript Class?


I am having a problem with binding values in my ActionScript components. I basically want to set the value of a a variable in my component to a value in the model, and have the component variable automatically update when the model value is updated. I think that I just don't fully understand how data binding works in Flex - this is not a problem when using MXML components, but, when using ActionScript classes, the binding does not work.

This is the code I'm using, where the values are not binding:

package
{
    public class Type1Lists extends TwoLists
    {
        public function Type1Lists()
        {
            super();

            super.availableEntities = super.composite.availableType1Entities;

            super.selectedEntities = super.composite.selectedType1Entities;
        }
    }
}

package
{
    public class Type2Lists extends TwoLists
    {
        public function Type2Lists()
        {
            super();

            super.availableEntities = super.composite.availableType2Entities;

            super.selectedEntities = super.composite.selectedType2Entities;
        }
    }
}

/* TwoLists.mxml */
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            public var __model:ModelLocator = ModelLocator.getInstance();

            public var composite:Composite = 
                __model.selectedComposite;

            [Bindable]
            public var availableEntities:ArrayCollection;

            [Bindable]
            public var selectedEntities:ArrayCollection;
        ]]>
    </mx:Script>

    <mx:List id="availableEntitiesList" dataProvider="{availableEntities}" />

    <mx:List id="selectedEntitiesList" dataProvider="{selectedEntities}" />
</mx:HBox>

Solution

  • To fix this, I simply converted the classes to MXML components, and added a private variable for my ModelLocator.

    /* Type1Lists.mxml */
    <?xml version="1.0" encoding="utf-8"?>
    <TwoLists xmlns:mx="http://www.adobe.com/2006/mxml" 
        xmlns="*" 
        availableEntities="{__model.selectedComposite.availableType1Entities}" 
        selectedEntities="{__model.selectedComposite.selectedType1Entities}">
        <mx:Script>
            <![CDATA[
                import model.ModelLocator;
    
                [Bindable]
                private var __model:ModelLocator = ModelLocator.getInstance();
        </mx:Script>
    </TwoLists>
    
    /* Type2Lists.mxml */
    <?xml version="1.0" encoding="utf-8"?>
    <TwoLists xmlns:mx="http://www.adobe.com/2006/mxml" 
        xmlns="*" 
        availableEntities="{__model.selectedComposite.availableType2Entities}" 
        selectedEntities="{__model.selectedComposite.selectedType2Entities}">
        <mx:Script>
            <![CDATA[
                import model.ModelLocator;
    
                [Bindable]
                private var __model:ModelLocator = ModelLocator.getInstance();
        </mx:Script>
    </TwoLists>