Posted on 2010-08-31 12:45
TWaver 閱讀(1774)
評論(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。代碼如下：
1
package blog;
2
3import java.awt.*;
4import javax.swing.*;
5import twaver.*;
6import twaver.network.*;
7import twaver.table.*;
8import twaver.tree.*;
9
10
public 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數據來創建、加載和呈現網絡地圖。