Flex 利用Image制作动态菜单

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
		 xmlns:s="library://ns.adobe.com/flex/spark"
		 xmlns:mx="library://ns.adobe.com/flex/mx"
		 width="100%"
		 height="100%"
		 creationComplete="initApp()">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Script source="common/ResultFaultHandler.as"/>
	<fx:Declarations>
		<s:RemoteObject id="remoteObject"
						destination="stateRemoteJava"
						showBusyCursor="true">
			<s:method name="findMainMenuList"
					  fault="resultFaultHandler(event)"/>
		</s:RemoteObject>
	</fx:Declarations>

	<fx:Script>
		<![CDATA[
			import cn.com.common.GetTime;
			import cn.com.general.generalManagerPage;
			import cn.com.history.historyGather;
			import cn.com.history.historyRunState;
			import cn.com.instcontrol.controlManager;
			import cn.com.login.login;
			import cn.com.position.positionManager;
			import cn.com.runmanager.runStateManager;
			import cn.com.system.PermissionsManager;
			import cn.com.system.SystemMain;
			import cn.com.system.UserManager;

			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.controls.List;
			import mx.events.DragEvent;
			import mx.events.ListEvent;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			import mx.rpc.xml.SimpleXMLDecoder;

			import spark.components.Button;
			import spark.components.Image;
			import spark.components.NavigatorContent;
			import spark.events.ListEvent;
			[Bindable]
			private var xml:XMLDocument;
			[Bindable]
			public var str:String; //登录页面返回菜单的值
			[Bindable]
			private var nav:NavigatorContent=new NavigatorContent();
			[Bindable]
			private var lists:ArrayCollection=new ArrayCollection(); //菜单
			[Bindable]
			public var sen:SensorPro;
			//菜单的图片
			[Embed(source="assets/cz_13.png")]
			private var citySymbol4:Class;
			[Embed(source="assets/ZHJK1.png")] //综合监控默认
			private var ZHJK1:Class;
			[Embed(source="assets/ZHJK2.png")] //综合监控指向
			private var ZHJK2:Class;
			[Embed(source="assets/ZHJK3.png")] //综合监控点击
			private var ZHJK3:Class;

			[Embed(source="assets/YXZT1.png")] //运行状态
			private var YXZT1:Class;
			[Embed(source="assets/YXZT2.png")] //运行状态
			private var YXZT2:Class;
			[Embed(source="assets/YXZT3.png")] //运行状态
			private var YXZT3:Class;

			[Embed(source="assets/ZLKZ1.png")] //指令控制
			private var ZLKZ1:Class;
			[Embed(source="assets/ZLKZ2.png")] //指令控制
			private var ZLKZ2:Class;
			[Embed(source="assets/ZLKZ3.png")] //指令控制
			private var ZLKZ3:Class;

			[Embed(source="assets/WZGL1.png")] //位置管理
			private var WZGL1:Class;
			[Embed(source="assets/WZGL2.png")] //位置管理
			private var WZGL2:Class;
			[Embed(source="assets/WZGL3.png")] //位置管理
			private var WZGL3:Class;



			[Embed(source="assets/LSCJ1.png")] //历史采集
			private var LSCJ1:Class;
			[Embed(source="assets/LSCJ2.png")] //历史采集
			private var LSCJ2:Class;
			[Embed(source="assets/LSCJ3.png")] //历史采集
			private var LSCJ3:Class;


			[Embed(source="assets/LSZT1.png")] //历史状态
			private var LSZT1:Class;
			[Embed(source="assets/LSZT2.png")] //历史状态
			private var LSZT2:Class;
			[Embed(source="assets/LSZT3.png")] //历史状态
			private var LSZT3:Class;


			[Embed(source="assets/USER1.png")] //用户管理
			private var USER1:Class;
			[Embed(source="assets/USER2.png")] //用户管理
			private var USER2:Class;
			[Embed(source="assets/USER3.png")] //用户管理
			private var USER3:Class;


			[Embed(source="assets/GROUP1.png")] //权限管理
			private var GROUP1:Class;
			[Embed(source="assets/GROUP2.png")] //权限管理
			private var GROUP2:Class;
			[Embed(source="assets/GROUP3.png")] //权限管理
			private var GROUP3:Class;
			[Bindable]
			private var stime:String=""; //当前时间
			[Bindable]
			public var loginuser:String=""; //登录用户名称
			[Bindable]
			public var loginid:String=""; //登录用户ID
			[Bindable]
			public var buttList:ArrayCollection=new ArrayCollection(); //存储页面的菜单列
			[Bindable]
			private var img:spark.components.Image; //菜单中的图片
			[Bindable]
			private var infoname:String=""; //所指向的Button名字

			private function initApp():void
			{
				//初始化菜单
				this.menutree();
				//设置系统时间
				var myTimer:Timer=new Timer(1000, 0);
				myTimer.addEventListener("timer", timerHandler);
				myTimer.start();
			}

			/**
			 * 初始化菜单树
			 * **/
			private function menutree():void
			{
				var xmlString:String=str;
				if (xmlString != null || xmlString != "")
				{
					this.xml=new XMLDocument(xmlString);
					var decoder:SimpleXMLDecoder=new SimpleXMLDecoder(true);
					var resultObj:Object=decoder.decodeXML(xml);
					var arr:ArrayCollection=resultObj.Root.menuitem;
					var arr1:ArrayCollection=resultObj.Root.menuitem;
					loopMenuList(arr);
				}
				else
				{
					Alert.show("获取菜单失败！", "提示");
				}
			}

			/**
			 * 将查询出的菜单列加载在页面中
			 * **/
			public function loopMenuList(arr:ArrayCollection):void
			{
				for (var i:int=0; i < arr.length; i++)
				{
					var name:String=arr[i].label;
					nav=new NavigatorContent();
					//等于“1”，是这个用户应有的菜单
					if (arr[i].checked == "1")
					{
						img=new spark.components.Image();
						img.name=name;
						img.width=152;
						img.height=66;
						img.addEventListener(MouseEvent.CLICK, selectclick); //对菜单点击
						img.addEventListener(MouseEvent.ROLL_OVER, overEvent); //鼠标移动到组件
						img.addEventListener(MouseEvent.ROLL_OUT, outEvent); //鼠标移开组件
						this.switchif(name, "1");
						buttList.addItem(img);
						this.vmain.addElement(img);
					}
				}
				infoname=buttList.getItemAt(0).name;
				//默认选中第一个菜单
				defaluSelecr(infoname);
				this.mainright(infoname);
			}

			/**
			 * 鼠标移动到Button事件
			 * */
			private function overEvent(event:Event):void
			{
				//所指向的菜名名称
				var buname:String=(event.target as Image).name;
				//如果指向的菜单，不等于现在所选中的菜单，则改变菜单图片 
				for (var i:int=0; i < this.buttList.length; i++)
				{
					var namebutt:String=buttList.getItemAt(i).name;
					var obj:Object=buttList.getItemAt(i);
					this.img=obj as spark.components.Image;
					if (buname != infoname && buname == namebutt)
					{
						switchif(buname, "3");
					}
				}
			}


			/**
			 * 鼠标对菜单移开事件
			 * **/
			private function outEvent(event:Event):void
			{
				//所指向的菜名名称
				var buname:String=(event.target as spark.components.Image).name;
				for (var i:int=0; i < this.buttList.length; i++)
				{
					var namebutt:String=buttList.getItemAt(i).name;
					var obj:Object=buttList.getItemAt(i);
					this.img=obj as spark.components.Image;
					if (buname != infoname && buname == namebutt)
					{
						//重新设置图片
						this.switchif(buname, "1");
					}
				}
			}


			/**
			 * 菜单树点击判断
			 * */
			private function selectclick(event:Event):void
			{
				//获取button名字
				infoname=(event.currentTarget as Image).name;
				img=event.currentTarget as Image; //获取button对象
				switch (infoname)
				{
					case "综合监控总览":
						vGroup.removeAllElements();
						var general:generalManagerPage=new generalManagerPage();
						img.source=ZHJK3;
						vGroup.addElement(general);
						this.checkedimg(infoname);
						break;
					case "运行状态管理":
						vGroup.removeAllElements();
						var run:runStateManager=new runStateManager();
						img.source=YXZT3;
						vGroup.addElement(run);
						this.checkedimg(infoname);
						break;
					case "指令控制":
						vGroup.removeAllElements();
						var contro:controlManager=new controlManager();
						img.source=ZLKZ3;
						vGroup.addElement(contro);
						this.checkedimg(infoname);
						break;
					case "权限管理":
						vGroup.removeAllElements();
						var per:PermissionsManager=new PermissionsManager();
						vGroup.addElement(per);
						img.source=GROUP3;
						this.checkedimg(infoname);
						break;
					case "用户管理":
						vGroup.removeAllElements();
						var sys:UserManager=new UserManager();
						vGroup.addElement(sys);
						img.source=USER3;
						this.checkedimg(infoname);
						break;
					case "历史采集信息":
						vGroup.removeAllElements();
						var historyG:historyGather=new historyGather();
						vGroup.addElement(historyG);
						img.source=LSCJ3;
						this.checkedimg(infoname);
						break;
					case "历史运行状态信息":
						vGroup.removeAllElements();
						var historyRS:historyRunState=new historyRunState();
						vGroup.addElement(historyRS);
						img.source=LSZT3;
						this.checkedimg(infoname);
						break;
					case "位置管理":
						vGroup.removeAllElements();
						var positionM:positionManager=new positionManager();
						vGroup.addElement(positionM);
						img.source=WZGL3;
						this.checkedimg(infoname);
						break;
					default:
						break;
				}
			}


			/**
			 * 判断选中
			 * selename @Button名字
			 * */
			private function checkedimg(selename:String):void
			{
				for (var i:int=0; i < this.buttList.length; i++)
				{
					var namebutt:String=buttList.getItemAt(i).name;
					var obj:Object=buttList.getItemAt(i);
					this.img=obj as spark.components.Image;
					if (namebutt != selename)
					{
						switchif(namebutt, "1");
					}
				}
			}


			/**
			 * 给Button设置图片
			 * */
			private function switchif(buname:String, flog:String):void
			{
				//默认图片
				if (flog == "1")
				{
					switch (buname)
					{
						case "综合监控总览":
							this.img.source=ZHJK1;
							break;
						case "运行状态管理":
							this.img.source=YXZT1;
							break;
						case "指令控制":
							this.img.source=ZLKZ1;
							break;
						case "权限管理":
							this.img.source=GROUP1;
							break;
						case "用户管理":
							this.img.source=USER1;
							break;
						case "历史采集信息":
							this.img.source=LSCJ1;
							break;
						case "历史运行状态信息":
							this.img.source=LSZT1;
							break;
						case "位置管理":
							this.img.source=WZGL1;
							break;
						default:
							break;
					}
				}
				//点击后的图片
				else if (flog == "2")
				{
					switch (buname)
					{
						case "综合监控总览":
							this.img.source=ZHJK3;
							break;
						case "运行状态管理":
							this.img.source=YXZT3;
							break;
						case "指令控制":
							this.img.source=ZLKZ3;
							break;
						case "权限管理":
							this.img.source=GROUP3;
							break;
						case "用户管理":
							this.img.source=USER3;
							break;
						case "历史采集信息":
							this.img.source=LSCJ3;
							break;
						case "历史运行状态信息":
							this.img.source=LSZT3;
							break;
						case "位置管理":
							this.img.source=WZGL3;
							break;
						default:
							break;
					}
				}
				//鼠标移动时的图片
				else
				{
					switch (buname)
					{
						case "综合监控总览":
							this.img.source=ZHJK2;
							return;
						case "运行状态管理":
							this.img.source=YXZT2;
							return;
						case "指令控制":
							this.img.source=ZLKZ2;
							return;
						case "权限管理":
							this.img.source=GROUP2;
							return;
						case "用户管理":
							this.img.source=USER2;
							return;
						case "历史采集信息":
							this.img.source=LSCJ2;
							return;
						case "历史运行状态信息":
							this.img.source=LSZT2;
							return;
						case "位置管理":
							this.img.source=WZGL2;
							return;
						default:
							return;
					}
				}

			}

			/**
			 * 判断登录成功后第一个加载的页面
			 * **/
			private function mainright(name:String):void
			{
				switch (name)
				{
					case "综合监控总览":
						vGroup.removeAllElements();
						var general:generalManagerPage=new generalManagerPage();
						vGroup.addElement(general);
						break;
					case "运行状态管理":
						vGroup.removeAllElements();
						var run:runStateManager=new runStateManager();
						vGroup.addElement(run);
						break;
					case "指令控制":
						vGroup.removeAllElements();
						var contro:controlManager=new controlManager();
						vGroup.addElement(contro);
						break;
					case "权限管理":
						vGroup.removeAllElements();
						var per:PermissionsManager=new PermissionsManager();
						vGroup.addElement(per);
						break;
					case "用户管理":
						vGroup.removeAllElements();
						var sys:UserManager=new UserManager();
						vGroup.addElement(sys);
						break;
					case "历史采集信息":
						vGroup.removeAllElements();
						var historyG:historyGather=new historyGather();
						vGroup.addElement(historyG);
						break;
					case "历史运行状态信息":
						vGroup.removeAllElements();
						var historyRS:historyRunState=new historyRunState();
						vGroup.addElement(historyRS);
						break;
					case "位置管理":
						vGroup.removeAllElements();
						var positionM:positionManager=new positionManager();
						vGroup.addElement(positionM);
						break;
					default:
						break;
				}
			}

			/**
			 * 默认选中第一个菜单
			 **/
			private function defaluSelecr(name:String):void
			{
				for (var i:int=0; i < this.buttList.length; i++)
				{
					var namebutt:String=buttList.getItemAt(i).name;
					var obj:Object=buttList.getItemAt(i);
					this.img=obj as spark.components.Image;
					if (name == namebutt)
					{
						this.switchif(name, "2");
					}
				}
			}


			/**
			 * 退出系统
			 * **/
			private function layout2():void
			{
				sen.removeAllElements();
				var lg:login=new login();
				lg.sen=sen;
				sen.addElement(lg);
			}


			/**系统当前时间**/
			private function timerHandler(event:TimerEvent):void
			{
				var gt:GetTime=new GetTime();
				stime=gt.systemTime();
			}
		]]>
	</fx:Script>
	<s:VGroup width="100%"
			  height="100%">
		<s:HGroup width="100%"
				  height="25">
			<s:FormItem label="登录用户:">
				<s:Label text="{loginuser}"
						 color="red"/>
			</s:FormItem>
			<s:FormItem label="登录时间:">
				<s:Label text="{stime}"
						 color="red"/>
			</s:FormItem>
			<s:FormItem>
				<s:Label text="退出"
						 fontSize="14"
						 color="red"
						 useHandCursor="true"
						 buttonMode="true"
						 mouseChildren="false"
						 click="layout2()"/>
				<s:Line width="100%">
					<s:stroke>
						<s:SolidColorStroke color="red"
											weight="1"
											caps="square"/>
					</s:stroke>
				</s:Line>
			</s:FormItem>
		</s:HGroup>
		<s:Spacer width="100%"/>
		<s:Line width="100%">
			<s:stroke>
				<s:SolidColorStroke color="#000000"
									weight="1"
									caps="square"/>
			</s:stroke>
		</s:Line>
		<s:HGroup width="100%"
				  height="100%">
			<!--菜单项-->
			<s:VGroup fontSize="15"
					  width="10%"
					  id="vmain"
					  gap="0"
					  horizontalCenter="0"
					  height="100%">
			</s:VGroup>
			<s:Line height="100%">
				<s:stroke>
					<s:SolidColorStroke color="#000000"
										weight="1"
										caps="square"/>
				</s:stroke>
			</s:Line>
			<!-- 右侧主项-->
			<s:VGroup id="vGroup"
					  width="90%"
					  height="100%">
			</s:VGroup>
		</s:HGroup>
	</s:VGroup>

</s:Group>