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