Flex4 - 通过自定义代理类实现绑定

2015-02-03 发布：hangge 阅读：192

对于无法直接绑定的数据对象，比如样式。可以通过代理类实现样式绑定。
下例通过自定义的代理类将滑块与标签的字体大小进行绑定，拖动滑块则实时改变字体大小。

效果图如下：

--- 代理类 MyStyleProxy.as ---

package
{
	import mx.core.UIComponent;
	
	[Bindable]
	public class MyStyleProxy
	{
		private var ui:UIComponent;
		
		public function MyStyleProxy(ui:UIComponent)
		{
			this.ui = ui;
		}
		
		public function set fontSize(size:int):void{
			ui.setStyle("fontSize",size);
		}
		
		public function get fontSize():int{
			return ui.getStyle("fontSize") as int;
		}
	}
}

--- 测试页面 ---

<?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"
			   creationComplete="init()">
	<fx:Script>
		<![CDATA[
			import mx.binding.utils.BindingUtils;
			
			[Bindable]
			private var styleProxy:MyStyleProxy;
			
			private function init():void{
				//将滑块的值和label的字体大小做了双向绑定
				styleProxy = new MyStyleProxy(lab);
				//label的字体大小决定滑块的值
				BindingUtils.bindProperty(slider,"value",styleProxy,"fontSize");
				//滑块的值改变也影响字体大小
				BindingUtils.bindProperty(styleProxy,"fontSize",slider,"value");
			}
			
		]]>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout paddingLeft="20" paddingTop="30"/>
	</s:layout>
	
	<s:HSlider id="slider" maximum="100" minimum="0" snapInterval="1"/>
	<s:Label id="lab" text="样式测试"/>
</s:Application>