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

1、圖形用戶界面設(shè)計hao1第第11章章 圖形用戶界面設(shè)計圖形用戶界面設(shè)計圖形用戶界面設(shè)計hao2圖形用戶界面的概念圖形用戶界面的概念 對計算機而言，對計算機而言，用戶界面用戶界面是用戶和計算是用戶和計算機之間進行信息交互的界面，用戶通過機之間進行信息交互的界面，用戶通過這個界面得到這個界面得到程序運行的狀態(tài)或輸出的程序運行的狀態(tài)或輸出的信息信息，向計算機，向計算機輸入用戶數(shù)據(jù)，操縱和輸入用戶數(shù)據(jù)，操縱和控制程序的運行控制程序的運行。 計算機的用戶界面由用戶可以直接操縱計算機的用戶界面由用戶可以直接操縱的的鍵盤鍵盤，鼠標(biāo)鼠標(biāo)和用戶可以直接感知的和用戶可以直接感知的顯顯示屏幕示屏幕、喇叭喇叭等器件構(gòu)

2、成等器件構(gòu)成 圖形用戶界面設(shè)計hao3dos 命令行界面命令行界面 圖形用戶界面設(shè)計hao4windows圖形界面圖形界面 圖形用戶界面設(shè)計hao5建立一個圖形界面的內(nèi)容建立一個圖形界面的內(nèi)容 n通過建立和添加通過建立和添加組件組件形成圖形界面的形成圖形界面的屏幕顯示部分屏幕顯示部分 n通過通過事件處理事件處理的設(shè)計定義當(dāng)用戶點擊的設(shè)計定義當(dāng)用戶點擊這些組件或進行鍵盤操作后程序所執(zhí)行這些組件或進行鍵盤操作后程序所執(zhí)行的的動作動作 n通過設(shè)置通過設(shè)置布局管理器布局管理器定義圖形組件的定義圖形組件的位置安排位置安排 圖形用戶界面設(shè)計hao6組組 件件組件組件: :專門用于建立圖形界面的專門用于建立

3、圖形界面的javajava類。類。最常用的組件最常用的組件: :視窗框架（視窗框架（frameframe） 文本框（文本框（textfieldtextfield、textareatextarea） 命令按鈕（命令按鈕（buttonbutton） 標(biāo)簽（標(biāo)簽（labellabel）等等。等等。建立圖形界面的第一步，是要建立圖形組件，建立圖形界面的第一步，是要建立圖形組件，也就是創(chuàng)建圖形組件對象，然后通過組件添也就是創(chuàng)建圖形組件對象，然后通過組件添加，形成組件之間的層次結(jié)構(gòu)加，形成組件之間的層次結(jié)構(gòu) 圖形用戶界面設(shè)計hao7抽象窗口工具包抽象窗口工具包q抽象窗口工具包抽象窗口工具包( (awt)a

4、wt)是一組是一組javajava類，此組類，此組javajava類允許創(chuàng)建圖形用戶類允許創(chuàng)建圖形用戶界面界面( (gui)gui)。qawtawt提供用于創(chuàng)建生動而高效的提供用于創(chuàng)建生動而高效的guigui的各種組件的各種組件。圖形用戶界面設(shè)計hao8java.awt 包中的類體系結(jié)構(gòu)包中的類體系結(jié)構(gòu)componentbuttoncheckboxcontainerchoicecanvastextcomponentlabelpanelwindowappletframedialogtextareatextfield圖形用戶界面設(shè)計hao9容容 器器 可以存放組件的區(qū)域，可以存放組件的區(qū)域，可在容

5、器上進行可在容器上進行繪制和著色繪制和著色 java.awt包中的包中的container類可直接或間接類可直接或間接派生出兩個常用容器：派生出兩個常用容器：框架（框架（frame類）類）和面板（和面板（panel類）。類）。 框架是一個帶有邊框的獨立的窗口?？蚣苁且粋€帶有邊框的獨立的窗口。 面板是包含在窗口中的一個不帶邊框的面板是包含在窗口中的一個不帶邊框的區(qū)域。區(qū)域。 圖形用戶界面設(shè)計hao10容器容器 框架框架 框架是獨立于框架是獨立于applet和瀏覽器的一個窗口。和瀏覽器的一個窗口。 可以通過以下任一構(gòu)造函數(shù)來創(chuàng)建：可以通過以下任一構(gòu)造函數(shù)來創(chuàng)建： frame( ): :創(chuàng)建一個不含

6、標(biāo)題的標(biāo)準(zhǔn)窗口創(chuàng)建一個不含標(biāo)題的標(biāo)準(zhǔn)窗口 frame(string title): : 創(chuàng)建一個含有標(biāo)題的窗口，創(chuàng)建一個含有標(biāo)題的窗口，這個標(biāo)題是由參數(shù)這個標(biāo)題是由參數(shù)title指定的。指定的。 當(dāng)一個當(dāng)一個frame窗口被創(chuàng)建以后，需要調(diào)用窗口被創(chuàng)建以后，需要調(diào)用setsize( )方法來設(shè)置窗口的大小，并調(diào)用方法來設(shè)置窗口的大小，并調(diào)用setvisible( )來顯示窗口。來顯示窗口。圖形用戶界面設(shè)計hao11使用容器示例使用容器示例import java.awt.*;public class e11_1public static void main(string args) frame

7、f=new frame(frame窗體窗體);f.setbounds(100,100,250,300);f.setbackground(color.green);f.setvisible(true);圖形用戶界面設(shè)計hao12容器容器 - 面板面板 面板不是一個單獨的窗口，它只是包含面板不是一個單獨的窗口，它只是包含在窗口中的一個區(qū)域。在窗口中的一個區(qū)域。 面板是可以將許多組件組合起來的一種面板是可以將許多組件組合起來的一種容器。容器。 最簡單的創(chuàng)建面板的方式就是通過面板最簡單的創(chuàng)建面板的方式就是通過面板的構(gòu)造函數(shù)的構(gòu)造函數(shù) panel( ) panel( ) 來進行。來進行。 必須將面板添加

8、到窗體中。必須將面板添加到窗體中。圖形用戶界面設(shè)計hao13import java.awt.*;public class e11_2public static void main(string args) frame f=new frame(panel面板面板);panel pan=new panel();f.setsize(160,160); f.setbackground(color.pink);f.setlayout(null); /取消默認(rèn)管理器取消默認(rèn)管理器 pan.setsize(80,80);pan.setbackground(color.green);f.add(pan);pa

9、n.setlocation(40,40);f.setvisible(true);圖形用戶界面設(shè)計hao14012435401534外觀的管理與控制外觀的管理與控制圖形用戶界面設(shè)計hao15布局管理器布局管理器v用戶界面上的組件可以按不同方式排列。用戶界面上的組件可以按不同方式排列。vjava使用布局管理器來管理這些排列方式使用布局管理器來管理這些排列方式。每當(dāng)需要重新調(diào)整屏幕大小或重新繪制屏幕每當(dāng)需要重新調(diào)整屏幕大小或重新繪制屏幕上任一項目時，就要用到布局管理器。上任一項目時，就要用到布局管理器。vawt提供一組用來進行布局管理的類，稱提供一組用來進行布局管理的類，稱為布局管理器。為布局管理器

10、。圖形用戶界面設(shè)計hao16每個容器都要一個布局管理器，容器中組件的大小每個容器都要一個布局管理器，容器中組件的大小和定位都由它來決定。當(dāng)容器需要對某個組件進行和定位都由它來決定。當(dāng)容器需要對某個組件進行定位時，就會調(diào)用其對應(yīng)的布局管理器。定位時，就會調(diào)用其對應(yīng)的布局管理器。布局管理器布局管理器布局管理器布局管理器圖形用戶界面設(shè)計hao17布局類型布局類型 java中的中的布局類型包括以下幾種：布局類型包括以下幾種：- flowlayout（流式布局）流式布局） panelpanel和和appletapplet的缺省布局管理器的缺省布局管理器- borderlayout （邊界布局）（邊界布局

11、）windowwindow、dialogdialog和和frameframe的缺省布局管理器的缺省布局管理器- gridlayout（網(wǎng)格布局）（網(wǎng)格布局）- gridbaglayout（網(wǎng)格包布局）（網(wǎng)格包布局）- cardlayout （卡片布局）（卡片布局）圖形用戶界面設(shè)計hao18布局類型的選用布局類型的選用 每個布局管理器都有自己特定的用途。每個布局管理器都有自己特定的用途。- 要按行和列顯示幾個同樣大小的組件，要按行和列顯示幾個同樣大小的組件，gridlayout 會比較合適。會比較合適。- 要在盡可能大的空間里顯示一個組件，就要要在盡可能大的空間里顯示一個組件，就要選擇選擇 bo

12、rderlayout 或或 gridbaglayout 。圖形用戶界面設(shè)計hao19如何設(shè)置布局如何設(shè)置布局 每個容器（每個容器（container對象）都有一個與對象）都有一個與它相關(guān)的缺省的布局管理器。它相關(guān)的缺省的布局管理器。 在沒有設(shè)置新的布局前，在容器中添加在沒有設(shè)置新的布局前，在容器中添加組件都按照該容器的缺省布局排列。組件都按照該容器的缺省布局排列。 可以通過可以通過setlayout( )方法為容器設(shè)置新的方法為容器設(shè)置新的布局。布局。 圖形用戶界面設(shè)計hao20flowlayout flowlayout的構(gòu)造函數(shù)有：的構(gòu)造函數(shù)有：- flowlayout( ):生成一個默認(rèn)的

13、流式布局生成一個默認(rèn)的流式布局- flowlayout(int alignment):可以設(shè)定每一行組可以設(shè)定每一行組件的對齊方式件的對齊方式 - flowlayout(int alignment,int horz,int vert):可以可以設(shè)定組件間的水平和垂直距離設(shè)定組件間的水平和垂直距離vapplet和和panelpanel的缺的缺省布局省布局, ,組件從左上角組件從左上角開始按從左到右、從開始按從左到右、從上到下的方式排列上到下的方式排列flowlayout mylayout = new flowlayout();flowlayout exlayout = new flowlayou

14、t(flowlayout.right);setlayout(exlayout); / 為容器設(shè)置新布局為容器設(shè)置新布局 圖形用戶界面設(shè)計hao21程序見書程序見書p168p168圖形用戶界面設(shè)計hao22borderlayout 下面是下面是borderlayout所定義的構(gòu)造函數(shù)：所定義的構(gòu)造函數(shù)： - borderlayout( ):生成默認(rèn)的邊界布局生成默認(rèn)的邊界布局 - borderlayout(int horz,int vert): 可以設(shè)定組件間可以設(shè)定組件間的水平和垂直距離的水平和垂直距離 v窗口窗口、框架和對話框框架和對話框等的缺省布局等的缺省布局v組件可被置于容器的組件可被置

15、于容器的北、南、東、西或中間北、南、東、西或中間位置位置northsouthwesteastcenter圖形用戶界面設(shè)計hao23borderlayout borderlayout 類定義了幾個常量值以指定相應(yīng)區(qū)域： -borderlayout.north 對應(yīng)容器的頂部對應(yīng)容器的頂部-borderlayout.east 對應(yīng)容器的右部對應(yīng)容器的右部-borderlayout.south 對應(yīng)容器的底部對應(yīng)容器的底部-borderlayout.west 對應(yīng)容器的左部對應(yīng)容器的左部-borderlayout.center 對應(yīng)容器的中部對應(yīng)容器的中部加入組件方法：加入組件方法： void ad

16、d(component obj, int region)； . . . setlayout(new borderlayout(); button btneast=new button(東東); button btnwest=new button(西西); button btnnorth=new button(北北); button btnsouth=new button(南南); button btncenter=new button(中中); add(btneast,borderlayout.east); add(btnwest,borderlayout.west); add(btnnort

17、h,borderlayout.north); add(btnsouth,borderlayout.south); add(btncenter,borderlayout.center); . . .書書p169圖形用戶界面設(shè)計hao24gridlayoutp171 gridlayout的構(gòu)造函數(shù)如下所示：的構(gòu)造函數(shù)如下所示： - gridlayout( ):生成一個單列的網(wǎng)格布局生成一個單列的網(wǎng)格布局 - gridlayout(int row,int col):生成一個設(shè)定行數(shù)和列生成一個設(shè)定行數(shù)和列數(shù)的網(wǎng)格布局?jǐn)?shù)的網(wǎng)格布局 - gridlayout(int row,int col,int ho

18、rz,int vert)：可以設(shè)可以設(shè)置組件之間的水平和垂直間隔置組件之間的水平和垂直間隔 v用于將容器區(qū)域劃分用于將容器區(qū)域劃分為一個矩形網(wǎng)格為一個矩形網(wǎng)格v組件按行和列排列組件按行和列排列. . . button btn; / 聲明按鈕數(shù)組聲明按鈕數(shù)組 string str=1,2,3,4,5,6,7,8,9; setlayout(new gridlayout(3,3); btn=new buttonstr.length; / 創(chuàng)建按鈕數(shù)組創(chuàng)建按鈕數(shù)組 for(int i=0;istr.length;i+) btni=new button(stri); add(btni); 圖形用戶界面設(shè)

19、計hao25cardlayout 可存儲幾個不同的布局?？纱鎯讉€不同的布局。 每個布局就像是一個卡片組中的一張卡片。每個布局就像是一個卡片組中的一張卡片。 在一個給定的時間總會有一張卡片在頂層。在一個給定的時間總會有一張卡片在頂層。 卡片通常為一個卡片通常為一個 panel 對象。對象。 每當(dāng)需要許多面板切換，而每個面板需要每當(dāng)需要許多面板切換，而每個面板需要顯示為不同布局時，可以使用卡片布局。顯示為不同布局時，可以使用卡片布局。圖形用戶界面設(shè)計hao26p170nextnext( (containercontainerparent)parent) 翻轉(zhuǎn)到指定容器的下一張卡片。翻轉(zhuǎn)到指定容器

20、的下一張卡片。圖形用戶界面設(shè)計hao27gridbaglayout 通過使用以下語法容器可獲得通過使用以下語法容器可獲得 gridbaglayout：gridbaglayout gb=new gridbaglayout();containername.setlayout(gb); 要使用此布局，必須提供各組件的大小和布要使用此布局，必須提供各組件的大小和布局等信息。局等信息。 gridbagconstraints 類中包含類中包含 gridbaglayout 類用來定位及調(diào)整組件大小所需的全部信息。類用來定位及調(diào)整組件大小所需的全部信息。v組件大小不必相組件大小不必相同同v組件按行和列排組件按

21、行和列排列列v放置順序不一定放置順序不一定為從左至右和由上為從左至右和由上至下至下圖形用戶界面設(shè)計hao28awt組件組件 組件指可以放置在用戶界面上的任何東西組件指可以放置在用戶界面上的任何東西, ,可以將組件設(shè)置為可見或重新調(diào)整其大小。可以將組件設(shè)置為可見或重新調(diào)整其大小。 awt支持的組件：標(biāo)簽、文本域、文本區(qū)、支持的組件：標(biāo)簽、文本域、文本區(qū)、按鈕、復(fù)選框、選擇框等。按鈕、復(fù)選框、選擇框等。 高級組件包括滾動條、滾動窗格和對話框。高級組件包括滾動條、滾動窗格和對話框。 向窗口加入一個組件：首先生成所需組件的向窗口加入一個組件：首先生成所需組件的實例，然后調(diào)用實例，然后調(diào)用add()方法

22、，此方法是在方法，此方法是在container類中定義的。類中定義的。圖形用戶界面設(shè)計hao29不同組件不同組件標(biāo)標(biāo)簽簽文本域文本域復(fù)選框復(fù)選框單選按鈕單選按鈕文本區(qū)文本區(qū)按鈕按鈕圖形用戶界面設(shè)計hao30標(biāo)簽標(biāo)簽 可以通過以下任一構(gòu)造函數(shù)來創(chuàng)建：可以通過以下任一構(gòu)造函數(shù)來創(chuàng)建： label( ) : : 新建一個空標(biāo)簽新建一個空標(biāo)簽 label(string labeltext): : 新建一個包含給定文本新建一個包含給定文本的標(biāo)簽的標(biāo)簽 label(string labeltext, int alignment) : :新建一個包新建一個包含給定對齊方式的標(biāo)簽，對齊方式可以為含給定對齊方式

23、的標(biāo)簽，對齊方式可以為 label.left、label.right 或或 label.centerv通常用來指明項目的用途通常用來指明項目的用途v標(biāo)簽不可以被用戶編輯標(biāo)簽不可以被用戶編輯圖形用戶界面設(shè)計hao31文本域文本域 可以通過以下任一構(gòu)造函數(shù)來創(chuàng)建：可以通過以下任一構(gòu)造函數(shù)來創(chuàng)建：- textfield( ) : : 新建一個文本新建一個文本域域 - textfield(int columns) : : 新建一個包含給定新建一個包含給定列數(shù)的文本列數(shù)的文本域域 - textfield(string s) : : 新建一個包含給定字符新建一個包含給定字符串的文本串的文本域域 - tex

24、tfield(string s, int columns) : : 新建一個包新建一個包含給定字符串和列數(shù)的文本含給定字符串和列數(shù)的文本域域 v一種用來輸入文本的一種用來輸入文本的gui組件只能接受一行輸入組件只能接受一行輸入圖形用戶界面設(shè)計hao32標(biāo)簽和文本域使用示例標(biāo)簽和文本域使用示例import java.awt.*; class textlabeldemo extends frame label lblname=new label(“名稱名稱 :”); textfield txtname=new textfield(20); public textlabeldemo (string

25、title) super(title);setlayout(new flowlayout();add(lblname);add(txtname); public static void main(string args) textlabeldemo t=new textlabeldemo(正在測試組件！正在測試組件！);t.setsize(300,200); t.show(); 新建一個標(biāo)簽新建一個標(biāo)簽新建一個文本新建一個文本域域添加到窗口添加到窗口圖形用戶界面設(shè)計hao33文本區(qū)文本區(qū) 可以通過以下構(gòu)造函數(shù)來創(chuàng)建：可以通過以下構(gòu)造函數(shù)來創(chuàng)建：- textarea( ) : : 新建一個新建一

26、個textarea- textarea(int rows, int cols) : : 新建一個包含給新建一個包含給定行數(shù)和列數(shù)的定行數(shù)和列數(shù)的textarea- textarea(string text, int rows, int cols) : : 新建一新建一個包含給定字符串、行數(shù)和列數(shù)的個包含給定字符串、行數(shù)和列數(shù)的textareav要接受輸入多行文本時使用要接受輸入多行文本時使用v可以包括滾動條可以包括滾動條. . .textarea txtcomment=new textarea(); add(txtcomment); . . .圖形用戶界面設(shè)計hao34按鈕按鈕 可以使用以下任

27、一構(gòu)造函數(shù)來創(chuàng)建按鈕：可以使用以下任一構(gòu)造函數(shù)來創(chuàng)建按鈕：- button() : 新建一個空的按鈕新建一個空的按鈕- button(string text) : 新建一個包含給定字符串新建一個包含給定字符串的按鈕的按鈕v按鈕是任何按鈕是任何gui都都不可或缺的組件不可或缺的組件v用來捕捉用戶操作的最為簡便的用來捕捉用戶操作的最為簡便的方式方式. . .button btnok=new button(確定確定！);button btncancel=new button(取消取消！); add(btnok);add(btncancel); . . .圖形用戶界面設(shè)計hao35復(fù)選框復(fù)選框 可以使

28、用以下任一構(gòu)造函數(shù)來創(chuàng)建復(fù)選框：可以使用以下任一構(gòu)造函數(shù)來創(chuàng)建復(fù)選框： - checkbox()：創(chuàng)建一個空的復(fù)選框，且未被選中創(chuàng)建一個空的復(fù)選框，且未被選中 - checkbox(string text)：創(chuàng)建一個用給定字符串創(chuàng)建一個用給定字符串作為標(biāo)簽的復(fù)選框，且未被選中作為標(biāo)簽的復(fù)選框，且未被選中 - checkbox(string text,boolean on)：創(chuàng)建一個標(biāo)簽創(chuàng)建一個標(biāo)簽由參數(shù)由參數(shù)text指定的復(fù)選框，允許通過參數(shù)指定的復(fù)選框，允許通過參數(shù)on設(shè)定設(shè)定復(fù)選框的初始狀態(tài)。復(fù)選框的初始狀態(tài)。用于多選項的用戶輸入，用于多選項的用戶輸入，用戶可以通過單擊復(fù)選框用戶可以通過單

29、擊復(fù)選框來選定或取消選定某選項來選定或取消選定某選項圖形用戶界面設(shè)計hao36單選按鈕單選按鈕 可以通過復(fù)選框組生成一系列互斥的復(fù)選可以通過復(fù)選框組生成一系列互斥的復(fù)選框框, ,實現(xiàn)單選按鈕功能。實現(xiàn)單選按鈕功能。 在一組單選按鈕中只能選擇一個按鈕。在一組單選按鈕中只能選擇一個按鈕。圖形用戶界面設(shè)計hao37 創(chuàng)建單選按紐創(chuàng)建單選按紐: :(1)(1)首先創(chuàng)建一個首先創(chuàng)建一個 checkboxgroup 對象。對象。 checkboxgroup cg=new checkboxgroup();(2)(2)然后再創(chuàng)建各單選按鈕。然后再創(chuàng)建各單選按鈕。 checkbox male=checkbox(

30、男男,cg,true); checkbox female=checkbox(女女,cg,false);checkboxcheckbox( (stringstring label, label, checkboxgroupcheckboxgroup group, boolean state) group, boolean state) 使用使用指定標(biāo)簽創(chuàng)建一個指定標(biāo)簽創(chuàng)建一個 checkboxcheckbox，并使它處于指定復(fù)選框組內(nèi)，將它設(shè)置為并使它處于指定復(fù)選框組內(nèi)，將它設(shè)置為指定狀態(tài)指定狀態(tài)checkboxgroupcheckboxgroup() () 創(chuàng)建創(chuàng)建 checkboxgroup

31、 checkboxgroup 的一個新實例。的一個新實例。圖形用戶界面設(shè)計hao38復(fù)選框和單選按鈕使用示例復(fù)選框和單選按鈕使用示例import java.awt.*;class qualification extends frame checkbox t1=new checkbox(visual basic); checkbox t2=new checkbox(visual c+); checkbox t3=new checkbox(java); checkboxgroup cg=new checkboxgroup(); checkbox r1=new checkbox(專科專科,cg,fa

32、lse); checkbox r2=new checkbox(本科本科,cg,false); checkbox r3=new checkbox(碩士碩士,cg,false); checkbox r4=new checkbox(博士博士,cg,false); label lb1=new label(您的學(xué)歷為：您的學(xué)歷為： ); label lb2=new label(您精通的語言為：您精通的語言為： ); 新建復(fù)選新建復(fù)選框框新建一個復(fù)新建一個復(fù)選框組選框組添加添加單選按單選按鈕鈕 public qualification(string s ) super(s);setlayout(new g

33、ridlayout(10,1);add(lb1);add(r1);add(r2);add(r3); add(r4); add(lb2);add(t1);add(t2);add(t3); public static void main(string args) qualification q=new qualification (學(xué)識！學(xué)識！);q.setsize(400,250);q.show( ); 將單選按鈕添將單選按鈕添加到窗體加到窗體將復(fù)選框添加到窗體將復(fù)選框添加到窗體圖形用戶界面設(shè)計hao39選擇框選擇框 用用 choice 類可以創(chuàng)建一個選擇框類可以創(chuàng)建一個選擇框 choice m

34、oviestars = new choice( ); 通過通過 additem() 方法可以添加項目方法可以添加項目moviestars.additem(安東尼奧安東尼奧.班德拉斯班德拉斯);moviestars.additem(萊昂納多萊昂納多.迪卡普尼奧迪卡普尼奧);moviestars.additem(桑德桑德.布洛克布洛克);moviestars.additem(休休.葛蘭特葛蘭特);moviestars.additem(朱莉亞朱莉亞.羅萡茨羅萡茨); 用來向用戶顯示用來向用戶顯示一個選擇列表一個選擇列表圖形用戶界面設(shè)計hao40import java.awt.*;class choicetest extends frame label lb1=new label(您最喜歡的影星是：您最喜歡的影星是： ); choice moviestars=new choice( ); public choicetest(string s ) super(s);setlayout(new gridlayout(10,1)