Flex 3: Code-behind problem

I have some VBox with button. I want my button changes the label after clicking on it. I'm trying to use the code-behind practice but the instance of the button is always null. There is code:

package TestPackage 
{
    import mx.containers.VBox;
    import mx.controls.Button;
    public class Contr开发者_开发问答olsBox extends VBox 
    {
        [Bindable]
        public var btnPlay : Button;
        public function ControlsBox() 
        {
            super();
        }
        override protected function childrenCreated():void
        {
            super.childrenCreated();
        }
        public function ChangeImage():void
            {
                btnPlay.label = "a";
            }
    }
}

Here is mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:controls="TestPackage.*">
<controls:ControlsBox id="ctrlVBox">
        <mx:Button id="btnPlay" click="this.ctrlVBox.ChangeImage();" label="c"></mx:Button>
</controls:ControlsBox>
</mx:Application>

What am I doing wrong? And how to do that properly? Thanks

I don't do this very often in flex, but I think you want something like this:

<controls:ControlsBox id="ctrlVBox">
   <controls:btnPlay>
      <mx:Button click="this.ctrlVBox.ChangeImage();" label="c"></mx:Button>
   </controls:btnPlay>
</controls:ControlsBox>