Using [Bindable] in flex 4

Question

I just don't get it with [Bindable] and updating a label

So here are my three pages, please tell me what I am doing wrong because when the listner sends the updated var to button2.mxml the var updates but the label does not redraw it.

application.mxml

<s:WindowedApplication 
xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:comps="components.*"  
creationComplete="init();">

<fx:Script>
    <![CDATA[
        import mx.controls.Alert;

        public function init(){
        btn1.addEventListener(MouseEvent.MOUSE_OVER, myFunction);
        }
        public function myFunction(e:MouseEvent){
            var myPage:button2 = new button2();
            var ranNum = Math.floor(Math.random() * 40) + 10;
            myPage.myValue("ABC "+ranNum);
        }
    ]]>
</fx:Script>
<comps:button1 y="0" id="btn1" width="100"/>

<comps:button2 y="100" id="btn2" width="100"/>

button1.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" width="128" height="72">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:Button x="27" y="19" label="Button1" id="btn1" enabled="true"/>
</s:Group>

button2.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            [Bindable]
            public var myVal:String = "Button2";

            public function myValue(mV:String)
            {
                myVal = mV;
            }
        ]]>
    </fx:Script>
    <s:Button x="10" y="32" label="{myVal}" id="btn2" enabled="true"/>
</s:Group>

score 1 · Answer 1 · 2011-03-14T14:37:40.547

1

Your function should be:

public function myFunction(e:MouseEvent){
    var ranNum = Math.floor(Math.random() * 40) + 10;
    btn2.myValue("ABC " + String(ranNum));
}

In the function that you have, you are creating a new button (without adding it as a child to anything) and setting the label on that button rather than the one you have already defined in your application.

You also do not necessarily need a [Bindable] variable for the label in button2.mxml but this depends on what you are accomplishing. You could just do btn2.label = mV; in the myValue() function definition alternatively.

edited Mar 14 '11 at 14:37

answered Mar 14 '11 at 14:30

Thankyou @Matt & @Wade, Matt, your solution worked I never thought to remove the "= new" line as I thought that was needed to reference the receiving page. Now, how do I access the flex4 function to get the last 4 days of my life back? Thx again. – user654684 Mar 14 '11 at 22:29
I was answering your question as presented, but Wade's answer is also very helpful and probably better. Like I said, it depends on what you're doing so cases can be made for accessing a public bindable variable directly, using a setter function, or using your own custom function. – Mar 15 '11 at 01:59

score 1 · Answer 2 · answered Mar 14 '11 at 19:30

The simplest way to do this is to remove your setter for myVal in button2.mxml and just set the value in myFunction like you would any other public variable:

myPage.myVal = "ABC " + ranNum;

The reason your code is not currently working is that you have implicitly overridden the myVal setter and are not dispatching a data change event, which is what makes binding work. When you add the [Bindable] metadata tag to a variable, the compiler automatically generates a setter for that variable with the proper event dispatching for you.

Hope that helps.

Using [Bindable] in flex 4

2 Answers2