<?xml version="1.0" encoding="utf-8"?>
<?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">
	<s:Scroller width="100%" height="100%" interactionMode="touch">
		<s:Group>
			<s:Image source="http://www.beasy.org/wp-content/uploads/2011/10/sh.jpg"/>
		</s:Group>
	</s:Scroller>
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
 
    <fx:Metadata>
    <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Scroller")]
    ]]>
    </fx:Metadata> 
 
    <fx:Script>
    <![CDATA[    
        /**
         *  @private
         */
        override public function beginHighlightBitmapCapture() : Boolean
        {
            var needUpdate:Boolean = super.beginHighlightBitmapCapture();
 
            // Draw an opaque rect that fill our entire skin. Our background
            // is transparent, but we don't want focus/error skins to
            // poke through.  This is safe to do since we don't have any 
            // graphic elements as direct children.
            graphics.beginFill(0);
            graphics.drawRect(0, 0, width, height);
            graphics.endFill();
 
            return needUpdate;
        }
 
        /**
         *  @private
         */
        override public function endHighlightBitmapCapture() : Boolean
        {
            var needUpdate:Boolean = super.endHighlightBitmapCapture();
 
            // Clear the rect we drew in beginBitmapCapture();
            graphics.clear();
            return needUpdate;
        }
    ]]>
    </fx:Script>
    <s:VScrollBar id="verticalScrollBar" visible="false" skinClass="skins.VScrollBarSkin"/>
    <s:HScrollBar id="horizontalScrollBar" visible="false" skinClass="skins.HScrollBarSkin"/>
</s:SparkSkin>

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="35" minHeight="15" 
    alpha.disabled="0.5" alpha.inactive="0.5">
    <fx:Metadata>
    <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.HScrollBar")]
    ]]>
    </fx:Metadata> 
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="inactive" />
    </s:states>
    <s:Button id="track" left="1" right="1" width="10" 
              focusEnabled="false" tabEnabled="false"
              skinClass="skins.ScrollBarTrackSkin" />
    <s:Button id="thumb" 
              focusEnabled="false" visible.inactive="false" tabEnabled="false" mouseEnabled="false"
              skinClass="skins.ScrollBarThumbSkin" />
 
</s:SparkSkin>

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="15" minHeight="15" 
    alpha.disabled="0.5" alpha.inactive="0.5" >
    <fx:Metadata>
    <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.VScrollBar")]
    ]]>
    </fx:Metadata> 
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="inactive" />
    </s:states>
    <s:Button id="track" top="1" bottom="1" width="10" 
			  focusEnabled="false" tabEnabled="false"
			  skinClass="skins.ScrollBarTrackSkin" />
    <s:Button id="thumb" 
			  skinClass="skins.ScrollBarThumbSkin" mouseEnabled="false"
              focusEnabled="false" visible.inactive="false" tabEnabled="false"/>
</s:SparkSkin>

<?xml version="1.0" encoding="utf-8"?>
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             minWidth="10" minHeight="10" 
             alpha.disabled="0.5">
    <fx:Metadata>
        <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
	<s:Rect top="0" bottom="0" left="0" right="0" minWidth="10" minHeight="10">
	</s:Rect>
</s:SparkButtonSkin>

<?xml version="1.0" encoding="utf-8"?>
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             minWidth="10" minHeight="10" 
             alpha.disabled="0.5">
    <fx:Metadata>
        <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
    <s:Rect top="1" left="1" right="1" bottom="1" radiusX="5" radiusY="5">
		<s:fill>
			<s:SolidColor color="0xC0C0C0" alpha="0.8"/>
		</s:fill>
	</s:Rect>
</s:SparkButtonSkin>

<s:Scroller width="100%" height="100%" interactionMode="touch"
				skinClass="skins.ScrollerSkin">

<?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="955" minHeight="600">
	<fx:Script>
		<![CDATA[
		import spark.core.NavigationUnit;
 
		/**
		 * 上一页
		 */
		private function prePageHandler():void
		{
			smp.valueBy = hGroup.getHorizontalScrollPositionDelta(NavigationUnit.PAGE_LEFT);
			anmiate.play();
		}
 
		/**
		 * 下一页
		 */
		private function nextPageHandler():void
		{
			smp.valueBy = hGroup.getHorizontalScrollPositionDelta(NavigationUnit.PAGE_RIGHT);
			anmiate.play();
		}
 
		]]>
	</fx:Script>
	<fx:Declarations>
		<s:Animate id="anmiate" target="{hGroup}" duration="800">
			<s:motionPaths>
				<s:SimpleMotionPath id="smp" property="horizontalScrollPosition"/>
			</s:motionPaths>
		</s:Animate>
	</fx:Declarations>
	<s:Panel title="Flex4 Group新特性">
		<s:HGroup id="hGroup" gap="10" height="100" width="320" clipAndEnableScrolling="true">
			<s:Button width="100" height="100" label="1" fontSize="30"/>
			<s:Button width="100" height="100" label="2" fontSize="30"/>
			<s:Button width="100" height="100" label="3" fontSize="30"/>
			<s:Button width="100" height="100" label="4" fontSize="30"/>
			<s:Button width="100" height="100" label="5" fontSize="30"/>
			<s:Button width="100" height="100" label="6" fontSize="30"/>
			<s:Button width="100" height="100" label="7" fontSize="30"/>
		</s:HGroup>
		<s:controlBarContent>
			<s:HGroup width="100%" horizontalAlign="center">
				<s:Button label="上一页" click="prePageHandler()"/>
				<s:Button label="下一页" click="nextPageHandler()"/>
			</s:HGroup>
		</s:controlBarContent>
	</s:Panel>
</s:Application>

/**
 * 主程序初始化时对systemManager进行侦听
 */
public function init():void
{
	systemManager.addEventListener(FlexEvent.IDLE, idleHandler);
}
 
/**
 * idle事件处理
 */
private function idleHandler(event:FlexEvent):void
{
	var idleCounter:int = systemManager.mx_internal::idleCounter;
	if( idleCounter >= 900)// 100毫秒一次，900就等于90秒
		systmeIdle();
}
 
/**
 * 发送系统空闲消息
 */
private function systmeIdle():void
{
	// TO DO ...
}

// 先把名导入
import mx.core.mx_internal;
 
// 对象.命名空间::属性名
systemManager.mx_internal::idleCounter;

package org.beasy.charts
{
	import mx.charts.AxisRenderer;
	import mx.charts.LinearAxis;
	import mx.charts.chartClasses.IAxisRenderer;
	import mx.formatters.NumberFormatter;
 
	/**
	 * 是否显示千位符
	 * 
	 * @default false
	 */
	[Style(name="useThousandsSeparator", type="Boolean", inherit="no")]
 
	/**
	 * 保留小数点位数
	 * 
	 * @default 0
	 */	
	[Style(name="precision", type="int", format="Length", inherit="no")]
 
	/**
	 * 前缀
	 * 
	 * @param null
	 */	
	[Style(name="prefix", type="String", inherit="no")]
 
	/**
	 * 后缀
	 * 
	 *@default null 
	 */	
	[Style(name="suffix", type="String", inherit="no")]
 
	/**
	 * 货币单位
	 * 
	 * @param value
	 */	
	[Style(name="moneyUnit", type="com.beasy.charts.MoneyUnits", inherit="no")]
 
	/**
	 * 扩展过的AxisRendererPlus
	 * 支持定义标签格式:
	 * 1,支持千们符
	 * 2,小数点保留位数
	 * 3,前缀
	 * 4,后缀
	 * 5,大数字单位缩写
	 * 
	 * @author Marco
	 */	
	public class AxisRendererPlus extends AxisRenderer
	{
		//--------------------------------------------------------------------------
		//
		//  Constructor
		//
		//--------------------------------------------------------------------------
 
		public function AxisRendererPlus()
		{
			super();
			labelFunction = myLabelFunction;
			numberFmt = new NumberFormatter();
		}
 
		//--------------------------------------------------------------------------
		//
		//  Variables
		//
		//--------------------------------------------------------------------------
 
		/**
		 * @private
		 */		
		private var numberFmt:NumberFormatter;
 
		//--------------------------------------------------------------------------
		//
		//  Methods
		//
		//--------------------------------------------------------------------------
 
		/**
		 * @private
		 * 
		 * 根据设定的样式值在labelFunction中转换显示的标签.
		 */		
		public function myLabelFunction(axisRenderer:IAxisRenderer, label:String):String
		{
			var useThousandsSeparator:Boolean = getStyle("useThousandsSeparator");
			var precision:int = getStyle("precision");
			var prefix:String = getStyle("prefix");
			var suffix:String = getStyle("suffix");
			var moneyUnit:MoneyUnits = getStyle("moneyUnit");
 
			if( axisRenderer.axis is LinearAxis )
			{
				var num:Number = Number( label );
				if( moneyUnit )
					num = MoneyUnits.formatByUnit(moneyUnit.unit, num);
 
				numberFmt.precision = precision;
				numberFmt.useThousandsSeparator = useThousandsSeparator;
				label = numberFmt.format(num);
				if( prefix )
					label = prefix+label;
				if( moneyUnit && moneyUnit.unit != MoneyUnits.NONE )
					label += moneyUnit.label;
				if( suffix )
					label += suffix;
			}
			return label;
		}
 
 
 
	}
}

package org.beasy.charts
{
 
	/**
	 * 货币单位对象
	 * 
	 * @author Marco
	 */	
	public class MoneyUnits
	{
		//--------------------------------------------------------------------------
		//
		//  Class constants
		//
		//--------------------------------------------------------------------------
 
		/**
		 * 原始单位
		 */		
		public static const NONE:String = "none";
 
		/**
		 * 百
		 */		
		public static const HUNDRED:String = "hundred";
 
		/**
		 * 千
		 */		
		public static const THOUSAND:String = "thousand";
 
		/**
		 * 万
		 */		
		public static const TEN_THOUSAND:String = "TEN_THOUSAND";
 
		/**
		 * 十万
		 */		
		public static const LAKH:String = "lakh";
 
		/**
		 * 百万
		 */		
		public static const MILLION:String = "million";
 
		//--------------------------------------------------------------------------
		//
		//  Constructor
		//
		//--------------------------------------------------------------------------
 
		public function MoneyUnits( label:String = null, unit:String = null )
		{
			super();
			_label = label;
			_unit = unit;
		}
 
		//--------------------------------------------------------------------------
		//
		//  Properties
		//
		//--------------------------------------------------------------------------
 
		/**
		 * @private
		 */		
		private var _label:String;
 
		/**
		 * @private
		 */		
		private var _unit:String;
 
		/**
		 * 单位所对应的标签:百,千,万...
		 */		
		public function set label(value:String):void
		{
			_label = value;
		}
		public function get label():String
		{
			return _label;
		}
 
		/**
		 * 要转换的单位:HUNDRED，THOUSAND，TEN_THOUSAND...
		 */		
		public function set unit(value:String):void
		{
			_unit = value;
		}
		public function get unit():String
		{
			return _unit;
		}
 
		/**
		 * @private
		 * 
		 * 根据代币单位计算
		 */		
		public static function formatByUnit( unitStr:String, num:Number ):Number
		{
			switch( unitStr )
			{
				case MoneyUnits.NONE :
					break;
 
				case MoneyUnits.HUNDRED :
					num /= 100;
					break;
 
				case MoneyUnits.THOUSAND :
					num /= 1000;
					break;
 
				case MoneyUnits.TEN_THOUSAND :
					num /= 10000;
					break;
 
				case MoneyUnits.LAKH :
					num /= 100000;
					break;
 
				case MoneyUnits.MILLION :
					num /= 1000000;
					break;
 
				default : break;
			}
			return num;
		}
 
	}
}

<?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:charts="org.beasy.charts.*"
			   xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768" fontSize="12">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
 
			[Bindable]
			public var dataSource:ArrayCollection = new ArrayCollection([
				{ Country: "USA", Gold: 3500, Silver:3900, Bronze: 2900 },
				{ Country: "China", Gold: 3200, Silver:1700, Bronze: 1400 },
				{ Country: "Russia", Gold: 2700, Silver:2700, Bronze: 3800 }]);
 
		]]>
	</fx:Script>
	<s:Panel title="图表轴标签自定义格式测试" width="500" height="500" left="20" top="20">
		<s:layout><s:VerticalLayout/></s:layout>
		<mx:ColumnChart id="columnChart" width="100%" height="100%" dataProvider="{dataSource}" showDataTips="true">
			<mx:verticalAxisRenderers>
				<charts:AxisRendererPlus id="axisRenderer" fontSize="12"
										 useThousandsSeparator="{thousandsSeparator.selected}"
										 precision="{precision.value}"
										 prefix="{prefix.text}"
										 suffix="{suffix.text}"
										 moneyUnit="{moneyUnits.selectedItem}">
					<charts:axis>
						<mx:LinearAxis id="vAxis"/>
					</charts:axis>
				</charts:AxisRendererPlus>
			</mx:verticalAxisRenderers>
			<mx:horizontalAxis>
				<mx:CategoryAxis categoryField="Country"/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:ColumnSeries displayName="Gold" yField="Gold" verticalAxis="{vAxis}"/>
				<mx:ColumnSeries displayName="Silver" yField="Silver" verticalAxis="{vAxis}"/>
				<mx:ColumnSeries displayName="Bronze" yField="Bronze" verticalAxis="{vAxis}"/>
			</mx:series>
		</mx:ColumnChart>
		<mx:Form>
			<mx:FormItem label="千位符:">
				<s:CheckBox id="thousandsSeparator" selected="true"/>
			</mx:FormItem>
			<mx:FormItem label="小数点位数:">
				<s:NumericStepper id="precision" minimum="0" maximum="2" stepSize="1" value="1"/>
			</mx:FormItem>
			<mx:FormItem label="前缀:">
				<s:TextInput id="prefix" text="$"/>
			</mx:FormItem>
			<mx:FormItem label="后缀:">
				<s:TextInput id="suffix"/>
			</mx:FormItem>
			<mx:FormItem label="单位:">
				<mx:ComboBox id="moneyUnits">
					<fx:Array>
						<charts:MoneyUnits label="无" unit="{MoneyUnits.NONE}"/>
						<charts:MoneyUnits label="百" unit="{MoneyUnits.HUNDRED}"/>
						<charts:MoneyUnits label="千" unit="{MoneyUnits.THOUSAND}"/>
						<charts:MoneyUnits label="万" unit="{MoneyUnits.TEN_THOUSAND}"/>
						<charts:MoneyUnits label="十万" unit="{MoneyUnits.LAKH}"/>
					</fx:Array>
				</mx:ComboBox>
			</mx:FormItem>
		</mx:Form>
	</s:Panel>
</s:Application>

package org.beasy.binding.utils
{
	import mx.binding.utils.ChangeWatcher;
	import mx.styles.IStyleClient;
 
	/**
	 * Flex的绑定功能为我们的日常提供很多的方便
	 * 但是Flex只提供了属性的绑定类->BindingUtils;
	 * 如果要实现绑定控件的Style还要自己用ChangeWatcher去侦听事件
	 * 有了StyleBindingUtils这一切将变的简单
	 * StyleBindingUtils封装了ChangeWatcher进行了Style的绑定实现,
	 * 为您的开发提供了更多方便和快捷
	 * @author Marco
	 */
	public class StyleBindingUtils
	{
		public function StyleBindingUtils()
		{
		}
 
		public static function bindStyle(
			site:IStyleClient, prop:String,
			host:Object, chain:Object,
			commitOnly:Boolean = false):ChangeWatcher
		{
			var w:ChangeWatcher =
				ChangeWatcher.watch(host, chain, null, commitOnly);
 
			if(w != null )
			{
				var assign:Function = function(event:*):void
				{
					site.setStyle(prop, w.getValue());
				}
				w.setHandler( assign );
				assign(null);
			}
 
			return w;
		}
 
	}
}

<?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:charts="org.beasy.charts.*"
			   xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768" fontSize="12">
	<fx:Script>
		<![CDATA[
			import mx.graphics.SolidColorStroke;
 
			import org.beasy.binding.utils.StyleBindingUtils;
 
			/**
			 * 定义一个Stroke, 默认颜色为0x333333
			 */
			private var background:SolidColorStroke = new SolidColorStroke(0x333333, 0, 1);
 
			private function init():void
			{
				/**
				 * 进行绑定:把container的borderColor样式属性绑定到borderStroke的color属性上
				 */
				StyleBindingUtils.bindStyle(container, "backgroundColor", background, "color");
			}
 
			private function changeHandler():void
			{
				/**
				 * 设置borderStroke的color属性
				 * 被绑定对象会联运变化
				 */
				background.color = backgroundColor.selectedColor;
			}
		]]>
	</fx:Script>
	<mx:Canvas width="200" height="200" id="container" borderThickness="2" borderStyle="solid"/>
	<mx:ControlBar width="100%">
		<mx:FormItem label="背景色:">
			<mx:ColorPicker id="backgroundColor" change="changeHandler()"/>
		</mx:FormItem>
	</mx:ControlBar>
</s:Application>