Posted on 2010-08-31 12:45
TWaver 閱讀(1780)
評論(3) 編輯 收藏
1.概述
前文介紹了用Java開發(fā)電信網(wǎng)管界面系統(tǒng)的方法和相關(guān)產(chǎn)品。本文繼續(xù)闡述如何使用TWaver Java來制作簡單的網(wǎng)絡(luò)拓?fù)鋱D。
2.TWaver組件結(jié)構(gòu)
TWaver是一套基于Java Swing的電信網(wǎng)絡(luò)拓?fù)鋱D呈現(xiàn)組件。其組件按照MVC的架構(gòu)進(jìn)行設(shè)計(jì)。其中，我們把將創(chuàng)建的各種電信網(wǎng)絡(luò)圖形對象（例如各種節(jié)點(diǎn)、連接等），直接放置在一個(gè)內(nèi)存容器類中（稱為DATABOX），而各種用于顯示數(shù)據(jù)的圖形組件（例如地圖、樹圖、表格等）直接與容器連接即可。這種結(jié)構(gòu)就類似Swing中的TableModel和JTable的關(guān)系，各種電信網(wǎng)絡(luò)對象則類似放置在表格中的各種Object。JTable有專門的Editor和Renderer對每個(gè)Cell的Object進(jìn)行編輯和渲染，TWaver也使用類似的機(jī)理；其內(nèi)部使用不同的UI類負(fù)責(zé)不同類型數(shù)據(jù)對象的“繪制”。
3.TWaver組件示例
有了以上基本概念，使用TWaver就比較容易了。其基本過程是：
- 創(chuàng)建數(shù)據(jù)容器；
- 創(chuàng)建各種視圖（地圖/樹圖），并與容器連接；
- 創(chuàng)建各種網(wǎng)絡(luò)對象并設(shè)置其屬性，并放入容器中；
- 動(dòng)態(tài)更改對象的各種屬性，實(shí)現(xiàn)數(shù)據(jù)的實(shí)時(shí)更新；
下面我們就動(dòng)手用簡單的代碼來演示創(chuàng)建過程。首先我們創(chuàng)建一個(gè)簡單的界面，它由中間的網(wǎng)絡(luò)地圖、左邊的樹以及右面的屬性表組成。他們分別對應(yīng)于TWaver的TNetwork控件、TTree控件以及TPropertySheet控件。同時(shí)，他們共享一個(gè)統(tǒng)一的數(shù)據(jù)容器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 //創(chuàng)建數(shù)據(jù)容器，并給一個(gè)名字
13 private TDataBox box = new TDataBox("My Network");
14 //創(chuàng)建各種圖形組件，包括地圖、樹和屬性表。同時(shí)連接數(shù)據(jù)容器。
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("電信網(wǎng)管中的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
}
以上代碼簡單的創(chuàng)建了一個(gè)界面，顯示了一幅空的網(wǎng)絡(luò)地圖。運(yùn)行如下圖：
為了放置數(shù)據(jù)，我們再增加一個(gè)函數(shù)initData進(jìn)行網(wǎng)絡(luò)數(shù)據(jù)的初始化。
1private void initData() {
2 Node cloud = new Node(); //創(chuàng)建一個(gè)node對象
3 cloud.setImage("Cloud.png"); //用一個(gè)云圖作為圖片
4 cloud.setLocation(60, 100); //設(shè)置其X、Y坐標(biāo)
5 cloud.setName("PSTN"); //設(shè)置節(jié)點(diǎn)顯示名稱
6 //設(shè)置節(jié)點(diǎn)屬性，改變名稱標(biāo)簽的縱向顯示位置。
7 //默認(rèn)情況下，其標(biāo)簽顯示在節(jié)點(diǎn)下方；此處提升30個(gè)象素，將其放置在節(jié)點(diǎn)中央位置。
8 cloud.putClientProperty("label.yoffset", new Integer(-30));
9 //設(shè)置節(jié)點(diǎn)屬性，改變其標(biāo)簽字體。
10 cloud.putClientProperty("label.font", new Font("Arial", Font.BOLD, 12));
11 //設(shè)置節(jié)點(diǎn)屬性，改變其標(biāo)簽文本顏色。
12 cloud.putClientProperty("label.color", Color.white);
13 //將節(jié)點(diǎn)放入容器
14 box.addElement(cloud);
15
16 //圍繞云圖創(chuàng)建n個(gè)節(jié)點(diǎn)，并通過一條link與云圖相連。
17 for (int i = 0; i < 10; i++) {
18 //創(chuàng)建一個(gè)普通節(jié)點(diǎn)并設(shè)置其位置。
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 //創(chuàng)建一條link并讓它連接到云圖
27 Link link = new Link(node, cloud);
28 box.addElement(link);
29 }
30 }
此時(shí)運(yùn)行程序，將顯示如下結(jié)果：
你可以觀察到，地圖上的對象按照我們設(shè)定的位置顯示出來，同時(shí)可以通過鼠標(biāo)進(jìn)行選擇、托拽等操作。同時(shí)，樹圖上也顯示了對象之間的層次關(guān)系，屬性表則顯示了當(dāng)前選中的對象的屬性集合。
除此之外，TWaver的組件還提供了縮放、平移、監(jiān)聽各種事件、設(shè)置各種過濾器等功能。由于TWaver是專門針對電信行業(yè)而設(shè)計(jì)，所以直接提供了對告警、事件、自動(dòng)布局等功能的支持。
4.綜合舉例
看了一上例子，相信你已經(jīng)對TWaver有了初步認(rèn)識。下面介紹一個(gè)復(fù)雜一點(diǎn)的例子。網(wǎng)絡(luò)結(jié)構(gòu)雖然更加復(fù)雜了，但是TWaver的使用還是同樣簡單。下圖是一個(gè)在實(shí)際項(xiàng)目中綜合使用了TWaver各種對象創(chuàng)建的一幅復(fù)雜一點(diǎn)的網(wǎng)絡(luò)拓?fù)鋱D：
怎么樣，還不錯(cuò)吧？別忘了它可是一幅基于Java Swing的、可交互的圖，而不是用Visio之類的工具畫出來的靜態(tài)拓?fù)鋱D。如果把我們軟件項(xiàng)目中的網(wǎng)絡(luò)結(jié)構(gòu)用這樣的效果呈現(xiàn)出來，相信客戶會(huì)非常滿意！
5.結(jié)束
下次將介紹如何通過XML數(shù)據(jù)來創(chuàng)建、加載和呈現(xiàn)網(wǎng)絡(luò)地圖。