Data binding across multiple objects in Flex 3

Question

I am new to Flex (got assigned to maintain an old project at work) and am having some trouble getting data binding to work correctly. I have a popup form class, AddOffer.mxml which uses a model AddOfferModel.as. On my popup form, I have the following component:

    <mx:FormItem label="{getResource('addOffer.form.OFFER_DATE')}:"
        labelWidth="90">
        <views:OfferWindowDatesFragment 
            id="offerWindowField" 
            start="{model.offerStartDate}"
            stop="{model.offerStopDate}" />
    </mx:FormItem>

My AddForm.mxml file also has some embedded actionscript where I define my 'model' variable:

    [Bindable]
    public var model:AddOfferModel;

The model variables I am trying to bind to are standard getters/setters and look like this inside AddOfferModel.as:

    [Bindable]
    public function set offerStartDate(val:EditableInstant):void
    {
        _offerStartDate = val;
    }
    public function get offerStartDate():EditableInstant
    {
        return _offerStartDate;
    }
    private var _offerStartDate:EditableInstant;


    [Bindable]
    public function set offerStopDate(val:EditableInstant):void
    {
        _offerStopDate = val;
    }
    public function get offerStopDate():EditableInstant
    {
        return _offerStopDate;
    }
    private var _offerStopDate:EditableInstant; 

Inside the OfferWindowDatesFragment component class, the start and stop variables look like this:

    [Bindable]
    public function set start(val:EditableInstant):void
    {
        _start = val;
    }
    public function get start():EditableInstant
    {
        return _start;
    }
    private var _start:EditableInstant;


    [Bindable]
    public function set stop(val:EditableInstant):void
    {
        _stop = val;
    }
    public function get stop():EditableInstant
    {
        return _stop;
    }
    private var _stop:EditableInstant;

Basically, I just want to bind the start and stop variables in my OfferWindowDatesFragment class to the offerStartDate and offerStopDate variables in the AddOfferModel.as file. Whenever I access the start/stop variables in functions inside the OfferWindowDatesFragment class, they are null.

I have an event listener function that gets triggered in OfferWindowDatesFragment anytime a user selects a new date, it looks like this:

    private function changeOfferDate():void
    {
        start.currentValue = offerDateEditor.start;
    stop.currentValue  = offerDateEditor.stop;
    }

Every time I reach this function, it throws up an error because 'start' and 'stop' are both null ... but should have been initialized and bound already. If I look at the variables in the debugger, I can confirm that values on the right side of the assignment expression are valid, and not what is causing the error.

I am not real familiar with how initialization works in Flex, and I assumed as long as I instantiated the component as seen in the first code snippet at the top of my post, it would initialize all the class variables, and setup the bindings. Am I missing something? Perhaps I am not properly initializing the model or class data for AddForm.mxml or AddFormModel.as, thereby binding null references to the start/stop fields in my OfferWindowDatesFragment class?

Any help would be greatly appreciated. Thanks!

EDIT:

I looked into this further and tried using Mate to inject the 'model' variable inside AddOffer.mxml with a valid AddOfferModel object:

    <Injectors target="{AddOffer}" debug="{debug}">
        <ObjectBuilder generator="{AddOfferModel}" constructorArguments="{scope.dispatcher}" cache="local"/>
        <PropertyInjector targetKey="model" source="{lastReturn}" />
    </Injectors>

I load the AddOffer.mxml dialog as the result of a button click event on another form. The function that pops it up looks like this:

    public function addOffer():void
    {
        var addOfferDialog:AddOffer = new AddOffer();

        addOfferDialog.addEventListener("addOffer", addOfferFromDialog);

        modalUtil.popup(addOfferDialog);
    } 

It doesn't seem to be assigning anything to the 'model' variable in AddOffer.mxml. Does loading a view/dialog this way not trigger an injection from Mate by chance? (I realize this last part might belong in the Mate forums, but I'm hoping somebody here might have some insight on all of this).

Answer 1

In AddOffer.mxml, you have this code:

[Bindable]     
public var model:AddOfferModel;

Is there something outside AddOffer.mxml that is setting this to a valid AddOfferModel? There should be. The nature of how the Flex component life cycle means that you can expect that things may be null at times as a View builds. So you should build your components to be able to "right themselves" after receiving bad data, if the data eventually comes good.

Data binding is one way to do this, but it may not paper over everything depending on what else is going on.

Have you verified that the model value you're getting is not null at the point where the user selects the date and that its offerStartDate and offerEndDate properties have been populated with valid EditableInstants? If both of those are correct, I'd start looking for pieces of the Views that expect to have stuff at a given instant and then don't recover if it is provided later.