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

1、第9章 圖形用戶界面設(shè)計 1學(xué)習(xí)內(nèi)容用AWT生成圖形化用戶界面AWT事件處理模型AWT組件庫Java Applet Swing簡介Swing容器和組件29.1 用AWT生成圖形化用戶界面抽象窗口工具包AWT (Abstract Window Toolkit) 是 API為Java 程序提供的建立圖形用戶界面GUI (Graphics User Interface)工具集，AWT可用于Java的applet和applications中。它支持圖形用戶界面編程的功能包括： 用戶界面組件事件處理模型圖形和圖像工具布局管理器3java.awt包4java.awt包 (續(xù))java.awt包提供了基本的

2、java程序的GUI設(shè)計工具。主要包括下述三個概念：組件Component容器Container布局管理器-LayoutManager5組件和容器 類java.awt.Component是許多組件類的父類。相應(yīng)的成員方法包括：getComponentAt(int x, int y)getFont()getForeground()getName()getSize()paint(Graphics g)repaint()update()setVisible(boolean b)setSize(Dimension d)setName(String name)6組件和容器 (續(xù))容器(Container

3、)也是一個類，實(shí)際上是Component的子類，因此容器本身也是一個組件，具有組件的所有性質(zhì)，但是它的主要功能是容納其它組件和容器。7組件和容器(續(xù))布局管理器（LayoutManager）：每個容器都有一個布局管理器，當(dāng)容器需要對某個組件進(jìn)行定位或判斷其大小尺寸時，就會調(diào)用其對應(yīng)的布局管理器。 8常用容器有三種類型的容器：WindowPanelFrameApplet9Frame10Frame (續(xù))Frame必須調(diào)用setSize()來設(shè)置大小。Frame必須調(diào)用setVisible(true)來設(shè)置該窗口為可見的。AWT中的Frame窗口不能關(guān)閉，必須添加關(guān)閉的事件處理。11Frame示例

4、public class MyFrame extends Frame public static void main(String args) / 構(gòu)造方法MyFrame fr = new MyFrame(Hello Out There!);/ 設(shè)置Frame的大小，缺省為（0，0）fr.setSize(200, 200);/ 設(shè)置Frame的背景，缺省為紅色fr.setBackground(Color.red);/ 設(shè)置Frame為可見，缺省為不可見fr.setVisible(true);public MyFrame(String str) super(str); / 調(diào)用父類的構(gòu)造方法12

5、Panel13Panel 示例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的背景顏色設(shè)置為紅色fr.setLayout(null);/ 取消布局管理器pan.setSize(100, 100);pan.setBackground(Color.yellow);/ 設(shè)置面板pan的背景顏色為黃色fr.

6、add(pan); / 用add方法把面板pan添加到框架fr中fr.setVisible(true);14Panel 示例(續(xù))示例請參照FrameWithPanel.java15布局管理器(LayoutManager) 布局管理器主要包括：FlowLayoutBorderLayoutGridLayoutCardLayoutGridBagLayout示例請參照ExGui.java16FlowLayout 構(gòu)造方法主要下面幾種：FlowLayout(FlowLayout.RIGHT,20,40); FlowLayout(FlowLayout.LEFT);FlowLayout();FlowLay

7、out 是Panel，Applet的缺省布局管理器。其規(guī)律是從上到下、從左到右進(jìn)行放置。17FlowLayout 示例示例請參照FlowLayoutSample.javapublic 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(butto

8、n2);f.add(button3);f.setSize(300, 100);f.setVisible(true);18BorderLayout BorderLayout布局管理器把容器分成5個區(qū)域：North，South，East，West和Center 。各個區(qū)域的位置及大小如下圖所示：其變化規(guī)律為：組件的相對位置不變，大小發(fā)生變化。19BorderLayout 示例 public static void main(String args) Frame f = new Frame(BorderLayout); f.setLayout(new BorderLayout(); f.add(No

9、rth, new Button(North); / 第一個參數(shù)表示把按鈕添加到容器的North區(qū)域 f.add(South, new Button(South); / 第一個參數(shù)表示把按鈕添加到容器的South區(qū)域 f.add(East, new Button(East); / 第一個參數(shù)表示把按鈕添加到容器的East區(qū)域 f.add(West, new Button(West); / 第一個參數(shù)表示把按鈕添加到容器的West區(qū)域 f.add(Center, new Button(Center); / 第一個參數(shù)表示把按鈕添加到容器的Center區(qū)域f.setSize(200, 200); f

10、.setVisible(true); 20BorderLayout 示例 (續(xù))示例請參照BorderLayoutSample.java21BorderLayout 示例 (續(xù))North和Center區(qū)域缺少組件 22BorderLayout 示例 (續(xù))North區(qū)域缺少組件 23GridLayout 使容器中各個組件呈網(wǎng)格狀布局，平均占據(jù)容器的空間。24GridLayout 示例public static void main(String args) Frame f = new Frame(GridLayout); f.setLayout(new GridLayout(3, 2); /

11、容器平均分成3行2列共6格 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(true); f.setSize(200, 200); f.setVisible(true); 25Grid

12、Layout 示例(續(xù))示例請參照ButtonGrid.java26容器的嵌套 一個包含了多個組件的容器本身也可以作為一個組件加到另一個容器中去，容器中再添加容器，這樣就形成了容器的嵌套。27容器的嵌套 示例public void go() f = new Frame(GUI example 3); bw = new Button(West); bc = new Button(Work space region); f.add(bw, West); f.add(bc, Center); p = new Panel(); f.add(p, North); bfile = new Button(F

13、ile); bhelp = new Button(Help); p.add(bfile); p.add(bhelp); f.pack(); f.setVisible(true); 28容器的嵌套 示例(續(xù))示例請參照ExGui3.javaPanel容器,按鈕在Panel容器內(nèi)Frame容器內(nèi)包含和一個Panel容器,有包含了West按鈕和Work space region按鈕。29小 結(jié) Frame是一個頂級窗口。Frame的缺省布局管理器為BorderLayout。Panel 無法單獨(dú)顯示，必須添加到某個容器中。 Panel 的缺省布局管理器為FlowLayout。當(dāng)把Panel 作為一個組

14、件添加到某個容器中后，該P(yáng)anel 仍然可以有自己的布局管理器。因此，可以利用Panel 使得BorderLayout 中某個區(qū)域顯示多個組件，達(dá)到設(shè)計復(fù)雜用戶界面的目的 。309.2 AWT事件處理模型在事件處理的過程中，主要涉及三類對象：Event-事件，用戶對界面操作在java語言上的描述，以類的形式出現(xiàn)，例如鍵盤操作對應(yīng)的事件類是KeyEvent。Event Source-事件源，事件發(fā)生的場所，通常就是各個組件，例如按鈕Button。Event handler-事件處理者，接收事件對象并對其進(jìn)行處理的對象。31事件處理 示例public class TestButton public

15、 static void main(String args) Frame f = new Frame(Test);Button b = new Button(Press Me!);b.addActionListener(new ButtonHandler();f.setLayout(new FlowLayout(); f.add(b);f.setSize(200, 100);f.setVisible(true);class ButtonHandler implements ActionListener public void actionPerformed(ActionEvent e) Sys

16、tem.out.println(Action occurred);Button是事件源事件事件處理者32事件處理對于某種類型的事件XXXEvent, 要想接收并處理這類事件，必須定義相應(yīng)的事件監(jiān)聽器類，該類需要實(shí)現(xiàn)與該事件相對應(yīng)的接口XXXListener。 事件源實(shí)例化以后，必須進(jìn)行授權(quán)，注冊該類事件的監(jiān)聽器，使用addXXXListener(XXXListener ) 方法來注冊監(jiān)聽器。 b.addActionListener(new ButtonHandler();33事件類 常見的事件有：ComponentEvent（ 組件事件：組件尺寸的變化，移動）ContainerEvent（ 容

17、器事件：組件增加，移動）WindowEvent（ 窗口事件：關(guān)閉窗口，窗口閉合，圖標(biāo)化）FocusEvent（ 焦點(diǎn)事件：焦點(diǎn)的獲得和丟失）KeyEvent（ 鍵盤事件：鍵按下、釋放）MouseEvent（ 鼠標(biāo)事件：鼠標(biāo)單擊，移動） ActionEvent（動作事件：按鈕按下，TextField中按Enter鍵）AdjustmentEvent（調(diào)節(jié)事件：在滾動條上移動滑塊以調(diào)節(jié)數(shù)值）ItemEvent（項目事件：選擇項目，不選擇“項目改變”）TextEvent（文本事件，文本對象改變） 34事件監(jiān)聽器 每類事件都有對應(yīng)的事件監(jiān)聽器，監(jiān)聽器是接口，根據(jù)動作來定義方法 。例如，與鍵盤事件KeyE

18、vent相對應(yīng)的接口是： public interface KeyListener extends EventListener public void keyPressed(KeyEvent ev);public void keyReleased(KeyEvent ev);public void keyTyped(KeyEvent ev);35事件監(jiān)聽器 (續(xù))例如窗口事件接口： public interface WindowListener extends EventListenerpublic void windowClosing(WindowEvent e); /把退出窗口的語句寫在本方

19、法中public void windowOpened(WindowEvent e); /窗口打開時調(diào)用public void windowIconified(WindowEvent e); /窗口圖標(biāo)化時調(diào)用public void windowDeiconified(WindowEvent e); /窗口非圖標(biāo)化時調(diào)用public void windowClosed(WindowEvent e);/窗口關(guān)閉時調(diào)用public void windowActivated(WindowEvent e); /窗口激活時調(diào)用public void windowDeactivated(WindowEven

20、t e); /窗口非激活時調(diào)用36事件監(jiān)聽器 (續(xù))AWT的組件類中提供注冊和注銷監(jiān)聽器的方法：注冊監(jiān)聽器：public void add (listener); 注銷監(jiān)聽器：public void remove (listener); 37AWT事件及其相應(yīng)的監(jiān)聽器接口 38AWT事件及其相應(yīng)的監(jiān)聽器接口(續(xù))示例代碼請參照ThreeListener.java結(jié)果：39AWT事件及其相應(yīng)的監(jiān)聽器接口 小結(jié)1可以聲明多個接口，接口之間用逗號隔開。implements MouseMotionListener, MouseListener, WindowListener；2可以由同一個對象監(jiān)聽一個

21、事件源上發(fā)生的多種事件：f.addMouseMotionListener(this);f.addMouseListener(this);f.addWindowListener(this);則對象f 上發(fā)生的多個事件都將被同一個監(jiān)聽器接收和處理。40AWT事件及其相應(yīng)的監(jiān)聽器接口 小結(jié)(續(xù))3事件處理者和事件源處在同一個類中。本例中事件源是Frame f，事件處理者是類ThreeListener，其中事件源Frame f是類ThreeListener的成員變量。4可以通過事件對象獲得詳細(xì)資料，比如本例中就通過事件對象獲得了鼠標(biāo)發(fā)生時的坐標(biāo)值。public void mouseDragged(Mo

22、useEvent e) String s=Mouse dragging :X=+e.getX()+Y=+e.getY();tf.setText(s);41AWT事件及其相應(yīng)的監(jiān)聽器接口 小結(jié)(續(xù))5，對其不感興趣的方法，也必須寫，但可以方法體為空。這是作為實(shí)現(xiàn)接口規(guī)定。public void windowIconified(WindowEvent e) public void windowDeiconified(WindowEvent e) public void windowClosed(WindowEvent e) public void windowActivated(WindowEve

23、nt e) public void windowDeactivated(WindowEvent e) 42事件適配器 繼承事件所對應(yīng)的Adapter類，重寫需要方法，無關(guān)方法不用實(shí)現(xiàn)。可以縮短程序代碼。 Java的單一繼承機(jī)制，限制只能監(jiān)聽器一個父類。不適用多種監(jiān)聽器作為父類。1事件適配器-EventAdapter2. 用內(nèi)部類實(shí)現(xiàn)事件處理3匿名類（Anonymous Class）43事件適配器-EventAdapter 下例中采用了鼠標(biāo)適配器：示例代碼請參照ThreeListener2.javaimport java.awt.*;import java.awt.event.*;public

24、class MouseClickHandler extends MouseAdapter public void mouseClicked(MouseEvent e) /只實(shí)現(xiàn)需要的方法 44事件適配器-EventAdapter (續(xù))public void mouseEntered(MouseEvent e) String s = The mouse entered;tf.setText(s);public void mouseExited(MouseEvent e) String s = The mouse has left the building;tf.setText(s);只適實(shí)現(xiàn)感

25、興趣的方法，但是不能在通過繼承它們的適配器來監(jiān)聽事件，如窗口的關(guān)閉45事件適配器-EventAdapter (續(xù))java.awt.event包中定義的事件適配器類包括以下幾個：1ComponentAdapter( 組件適配器)2ContainerAdapter( 容器適配器)3FocusAdapter( 焦點(diǎn)適配器)4KeyAdapter( 鍵盤適配器)5MouseAdapter( 鼠標(biāo)適配器)6MouseMotionAdapter( 鼠標(biāo)運(yùn)動適配器)7WindowAdapter( 窗口適配器) 46用內(nèi)部類實(shí)現(xiàn)事件處理 內(nèi)部類（inner class）是被定義于另一個類中的類，使用內(nèi)部類的

26、主要原因是由于：一個內(nèi)部類的對象可訪問外部類的成員方法和變量，包括私有的成員。實(shí)現(xiàn)事件監(jiān)聽器時，采用內(nèi)部類、匿名類編程非常容易實(shí)現(xiàn)其功能。編寫事件驅(qū)動程序，內(nèi)部類很方便。因此內(nèi)部類所能夠應(yīng)用的地方往往是在AWT的事件處理機(jī)制中。 示例請參照InnerClass.java47用內(nèi)部類實(shí)現(xiàn)事件處理 (續(xù))示例代碼請參照InnerClass.java48匿名類（Anonymous Class） 示例代碼請參照AnonymousClass.java內(nèi)部類只使用一次時,可以使用匿名類。進(jìn)一步簡化代碼。49常用的AWT組件按鈕(Button)復(fù)選框(Checkbox)復(fù)選框組(CheckboxGroup)

27、下拉式菜單（Choice）單行文本輸入?yún)^(qū)(TextField)文本輸入?yún)^(qū)（TextArea）列表(List)50按鈕(Button) 按鈕是最常用的一個組件，其構(gòu)造方法是：Button b = new Button(Quit);當(dāng)按鈕被點(diǎn)擊后，會產(chǎn)生ActionEvent事件，需ActionListener接口進(jìn)行監(jiān)聽和處理事件。51復(fù)選框 (Checkbox) 復(fù)選框提供簡單的“on/off”開關(guān)，旁邊顯示文本標(biāo)簽。構(gòu)造方法如下：setLayout(new GridLayout(3,1);add(new Checkbox(one,null,true);add(new Checkbox(two

28、);add(new Checkbox(three);52復(fù)選框 (Checkbox) 示例復(fù)選框用ItemListener 來監(jiān)聽ItemEvent事件，當(dāng)復(fù)選框狀態(tài)改變時用getStateChange()獲取當(dāng)前狀態(tài)。示例代碼請參照Handler.java53復(fù)選框組(CheckboxGroup) 使用復(fù)選框組，可以實(shí)現(xiàn)單選框的功能。方法如下：setLayout(new GridLayout(3, 1);CheckboxGroup cbg = new CheckboxGroup();add(new Checkbox(one, cbg, true);add(new Checkbox(two,

29、cbg, false);add(new Checkbox(three, cbg, false); 54復(fù)選框組(CheckboxGroup) 示例 55下拉式菜單（Choice）下拉式菜單每次只能選擇其中的一項，它能夠節(jié)省顯示空間，適用于大量選項。Coice 用ItemListener接口來進(jìn)行監(jiān)聽，可參考CheckBoxChoice colorchooser = new Choice();colorchooser.add(Green);colorchooser.add(Red);colorchooser.add(Blue);56單行文本輸入?yún)^(qū)(TextField) 單行文本輸入?yún)^(qū)構(gòu)造方法如下

30、： TextField tf1,tf2,tf3,tf4:tf1 = new TextField(); tf2 = new TextField(,20); /顯示區(qū)域?yàn)?0列tf3 = new TextField(Hello!); /按文本區(qū)域大小顯示tf4 = new TextField(Hello!,30); /初始文本為Hello!, 顯示區(qū)域?yàn)?0列57文本輸入?yún)^(qū)（TextArea）TextArea可以顯示多行多列的文本?？梢酝ㄟ^以下構(gòu)造方法來創(chuàng)建：/新建一個TextAreaTextArea( ) /新建一個包含給定行數(shù)和列數(shù)的TextAreaTextArea(int rows, int

31、 cols) / 新建一個包含給定字符串、行數(shù)和列數(shù)的TextAreaTextArea(String text, int rows, int cols) 58列表(List)列表中提供了多個文本選項，列表支持滾動條，可以瀏覽多項。List lst=new List(4,false); /兩個參數(shù)分別表示顯示的行數(shù)、是否允許多選lst.add(Venus);lst.add(Earth);lst.add(JavaSoft);lst.add(Mars);cnt.add(lst);599.4 Java Applet Java具有讓Internet動起來的能力。具體地說，就是Java能創(chuàng)建一種特殊類型的

32、程序（通常稱作小應(yīng)用程序或者Applet），具備Java能力的Web瀏覽器可從網(wǎng)上下載這種程序，然后運(yùn)行。60Applet示例：package ch01;import java.applet.Applet;import java.awt.Graphics;public class HelloWorldApplet extends Applet public String s;public void init() s = Hello World!;/ 生成一個字符串對象public void paint(Graphics g) g.drawString(s, 25, 25);/ 在瀏覽器中坐標(biāo)為

33、（25，25）的位置顯示字符串s61創(chuàng)建Html文件將XX.class嵌入到HTML頁面中的標(biāo)記中APPLET CODE=ch01. HelloWorldApplet.class WIDTH=200 HEIGHT=100 62案例演示在瀏覽器中瀏覽這個HTML頁面：639.5 Swing簡介AWT存在的問題：缺少剪貼板、打印支持、鍵盤導(dǎo)航等特性。 AWT組件外觀總是與本機(jī)相關(guān)的。Swing的產(chǎn)生主要原因就是AWT不能滿足圖形化用戶界面發(fā)展的需要。 AWT是Swing的基礎(chǔ) 。Swing是由100%純Java實(shí)現(xiàn)的，Swing組件是用Java實(shí)現(xiàn)的輕量級（ light-weight）組件，沒有本

34、地代碼，不依賴操作系統(tǒng)的支持，這是它與AWT組件的最大區(qū)別。 64Swing的類層次結(jié)構(gòu)定義了兩種類型的組件：頂層容器（JFrame，JApplet，JDialog和JWindow）和輕量級組件。65Swing組件的多樣化 Swing是AWT的擴(kuò)展，它提供了許多新的圖形界面組件。Swing組件以J開頭。 66Swing外觀感覺 （Look and Feel）AWT組件外觀具體平臺相關(guān)。Swing組件外觀具體平臺無關(guān)。Swing組件的外觀Metal風(fēng)格、Motif風(fēng)格、Windows風(fēng)格 示例代碼請參照LookFeel.java67Swing外觀感覺 Metal風(fēng)格UIManager.setLo

35、okAndFeel(javax.swing.plaf.metal.MetalLookAndFeel);68Swing外觀感覺 Motif風(fēng)格UIManager.setLookAndFeel(com.sun.java.swing.plaf.motif.MotifLookAndFeel);69Swing外觀感覺 Windows風(fēng)格 UIManager.setLookAndFeel(com.sun.java.swing.plaf.windows.WindowsLookAndFeel);70使用圖標(biāo)（Icon） Swing組件如按鈕、標(biāo)簽，除了使用文字外，還可以使用圖標(biāo)修飾自己。71Swing程序結(jié)構(gòu)

36、簡介Swing的程序設(shè)計一般可按照下列流程進(jìn)行：1 引入Swing包2 選擇外觀和感覺3 設(shè)置頂層容器4 設(shè)置按鈕和標(biāo)簽5 向容器中添加組件6 在組件周圍添加邊界7 進(jìn)行事件處理示例請參照SwingApplication.java729.6 Swing組件和容器 Swing中用輕量級的組件替代了AWT中的重量級的組件。Swing的按鈕和標(biāo)簽可顯示圖標(biāo)和文本。Swing中的大多數(shù)組件都是AWT組件名前面加了一個J。73使用Swing的基本規(guī)則把Swing組件放入一個頂層Swing容器的內(nèi)容面板上避免使用非Swing的重量級組件與AWT組件不同，Swing組件不能直接添加到頂層容器中，它必須添加到

37、一個與Swing頂層容器相關(guān)聯(lián)的內(nèi)容面板（content pane）上。74使用Swing的基本規(guī)則(續(xù))對JFrame添加組件有兩種方式：1) 用getContentPane( )方法獲得JFrame的內(nèi)容面板，再對其加入組件：frame.getContentPane().add(childComponent)2) 建立一個Jpanel或 JDesktopPane之類的中間容器，把組件添加到容器中，用setContentPane()方法把該容器置為JFrame的內(nèi)容面板：Jpanel contentPane=new Jpanel( );/把其它組件添加到Jpanel中;frame.setCo

38、ntentPane(contentPane); /把contentPane對象設(shè)置成為frame的內(nèi)容面板75面板（JPanel） 面板（JPanel）是一個輕量容器組件，用法與Panel相同JPanel的缺省布局管理器是FlowLayout。76滾動窗口（JScrollPane） private JScrollPane getJScrollPane() if (jScrollPane = null) jScrollPane = new JScrollPane();jScrollPane.setViewportView(getJTable(); return jScrollPane;77滾動窗

39、口（JScrollPane）續(xù)JScrollPane是帶滾動條的面板，主要是通過移動JViewport(視口)來實(shí)現(xiàn)的。JViewport是一種特殊的對象，用于查看基層組件，滾動條實(shí)際就是沿著組件移動視口，同時描繪出它在下面看到的內(nèi)容。78按鈕（JButton） 按鈕是一個常用組件，按鈕可以帶標(biāo)簽或圖象。 常用的構(gòu)造方法有：示例代碼請參照ButtonDemo.javaJButton(Icon icon) /按鈕上顯示圖標(biāo)JButton(String text) /按鈕上顯示字符JButton(String text, Icon icon) /按鈕上既顯示圖標(biāo)又顯示字符 79復(fù)選框（JCheck

40、Box）復(fù)選框提供簡單的“on/off”開關(guān)，旁邊顯示文本標(biāo)簽。常用的構(gòu)造方法有： JCheckBox()JCheckBox(Icon icon)JCheckBox(Icon icon, boolean selected)JCheckBox(String text)JCheckBox(String text, boolean selected)JCheckBox(String text, Icon icon)JCheckBox(String text, Icon icon, boolean selected)80復(fù)選框（JCheckBox）示例示例代碼請參照TestJCheckBox.java

41、CheckBox通過這個方法來處理被選中事件81單選框（JRadioButton）單選框JRadioButton與AWT中的復(fù)選框組功能類似。 常用的構(gòu)造方法有： JRadioButton()JRadioButton(Icon icon)JRadioButton(Icon, boolean selected)JRadioButton(String text)JRadioButton(String text, boolean selected)JRadioButton(String text, Icon icon)JRadioButton(String text, Icon icon, boolean selected)82單選框（JRadioButton） 示例示例代碼請參照TestJRadioBu