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