Advanced Search

Flex Custom Component Skeleton

/ Published in: ActionScript 3
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. package chart{
  2.  
  3.     import mx.core.UIComponent;
  4.     import flash.geom.Matrix;
  5.     import flash.display.GradientType;
  6.     import flash.display.SpreadMethod;
  7.     import flash.display.InterpolationMethod;
  8.  
  9.     public class Chart1 extends UIComponent {
  10.  
  11.         internal var _barWidth : Number = 20;
  12.  
  13.         internal var _value1 : Number = 50;
  14.  
  15.         public function get value1() : Number {
  16.             return _value1;
  17.         }
  18.  
  19.         public function set value1(value: Number) : void {
  20.             this._value1 = value;
  21.             invalidateProperties();
  22.             invalidateSize();
  23.             invalidateDisplayList();
  24.         }
  25.  
  26.         override protected function measure() : void {
  27.             measuredHeight    = _value1;
  28.             measuredMinHeight = _value1;
  29.             measuredWidth     = _barWidth;
  30.             measuredMinWidth  = _barWidth;
  31.  
  32.         }
  33.  
  34.         override protected function updateDisplayList(
  35.             unscaledWidth:Number, unscaledHeight:Number):void {
  36.  
  37.             super.updateDisplayList(unscaledWidth, unscaledHeight);
  38.  
  39.             graphics.clear();
  40.             graphics.lineStyle(1, 0x000000, 1.0);
  41.  
  42.             graphics.beginFill(0x00ff00, 1.0);
  43.  
  44.             graphics.drawRect(0, 0, 20, _value1);
  45.  
  46.         }
  47.     }
  48. }
  49.  
  50. /* USAGE
  51.  
  52. <?xml version="1.0"?>
  53. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  54.     xmlns:jenkov="chart.*" backgroundColor="#ffffff">
  55.  
  56.     <mx:Script>
  57.  
  58.      <![CDATA[
  59.         public function updateChartValue() : void {
  60.             myChart.value1 = new Number(textField.text);
  61.         }
  62.     ]]>
  63.  
  64.     </mx:Script>
  65.  
  66.  
  67.     <mx:Panel width="100%" height="100%"
  68.         title="A Basic Chart Component in a Flex Panel">
  69.         <mx:VBox height="100%">
  70.             <jenkov:Chart1 id="myChart" x="0" y="0" />
  71.             <mx:TextInput id="textField" text="50"/>
  72.             <mx:Button label="Update Chart" click="updateChartValue()"/>
  73.         </mx:VBox>
  74.     </mx:Panel>
  75.  
  76. </mx:Application>
  77.  
  78.  
  79. */

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.