Twaver图形界面之道(上)

1,991 views

Published on

我希望说点特别的东西,有价值的东西,不只是为TWaver用户,更包括所有从事GUI开发的人和团队,提供对产品设计有借鉴意义的内容,于是我修改了提纲,精简了TWaver功能点的内容,增加了更多TWaver设计思想与产品进化的历史,结合当下各种GUI技术,讨论其设计理念与发展趋势,这会使得本书的完成更富挑战性,原本只需要按部就班填充内容的,现在需要创造力和思考,但一切也变得更有意义。

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,991
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Twaver图形界面之道(上)

  1. 1. TWaver 图形界面之道:序言与目录 TWaver 图形界面之道 作者序 最早我按 TWaver 的功能点拟定了提纲,在完成第一章后,遇到了两个问题:是写整个 TWaver 还是只介绍 TWaver Java?与开发手册和培训文档的内容是否重复了? 于是我停下来思考,这本书究竟应该说点什么?如果只是 TWaver 的使用,看我们的开发手册,参加我们的培训会更合适,我希望说点特别的东西,更有价值的东西,不只是为TWaver 用户,更包括所有从事 GUI 开发的人和团队,提供对产品设计有借鉴意义的内容,于是我修改了提纲,精简了 TWaver 功能点的内容,增加了更多 TWaver 设计思想与产品进化的历史,结合当下各种 GUI 技术,讨论其设计理念与发展趋势,这会使得本书的完成更富挑战性,原本只需要按部就班填充内容的,现在需要创造力和思考,但一切也变得更有意义。 回过头来看前面的两个问题,本书将对 TWaver 整体介绍,覆盖各个产品分支,简化组件使用的细节,增加更多 GUI 扩展技术的讨论。 Sam Sha – 2011 年 10 月 8 日星期六 下面是拟定目录,共二十一篇,陆续发布
  2. 2. 目 录TWaver 介绍.................................................................................................................................. 1 TWaver 是什么?.................................................................................................................. 2 TWaver 产品家族.................................................................................................................. 8 TWaver 如何获取................................................................................................................12TWaver 基础................................................................................................................................17 Hello TWaver .....................................................................................................................17
  3. 3. 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 就是人的大脑,各个组件就是它不同的侧面,人的喜怒哀乐都由大脑控制和反馈。 1
  4. 4. TWaver 是什么? 用一句话概括:TWaver 是一种高效轻量的图形界面解决方案,提供多种语言开发平台,关注于电信网管行业,但不局限于电信行业。TWaver 提供图形界面解决方案 TWaver 是一款中间组件产品,专注于图形组件,需要二次开发,提供图形界面一站式解决方案。 2
  5. 5. 关注于图形界面 TWaver 关注于图形界面,不是后台技术,也不是系统集成,我们的目标是让枯燥冰冷的数据,直观漂亮的展现。大家看到 TWaver 的第一眼,就是一系列图形组件,包括拓扑图,树,表格,属性页,图表„„TWaver 研究界面的每一个像素,关心细微之处的呈现。 TWaver 提供了多种图形元素,比如节点,连线,分组,跟随者,附件等等,每一种图形都具有数十种样式属性,设置不同的样式,实现丰富的呈现效果。以网元标签为例,它是节点的一种附件元素,一个小小的标签可以设置位置,对齐方式,颜色,字体,背景色,渐变色填充,边框,HTML 支持,气泡形式等诸多属性。由此多个附加元素组合而成的节点对象,就可以展现更丰富的信息,和呈现效果。 3
  6. 6. 图形数据模型 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 一直遵循高效轻量的设计理念。 4
  7. 7. 高效 高效主要从界面承载能力来体现,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 秒。 5
  8. 8. 轻量 TWaver 的小巧也是其受欢迎的原因之一,对于一款中间组件,控制软件体积与女生控制体重一样重要。TWaver 核心包一直控制着较小的体积,TWaver Flex 和 TWaver .NET的核心类库大小约 1MB,TWaver Java 核心包(twaver.jar)稍微大些,为 1.8MB。体积虽小,内容丰富,以 TWaver Java 为例,twaver.jar 中有了十几种图形和网元类型,提供了树,表格,属性页,拓扑图,图表等多种组件,还支持数据的导入导出,图片导出,SVG 导出功能。关注于电信网管行业,但不局限于此电信网管行业应用 TWaver 一直关注于电信网管行业,针对电信行业封装了相关的业务模型,比如设备面板,子网,总线,告警机制等等。从 05 年到现在,我们的客户大多是电信行业,这为我们积累了大量行业经验,积攒了很多的客户案例和解决方案。很多时候客户引领我们方向,TWaver 的完善得益于客户千奇百怪的需求,TWaver 很多示例都是客户需求的成果,感谢客户让我们成长,同时,TWaver 也将这些经验回馈给客户,用心的交流,手把手的支持,就像两种思想的对话,让彼此都能受益。 6
  9. 9. 其他行业的应用 虽然 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 产品,这两个产品已经在小范围试用,不久将会推广。 7
  10. 10. 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 的设计思想和运行模式。 8
  11. 11. TWaver Flex TWaver Web 解决了大量客户的需求,但技术在发展,RIA(Rich InternetApplication)开始流行,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 是面向对象的编程语言,简单易学,拥有众多的熟练的程序开发人员的支持; 9
  12. 12. Swing Java 最早的图形界面技术是 AWT,AWT 依赖原生平台,AWT 控件由本地操作系统对应的控件生成,不同操作系统下效果完全不同,这违背了 Java 跨平台支持的初衷,于是就有了 Swing 技术。Swing 完全由 Java 写成, 具有良好的设计模式,支持切换 LookAndFeel改变程序外观,是 Java 基础类库的一部分,是主要的 Java GUI 工具包,TWaver Java基于 Swing 技术;JavaScriptJavaScript 技术适合 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 的应用, 标签库, MXML 和 ActionScript 脚本动态的编译成 Flash JSP 将文件,在浏览器中呈现,这个时期的 Flex 还是做动画,到后来界面上需要标准控件,于是就出现了按钮,面板,窗体等等,加上前后台通讯,数据传输,最后成了富客户端应用的完整解决方案。Flex 界面延续了 Flash 的图形绘制基础, Flex 程序与普通的 Flash 文件不同,Flex 只有两帧,第一帧是启动界面,第二帧是程序界面,此后程序按第二帧的频率(默认是 24 帧每秒)启动定时器,周期性的重绘,也就是 Flex 组件的无效-生效周期; 10
  13. 13. .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 插件。 11
  14. 14. TWaver 如何获取 TWaver 是一款商业软件,面向企业用户,出售软件授权,提供支持服务,此外对于非商业用途的项目( 譬如院校,研究所的一些研究性课题),会给于优惠和减免。 要了解 TWaver 产品,可以先从我们的在线产品示例开始,这能直观全面的了解到TWaver 产品的特性,接下来你可以申请产品试用,借助试用包中的类库和资料,可以开始技术预言和原型搭建,期间可多多与我们联系,以便得到及时的帮助,如果通过技术方案通过,确定使用 TWaver,这时需要购买我们的开发许可,以便我们提供更多的技术支持以及现场培训,接下来开发完成,项目正式上线时,你需要购买运行许可,我们为产品到运行和维护提供保障,运行许可的费用按项目的客户端或者服务器数量而定,详情请与 TWaver商务人员交流。TWaver 试用申请 首先上我们的官方网站(www.servasoftware.com),注册一个账号,然后进入TWaver 产品专栏(http://www.servasoftware.com/twaver.php) 选择产品 , (TWaverJava 或者 TWaver Web „„),点击下载,随后填写相关资料,提交申请。通常我们会在24 小时内给与答复,如果你嫌注册麻烦,急着试用,可以将你的申请直接发送到sales@servasoftware.com,注明申请的产品名(Java,Flex 还是.NET 等),留下你的公司信息与联系方式。TWaver 许可授权 TWaver 有三种许可:试用许可,开发许可、运行许可。试用许可 可免费申请,用于前期预言或技术选型阶段,组件界面带有”TWaver EvaluationVersion”水印,限非商业使用,在线申请的产品都属于试用许可; 12
  15. 15. 开发许可 用于项目实际开发阶段,界面初始无水印,两个小时后会显示水印,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 学习变得更加容易: 13
  16. 16. TWaver 资料 学习资料主要包括三部分:开发手册,API 文档,示例代码,这些东西在产品包中都可以找到: 我们还有一套在线的 WIKI 系统(http://doc.servasoftware.com/dashboard.action),包含各个产品分支的文档,并不断的更新: 14
  17. 17. 此外 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 团队的及时解答,问题不过 15
  18. 18. 夜是论坛的原则,即使是节假日,也会有团队成员孜孜不倦的义务回答问题。 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 上会有人轮流值班,因为客户较多,所以私人问题就不要问多了。 16
  19. 19. 其他: 官方主页: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.comTWaver 基础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 版本要求比较现代的浏览器。不同的语言开发平台也不同,这些在我们的开发手册中都有介绍,本书不 17
  20. 20. 再重复: 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 18
  21. 21. 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;增加两个节点和一条连线;定义拓扑图组件;显示拓扑图。 运行代码,得到如下界面: 19
  22. 22. 增加树,表格和属性页 然后增加树,表格,属性页等组件,并用 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); 20
  23. 23. //分别将属性页和表格组件放置在滚动面板中,这样可以保证表头的正确显示 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 包装一下;还有一个细节是代码设置了表格和属性页为可编辑,简单的一行代码,就可以实现节点和连线属性的编辑。 让我们来运行程序,得到如下界面: 21
  24. 24. 添加告警 最后来尝试告警的使用,为了更好的展示告警传递效果,这里修改了网员的层次结构,增加了一个分组元素,并将前面创建的两个节点和一条连线设置为这个分组的孩子节点,然后我们像告警容器中添加一条紧急告警,这个告警与节点”TWaver”关联,添加下面的代码://添加分组Group group = new Group();group.setExpand(true);group.addChild(node);group.addChild(node2);group.addChild(link);box.addElement(group);//添加告警AlarmModel alarmModel = box.getAlarmModel(); 22
  25. 25. //告警与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 的特性很容易直观的展现,可以去尝试修改网元的样式属性,直接运行就可以看到 23
  26. 26. 效果,这为 TWaver 的学习提供了帮助,如果配合上我们的编辑器,很多图形效果都可以自己摸索和发现。界面联动 TWaver 的强大之一体现在多种界面之间的数据同步,交互同步,在 Hello TWaver中我们可以看到,简单的创建组件,无需额外的代码,就能实现拓扑图的拖拽,框选,缩放等操作,各个组件中都可以同步选中网元,显示被选中网元的信息可以在属性表中显示,并且能够直接编辑,同步更新到各个组件。M-V 分离 通过 Hello TWaver 的示例还能了解到 TWaver 的开发习惯,TWaver 使用 MVC 的设计模式,在入门示例中我们可以很明显的体会到 M-V 的关系,M 就是数据,创建网元添加到数据容器,V 是视图组件,创建组件,关联上 M(数据容器)即可,如果不需要特殊的交互,组件的创建往往只是一行代码,更多的工作在于数据的填充,这正是 TWaver 数据驱动视图的使用习惯。 24

×