Using [Bindable] in flex 4 - apache-flex

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>

Answer 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.

Answer 2

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.