Flex conditional data binding

Question

Hello
I have got two labels in my flex mxml component.

first one shows playheadtime of videodisplay and another is also used for same purpose.
the difference is that when we are in add mode(decided from a flag variable)
both should show current playheadtime using binding.

but when we are in edit mode(again decided from flag) the latter label should remain static, to be more specific, the value retrived from database.

how can I do that using actionscript. I tried ChangeWathcer but I found it a bit tricky. Is there any other simpler way or am I missing something.

following is my code.

private function init():void
{
if (queFlag == 'a')
{
// timeLbl.text = currentTimeLbl.text using some binding mechanism
}
else if(queFlag == 'e')
{
// timeLbl.text = 'value retrived from database' ;
}

}

here currentTimeLbl shows videoDisplay playheadtime so it changes dynamically as video plays.

please help me out.

Answer 1

You could do it in something like the following:

<Label id="timeLbl" text="{timeLabelText}"/>

<Label id="currentTimeLbl" change="dispatchEvent('currentTimeLblChanged')"/>

[Bindable(event = "queFlagChanged")] 
[Bindable(event = "currentTimeLblChanged")]
private function get timeLabelText():String   
{
    if(_queFlag == 'a')
    {
        return currentTimeLbl.text;
    }
    else
    {
        return 'value retrived from database';
    }        
}

public function set queFlag(value:String):void
{
    _queFlag = value;

    dispatchEvent(new Event("queFlagChanged"));
}

Answer 2

Here is a very short way of conditional binding in Flex. If you code the conditions into MXML curly-bracket-bindings they will be transformed by the MXML compiler to listeners on all objects participating in this expression.

Here is a working example:

<mx:CheckBox id="flagBox"/>
<mx:ComboBox dataProvider="{['a','e']}" id="flagBox2"/>
<mx:TextInput id="txtBox"/>
<mx:Label text="default: {txtBox.text}"/>
<mx:Label text="conditional (bool): { (flagBox.selected)? txtBox.text: 'default' }"/>
<mx:Label text="conditional (value): { (flagBox2.selectedItem == 'a')? txtBox.text: 'default' }"/>

1. Checking flagBox will result in label #2 displaying "default" otherwise the text from the txtBox is displayed.
2. Selecting "a" in flagBox2 will result in label #3 displaying "default" otherwise the text from the txtBox is displayed.

I regularly use this for reducing my lines of code in my UI-logic and it works quite well for me. A problem of this techniques is that you can't use all logic symbols in curly-braket-bindings, such as < or &&, but i usually could life with that.