ch11_圖形用戶界面設(shè)計(jì)

1、圖形用戶界面設(shè)計(jì)字符界面用字符串、命令行的方式與用戶交互圖形用戶界面:Graphics User Interface用直觀的圖形來表示數(shù)據(jù)用直觀、方便的GUI標(biāo)準(zhǔn)組件來接收命令GUI組成成分的標(biāo)準(zhǔn)化Java的圖形用戶界面編程：java.awt包圖形用戶界面的構(gòu)成容器：布局、安排標(biāo)準(zhǔn)組件用戶自定義成分設(shè)計(jì)&實(shí)現(xiàn)圖形用戶界面的工作創(chuàng)建GUI各組成成分，并安排從屬位置關(guān)系定義GUI各成分對(duì)不同事件的響應(yīng)，實(shí)現(xiàn)與用戶的交互功能Building GUIs with AWT(Abstract Window Toolkit)java.awt包提供了基本的java程序的GUI設(shè)計(jì)工具。ComponentCon

2、tainerLayoutManagerComponent（組件）Java的圖形用戶界面的最基本組成部分是組件，組件是一個(gè)可以以圖形化的方式顯示在屏幕上并能與用戶進(jìn)行交互的對(duì)象，例如一個(gè)按鈕，一個(gè)標(biāo)簽等。組件不能獨(dú)立地顯示出來，必須將組件放在一定的容器中才可以顯示出來。Component（組件）Component 中 定 義 了 各 種 組 件 的 基 本 使 用 方 法 ， 這 些 也 是 組 件 的 常用 方 法 。 我 們 如 果 要 對(duì) 窗 口 中 的 對(duì) 象 （ 組 件 ） 進(jìn) 行 一 些基 本 操 作 ， 例 如 改 變 背 景 的 顏 色 、 改 變 窗 口 對(duì) 象 的 大 小等

3、等 ， 都 是 通 過 調(diào) 用 類 Component 中 定 義 的 方 法 來 實(shí) 現(xiàn) 的 。只 有 一 些 屬 于 某 種 特 定 組 件 的 特 殊 用 法 不 在 類 Component 中定 義 。Component中的常用方法方 法 說 明action 用戶對(duì)組件進(jìn)行操作時(shí)調(diào)用的方法disable 使得組件不再能夠被使用enable 使得組件能夠被使用 （與disable功能相反）getBackground 取得組件的背景顏色getFont 取得組件所使用的字型getForeground 取得組件的前景顏色Component中的常用方法（續(xù)）handleEvent 當(dāng)發(fā)生事件時(shí)調(diào)

4、用的方法hide 使得組件隱藏起來，不能夠再在屏幕上顯示 Inside 檢查某個(gè)坐標(biāo)是否在組件以內(nèi)isEnabled 檢查組件現(xiàn)在是否可以被使用isShowing 檢查組件目前是否正在屏幕上顯示isVisible 檢查組件是否被隱藏起來了keyDown 當(dāng)用戶按下鍵盤上的鍵時(shí)調(diào)用的方法keyUp 用戶放開鍵盤上的鍵時(shí)調(diào)用的方法Component中的常用方法（續(xù)）locate 給出包含某個(gè)坐標(biāo)的組件location 給出組件當(dāng)前的坐標(biāo)值mouseDown 用戶按下鼠標(biāo)時(shí)調(diào)用的方法mouseDrag 用戶拖曳鼠標(biāo)時(shí)調(diào)用的方法mouseEnter 鼠標(biāo)進(jìn)入組件中時(shí)調(diào)用的方法mouseExit 鼠標(biāo)離

5、開組件時(shí)調(diào)用的方法mouseMove 鼠標(biāo)被移動(dòng)時(shí)調(diào)用的方法mouseUp 用戶放開鼠標(biāo)的按鍵時(shí)調(diào)用的方法Component中的常用方法（續(xù)）move 移動(dòng)組件repaint 重畫組件resize 改變組件的大小setBackground 設(shè)置組件的背景顏色setFont 設(shè)置組件所使用的字型setForeground 設(shè)置組件的前景顏色setVisiable 設(shè)置組件的可見性 show 顯示組件（解除隱藏）size 返回當(dāng)前組件的大小Container（容器）容器(Container)實(shí)際上是Component的子類，因此容器本身也是一個(gè)組件，具有組件的所有性質(zhì)，另外還具有容納其它組件和容器

6、的功能。Container（容器） 組 件容 器 的 出 現(xiàn) 使 得 事 情 變 得 復(fù) 雜 了 起 來 。 我 們 可 以 把 組 件放 在 組 件 容 器 里 ， 也 可 以 把 組 件 容 器 放 在 另 一 個(gè) 組 件 容器 里 ， 這 樣 就 形 成 了 有 層 次 的 組 件 結(jié) 構(gòu) 。 我 們 可 以 把 普通 的 組 件 想 像 成 為 雞 蛋 ， 而 把 組 件 容 器 想 像 成 為 籃 子 。那 么 ， 雞 蛋 可 以 放 在 小 籃 子 里 ， 小 籃 子 和 別 的 雞 蛋 又 可以 放 在 大 籃 子 里 。 于 是 ， 籃 子 里 可 以 有 雞 蛋 ， 還 可

7、以 有其 他 的 籃 子。Container（容器）Component Container ButtonTextComponentCheckboxTextAreaTextField Panel Applet Window Frame Dialog MenuComponentMenuMenuBarMenuItemContainer（容器）類 Container 的 重 要 子 類所 有可 以 用 作 組 件 容 器 的 窗 口 對(duì) 象 ， 都 是 由 類 Container 或 者 類 Container 的 子 類 生 成 的 。 1. 類 Window ： 類 Container 的 子 類

8、 ， 是 畫 窗 口 最 基 本 的 類 2. 類 Dialog ： 類 Window 的 子 類 ， 用 于 生 成 各 種 對(duì) 話 框 。 3. 類 FileDialog ： 繼 承 類 Dialog 的 類 ， 可 以 用 來 生 成 文 件 對(duì) 話 框。 （ 文 件 對(duì) 話 框 用 來 讓 用 戶 選 擇 和 輸 入 文 件 名 ）。Container（容器）4. 類 Frame ： 類 Window 的 子 類 ， 用 來 設(shè) 計(jì) 具 有 一 般 窗 口 標(biāo)準(zhǔn) 和 菜單 系 統(tǒng) 的 窗 口 。 5. 類 Panel ： 類 Container 的 子 類 ， 是 類 Applet 的

9、 父 類 ； 類 Panel 在小 應(yīng) 用 程 序 中 不 可 缺 少 ， 它 所 定 義 的 窗 口 對(duì) 象 是 一 塊 簡(jiǎn)單 的 區(qū) 域 ， 這 塊 區(qū) 域 用 來 放 置 各 種 有 用 的 窗 口 對(duì) 象 。Container（容器）Panel 和 普 通 的 Window 相 似 之 處 是 可 以 把 許 多 相 關(guān) 的 窗 口 對(duì)象 放 在 同 一 個(gè) Panel 中 ； Panel 和Window 不 同 之 處 在 于 我 們 可以 方 便 地 使 用 Panel 來 安 排 一 組 一 組 的 窗 口 對(duì) 象 ， 而 不 必為 安 排 每 一 個(gè) 窗 口 對(duì) 象 而 發(fā) 愁

10、 。 當(dāng) 小應(yīng) 用 程 序 在 WWW 瀏 覽 器 中 執(zhí) 行 的 時(shí) 候 ， 瀏 覽 器 會(huì) 自 動(dòng) 地 為它 準(zhǔn) 備 一 個(gè) Panel ， 然 后 程 序 中 有 關(guān) 窗 口 的 操 作 都 會(huì) 在 這個(gè) Panel 上 進(jìn) 行 。Container（容器）Panel(面板)Applet類Window：無邊框、菜單的空白窗口Frame：用于Application含邊框、菜單的 獨(dú)立窗口，與 Applet平級(jí)Dialog依賴于 Frame的非 獨(dú)立窗口練習(xí)實(shí)例1：在一個(gè)Java界面上顯示一個(gè)10以內(nèi)的整數(shù)，每按一次按鈕，顯示的數(shù)增加一倍。實(shí)例2：顯示一圖片，按“開始”按鈕，圖片移動(dòng)一個(gè)位置

11、LayoutManager（布局管理器）為了使我們生成的圖形用戶界面具有良好的平臺(tái)無關(guān)性，Java語言中，提供了布局管理器這個(gè)工具來管理組件在容器中的布局，而不使用直接設(shè)置組件位置和大小的方式。每個(gè)容器都有一個(gè)布局管理器，當(dāng)容器需要對(duì)某個(gè)組件進(jìn)行定位或判斷其大小尺寸時(shí)，就會(huì)調(diào)用其對(duì)應(yīng)的布局管理器。在程序中安排組件的位置和大小時(shí)，應(yīng)該注意：容器中的布局管理器負(fù)責(zé)各個(gè)組件的大小和位置，因此用戶無法在這種情況下設(shè)置組件的這些屬性。如果試圖使用Java語言提供的setLocation()，setSize()，setBounds()等方法，則都會(huì)被布局管理器覆蓋。如果用戶確實(shí)需要親自設(shè)置組件大小或位置，

12、則應(yīng)取消該容器的布局管理器，方法為：setLayout(null)；LayoutManager（布局管理器）LayoutManager（布局管理器）布局管理器用于控制組件在容器中的布局種類：FlowLayout: 組件在一行中從左至右水平排列，排滿后折行BorderLayout：北、南、東、西、中CardLayout：每一個(gè)組件作為一個(gè)卡片，容器僅顯示多個(gè)卡片中的某一個(gè)LayoutManager（布局管理器）GridLayout：以行和列的網(wǎng)格形式安排組件GridBagLayout：使用復(fù)雜、功能靈活缺省的布局管理器FlowLayout:缺省的Panel布局管器BorderLayout：缺省的

13、窗口容器的管理器改變?nèi)笔〔季止芾砥鞯姆椒ǎ焕築orderLayout B=new BorderLayout(); C1.setLayout(B); C1.setLayout(new BorderLayout();常用容器FramePanelAppletFramejava.lang.Object | +-java.awt.Component | +-java.awt.Container | +-java.awt.Window | +-java.awt.Frameimport java.awt.*;public class MyFrame extends Framepublic static v

14、oid main(String args )MyFrame fr = new MyFrame(Hello Out There!);fr.setSize(200,200);fr.setBackground(Color.red);fr.setVisible(true); public MyFrame (String str)super(str);運(yùn)行結(jié)果Paneljava.lang.Object | +-java.awt.Component | +-java.awt.Container | +-java.awt.Panelimport java.awt.*;public class FrameWi

15、thPanel extends Framepublic FrameWithPanel(String str)super(str);public static void main(String args)FrameWithPanel fr = new FrameWithPanel(Frame with Panel);Panel pan=new Panel();fr.setSize(200,200);fr.setBackground(Color.red);fr.setLayout(null);pan.setSize(100,100);pan.setBackground(Color.yellow);

16、fr.add(pan);fr.setVisible(true);運(yùn)行結(jié)果：LayoutManagerFlowLayoutBorderLayoutGridLayoutCardLayoutGridBagLayoutimport java.awt.*;public class ExGuiprivate Frame f;private Button b1;private Button b2;public static void main(String args)ExGui that = new ExGui();that.go(); public void go()f = new Frame(GUI e

17、xample);f.setLayout(new FlowLayout();b1 = new Button(Press Me);b2 = new Button(Dont Press Me);f.add(b1);f.add(b2);f.pack();f.setVisible(true);運(yùn)行結(jié)果FlowLayoutPanel，Applet的缺省布局管理器。setLayout(new FlowLayout(FlowLayout.RIGHT,20,40);setLayout(new FlowLayout(FlowLayout.LEFT); setLayout(new FlowLayout(); imp

18、ort java.awt.*; public class myButtons public static void main(String args) Frame f = new Frame(); f.setLayout(new FlowLayout(); Button button1 = new Button(Ok); Button button2 = new Button(Open); Button button3 = new Button(Close); f.add(button1); f.add(button2); f.add(button3); f.setSize(300,100);

19、 f.setVisible(true); 運(yùn)行結(jié)果為：BorderLayoutWindow，F(xiàn)rame和Dialog的缺省布局管理器。BorderLayout布局管理器包括5個(gè)區(qū)域：North，South，East，West和Center。import java.awt.*;public class buttonDir public static void main(String args) Frame f = new Frame(BorderLayout); f.setLayout(new BorderLayout(); f.add(North, new Button(North); f.a

20、dd(South, new Button(South); f.add(East, new Button(East); f.add(West, new Button(West); f.add(Center, new Button(Center); f.setSize(200,200); f.setVisible(true); GridLayout使容器中各個(gè)組件呈網(wǎng)格狀布局。import java.awt.*;public class ButtonGrid public static void main(String args)Frame f = new Frame(GridLayout);f.setLayout(new GridLayout(3,2);f.add(new Button(1); f.add(new Button(2); f.add(new Button(3); f.add(new Button(4); f.add(new Button(5); f.add(new Button(6); f.setSize(200,200); f.setVisible(tr