TWaver 图形界面之道：序言与目录

TWaver 图形界面之道

作者序

最早我按 TWaver 的功能点拟定了提纲，在完成第一章后，遇到了两个问题：是写整

个 TWaver 还是只介绍 TWaver Java？与开发手册和培训文档的内容是否重复了？

于是我停下来思考，这本书究竟应该说点什么？如果只是 TWaver 的使用，看我们的

开发手册，参加我们的培训会更合适，我希望说点特别的东西，更有价值的东西，不只是为

TWaver 用户，更包括所有从事 GUI 开发的人和团队，提供对产品设计有借鉴意义的内容，

于是我修改了提纲，精简了 TWaver 功能点的内容，增加了更多 TWaver 设计思想与产品

进化的历史，结合当下各种 GUI 技术，讨论其设计理念与发展趋势，这会使得本书的完成

更富挑战性，原本只需要按部就班填充内容的，现在需要创造力和思考，但一切也变得更有

意义。

回过头来看前面的两个问题，本书将对 TWaver 整体介绍，覆盖各个产品分支，简化

组件使用的细节，增加更多 GUI 扩展技术的讨论。

Sam Sha – 2011 年 10 月 8 日星期六

下面是拟定目录，共二十一篇，陆续发布

目 录

TWaver 介绍.................................................................................................................................. 1

TWaver 是什么？ .................................................................................................................. 2

TWaver 产品家族 .................................................................................................................. 8

TWaver 如何获取 ................................................................................................................ 12

TWaver 基础................................................................................................................................ 17

Hello TWaver ..................................................................................................................... 17

1

TWaver 介绍

TWaver 是一款图形界面组件产品，电信行业的朋友用它开发网管图形界面，非电信行

业的用它制作的表格，指标图表，流程图。TWaver 让界面开发变得简单，几行代码就可以

实现组件与数据的绑定，组件与组件间的同步交互。TWaver 提供多种界面组件，支持多种

编程语言，这意味着无论你使用 Java，.NET，Flex，还是 JavaScript，都可以选择 TWaver

作为图形界面的解决方案。

TWaver 的图形组件

TWaver 最核心的组件是的拓扑图，以图形化的方式直观展示各种设备、线路甚至逻辑

元素的分布和状态，具有着丰富的表现形式：气泡信息，染色和边框，告警渲染，动画效果

等等。围绕着拓扑图组件，TWaver 还提供了传统的通用组件，比如树组件、表格、树表格、

属性页、图表（饼图，线图，柱状图„„）等等。

TWaver 的数据模型

对于终端客户，所看到的 TWaver 是各种窗体和控件，但这些并不是 TWaver 的全部，

对开发者而言，TWaver 最核心的是它统一的数据模型和设计模式。TWaver 中有一个名为

DataBox（TWaver Java 中的 TDataBox，TWaver Flex 和 TWaver .NET 中的

DataBox<>，ElementBox）的数据容器，负责管理图形元素，就像 HTML 中的 DOM 树、

Java Swing 中的 TableModel、ListModel 那样，DataBox 管理着所有的图形数据，由

它驱动到所有的 TWaver 视图组件。从 MVC设计模式的角度看，DataBox 数据容器扮演的

是控制器（Controller）角色，是一个中间人，协调基本数据与视图界面的通讯和交互。如

果把 TWaver 比做人，那么 DataBox 就是人的大脑，各个组件就是它不同的侧面，人的喜

怒哀乐都由大脑控制和反馈。

2

TWaver 是什么？

用一句话概括：TWaver 是一种高效轻量的图形界面解决方案，提供多种语言开发平台，

关注于电信网管行业，但不局限于电信行业。

TWaver 提供图形界面解决方案

TWaver 是一款中间组件产品，专注于图形组件，需要二次开发，提供图形界面一站式

解决方案。

3

关注于图形界面

TWaver 关注于图形界面，不是后台技术，也不是系统集成，我们的目标是让枯燥冰冷

的数据，直观漂亮的展现。大家看到 TWaver 的第一眼，就是一系列图形组件，包括拓扑

图，树，表格，属性页，图表„„TWaver 研究界面的每一个像素，关心细微之处的呈现。

TWaver 提供了多种图形元素，比如节点，连线，分组，跟随者，附件等等，每一种图

形都具有数十种样式属性，设置不同的样式，实现丰富的呈现效果。以网元标签为例，它是

节点的一种附件元素，一个小小的标签可以设置位置，对齐方式，颜色，字体，背景色，渐

变色填充，边框，HTML 支持，气泡形式等诸多属性。由此多个附加元素组合而成的节点对

象，就可以展现更丰富的信息，和呈现效果。

4

图形数据模型

TWaver 所有的数据模型都围绕图形，TWaver 网元主要是图形元素，而非业务元素，

如 TWaver Java 中的 Rack，Card，Port 虽然代表可某类业务类型，但具体的业务属性

还需要用户去添加，TWaver 提供的多是图形属性，因此为了让它变得丰满，满足实际业务

需要，我们在实际使用时，需要另外封装一层，或者追加更多的业务属性，以“Port”元素

为例，描述设备端口，twaver.Port 类中并没有端口流量，传输速率，几针几口，双工模式

之类的属性，而只是定义了端口图片，端口边框，端口所在面板等等，这些都是界面呈现需

要的。也正因为如此，在 TWaver Flex 和 TWaver .NET 版本中，连 Port 这样的对象也

不存了，只是在 Demo 中给与体现。

例外的是 Alarm 元素，在 Alarm 对象上你可以找到告警时间，告警原因属性，这些在

界面上不一定需要， TWaver 提供了一套告警机制，定义了告警对象，告警级别，告警状

态，告警统计，告警模型类， 这些正是 TWaver 为电信网管行业的特殊扩展。

需要二次开发

TWaver 不是一款最终应用软件，需要进行二次开发，就像积木搭建房子，TWaver

提供漂亮的积木，协助用户搭建自己的高楼大厦。

TWaver 的直接客户是谁？

TWaver 的直接客户是软件集成商，面向的是开发人员，我们乐于也善于与开发人员打

交道，TWaver 团队以开发人员为主，这也使得我们与客户有更多共同语言。因为 TWaver

不是最终的应用软件，其价值需要由我们的客户来体现，经过你们的二次开发，TWaver

才能有机会展现在用户的桌面和终端界面之上。

同时 TWaver 是一款商业软件，我们出售许可和服务，提供文档，培训和技术支持，为用

户提供一站式的图形界面解决方案，让我们的客户能在更短的时间内作出更好的界面效果。

TWaver 组件具备高效轻量的特点

程序界面，没人喜欢臃肿和缓慢，程序用户体验的第一要素是流畅，如果界面布局缓慢，

动画假死，程序庞大，没有人愿意去使用。优秀的后台，如果让界面拖了后腿，看不到背后

的故事，令人不禁惋惜，所以 TWaver 一直遵循高效轻量的设计理念。

5

高效

高效主要从界面承载能力来体现，TWaver 中用呈现的节点和连线数量作为评判。因为

编程语言的差异性，不同语言平台有不同的性能表现：TWaver Java 拓扑图组件支持上万

数量级节点的呈现，表格组件支持十万行数据。TWaver Flex 和 TWaver .NET 稍弱，建

议 Flex 控制在 2000 数量级，.NET 为 5000。

下面的三张性能分析报表分别反映了 TWaver Java/Flex/.NET三款产品的性能特点，

完全使用 TWaver 自己的图表组件制作的。可以看到 TWaver Java 中加载 8000 节点和

1600 条连线，拓扑图在一秒钟能完全呈现；TWaver Flex 下 2000 节点和 400 连线总计

渲染时间为 2.2 秒；TWaver .NET Silverlight 运行环境中 4000 节点和 800 连线呈现时

间约 1.4 秒。

6

轻量

TWaver 的小巧也是其受欢迎的原因之一，对于一款中间组件，控制软件体积与女生控

制体重一样重要。TWaver 核心包一直控制着较小的体积，TWaver Flex 和 TWaver .NET

的核心类库大小约 1MB，TWaver Java 核心包（twaver.jar）稍微大些，为 1.8MB。体

积虽小，内容丰富，以 TWaver Java 为例，twaver.jar 中有了十几种图形和网元类型，

提供了树，表格，属性页，拓扑图，图表等多种组件，还支持数据的导入导出，图片导出，

SVG 导出功能。

关注于电信网管行业，但不局限于此

电信网管行业应用

TWaver 一直关注于电信网管行业，针对电信行业封装了相关的业务模型，比如设备面

板，子网，总线，告警机制等等。从 05 年到现在，我们的客户大多是电信行业，这为我们

积累了大量行业经验，积攒了很多的客户案例和解决方案。很多时候客户引领我们方向，

TWaver 的完善得益于客户千奇百怪的需求，TWaver 很多示例都是客户需求的成果，感谢

客户让我们成长，同时，TWaver 也将这些经验回馈给客户，用心的交流，手把手的支持，

就像两种思想的对话，让彼此都能受益。

7

其他行业的应用

虽然 TWaver 更关注于电信行业，但作为基本的图形界面呈现需求，推广到其他领域

是完全可行的。在不同行业，基本的图形界面元素具有通用性，拓扑图也可以应用于电力，

石油，资源等领域，而表格，树，图表的应用场景更加广泛，是通用的组件。TWaver 在其

他行业也有精彩的案例，下图中的 ERP 系统广泛使用了 TWaver 的拓扑图组件，表格，图

表：

支持多种语言平台

TWaver 支持多种语言平台，目前提供了 Java，Web，Flex，.NET 四大分支，此外

还有 TWaver GIS 扩展分支，TWaver GIS 分支在不同语言平台有不同的扩展包实现，目

前包括：TWaver GIS for Java，TWaver GIS for JS，TWaver GIS for Flex。

未来我们将提供HTML5的版本以及TWaver 3D产品，这两个产品已经在小范围试用，

不久将会推广。

8

TWaver 产品家族

TWaver Java

TWaver Java 是 TWaver 产品家族中历史最悠久、功能最强大、应用最广泛的一个分

支。TWaver Java 基于 Java 2D 和 Java Swing 技术，相比于 JS、Flex、Silverlight、

HTML5 这些现在热门的 Web 前段技术，关注 Java Swing 技术的越来越少，但从技术的

成熟性和运行效率考虑，不太在乎 Web 化，那么 TWaver Java 将是最佳选择，因为 Java

版本是目前 TWaver 所有产品分支中运行效率最高的，而且 Java 具有良好的跨平台支持，

也可以嵌入到网页中，部署和发布都很方便。

TWaver Web

Web 2.0 的时代，程序 Web 化大势所趋，即使是相对保守的企业级应用，也追求全

面的 Web 化，于是 TWaver Web 孕育而生。最早我们将 TWaver Java 界面输出 VML 图

形（那时候 IE 一统天下），后来改用了更加标准化的 SVG 方案，转换的工作充满着挑战，

但当我们将所有 TWaver Java 的 demo 输出，效果不分伯仲时，我们知道一切努力都是

值得的。后台输出图形，前台 JavaScript 交互，动态请求图形数据，更新界面，这些正是

TWaver Web 的设计思想和运行模式。

9

TWaver Flex

TWaver Web 解决了大量客户的需求，但技术在发展，RIA（Rich Internet

Application）开始流行，Adobe Flex 是 RIA 的主流技术，TWaver 团队与时俱进，积极

寻求 Flex 解决方案。

Flex 使用 MXML 和 ActionScript 语言开发，ActionScript 源于动态脚本语言，兼具

动态语言和静态语言的特性，发展到 Flex2，其实际使用已经很接近 Java，因此，有了 Java

和 JavaScript 的基础，学习 Flex 变得容易，经过两年的研发，TWaver Flex 产品诞生，

成为客户最为关注的产品分支。

TWaver .NET

RIA的另一种解决方案是Silverlight，Java阵营的最大竞争者是.NET阵营，所以.NET

成为一块不得不重视的蛋糕。TWaver Flex 开发的同时，我们也在对.NET 以及 Silverlight

技术预言，预言的结果令团队大受鼓舞：Silverlight 与 Flex 有着惊人的相似性。于是在

TWaver Flex 正式发布不久，TWaver .NET 也开始提供试用版本，TWaver .NET 完全依

照 TWaver Flex 的设计模式和命名，甚至示例也是完全照搬，软件世界殊途同归真是件大

好事，让同一种思想在多个平台落地开花，带来了更多选择。

当然，TWaver .NET 并非简单的 Copy，它有自己的特点，TWaver .NET 分两个版

本：TWaver .NET for WPF、TWaver .NET for Silverlight，两者共用大部分代码，另

外的那部分通过预处理条件加以区分，TWaver .NET以 Silverlight 为标准兼容 WPF代码。

相比 Flex 版本，.NET 版本中使用更多 C#高级语言特性，泛型、get/set、委托、事件、

Lambda 表达式等等，此外.NET 版本有很高的运行效率，是 Flex 版本的两倍以上，这也

说明了平台移植的重要性。

各种编程语言和 UI 技术

不同的编程语言有不同的特性，适用于不同的应用场景，有各自的特点：有的性能高，

有的跨平台，有的适合 Web 应用，下面介绍各种编程语言和 UI 技术的特点和适用场景：

Java

Java 程序适合企业桌面应用，成熟稳定，跨平台，也能嵌入浏览器（虽然 Applet 显

得笨重了点），Java 是面向对象的编程语言，简单易学，拥有众多的熟练的程序开发人员的

支持；

10

Swing

Java 最早的图形界面技术是 AWT，AWT 依赖原生平台，AWT 控件由本地操作系统对

应的控件生成，不同操作系统下效果完全不同，这违背了 Java 跨平台支持的初衷，于是就

有了 Swing 技术。Swing 完全由 Java 写成，具有良好的设计模式，支持切换 LookAndFeel

改变程序外观，是 Java 基础类库的一部分，是主要的 Java GUI 工具包，TWaver Java

基于 Swing 技术；

JavaScript

JavaScript 技术适合 Web 应用环境，JavaScript 语言很灵活，快速开发，无需编译，直

接运行与调试，一个熟练的 JavaScript 程序员可以随心所欲的编写代码，但这也带来

JavaScript 代码难以维护的问题，JavaScript 语言入门容易，精通难，TWaver Web 前

端交互使用 JavaScript+SVG+HTML 技术，TWaver HTML5 使用 JavaScript + HTML5

技术；

SVG

SVG 是一种文本矢量图形标准，全称：Scalable Vector Graphics，可伸缩矢量图像，

SVG 本身是 XML 格式，可与脚本语言（如 JavaScript）混合使用，这种 XML 与 JS 的混

用方式，被后来的Flex，WPF与Silverlight承袭，后者是现在新潮的UI技术，而前者（SVG）

则是十多年前的产物，这点也说明了 SVG 设计的强大，目前大多数浏览器都已支持 SVG，

TWaver Web 使用 SVG 呈现拓扑图界面；

Flex

Flex 是 Flash 发展的产物，Flash 是一种制作动画的技术，采用了场景，画布，帧，

时间线的设计，这些与窗体，按钮，表格这样的标准控件格格不入，Flex 的发展很有趣，

最早是一种 J2EE 的应用，JSP 标签库，将 MXML 和 ActionScript 脚本动态的编译成 Flash

文件，在浏览器中呈现，这个时期的 Flex 还是做动画，到后来界面上需要标准控件，于是

就出现了按钮，面板，窗体等等，加上前后台通讯，数据传输，最后成了富客户端应用的完

整解决方案。Flex界面延续了 Flash的图形绘制基础，Flex程序与普通的 Flash文件不同，

Flex 只有两帧，第一帧是启动界面，第二帧是程序界面，此后程序按第二帧的频率（默认

是 24 帧每秒）启动定时器，周期性的重绘，也就是 Flex 组件的无效-生效周期；

11

.NET Framework

.NET Framework 是微软公司的一个软件框架，主要运行于 Windows 操作系统，它

包含一个通用语言运行器（Common Language Runtime，简称 CLR）和大量的类库

（Framework Class Library，简称 FCL），支持多种编程语言，C#，VB.NET，VC++.NET

等等；

C#

C#是微软公司专门针对.NET 框架而设计的编程语言，它借鉴了其他编程语言，尤其

是 Java 语言，通常我们认为 C#是一种面向对象的编程语言，事实也确实如此，准确的说

C#是一种多范型的编程语言，包括强类型式，命令式，声明式，函数式，泛型，面向对象

和面向组件的编程方式，TWaver .NET 可以使用 C#语言开发；

WPF

全称：Windows Presentation Foundation，为 Windows 软件提供用户界面的一种

图形软件系统，自.NET Framework 3.0被引入。相比旧的 GDI 系统，WPF 使用了 DirectX

硬件加速，渲染效率得以提高，此外 WPF 采用 XML 配置和代码编写结合的编程方式，这

点与 Flex 相似，WPF 是.NET Framework 推荐使用的主流界面系统技术；

Silverlight

Silverlight 是一种运行于浏览器上的客户端技术，与 Flash 技术相似，支持多种操作

系统，多种浏览器，多种设备。Silverlight 是简化版的.NET，或者说是简化版的 WPF，

它包含一个核心呈现框架（WPF 的一个子集），.NET 框架中的 Silverlight 部分 (.NET 框

架的一个子集)，安装器和更新器；

HTML5

HTML5 是第五版的 HTML 标准，相比 HTML4，增加了一些新的标签，比如

<canvas><audio><video>等，此外还提供了更多 API，比如 Canvas 2D API，拖拽

支持，跨文档消息，本地存储，WebSocket 等。当然并不是所有这些特性都被浏览器支持，

不同浏览器支持程度也有所不同，HTML5 技术要求更现代的浏览器，IE9+，Safari，

Chrome，Firefox，Opera„„.IE6,7,8 可以考虑安装 chrome frame 插件。

12

TWaver 如何获取

TWaver 是一款商业软件，面向企业用户，出售软件授权，提供支持服务，此外对于非

商业用途的项目（ 譬如院校，研究所的一些研究性课题），会给于优惠和减免。

要了解 TWaver 产品，可以先从我们的在线产品示例开始，这能直观全面的了解到

TWaver 产品的特性，接下来你可以申请产品试用，借助试用包中的类库和资料，可以开始

技术预言和原型搭建，期间可多多与我们联系，以便得到及时的帮助，如果通过技术方案通

过，确定使用 TWaver，这时需要购买我们的开发许可，以便我们提供更多的技术支持以及

现场培训，接下来开发完成，项目正式上线时，你需要购买运行许可，我们为产品到运行和

维护提供保障，运行许可的费用按项目的客户端或者服务器数量而定，详情请与 TWaver

商务人员交流。

TWaver 试用申请

首先上我们的官方网站（www.servasoftware.com），注册一个账号，然后进入

TWaver 产品专栏（http://www.servasoftware.com/twaver.php），选择产品（TWaver

Java 或者 TWaver Web „„），点击下载，随后填写相关资料，提交申请。通常我们会在

24 小时内给与答复，如果你嫌注册麻烦，急着试用，可以将你的申请直接发送到

sales@servasoftware.com，注明申请的产品名（Java，Flex 还是.NET 等），留下你的

公司信息与联系方式。

TWaver 许可授权

TWaver 有三种许可：试用许可，开发许可、运行许可。

试用许可

可免费申请，用于前期预言或技术选型阶段，组件界面带有”TWaver Evaluation

Version”水印，限非商业使用，在线申请的产品都属于试用许可；

13

开发许可

用于项目实际开发阶段，界面初始无水印，两个小时后会显示水印，TWaver Java 版

本会显示许可信息对话框。

开发许可需要付费，购买 TWaver 开发许可意味着你可以获得现场培训，协助开发，

远程支持的服务，以帮助客户更快速的完成图形界面工作，为客户节省宝贵的时间和开支；

运行许可

用于项目实际运行阶段，无水印，也不会每隔两小时自动显示许可信息对话框，运行许

可需要付费，根据产品类型和项目的实际情况而定，比如客户端数量，服务端数量，项目维

护时间等等，购买运行许可为你的项目维护提供更多保障。

如何查看 TWaver 产品的许可信息？

可以通过快捷键查看许可信息，不同产品分支使用不同的快捷键，TWaver Java 版本

中，可在 Swing 界面使用 Ctrl+Shift+T 快捷键查看，TWaver Flex 版本可在 Network

界面使用 Ctrl+Shift+T 快捷键，TWaver .NET 使用 Ctrl+Shift+L。

TWaver 技术服务

TWaver 提供产品授权和技术支持，TWaver 本身不是最终产品，需要二次开发，所以

技术支持是我们的核心价值体现，我们的试用包中通常就包含了丰富的学习内容，此外

TWaver 还提供在线的资料，wiki，中文社区，在线视频，远程培训，在线 MSN 等等，这

些东西逐渐丰富，相信会让 twaver 学习变得更加容易：

14

TWaver 资料

学习资料主要包括三部分：开发手册，API 文档，示例代码，这些东西在产品包中都可

以找到：

我们还有一套在线的 WIKI 系统

（http://doc.servasoftware.com/dashboard.action），包含各个产品分支的文档，并

不断的更新：

15

此外 TWaver 的中文社区（twaver.servasoft.com）和技术论坛

（twaver.servasoft.com/forum）也积累了大量的案例和问题答疑；

中文社区 – twaver.servasoft.com

TWaver 的中文社区于 2010 年 7 月正式上线，包含 博客和论坛，现已成为 TWaver

与客户最重要的交流平台。

TWaver 博客目前有一百多篇文章，以技术文章为主，内容包括：客户案例，功能使用，

示例介绍，相关技术，新功能等，每一篇文章都精雕细琢，图文并茂，其中一些高质量的文

章被网友们转载，拥有上万的点击量，成为行业内必读的技术文章。

TWaver 博客不只是 TWaver 技术，还关注所有图形界面相关的话题，RCP，RIA，

HTML5，Mobile，图像处理等等都是我们关心的内容，如果你想了解图形组件技术，TWaver

博客是不错的选择。

技术论坛 – twaver.servasoft.com/forum

TWaver 开发手册和博客文章不可能包含所有的问题，但社区论坛却能包罗万象，论坛

中你可以咨询 UI 相关的技术问题，每个问题都会得到 TWaver 团队的及时解答，问题不过

16

夜是论坛的原则，即使是节假日，也会有团队成员孜孜不倦的义务回答问题。

P.S. 多使用论坛的搜索功能，尽量自己先找答案，此外论坛有社区规范，违规者，警

告，拉黑，后果很严重哦！

公开课程

借助 Webex 远程会议系统，TWaver 定期进行免费的公开课程，内容包括 TWaver

各个产品培训，技术专题，新版本推介，示例介绍，TWaver 公开课程是一个与 TWaver

开发人员直接交流的平台，视频，语音，PPT 让交流变得丰富。公开课程信息会在中文社

区发布，并通过 TWaver 开发者邮件列表推送给订阅者。

邮件列表 – twaver-news@servasoft.com

TWaver 开发者邮件列表是获取 TWaver 咨询的一个窗口，订阅邮件列表可发送邮件

到：twaver-news-subscribe@servasoft.com，退订可发送邮件到

twaver-news-unsubscribe@servasoft.com，TWaver 开发者邮件列表推送的内容包括：

公开课安排，技术文章推荐，问题解答集锦，最新示例代码，新版本发布等，TWaver 开发

者邮件列表将保证高质量的技术内容与大家分享。

技术答疑邮箱 – tw-service@servasoft.com

除了在 TWaver 论坛上提问外，TWaver 技术问题还可以通过邮件咨询，来信请注明

部门和个人信息，将问题讲述清楚，图片，代码能贴的全给贴上，以方便答疑。

在线答疑 – MSN: twavercn@hotmail.com

这是 TWaver 历史最悠久的在线答疑平台，如果你使用 MSN，添加

twavercn@hotmail.com 好友，就可以在线聊天了，虽然其地位逐渐被论坛，邮件和微博

所取代，但一对一的聊天还是有其自己的特色，MSN上会有人轮流值班，因为客户较多，所

以私人问题就不要问多了。

17

其他：

官方主页：http://www.servasoftware.com

TWaver 产品主页：http://www.servasoftware.com/twaver.php

TWaver 中文社区：http://twaver.servasoft.com

TWaver 开发论坛：http://twaver.servasoft.com/forum

TWaver 在线文档：http://doc.servasoftware.com

TWaver 微博：http://weibo.com/twaver

TWaver 视频：http://u.youku.com/twaver

笔者个人博客：http://ycoder.com

TWaver 基础

Hello TWaver

本章将以一个入门示例开始，介绍 TWaver 的基本使用，设计思想以及开发流程，如

果你已经熟悉了 TWaver 的使用，熟悉了 TWaver 的 MVC 的设计模式，可跳过本章节。

以一个经典示例开始，创建两个节点和一条连线，并在不同组件中展现，然后我们会追

加告警，观察界面的变化。

开发环境

TWaver 有多个产品分支，不同的编程语言有不同的开发环境，比如 TWaver Java 支

持 JDK1.4+，TWaver Web 支持各主流浏览器，TWaver Flex 要求 Flex SDK 3.4.2+，

TWaver .NET 需要.NET Framework 3.5+，Silverlight 3.0+，而 HTML5 版本要求比

较现代的浏览器。不同的语言开发平台也不同，这些在我们的开发手册中都有介绍，本书不

18

再重复：

TWaver Java 入门：

http://doc.servasoftware.com/pages/viewpage.action?pageId=18415915

TWaver Web 入门：

http://doc.servasoftware.com/pages/viewpage.action?pageId=19010174

TWaver Flex 入门：

http://doc.servasoftware.com/pages/viewpage.action?pageId=16547882

TWaver .NET 入门：

http://doc.servasoftware.com/pages/viewpage.action?pageId=19008968

TWaver HTML5 入门：

http://doc.servasoftware.com/pages/viewpage.action?pageId=20776443

以 TWaver Java 为例

首先我们需要 twaver.jar，这可以在 TWaver Java 试用包中找到，关于如何 TWaver

的申请可以阅读前面的章节：“TWaver 如何获取”。

创建一个拓扑图

我们使用 Eclipse 开发工具，新建一个 Java 应用程序工程，引入 twaver.jar，创建

HelloTWaver 类，编写下面的代码：

import java.awt.BorderLayout;

import java.awt.Component;

import javax.swing.JFrame;

import twaver.*;

import twaver.network.TNetwork;

public class HelloTWaver {

public static void main(String[] args) {

//创建DataBox

19

TDataBox box = new TDataBox();

//增加两个节点和一条连线

Node node = new Node();

node.setName("Hello");

node.setLocation(10, 10);

box.addElement(node);

Node node2 = new Node();

node2.setName("TWaver");

node2.setLocation(200, 150);

box.addElement(node2);

Link link = new Link(node, node2);

link.setName("Hello TWaver");

link.putLinkLabelRotatable(true);

box.addElement(link);

//定义拓扑图组件

TNetwork network = new TNetwork(box);

//显示拓扑图组件

showFrame("Hello TWaver", network);

}

public static JFrame showFrame(String title, Component component) {

JFrame frame = new JFrame();

frame.setTitle(title);

frame.getContentPane().add(component, BorderLayout.CENTER);

frame.setSize(800, 600);

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

TWaverUtil.centerWindow(frame);

frame.setVisible(true);

return frame;

}

}

细看代码，分为四部分：创建 DataBox；增加两个节点和一条连线；定义拓扑图组件；

显示拓扑图。

运行代码，得到如下界面：

20

增加树，表格和属性页

然后增加树，表格，属性页等组件，并用 JSplitPane 布局显示，代码如下：

public class HelloTWaver {

public static void main(String[] args) {

...

//创建树组件

TTree tree = new TTree(box);

//创建属性页组件，并设置为可编辑

TPropertySheet sheet = new TPropertySheet(box);

sheet.setEditable(true);

//创建表格组件，设置为可编辑

TElementTable table = new TElementTable(box);

table.setElementClass(Element.class);

table.setEditable(true);

21

//分别将属性页和表格组件放置在滚动面板中，这样可以保证表头的正确显示

JScrollPane tablePanel = new JScrollPane(table);

JScrollPane sheetPanel = new JScrollPane(sheet);

//显示这些组件

showSplitPane("Hello TWaver", getSplitpane(tree, sheetPanel, 300,

false), getSplitpane(network, tablePanel, 300, false), 100);

}

public static JFrame showSplitPane(String title, JComponent left,

JComponent right, int leftLocation) {

JSplitPane mainPane = getSplitpane(left, right, leftLocation,

true);

return showFrame(title, mainPane);

}

public static JSplitPane getSplitpane(JComponent firstPane,

JComponent secondPane, int location, boolean isHorizontal) {

JSplitPane mainPane = new JSplitPane();

if (isHorizontal) {

mainPane.setRightComponent(secondPane);

mainPane.setLeftComponent(firstPane);

mainPane.setDividerLocation(location);

} else {

mainPane.setOrientation(JSplitPane.VERTICAL_SPLIT);

mainPane.setBottomComponent(secondPane);

mainPane.setTopComponent(firstPane);

mainPane.setDividerLocation(location);

}

return mainPane;

}

...

}

上面的代码创建了树，表格。属性页组件，添加到窗体面板，这里有两个细节值得注意：

一个是 JScrollPane 的使用，Swing 中的表格组件需要放置在滚动面板，也就是

JScrollPane 中，这样表格列头才能正常显示，TWaver 中的表格组件和属性页组件都是继

承于 Swing 的 JTable，所以需要用 JScrollPane 包装一下；还有一个细节是代码设置了表

格和属性页为可编辑，简单的一行代码，就可以实现节点和连线属性的编辑。

让我们来运行程序，得到如下界面：

22

添加告警

最后来尝试告警的使用，为了更好的展示告警传递效果，这里修改了网员的层次结构，

增加了一个分组元素，并将前面创建的两个节点和一条连线设置为这个分组的孩子节点，然

后我们像告警容器中添加一条紧急告警，这个告警与节点”TWaver”关联，添加下面的代

码：

//添加分组

Group group = new Group();

group.setExpand(true);

group.addChild(node);

group.addChild(node2);

group.addChild(link);

box.addElement(group);

//添加告警

AlarmModel alarmModel = box.getAlarmModel();

23

//告警与node2关联

Alarm alarm = new Alarm(node2.getID(), AlarmSeverity.CRITICAL);

alarmModel.addAlarm(alarm);

运行界面如下，告警在拓扑图组件和树组件都有展示，节点“TWaver”被渲染为红色，

它上面的红色冒泡（1C）表示有一条级别为紧急的新发告警产生，网元上的告警还会向其

父节点传递，拓扑图和树图上都可以看到分组节点的渲染边框。点击节点“TWaver”属性

页中可以显示它的告警状态属性。

Hello TWaver 示例的启示

每个 TWaver 产品分支有各自的 Hello TWaver 示例，这是 TWaver 入门的第一课，

通过简单的示例，传递给大家对 TWaver 开发的一些启示：代码简洁，直观，实时联动，

模型与视图分离。

代码简单

除了 TWaver Web 涉及到前后台的结合，比较复杂外，TWaver 其他产品分支都很容

易入门，比如 TWaver Java 的示例，只需要一个 Java 类，几行代码就可以制作一个完整

的，可以操作的拓扑图界面，不需要安装第三方插件，不需要配置，都是最基本的 Java 编

程，Flex 编程或者.NET 程序开发。

编码直观

界面编程最大的好处就是直观，每一行代码的设置在界面上都能直接看到效果，同样

TWaver 的特性很容易直观的展现，可以去尝试修改网元的样式属性，直接运行就可以看到

24

效果，这为 TWaver 的学习提供了帮助，如果配合上我们的编辑器，很多图形效果都可以

自己摸索和发现。

界面联动

TWaver 的强大之一体现在多种界面之间的数据同步，交互同步，在 Hello TWaver

中我们可以看到，简单的创建组件，无需额外的代码，就能实现拓扑图的拖拽，框选，缩放

等操作，各个组件中都可以同步选中网元，显示被选中网元的信息可以在属性表中显示，并

且能够直接编辑，同步更新到各个组件。

M-V 分离

通过 Hello TWaver 的示例还能了解到 TWaver 的开发习惯，TWaver 使用 MVC 的

设计模式，在入门示例中我们可以很明显的体会到 M-V 的关系，M 就是数据，创建网元添

加到数据容器，V 是视图组件，创建组件，关联上 M（数据容器）即可，如果不需要特殊的

交互，组件的创建往往只是一行代码，更多的工作在于数据的填充，这正是 TWaver 数据

驱动视图的使用习惯。