圖形用戶(hù)界面設(shè)計(jì).ppt

圖形用戶(hù)界面設(shè)計(jì),Java的圖形用戶(hù)界面,2,主要內(nèi)容,Java的GUI簡(jiǎn)介 自定義圖形設(shè)計(jì) 圖形、文字、圖象 Java的標(biāo)準(zhǔn)組件 容器和組件 GUI的布局 事件處理,Java的圖形用戶(hù)界面,3,圖形用戶(hù)界面（GUI）,字符界面 用字符串、命令行的方式與用戶(hù)交互 圖形用戶(hù)界面:Graphics User Interface 用直觀(guān)的圖形來(lái)表示數(shù)據(jù) 用直觀(guān)、方便的GUI標(biāo)準(zhǔn)組件來(lái)接收命令 GUI組成成分的標(biāo)準(zhǔn)化 使用圖形的方式借助菜單、按鈕等標(biāo)準(zhǔn)界面元素和鼠 標(biāo)操作，來(lái)幫助用戶(hù)方便地向計(jì)算機(jī)系統(tǒng)發(fā)出命令， 啟動(dòng)操作，并將系統(tǒng)運(yùn)行的結(jié)果同樣以圖形的方式顯 示給用戶(hù)。,Java的圖形用戶(hù)界面,用戶(hù)界面設(shè)計(jì)原則,控制權(quán)在用戶(hù) 界面與操作的風(fēng)格一致性 寬容（容錯(cuò)）性 簡(jiǎn)潔與美觀(guān)并重,Java的圖形用戶(hù)界面,5,圖形用戶(hù)界面簡(jiǎn)介,圖形用戶(hù)界面的構(gòu)成 容器：布局、安排 標(biāo)準(zhǔn)組件 用戶(hù)自定義成分 設(shè)計(jì)&實(shí)現(xiàn)圖形用戶(hù)界面的工作 創(chuàng)建GUI各組成成分，并安排從屬位置關(guān)系，根據(jù)具體需要對(duì)其進(jìn)行排序，構(gòu)成完整外觀(guān)。 定義GUI各成分對(duì)不同事件的響應(yīng)，實(shí)現(xiàn)與用戶(hù)的交互功能。,Java的圖形用戶(hù)界面,6,界面構(gòu)成,容器,用戶(hù)自定義成分,容器是用來(lái)組織其他界面成分和元素的單元。一般一個(gè)圖形用戶(hù)界面對(duì)應(yīng)一個(gè)復(fù)雜容器。如一窗口 標(biāo)準(zhǔn)組件是圖形用戶(hù)界面的最小單位,它里面不再包含其他的成分。如單選按鈕,文本框,菜單 用戶(hù)自定義成分是指編程人員根據(jù)用戶(hù)需要設(shè)計(jì)一些用戶(hù)自定義的圖形界面成分。如繪制幾何圖形,標(biāo)準(zhǔn) 組件,Java的圖形用戶(hù)界面,7,界面元素,容器是用來(lái)組織其他界面成分和元素的單元。 可以形成容器的層次，構(gòu)筑復(fù)雜結(jié)構(gòu) Window（Frame、Applet、Dialog ） 組件是圖形用戶(hù)界面的基本單位，它里面不再包含其他的成分。 GUI組件是圖形用戶(hù)界面標(biāo)準(zhǔn)化的結(jié)果。常用的組件有: 選擇類(lèi)的: 單選按鈕、復(fù)選按鈕、下拉列表； 文字處理類(lèi)的: 文本框、文本區(qū)域 命令類(lèi)的: 按鈕、菜單等 GUI組件的作用是完成與用戶(hù)的交互。包括接收用戶(hù)的命令、文本或選擇輸入，向用戶(hù)顯示一段文本或一個(gè)圖形等。,Java的圖形用戶(hù)界面,8,界面元素,使用組件通常需要如下的步驟 創(chuàng)建某組件類(lèi)的對(duì)象，指定其大小等屬性。 使用某種布局策略，將該組件對(duì)象加入到某個(gè)容器中的某指定位置處。 將該組件對(duì)象注冊(cè)給它所能產(chǎn)生的事件對(duì)應(yīng)的事件監(jiān)聽(tīng)者，重載事件的處理方法，實(shí)現(xiàn)利用該組件對(duì)象與用戶(hù)交互的功能。 用戶(hù)自定義成分 顯示文字、繪制圖形、顯示圖象 不能像標(biāo)準(zhǔn)組件一樣被系統(tǒng)識(shí)別和承認(rèn)，只起裝飾作用。 不能響應(yīng)用戶(hù)的動(dòng)作，不具有交互功能。,Java的圖形用戶(hù)界面,9,圖形用戶(hù)界面（GUI）,Java的圖形用戶(hù)界面編程： 為方便圖形用戶(hù)界面的開(kāi)發(fā)，設(shè)計(jì)了專(zhuān)門(mén)的類(lèi)庫(kù) 來(lái)生成各種標(biāo)準(zhǔn)圖形界面元素和處理圖形界面的 各種事件，這個(gè)用來(lái)生成圖形界面的類(lèi)庫(kù)就是java.awt包。AWT是abstract window toolkit抽象窗 口工具集的縮寫(xiě)。 AWT類(lèi)庫(kù)中的各種操作被定義在一個(gè)窗口中進(jìn)行，開(kāi)發(fā)人員用AWT開(kāi)發(fā)出的圖形用戶(hù)界面可以適用于所有的平臺(tái)系統(tǒng)。,Java的圖形用戶(hù)界面,10,AWT包,Abstract Window Toolkit(抽象窗口工具集) 提供各種構(gòu)成GUI的標(biāo)準(zhǔn)構(gòu)件。 AWT類(lèi)庫(kù)中的各種操作被定義在一個(gè)窗口中進(jìn)行的。 抽取不同軟硬件平臺(tái)中所實(shí)現(xiàn)的窗口的公共特性。 依賴(lài)于具體平臺(tái)系統(tǒng)實(shí)現(xiàn)：顯示效果可能不同。 提供與機(jī)器無(wú)關(guān)的基本GUI標(biāo)準(zhǔn)組件 選擇類(lèi)組件：?jiǎn)芜x按鈕、復(fù)選框、下拉選單、 列表框 文字處理類(lèi)組件：標(biāo)簽、文本框、編輯框。 命令類(lèi)組件：按鈕、工具欄、菜單等。,Java的圖形用戶(hù)界面,11,從一個(gè)簡(jiǎn)單窗口開(kāi)始,創(chuàng)建GUI應(yīng)用程序 Frame必不可少 它是帶標(biāo)題的頂層窗口,是構(gòu)建應(yīng)用程序圖形界面的基礎(chǔ),它為應(yīng)用程序?qū)崿F(xiàn)人機(jī)交互提供了對(duì)話(huà)窗口 先來(lái)建一個(gè)空的窗口應(yīng)用: Empty.java 注意：一定要處理關(guān)閉窗口的事件,Java的圖形用戶(hù)界面,12,import java.awt.*; /must import to use GUI /must extends Frame in an application public class Empty extends Frame / 暫時(shí)采用1.0.2的事件處理方法，關(guān)閉窗口 public boolean handleEvent(Event evt) /根據(jù)Event類(lèi)中參數(shù)evt的id值來(lái)判斷發(fā)生事件的種類(lèi) if(evt.id= =Event.WINDOW_DESTROY) System.exit(0); / return的返回值表示將余下的事件處理交給handleEvent( )的父 / 類(lèi)處理，從而保證對(duì)事件的正常處理 return super.handleEvent(evt); public static void main(String args) Frame f=new Empty(); f.setSize(300,200); f.setVisible(true); ,Java的圖形用戶(hù)界面,13,繪制用戶(hù)自定義成分,用戶(hù)自定義成分屬于構(gòu)成GUI的非標(biāo)準(zhǔn)部分 無(wú)法響應(yīng)用戶(hù)事件 一般僅僅起背景裝飾、輸出效果突出的作用 Java中的用戶(hù)自定義成分 顯示文字 繪制圖形 顯示圖片,Java的圖形用戶(hù)界面,14,繪制用戶(hù)自定義成分,一般在容器中(窗口)或畫(huà)布上繪制。 利用Java.awt類(lèi)庫(kù)中的類(lèi)及其方法繪制用戶(hù)自定義的圖形界面成分。 Graphics類(lèi)包含很多繪制圖形和文字的方法 。 首先要獲得Graphics類(lèi)的實(shí)例，然后利用其方法繪制。 Graphics類(lèi)的實(shí)例一般作為相關(guān)方法的參數(shù)傳遞進(jìn)來(lái)： paint(Graphics g) Java程序圖形界面的 坐標(biāo)設(shè)置,Java的圖形用戶(hù)界面,15,繪制圖形及其相關(guān)方法,drawLine(x1,y1,x2,y2) /直線(xiàn) drawRect(x,y,w,h) /矩形 drawOval(x,y,w,h) /圓或橢圓 fillOval(x,y,w,h) /實(shí)心圓或橢圓 drawPolygon(X坐標(biāo)數(shù)組，Y坐標(biāo)數(shù)組，頂點(diǎn)個(gè)數(shù)) /畫(huà)多邊形 drawArc (x,y,w,h,開(kāi)始角度，弧度角度) setColor(Color c) /設(shè)置顏色 setFont(Font f) /設(shè)置字體 getColor() getFont(),Java的圖形用戶(hù)界面,16,繪制圖形及其相關(guān)方法,從(x1,y1)到(x2,y2)畫(huà)直線(xiàn) drawLine(x1,y1,x2,y2) 參數(shù)均為int 畫(huà)弧線(xiàn)drawArc(x,y,w,h,) 參數(shù)均為int x,y為繪制弧形的左上角的坐標(biāo)； w,h為弧形的寬度和高度；為弧形的起始角，為弧形的弧度， 為正，表順時(shí)針?lè)较颍?為負(fù)，表逆時(shí)針?lè)较颉?以(x,y)為左上角、w為寬度、h為高度畫(huà)矩形 drawRect(x,y,w,h) 參數(shù)均為int fillRect(x,y,w,h)、clearRect(x,y,w,h),Java的圖形用戶(hù)界面,17,繪制圖形及其相關(guān)方法,畫(huà)圓或橢圓 drawOval(x,y,w,h) x,y為繪制圓或橢圓的左上角的坐標(biāo)，w,h確定了 橢圓的寬度和高度 畫(huà)實(shí)心圓或橢圓 fillOval(x,y,w,h) 畫(huà)多邊形 drawPolygon(X坐標(biāo)數(shù)組，Y坐標(biāo)數(shù)組，頂點(diǎn)個(gè)數(shù)) P.185,Java的圖形用戶(hù)界面,18,繪制圖形及其相關(guān)方法,例子： sanmao.java,Java的圖形用戶(hù)界面,19,/畫(huà)頭部,橢圓方法drawOval g.setColor(Color.black); /setColor用來(lái)設(shè)置要使用的顏色 g.drawOval(40,40,120,150); . /畫(huà)頭發(fā),直線(xiàn)方法drawLine,畫(huà)弧方法drawArc g.drawLine(100,10,100,60); g.drawArc(110,20,100,80,90,90); . /畫(huà)嘴巴,填充畫(huà)弧方法fillArc g.fillArc(60,130,80,40,180,180); . /畫(huà)耳朵,填充橢圓方法fillOval,復(fù)制圖形方法copyArea g.fillOval(25,92,15,30); g.copyArea(25,92,15,30,136,0); /拷貝某區(qū)域的圖形至另一區(qū)域 . /畫(huà)身體,多邊形方法fillPolygon g.fillPolygon(polygon_x,polygon_y,polygon_pt_num);,Java的圖形用戶(hù)界面,20,顯示文字,字體顯示效果類(lèi)：Font 一個(gè)Font類(lèi)的對(duì)象表示了一種字體顯示效果，包括字體類(lèi)型、風(fēng)格和字號(hào)。 Font mf = new Font(String 字體，int 風(fēng)格，int 字號(hào)); 字體：TimesRoman, Courier, Arial等 風(fēng)格：三個(gè)常量 Font.PLAIN, Font.BOLD, Font.ITALIC 字號(hào)：字的大?。ò鯏?shù)） 設(shè)置當(dāng)前使用的字體：setFont(Font fn) 獲取當(dāng)前使用的字體：getFont() 例：UseFonts.java,Java的圖形用戶(hù)界面,21,String FontName = “TimesRoman“,“Courier“,“Arial“; int FontStyle = Font.PLAIN, Font. BOLD, Font.ITALIC; String StyleName = “PLAIN“, “BOLD“, “ITALIC“ ; public void paint( Graphics g) for ( int i=0; i3; i+) for ( int j=0; j3; j+) /set a new font and draw a string with the new font g.setFont(new Font(FontNamei, FontStylej, 12); g.drawString( “ABEXYZ “ + FontNamei + “ “ + StyleNamej, 10,20*(i*3+j+2); /end of paint,Java的圖形用戶(hù)界面,22,paint()與update(),某組件的paint()和 update()為系統(tǒng)自動(dòng)調(diào)用的有關(guān)圖 形繪制的方法，不可人為編程調(diào)用；但可編程重新 定義其操作內(nèi)容 使用repaint()方法可以觸發(fā)update()方法,Java的圖形用戶(hù)界面,23,顯示圖象,圖形與圖象，java支持gif和jpeg格式 保存二進(jìn)制圖象的java.awt.Image類(lèi) 獲取Image對(duì)象的方法 getImage(圖象文件所在的URL) getImage(圖象文件所在的URL,圖象文件名) Applet類(lèi)以及java.awt.Toolkit中均有方法的定義 注意：在application中只能使用Toolkit，而在Applet中，兩者均可使用,Java的圖形用戶(hù)界面,24,顯示圖象,在applet小程序中，可使用Applet類(lèi)的getImage方法獲得圖象。 Image ig = getImage() 而在application中就只能使用ToolKit類(lèi)的getImage方法： Image ig = getToolkit().getImage(“文件名”); 然后用Graphics類(lèi)的drawImage方法顯示Image對(duì)象。,Java的圖形用戶(hù)界面,25,顯示圖象,顯示圖象的方法 drawImage(Image 對(duì)象, x, y,背景色, ImageObserver); java.awt.Graphics類(lèi)中定義了此方法 第一個(gè)參數(shù)是保存圖像數(shù)據(jù)的Image對(duì)象。 第二、三個(gè)參數(shù)是圖像的左上角坐標(biāo)，它們決定了圖像在容器中的顯示位置。 ImageObserver為一個(gè)接口，java的組件類(lèi)實(shí)現(xiàn)了此接口，此處可理解為觀(guān)察/顯示Image對(duì)象容器，編程時(shí)一般可使用this，用于提示圖象是否加載完成,Java的圖形用戶(hù)界面,26,顯示圖象,表示顏色的類(lèi)Color 顯示的字符串或圖形的顏色可以用Color類(lèi)的對(duì)象來(lái)控制，每個(gè)Color 對(duì)象代表一種顏色，用戶(hù)可以直接使用Color類(lèi)中定義好的顏色常量，也可以通過(guò)調(diào)配紅、綠、藍(lán)三色的比例創(chuàng)建自己的Color對(duì)象 Color(red,green,blue)來(lái)創(chuàng)建非缺省色 調(diào)用Graphics對(duì)象的setColor()方法可把當(dāng)前的缺省顏色改成新建的顏色 Color blueColor=new Color(0,0,255); g.setColor(blueColor); P.189,Java的圖形用戶(hù)界面,27,Color類(lèi),構(gòu)造方法1（設(shè)置顏色） Color c = new Color(int red, int green, int blue) 范圍 ：0255 new Color(200,200,200) new Color(255,0,100) 構(gòu)造方法2 Color c = new Color(float red, float green, float blue) 范圍 ：0.0 1.0 Color類(lèi)定義了13種顏色常量值 Color.black, Color.blue, Color.gray, Color.red . 對(duì)GUI的組件有四種與顏色相關(guān)的方法來(lái)設(shè)置和獲取其背景色和前景色: setBackground(Color c); getBackground(); setForeground(); getForeground();,Java的圖形用戶(hù)界面,28,例：DrawMyImage.java public class DrawMyImage extends Frame /獲得Toolkit實(shí)例的方法getDefaultToolkit() Toolkit toolkit=Toolkit.getDefaultToolkit(); Image myImage ; public DrawMyImage() /獲得Image對(duì)象, 圖象文件在當(dāng)前目錄下時(shí) myImage = toolkit.getImage(“Invntory.gif“); /在paint方法中繪制圖象 public void paint(Graphics g) g.drawImage(myImage, 0, 40, Color.orange, this ); ,Java的圖形用戶(hù)界面,29,GUI標(biāo)準(zhǔn)組件概述,構(gòu)建程序的圖形用戶(hù)界面的主要任務(wù)有兩個(gè) 創(chuàng)建各界面組件并排列成圖形用戶(hù)界面的外觀(guān) 定義這些組件對(duì)不同事件的影響從而完成圖形用戶(hù)界面功能 組成圖形用戶(hù)界面的成分有三類(lèi) 用戶(hù)自定義類(lèi) 容器: 是能夠容納并排列其他組件的對(duì)象 組件: 放置在容器中的對(duì)象 在Java中，容器和組件是由AWT包中的對(duì)象來(lái)代表， 這些對(duì)象間的層次關(guān)系如下圖：,Java的圖形用戶(hù)界面,30,AWT類(lèi)層次關(guān)系圖,Java的圖形用戶(hù)界面,31,GUI標(biāo)準(zhǔn)組件概述,基本組件被安放在容器中的某位置，用來(lái)完成一種具體的與用戶(hù)交互的功能，使用基本組件一般包括如下的步驟 創(chuàng)建某種基本組件類(lèi)的新對(duì)象，指定該對(duì)象的屬性 比如：外觀(guān)、大小等 將該組件對(duì)象加入到某個(gè)容器的合適位置 創(chuàng)建該組件對(duì)象的監(jiān)聽(tīng)者，即實(shí)現(xiàn)以該組件為事件源的事件對(duì)應(yīng)的監(jiān)聽(tīng)者接口，也可以使現(xiàn)有的類(lèi)實(shí)現(xiàn)該接口成為監(jiān)聽(tīng)者。將該組件對(duì)象注冊(cè)給此監(jiān)聽(tīng)者，并在監(jiān)聽(tīng)者內(nèi)部實(shí)現(xiàn)監(jiān)聽(tīng)者接口中定義的方法，對(duì)該組件可能引發(fā)的事件加以處理，定義新加入組件對(duì)象的交互性界面功能。 比如：接收用戶(hù)輸入的文本、在屏幕顯示輸出等,Java的圖形用戶(hù)界面,32,GUI標(biāo)準(zhǔn)組件,Component:所有組件和容器的抽象父類(lèi) 顯示功能：paint(), update(), repaint() 顯示效果控制：字體、顏色、位置、尺寸 圖象處理：一般利用Canvas和Container來(lái)顯示圖像 事件處理機(jī)制（java 1.1）： addXXXListener( ) removeXXXListener( ),Java的圖形用戶(hù)界面,33,Component類(lèi),可顯示在屏幕上的圖形對(duì)象，可與用戶(hù)交互。 是所有組件和容器的抽象父類(lèi)，其中定義了一些每個(gè) 容器和組件都可能用到的方法。 add(PopupMenu popup) 在組件上加入一彈出菜單 addFocusListener(FocusListener l)將發(fā)生在本組件上的事件注冊(cè)給監(jiān)聽(tīng)者，以進(jìn)行事件處理。 setSize(int width, int height) 設(shè)置組件尺寸 repaint(int x,int y,int width, int height) 重畫(huà)組件 setFont(Font f) 設(shè)置組件字體 setBackground(Color c) 設(shè)置組件背景色 setVisible(boolean b) 設(shè)置組件是否可見(jiàn),Java的圖形用戶(hù)界面,34,GUI標(biāo)準(zhǔn)組件,簡(jiǎn)單構(gòu)件：人機(jī)交互的基本工具(控制) Button,Checkbox, Label等 TextComponent(TextArea,TextField) Canvas 復(fù)雜構(gòu)件: Container(安放排列其他構(gòu)件的容器) Panel Window,Java的圖形用戶(hù)界面,35,Container（容器）,排列其中包容的構(gòu)件 定位布局策略 set/getLayout() 包容其他基本構(gòu)件 增加構(gòu)件: add( ) 刪除構(gòu)件: remove( ) 控制是否顯示容器及其中組件 setVisible(true/false),Java的圖形用戶(hù)界面,36,Container容器組件,Window 無(wú)邊框、菜單的空白窗口。不需要其他組件支撐， 獨(dú)立顯示。 Frame: 用于Application，含邊框、標(biāo)題和菜單的獨(dú)立窗口 Dialog: 依賴(lài)于 Frame的非獨(dú)立窗口。沒(méi)有菜單條，不能 改變大小。 Panel (面板)屬于無(wú)邊框容器。必須放在Window組件中(或Web瀏覽器窗口)才能顯示。它為一矩形區(qū)域，在其中可擺放其他組件，可以有自己的布局管理器。 無(wú)邊框容器包括Panel和Applet。其中Applet為Panel的子類(lèi) 基本方法 add(Component comp) 將指定組件放到容器中 getComponent(int index) 獲取指定序號(hào)的組件 remove(Component comp) 刪除指定組件 setLayout(LayoutManager mgr) 設(shè)置容器布局,Java的圖形用戶(hù)界面,37,容器的組件布局,布局管理器（layout manager) 用于控制組件在容器中的布局 負(fù)責(zé)確定組件在容器中的位置和大小。 調(diào)用容器的setLayout(布局管理器對(duì)象) 方法，為容器指定某種布局。 當(dāng)容器需要定位組件和確定組件大小時(shí)，就會(huì)給布局管理器對(duì)象發(fā)消息，讓它完成該項(xiàng)工作。 直接管理組件 調(diào)用容器的 setLayout(null) 方法，關(guān)閉布局管理器。 調(diào)用每一個(gè)組件的setLocation()方法決定組件位置。 調(diào)用每一個(gè)組件的setSize()方法決定其大小。,Java的圖形用戶(hù)界面,38,布局管理器種類(lèi),在Java的GUI界面設(shè)計(jì)中，布局控制是通過(guò)為容器設(shè)置布 局編輯器來(lái)實(shí)現(xiàn)的。Java.awt包中共定義了五種布局編輯 類(lèi)，每一個(gè)布局編輯類(lèi)對(duì)應(yīng)一種布局策略： FlowLayout ：組件在一行中按加入的先后順序從左至右水平排列， 排滿(mǎn)后折行，每行中的組件都居中排列。 BorderLayout：把容器空間劃分為北、南、西、東、中五個(gè)區(qū)， 每加入一個(gè)組件都應(yīng)說(shuō)明把這個(gè)組件加在那個(gè)區(qū) 域中。 CardLayout：每一個(gè)組件作為一個(gè)卡片，容器僅顯示多個(gè)卡片中 的某一個(gè) GridLayout：以行和列的網(wǎng)格形式安排組件 GridBagLayout：更復(fù)雜、功能更強(qiáng)的網(wǎng)格布局,Java的圖形用戶(hù)界面,39,確定容器布局,缺省的布局管理器 Window、Frame、Dialog BorderLayout: 缺省的窗口容器的管理器 Panel、Applet FlowLayout: 缺省的Panel布局管理器 選擇布局管理器的方法 建立布局管理器類(lèi)的對(duì)象 利用容器的 setLayout 為容器指定布局(即指定一個(gè)布局管理器的對(duì)象),Java的圖形用戶(hù)界面,40,確定容器布局,改變?nèi)笔〔季止芾砥鞯姆椒ǎ?例：BorderLayout B=new BorderLayout(); C1.setLayout(B); or C1.setLayout(new BorderLayout(); 例: 將myFrame布局設(shè)定為FlowLayout類(lèi)型 myFrame.setLayout(new FlowLayout();,Java的圖形用戶(hù)界面,41,Frame,Frame(String title) 構(gòu)造一個(gè)新的不可見(jiàn)的frame 隱含的布局管理器是：BorderLayout setLayout() 設(shè)置新的布局管理器。 add(Component comp) 在容器上增加一個(gè)組件（在容器為不可見(jiàn)的狀態(tài)時(shí)加）。 void setSize(int width, int height) 設(shè)置組件大小 setVisible(true) 設(shè)置組件可見(jiàn),Java的圖形用戶(hù)界面,42,Frame Panel,Frame fm1 = new Frame(“Hello“); fm1.setSize(400,350); fm1.setBackground(Color.gray); fm1.setLayout(null); Panel pn1 = new Panel(); pn1.setSize(100,100); pn1.setBackground(Color.red); pn1.setLocation(0,50); fm1.add(pn1); fm1.setVisible(true);,Java的圖形用戶(hù)界面,43,FlowLayout布局管理器,構(gòu)造方法： FlowLayout() ; FlowLayout(int align, int hgap, int vgap)； align ：對(duì)齊方式：LEFT CENTER RIGHT hgap ：組件水平間距 （象素） vgap ：組件垂直間距 無(wú)參數(shù)的構(gòu)造方法創(chuàng)建的FlowLayout對(duì)象，其對(duì)齊方式為CENTER居中方式，組件間的橫縱間距都為5個(gè)像素。,Java的圖形用戶(hù)界面,44,FlowLayout布局管理器,Frame f = new Frame(“FlowLayout“); f.setSize(400,300); /不起作用 f.setBackground(Color.gray); f.setLayout(new FlowLayout(FlowLayout.LEFT,10,20); b1 = new Button(“button1“); b2 = new Button(“button2“); b3 = new Button(“button3“); f.add(b1); f.add(b2); f.add(b3); f.setVisible(true); f.pack(); /詢(xún)問(wèn)布局管理器窗體大小,Java的圖形用戶(hù)界面,45,BorderLayout布局管理器,setLayout(new BorderLayout() ) add(b1,BorderLayout.NORTH); 當(dāng)容器大小改變，組件相對(duì)位置不會(huì)改變。,Java的圖形用戶(hù)界面,46,BorderLayout布局管理器,f = new Frame(“BorderLayout“); f.setSize(200,200); b1 = new Button(“button1“); b5 = new Button(“button5“); f.add(b1,BorderLayout.NORTH); f.add(b2,BorderLayout.SOUTH); f.add(b3,BorderLayout.WEST); f.add(b4,BorderLayout.EAST); f.add(b5,BorderLayout.CENTER); f.setVisible(true);,Java的圖形用戶(hù)界面,47,Border-Panel,class MyFrame extends Frame MyFrame() Button b1 = new Button(“ 1 “); Button b2 = new Button(“ 2 “); Button b3 = new Button(“ 3 “); Button b4 = new Button(“ 4 “); Panel p = new Panel(); p.add(b1); p.add(b2); add(p,BorderLayout.NORTH); add(b3,BorderLayout.WEST); add(b4,BorderLayout.CENTER); pack(); setVisible(true); ,Java的圖形用戶(hù)界面,48,GridLayout布局管理器,創(chuàng)建GridLayout對(duì)象作為布局編輯器，指定劃分網(wǎng)格的 行數(shù)和列數(shù)(網(wǎng)格大小一樣）。 setLayout(new GridLayout(行數(shù), 列數(shù)); setLayout(new GridLayout(行數(shù), 列數(shù),行間隔,列間隔); 調(diào)用容器的方法add()將組件加入容器，組件填入容器 的順序?qū)凑盏谝恍械谝粋€(gè)、第一行第二個(gè)、 每個(gè)網(wǎng)格中都必須填入組件，如果希望某個(gè)網(wǎng)格為空白，可以為它加入一個(gè)空的標(biāo)簽： add (new Label();,Java的圖形用戶(hù)界面,49,GridLayout布局管理器,f = new Frame(“GridLayout“); f.setLayout(new GridLayout(2,3); f.setSize(200,100); f.setBackground(Color.gray); b1 = new Button(“1“); b6 = new Button(“6“); f.add(b1); f.setVisible(true);,Java的圖形用戶(hù)界面,50,布局例,Frame fm = new Frame() fm.setLayout(new FlowLayout(); tf = new TextField(22); fm.add(tf); Panel p1 = new Panel(); p1.setLayout(new GridLayout(4,3); p1.add(); Panel p2 = new Panel(); p2.setLayout(new GridLayout(4,3); p2.add(); fm. add(p1); fm. add(p2);,Java的圖形用戶(hù)界面,51,GridBagLayout布局管理器,每個(gè)GridBagLayout對(duì)象維護(hù)一個(gè)動(dòng)態(tài)矩形網(wǎng)格， 每個(gè)組件可占據(jù)一個(gè)或多個(gè)單元作為它的顯示區(qū)域。 每一個(gè)組件都與一個(gè)GridBagConstraints類(lèi)的實(shí)例相連，以指定在顯示區(qū)域中如何擺放,并可確定大小。 步驟： setLayout(new GridBagLayout(); GridBagConstraints gbc = new GridBagConstraints(); gbc.gridx = 0; (屬性賦值) add(button1 , gbc ),Java的圖形用戶(hù)界面,52,GridBagLayout布局管理器,設(shè)置GridBagConstraints類(lèi)實(shí)例屬性值： gridx gridy 組件顯示區(qū)域的左上角單元格坐標(biāo) gridwidth gridheight 指定顯示區(qū)域行、列單元數(shù) RELATIVE 緊挨著前一個(gè)組件擺放 fill 當(dāng)顯示區(qū)域大于組件時(shí)如何擴(kuò)充組件： HORIZONTAL 水平充滿(mǎn) VERTICAL 垂直充滿(mǎn) BOTH 全部填充 NONE 不調(diào)整（隱含） ipadx ipady 指定組件間最小間隔 anchor 當(dāng)顯示區(qū)域大于組件時(shí)如何擺放組件(對(duì)齊方式) CENTER（隱含）, NORTH, EAST, SOUTH, WEST, SOUTHEAST, NORTHEAST, SOUTHWEST, NORTHWEST.,Java的圖形用戶(hù)界面,53,CardLayout布局管理器,使用CardLayout的容器表面可以容納多個(gè)組件，將每 一個(gè)組件視為一張卡片，同一時(shí)刻只能顯示一個(gè)組件。 setLayout(new CardLayout() CardLayout方法（按序指定組件） first(Container parent) 顯示第一個(gè)版面的內(nèi)容 last(Container parent) 顯示最后一個(gè)版面的內(nèi)容 previous(Container parent) 顯示前一個(gè)版面的內(nèi)容 next(Container parent) 顯示下一個(gè)版面的內(nèi)容 CardLayout方法(按名顯示組件） addLayoutComponent(String name, Component c) show(Container parent, String name),Java的圖形用戶(hù)界面,54,利用AWT創(chuàng)建自己的GUI,GUI外觀(guān)設(shè)計(jì) 設(shè)計(jì)標(biāo)準(zhǔn)構(gòu)件層次關(guān)系：構(gòu)件層次結(jié)構(gòu)關(guān)系樹(shù) 設(shè)置容器布局策略：setLayout() 生成標(biāo)準(zhǔn)構(gòu)件 向容器中添加組成構(gòu)件：add()方法 構(gòu)件事件處理 例：AWTComponent.java,Java的圖形用戶(hù)界面,55,public class AWTComponent extends Frame . . . public AWTComponent() setSize(450,300); /設(shè)置Frame大小 setLayout(new FlowLayout(); /設(shè)置布局 . . . /創(chuàng)建組件 Group1 = new CheckboxGroup(); /創(chuàng)建單選按鈕組 radioButton1 = new Checkbox(“male“, Group1, false); add(radioButton1); /把組件加入容器 radioButton2 = new Checkbox(“female“, Group1, false); add(radioButton2); . . . setVisible(true); /顯示容器及組件 . . . ,還缺什么嗎？,Java的圖形用戶(hù)界面,56,Java1.0.2的事件處理,使用單一的java.awt.Event類(lèi)來(lái)接受所有類(lèi)型的事件； 使用action(), handleEvent( )以及其他的一些事件處理方法（如鼠標(biāo)事件、鍵盤(pán)事件、焦點(diǎn)事件）來(lái)進(jìn)行相應(yīng)事件的事件處理。 缺點(diǎn)：造成長(zhǎng)if分支語(yǔ)句組，不利于面向?qū)ο蟮木幊?Java的圖形用戶(hù)界面,57,Java1.1 對(duì)事件處理的改進(jìn),引入java.awt.event包 更加面向?qū)ο螅子诶斫?定義了事件的“發(fā)生者”和“監(jiān)聽(tīng)者”對(duì)象 按鈕事件、文本事件、選擇事件、調(diào)整事件、 鼠標(biāo)事件、鍵盤(pán)事件等 事件以類(lèi)層次來(lái)表達(dá)，取代了1.0.2中的單一的 類(lèi)，并可以自定義事件類(lèi)型,Java的圖形用戶(hù)界面,58,事件及處理機(jī)制,用戶(hù)操作GUI組件時(shí)會(huì)引發(fā)各種事件。 事件 ：描述“發(fā)生了什么事情”的對(duì)象。 系統(tǒng)根據(jù)用戶(hù)的操作構(gòu)造出相應(yīng)事件類(lèi)的對(duì)象。 事件源：事件的產(chǎn)生地。 事件處理程序：是一個(gè)方法，它接收一個(gè)事件對(duì)象、 分析它、并完成對(duì)該事件的處理。 每個(gè)事件有一個(gè)相應(yīng)的監(jiān)聽(tīng)者接口，它規(guī)定了能夠接收（并處理）該類(lèi)事件的方法的規(guī)范。 監(jiān)聽(tīng)者：實(shí)現(xiàn)了監(jiān)聽(tīng)者接口的類(lèi)，它包含有事件處理 程序。 編程人員要為事件源指定監(jiān)聽(tīng)者對(duì)象（即指定處理某種事件的事件處理程序）。,Java的圖形用戶(hù)界面,59,事件處理機(jī)制,組件（事件發(fā)生者）觸發(fā)一個(gè)相應(yīng)類(lèi)型的事 件 此事件由相應(yīng)類(lèi)型的Listener（事件監(jiān)聽(tīng)者） 接收并處理,Java的圖形用戶(hù)界面,60,事件及處理機(jī)制,調(diào)用按扭的 addActionListener ( ) 方法，為該按扭指定監(jiān)聽(tīng)者。,Java的圖形用戶(hù)界面,61,幾個(gè)有用的概念,事件 在java.awt.event包中定義了若干類(lèi)型 的事件類(lèi) 監(jiān)聽(tīng)者接口 特定類(lèi)型的Listener接口，用于 監(jiān)聽(tīng)特定類(lèi)型的事件 監(jiān)聽(tīng)者類(lèi) 是實(shí)現(xiàn)了某種監(jiān)聽(tīng)者接口的類(lèi)，由編程者定義 事件監(jiān)聽(tīng)者 是某個(gè)監(jiān)聽(tīng)者類(lèi)的對(duì)象，由編 程者使用new創(chuàng)建,Java的圖形用戶(hù)界面,62,實(shí)現(xiàn)步驟,根據(jù)需要定義相應(yīng)類(lèi)型的監(jiān)聽(tīng)者類(lèi)，在類(lèi)的 定義中完成事件的處理（建議使用inner class 定義）； 創(chuàng)建事件監(jiān)聽(tīng)者對(duì)象； 為將會(huì)觸發(fā)事件的組件C注冊(cè)相應(yīng)的事件監(jiān)聽(tīng) 者對(duì)象（使用C的addXXXListener()方法）。 例：ButtonAct.java,Java的圖形用戶(hù)界面,63,public class ButtonAct extends Frame . . . public ButtonAct() . . . /為b1注冊(cè)事件監(jiān)聽(tīng)者B1 b1.addActionListener(new B1(); add(b1); . . . /利用inner class結(jié)構(gòu)定義監(jiān)聽(tīng)者類(lèi) class B1 implements ActionListener /利用actionPerformed方法進(jìn)行事件處理 public void actionPerformed(ActionEvent e) who.setText(“Button 1“); . . . /:,Java的圖形用戶(hù)界面,64,事件與監(jiān)聽(tīng)者類(lèi)型,XXXListener接口與XXXEvent XXX為特定類(lèi)型 常用類(lèi)型： Action, Focus, Key, Window, MouseEvent vs. Mouse/MouseMotionListener 注冊(cè)與取消：組件包含的新方法 addXXXListener()與removeXXXListener() 參考：eventtables.html,Java的圖形用戶(hù)界面,65,監(jiān)聽(tīng)者接口中有什么？,每種Listener接口均定義了一套abstract方法， 編程者必須在監(jiān)聽(tīng)者類(lèi)中實(shí)現(xiàn)這些方法來(lái)做事 件處理； 例： ActionListener: actionPerformed() WindowListener: windowOpened/Closing/Closed/Activated/ Deactivated/Iconified/Deiconified(),Java的圖形用戶(hù)界面,66,使用Listener Adapter,由于接口中的方法為abstract方法，所以在監(jiān)聽(tīng)者類(lèi)中要實(shí)現(xiàn)所有的方法，較為煩瑣。 為了簡(jiǎn)化編程，引入了Adapter。具有兩個(gè)以上方法的監(jiān)聽(tīng)者接口均對(duì)應(yīng)一個(gè)XXXAdapter類(lèi)，提供了接口中每個(gè)方法的缺省實(shí)現(xiàn)。,Java的圖形用戶(hù)界面,67,使用Listener Adapter（續(xù)）,例： class MyWindowListener extends WindowAdapter public void windowClosing(WindowEvent e) System.exit(0); 參考：Listener.html 例：DoubleClick.java（相應(yīng)鼠標(biāo)事件）,Java的圖形用戶(hù)界面,68,public class DoubleClick extends Frame Vector m_vLocs; /保存鼠標(biāo)單擊過(guò)的各點(diǎn), 用以繪制各點(diǎn)連線(xiàn) Point m_CursorLoc; /跟蹤當(dāng)前鼠標(biāo)位置, 用以繪制十字光標(biāo) public DoubleClick() m_vLocs = new Vector(); m_CursorLoc = new Point(100,100); setSize(400, 400); /為Frame注冊(cè)3個(gè)事件監(jiān)聽(tīng)者 addMouseListener(new click(); addMouseMotionListener(new move(); addWindowListener(new wd(); public void paint(Graphics g) /繪制十字光標(biāo), 連接各點(diǎn) ,Java的圖形用戶(hù)界面,69,class click extends MouseAdapter /鼠標(biāo)事件監(jiān)聽(tīng)者類(lèi) public void mouseClicked(MouseEvent e) /響應(yīng)點(diǎn)擊 if(e.getClickCount()1) /雙擊時(shí)清除向量中各點(diǎn) m_vLocs.removeAllElements(); else /單擊時(shí)在向量中增加一點(diǎn) m_vLocs.addElement(e.getPoint(); repaint(); /重新繪制一次 class move extends MouseMotionAdapter/鼠標(biāo)移動(dòng)監(jiān)聽(tīng)者類(lèi) public void mouseMoved(MouseEvent e) /響應(yīng)移動(dòng) m_CursorLoc = new Point(e.getX(),e.getY(); repaint(); /重新繪制一次 ,Java的圖形用戶(hù)界面,70,事件類(lèi),ActionEvent類(lèi)：屬于動(dòng)作事件，包括：點(diǎn)擊按鈕；雙擊一個(gè)列表中的選項(xiàng);選擇菜單項(xiàng)；在文本框中按回車(chē)。最典型的例子是：鼠標(biāo)點(diǎn)擊按鈕所產(chǎn)生的事件，經(jīng)ActionListener接口觸發(fā)一連串動(dòng)作，再由actionPerformed()方法完成這些動(dòng)作。 e.getSource() 返回事件發(fā)生的對(duì)象(名) e.getActionCommand() 返回按扭名(動(dòng)作事 件的命令字符串)。 ActionListener 接口 public void actionPerformed(ActionEvent e),Java的圖形用戶(hù)界面,71,圖形用戶(hù)界面例,import java.awt.*; import java.awt.event.*; public class a public static void main(String args) MyFrame form1 = new MyFrame(); class MyFrame extends Frame MyFrame() super(“窗口標(biāo)題“); setSize(200,100); setFont(new Font(“TimesRoman“,Font.BOLD,20);,Java的圖形用戶(hù)界面,72,圖形用戶(hù)界面例,setLayout(new FlowLayout(); Button b = new Button(“close“); add(b); b.addActionListener(new Bprocess(); setVisible(true); class Bprocess implements ActionListener public void actionPerformed(ActionEvent e) System.exit(0); ,Java的圖形用戶(hù)界面,73,監(jiān)聽(tīng)者類(lèi),某個(gè)類(lèi)可以兼職也可以專(zhuān)職做這件事（實(shí)現(xiàn)監(jiān)聽(tīng)者接口）。 一個(gè)類(lèi)若實(shí)現(xiàn)一個(gè)接口，必須實(shí)現(xiàn)接口的全部方法。 例如：ActionListener接口只有一個(gè)方法： void actionPerformed(ActionEvent e) 實(shí)現(xiàn)接口的類(lèi)可以是： 一般類(lèi) 內(nèi)部類(lèi) 匿名類(lèi),Java的圖形用戶(hù)界面,74,事件處理有關(guān)問(wèn)題,有哪些事件類(lèi) (java.awt.event) ？ 每個(gè)事件類(lèi)的監(jiān)聽(tīng)者接口？ 每個(gè)監(jiān)聽(tīng)者接口規(guī)定的方法？ 多方法的監(jiān)聽(tīng)者接口的適配器（實(shí)現(xiàn)接口的抽象類(lèi)）是什么？ 組件的事件委托（注冊(cè)）方法？,Java的圖形用戶(hù)界面,75,窗口事件,關(guān)閉窗口框時(shí)引發(fā) WindowEvent事件 委托 addWindowListener(new Wclose(); 定義監(jiān)聽(tīng)者類(lèi) class Wclose implements WindowListener public void windowClosing(WindowEvent e) System.exit(0); WindowListener類(lèi)有7 個(gè)方法，必須都實(shí)現(xiàn) WindowAdapter 接收窗口事件的抽象適配器類(lèi)，用空內(nèi)容實(shí)現(xiàn)了WindowListener接口的所有方法 class Wclose extends WindowAdapter ,Java的圖形用戶(hù)界面,76,ActionEvent動(dòng)作事件,引發(fā)原因： 單擊按扭，雙擊列表框中選項(xiàng)，選擇菜單項(xiàng)，文本框中的回車(chē) 事件監(jiān)聽(tīng)接口：ActionListener 接口方法： actionPerformed(ActionEvent e) 組件注冊(cè)該事件方法： addActionListener(監(jiān)聽(tīng)者）,Java的圖形用戶(hù)界面,77,TextEvent文本事件,引發(fā)原因： 文本框或文本區(qū)域內(nèi)容改變 事件監(jiān)聽(tīng)接口：TextListener 接口方法： textValueChanged(TextEvent e) 組件注冊(cè)該事件方法： addTextListener(監(jiān)聽(tīng)者）,Java的圖形用戶(hù)界面,78,ItemEvent選擇事件,引發(fā)原因： 改變列表框中的選中項(xiàng) 改變復(fù)選框選中狀態(tài) 改變下拉選單的選中項(xiàng) 事件監(jiān)聽(tīng)接口：ItemListener 接口方法： itemStateChanged(ItemEvent e) 組件注冊(cè)該事件方法： addItemListener(監(jiān)聽(tīng)者）,Java的圖形用戶(hù)界面,79,AdjustmentEvent調(diào)整事件,引發(fā)原因： 操作滾動(dòng)條改變滑塊位置 事件監(jiān)聽(tīng)接口：AdjustmentListener 接口方法： adjustmentValueChanged(AdjustmentEvent e) 組件注冊(cè)該事件方法： addAdjustmentListen