Extending Flex 4 Spark Panel With ActionScript

原文见 

http://dougr.net/2008/06/13/extending-flex-panel-with-actionscript/

 

package custom
{
    import flash.events.Event;
 
    import mx.controls.Alert;
 
    import spark.components.Button;
    import spark.components.Panel;
 
    public class NewFormPanel extends Panel
    {
        //declare button var
        private var newFormButton:Button;
 
        private function doCreateForm(event:Event):void{
            //create an event - just an Alert for testing here
            mx.controls.Alert.show("Button Clicked");
        }
        //override the createChildren method with the properties I need
        protected override function createChildren():void{
            super.createChildren();
            //instantiate new button and assign properties
            newFormButton = new Button();
            newFormButton.label = "New";
            //add event listener for click event and call method
            newFormButton.addEventListener("click", doCreateForm);
            newFormButton.visible = true;
            //add the button to rawChildren
            this.addElement(newFormButton);
        }
        //update the display and get panel size - dynamic since the form can be resized
        protected override function updateDisplayList(unscaledWidth:Number,
                        unscaledHeight:Number):void{
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            //gap between label and edges of button
            var margin:int = 4;
            //set the button size + margin
            newFormButton.setActualSize(50 + margin, 16 + margin);
            //define vars which determine distance from right and top of Panel
            var pixelsRight:int = 25;
            var pixelsTop:int = -25;
            //define var to width of button
            var buttonWidth:int = newFormButton.width;
            //set x and y properties to be used for positioning of button
            var x:Number = unscaledWidth - buttonWidth - pixelsRight;
            var y:Number = pixelsTop;
            //position the button in the panel
            newFormButton.move(x, y);
        }
 
        public function NewFormPanel()
        {
            super();
        }
    }
}

 

 ButtonPanel.mxml

 <?xml version="1.0" encoding="utf-8"?>

<components:NewFormPanel title="My Button Panel" 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:components="custom.*"
 width="400"
 height="300">
 <fx:Declarations>
 <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
</components:NewFormPanel>

 Main.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 
 xmlns:s="library://ns.adobe.com/flex/spark"
 
 xmlns:mx="library://ns.adobe.com/flex/mx"
 minWidth="400" minHeight="300"
 xmlns:components="custom.*"
 xmlns:components1="custom.*">
 
 <components1:ButtonPanel />

</s:Application>

 编译方法

D:\flex_sdk_4.6\bin>mxmlc Main.mxml -source-path=. 

 文件分布

Main.mxml在bin目录下，其于两个文件见下图

 生成的swf文件如下

/Files/dreamcs/testcustompanel.swf 

源码文件包

/Files/dreamcs/NewFormPanel.rar