Posted on 2010-08-31 12:45
TWaver 阅读(1748)
评论(3) 编辑 收藏
1.概述
前文介绍了用Java开发电信网管界面系统的方法和相关产品。本文继续阐述如何使用TWaver Java来制作简单的网络拓扑图。
2.TWaver组件结构
TWaver是一套基于Java Swing的电信网络拓扑图呈现组件。其组件按照MVC的架构进行设计。其中,我们把将创建的各种电信网络图形对象(例如各种节点、连接等),直接放置在一个内存容器类中(称为DATABOX),而各种用于显示数据的图形组件(例如地图、树图、表格等)直接与容器连接即可。这种结构就类似Swing中的TableModel和JTable的关系,各种电信网络对象则类似放置在表格中的各种Object。JTable有专门的Editor和Renderer对每个Cell的Object进行编辑和渲染,TWaver也使用类似的机理;其内部使用不同的UI类负责不同类型数据对象的“绘制”。
3.TWaver组件示例
有了以上基本概念,使用TWaver就比较容易了。其基本过程是:
- 创建数据容器;
- 创建各种视图(地图/树图),并与容器连接;
- 创建各种网络对象并设置其属性,并放入容器中;
- 动态更改对象的各种属性,实现数据的实时更新;
下面我们就动手用简单的代码来演示创建过程。首先我们创建一个简单的界面,它由中间的网络地图、左边的树以及右面的属性表组成。他们分别对应于TWaver的TNetwork控件、TTree控件以及TPropertySheet控件。同时,他们共享一个统一的数据容器TDataBox。代码如下:
1package blog;
2
3import java.awt.*;
4import javax.swing.*;
5import twaver.*;
6import twaver.network.*;
7import twaver.table.*;
8import twaver.tree.*;
9
10public class Test extends JFrame {
11
12 //创建数据容器,并给一个名字
13 private TDataBox box = new TDataBox("My Network");
14 //创建各种图形组件,包括地图、树和属性表。同时连接数据容器。
15 private TNetwork network = new TNetwork(box);
16 private TTree tree = new TTree(box);
17 private TPropertySheet sheet = new TPropertySheet(box);
18
19 public Test() {
20 init();
21 }
22
23 void init() {
24 JSplitPane rootSplit = new JSplitPane();
25 JSplitPane rightSplit = new JSplitPane(JSplitPane.VERTICAL_SPLIT);
26
27 this.setTitle("电信网管中的Java客户端");
28 this.add(rootSplit, BorderLayout.CENTER);
29 rootSplit.add(rightSplit, JSplitPane.LEFT);
30 rootSplit.add(network, JSplitPane.RIGHT);
31
32 rightSplit.add(new JScrollPane(tree), JSplitPane.TOP);
33 rightSplit.add(new JScrollPane(sheet), JSplitPane.BOTTOM);
34 }
35
36 public static void main(String[] args) {
37 Test test = new Test();
38 test.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
39 test.setBounds(200, 200, 450, 300);
40 test.setVisible(true);
41 }
42}
以上代码简单的创建了一个界面,显示了一幅空的网络地图。运行如下图:
为了放置数据,我们再增加一个函数initData进行网络数据的初始化。
1private void initData() {
2 Node cloud = new Node(); //创建一个node对象
3 cloud.setImage("Cloud.png"); //用一个云图作为图片
4 cloud.setLocation(60, 100); //设置其X、Y坐标
5 cloud.setName("PSTN"); //设置节点显示名称
6 //设置节点属性,改变名称标签的纵向显示位置。
7 //默认情况下,其标签显示在节点下方;此处提升30个象素,将其放置在节点中央位置。
8 cloud.putClientProperty("label.yoffset", new Integer(-30));
9 //设置节点属性,改变其标签字体。
10 cloud.putClientProperty("label.font", new Font("Arial", Font.BOLD, 12));
11 //设置节点属性,改变其标签文本颜色。
12 cloud.putClientProperty("label.color", Color.white);
13 //将节点放入容器
14 box.addElement(cloud);
15
16 //围绕云图创建n个节点,并通过一条link与云图相连。
17 for (int i = 0; i < 10; i++) {
18 //创建一个普通节点并设置其位置。
19 Node node = new Node();
20 int x = 20 + cloud.getLocation().x
21 + (int) (70 * Math.cos(2 * Math.PI / 10 * i));
22 int y = cloud.getLocation().y
23 + (int) (100 * Math.sin(2 * Math.PI / 10 * i));
24 node.setLocation(x, y);
25 box.addElement(node);
26 //创建一条link并让它连接到云图
27 Link link = new Link(node, cloud);
28 box.addElement(link);
29 }
30 }
此时运行程序,将显示如下结果:
你可以观察到,地图上的对象按照我们设定的位置显示出来,同时可以通过鼠标进行选择、托拽等操作。同时,树图上也显示了对象之间的层次关系,属性表则显示了当前选中的对象的属性集合。
除此之外,TWaver的组件还提供了缩放、平移、监听各种事件、设置各种过滤器等功能。由于TWaver是专门针对电信行业而设计,所以直接提供了对告警、事件、自动布局等功能的支持。
4.综合举例
看了一上例子,相信你已经对TWaver有了初步认识。下面介绍一个复杂一点的例子。网络结构虽然更加复杂了,但是TWaver的使用还是同样简单。下图是一个在实际项目中综合使用了TWaver各种对象创建的一幅复杂一点的网络拓扑图:
怎么样,还不错吧?别忘了它可是一幅基于Java Swing的、可交互的图,而不是用Visio之类的工具画出来的静态拓扑图。如果把我们软件项目中的网络结构用这样的效果呈现出来,相信客户会非常满意!
5.结束
下次将介绍如何通过XML数据来创建、加载和呈现网络地图。