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运行的效果: