Posted on 2010-08-31 12:45
TWaver 閱讀(1765)
評(píng)論(3) 編輯 收藏
1.概述
前文介紹了用Java開(kāi)發(fā)電信網(wǎng)管界面系統(tǒng)的方法和相關(guān)產(chǎn)品。本文繼續(xù)闡述如何使用TWaver Java來(lái)制作簡(jiǎn)單的網(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ò)圖形對(duì)象（例如各種節(jié)點(diǎn)、連接等），直接放置在一個(gè)內(nèi)存容器類中（稱為DATABOX），而各種用于顯示數(shù)據(jù)的圖形組件（例如地圖、樹(shù)圖、表格等）直接與容器連接即可。這種結(jié)構(gòu)就類似Swing中的TableModel和JTable的關(guān)系，各種電信網(wǎng)絡(luò)對(duì)象則類似放置在表格中的各種Object。JTable有專門(mén)的Editor和Renderer對(duì)每個(gè)Cell的Object進(jìn)行編輯和渲染，TWaver也使用類似的機(jī)理；其內(nèi)部使用不同的UI類負(fù)責(zé)不同類型數(shù)據(jù)對(duì)象的“繪制”。
3.TWaver組件示例
有了以上基本概念，使用TWaver就比較容易了。其基本過(guò)程是：
- 創(chuàng)建數(shù)據(jù)容器；
- 創(chuàng)建各種視圖（地圖/樹(shù)圖），并與容器連接；
- 創(chuàng)建各種網(wǎng)絡(luò)對(duì)象并設(shè)置其屬性，并放入容器中；
- 動(dòng)態(tài)更改對(duì)象的各種屬性，實(shí)現(xiàn)數(shù)據(jù)的實(shí)時(shí)更新；
下面我們就動(dòng)手用簡(jiǎn)單的代碼來(lái)演示創(chuàng)建過(guò)程。首先我們創(chuàng)建一個(gè)簡(jiǎn)單的界面，它由中間的網(wǎng)絡(luò)地圖、左邊的樹(shù)以及右面的屬性表組成。他們分別對(duì)應(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í)連接數(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
}
以上代碼簡(jiǎn)單的創(chuàng)建了一個(gè)界面，顯示了一幅空的網(wǎng)絡(luò)地圖。運(yùn)行如下圖：
為了放置數(shù)據(jù)，我們?cè)僭黾右粋€(gè)函數(shù)initData進(jìn)行網(wǎng)絡(luò)數(shù)據(jù)的初始化。
1private void initData() {
2 Node cloud = new Node(); //創(chuàng)建一個(gè)node對(duì)象
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)，并通過(guò)一條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é)果：
你可以觀察到，地圖上的對(duì)象按照我們?cè)O(shè)定的位置顯示出來(lái)，同時(shí)可以通過(guò)鼠標(biāo)進(jìn)行選擇、托拽等操作。同時(shí)，樹(shù)圖上也顯示了對(duì)象之間的層次關(guān)系，屬性表則顯示了當(dāng)前選中的對(duì)象的屬性集合。
除此之外，TWaver的組件還提供了縮放、平移、監(jiān)聽(tīng)各種事件、設(shè)置各種過(guò)濾器等功能。由于TWaver是專門(mén)針對(duì)電信行業(yè)而設(shè)計(jì)，所以直接提供了對(duì)告警、事件、自動(dòng)布局等功能的支持。
4.綜合舉例
看了一上例子，相信你已經(jīng)對(duì)TWaver有了初步認(rèn)識(shí)。下面介紹一個(gè)復(fù)雜一點(diǎn)的例子。網(wǎng)絡(luò)結(jié)構(gòu)雖然更加復(fù)雜了，但是TWaver的使用還是同樣簡(jiǎn)單。下圖是一個(gè)在實(shí)際項(xiàng)目中綜合使用了TWaver各種對(duì)象創(chuàng)建的一幅復(fù)雜一點(diǎn)的網(wǎng)絡(luò)拓?fù)鋱D：
怎么樣，還不錯(cuò)吧？別忘了它可是一幅基于Java Swing的、可交互的圖，而不是用Visio之類的工具畫(huà)出來(lái)的靜態(tài)拓?fù)鋱D。如果把我們軟件項(xiàng)目中的網(wǎng)絡(luò)結(jié)構(gòu)用這樣的效果呈現(xiàn)出來(lái)，相信客戶會(huì)非常滿意！
5.結(jié)束
下次將介紹如何通過(guò)XML數(shù)據(jù)來(lái)創(chuàng)建、加載和呈現(xiàn)網(wǎng)絡(luò)地圖。