1、第十二章 圖形用戶界面設(shè)計(jì),1、GUI 2、建立圖形用戶界面 3、外觀的管理與控制 4、事件與事件處理 5、AWT中的各種組件,1、GUI,通過(guò)圖形用戶界面（Graphical User Interface，GUI），用戶和程序之間可以方便友好地進(jìn)行交互。在Java語(yǔ)言中，Java的基礎(chǔ)類（Java Foundation Classed，JFC）是開發(fā)GUI的API集，它包括以下幾個(gè)部分： 抽象窗口工具包（AWT）：Java開發(fā)用戶界面最初的工具包，是建立JFC的主要基礎(chǔ)； 2D API：實(shí)現(xiàn)高質(zhì)量的二維圖形； Swing組件：建立在AWT之上，新的、功能更強(qiáng)大的圖形組件包； 可訪問(wèn)API：支

2、持殘疾用戶的交互； ,1、 GUI,java.awt包中包含了一個(gè)完整的類集以支持GUI程序的設(shè)計(jì)，其中的類及相互關(guān)系可以用下圖來(lái)描述：,Component類 java.awt包中最核心的類就是Component類，它是構(gòu)成Java圖形用戶界面的基礎(chǔ)，大部分組件都是由該類派生出來(lái)的。 Component類是一個(gè)抽象類，其中定義了組件所具有的一般功能：基本的繪畫支持(paint, repaint, update等)、字體和顏色等外形控制(setFont, SetForeground等)、大小和位置控制(SetSize, SetLocation等)、圖象處理(實(shí)現(xiàn)接口ImageObserver)以

3、及組件狀態(tài)控制(SetEnable, isEnable, isVisible, isValid等) ，。 常見的組件包括：Button, Checkbox, CheckboxGroup, Choice, Label, List, Canvas, TextComponent, Scrollbar等。,1、 GUI,1、 GUI,菜單類 菜單類也是一種組件，只不過(guò)菜單類并不是由一般的Component類派生的，而是從MenuComponent類繼承得到的。,1、 GUI,Container類 Container類是由Component類派生出來(lái)的一種特殊類，用來(lái)表示各種GUI組件的容器，其主要功能

4、包括： 組件的管理：方法add()可以向其中添加一個(gè)組件，remove()刪除其中的一個(gè)組件， 布局管理：每個(gè)Container類都和一個(gè)布局管理器相聯(lián)，以確定其中組件的布局。 Container類可以通過(guò)setLayout()方法設(shè)置某種布局方式。 常見的Container類有：Frame, Panel, Applet等。,2、建立圖形用戶界面-Container,Container類(Window和Panel) Window是Java.awt.Window的對(duì)象。Window是顯示屏上獨(dú)立的本機(jī)窗口，它獨(dú)立于其它容器。 Window有兩種形式：Frame(框架)和Dialog（對(duì)話框）。F

5、rame和Dialog是Window的子類。Frame是一個(gè)帶有標(biāo)題和縮放角的窗口。對(duì)話沒有菜單條。盡管它能移動(dòng)，但它不能縮放。 Panel是Java.awt.Panel的對(duì)象。Panel包含在另一個(gè)容器中，或是在Web瀏覽器的窗口中。Panel確定一個(gè)四邊形，其它組件可以放入其中。Panel必須放在Window之中（或Window的子類中）以便能顯示出來(lái)。,2、建立圖形用戶界面-Container,2、建立圖形用戶界面-Container,Frames Frames是Window的一個(gè)子類。它是帶有標(biāo)題和縮放角的窗口。它繼承于Java.awt.Container，因此，可以用add()方式來(lái)

6、給框架添加組件?？蚣艿娜笔〔季止芾砥骶褪荁order Layout。它可以用setLayout()方式來(lái)改變?？蚣茴愔械臉?gòu)造程序 Frame(String)用由String規(guī)定的標(biāo)題來(lái)創(chuàng)建一個(gè)新的不可見的框架對(duì)象。當(dāng)它還處于不可見狀態(tài)時(shí)，將所有組件添加到框架中。,2、建立圖形用戶界面Frames,import java.awt.*; public class MyFrame extends Frame public static void main (String args) MyFrame fr = new MyFrame(Hello Out There!); fr.setSize(500,

7、500); fr.setBackground(Color.blue); fr.setVisible(true); public MyFrame (String str) super(str); ,2、建立圖形用戶界面Frames（例子） MyFrame.java,Panels 象Frames一樣，Panels提供空間來(lái)連接任何GUI組件，包括其它面板。每個(gè)面板都可以有它自己的布局管理程序。 一旦一個(gè)面板對(duì)象被創(chuàng)建，為了能看得見，它必須添加到窗口或框架對(duì)象上。用Container類中的add()方式可以做到這一點(diǎn)。 下面的程序創(chuàng)建了一個(gè)小的黃色面板，并將它加到一個(gè)框架對(duì)象上：,2、建立圖形用戶界

8、面Panels,import java.awt.*; public class FrameWithPanel extends Frame public 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.blue); fr.setLayo

9、ut(null); /override default layout mgr pan.setSize (100,100); pan.setBackground(Color.yellow); fr.add(pan); fr.setVisible(true); ,2、圖形用戶界面Panels例子 FrameWithPanel.java,3、外觀的管理與控制,為了使生成的圖形用戶界面具有良好的平臺(tái)無(wú)關(guān)性，Java語(yǔ)言提供了布局管理器來(lái)管理組件在容器中的布局，而不使用直接設(shè)置組件的位置和大小的方式。每個(gè)容器都要一個(gè)布局管理器，容器中組件的定位都由它來(lái)決定。當(dāng)容器需要對(duì)某個(gè)組件進(jìn)行定位時(shí)，就會(huì)調(diào)用其對(duì)應(yīng)

10、的布局管理器。,3、外觀的管理與控制,在容器中所有組件的布局都由布局管理器來(lái)控制，每個(gè)容器，如Panel、Windows或Frame都有各自缺省的布局管理器，程序員也可以在程序中指定一個(gè)新的布局管理器。 Java語(yǔ)言中包含五種布局管理器： FlowLayout：Panel和Applet的缺省布局管理器 BorderLayout：Window、Dialog和Frame的缺省布局管理器 GridLayout CardLayout GridBagLayout,3、外觀的管理與控制 FlowLayout,FlowLayout布局方式是將組件一排一排地依次放置，它自動(dòng)調(diào)用組件的getPreferredS

11、ize()方法，使用組件的最佳尺寸來(lái)顯示組件。當(dāng)容器被重新設(shè)置大小后，則布局也會(huì)隨之發(fā)生改變：各組件的大小不變，但相對(duì)位置會(huì)發(fā)生變化。 FlowLayout類有三種構(gòu)造方法： public FlowLayout() 使用缺省居中對(duì)齊方式，組件間的水平和豎直間距為缺省值5個(gè)象素。 public FlowLayout(int alignment) 使用指定的對(duì)齊方式（FlowLayout.LEFT，F(xiàn)lowLayout.RIGHT，F(xiàn)lowLayout.Center），水平和豎直間距為缺省值5象素。 public FlowLayout(int alignment, int horizontalGa

12、p, int verticalGap) 使用指定的對(duì)齊方式，水平和豎直間距也為指定值。,3、外觀的管理與控制 FlowLayout,import java.awt.*; public class ExGui private Frame f; private Button b1; private Button b2; public static void main(String args) ExGui guiWindow = new ExGui(); guiWindow.go(); ,public void go() f = new Frame(GUI example); f.setLayout

13、(new FlowLayout(); b1 = new Button(Press Me); b2 = new Button(Dont Press Me); f.add(b1); f.add(b2); f.pack(); f.setVisible(true); ,ExGui.java,例12.5 buttonDir.java 例12.6 ButtonGrid.java,4、事件,什么是事件？ 如果用戶在用戶界面層執(zhí)行了一個(gè)動(dòng)作(鼠標(biāo)點(diǎn)擊和按鍵)，這將導(dǎo)致一個(gè)事件的發(fā)生。事件是描述發(fā)生了什么的對(duì)象。存在各種不同類型的事件類用來(lái)描述各種類型的用戶交互。,4、事件,事件源 事件源是一個(gè)事件的產(chǎn)生者。例

14、如，在Button組件上點(diǎn)擊鼠標(biāo)會(huì)產(chǎn)生以這個(gè)Button 為源的一個(gè)ActionEvent. 這個(gè)ActionEvent實(shí)例是一個(gè)對(duì)象，它包含關(guān)于剛才所發(fā)生的那個(gè)事件的信息的對(duì)象。這些信息包括：- getActionCommand返回與動(dòng)作相關(guān)聯(lián)的命令名稱。- GetModifiers返回在執(zhí)行動(dòng)作時(shí)持有的修飾符。 事件處理器 事件處理器就是一個(gè)接收事件、解釋事件并處理用戶交互的方法。,4、JDK1.0與JDK1.2的事件模型比較,在JDK1.1中，事件接收和處理的方法發(fā)生了重要的改變。本節(jié)將比較以前的事件模型(JDK1.0)和當(dāng)前的事件模型(JDK1.1、JDK1.2、 JDK1.3)。 J

15、DK1.0采用的是層次事件模型，而JDK1.1以及更高的版本采用的是委托事件模型。,4、層次模型(JDK1.0),層次模型是基于容器的。 事件先發(fā)送到組件，然后沿容器層次向上傳播。沒有被組件處理的事件會(huì)自動(dòng)地繼續(xù)傳播到組件的容器。 JDK1.0的事件模型與JDK1.2的事件模型比較例如，在下圖中，Button對(duì)象(包含在一個(gè)Frame上的Panel中)上的鼠標(biāo)點(diǎn)擊首先向Button發(fā)送一個(gè)動(dòng)作事件。如果它沒有被Button處理，這個(gè)事件會(huì)被送往Panel，如果它在那兒仍然沒有被處理，這個(gè)事件會(huì)被送往Frame。,4、層次模型(JDK1.0),4、層次模型(JDK1.0),優(yōu)點(diǎn)：- 簡(jiǎn)單 缺點(diǎn)：

16、- 事件只能由產(chǎn)生這個(gè)事件的組件或包含這個(gè)組件的容器處理。這個(gè)限制違反了面向?qū)ο缶幊痰囊粋€(gè)基本原則：功能應(yīng)該包含在最合適的類中。而最適合處理事件的類往往并不是源組件的容器層次中的成員。- 大量的CPU周期浪費(fèi)在處理不相關(guān)的事件上。任何對(duì)于程序來(lái)說(shuō)不相關(guān)或者并不重要的事件會(huì)沿容器層次一路傳播，直到最后被拋棄。不存在一種簡(jiǎn)單的方法來(lái)過(guò)濾事件。,在JDK1.1中，事件處理模型將事件源（產(chǎn)生事件的組件）和對(duì)事件作出的具體處理（利用一種稱為監(jiān)聽器listener的實(shí)體來(lái)對(duì)事件進(jìn)行具體的處理）分開。 一般情況下，組件（事件源）都不處理自己的事件，而是將事件處理委托給外部的處理實(shí)體（監(jiān)聽器），這種事件處理模

17、型稱為事件的授權(quán)處理模型。不同的事件，可以交由不同類型的監(jiān)聽器去處理。 所有的組件都從Component類中繼承了將事件處理授權(quán)給監(jiān)聽器的方法： addXXXListener(ListenerType listener) removeXXXListener(ListenerType listener),4、委托事件模型（JDK1.1),4、委托事件模型（JDK1.1),class ButtonListener implements ActionListener public void actionPerformed(ActionEvent e) if( e.getActionCommand()

18、=Test) System.out.println( Button Test pressed.); else System.exit(0); ,public class ComponentEvent2 public static void main(String args) Frame fr = new Frame( Component Event Test 1.1); ButtonListener bl = new ButtonListener(); Button b1 = new Button(Test); Button b2 = new Button(Exit); b1.addActio

19、nListener(bl); b2.addActionListener(bl); fr.setLayout( new FlowLayout() ); fr.add(b1); fr.add(b2); fr.resize(200,200); fr.show(); ,4、委托事件模型（JDK1.1),4、委托事件模型（JDK1.1),首先，對(duì)于某種類型的事件XXXEvent，要想接收并處理該類事件，必須定義相應(yīng)的事件監(jiān)聽器類，這個(gè)類需要實(shí)現(xiàn)針對(duì)該類事件的特定接口XXXListener。 其次，要實(shí)現(xiàn)該類中對(duì)事件處理的方法。 第三，對(duì)于事件源，必須使用addXXXListener(XXXListene

20、r)注冊(cè)該類事件的監(jiān)聽器，以便當(dāng)事件產(chǎn)生時(shí)，能夠被監(jiān)聽器接收和處理。,類別： Action 接口名稱:ActionListener 方法： 一個(gè) actionPerformed public void actionPerformed(ActionEvente) Invoked when an action occurs.,4、委托事件模型（JDK1.1),類別： Mouse Motion 接口名稱:MousemotionListener 方法： 2個(gè) mouseDragged和mouseMoved,4、委托事件模型（JDK1.1),類別：Mouse Button 接口名稱:MouseListe

21、ner 方法：5個(gè),4、委托事件模型（JDK1.1),委托事件處理模型的例子：TestButton.java 其監(jiān)聽程序?yàn)椋?ButtonHandler.java 一個(gè)較為復(fù)雜的例子：程序檢測(cè)鼠標(biāo)的移動(dòng)（按住鼠標(biāo)鍵并同時(shí)移動(dòng)鼠標(biāo)的操作）以及鼠標(biāo)進(jìn)入和離開窗口的情況。TwoListen.java,上機(jī)作業(yè),教材P209 例子6和例子7 錄入源程序后編譯為字節(jié)碼文件，文件名與類名要一致。再編寫一個(gè)HTML文件： 執(zhí)行調(diào)用：appletviewer “html文件名”.html,事件類型及接口,事件適配器,為了編程方便，java為那些聲明了多個(gè)方法的Listener接口提供了一個(gè)對(duì)應(yīng)的適配器。,Mo

22、useMotionListener MouseListener ContainerListener WindowListener,MouseMotionAdapter MouseAdapter ContainerAdapter WindowAdapter,接口名稱,適配器名稱,適配器中實(shí)現(xiàn)了接口中的全部方法，只是方法內(nèi)容為空。適配器則是類，通過(guò)繼承某個(gè)適當(dāng)?shù)倪m配器，并覆蓋所關(guān)心的事件處理方法，不必關(guān)心不涉及到的方法。,5、AWT中的各種組件,5、AWT中的各種組件,按鈕(Button) 可點(diǎn)擊的用戶界面組件，當(dāng)組件被點(diǎn)擊是，產(chǎn)生AcitonEvent事件，可以用ActionListener來(lái)監(jiān)

23、聽。 復(fù)選框(Checkbox) 提供簡(jiǎn)單的“on/off”開關(guān)，同時(shí)旁邊還可以顯示說(shuō)明信息。當(dāng)復(fù)選框狀態(tài)發(fā)生變化時(shí)，會(huì)產(chǎn)生ItemEvent事件，可以用ItemListener來(lái)監(jiān)聽。 復(fù)選框組(CheckboxGroup)單選框(Radio Button) 當(dāng)多個(gè)復(fù)選框組成一組時(shí)，就形成了單選框。復(fù)選框組中的復(fù)選框之間是相互關(guān)聯(lián)的，每次有且只有一個(gè)處于選中狀態(tài)。 下拉式菜單(Choice) 在下拉式菜單中有多個(gè)選項(xiàng)，但每次只能選擇一項(xiàng)。當(dāng)選擇發(fā)生時(shí)，會(huì)產(chǎn)生ItemEvent事件，可以用ItemListener來(lái)監(jiān)聽。,5、AWT中的各種組件,/Checkbox add( new Chebo

24、x(“one”, null, true) ); add( new Chebox(“two”, null, false) ); add( new Chebox(“three”, null, false) );,/CheckboxGroup CheckboxGroup cbg = new CheckboxGroup(); add( new Chebox(“one”, cbg, true) ); add( new Chebox(“two”, cbg, false) ); add( new Chebox(“three”, cbg, false) );,/Choice Choice ch = new C

25、hoice(); ch.add( “one” ); ch.add( “two” ); ch.add( “three” );,5、AWT中的各種組件,標(biāo)簽(Label) 靜態(tài)文字，多用于指示信息，無(wú)事件。 單行文本區(qū)(TextField)TextComponent 只能顯示一行信息，當(dāng)按回車鍵后，會(huì)產(chǎn)生ActionEvent事件，可以用ActionListener來(lái)監(jiān)聽。 文本輸入?yún)^(qū)(TextArea) TextComponent 可以顯示多行信息，并且有滾動(dòng)條支持。按回車鍵后并不產(chǎn)生事件，如果要判斷是否完成輸入，需要用其他方法，如用一個(gè)結(jié)束按鈕。 列表(List) 列表提供了很多文本選項(xiàng)，可以

26、同時(shí)看到多項(xiàng)，也有滾動(dòng)條的支持，并且可以單選或多選。當(dāng)用戶單選或多選時(shí)，會(huì)產(chǎn)生ItemEvent事件。,/List List lst = new List(4, false); lst.add(Mercury); lst.add(Venus); lst.add(Earth); lst.add(JavaSoft); lst.add(Mars); lst.add(Neptune); add(lst);,/TextArea add( new TextArea(Hello, 5, 40); );,/ TextField TextField tf1, tf2, tf3, tf4; tf1 = new T

27、extField(); / a blank text field tf2 = new TextField(, 20); / blank field of 20 columns tf3 = new TextField(Hello!); / predefined text displayed tf4 = new TextField(Hello, 30); / predefined text in 30 columns,5、AWT中的各種組件,滾動(dòng)條(Scrollbar) 滾動(dòng)條一般不單獨(dú)使用，它通常與另一個(gè)組件聯(lián)合使用，用以指示另一個(gè)組件的變化情況。一般情況下，它可以用ScrollPane代替。

28、畫布(Canvas)hb.html hb.java 畫布類在使用時(shí)必須被繼承，它本身并不做任何事情，它只是在屏幕上生成了一個(gè)矩形空白區(qū)域，使應(yīng)用程序能夠在上面任意作畫，如寫文字、畫各種圖形、接收鍵盤或鼠標(biāo)輸入等。如果想在畫布上完成圖畫功能，必須重寫其paint()方法。 畫布監(jiān)聽各種鼠標(biāo)、鍵盤事件，只需實(shí)現(xiàn)KeyListener、MouseMotionListener和MouseListener接口即可。 當(dāng)在畫布中輸入字符時(shí)，必須先調(diào)用requestFoucus()方法為畫布獲得輸入焦點(diǎn)，一般在mouseClicked()方法中調(diào)用該方法。,5、AWT中的各種組件,菜單 菜單與其他組件不同，

29、無(wú)法直接添加到容器的某一位置，也無(wú)法用布局管理器對(duì)其加以控制，它由以下概念支撐： 菜單條(MenuBar) 只能添加到Frame中（用setMenuBar()），作為擺放菜單的容器。 菜單(Menu) 菜單項(xiàng)容器，負(fù)責(zé)顯示并控制其中的菜單項(xiàng)。它支持菜單嵌套。 菜單項(xiàng)(MenuItem) 真正的動(dòng)作，可以用ActionListener監(jiān)聽其事件（ActionEvent）。 復(fù)選框菜單項(xiàng)(CheckboxMenuItem) 真正的動(dòng)作， 可以用ItemListener監(jiān)聽其事件（ItemEvent）。 彈出式菜單(PopupMenu) 與菜單相似，也是菜單項(xiàng)容器。,5、AWT中的各種組件,框架(F

30、rame) Frame是一個(gè)頂級(jí)窗口，通常是應(yīng)用程序的骨架。Frame中的退出按鈕被點(diǎn)擊后，將產(chǎn)生一個(gè)WindowEvent事件，表示關(guān)閉Frame，可以在Frame中實(shí)現(xiàn)WindowListener接口以監(jiān)聽WindowEvent事件。Frame中無(wú)法直接監(jiān)聽鍵盤事件，但可以往Frame中添加畫布、面板凳組件，讓它們來(lái)負(fù)責(zé)監(jiān)聽鍵盤事件。 面板(Panel) 面板可以處理事件，但象畫布一樣，一定要先獲得輸入焦點(diǎn)。 對(duì)話框(Dialog) 對(duì)話框與Frame相類似，一般用于接收用戶的輸入數(shù)據(jù)，實(shí)現(xiàn)與用戶的交互。它與一般窗口的區(qū)別在于它依賴其他的窗口。對(duì)話框分有模式和無(wú)模式兩種，前者只讓應(yīng)用程序響應(yīng)對(duì)話框內(nèi)部事件，后者則可以響應(yīng)對(duì)話框以外的事件，可以通過(guò)其構(gòu)造方法來(lái)設(shè)置對(duì)話框是否有模式： Dialog( Parent, Title, isModal ) /父窗口，標(biāo)題，是否有模式,5、AWT中的各種組件,文件對(duì)話框(FileDialog)FileDialogExample.java 表示文件選擇的對(duì)話框，