第六章 Java圖形用戶接口
對 一 個 優 秀 的 應 用 程 序 來 說， 良 好 的 圖 形 用 戶 接 口 是必 不 可 少 的。 缺 少 良 好 的 圖 形 用 戶 接 口， 將 會 給 用 戶 理 解和 使 用 應 用 程 序 帶 來 很 多 不 便。 很 難 想 象 用 戶 爲 了 學 會使 用 一 個 應 用 程 序， 去 記 一 大 堆 命 令。 Java提 ?copy; 了 生 成一 個 良 好 的 圖 形 用 戶 接 口 所 需 要 的 一 ?copy; 基 本 元 件： 面板（Panel?copy;、 按 鈕 （Button?copy;、 標 ?copy;（Label?copy;、 畫板（Canvases?copy;、 滾 動 條（Scrollbar?copy;、 列 表 框（List?copy;、文 本 域（Text Field?copy;、 文 本 區（Text Area?copy;。
6.1 面 板
面 板 提 ?copy; 了 建 立 應 用 程 序 的 空 間。 你 可 以 把 圖 形 元件（包 括 其 他 面 板?copy; 放 在 一 個 面 板 上。 Applet類 提 ?copy; 了 一 個 基 本 的 面 板。
6.1.1 布 局 管 理
Java提 ?copy; 了 幾 種 布 局： 順 序 布 局（Flow Layout?copy;、 邊界 布 局（Border Layout?copy; 和 網 格 布 局 （Grid Layout?copy;。
6.1.1.1 順 序 布 局
順 序 布 局（Flow Layout?copy; 是 最 基 本 的 一 種 布 局， 面 板 的缺 省 布 局 就 是 順 序 布 局。 順 序 布 局 指 的 是 把 圖 形 元 件 一個 接 一 個 地 ?reg; 平 地 放 在 面 板 上。 下 面 是 一 個 順 序 布 局的 例 子：
import java.awt.*; import java.applet.Applet;
public class myButtons extends Applet { Button button1, button2, button3; public void init() { button1 = new Button("確 定"); button2 = new Button("打 開"); button3 = new Button("關 閉"); add(button1); add(button2); add(button3); } }
該 程 序 生 成 的 布 局 如 下：
圖 6.1
6.1.1.2 邊 界 布 局
邊 界 布 局 包 括 五 個 區： 北 區、 南 區、 東 區、 西 區 和 中 區。這 幾 個 區 在 面 板 上 的 分 布 規 律 是“ 上 北 下 南， 左 西 右 東”。下 面 是 一 個 邊 界 布 局 的 例 子：
import java.awt.*; import java.applet.Applet;
public class buttonDir extends Applet {
Button buttonN, buttonS, buttonW, buttonE, buttonC;
public void init() { setLayout(new BorderLayout()); buttonN = new Button("?reg;"); buttonS = new Button("火"); buttonE = new Button("木"); buttonW = new Button("金"); buttonC = new Button("土"); add("North", buttonN); add("South", buttonS); add("East", buttonE); add("West", buttonW); add("Center", buttonC); } }
下 面 是 該 程 序 運 行 的 結 果：
圖 6.2
6.1.1.3 網 格 布 局
網 格 布 局 把 面 板 分 成 一 個 個 的 網 格， 你 ?以 給 出 網 格的 行 數 和 列 數。 下 面 是 一 個 網 格 布 局 的 例 子：
import java.awt.*; import java.applet.Applet;
public class buttonGrid extends Applet { Button button1, button2, button3, button4, button5, button6, button7, button8;
public void init() { setLayout(new GridLayout(4,2)); button1 = new Button("乾"); button2 = new Button("坤"); button3 = new Button("艮"); button4 = new Button("震"); button5 = new Button("坎"); button6 = new Button("離"); button7 = new Button("巽"); button8 = new Button("兌"); add(button1); add(button2); add(button3); add(button4); add(button5); add(button6); add(button7); add(button8); } }
下 面 是 該 程 序 運 行 的 結 果：
圖 6.3
6.2 按 鈕
6.2.1 按 鈕 事 件
用 戶 點 一 下 按 鈕， 就 會 有 一 個 按 鈕 事 件 發 生。 你 可 以 通過 覆 蓋 一 個applet的action成 員 函 數 來 捕 捉 按 鈕 事 件。
public boolean action (Event e, Object o) { if (e.target instanceof Button) { system.out.println ((string) o); } else { System.out.println ("Non-button event"); } return true; }
6.2.2 按 鈕 類 型
Java提 ?copy; 了 標 準 的 按 壓 式 按 鈕, 同 時 也 提 ?copy; 了 選擇 式 按 鈕 和 標 記 式 按 鈕。
6.2.2.1 選 擇 式 按 鈕
選 擇 式 按 鈕 提 ?copy; 了 從 幾 個 選 項 中 選 一 個 選 項 的 功能。 下 面 是 從 幾 個 市 中 選 一 個 市 的 例 子， 市 名 放 在 選 擇 式按 鈕 中：
CityChooser = new Choice();
CityChooser.addItem("北 ?copy;"); CityChooser.addItem("上海"); CityChooser.addItem("天 津");
add(CityChooser);
圖 6.4
6.2.2.2 標 記 式 按 鈕
標 記 式 按 鈕 的 狀 態 作 爲 標 記 框 事 件 的 對 象 參 數 返 回。下 面 是 一 個 標 記 式 按 鈕 的 例 子：
Checkbox fillStyleButton; fillStyleButton = new Checkbox("Solid");
public boolean action(Event e, Object arg) { if (e.target instanceof Checkbox) { System.out.println("Checkbox: " + arg); } return true; }
圖 6.5
6.2.2.3 按 鍵 式 按 鈕
按 鍵 式 按 鈕 是 一 組 按 鈕， 用 戶 可 以 選 中 其 中 一 個， 同 時這 一 組 中 的 其 他 按 鈕 將 被 關 閉。 下 面 是 一 個 按 鍵 式 按 鈕的 例 子： public class CheckBox extends Applet { CheckboxGroup cbg;
public void init() { cbg = new CheckboxGroup(); add (new Checkbox("one ", cbg, true)); add (new Checkbox("two ", cbg,false)); add (new Checkbox("three", cbg, false)); } }
圖 6.6
6.2.3 自 包 含 按 鈕
Java語 言 的 面 向 對 象 特 性 使 我 們 能 夠 創 建 完 全 自 包 含 的按 鈕。 在 自 包 含 按 鈕 裏， 你 可 以 在 ?copy; 展 按 鈕 類 裏 建 立事 件 控 制 函 數。 下 面 是 一 個 自 包 含 按 鈕 的 例 子：
import java.awt.*; import java.applet.Applet;
class okButton extends Button {
public okButton() { setLabel("Ok"); }
public boolean action(Event e, Object arg) { System.out.println("OKButton"); return true; } }
public class buttontest extends Applet { okButton myOkButton;
public void init() { myOkButton = new okButton(); add(myOkButton); } }
圖 6.7
6.3 標 ?copy;
標 ?copy; 是 一 種 放 到 面 板 上 的 靜 止 的 正 文。 下 面 是 一 個標 ?copy; 的 例 子： import java.awt.*; import java.applet.Applet;
public class label extends Applet {
public void init() { setLayout(new FlowLayout(FlowLayout.CENTER, 10, 10)); Label label1 = new Label("你 好!"); Label label2 = new Label("另 一 個 標 ?copy;"); add(label1); add(label2); } }
下 面 是 運 行 結 果：
圖 6.8
6.4 列 表 框
列 表 框 使 用 戶 易 於 操 作 大 量 的 選 項。 創 建 列 表 框 的 方法 和Choice button有 ?copy; 相 似。 列 表 框 的 所 有 條 目 都 是 可 見的， 如 果 選 項 很 多， 超 出 了 列 表 框 可 見 區 的 範 圍， 則 列 表框 的 旁 邊 將 會 有 一 個 滾 動 條。 首 先， 創 建 列 表 框： List l = new List(4, false); 這 個 成 員 函 數 創 建 了 一 個 顯 示4行 的 列 表框。 第 二 個 參 數“false"表 示 這 個 列 表 框 是 單 選 的， 如 果是“true "， 則 表 示 是 多 選 的。 下 面 增 加 列 表 框 的 選 項：
l.addItem("北 ?copy; 大 學"); l.addItem("清 華 大 學"); l.addItem("吉 林 大 學"); l.addItem("復 ?copy; 大 學"); l.addItem("南 開 大 學"); l.addItem("天 津 大 學"); l.addItem("南 ?copy; 大 學"); add(l);
圖 6.9
6.4.1 在 列 表 框 中 進 行 選 擇
可 以 用 成 員 函 數getSelectedItem()或getSelectedItems()來 接 收 在列 表 框 中 被 選 的 選 項。 在 單 選 列 表 框 裏，“ 雙 擊” 一 個 選項 就 可 以 觸 發 一 個 可 被action()成 員 函 數 捕 捉 到 的 事 件。 public boolean action(Event e, Object arg) { . . . if (e.target instanceof List) { System.out.println("List entry:" + arg); } . . . }
6.4.2 多 選 列 表 框
對 於 多 選 列 表 框， 要 使 你 的 選 擇 產 生 作 用， 需 要 使 用 其他 的 外 部 事 件。 例 如， 你 可 以 使 用 按 鈕 事 件：
圖 6.10
public boolean action(Event e, Object arg) { . . . if (e.target instanceof Button) { . . . if ("Ok".equals(arg)) { string[] selected ; selected = l.getSelectedItems( ); for (int I = 0; I< selected.length; I++) { System.out.println(selected[i]); } } } }
6.5 文 本 域
文 本 域 一 般 用 來 讓 用 戶 輸 入 象 姓 名、 信 用 卡 號 這 樣 的信 息， 它 是 一 個 能 夠 接 收 用 戶 的 鍵 盤 輸 入 的 小 塊 區 域。
6.5.1 創 建 文 本 域
在 創 建 文 本 域 時， 有 四 種 類 型 ?copy; 你 選 擇： 空 的、 空的 並 且 具 有 指 定 長 度、 帶 有 初 始 文 本 內 容 的 和 帶 有 初 始文 本 內 容 並 具 有 指 定 長 度 的。 下 面 是 生 成 這 四 種 文 本 域的 代 碼：
TextField tf1, tf2, tf3, tf4;
// 空 的 文 本 域 tf1 = new TextField() ; // 長 度 爲20的 空 的 文 本域 tf2 = new TextField(20) ; // 帶 有 初 始 文 本 內 容 的 文 本 域 tf3 = new TextField("你 好") ; // 帶 有 初 始 文 本 內 容 並 具 有指 定 長 度 的 文 本 域 tf4 = new TextField("你 好", 30) ; add(tf1) ; add(tf2) ; add(tf3) ; add(tf4) ;
圖 6.11
6.5.2 文 本 域 事 件
當 用 戶 在 文 本 域 裏 敲“ 回 車” 鍵 時， 就 產 生 了 一 個 文 本域 事 件。 象 其 他 事 件 一 樣， 你 可 以 以 在 成 員 函 數action()中捕 捉 到 這 個 事 件。
public boolean action(Event e, Object arg) { . . . if (e.target instanceof TextField) { System.out.println("TextField: "+arg); } . . . }
6.6 文 本 區
文 本 區 可 以 顯 示 大 段 的 文 本。
6.6.1 創 建 文 本 區
與 文 本 域 類 似， 創 建 文 本 區 時 也 有 四 種 類 型 ?copy; 選 擇，但 如 果 指 定 文 本 區 的 大 小， 必 須 同 時 指 定 行 數 和 列 數。
TextArea ta1, ta2; // 一 個 空 的 文 本 區 ta1 = new TextArea();
// 一 個 帶 有 初 始 內 容、 大 小 爲5 x 40 的 文 本 區 ta2 = new TextArea("你好!", 5, 40);
可 以 用 成 員 函 數setEditable()來 決 定 用 戶 是 否 可 對 文 本 區的 內 容 進 行 編 輯。
// 使 文 本 區 爲 只 讀 的 ta2.setEditable(false)
圖 6.12
6.6.2 接 收 文 本 區 的 內 容
可 以 用 成 員 函 數getText()來 獲 得 文 本 區 的 當 前 內 容。 例 如： System.out.println(ta1.getText()); 文 本 區 本 身 不 產 生 自 己 的 事件。 但 你 可 以 用 外 部 事 件 來 接 收 文 本 區 的 內 容：
public boolean action(Event e, Object o) { if (e.target instanceof Button) { if ("send".equals(o)) { String textToSend = ta1.getText (); System.out.println("sending: " + textTosend); mySendFunction(textToSend); } } else { . . . } }
6.7 畫 板
畫 板 能 夠 捕 捉 到 ?copy; 露 事 件、 鼠 標 事 件 和 其 他 類 似 的事 件。 基 本 的 畫 板 類 不 處 理 這 ?copy; 事 件， 但 你 可 以 ?copy; 展 它 來 創 建 有 你 所 需 功 能 的 畫 板 類。
6.7.1 創 建 畫 板
import java.awt.*; import java.applet.Applet;
public class superGUI extends Applet { . . . myCanvas doodle; . . . public void init() { . . . // 建 立 我 們 的 畫 板 doodle = new myCanvas(); doodle.reshape(0, 0, 100, 100); leftPanel.add("Center",doodle); . . . } }
class myCanvas extends Canvas { public void paint(Graphics g) { g.drawRect(0, 0, 99, 99); g.drawString("Canvas", 15, 40); } }
6.7.2 畫 板 事 件
你 可 以 覆 蓋 一 般 的 事 件 處 理 成 員 函 數。 下 面 是 一 個 包含 了mouseDown事 件 處 理 的 例 子：
import java.awt.*; import java.applet.Applet;
public class canvas extends Applet {
Button b1;
public void init() { // Set our layout as a Border style setLayout(new BorderLayout(15, 15)); b1 = new Button("Test"); myCanvas c1 = new myCanvas(100, 100); // add the canvas and the button to the applet add("Center", c1); add("South", b1); }
public boolean action(Event e, Object arg) { System.out.println("Event: " + arg); return true; }
public boolean mouseDown(Event e, int x, int y) { System.out.println("Mouse works: (" + x + "," + y + ")"); return true; } }
class myCanvas extends Canvas { private int width; private int height;
public myCanvas(int w, int h) { width = w; height = h; reshape(0, 0, w, h); }
public void paint(Graphics g) { g.setColor(Color.blue); g.fillRect(0, 0, width, height); }
public boolean mouseDown(Event e, int x, int y) { if (( x < width) && (y <height)) { System.out.println("Canvas mouse works: (" + x + "," + y +")"); return true; } return false; //Not our mouseDown } }
6.8 滾 動 條
在 某 ?copy; 程 序 中， 需 要 調 整 線 性 的 值， 這 時 就 需 要 滾動 條。 滾 動 條 提 ?copy; 了 易 於 操 作 的 值 的 範 圍 或 區 的 範 圍。
6.8.1 創 建 滾 動 條
當 創 建 一 個 滾 動 條 時， 必 須 指 定 它 的 方 向、 初 始 值、 滑塊 的 大 小、 最 小 值 和 最 大 值。
public Scrollbar(int orientation, int initialValue, int sizeOfSlider, int minValue, int maxValue);
下 面 是 一 個 例 子：
Scrollbar redSlider; public void init() { redSlider = new Scrollbar(Scrollbar.VERTICAL, 0, 1, 0, 255); add(redSlider); }
圖 6.13
6.8.2 滾 動 條 事 件
和 其 他 接 口 元 件 一 樣， 滾 動 條 產 生 一 個 你 可 以 控 制 的事 件， 但 和 其 他 事 件 不 同， 你 必 須 直 接 使 用 成 員 函 數handleEvent( )， 而 不 能 使 用 成 員 函 數action( ) .
public boolean handleEvent (Event e) { if (e.target instanceof Scrollbar) { System.out.println("Scrollbar: " + ((Scrollbar)e.target).getValue( )); return true; } return super.handleEvent(e); }
6.8.3 滾 動 條 的 值 的 顯 示
如 果 你 想 顯 示 滑 塊 所 在 位 置 的 值， 需 要 加 一 個 自 己 的文 本 域。 下 面 是 一 個 例 子。
import java.awt.*; import java.applet.Applet;
public class redSlider extends Applet { Scrollbar redslider; TextField redvalue; Label redlabel;
public void init( ) { setLayout(new GridLayout(1, 3)); redslider = new Scrollbar(Scrollbar.HORIZONTAL, 0, 1, 0, 255); redvalue = new TextField("0", 5); redvalue.setEditable(false); redlable = new Label("Red (0-255)"); add(redlabel); add(redslider); add(redvalue); }
public boolean handleEvent(Event e) { if (e.target instanceof Scrollbar) { redvalue.setText(Integer.toString(((Scrollbar)e.target).getValue())); return true; } return super.handleEvent(e); }
public boolean action(Event e, Object arg) { System.out.println("Event" + arg); return true; } }
圖 6.14
本 章 小 結
1. Java提 ?copy; 了 生 成 一 個 良 好 的 圖 形 用 戶 接 口 所 需 要的 一 ?copy; 基 本 元 件： 面 板（Panel?copy;、 按 鈕 （Button?copy;、標 ?copy;（Label?copy;、 畫 板（Canvases?copy;、 滾 動 條（Scrollbar?copy;、列 表 框（List?copy;、 文 本 域（Text Field?copy;、 文 本 區（Text Area?copy;。 2. 大 部 分 元 件 都 有 自 己 的 事 件， 你 可 以 捕 捉 並 處 理 它 們。