Using [Bindable] in flex 4

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>

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.

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.