这篇文章是基于上篇文章
只是稍微复杂一点而已...
废话少说了,看代码:
package com.emavaj.myfriend.view{
import flash.events.MouseEvent;
import mx.controls.Alert;
import mx.controls.Button;
import mx.events.DragEvent;
public class FriendIcom extends Button {
/**添加监听.*/
public function FriendIcom() {
super();
this.width = 100;
this.height = 100;
this.addEventListener(MouseEvent.MOUSE_DOWN,startDragHandler);
this.addEventListener(MouseEvent.MOUSE_UP,endDragHandler);
}
/**启动拖拽.*/
private function startDragHandler(event:MouseEvent):void {
(event.target as Button).startDrag();
}
/**停止拖拽.*/
private function endDragHandler(event:MouseEvent):void {
(event.target as Button).stopDrag();
}
}
}
这个就是视图上的元素类,它自动启用了拖拽
(至于这个拖拽的写法,我就不学网上那些Drag什么的Event了,因为我不需要响应那么多事件
所以用了简单的MouseDown&Up的方法)
PS:用MouseClick你永远做不了
下面是布局管理基类:
package com.emavaj.myfriend.layout{
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
import mx.collections.ArrayCollection;
import mx.core.UIComponent;
import mx.effects.Move;
/**布局管理器*/
public class LayoutManagerBase {
/**当前的父容器.*/
protected var father:UIComponent;
/**数据来源.*/
protected var xml:XML;
/**存储*/
protected var list:ArrayCollection = new ArrayCollection();
/**构造函数*/
public function LayoutManagerBase() {
}
/**创建元素.*/
public function createElem(file:String, father:UIComponent):void {
this.father = father;
var request:URLLoader = new URLLoader();
request.addEventListener(Event.COMPLETE,startCreate);
request.load(new URLRequest(file));
}
/**开始创建.*/
public function startCreate(event:Event):void {
}
/**重置数据.*/
public function restart():void {
}
/**移动效果.*/
protected function moveEffect(target:UIComponent,targetX:int,targetY:int):void {
if (target.x != targetX || target.y != targetY) {
var move:Move = new Move(target);
move.xTo = targetX;
move.yTo = targetY;
move.play();
}
}
}
}
这个类其实应该是个抽象类...可是...似乎...好像 AS3没有...
所以...子类只能用override了
下面是子类,也是真正的管理类:
package com.emavaj.myfriend.layout{
import com.emavaj.myfriend.view.FriendIcom;
import flash.events.Event;
import mx.controls.Alert;
/**图标管理器.*/
public class IcomLayoutManager extends LayoutManagerBase{
/**单例.*/
private static var manager:IcomLayoutManager;
/**另一种状态.*/
private var otherXML:XML;
/**状态标志.*/
private var witchState:Boolean = true;
/**构造函数.*/
public function IcomLayoutManager(){
super();
if (manager!=null) {
throw Error("不能存在多个实例!");
}
}
/**获取实例.*/
public static function getInstance():IcomLayoutManager {
if (manager==null) {
manager = new IcomLayoutManager();
}
return manager;
}
/**创建方法.*/
override public function startCreate(event:Event):void {
this.xml = new XML(event.target.data);
var i:int = 0;
for each (var elem:XML in xml.buttons.elements()) {
var temp:FriendIcom = new FriendIcom();
temp.x = elem.x;
temp.y = elem.y;
temp.id = "C" + i;
temp.label = "BUTTON" + i;
this.father.addChild(temp);
this.list.addItem(temp);
i++;
}
}
/**重置数据.*/
override public function restart():void {
/**保存当前状态.*/
this.otherXML = <layout><buttons/></layout>;
var buttons:XMLList = otherXML.buttons;
for (var i:int = 0; i < this.list.length; i++) {
var temp:FriendIcom = this.list.getItemAt(i) as FriendIcom;
buttons.appendChild(<button><x>{temp.x}</x><y>{temp.y}</y></button>);
}
//----测试-----Alert.show(this.otherXML);
/**调整位置.*/
this.moveTo(this.xml);
}
private function moveTo(data:XML):void {
var i:int = 0;
for each (var elem:XML in data.buttons.elements()) {
var temp:FriendIcom = this.list.getItemAt(i) as FriendIcom;
this.moveEffect(temp,elem.x,elem.y);
i++;
}
/**标志改变.*/
this.witchState = !this.witchState;
}
public function switchState():void {
if (this.otherXML!=null) {
if (witchState) {
this.moveTo(this.otherXML);
} else {
this.moveTo(this.xml);
}
}
}
}
}
做了一下XML的读取了存储操作
过程大概是这样的
首先有个XML是存储各个元素的坐标,然后初始化的时候读入...
当各元素状态改变了,需要重置的时候
就以当前各元素位置构造一个XML存储当前状态
以便之后切换
调用代码:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:view="com.emavaj.myfriend.view.*"
layout="absolute" minWidth="955" minHeight="600"
creationComplete="initApp()"
>
<mx:Script>
<![CDATA[
import com.emavaj.myfriend.layout.IcomLayoutManager;
import com.emavaj.myfriend.view.FriendIcom;
/**初始化.*/
public function initApp():void {
IcomLayoutManager.getInstance().createElem("com/emavaj/myfriend/data/iconlayout.xml",main);
}
/**重置数据.*/
public function restart():void {
IcomLayoutManager.getInstance().restart();
}
/**切换状态.*/
public function switchState():void {
IcomLayoutManager.getInstance().switchState();
}
]]>
</mx:Script>
<mx:ViewStack width="950" height="600">
<mx:Canvas width="100%" height="100%" id="main" fontSize="14">
<mx:Button x="884.8" y="563.8" label="重置" click="restart()"/>
<mx:Button x="791.9" y="563.8" label="状态切换" click="switchState()"/>
</mx:Canvas>
</mx:ViewStack>
</mx:Application>
效果在附近...
PS : 其实就是练练手XML和拖拽,还有一些效果的使用...