Flex自定义组件骨架

Posted 2021-02-26

package chart{
 
    import mx.core.UIComponent;
    import flash.geom.Matrix;
    import flash.display.GradientType;
    import flash.display.SpreadMethod;
    import flash.display.InterpolationMethod;
 
    public class Chart1 extends UIComponent {
 
        internal var _barWidth : Number = 20;
 
        internal var _value1 : Number = 50;
 
        public function get value1() : Number {
            return _value1;
        }
 
        public function set value1(value: Number) : void {
            this._value1 = value;
            invalidateProperties();
            invalidateSize();
            invalidateDisplayList();
        }
 
        override protected function measure() : void {
            measuredHeight    = _value1;
            measuredMinHeight = _value1;
            measuredWidth     = _barWidth;
            measuredMinWidth  = _barWidth;
 
        }
 
        override protected function updateDisplayList(
            unscaledWidth:Number, unscaledHeight:Number):void {
 
            super.updateDisplayList(unscaledWidth, unscaledHeight);
 
            graphics.clear();
            graphics.lineStyle(1, 0x000000, 1.0);
 
            graphics.beginFill(0x00ff00, 1.0);
 
            graphics.drawRect(0, 0, 20, _value1);
 
        }
    }
}
 
/* USAGE
 
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:jenkov="chart.*" backgroundColor="#ffffff">
 
    <mx:Script>
 
     <![CDATA[
        public function updateChartValue() : void {
            myChart.value1 = new Number(textField.text);
        }
    ]]>
 
    </mx:Script>
 
 
    <mx:Panel width="100%" height="100%"
        title="A Basic Chart Component in a Flex Panel">
        <mx:VBox height="100%">
            <jenkov:Chart1 id="myChart" x="0" y="0" />
            <mx:TextInput id="textField" text="50"/>
            <mx:Button label="Update Chart" click="updateChartValue()"/>
        </mx:VBox>
    </mx:Panel>
 
</mx:Application>
 
 
*/