Three way binding in MXML custom component (using only mxml)

Question

I'm trying to do this using only mxml, no <script> tags, although I don't necessarily need a solution that's only mxml. It was more of an educational exercise to see if I could do it all in mxml.

I have a custom component that has a slider and textinput and their value/text properties are bound together. I'm surfacing a few properties of the slider in my component so that it can sort of be treated like a slider.

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="middle" horizontalGap="0">
   <mx:int id="value">{slider.value}</mx:int>
   <mx:int id="minimum">0</mx:int>
   <mx:int id="maximum">100</mx:int>
   <mx:int id="tickInterval">25</mx:int>
   <mx:Array id="labels">['0%','50%','100%']</mx:Array>

   <mx:HSlider id="slider" liveDragging="true" snapInterval="1" 
         value="{int(input.text)}" 
         minimum="{minimum}" 
         maximum="{maximum}" 
         tickInterval="{tickInterval}" 
         labels="{labels}"/>
   <mx:Spacer width="25"/>
   <mx:TextInput id="input" restrict="0-9" text="{slider.value}" maxChars="3" width="30"/>
   <mx:Label text="%"/>
</mx:HBox>

Notice the slider's VALUE property is bound to the input field's TEXT property, and vice versa. A two-way binding. This lets the user slide the thumb or type in the input field to select a value and they stay in sync with each other.

Also, the component's VALUE property is bound to the slider's VALUE property so that the value of this component will always contain the value of the slider (so that the component can be used like a slider).

The slider's properties are also bound to the component's properties (min, max, tick marks)

The problem is that I want to initialize the value of the slider from the value of the component, but the slider's value is already bound to the textinput. Can I also bind it to the component?

My application will have something like this:

<local:mycomponent minimum="20" maximum="80" labels="['20','50','80']" value="40"/>

A few things I tried that didn't work:

(1) I had an initialize handler.

<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" initialize="slider.value=value">

This worked if my app had

myslider.value = 40;

but didn't work if I had

<local:mycomponent value="40"/>

(2) I tried a creationComplete handler

(3) I tried mx:binding

<mx:Binding source="slider.value" destination="this.value"/>

It seems like I'm missing something simple.

alxx alxx · Accepted Answer · 2011-06-25T07:59:16

Note the curly brackets:

<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" initialize="{slider.value=value}">

In the brackets, there may be any code. Without them, there can only be event handler (function).

Three way binding in MXML custom component (using only mxml)

1 Answers