【正文】 Java網(wǎng)絡(luò)程序設(shè)計(jì) (下 ) 第 7章 圖形用戶界面 Graphics User Interface 主要內(nèi)容 ? 圖形用戶界面的概念和特點(diǎn) ? Java中的 AWT和 Swing組件 ? 常用 Swing組件 ? 圖形用戶界面的設(shè)計(jì)方法和步驟 ? Java的事件處理機(jī)制 ? 窗口菜單的設(shè)計(jì) ? 基本的圖形繪制方法 教學(xué)目標(biāo) ? 掌握常用 Swing組件的功能和應(yīng)用 ? 掌握 Eclipse可視化開(kāi)發(fā)環(huán)境下圖形用戶界面的設(shè)計(jì)方法 ? 理解 Java的事件處理機(jī)制 ? 熟悉基本的圖形繪制方法 圖形用戶界面設(shè)計(jì)基礎(chǔ) 圖形用戶界面 （ Graphics User Interface，簡(jiǎn)稱 GUI）是指以圖形的方式實(shí)現(xiàn)人與計(jì)算機(jī)之間的交互。在該界面下用戶往往只需通過(guò)單擊、雙擊、拖曳鼠標(biāo)和簡(jiǎn)單的文字鍵入就可以輕松地操作計(jì)算機(jī)完成任務(wù)。圖形用戶界面生動(dòng)形象、操作直觀簡(jiǎn)便。 一、 AWT與 Swing ? Java類庫(kù)中提供 AWT（ Abstract Window Toolkit抽象窗口工具集）和 Swing兩套組件是 Java類庫(kù)中提供的兩類來(lái)實(shí)現(xiàn)圖形用戶界面； ? AWT由 ， Swing由 。其中均包含了用于設(shè)計(jì)圖形用戶界面的各種組件、布局管理器和事件類； ? Swing是 Java語(yǔ)言提供的第二代設(shè)計(jì)工具，它以 AWT為基礎(chǔ)，提供了比 AWT更多的特性和工具，用于建立更復(fù)雜的圖形用戶界面?，F(xiàn)在常采用 Swing組件來(lái)開(kāi)發(fā) GUI應(yīng)用程序。 Swing組件的體系結(jié)構(gòu) 基本組件 Component 容器 Container Swing組件的分類 從功能上分為： 容器 和 基本組件 ；容器又分為 頂層容器 和 中間層容器 。 ? 頂層容器 ： JFrame、 JDialog、 JApplet 。用于構(gòu)造圖形用戶界面的窗口，并容納其它容器和組件，它們可以獨(dú)立存在 。 ? 中間層容器 ： JPanel、 JScrollPane、 JToolBar等。容納其它組件，但是不能獨(dú)立存在，需要添加到其它容器中。通常用來(lái)按功能組織基本組件 。 ? 基本組件 ：按鈕 JButton、文本框 JTextField等等。是圖形用戶界面的基本組成單位，不能獨(dú)立存在，必須將其添加到一定的容器中。 二、容器與布局管理器 容器 用于容納組件， 布局管理器 用來(lái)設(shè)置容器中各個(gè)組件的排列方式。 頂層容器與窗口 ? 每一個(gè) Java的 GUI程序都必須至少包含一個(gè)頂層容器組件作為窗口； ? Swing中最常用的頂層容器類 — JFrame： 用它創(chuàng)建的框架窗口可以獨(dú)立存在，并且?guī)в羞吙?、?biāo)題及用于關(guān)閉和最大化 /最小化窗口的圖標(biāo)按鈕 。 創(chuàng)建一個(gè)框架窗口 import .*。 public class JFrameDemo extends JFrame { public JFrameDemo(){ super(JFrame窗口 )。 setBounds(50,50,300,120)。 setDefaultCloseOperation(EXIT_ON_CLOSE)。 setVisible(true)。 } public static void main(String[] args) { JFrameDemo f = new JFrameDemo()。 } } JFrame類常用的方法 ? void setLayout(LayoutManager manager) ? viod add(Component p) ? void setBounds(int x,int y,int width,int height) ? void setTitle(String title) ? void setVisible(Boolean b) ? setDefaultCloseOperation(EXIT_ON_CLOSE) ? Container getContentPane() 所列出的大部分方法也適用于其它容器和組件 布局管理器 布局管理器 是 中組件排列方式的類，常用的有 FlowLayout、BorderLayout和 GridLayout等幾種。每一種容器都有一個(gè)默認(rèn)的布局管理器，通過(guò) setLayout方法可以改變?nèi)萜鞯牟季址绞健? 流式布局舉例 public class FlowLayDemo extends JFrame { private JButton myButton1,myButton2,myButton3,myButton4,myButton5。 public FlowLayDemo(){ // FlowLayDemo類的構(gòu)造方法 super(流式布局 )。 setBounds(50,50,300,120)。 setLayout(new FlowLayout())。 //設(shè)置窗口為流式布局 setDefaultCloseOperation(EXIT_ON_CLOSE)。 setVisible(true)。 myButton1=new JButton(第一個(gè)按鈕 )。 //生成按鈕對(duì)象 myButton2=new JButton(第二個(gè)按鈕 )。 myButton3=new JButton(第三個(gè)按鈕 )。 myButton4=new JButton(第四個(gè)按鈕 )。 myButton5=new JButton(第五個(gè)按鈕 )。 add(myButton1)。 //添加按鈕到窗口上圖 (a) 流式布局 add(myButton2)。 add(myButton3)。 add(myButton4)。 add(myButton5)。 } public static void main(String[] args) { FlowLayDemo f=new FlowLayDemo()。 } } 邊界布局舉例 public class BorLayDemo extends JFrame { private JButton myButton1,myButton2,myButton3,myButton4,myButton5。 public BorLayDemo(){ super(邊界布局 )。 setBounds(50,50,300,120)。 setLayout(new BorderLayout())。 //設(shè)置窗口為邊界布局 setDefaultCloseOperation(EXIT_ON_CLOSE)。 setVisible(true)。 myButton1=new JButton(東邊按鈕 )。 myButton2=new JButton(南邊按鈕 )。 myButton3=new JButton(西邊按鈕 )。 myButton4=new JButton(北邊按鈕 )。 myButton5=new JButton(中間按鈕 )。 add(East,myButton1)。 //添加按鈕到窗口指定方位 add(South,myButton2)。 add(West,myButton3)。 add(North,myButton4)。 add(Center,myButton5)。 } public static void main(String[] args) { BorLayDemo f = new BorLayDemo()。 } } 網(wǎng)格布局舉例 public class GridLayDemo extends JFrame { private String names[]={按鈕 1,按鈕 2,按鈕 3,按鈕 4,按鈕 5,按鈕 6}。 public GridLayDemo(){ super(網(wǎng)格布局 )。 setBounds(50,50,300,120)。 setLayout(new GridLayout(3,3))。 //設(shè)置三行三列網(wǎng)格布局 setDefaultCloseOperation(EXIT_ON_CLOSE)。 setVisible(true)。 for (int i=0。i。i++) add(new JButton(names[i]))。 //依次添加各個(gè)按鈕 } public static void main(String[] args) { GridLayDemo f=new GridLayDemo()。 } } null — 自定義布局 ? 也稱 精確布局 ，由用戶自行設(shè)定容器中每個(gè)組件的具體位置和大??； ? 利用以下兩條語(yǔ)句實(shí)現(xiàn)自定義布局： 容器對(duì)象名 .setLayout(null)。 將容器布局設(shè)為自定義布局方式 組件對(duì)象名 .setBounds(x,y,width,height)。 指定組件在容器中的位置和大小 ? 在 Eclipse可視化編程環(huán)境下（ VE），通常將容器的布局設(shè)置為 null，以便靈活布局。 三、初識(shí)事件及事件處理 圖形用戶界面中 人機(jī)交互 的實(shí)現(xiàn)是通過(guò)組件響應(yīng)各種事件來(lái)實(shí)現(xiàn)的。 ? 事件：通俗的講是指在 GUI程序系統(tǒng)中用戶按需要激發(fā)的某一動(dòng)作。 如按鈕單擊、鼠標(biāo)移動(dòng)等 ? 事件源：事件發(fā)生的對(duì)象，如上述的按鈕、鼠標(biāo) ? 事件處理：可以簡(jiǎn)單理解為當(dāng)某個(gè)事件發(fā)生時(shí)需要執(zhí)行的動(dòng)作（語(yǔ)句序列）。 四、圖形用戶界面的設(shè)計(jì)方法和步驟 圖形用戶界面的構(gòu)成： ? 組件 ? 布局管理器 ? 事件處理 GUI窗口的生成和其中組件排列問(wèn)題 用戶與程序之間的交互性問(wèn)題 Eclipse可視化編程簡(jiǎn)介 ? 在 Eclipse中加裝可視化編程插件 VE（ Visual Editor）后就構(gòu)成了 可視化開(kāi)發(fā)環(huán)境 ，其中核心的部分是可視化類庫(kù)（ Visual Class）?？梢暬愂荅clipse VE自帶的已經(jīng)編寫(xiě)好的標(biāo)準(zhǔn)類，用戶可以直接使用，它是實(shí)現(xiàn)圖形用戶界面可視化設(shè)計(jì)的基礎(chǔ)。 ? Eclipse可視化開(kāi)發(fā)環(huán)境提供了一種直觀、高效的GUI開(kāi)發(fā)平臺(tái)，像窗口的創(chuàng)建、組件的添加等工作幾乎不用設(shè)計(jì)者編寫(xiě)任何代碼就輕松實(shí)現(xiàn)，Eclipse編輯器會(huì)根據(jù)設(shè)計(jì)者的操作自動(dòng)生成軟件框架代碼，大大降低了圖形用戶界面開(kāi)發(fā)的難度。 VE環(huán)境下實(shí)現(xiàn)圖形用戶界面的步驟 ? 創(chuàng)建窗口：新建一個(gè)繼承自頂層容器的可視化類； ? 指定窗口布局方式：一般設(shè)置為 null； ? 創(chuàng)建基本組件并添加到容器中； ? 響應(yīng)事件：為某些實(shí)現(xiàn)與用戶交互的基本組件添加事件處理代碼 五、案例 71的實(shí)現(xiàn) （演示） 第一步：創(chuàng)建窗口，生成 GUI的軟件框架代碼 ⑴ 啟動(dòng) Eclipse，新建一個(gè)名為 proj7的 Java項(xiàng)目 ⑵ 在項(xiàng)目 proj7中新建一個(gè)基于 JFrame的 可視化類 ClinicSelfInquire 1可視化界面設(shè)計(jì)區(qū) ：是容納和布局各個(gè)組件的地方 2Java Beans視圖區(qū) ：以樹(shù)形結(jié)構(gòu)顯示出當(dāng)前窗口中所有組件及其包含關(guān)系 3屬性視圖 ：用于設(shè)置構(gòu)成窗口的各個(gè)組件的屬性值 五、案例 71的實(shí)現(xiàn) （演示） 第二步：設(shè)置窗口外觀和布局方式 ⑴ 設(shè)置窗口的位置、大小、標(biāo)題 五、案例 71的實(shí)現(xiàn) （演示） 第二步：設(shè)置窗口外觀和布局方式 ⑵設(shè)置窗口布局為 null 五、案例 71的實(shí)現(xiàn) （演示） 第三步：添加組件并設(shè)置屬性 ⑴ 添加一個(gè)標(biāo)簽 JLabel和 4個(gè)命令按鈕 JButton 五、案例 71的實(shí)現(xiàn) （演示） 第三步：添加組件并設(shè)置屬性 ⑵ 設(shè)置標(biāo)簽和按鈕的相關(guān)屬性 編號(hào) 組件 類型 對(duì)象 名稱 屬 性 1 JLabel jLabel text： 歡迎訪問(wèn)兒科門(mén)診自助查詢系統(tǒng)； font：隸書(shū)， bold， 42： foreground： 2 JButton jButton1 text： 兒科醫(yī)生簡(jiǎn)介 3 JButton jButton2 text： 專家門(mén)診時(shí)間 4 JButton jButton3 text： 兒科常見(jiàn)病癥 5 JButton jButton4 text： 退