PART

4前

述各章資料均顯示於Dos (或命令提示字元 ) 視窗，

為了操作方便、本章將引導圖型介面視窗之設計，

以為爾後各章節結合網路串流資訊、設計更為方便的操作

介面。圖型介面 (Graphic User Interface、GUI) 是使用者

與系統執行功能之介面，使用者依照圖型介面視窗的種類

與位置、以滑鼠或鍵盤驅動系統功能作執行。

圖型介面(GUI)與 網路應用

Chapter 19視窗架構 (Frame Structures)

前述各章資料均顯示於 Dos ( 或命令提示字元 ) 視窗，為了操作方便、本章將引導

圖型介面視窗之設計，以為爾後各章節結合網路串流資訊、設計更為方便的操作介

面。圖型介面 (Graphic User Interface、GUI) 是使用者與系統執行功能之介面，使用

者依照圖型介面視窗的種類與位置、以滑鼠或鍵盤驅動系統功能之執行。

Chapter 20圖型介面與網路對播 (GUI and Intercross Transition)

本書已於第十五章探討網路對播之程式架構與設計，於十九章探討視窗圖型界面，

本章將綜合此兩章之內容，設計一組網路對播之視窗圖型界面，讓使用者輕鬆有效

地操作網路對播。除了第十五章、第十九章之外，仍尚有一些關鍵問題需待解決，

希望讀者有耐心地依序本章導引步驟研讀，將自然心領意會。在第十五章、我們以

flag 區隔輸入輸出的時機，本章則以鍵盤事件作區隔，使用者執行時將更為方便、

更為靈活。

Chapter 21圖型介面與網路群播 (GUI and Multi Broadcast)

一個 Server 端伺服器，多個 Client 端電腦，當各 Client 端向 Server 端伺服器網站註

冊報到後，彼此即可相互群播傳遞資料，如是執行情形我們已於十八章曾作基礎架

構之討論。本章再依前述各章節之經驗，將群播原理執行於圖形框架視窗顯示上。

於 Server 端建立一 Hash Table 管理各 Client 端網路送來的資料，再將資料網路分流

送給各 Client 端，猶如一個網路會議室。

C H A P T E R

19視窗架構

Frame Structures

19-1 簡介

19-2 Frame Class

19-3 TextField Class

19-4 BorderLayout Class

▌習題 Exercises

19-2

前述各章資料均顯示於 Dos ( 或命令提示字元 ) 視窗，為了操作方便、本章將

引導圖型介面視窗之設計，以為爾後各章節結合網路串流資訊、設計更為方便的

操作介面。

圖型介面 (Graphic User Interface、GUI) 是使用者與系統執行功能之介面，使

用者依照圖型介面視窗的種類與位置、以滑鼠或鍵盤驅動系統功能之執行。

java.awt.Frame 繼承 (extends) 自 Window → Container → Component → Object，

此類別物件可建立一個視窗外框，配合網路程式，美觀網路串流之應用。

建構子： ( 如範例 152)

　public Frame();

　public Frame(String title);

其中參數 title 為視窗左上方之標示名稱。

類別變數： ( 如範例 152)

　public final static int CROSSEAIR_CURSOR;

　public final static int DEFALULT_CURSOR;

　public final static int E_RESIZE_CURSOR;

　public final static int HAND_CURSOR;

　public final static int MOVE_CURSOR;

　public final static int N_RESIZE_CURSOR;

　public final static int NE_RESIZE_CURSOR;

　public final static int NW_RESIZE_CURSOR;

　public final static int S_RESIZE_CURSOR;

19-1 簡介19-1 簡介

19-2 Frame Class19-2 Frame Class

11

22

CHAPTER視窗架構 Frame Structures

19-3

19　public final static int SE_RESIZE_CURSOR;

　public final static int SW_RESIZE_CURSOR;

　public final static int TEXT_CURSOR;

　public final static int W_RESIZE_CURSOR;

　public final static int WAIT_CURSOR;

回傳各式型態之游標符號。( 共 14 種 )

生存實體方法程序： ( 如範例 153)

　public int getCursorType();

回傳游標之型態。

　public int getTitle();

回傳框架之標示名稱。

　public int isResizable();

回傳框架是否可伸縮。

　public void setCursor(int cursorType);

設定游標之型態。

　public void setTitle(String title);

設定框架之標示名稱。

　public void setResizable(boolean resizale);

設定框架為可伸縮。

　public void setSize(int w, int h);

設定框架之寬高。

　public void setVisible(true);

顯示視窗框架。

　public void dispose();

關閉框架，並釋出有關資源。

33

19-4

範例 152 設計檔案 Ex19_2_1.java 其功能為解釋視窗框架與游標型態之建立。

01 import java.awt.*;

02 class Ex19_2_1 {

03 public Ex19_2_1() { 04 Frame frame = new Frame("myFrame");05 frame.setCursor(Frame.HAND_CURSOR);06 frame.setSize(300, 350);07 frame.setVisible(true); 08 }

09 public static void main(String[] args) {

10 Ex19_2_1 teststart = new Ex19_2_1();11 }

12 }

列 04 建立框架物件 frame。列 05 設定游標型態。

列 06 設定框架之寬高。

列 07 顯示視窗框架。

執行結果 ( 視窗框架與型態游標。於 Dos

視窗按 Ctrl-c 關閉框架 )

CHAPTER視窗架構 Frame Structures

19-5

19範例 153 設計檔案 Ex19_2_2.java 其功能為解釋類別 Frame 各方法程序之

應用。

01 import java.awt.*;

02 class Ex19_2_2 {

03 public Ex19_2_2() { 04 Frame frame = new Frame("myFrame");05 frame.setCursor(Frame.HAND_CURSOR);06 frame.setSize(300, 350);07 frame.setVisible(true); 08 System.out.println("frame.getCursorType() : " + frame.getCursorType());09 System.out.println("frame.getTitle() : " + frame.getTitle());10 System.out.println("frame.isResizable() : " + frame.isResizable());11 }

12 public static void main(String[] args) {

13 Ex19_2_2 teststart = new Ex19_2_2();14 }

15 }

列 08 讀取游標之型態。

列 09 讀取框架之標示名稱。

列 10 讀取框架是否可伸縮。

執行結果

frame.getCursorType() : 12frame.getTitle() : myFrame

frame.isResizable() : true

19-6

如果設計一個繼承類別 Frame 的程式，可省略產生新物件的過程，直接執行

相同功能程式碼。設計範例 154，以繼承類別 Frame 比較範例 152，執行相同功能

內容。

範例 154 比較範例 152，設計檔案 Ex19_2_3.java 其功能為解釋繼承類別

Frame 之使用方法。

01 import java.awt.*;

02 class Ex19_2_3 extends Frame {

03 public Ex19_2_3() { 04 super("myFrame");05 setCursor(Frame.HAND_CURSOR);06 setSize(300, 350);07 setVisible(true); 08 }

09 public static void main(String[] args) {

10 Ex19_2_3 teststart = new Ex19_2_3();

CHAPTER視窗架構 Frame Structures

19-7

1911 }

12 }

列 04 進入父類別 Frame，設定視窗框架之標示名稱。

列 05~07 設定游標型態、設定框架之寬高、顯示視窗框架。

執行結果 ( 同範例 152)

java.awt.TextField 繼承 (extends) 自 TextComponent → Component → Object，

此類別物件可配合視窗框架允許產生一列文字，包括初始字、新鍵入字、中文

字。

建構子： ( 如範例 155)

　public TextField();

　public TextField(String text);

其中參數 text 為初始字。

實體方法程序： ( 如範例 156)

　public String getText();

回傳框架物件內之字串。

　public void setText(String s);

於框架物件內設定字串，參數 s 為字串內容。

19-3 TextField Class19-3 TextField Class

11

22

19-8

範例 155 設計檔案 Ex19_3_1.java 其功能為解釋視窗框架內之文字應用。

01 import java.awt.*;

02 class Ex19_3_1 extends Frame {

03 public Ex19_3_1() { 04 super("myFrame");05 setSize(300, 350);06 setVisible(true);

07 TextField tf = new TextField("Initial word");08 add(tf); 09 }

10 public static void main(String[] args) {

11 Ex19_3_1 teststart = new Ex19_3_1();12 }

13 }

列 07 建立文字輸入區物件 tf，其中參數為初始字 Initial word。列 08 將物件 tf 加入正在執行的視窗框架內。

執行結果

本例初始字為 “Initial word”；另增鍵盤輸入 “abcd 中文測試”。

CHAPTER視窗架構 Frame Structures

19-9

19範例 156 設計檔案 Ex19_3_2.java 其功能為解釋視窗框架文字之設定與讀取。

01 import java.awt.*;

02 class Ex19_3_2 extends Frame {

03 public Ex19_3_2() { 04 super("myFrame");05 setSize(300, 350);06 setVisible(true);

07 TextField tf = new TextField("Initial word");08 add(tf); 09 tf.setText("The new setText");10 System.out.println("tf.getText() = " + tf.getText()); 11 }

12 public static void main(String[] args) {

13 Ex19_3_2 teststart = new Ex19_3_2();14 }

15 }

列 09 於框架物件內設定字串。

列 10 讀取框架物件內之字串。

執行結果

19-10

java.awt.BorderLayout 繼承自 Object，此類別可建立版面配置管理員之物件，

搭配區域常數 EAST、WEST、NORTH、SOUTH 與 CENTER，可將視窗框架內

容劃分成 5 個版面。( 如範例 157)

建構子：

public BorderLayout();

範例 157 設計檔案 Ex19_4.java 其功能為解釋類別 BorderLayout 與區域常數

EAST、WEST、NORTH、SOUTH 與 CENTER，劃分視窗版

面之應用。

01 import java.awt.*;

02 class Ex19_4 extends Frame {

03 public Ex19_4() { 04 super("myFrame");

05 TextField tfE = new TextField("East Area");06 add(tfE, BorderLayout.EAST);

07 TextField tfS = new TextField("South Area");08 add(tfS, BorderLayout.SOUTH);

09 TextField tfW = new TextField("West Area");10 add(tfW, BorderLayout.WEST);

11 TextField tfN = new TextField("North Area");12 add(tfN, BorderLayout.NORTH);

13 TextField tfC = new TextField("Center Area");14 add(tfC, BorderLayout.CENTER);

19-4 BorderLayout Class19-4 BorderLayout Class

CHAPTER視窗架構 Frame Structures

19-11

1915 setSize(350, 300);16 setVisible(true); 17 }

18 public static void main(String[] args) {

19 Ex19_4 teststart = new Ex19_4();20 }

21 }

列 05~14 使用區域常數 EAST、WEST、NORTH、SOUTH 與 CENTER，將視

窗框架內容劃分成 5 個版面。

執行結果

19-12

1. 使用圖型介面 (Graphic User Interface.GUI) 的意義為何？

2. Frame Class 之功能為何？

3. 建構子 Frame(String title) 其中參數 title 有何意義？

4. Frame Class 有幾種游標型態？

5. 方法程序 setVisible(true) 之功能為何？

6. 如果以繼承類別 Frame 的方式設計一個程式，比較使用 Frame 物件其

優點如何？

7. TextField Class 之功能為何？

8. BorderLayout Class 之功能為何？

習題 Exercises