TWaver图形之道（七）TWaver开发流程
TWaver开发流程
TWaver是一种前台解决方案，它的地位在系统多层结构的UI层，开发的过程通常是：数据采集，数据转化，视图关联，界面交互，业务操作，然后重复这个过程。
下面用代码来说明这个过程，以TWaver Flex为例：
整体结构
首先看示例代码的整体结构，创建了一个拓扑图组件，设置好宽高布局，在程序初始化完成后，调用init()函数，注册了两个图片，然后进行网元数据的填充，对于实际应用可能是通过一次HTTPService请求，得到数据后再进行数据的添加。
TWaver Flex开发流程 - 示例代码
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:twaver="http://www.servasoftware.com/2009/twaver/flex"
pageTitle="Development Process" applicationComplete="init()">
<mx:Script>
<![CDATA[
import component.InputDialog;
import twaver.*;
import twaver.network.Network;
import twaver.network.interaction.InteractionEvent;
import twaver.network.layout.AutoLayouter;
[Embed(source="images/device.png")]
public static const deviceImage:Class;
[Embed(source="images/router.png")]
public static const routerImage:Class;
private var box:ElementBox;
private function init():void{
Utils.registerImageByClass('router', routerImage);
Utils.registerImageByClass('device', deviceImage);
...//代码片段A
}
...//代码片段B
]]>
</mx:Script>
<twaver:Network id="network" backgroundColor="0xFFFFFF" width="100%" height="100%"/>
</mx:Application>
数据填充
下面看如何添加网元数据，代码片段A中模拟了开发流程的步骤，分数据采集；数据转换；网元布局；添加交互四步骤：
首先是数据采集，这里模拟了一堆设备和关系的集合，真实系统数据通常从后台获取而来。模拟数据包含业务属性，比如名称，图标，性能参数等，需要转换成TWaver网元对象才能在拓扑图中呈现；
然后进行数据转换，将这些模拟的数据转换成TWaver的网元对象，设备转换成Node类型，关系转换成Link类型，并添加到ElementBox数据容器；
接下来我们执行了一次自动布局，将网元位置分布开，当然你也可以使用后台存储的位置信息；
最后一步添加交互，双击网元时，弹出修改网元名称的对话框，模拟的是数据修改的一个过程，真实系统中，可能需要作入库存储操作。
box = network.elementBox;
//数据采集
var devices:Array = getDevicesFromOSS();
var relationships:Array = getDevicesRelationshipFromOSS();
//数据转换
translateToTWaverNode(box, devices, relationships);
//网元布局
var layouter:AutoLayouter = new AutoLayouter(network);
layouter.animate = false;
layouter.doLayout(Consts.LAYOUT_SYMMETRY);
//添加交互
network.addInteractionListener(function(evt:InteractionEvent):void{
if(evt.kind != InteractionEvent.DOUBLE_CLICK_ELEMENT){
return;
}
var element:IElement = evt.element;
//InputDialog是定制的输入对话框组件，详见
InputDialog.show(network, "Rename", element.name, function(text:String):void{
element.name = text;
//入库操作
}, evt.mouseEvent.stageX, evt.mouseEvent.stageY);
});
TWaver Flex开发流程 - 代码片段A
上面的用到了一个自定的Flex控件InputDialog.MXML，继承于TitleWindow，是一个模式对话框，包含一个文本输入框和一个确认按钮，使用上类似Java Swing的JOptionPane.showInputDialog(...)
InputDialog.show(network, "Rename", element.name, function(text:String):void{
element.name = text;
//入库操作
}, evt.mouseEvent.stageX, evt.mouseEvent.stageY);
TWaver Flex开发流程 - InputDialog.MXML使用示例
InputDialog.MXML代码如下：
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:fx="<a href="http://ns.adobe.com/mxml/2009">http://ns.adobe.com/mxml/2009</a>"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" >
<fx:Script>
<![CDATA[
import mx.controls.Text;
import mx.managers.PopUpManager;
var callback:Function = null;
// Event handler for the OK button.
private function onOK():void {
if(this.callback){
this.callback(inputText.text);
}
PopUpManager.removePopUp(this);
}
private function init(title:String, value:String, callback:Function):void{
this.title = title;
inputText.text = value;
this.callback = callback;
}
public static function show(frame: DisplayObject, title:String, value:String, callback:Function, x:int = 0, y:int = 0):void{
var dialog:InputDialog = InputDialog(PopUpManager.createPopUp( frame, InputDialog , true));
if(x && y){
dialog.x = x;
dialog.y = y;
}else{
PopUpManager.centerPopUp(dialog);
}
dialog.init(title, value, callback);
}
]]>
</fx:Script>
<mx:HBox>
<mx:TextInput id="inputText" width="100%"/>
</mx:HBox>
<mx:HBox horizontalAlign="right" defaultButton="{okButton}">
<mx:Button label="OK" id="okButton" click="onOK();" />
<mx:Button label="Cancel" click="PopUpManager.removePopUp(this);"/>
</mx:HBox>
</mx:TitleWindow>
TWaver Flex开发流程 - InputDialog.mxml
下面是示例代码片段B的内容，包含模拟数据和转换成TWaver网元类型的代码处理：
private function getDevicesFromOSS():Array{
return [{name:'R1', type: 'router'}, {name:'R2', type: 'router'}, {name:'S1', type: 'device'}, {name:'S2', type: 'device'}] ;
}
private function getDevicesRelationshipFromOSS():Array{
return [{name:'1l', from:'R1', to:'R2'}, {name:'2l', from:'R1', to:'S2'}];
}
private function translateToTWaverNode(box:ElementBox, devices:Array, relationships:Array):void{
devices.forEach(function(device:*, index:int, arr:*):void{
var node:Node = new Node(device.name);
node.name = device.name;
node.image = device.type;
box.add(node);
});
relationships.forEach(function(relationship:*, index:int, arr:*):void{
var link:Link = new Link(box.getElementByID(relationship.from) as Node, box.getElementByID(relationship.to) as Node);
link.name = relationship.name;
box.add(link);
});
}TWaver Flex开发流程 - 代码片段B运行的效果：
