电信网管中的Java客户端（三）

电信网管中的Java客户端（三）

1.概述

前文介绍了用Java开发电信网管界面系统的方法和相关产品。本文继续阐述如何使用TWaver组件来制作简单的网络拓扑图。

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。代码如下：

import java.awt.*;

import javax.swing.*;

import twaver.*;

import twaver.network.*;

import twaver.table.*;

import twaver.tree.*;

public class Test extends JFrame {

private BorderLayout layout = new BorderLayout();

//创建数据容器，并给一个名字

private TDataBox box = new TDataBox("My Network");

//创建各种图形组件，包括地图、树和属性表。同时连接数据容器。

private TNetwork network = new TNetwork(box);

private TTree tree = new TTree(box);

private TPropertySheet sheet =

new TPropertySheet(new TPropertySheetModel(network));

//创建分割窗和滚动窗

JSplitPane rootSplitPane = new JSplitPane();

JSplitPane rightSplitPane = new JSplitPane();

JScrollPane treeScroll = new JScrollPane();

JScrollPane sheetScroll = new JScrollPane();

public Test() {

init();

}

void init() {

this.setTitle("TWaver Test");

this.getContentPane().setLayout(layout);

rootSplitPane.setBorder(null);

rootSplitPane.setContinuousLayout(true);

rightSplitPane.setBorder(null);

rightSplitPane.setContinuousLayout(true);

this.getContentPane().add(rootSplitPane, BorderLayout.CENTER);

rootSplitPane.add(rightSplitPane, JSplitPane.RIGHT);

rightSplitPane.add(sheetScroll, JSplitPane.RIGHT);

rightSplitPane.add(network, JSplitPane.LEFT);

sheetScroll.getViewport().add(sheet, null);

rootSplitPane.add(treeScroll, JSplitPane.LEFT);

treeScroll.getViewport().add(tree, null);

rootSplitPane.setDividerLocation(100);

}

public static void main(String[] args) {

Test test = new Test();

test.setBounds(200, 200, 450, 300);

test.show();

}

}

以上代码简单的创建了一个界面，显示了一幅空的网络地图。运行如下图：

<shapetype id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f"></shapetype><stroke joinstyle="miter"></stroke><formulas></formulas><f eqn="if lineDrawn pixelLineWidth 0"></f><f eqn="sum @0 1 0"></f><f eqn="sum 0 0 @1"></f><f eqn="prod @2 1 2"></f><f eqn="prod @3 21600 pixelWidth"></f><f eqn="prod @3 21600 pixelHeight"></f><f eqn="sum @0 0 1"></f><f eqn="prod @6 1 2"></f><f eqn="prod @7 21600 pixelWidth"></f><f eqn="sum @8 21600 0"></f><f eqn="prod @7 21600 pixelHeight"></f><f eqn="sum @10 21600 0"></f><lock v:ext="edit" aspectratio="t"></lock><shape id="_x0000_i1025" style="WIDTH: 337.5pt; HEIGHT: 225pt" type="#_x0000_t75"></shape><imagedata src="file:///C:%5Ctemp%5Cmsohtml1%5C01%5Cclip_image001.png" o:title=""></imagedata>

为了放置数据，我们再增加一个函数initData进行网络数据的初始化。

private void initData() {

Node cloud = new Node(); //创建一个node对象

cloud.setImage("Cloud.png"); //用一个云图作为图片

cloud.setLocation(60, 100); //设置其X、Y坐标

cloud.setName("PSTN"); //设置节点显示名称

//设置节点属性，改变名称标签的纵向显示位置。

//默认情况下，其标签显示在节点下方；此处提升30个象素，将其放置在节点中央位置。

cloud.putClientProperty("label.yoffset", new Integer( -30));

//设置节点属性，改变其标签字体。

cloud.putClientProperty("label.font", new Font("Arial", Font.BOLD, 12));

//设置节点属性，改变其标签文本颜色。

cloud.putClientProperty("label.color", Color.white);

//将节点放入容器

box.addElement(cloud);

//围绕云图创建n个节点，并通过一条link与云图相连。

for (int i = 0; i < 10; i++) {

//创建一个普通节点并设置其位置。

Node node = new Node();

int x = 20 + cloud.getLocation().x +

(int) (70 * Math.cos(2 * Math.PI / 10 * i));

int y = cloud.getLocation().y +

(int) (100 * Math.sin(2 * Math.PI / 10 * i));

node.setLocation(x, y);

box.addElement(node);

//创建一条link并让它连接到云图

Link link=new Link(node,cloud);

box.addElement(link);

}

}

此时运行程序，将显示如下结果：

<shape id="_x0000_i1026" style="WIDTH: 337.5pt; HEIGHT: 225pt" type="#_x0000_t75"></shape><imagedata src="file:///C:%5Ctemp%5Cmsohtml1%5C01%5Cclip_image003.png" o:title=""></imagedata>

你可以观察到，地图上的对象按照我们设定的位置显示出来，同时可以通过鼠标进行选择、托拽等操作。同时，树图上也显示了对象之间的层次关系，属性表则显示了当前选中的对象的属性集合。

除此之外，TWaver的组件还提供了缩放、平移、监听各种事件、设置各种过滤器等功能。由于TWaver是专门针对电信行业而设计，所以直接提供了对告警、事件、自动布局等功能的支持。

4.综合举例

看了一上例子，相信你已经对TWaver有了初步认识。下面介绍一个复杂一点的例子。网络结构虽然更加复杂了，但是TWaver的使用还是同样简单。下图是一个在实际项目中综合使用了TWaver各种对象创建的一幅复杂一点的网络拓扑图：

<shape id="_x0000_i1027" style="WIDTH: 414.75pt; HEIGHT: 253.5pt" type="#_x0000_t75"></shape><imagedata src="file:///C:%5Ctemp%5Cmsohtml1%5C01%5Cclip_image005.png" o:title=""></imagedata>

怎么样，还不错吧？别忘了它可是一幅基于Java Swing的、可交互的图，而不是用Visio之类的工具画出来的静态拓扑图。如果把我们软件项目中的网络结构用这样的效果呈现出来，相信客户会非常满意！

5.结束

下次将介绍如何通过XML数据来创建、加载和呈现网络地图。

6.附录

请点击这里下载相关代码；

请点击这里打开Applet页面；

请点击这里下载可执行的jar包；