Flex Conditional Data Binding
I have two labels in my flex mxml component.
the first one shows the playing time of the video display, and the other is also used for the same purpose.
the difference is that when we are in add mode (determined by the flag variable)
both should show the current play time using anchor.
but when we are in edit mode (again with a flag), the last shortcut should remain static, more precisely, the value retrieved from the database.
how can i do it using actionscript. I tried ChangeWathcer but found it a little complicated to me. Is there another easier way or am I missing something.
Below is my code.
private init () function: void
{
if (queFlag == 'a')
{
//timeLbl.text = currentTimeLbl.text using some binding mechanism
}
else if (queFlag == 'e')
{
//timeLbl.text = 'value retrieved from the database';
}
}
here currentTimeLbl shows the playback video stream so that it dynamically changes as the video plays.
please help me.
You can do it something like this:
<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"));
}
source to share
Here's a very short way to conditionally bind in Flex. If you code the conditions in the MXML curly brace binding, they will be converted by the MXML compiler into listeners on all objects participating in this expression.
Here's 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' }"/>
- Checking
flagBox
will cause label # 2 to be displayed by default, otherwise the text fromtxtBox
will be displayed. - Selecting "a" in
flagBox2
will cause label # 3 to be displayed "by default", otherwise text fromtxtBox
will be displayed.
I regularly use this to shorten my lines of code in my UI logic and it works well for me. The problem with these methods is that you can't use all the boolean characters in curly braces like <
or &&
, but I could usually handle that.
source to share