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

第5章 圖形用戶界面設(shè)計(jì),教學(xué)目標(biāo)： 通過本章的學(xué)習(xí)，掌握常用容器組件的用法、容器組件的布局方式、組成界面的可視組件的功能與用法；掌握事件處理機(jī)制，能進(jìn)行菜單設(shè)計(jì)，最終達(dá)到開發(fā)出智能化的圖形界面應(yīng)用程序的目的。,案例 學(xué)生信息注冊(cè)界面設(shè)計(jì)解析 多數(shù)學(xué)校的學(xué)生檔案信息都由計(jì)算機(jī)進(jìn)行管理，在編寫的檔案管理應(yīng)用程序中，有檔案信息錄入模塊，該模塊的功能是在圖形化的界面下，用戶把信息輸入到計(jì)算機(jī)中。錄入界面的大致樣式及組件名稱如圖,設(shè)計(jì)上述程序界面并實(shí)現(xiàn)相應(yīng)的功能，程序框架如下： public class InputData implements ActionListener Frame f; /聲明框架對(duì)象 Label l1,l2,l3,l4; /聲明標(biāo)簽對(duì)象 TextField t; /聲明文本行對(duì)象 Checkbox r1,r2; /聲明單選按鈕對(duì)象 CheckboxGroup g; /聲明組對(duì)象 Checkbox c1,c2,c3; Choice ch; /聲明選擇框?qū)ο?Button b; /聲明按鈕對(duì)象 TextArea ta; /聲明文本區(qū)對(duì)象 Panel p1,p2,p3,p4,p5; /聲明面板對(duì)象 int i=0;,public InputData( ) 對(duì)象實(shí)例化； ch.add(“濟(jì)南“); /添加選擇項(xiàng) p1=new Panel( ); p1.setLayout(new FlowLayout(FlowLayout.LEFT); /設(shè)定面板布局樣式 p1.add(l1); /在面板中加入組件 f.setLayout(new GridLayout(2,1); /設(shè)定框架布局樣式 f.addWindowListener(new WindowAdapter( ) /注冊(cè)事件監(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(String args ) new InputData( ); 在上面的案例框架中，應(yīng)用到了如下知識(shí)點(diǎn)。 (1) 組成界面的各種組件。 (2) 界面的布局樣式。 (3) 事件處理機(jī)制。 下面將詳細(xì)介紹相關(guān)的知識(shí)。,5.1 框架與面板,5.1.1 認(rèn)識(shí)Component類 部分類的繼承關(guān)系如圖,Component類是其他組件類的父類，在此介紹該類的一些方法，這些方法可直接繼承到子類中使用。 (1) setFont(Font f)：設(shè)置組件的字體。 (2) setForeground(Color r)：設(shè)置組件的前景色。 (3) setLocation(int x,int y)：設(shè)置組件的顯示位置。 (4) setSize(int 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 對(duì)象的形式獲得組件的邊界。,5.1.2 框架 框架類Frame是一種帶標(biāo)題條并且可以改變大小的窗口，該類為容器類。 Frame類的構(gòu)造方法及實(shí)例方法 :,5.1.3 面板 面板類Panel也是容器類。但與Frame類的區(qū)別是，面板是一種沒有標(biāo)題條的容器，在應(yīng)用時(shí)只能把該類實(shí)例化的對(duì)象通過Container類的add方法加載到Window對(duì)象中。 該類的構(gòu)造方法如下。 (1) public Panel( )：創(chuàng)建一個(gè)面板對(duì)象。 (2) public Panel(LayoutManager mgr)：創(chuàng)建一個(gè)面板對(duì)象且約定了添加到該面板中組件的布局樣式。,5.2 布局管理器,5.2.1 邊界布局 該布局將容器組件劃分成了5個(gè)區(qū)域：南(South)、北(North)、東(East)、西(West)、中(Center)。 邊界布局類 邊界布局類為BorderLayout，該類的構(gòu)造方法如下。 (1) public BorderLayout( )：創(chuàng)建一個(gè)邊界布局管理類對(duì)象。 (2) public BorderLayout(int hgap, int vgap)：創(chuàng)建一個(gè)邊界布局管理類對(duì)象。其中，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是代表位置的常量值，分別是BorderLayout. 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è)流布局類對(duì)象。 (2) public FlowLayout(int align)：創(chuàng)建一個(gè)流布局類對(duì)象，其中align表示對(duì)齊方式，其值有3個(gè)，為FlowLayout .LEFT、FlowLayout .RIGHT、FlowLayout .CENTER，默認(rèn)為FlowLayout .CENTER。 (3) public FlowLayout(int align, int hgap, int vgap)：其中align表示對(duì)齊方式；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)格布局類為GridLayout，該類的構(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ì)像卡片一樣排放在容器中，只有最上面的卡片可見。,5.3 按鈕、標(biāo)簽、文本行、文本區(qū),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)造方法 (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)簽文本的對(duì)齊方式，分別為L(zhǎng)abel.LEFT(左對(duì)齊)、Label.RIGHT(右對(duì)齊)、Label.CENTER(居中對(duì)齊)，默認(rèn)對(duì)齊方式為居中對(duì)齊。 2常用方法 (1) public void setText(String s)：通過該方法，把標(biāo)簽上的提示信息設(shè)為s。 (2) public String getLabel( )：通過該方法，獲取標(biāo)簽上的提示信息。,5.3.3 文本行(TextField) 文本行用來輸入單行文本。,5.3.4 文本區(qū)(TextArea) 文本區(qū)可以輸入多行文本，且文本區(qū)帶有滾動(dòng)條。,5.4 事件處理機(jī)制,5.4.1 Java事件處理概述 引入事件處理機(jī)制后的編程基本方法如下。 (1) 在java.awt中，組件實(shí)現(xiàn)事件處理必須使用java.awt.event包，所以在程序開始處應(yīng)加入import java.awt.event.*語(yǔ)句。 (2) 用如下語(yǔ)句設(shè)置事件監(jiān)聽者：事件源.addXxxListener(事件監(jiān)聽者)。 (3) 事件監(jiān)聽者所對(duì)應(yīng)的類實(shí)現(xiàn)事件所對(duì)應(yīng)的接口XxxListener，并重寫接口中的全部方法。 這樣就能處理圖形用戶界面中的對(duì)應(yīng)事件。要?jiǎng)h除事件監(jiān)聽者，可以使用語(yǔ)句：事件源.removeXxxLitener( )。,5.4.2 Java常用事件,5.4.3 事件適配器 Java為那些聲明了多個(gè)方法的Listener接口提供了一個(gè)對(duì)應(yīng)的適配器(Adapter)類，在該類中實(shí)現(xiàn)了對(duì)應(yīng)接口的所有方法，只是方法體為空。,5.5 其他常用組件,5.5.1 選擇框(Checkbox) 選擇框分為復(fù)選框與單選按鈕兩種，在一組復(fù)選框中可選多項(xiàng)，但在一組單選按鈕中只允許選一項(xiàng)。它們對(duì)應(yīng)的類同為Checkbox。,5.5.2 選項(xiàng)框(Choice) 這是用戶十分熟悉的一個(gè)組件，用戶可以在下拉列表中看到第一個(gè)選項(xiàng)，在選項(xiàng)右側(cè)有一個(gè)下拉箭頭，當(dāng)用戶單擊下拉箭頭時(shí)，則選項(xiàng)列表打開，用戶可選擇其中的選項(xiàng)。,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)框中一些不同的方法列出 .,5.6 菜 單 設(shè) 計(jì),菜單系統(tǒng)由菜單條、菜單、菜單項(xiàng)組成。要?jiǎng)?chuàng)建一個(gè)菜單系統(tǒng)，首先要有一個(gè)框架，在框架上添加菜單條，然后在菜單條中添加若干個(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)或下一級(jí)菜單的容器。菜單對(duì)象放在菜單條對(duì)象里 .,3. 菜單項(xiàng) (1) 構(gòu)造方法如下所示。 MenuItem(String s)：創(chuàng)建一個(gè)標(biāo)題信息為s的菜單項(xiàng)。 (2) 常用方法如下所示。 setEnable(boolean b)：設(shè)置菜單項(xiàng)的顯示狀態(tài)。當(dāng)值為true時(shí)，菜單項(xiàng)顯示，當(dāng)值為false時(shí)，菜單項(xiàng)不顯示。 說明：當(dāng)菜單設(shè)計(jì)好后，要為菜單項(xiàng)注冊(cè)事件監(jiān)聽器，無須為菜單條與菜單注冊(cè)事件監(jiān)聽器，只要用戶單擊菜單，則自動(dòng)彈出下級(jí)菜單。,4. 快捷菜單 快捷菜單也稱為彈出式菜單，附著在某個(gè)組件上，當(dāng)在附有快捷菜單的組件上單擊鼠標(biāo)右鍵時(shí)，即顯示快捷菜單。 PopupMenu類用于創(chuàng)建快捷菜單，其構(gòu)造方法為： public PopupMenu( ) 創(chuàng)建快捷菜單通常要進(jìn)行如下幾個(gè)步驟。 (1) 把快捷菜單加入到依附的組件。方法為：組件.add(PopupMenu popmenu)。 (2) 給依附的組件注冊(cè)鼠標(biāo)事件監(jiān)聽器。方法為：組件.addMouseListener(listener)。 (3) 實(shí)現(xiàn)鼠標(biāo)事件接口中的方法。一般是在mouseClicked( )或mouseRealease( )方法中執(zhí)行popmenu.show(組件, int x, int y)語(yǔ)句。其中組件是指彈出菜單所依附的組件，x、y設(shè)定彈出菜單的顯示位置。,5.7 Swing組件介紹,Swing和AWT的關(guān)系： (1) Swing構(gòu)件都是AWT的Container類的直接或間接子類。 (2) Swing是對(duì)AWT的擴(kuò)展，AWT是Swing的基礎(chǔ)。 (3) Swing和AWT構(gòu)件的基本使用方法相同，事件處理機(jī)制相同。 在使用時(shí)，應(yīng)注意以下幾點(diǎn)。 (1) 大多數(shù)情況下在AWT組件前加一個(gè)J即為Swing組件。組件基本都包含在javax.