twaver

http://www.servasoft.com/demo/twaver_flex/twaver-flex-online-demo.html

TWaver Flex版简介

如果一提到TWaver很多人可能会都想到Swing。经过十几年的发展,TWaver已经不再是一个简单的Swing拓扑组件,这些年TWaver陆续推出了AJAX+SVG的Web版、GIS版,现在又出了Flex版。

上面很多功能令人耳目一新。以这个经典的TWaver PSTN为例,细节上可能比Swing版还要细腻很多。整个TWaver Flex很多地方甚至已经体现出比TWaver Java的Swing版本更强的方面。

此外,TWaver Flex中还有更多有趣的特性。

全新告警渲染方式

以前看过Micromuse的NetCool时候,对其告警呈现方式很有印象:一个告警色的菱形底座,既直观又美观。TWaver Flex中也提供了这种全新的告警渲染方式,而且还有各种形状的“底座”可以选择:

另外,记得在使用Eclipse时如果有编译错误,代码tree上是如何呈现的吗?一个动态产生的警告小图标叠加在tree icon上,既简洁,又清晰:

TWaver Flex中也提供了类似效果。这种效果可以直接通过一个参数设置,不需要通过复杂的代码进行实现:

TWaver Flex中,告警在树上的渲染还不止图标的变化,demo中还提供了更多复杂的呈现方法,例如在icon后面再叠加一些额外信息,例如告警信息统计等等。例如demo中,一个交换机端口上产生了3个Critical(严重)告警,可以在tree icon后方再显示一个球星icon以及告警数量和级别信息。另外交换机的边框上告警传播的模糊渐变渲染效果可能也比TWaver Java中更加细腻、生动:

再加上一些新提供的告警表格、告警统计、chart,TWaver Flex中告警的呈现确实给人耳目一新的感觉:

全新连线捆绑呈现法

连线捆绑是TWaver比较有意思的特性:多个首尾相同的Link可以双击闭合和展开。TWaver Flex的demo中提供了更加丰富的特性。除了传统的连线双击动态捆绑和打开外,还可以分组捆绑、捆绑形状定义、捆绑代理动态定义、告警代理呈现,等等。

上图中下方的一组连线,其中蓝色、红色、绿色的连线可以有不同的形状,他们可以分别双击展开、闭合。双击任意蓝色连线和绿色连线,上图变成这样:

更多自动布局算法

自动布局算法是比较有趣和非常有用的部分。看到一个个拓扑图变魔术一样的被布局成千变万化的形状,确实很酷。在TWaver Flex的demo中,自动布局更加流畅、清晰。

另外一个就是网络总线布局。和TWaver Java类似,Flex版中也提供了总线布局,显示效果更加细腻(立体效果)。

矢量图支持

TWaver Flex中有一个demo是显示了矢量的美国地图各个州以及一些chart现实出来的数据。仔细研究其代码,发现是使用了xml定义的矢量图格式,并用这些格式动态生成了一些节点对象。这样,这些节点就不仅仅是地图对象,还可以表示一些业务网络并携带一些业务数据。这个功能在电信资源管理、网管系统里面肯定会非常有用。

另外一个可以使用矢量图的地方是节点图片,除了位图外,还可以使用Flex简化的一个SVG格式,这样可以实现图片的无级缩放。例如TWaver Flex中这个demo中的节点,通过缩放后,可以观察到确实使用了矢量图格式:

设备网格

在做电信综合网管系统时候,如何呈现各种厂商、各种型号、各种类型的电信设备,是件麻烦的事情。如果使用美工效果图,工作量巨大;如果使用简单的方格,则显示效果过于简单。TWaver Flex中的提供了网格呈现方法。通过对设备面板进行网格化,通过定义每个板卡占用的宽和高等,就可以比较清晰、容易的定义设备的结构,并且呈现的效果也不错:

当然使用网格+图片的方式会有更好的效果:

更多特效

以下是一个拓扑图鱼眼示例图,可以让电信网管软件增添一点生动。

其他还有很多动画效果,大家可以跑一下demo。

流程图

通过流程图的编辑器,可以直接拖拽出来一个流程图,可以导出XML格式:

对于大多数电信软件开发者或以拓扑为的UI开发者来说,TWaver Flex已经足够应付绝大多数电信系统的各种需求。

总结

混合了传统Web和Flex的应用已经越来越多。如果有一天Flex被完整的支持在iPhone、Android等移动设备上,那么,有了TWaver Flex,“掌上运维”、“手持监控”等概念则不再仅仅是概念,而变成实实在在的应用。

电信软件向来严肃、严谨,“电信级”意味着比“企业级”要求更高一筹。稳定性、效率、可扩展性...都有很高的要求。无论是网管系统,还是各种监控系统、资源管理系统,大多都是C/S结构的天下。虽然Web的发展和成熟,基于Web模式的电信应用也开始多起来,尤其各种业务管理系统,而底层的网管系统还是以C/S的居多。当年以AJAX、JS等技术为代表的Web技术也面临现在Flex同样的质疑,而现在Web开发甚至变成了主流技术(看看所谓的SSH流行程度就可以感受到)。Flex作为一个UI部分的新技术,在复杂图形方面的处理能力无疑是传统Web应用的强有力补充。这也使得网管类的系统应用Web+Flex的混合方式成为可能。

Flex或许会给电信软件的开发带来变革,一个UI开发方式的变革。

Flex来了,无论是做电信应用还是企业应用,我们不必逃避它,还是紧紧的拥抱它吧!

时间: 2024-10-11 02:05:43

twaver的相关文章

TWaver初学实战——制作交互式地铁图

每天坐地铁,经常看地铁图,有一天突然想到,地铁图不也是一种拓扑结果吗?TWaver到底能与地铁图擦出怎样的火花呢? 想到就干,先到网上找幅参考图.各种风格的地铁图还挺多,甚至有大学生自主设计制作,受到地铁相关人士的认可和赞扬.不过看到他花了3周时间,我就比较同情他了,如果学会了TWaver,我保他连3天都不用就可以完成,而且还是纯矢量.可交互.有动态效果.无失真缩放的拓扑图. 我们就以上面这幅地铁图为模版来进行制作. 一.数据整理 俗话说兵马未动粮草先行,没有数据再好的创意也白搭. 数据格式,自

Twaver的mono-desiner导出的json文件解析

以画的交换机为例,其他大概都差不多. 利用Twaver做出交换机模型如图1所示,其中,每一个端口都是一个单独的对象.具体Twaver操作流程参见网址:http://twaver.servasoft.com/doc 中的操作指南. 将做好的模型导出为json格式的文件.下面将以图一所示的交换机为例对json文件进行简单解析.如图二所示为图一交换机的所导出的json文件的简单结构. 首先,所导出的json文件为一个json对象,里面包含有两个数组为primitives(原始)和assembles(装

TWaver 3D作品Viewer查看器

为了让开发者更方便的对各类3D模型.设备.物体进行浏览和查看,我们直接封装了mono.Viewer组件.它可以直接根据给定的数据源(json.obj.url等)进行数据加载和浏览展示.对于一般的3D设备.图纸.作品的展示,它可是非常方便了,一句new mono.Viewer()就解决了所有问题.各种常见的交互设置.灯光设置.呈现方式等,都已经直接封装其中. TWaver的3D viewer直接集成了如下功能: 滚轮缩放 光照设置 热点展示 贴图/线条切换 全屏与恢复 一键分享 viewer通过一

TWaver初学实战——如何在EasyUI中插入TWaver(续)

上次文章虽然简单易懂,但很有些小伙伴不满意:你这TWaver和EasyUI结合,只不过生硬地把TWaver图形插进去了,数据和人家EasyUI没一毛钱关系.嘿嘿,不就是想发生关系嘛,没问题啊!咱就还用原来的EasyUI的代码,看看怎么把它表格中的数据用拓扑的方式显示出来. 在本机发布web程序 这次再干咱要有新路,不能再把数据写到代码里了,乱乱乎乎的很不专业,必须原汁原味就用json文件.别小看这一改变,需要在本机搭建服务器,要是原来没接触还真得忙活一阵子.不过这些工作可不白做,那是玩网页开发的

被忽视的TWaver功能(1)

应客户需求写个Demo,Demo中包含一些常用的功能,包括解析JSON数据生成TWaver中的网元和连线,网元右下角带上不同标识的小图标,连线需要是二次曲线,弹出菜单和信息板,跟大家分享下.先上图让大家看看效果(大家在学习的同时,能否发现这次Demo有所不同) 解析JSON数据生成TWaver中的网元和连线下面是Demo中用到的JSON数据格式样例 var topo_data = [ {"element": "node", "name": &qu

TWaver版3D化学元素周期表

非常早就有人做3D网页版的化学元素周期表了.酷炫效果和新奇技巧一度被众多粉丝奉为神明,争相研究和效仿.甚至有人放弃一切扑向这颗蜡烛.不由总是想到那个OPPO广告女主角拽拽的歧视道:"辞职去旅游.你敢吗?" 俺不敢,只是用TWaver做一个也没用几个小时.所以就老在想:不就旅个游么,至于嘛? 这个3D元素周期表做了一些改进:卡片上添加了汉字及拼音读音.原因你懂得--各位程序员没几个敢大声读这些汉字的. 还好每一个字的主要部分还大都认识,多少能够小声蒙一下.加上拼音就少了很多尴尬.另外在形

TWaver推智能手表挑战华为苹果

2015年的春节刚过,苹果.华为.三星就紧锣密鼓的发布了各自新产品.华为.苹果的智能手表最吸引眼球.TWaver也不甘示弱,立刻连夜推出了更像传统奢侈豪华手表的TWaver Watch,予以反击.看来一场腥风血雨的残酷竞争不可避免.下面就带大家先睹TWaver手表的芳容. 和华为一样,TWaver这款腕表也采用了经典的圆形表盘,看上去是一款做工精致的传统腕表. 表盘侧面材质则使用了深受大家喜爱的土豪金.材质纯净.做工整洁光滑,相信一定会闪瞎很多小伙伴的钛合金眼. 手表腕带则采用了优质牛皮加明暗压

在TWaver的Tree节点上画线

论坛上有同学提出如何在tree上画引导线,之前我们Flex已经实现此功能,现在最新版的HTML5也将添加此功能.先看看效果: 详细的使用方法可以参考我们开发手册中可视化视图组件#Tree引导线一章,下面贴出一个Demo,没有图标,没有框选.仅供参考: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 4

如何创建TWaver 3D的轮廓选中效果

在一般的游戏中,物体的选中效果会是这样: TWaver 3D中,物体的默认的选中效果一般都是一个方方正正的外框.在HTML5的Mono版本中,TWaver提供了轮廓线样式的选中效果. 通过如下代码把几个基本形状进行捏合,生成新的组合体: 1 var node=new mono.ComboNode(nodes, ops); 2 node.s({ 3     'm.color':'#343AD3', 4     //或使用图片贴图:'m.texture.image':'test.png', 5   

TWaver MONO Design 中动画的导出与播放

使用过MONO编辑器的朋友都应该了解MONO中支持一些动画的设置,比如开门,开窗,弹出设备,旋转场景,镜头巡航等.但如何将这些动画应用到自己的场景中呢?比如我们在编辑器中给机柜定义了动画,怎样让做好的机柜模型加载到自己的场景中并能播放动画呢?别急,我们来举个例子给大家讲解一下. 首先我们使用编辑器建一个机柜的模型,这里就不给大家演示了,MONO编辑器的平台上提供了多种机柜的模型,我们直接下载一个模型导出一份json可以了,这里我们直接拿了MONO中公开的"42U标准机柜"的数据并导出了