MakeScreenView

MakeScreenView

<?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"
			   applicationComplete="init(event)" xmlns:base="com.ultrapower.tomas.screen.base.*">
	<fx:Script>
		<![CDATA[
			import com.ultrapower.tomas.screen.view.ResourceComp;
			
			import flash.utils.getQualifiedClassName;
			
			import mx.containers.DividedBox;
			import mx.containers.HDividedBox;
			import mx.containers.VDividedBox;
			import mx.controls.Alert;
			import mx.core.DragSource;
			import mx.core.IVisualElement;
			import mx.core.IVisualElementContainer;
			import mx.core.UIComponent;
			import mx.events.DividerEvent;
			import mx.events.DragEvent;
			import mx.events.FlexEvent;
			import mx.events.ItemClickEvent;
			import mx.managers.DragManager;
			import mx.utils.DisplayUtil;
			import mx.utils.UIDUtil;
			
			import spark.components.Group;
			import spark.components.Image;
			import spark.components.Panel;
			import spark.components.supportClasses.Skin;
			import spark.primitives.BitmapImage;
			[Embed(source="network.png")]
			public var img:Class;
			
			private var cm:ContextMenu;
			
			private var addVDivision:ContextMenuItem; //添加垂直分割
			private var addHDivision:ContextMenuItem; //添加水平分割
			private var removeDivision:ContextMenuItem; //移除分割
			
			private var cmps:Array = [];
			
			protected function bgChanged(event:ItemClickEvent):void
			{
				switch(bg.selection.label)
				{
					case "无背景":
						body.clearStyle("skinClass");
						body.setStyle("backgroundColor",0xffffff);
						break;
					case "蓝色空间":
						styleManager.loadStyleDeclarations("assets/styles/blue/blue.swf");
						body.clearStyle("skinClass");
						body.clearStyle("backgroundColor");
						
						//						body.setStyle("backgroundColor",0x0000ff);
						break;
					case "绿色背景":
						styleManager.unloadStyleDeclarations("assets/styles/blue/blue.swf");
						body.clearStyle("skinClass");
						body.setStyle("backgroundColor",0x00ff00);
						break;
					case "天安门背景":
						body.clearStyle("backgroundColor");
						body.setStyle("skinClass",MySkin);
						break;
				}
			}
			
			protected function label1_mouseDownHandler(e:MouseEvent):void
			{
				var button:Label=e.target as Label;
				var ds:DragSource=new DragSource();
				ds.addData(button, "my");
				ds.addData(3,"num");
				var dragImage:Image=null;
				var w:Number=0, h:Number=0;
				var dragImage:Image=new Image();
				dragImage.mouseChildren=false;
				dragImage.mouseEnabled=false;
				dragImage.source=img;
				w=dragImage.width;
				h=dragImage.height;
				
				DragManager.doDrag(button, ds, e, dragImage, -e.localX + w / 2, -e.localY + h / 2);
			}
			
			protected function body_dragEnterHandler(event:DragEvent):void
			{
				if (event.dragSource.hasFormat("my"))
				{
					DragManager.acceptDragDrop(body);
				}
			}
			
			protected function body_dragDropHandler(event:DragEvent):void
			{
				var xx:Number = event.stageX;
				var yy:Number = event.stageY;
				var lp:Point = new Point(xx,yy);
				var ss:Array = getObjectsUnderPoint(lp);
				if(!ss) return;
				var obj:Object = ss[ss.length-1];
				if(UIComponent(obj).owner is CompContainer)
				{
					var con:CompContainer = UIComponent(obj).owner as CompContainer;
					if(!con) return;
					var data:Object=event.dragSource.dataForFormat("num");
					var panel:Panel = new Panel();
					panel.title = con.name;
					panel.percentHeight = panel.percentWidth = 100;
					
					var rc:ResourceComp = new ResourceComp();
					rc.title = con.name; 
					con.addElement(rc);
					cmps.push(rc);
				}
			}
			
			protected function init(event:FlexEvent):void
			{
				addVDivision = new ContextMenuItem("添加垂直分割");
				addVDivision.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, menuItemHandler);
				
				addHDivision = new ContextMenuItem("添加水平分割");
				addHDivision.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, menuItemHandler);
				
				removeDivision = new ContextMenuItem("移除分割");
				removeDivision.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, menuItemHandler);
				
				
				cm = new ContextMenu();
				cm.hideBuiltInItems();
				cm.customItems.push(addVDivision);
				cm.customItems.push(addHDivision);
				cm.customItems.push(removeDivision);
				
				body.contextMenu = cm;
			}
			
			/**
			 * 响应右键菜单事件
			 * */
			protected function menuItemHandler(event:ContextMenuEvent):void {  
				var con:CompContainer = event.contextMenuOwner as CompContainer;
				var contextType:String = ContextMenuItem(event.currentTarget).caption;
				var pt:Point = new Point(event.mouseTarget.mouseX,event.mouseTarget.mouseY);
				var lt:Point = this.localToGlobal(pt);
				var conX:Number = con == body ? 0 : con.cx;
				var conY:Number = con == body ? 0 : con.cy;
				var conW:Number = con == body ? 1 : con.cpw;
				var conH:Number = con == body ? 1 : con.cph;
				switch(contextType)
				{
					case "添加垂直分割":
						con.removeAllElements();
						var hd:HDividedBox = new HDividedBox();
						hd.setStyle("dividerColor",0x00ff00);
						hd.percentHeight = hd.percentWidth = 100;
						hd.addEventListener(DividerEvent.DIVIDER_RELEASE,onHDivider);
						hd.name = UIDUtil.createUID();
						hd.id = con.id;
						hd.data = {width:conW,height:conH};
						var lf:CompContainer = getContainer();
						lf.percentHeight = 100;
						lf.percentWidth = 50;
						lf.cx = conX;
						lf.cy = conY;
						lf.cpw = 0.5;
						lf.cph = 1;
						lf.name = hd.name;
						lf.id = hd.name;
						hd.addElement(lf);
						var rl:CompContainer = getContainer();
						rl.percentHeight = 100;
						rl.percentWidth = 50;
						rl.cx = conX+con.width * .5;
						rl.cy = conY;
						rl.cpw = 0.5;
						rl.cph = 1;
						rl.name = hd.name;
						rl.id = hd.name;
						hd.addElement(rl);
						con.addElement(hd);
						break;
					case "添加水平分割":
						con.removeAllElements();
						var vd:VDividedBox = new VDividedBox();
						vd.setStyle("dividerColor",0x00ff00);
						vd.percentHeight = vd.percentWidth = 100;
						vd.addEventListener(DividerEvent.DIVIDER_RELEASE,onVDivider);
						vd.name = UIDUtil.createUID();
						vd.id = con.id;
						vd.data = {width:conW,height:conH};
						var vlf:CompContainer = getContainer();
						vlf.percentHeight = 50;
						vlf.percentWidth = 100;
						vlf.cx = conX;
						vlf.cy = conY;
						vlf.cpw = 1;
						vlf.cph = 0.5;
						vlf.name = vd.name;
						vlf.id = vd.name;
						vd.addElement(vlf);
						var vrl:CompContainer = getContainer();
						vrl.cx = conX;
						vrl.cy = conY+ con.height * .5;
						vrl.cpw = 1;
						vrl.cph = 0.5;
						vrl.percentHeight = 50;
						vrl.percentWidth = 100;
						vrl.name = vd.name;
						vrl.id = vd.name;
						vd.addElement(vrl);
						con.addElement(vd);
						break;
					case "移除分割":
						con.removeAllElements();
						if(con != body)
						{
							IVisualElementContainer(con.parent.parent).removeElement(IVisualElement(con.parent));
						}
						break;
				}
				
			}
			
			protected function getContainer():CompContainer
			{
				var g:CompContainer = new CompContainer();
				g.setStyle("backgroundColor",0xeeeeee);
				g.setStyle("backgroundAlpha",0.1);
				g.contextMenu = cm;
				return g;
			}
			
			protected function saveClickHandler(event:MouseEvent):void
			{
				if(cmps.length == 0)
				{
					Alert.show("没有有效组件");
					return;
				}
				var xml:XML = new XML(<root/>);
				var xmls:Object = new Object();
				xmls['body'] = xml;
				DisplayUtil.walkDisplayObjects(body,function(o:Object):void
				{
					if(o is DividedBox)
					{
						var container:XML = new XML(<container/>);
						container.@className = o is HDividedBox ? "HDividedBox":"VDividedBox";
						var d:Object = DividedBox(o).data;
						if(!d)
						{
							container.@width = 1;
							container.@height = 1;
						}
						else
						{
							container.@width = d['width'] ? d['width'] : 1;
							container.@height = d['height'] ? d['height'] : 1;;
						}
							
						XML(xmls[o.id]).appendChild(container);
						xmls[o.name] = container;
					}
					else if(o is ResourceComp)
					{
						var comp:XML = new XML(<comp/>);
						comp.@id = ResourceComp(o).title;
						comp.@width =  CompContainer(o.owner).cpw;
						comp.@height = CompContainer(o.owner).cph;
						comp.@className = "ResourceComp";
						XML(xmls[ResourceComp(o).title]).appendChild(comp);
					}
				});
				
				if(xml.children().length() == 0)
				{
					Alert.show("没有布局组件！");
					return;
				}
				
				var saveFile:FileReference = new FileReference();
				saveFile.save(xml,"我的名字.xml");
				trace("OK");
			}
			
			protected function onHDivider(event:DividerEvent):void
			{
				var first:CompContainer = CompContainer(HDividedBox(event.target).getElementAt(0));
				var last:CompContainer = CompContainer(HDividedBox(event.target).getElementAt(1));
				
				callLater(calHPercent,[first,last,HDividedBox(event.target)]);
			}
			
			private function calHPercent(first:CompContainer,last:CompContainer,h:HDividedBox):void
			{
				first.cpw = Math.round(first.width/(h.width-10)*100)/100;
				last.cpw = Math.round(last.width/(h.width-10)*100)/100;
				
				trace("first.cpw" + first.cpw);
				trace("last.cpw" + last.cpw);
				
				if(first.getElementAt(0) &&  first.getElementAt(0) is DividedBox)
				{
					var obj:Object = DividedBox(first.getElementAt(0)).data;
					if(!obj)
						obj = new Object();
					obj['width'] = first.cpw;
					DividedBox(first.getElementAt(0)).data = obj;
				}
				
				if(last.getElementAt(0) && last.getElementAt(0) is DividedBox)
				{
					var obj:Object = DividedBox(last.getElementAt(0)).data;
					if(!obj)
						obj = new Object();
					obj['width'] = last.cpw;
					DividedBox(last.getElementAt(0)).data = obj;
				}
				
//				DisplayUtil.walkDisplayObjects(first,function(o:Object):void
//				{
//					if(o is HDividedBox)
//					{
//						CompContainer(HDividedBox(o).getElementAt(0)).cx += offset;
//						CompContainer(HDividedBox(o).getElementAt(1)).cx = CompContainer(HDividedBox(o).getElementAt(0)).cx + CompContainer(HDividedBox(o).getElementAt(0)).width+2;
//						trace("NO..."+CompContainer(HDividedBox(o).getElementAt(1)).cx);
//					}
//				});
			}
			
			protected function onVDivider(event:DividerEvent):void
			{
				var first:CompContainer = CompContainer(VDividedBox(event.target).getElementAt(0));
				var last:CompContainer = CompContainer(VDividedBox(event.target).getElementAt(1));
				
				callLater(calVPercent,[first,last,VDividedBox(event.target)]);
			}
			
			protected function calVPercent(first:CompContainer,last:CompContainer,v:VDividedBox):void
			{
				first.cph = Math.round(first.height/(v.height-10)*100)/100; //做四舍五入
				last.cph = Math.round(last.height/(v.height-10)*100)/100; //做四舍五入
				
				trace("first.cph" + first.cph);
				trace("last.cph" + last.cph);
				
				
				if(first.getElementAt(0) &&  first.getElementAt(0) is DividedBox)
				{
					var obj:Object = DividedBox(first.getElementAt(0)).data;
					if(!obj)
						obj = new Object();
					obj['height'] = first.cph;
					DividedBox(first.getElementAt(0)).data = obj;
					
				}
				
				if(last.getElementAt(0) && last.getElementAt(0) is DividedBox)
				{
					var obj:Object = DividedBox(last.getElementAt(0)).data;
					if(!obj)
						obj = new Object();
					obj['height'] = last.cph;
					DividedBox(last.getElementAt(0)).data = obj;
				}
				
			}
			
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<s:RadioButtonGroup id="bg" itemClick="bgChanged(event)"/>
	</fx:Declarations>
	<s:layout>
		<s:HorizontalLayout/>
	</s:layout>
	<s:controlBarContent>
		<s:Label text="大屏视图制作系统 v0.1" fontSize="18" fontWeight="bold"/>
	</s:controlBarContent>
	<mx:Accordion width="200" height="100%">
		<mx:Tile label="背景" width="100%" height="100%">
			<s:RadioButton label="无背景" group="{bg}" selected="true"/>
			<s:RadioButton label="蓝色空间" group="{bg}"/>
			<s:RadioButton label="绿色背景" group="{bg}"/>
			<s:RadioButton label="天安门背景" group="{bg}"/>
		</mx:Tile>
		<mx:Tile label="组件" width="100%" height="100%">
			<s:Label text="资源统计" mouseDown="label1_mouseDownHandler(event)"/>
			<s:Label text="性能统计" mouseDown="label1_mouseDownHandler(event)"/>
			<s:Label text="告警统计" mouseDown="label1_mouseDownHandler(event)"/>
			<s:Label text="工程统计" mouseDown="label1_mouseDownHandler(event)"/>
		</mx:Tile>
		<mx:Tile label="效果" width="100%" height="100%"/>
		<mx:VBox width="100%" height="100%" label="信息">
			<s:Form>
				<s:FormItem>
					<s:Label text="名称："/>
					<s:TextInput width="100%"/>
				</s:FormItem>
			</s:Form>
			<s:Button label="保存" click="saveClickHandler(event)"/>
		</mx:VBox>
	</mx:Accordion>
	<base:CompContainer id="body" width="100%" height="100%" backgroundColor="white"
						dragEnter="body_dragEnterHandler(event)"
						dragDrop="body_dragDropHandler(event)">
	</base:CompContainer>
</s:Application>