FLEX提高篇---------FLEX换肤,看不懂的是"傻瓜"

为什么选择FLEX,很大部分原因在于FLEX的视觉效果和冲击力.其实说起FLEX的换肤功能,实在是没有值得提及的地方,因为一切就像傻瓜式的一样,来得那么快,那么简洁.我们经常对自己说,语言只是工具,而编程思想才是最重要的.而换肤的原理,和HTML的CSS也是如出一辙,都是定义多套CSS,根据需要导入不同的一套.FLEX也是这么干的.唯一不同的是,他专门提供了一个加载样式表的类,而不用刷新.

这里唯一要提醒大家的是定义了多套CSS样式文件之后,一定要编译CSS文件成SWF文件,然后加载对应的SWF文件才行.编译的方法是在CSS文件上右键,选编译成SWF就OK了.

这个例子的确是很简单的,如果你有点儿编程基础,看不懂这个,那......所以我就不做多解释了.

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
	<mx:Script>
		<![CDATA[
			import mx.events.ListEvent;
			import com.carlcalderon.arthropod.Debug;
			
			private static const DEFAULT_SKIN:String="default";
			private static const RED_SKIN:String="red";
			private static const BLUE_SKIN:String="blue";
			
			private function changeSkinHanlder(e:ListEvent):void{
				//Debug info
				Debug.log(e.target.selectedItem.data as String,Debug.RED);
				
				if(e.target.selectedItem){
					switch(e.target.selectedItem.data as String){
						case DEFAULT_SKIN:
							StyleManager.unloadStyleDeclarations("css/blue.swf");
							StyleManager.unloadStyleDeclarations("css/red.swf");
							break;
						case RED_SKIN:
							StyleManager.unloadStyleDeclarations("css/blue.swf");
							StyleManager.loadStyleDeclarations("css/red.swf");						
							break;
						case BLUE_SKIN:
							StyleManager.unloadStyleDeclarations("css/red.swf");
							StyleManager.loadStyleDeclarations("css/blue.swf");
							break;
						default:
							break;
					}
				}
			}
			
		]]>
	</mx:Script>
	<mx:ComboBox id="changeSkinCombox" labelField="label" change="changeSkinHanlder(event);">
		<mx:ArrayCollection>
			<mx:source>
				<mx:Array>
					<mx:Object data="{DEFAULT_SKIN}" label="default Skin"/>
					<mx:Object data="{RED_SKIN}" label="red Skin"/>
					<mx:Object data="{BLUE_SKIN}" label="blue Skin"/>
				</mx:Array>
			</mx:source>
		</mx:ArrayCollection>
	</mx:ComboBox>
</mx:Application>