第5圖形用戶界面設(shè)計(jì)課件

1、第5章 圖形用戶界面設(shè)計(jì)教學(xué)目標(biāo)：通過本章的學(xué)習(xí)，掌握常用容器組件的用法、容器組件的布局方式、組成界面的可視組件的功能與用法；掌握事件處理機(jī)制，能進(jìn)行菜單設(shè)計(jì)，最終達(dá)到開發(fā)出智能化的圖形界面應(yīng)用程序的目的。 案例 學(xué)生信息注冊界面設(shè)計(jì)解析多數(shù)學(xué)校的學(xué)生檔案信息都由計(jì)算機(jī)進(jìn)行管理，在編寫的檔案管理應(yīng)用程序中，有檔案信息錄入模塊，該模塊的功能是在圖形化的界面下，用戶把信息輸入到計(jì)算機(jī)中。錄入界面的大致樣式及組件名稱如圖 設(shè)計(jì)上述程序界面并實(shí)現(xiàn)相應(yīng)的功能，程序框架如下：public class InputData implements ActionListenerFrame f;/聲明框架對象Lab

2、el l1,l2,l3,l4;/聲明標(biāo)簽對象TextField t;/聲明文本行對象Checkbox r1,r2;/聲明單選按鈕對象CheckboxGroup g;/聲明組對象Checkbox c1,c2,c3;Choice ch;/聲明選擇框?qū)ο驜utton b;/聲明按鈕對象TextArea ta;/聲明文本區(qū)對象Panel p1,p2,p3,p4,p5;/聲明面板對象int i=0;public InputData( )對象實(shí)例化；ch.add(濟(jì)南); /添加選擇項(xiàng)p1=new Panel( ); p1.setLayout(new FlowLayout(FlowLayout.LEFT)

3、;/設(shè)定面板布局樣式p1.add(l1); /在面板中加入組件f.setLayout(new GridLayout(2,1); /設(shè)定框架布局樣式f.addWindowListener(new WindowAdapter( ) /注冊事件監(jiān)聽器，匿名類實(shí)現(xiàn)接口public void windowClosing(WindowEvent e)System.exit(0););f.setVisible(true);public void actionPerformed(ActionEvent e) /事件處理接口實(shí)現(xiàn) /把輸入內(nèi)容顯示到文本區(qū)中；public static void main(Str

4、ing args )new InputData( );在上面的案例框架中，應(yīng)用到了如下知識點(diǎn)。(1) 組成界面的各種組件。(2) 界面的布局樣式。(3) 事件處理機(jī)制。下面將詳細(xì)介紹相關(guān)的知識。 5.1 框架與面板 5.1.1 認(rèn)識Component類 部分類的繼承關(guān)系如圖 Component類是其他組件類的父類，在此介紹該類的一些方法，這些方法可直接繼承到子類中使用。(1)setFont(Font f)：設(shè)置組件的字體。(2)setForeground(Color r)：設(shè)置組件的前景色。(3)setLocation(int x,int y)：設(shè)置組件的顯示位置。(4)setSize(int

5、 width, int height)：調(diào)整組件的大小，使其寬度為 width，高度為 height。(5)setVisible(boolean b)：根據(jù)參數(shù) b 的值顯示或隱藏此組件。(6)getForeground( )：獲得組件的前景色。(7)getFont( )：獲得組件的字體。(8)getBackground( )：獲得組件的背景色。(9)getHeight( )：返回組件的當(dāng)前高度。(10)invalidate( )：使此組件無效。(11)getBounds( )：以Rectangle 對象的形式獲得組件的邊界。5.1.2 框架框架類Frame是一種帶標(biāo)題條并且可以改變大小的窗口

6、，該類為容器類。 Frame類的構(gòu)造方法及實(shí)例方法 :類別方 法 定 義功 能構(gòu)造方法public Frame( )創(chuàng)建一個(gè)不帶標(biāo)題信息的框架public Frame(String title)創(chuàng)建一個(gè)標(biāo)題信息是title的框架實(shí)例方法public void add(Component comp)在框架中添加組件comppublic void setLayout(LayoutManager mgr)設(shè)置布局方式public void setTitle(String title)設(shè)置框架的標(biāo)題public String getTitle(String title)獲取框架的標(biāo)題5.1.3 面板面

7、板類Panel也是容器類。但與Frame類的區(qū)別是，面板是一種沒有標(biāo)題條的容器，在應(yīng)用時(shí)只能把該類實(shí)例化的對象通過Container類的add方法加載到Window對象中。該類的構(gòu)造方法如下。(1)public Panel( )：創(chuàng)建一個(gè)面板對象。(2)public Panel(LayoutManager mgr)：創(chuàng)建一個(gè)面板對象且約定了添加到該面板中組件的布局樣式。 5.2 布局管理器5.2.1 邊界布局該布局將容器組件劃分成了5個(gè)區(qū)域：南(South)、北(North)、東(East)、西(West)、中(Center)。邊界布局類邊界布局類為BorderLayout，該類的構(gòu)造方法如下

8、。(1)public BorderLayout( )：創(chuàng)建一個(gè)邊界布局管理類對象。(2)public BorderLayout(int hgap, int vgap)：創(chuàng)建一個(gè)邊界布局管理類對象。其中，hgap和vgap指定組件的水平和垂直間距，單位是像素，默認(rèn)值為0。 若向容器中加入組件，可以通過以下兩種形式實(shí)現(xiàn)。(1)add(String s, Component comp)：其中s代表位置，位置用字符串“South”、“North”、“East”、“West”、“Center”表示。(2)add(Component comp, int x)：其中x是代表位置的常量值，分別是BorderL

9、ayout.SOUTH、BorderLayout.NORTH、BorderLayout.EAST、BorderLayout.WEST、BorderLayout.CENTER。說明：(1) 在邊界布局中，若向框架加入組件，如果不指定位置，則默認(rèn)把組件加到了“中”的區(qū)域。(2) 若某個(gè)位置未被使用，則該位置將被其他組件占用。 5.2.2 流布局該布局按從左至右、從上至下的方式將組件加入到容器中。流布局類流布局類為FlowLayout，該類的構(gòu)造方法如下。(1)public FlowLayout( )：創(chuàng)建一個(gè)流布局類對象。(2)public FlowLayout(int align)：創(chuàng)建一個(gè)流布

10、局類對象，其中align表示對齊方式，其值有3個(gè)，為FlowLayout .LEFT、FlowLayout .RIGHT、FlowLayout .CENTER，默認(rèn)為FlowLayout .CENTER。(3)public FlowLayout(int align, int hgap, int vgap)：其中align表示對齊方式；hgap和vgap指定組件的水平和垂直間距，單位是像素，默認(rèn)值為5。 5.2.3 網(wǎng)格布局該布局將容器劃分成規(guī)則的行列網(wǎng)格樣式，組件逐行加入到網(wǎng)格中，每個(gè)組件大小一致。但當(dāng)容器中放置的組件數(shù)超過網(wǎng)格數(shù)時(shí)，則自動(dòng)增加網(wǎng)格列數(shù)，行數(shù)不變。1網(wǎng)格布局類網(wǎng)格布局類為Gri

11、dLayout，該類的構(gòu)造方法如下。(1)public GridLayout(int rows, int cols)：rows表示網(wǎng)格行數(shù)，cols表示網(wǎng)格列數(shù)。(2)public GridLayout(int rows, int cols, int hgap, int vgap)：rows表示網(wǎng)格行數(shù)，cols表示網(wǎng)格列數(shù)；hgap和vgap指定組件的水平和垂直間距，單位是像素。 5.2.4 卡片布局使用該布局樣式布局容器中的組件時(shí)，組件就會(huì)像卡片一樣排放在容器中，只有最上面的卡片可見。 類別方 法 定 義功 能構(gòu)造方法public CardLayout( )創(chuàng)建一個(gè)卡片對象實(shí)例方法publ

12、ic void add(String name, Component c)添加組件c，并指定組件的名稱為namepublic void first(Container parent)顯示第一張卡片public void last(Container parent)顯示最后一張卡片public void next(Container parent)顯示下一張卡片public void previous(Container parent)顯示前一張卡片public void show(Container parent, String name)顯示指定名稱的卡片5.3 按鈕、標(biāo)簽、文本行、文本區(qū)

13、5.3.1 按鈕(Button)圖形用戶界面中，按鈕常用于接收用戶的單擊事件。1. 構(gòu)造方法(1)public Button( )：通過該構(gòu)造方法創(chuàng)建按鈕時(shí)，按鈕上沒有說明信息。(2)public Button(String s)：通過該構(gòu)造方法創(chuàng)建按鈕時(shí)，按鈕上的說明信息為s。2. 常用方法(1)public void setLabel(String s)：通過該方法，把按鈕上的說明信息設(shè)為s。(2)public String getLabel( )：通過該方法，獲取按鈕上的說明信息。5.3.2 標(biāo)簽(Label)標(biāo)簽的功能是顯示靜態(tài)文本，不能動(dòng)態(tài)地編輯文本，作為提示信息通常由標(biāo)簽實(shí)現(xiàn)。1構(gòu)

14、造方法(1)public Label( )：通過該構(gòu)造方法創(chuàng)建標(biāo)簽時(shí)，標(biāo)簽沒有提示信息。(2)public Label(String s)：通過該構(gòu)造方法創(chuàng)建標(biāo)簽時(shí)，標(biāo)簽上顯示的提示信息為s。(3)public Label(String s, int align)：通過該構(gòu)造方法創(chuàng)建標(biāo)簽時(shí)，標(biāo)簽上的提示信息為s，并設(shè)定了標(biāo)簽文本的對齊方式，分別為Label.LEFT(左對齊)、Label.RIGHT(右對齊)、Label.CENTER(居中對齊)，默認(rèn)對齊方式為居中對齊。2常用方法(1)public void setText(String s)：通過該方法，把標(biāo)簽上的提示信息設(shè)為s。(2)pu

15、blic String getLabel( )：通過該方法，獲取標(biāo)簽上的提示信息。 5.3.3 文本行(TextField)文本行用來輸入單行文本。 類別方 法 定 義功 能構(gòu)造方法public TextField( )創(chuàng)建一個(gè)內(nèi)容為空的文本行public TextField(String s)創(chuàng)建一個(gè)內(nèi)容為s的文本行public TextField(int x)創(chuàng)建一個(gè)能顯示x個(gè)字符的文本行public TextField(String s, int x)創(chuàng)建一個(gè)內(nèi)容為s的文本行，且文本行長度為x實(shí)例方法public void setText(String s)設(shè)置文本行中的內(nèi)容為spubl

16、ic String getText( )獲取文本行中的內(nèi)容public void setEchoChar(char c)設(shè)置文本行的回顯字符。常用于口令輸入public void setEditable(boolean b)設(shè)置文本的可編輯性。當(dāng)參數(shù)值為false時(shí)，只能顯示，不能修改5.3.4 文本區(qū)(TextArea)文本區(qū)可以輸入多行文本，且文本區(qū)帶有滾動(dòng)條。 類別方 法 定 義功 能構(gòu)造方法public TextArea( )創(chuàng)建一個(gè)內(nèi)容為空的文本區(qū)對象public TextArea(String s)創(chuàng)建一個(gè)內(nèi)容為s的文本區(qū)對象public TextArea(int x,int y)

17、創(chuàng)建一個(gè)內(nèi)容為空且行數(shù)為x、列數(shù)為y的文本區(qū)對象public TextArea(String s, int x, int y)創(chuàng)建一個(gè)內(nèi)容為s且行數(shù)為x、列數(shù)為y的文本區(qū)對象public TextArea(String s, int x, int y, int scollbar)創(chuàng)建一個(gè)內(nèi)容為s、行數(shù)為x、列數(shù)為y、滾動(dòng)條樣式為指定樣式的文本區(qū)對象。scollbar取值為：TextArea.SCOLLBARS_BOTH, TextArea.SCOLLBARS_VERTICAL_ONLY, TextArea.SCOLLBARS_HORIZONTAL_ONLY, TextArea.SCOLLBAR

18、S_NONE實(shí)例方法public void append(String s)在文本區(qū)尾部追加文本內(nèi)容s實(shí)例方法public void insert(String s, int position)在文本區(qū)位置position處插入文本spublic void setText(String s)設(shè)置文本區(qū)中的內(nèi)容為文本spublic String getText( )獲取文本區(qū)的內(nèi)容public String getSelectedText( )獲取文本區(qū)中選中的內(nèi)容public void replaceRange(String s, int start, int end)把文本區(qū)中從start位

19、置開始至end位置之間的文本用s替換public void setCaretPosition(int position)設(shè)置文本區(qū)中光標(biāo)的位置public int getCaretPosition( )獲得文本區(qū)中光標(biāo)的位置public void setSelectionStart(int position)設(shè)置要選中文本的起始位置public void setSelectionEnd(int position設(shè)置要選中文本的終止位置public int getSelectionStart( )獲取選中文本的起始位置public int getSelectionEnd( )獲取選中文本的終止位

20、置public void selectAll( )選中文本區(qū)的全部文本5.4 事件處理機(jī)制 5.4.1 Java事件處理概述引入事件處理機(jī)制后的編程基本方法如下。(1) 在java.awt中，組件實(shí)現(xiàn)事件處理必須使用java.awt.event包，所以在程序開始處應(yīng)加入import java.awt.event.*語句。(2) 用如下語句設(shè)置事件監(jiān)聽者：事件源.addXxxListener(事件監(jiān)聽者)。(3) 事件監(jiān)聽者所對應(yīng)的類實(shí)現(xiàn)事件所對應(yīng)的接口XxxListener，并重寫接口中的全部方法。這樣就能處理圖形用戶界面中的對應(yīng)事件。要?jiǎng)h除事件監(jiān)聽者，可以使用語句：事件源.removeXxx

21、Litener( )。5.4.2 Java常用事件事件類/接口名稱接口方法與說明ActionEvent 動(dòng)作事件類ActionListener接口actionPerformed(ActionEvent e)單擊按鈕、選擇菜單項(xiàng)或在文本行中按回車鍵時(shí)ComponentEvent 調(diào)整事件類ComponentListener接口componentMoved(ComponentEvent e)組件移動(dòng)時(shí)componentHidden(ComponentEvent e)組件隱藏時(shí)componentResized(ComponentEvent e)組件縮放時(shí)componentShown(Componen

22、tEvent e)組件顯示時(shí)FocusEvent 焦點(diǎn)事件類FocusListener接口focusGained(FocusEvent e)組件獲得焦點(diǎn)時(shí)focusLost(FocusEvent e)組件失去焦點(diǎn)時(shí)ItemEvent 選擇事件類ItemListener接口itemStateChanged(ItemEvent e)選擇復(fù)選框、單選按鈕、單擊列表框、選中帶復(fù)選框菜單時(shí)WindowEvent 窗口事件類WindowListener接口windowOpened(WindowEvent e)窗口打開后windowClosed(WindowEvent e)窗口關(guān)閉后windowClosin

23、g(WindowEvent e)窗口關(guān)閉時(shí)windowActivated(WindowEvent e)窗口激活時(shí)windowDeactivated(WindowEvent e)窗口失去焦點(diǎn)時(shí)windowIconified(WindowEvent e)窗口最小化時(shí)windowDeiconified(WindowEvent e)最小化窗口還原時(shí)AdjustmentEvent 調(diào)整事件類AdjustmentListener接口adjustmentValueChanged(AdjustmentEvent e)改變滾動(dòng)條滑塊位置5.4.3 事件適配器Java為那些聲明了多個(gè)方法的Listener接口提供

24、了一個(gè)對應(yīng)的適配器(Adapter)類，在該類中實(shí)現(xiàn)了對應(yīng)接口的所有方法，只是方法體為空。 接 口 名 稱適配器名稱接 口 名 稱適配器名稱ComponentListener MouseListenerComponentAdapterMouseAdapterFocusListener MouseMotionListenerFocusAdapterMouseMotionAdapterItemListener WindowListenerItemAdapterWindowAdapterKeyListener KeyAdapter 5.5 其他常用組件5.5.1 選擇框(Checkbox)選擇框分為

25、復(fù)選框與單選按鈕兩種，在一組復(fù)選框中可選多項(xiàng)，但在一組單選按鈕中只允許選一項(xiàng)。它們對應(yīng)的類同為Checkbox。 類別方 法 定 義功 能構(gòu)造方法public Checkbox( )創(chuàng)建沒有名稱且沒有選中的復(fù)選框public Checkbox(String s)創(chuàng)建一個(gè)名稱是s的沒有選中的復(fù)選框，名稱出現(xiàn)在復(fù)選框右側(cè)public Checkbox(String s, boolean b)創(chuàng)建一個(gè)名稱是s的復(fù)選框，名稱出現(xiàn)在復(fù)選框右側(cè)，選中狀態(tài)由參數(shù)b設(shè)定；若b取值為true，則復(fù)選框?yàn)檫x中狀態(tài)，若b取值為false，則復(fù)選框?yàn)槲催x中狀態(tài)public Checkbox(String s, boo

26、lean b , CheckboxGroup g)g是CheckboxGroup類的對象，相當(dāng)于一個(gè)邏輯分組。當(dāng)用Checkbox類創(chuàng)建對象，且對象屬于一個(gè)邏輯分組時(shí)，創(chuàng)建的對象為單選按鈕實(shí)例方法public boolean getState( )獲取選擇框的選中狀態(tài)public void setState(boolean b)設(shè)置選擇框的選中狀態(tài)public String getLabel( )獲取選擇框顯示在右側(cè)的名稱public void setLabel(String s)設(shè)置選擇框的顯示在右側(cè)的名稱5.5.2 選項(xiàng)框(Choice)這是用戶十分熟悉的一個(gè)組件，用戶可以在下拉列表中看到

27、第一個(gè)選項(xiàng)，在選項(xiàng)右側(cè)有一個(gè)下拉箭頭，當(dāng)用戶單擊下拉箭頭時(shí)，則選項(xiàng)列表打開，用戶可選擇其中的選項(xiàng)。 類 別方 法 定 義功 能構(gòu)造方法public Choice( )該方法創(chuàng)建一個(gè)選項(xiàng)框?qū)嵗椒╬ublic void add(String name)將name項(xiàng)加入到選項(xiàng)框中public String getItem(int index)獲取位置索引編號為index的選項(xiàng)名稱public int getItemCount( )獲取選項(xiàng)框中選項(xiàng)的數(shù)目類 別方 法 定 義功 能實(shí)例方法public int getSelectedIndex( )獲取選項(xiàng)框中選中項(xiàng)的位置索引編號public Stri

28、ng getSelectedItem( )獲取選項(xiàng)框中選中項(xiàng)的名稱public void insert(String item, int index)將選擇項(xiàng)插入到指定位置索引編號處。item代表要插入的項(xiàng)，index代表插入的位置索引編號public void remove(int position)從選項(xiàng)框中移除指定位置的一個(gè)項(xiàng)。position表示位置號public void remove(String item)移除選項(xiàng)框中第一個(gè)出現(xiàn)的 itempublic void removeAll( )從選項(xiàng)框中移除所有的項(xiàng)public void select(int pos)將位置索引編號為p

29、os的選項(xiàng)設(shè)定為選中的項(xiàng)public void select(String str)將此選項(xiàng)框中名稱等于指定字符串str的項(xiàng)設(shè)為選中項(xiàng)。當(dāng)選項(xiàng)框中有多個(gè)選項(xiàng)名稱相同時(shí)，僅把索引編號最小的選項(xiàng)設(shè)為選中狀態(tài)5.5.3 列表框(List)列表框與選項(xiàng)框均是從提供的選項(xiàng)中選取選項(xiàng)，但顯示形式不同，初始時(shí)選項(xiàng)框只顯示一項(xiàng)選項(xiàng)，但列表框初始時(shí)可顯示多個(gè)選項(xiàng)。當(dāng)列表框不足以顯示出所有列表項(xiàng)時(shí)，自動(dòng)在右側(cè)添加滾動(dòng)條。選項(xiàng)框只允許用戶選取一個(gè)選項(xiàng)，但列表框可供用戶選多項(xiàng)。在此把列表框與選項(xiàng)框中一些不同的方法列出 .類 別方 法 定 義功 能構(gòu)造方法public List( )創(chuàng)建一個(gè)有默認(rèn)可見行的列表框publ

30、ic List(int n)創(chuàng)建一個(gè)能顯示n行選項(xiàng)的列表框public List(int n, boolean b)創(chuàng)建一個(gè)能顯示n行選項(xiàng)，且設(shè)定了是否允許多選的列表框；當(dāng)參數(shù)b值為true時(shí)，該列表框允許用戶多項(xiàng)選擇。當(dāng)參數(shù)b值為false時(shí)，該列表框不允許用戶多項(xiàng)選擇實(shí)例方法public String getSelectedItems( )獲取列表框中選中的多項(xiàng)名稱。返回值是字符串?dāng)?shù)組public int getSelectedIndexes( )獲取選項(xiàng)框中選中的多項(xiàng)位置索引編號。返回值是整型數(shù)組5.6 菜 單 設(shè) 計(jì) 菜單系統(tǒng)由菜單條、菜單、菜單項(xiàng)組成。要?jiǎng)?chuàng)建一個(gè)菜單系統(tǒng)，首先要有一個(gè)

31、框架，在框架上添加菜單條，然后在菜單條中添加若干個(gè)菜單，每個(gè)菜單再添加若干菜單項(xiàng)。1菜單條(MenuBar)菜單條是一個(gè)放置菜單的容器。(1) 構(gòu)造方法如下所示。public MenuBar( )：創(chuàng)建一個(gè)菜單條。(2) 常用方法如下所示。public Menu add(Menu m)：將菜單加入到菜單條中。在設(shè)計(jì)菜單時(shí)，通過使用Frame類的setMenuBar( )方法將菜單條加入到框架中標(biāo)題條的下方。 2菜單(Menu)菜單是一個(gè)放置菜單項(xiàng)或下一級菜單的容器。菜單對象放在菜單條對象里 .類 別方 法 定 義功 能構(gòu)造方法public Menu(String s)創(chuàng)建一個(gè)標(biāo)題信息為s的菜單實(shí)例方法public void add(MenuItem it)向菜單中加入菜單項(xiàng)public void add(MenuItem it, MenuShortCut ms)向菜單中加入菜單項(xiàng)it。菜單項(xiàng)帶有快捷鍵public void addSeperator( )向菜單中加入分隔線public void insert(MenuItem it, int n)向菜單的指定位置加入菜單項(xiàng)public void insert(String s, int