項(xiàng)目5 圖形界面設(shè)計(jì)

圖形用戶界面設(shè)計(jì)項(xiàng)目五高等院校公共課系列精品教材Java開發(fā)綜合實(shí)戰(zhàn)遵循人的認(rèn)知心理和行為方式，樹立科學(xué)、正確的審美觀。跨越學(xué)科界限實(shí)現(xiàn)多學(xué)科交叉，培養(yǎng)復(fù)合型人才。思政目標(biāo)能夠使用常用容器和組件創(chuàng)建圖形用戶界面能夠利用布局管理器對(duì)界面組件進(jìn)行合理布局技能目標(biāo)通過(guò)圖形用戶界面（GraphicUserInterface，GUI），用戶可以和程序進(jìn)行交互。Java在javax.swing包中提供了強(qiáng)大的用于開發(fā)桌面程序的API，方便用戶設(shè)計(jì)圖形用戶界面，并進(jìn)行GUI事件處理。JavaSwing是Java的一個(gè)龐大分支，主要用來(lái)開發(fā)GUI程序，本項(xiàng)目簡(jiǎn)要介紹使用其中具有代表性的幾個(gè)Swing組件制作圖形用戶界面的方法。項(xiàng)目導(dǎo)讀任務(wù)1初識(shí)JavaSwing任務(wù)2創(chuàng)建常用容器與布局任務(wù)3使用常用組件知識(shí)梳理初識(shí)JavaSwing任務(wù)1任務(wù)1初識(shí)JavaSwing任務(wù)引入通過(guò)前面幾個(gè)項(xiàng)目的學(xué)習(xí)，小白創(chuàng)建了一個(gè)控制臺(tái)版本的進(jìn)銷存管理系統(tǒng)。由于操作不直觀，小白想為進(jìn)銷存管理系統(tǒng)創(chuàng)建圖形用戶界面。在Java中，使用哪些工具包可以創(chuàng)建圖形用戶界面呢？知識(shí)準(zhǔn)備一、Swing概述Java早期進(jìn)行用戶界面設(shè)計(jì)時(shí)，主要使用Java抽象窗口工具包（AbstractWindowToolkit，簡(jiǎn)稱AWT）java.awt提供的用于設(shè)計(jì)GUI的組件類。javax.swing包（簡(jiǎn)稱Swing）是隨JDK1.2推出的一個(gè)新的包，提供了功能更為強(qiáng)大的設(shè)計(jì)GUI的類。java.awt和javax.swing包中部分類的層次關(guān)系的UVML類圖如圖所示。任務(wù)1初識(shí)JavaSwing提示：Swing組件在AWT組件名稱的基礎(chǔ)上增加了一個(gè)字母“J”作為前綴。部分類的層次關(guān)系二、容器容器是GUI設(shè)計(jì)中必不可少的一種界面元素，是用來(lái)放置其他組件的一種特殊部件。在Java中，Container的子類或間接子類創(chuàng)建的對(duì)象稱為容器。提示：容器本身也是一個(gè)組件，因此可以把一個(gè)容器添加到另一個(gè)容器中實(shí)現(xiàn)容器的嵌套。Java類庫(kù)中提供了豐富的容器類，為選擇與創(chuàng)建容器帶來(lái)了極大的便捷。下面簡(jiǎn)要介紹兩種常用容器：底層容器和面板容器。1．底層容器底層容器是指最外層的容器，即包含所有組件或容器的那層容器。2．面板容器面板是一種沒有邊框、沒有標(biāo)題欄的中間層容器。常見的面板容器有兩種：一種是普通的面板容器；另一種是帶滾動(dòng)視圖的容器。任務(wù)1初識(shí)JavaSwing三、組件在Java中，Component類的子類或間接子類創(chuàng)建的對(duì)象稱為組件。常用的Swing組件如表所示。任務(wù)1初識(shí)JavaSwing創(chuàng)建常用容器與布局任務(wù)2任務(wù)引入了解了創(chuàng)建圖形用戶界面的基本工具和概念，小白著手學(xué)習(xí)創(chuàng)建最基本的窗體、對(duì)話框和容納各種組件的面板。一個(gè)圖形用戶界面通常會(huì)包含多種組件，怎樣排列布局這些組件呢？知識(shí)準(zhǔn)備基于GUI的應(yīng)用程序應(yīng)當(dāng)提供一個(gè)能與操作系統(tǒng)直接交互的底層容器，該容器可以被直接顯示在操作系統(tǒng)所控制的平臺(tái)上，例如顯示器上。其他組件要與操作系統(tǒng)進(jìn)行信息交互，就必須被添加到底層容器中，否則用戶無(wú)法看見組件，更無(wú)法通過(guò)組件進(jìn)行交互。任務(wù)2創(chuàng)建常用容器與布局一、JFrame窗體JFrame類是Component的子類，也是Container類的間接子類。JFrame類的實(shí)例是一個(gè)底層容器，通常也稱為窗體。在開發(fā)應(yīng)用程序時(shí)，可以通過(guò)繼承JFrame類或直接使用JFrame類的實(shí)例創(chuàng)建一個(gè)窗體。在Java應(yīng)用程序中創(chuàng)建JFrame窗體的一般操作過(guò)程為：創(chuàng)建窗體→定位窗體→指定窗體關(guān)閉方式→指定窗體可見性。1．創(chuàng)建窗體窗體可以使用JFrame或其子類創(chuàng)建任務(wù)2創(chuàng)建常用容器與布局注意：窗體默認(rèn)被系統(tǒng)添加到顯示器屏幕上，因此不允許將一個(gè)窗體添加到另一個(gè)容器中。2．定位窗體定位窗體包括設(shè)置窗體大小和顯示位置。3．指定窗體擴(kuò)展和關(guān)閉方式JFrame窗體具有“最大化”“最小化”和“關(guān)閉”等按鈕。4．指定窗體可見性JFrame窗體在創(chuàng)建后默認(rèn)是不可見的，因此，必須在程序中調(diào)用setVisible()方法顯示窗體，其參數(shù)值為true或false。任務(wù)2創(chuàng)建常用容器與布局案例——?jiǎng)?chuàng)建窗體示例本案例通過(guò)繼承JFrame類，演示創(chuàng)建JFrame窗體的操作方法。（1）在Eclipse中新建一個(gè)名為SwingDemo的項(xiàng)目，然后在項(xiàng)目中添加一個(gè)名為JFWindow的類。（2）在編輯器中引入包，編寫代碼定義繼承類，然后編寫主方法創(chuàng)建窗體。（3）運(yùn)行程序，即可在屏幕指定位置彈出指定大小的對(duì)話框，如圖所示。任務(wù)2創(chuàng)建常用容器與布局創(chuàng)建的JFrame窗體二、JDialog對(duì)話框JDialog繼承了AWT組件中的java.awt.Dialog類，用于創(chuàng)建Swing對(duì)話框。在應(yīng)用程序中創(chuàng)建JDialog窗體需要實(shí)例化JDialog類，通常使用以下幾個(gè)JDialog類的構(gòu)造方法。publicJDialog()：創(chuàng)建一個(gè)沒有標(biāo)題和父窗體的對(duì)話框。publicJDialog(Framef)：創(chuàng)建一個(gè)指定父窗體的對(duì)話框，沒有標(biāo)題。publicJDialog(Framef，booleanmodel)：創(chuàng)建一個(gè)指定類型的對(duì)話框，并指定父窗體f，沒有標(biāo)題。publicJDialog(Framef,Stringtitle)：創(chuàng)建一個(gè)指定標(biāo)題和父窗體的對(duì)話框。publicJDialog(Framef,Stringtitle,booleanmodel)：創(chuàng)建一個(gè)指定標(biāo)題、父窗體和模式的對(duì)話框。任務(wù)2創(chuàng)建常用容器與布局三、JPanel面板JPanel也是一種常用的容器種類。在Java應(yīng)用程序中，使用JPanel面板容器的基本步驟如下：（1）定義一個(gè)JPanel類的子類，并實(shí)例化一個(gè)對(duì)象。JPanel類提供了如下兩種格式的構(gòu)造方法：JPanel()：創(chuàng)建一個(gè)布局管理器為FlowLayout的面板容器。JPanel(LayoutManagerlayout)：這個(gè)構(gòu)造方法將創(chuàng)造一個(gè)布局管理器為layout的面板容器。（2）使用getContentPane().add()方法將面板放置到窗體中。任務(wù)2創(chuàng)建常用容器與布局四、JScrollPane面板如果某個(gè)界面中的組件較多，或某個(gè)組件的內(nèi)容較多，由于屏幕大小的限制，有時(shí)不能在同一屏中顯示界面中的全部組件，此時(shí)，可以使用帶滾動(dòng)功能的視圖容器。JScrollPane類實(shí)現(xiàn)了一個(gè)帶有滾動(dòng)條的面板，用于為不自帶滾動(dòng)條的組件添加滾動(dòng)條。例如，通常將文本區(qū)組件JTextArea放置到滾動(dòng)面板中：JScrollPanescrollpane=newJScrollPane(newJlextArea());滾動(dòng)面板中只可以添加一個(gè)組件，然后通過(guò)滾動(dòng)條來(lái)觀看該組件。JScrollPane類提供了一些方法設(shè)置滾動(dòng)面板顯示的組件，以及滾動(dòng)條的顯示策略，如表所示。任務(wù)2創(chuàng)建常用容器與布局任務(wù)2創(chuàng)建常用容器與布局五、布局管理器在圖形用戶界面中，每個(gè)組件在容器中都有具體的位置和大小。使用布局管理器則可以使容器中的組件按照指定的策略進(jìn)行擺放，管理整個(gè)窗體的布局。不僅如此，如果改變?nèi)萜鞯拇笮。季止芾砥饕部梢詼?zhǔn)確地把組件放到指定的位置，從而有效地避免版面出現(xiàn)混亂。在Java中，容器使用setLayout()方法設(shè)置布局。Swing提供了5種布局管理器：FlowLayout（流式布局管理器）、BorderLayout（邊界布局管理器）、GridLayout（網(wǎng)格布局管理器）、CardLayout（卡片布局管理器）和GridBagLayout（網(wǎng)格包布局管理器）。任務(wù)2創(chuàng)建常用容器與布局1．流式布局管理器（FlowLayout）FlowLayout被稱為流布局管理器，它是JPanel面板容器的默認(rèn)布局管理器。FlowLayout類提供了以下3種格式的構(gòu)造方法用于創(chuàng)建布局對(duì)象。（1）FlowLayout()：（2）FlowLayout（intalign）：（3）FlowLayout（intalign，inthgap，intvgap）：2．邊界布局管理器（BorderLayout）BorderLayout類提供了以下兩種格式的構(gòu)造方法。（1）BorderLayout()：（2）BorderLayout(inthgap，intvgap)：任務(wù)2創(chuàng)建常用容器與布局

BorderLayout布局方式3．網(wǎng)格布局管理器（GridLayout）GridLayout類提供了以下3種格式的構(gòu)造方法。（1）GridLayout()：（2）GridLayout(introws,intcols)：（3）GridLayout(introws,intcols,inthgap,intvgap)：4．卡片布局管理器（CardLayout）假設(shè)有一個(gè)容器c，使用CardLayout的一般步驟如下。（1）調(diào)用CardLayout類的構(gòu)造方法創(chuàng)建CardLayout布局對(duì)象（2）調(diào)用容器的setLayout()方法設(shè)置容器布局（3）容器調(diào)用add(Strings,Componenta)方法將組件a加入容器c，并指定顯示該組件的代號(hào)s。任務(wù)2創(chuàng)建常用容器與布局（4）使用CardLayout類的方法（如表所示）顯示組件。任務(wù)2創(chuàng)建常用容器與布局5．網(wǎng)格包布局管理器（GridBagLayout）使用GridBagLayout布局管理器的步驟如下：（1）創(chuàng)建GridbagLayout布局管理器，并設(shè)置容器采用該布局管理器。（2）創(chuàng)建GridBagContraints布局約束對(duì)象，并設(shè)置該對(duì)象的相關(guān)屬性。（3）調(diào)用GridBagLayout對(duì)象的setConstraints()方法建立GridBagConstraints對(duì)象和受控組件之間的關(guān)聯(lián)。（4）向容器中添加組件：container.add(component);任務(wù)2創(chuàng)建常用容器與布局提示：如果將GridBagConstraints對(duì)象的屬性gridx和gridy的值設(shè)置為GridBagConstraints.RELATIVE，表示當(dāng)前組件緊跟在上一個(gè)組件之后。如果將gridheight和gridwidth屬性的值設(shè)置為GridBagConstraints.RELATIVE，表示當(dāng)前組件為所在行或列上倒數(shù)第二個(gè)組件；屬性值為GridBagConstraints.REMAINDER，則表示當(dāng)前組件為所在行或列上的最后一個(gè)組件。GridBagConstraints對(duì)象可以重復(fù)使用，只需要改變它的屬性即可。任務(wù)2創(chuàng)建常用容器與布局6．自定義布局自定義布局的步驟如下：（1）容器調(diào)用setLayout(null)方法取消布局管理器。（2）組件調(diào)用Component.setBounds()方法設(shè)置每個(gè)組件的大小與位置。也可以調(diào)用容器中每個(gè)組件的setSize()和setLocation()方法分別設(shè)置大小和位置。任務(wù)2創(chuàng)建常用容器與布局使用常用組件任務(wù)3任務(wù)引入通過(guò)上一個(gè)任務(wù)的學(xué)習(xí)，小白學(xué)會(huì)了創(chuàng)建常用的幾種容器，以及設(shè)置容器的布局方式。接下來(lái)就可以在容器中添加各種常用的組件了。知識(shí)準(zhǔn)備組件是應(yīng)用程序界面中的重要組成元素，豐富的組件種類構(gòu)成了強(qiáng)大的軟件開發(fā)資源。在程序開發(fā)過(guò)程中，根據(jù)不同的需求，選擇適合的組件是一件技術(shù)性很強(qiáng)的工作，它關(guān)系到應(yīng)用程序界面的美觀性、適用性、方便性和安全性。任務(wù)3使用常用組件一、標(biāo)簽組件JLabel組件用于通過(guò)顯示文本和圖標(biāo)提供提示信息，可以只顯示其中之一，也可以兩者同時(shí)顯示。JLabel類提供了多種構(gòu)造方法，用于創(chuàng)建多種形式的標(biāo)簽，常用的構(gòu)造方法如下：publicJLabel()：創(chuàng)建一個(gè)不帶圖標(biāo)和文本的標(biāo)簽。publicJLabel(Iconicon)：創(chuàng)建一個(gè)帶圖標(biāo)的標(biāo)簽。publicJLabel(lconicon,intalign)：創(chuàng)建一個(gè)帶圖標(biāo)的標(biāo)簽，圖標(biāo)的水平對(duì)齊方式為align。任務(wù)3使用常用組件其中，水平對(duì)齊方式的取值為JLabel類中與水平布置方式有關(guān)的靜態(tài)常量LEFT、CENTER、RIGHT。publicJLabel(Stringtext,intalign)：創(chuàng)建一個(gè)帶文本的標(biāo)簽，文字水平對(duì)齊方式為align。publicJLabel(Stringtext,Iconicon,intalign)：創(chuàng)建一個(gè)帶文本和圖標(biāo)的標(biāo)簽，標(biāo)簽內(nèi)容的水平對(duì)齊方式為align。JLabel類還提供了一些用于設(shè)置標(biāo)簽的方法，如表所示。任務(wù)3使用常用組件在設(shè)置標(biāo)簽文字相對(duì)于圖片的顯示位置時(shí)，參數(shù)textPostion的取值為JLabel類中與垂直布置方式有關(guān)的靜態(tài)常量TOP、CENTER、BOTTOM，說(shuō)明如表所示。任務(wù)3使用常用組件如果要將一個(gè)圖像顯示在標(biāo)簽中，可以直接使用Icon接口和Imagelcon子類。lmagelcon類實(shí)現(xiàn)了Icon接口，可以根據(jù)現(xiàn)有圖片創(chuàng)建圖標(biāo)。lmagelcon類提供了多個(gè)構(gòu)造方法創(chuàng)建ImageIcon對(duì)象，下面簡(jiǎn)要介紹幾個(gè)常用的構(gòu)造方法。publicImagelcon()：創(chuàng)建一個(gè)通用的Imagelcon對(duì)象。在后續(xù)的步驟中，需要使用該對(duì)象調(diào)用setlmage(Imageimage)方法設(shè)置圖片。publicImagelcon(Stringfilename)：直接從指定的圖片源創(chuàng)建圖標(biāo)。publicImagelcon(Stringfilename，Stringdescription)：從指定的圖片源創(chuàng)建圖標(biāo)，同時(shí)為圖標(biāo)添加簡(jiǎn)短的描述。描述不會(huì)顯示在圖標(biāo)上。publicImagelcon(URLlocation)：利用位于計(jì)算機(jī)網(wǎng)絡(luò)上的圖像文件創(chuàng)建圖標(biāo)。任務(wù)3使用常用組件案例——?jiǎng)?chuàng)建帶圖標(biāo)的標(biāo)簽本案例將指定的圖片轉(zhuǎn)換為圖標(biāo)，創(chuàng)建一個(gè)帶圖標(biāo)的標(biāo)簽。（1）打開項(xiàng)目SwingDemo，在項(xiàng)目中新建一個(gè)名為FirstImageIcon的類。（2）運(yùn)行文件，即可在指定位置顯示創(chuàng)建的窗體，并在窗體中居中顯示帶圖標(biāo)的標(biāo)簽，如圖所示。任務(wù)3使用常用組件

運(yùn)行結(jié)果二、文本組件1．文本框組件（JTextField）JTextField組件實(shí)現(xiàn)一個(gè)文本框，用于接收用戶輸入的單行文本信息。JTextField類中幾個(gè)常用的構(gòu)造方法簡(jiǎn)要說(shuō)明如下：publicJTextField()：publicJTextField(Stringtext)：publicJTextField(intfieldwidth)：publicJTextField(Stringtext,intfieldwidth)：任務(wù)3使用常用組件2．密碼框組件（JPasswordField）JPasswordField組件實(shí)現(xiàn)一個(gè)密碼框，用來(lái)接收用戶輸入的單行文本信息，創(chuàng)建、使用方法與JTextField組件基本相同。3．文本域組件（JTextArea）JTextArea組件實(shí)現(xiàn)一個(gè)文本域，文本域可以接收用戶輸入的多行文本。JTextArea類中幾個(gè)常用的構(gòu)造方法簡(jiǎn)要說(shuō)明如下：publicJTextArea()：publicJTextArea(Stringtext)：publicJTextArea(introws,intcolumns)：publicJTextArea(Documentdoc)：publicJTextArea(Documentdoc,StringText,introws,intcolumns)：任務(wù)3使用常用組件三、按鈕組件按鈕在圖形界面中是較為常見的組件，用于觸發(fā)特定動(dòng)作。Swing提供多種按鈕，例如JButton、JRadioButton、JCheckBox等。本節(jié)簡(jiǎn)要介紹這三種按鈕的功能和使用方法。1.普通按鈕組件（JButton）JButton類的主要構(gòu)造方法有以下幾種：publicJButton()：創(chuàng)建一個(gè)Button對(duì)象。publicJButton(Stringtext)：創(chuàng)建一個(gè)顯示標(biāo)簽文字的Button對(duì)象。publicJButton(Iconicon)：創(chuàng)建一個(gè)帶圖標(biāo)的按鈕。publicJButton(Stringtext,Iconicon)：創(chuàng)建一個(gè)帶標(biāo)簽文字和圖標(biāo)的按鈕。任務(wù)3使用常用組件案例——?jiǎng)?chuàng)建動(dòng)態(tài)圖片按鈕本案例制作一個(gè)不同狀態(tài)下顯示不同圖片的動(dòng)態(tài)按鈕。（1）打開項(xiàng)目SwingDemo，在項(xiàng)目中新建一個(gè)名為ImageButton的類。（2）運(yùn)行程序，即可在指定位置創(chuàng)建一個(gè)窗體，并默認(rèn)在窗體中間區(qū)域顯示按鈕，如圖示。任務(wù)3使用常用組件2．單選按鈕組件（JRadioButton）JRadioButton組件實(shí)現(xiàn)一個(gè)單選按鈕，可以單獨(dú)使用，也可以與ButtonGroup類聯(lián)合使用。JRadioButon類的常用構(gòu)造方法主要有以下幾種形式。publicJRadioButton()：publicJRadioButton(Iconicon)：publicJRadioButton(Iconicon,booleanselected)：publicJRadioButton(Stringtext)：publicJRadioButton(Stringtext,Iconicon)：publicJRadioButton(Stringtext,Iconicon,booleanselected)：任務(wù)3使用常用組件3．復(fù)選框組件（JCheckBox）JCheckBox類的對(duì)象實(shí)現(xiàn)一個(gè)復(fù)選框按鈕。與單選按鈕類似，復(fù)選框也用于提供多項(xiàng)選擇，單擊該組件可在選中和未選中兩種狀態(tài)之間進(jìn)行切換。JCheckBox的常用構(gòu)造方法有以下幾種：publicJCheckBox()：publicJCheckBox(Iconicon,booleanchecked)：publicJCheckBox(Stringtext,booleanchecked)：任務(wù)3使用常用組件四、列表組件Swing提供了兩種列表組件：下拉列表框（JComboBox）與列表框（JList）。這兩種列表組件都以列表的形式提供一系列的預(yù)設(shè)選擇項(xiàng)，對(duì)于美化版面和空間有限的界面來(lái)說(shuō)，是非常不錯(cuò)的選擇。1．下拉列表框組件（JComboBox）JComboBox類的常用構(gòu)造方法有以下幾種：publicJComboBox()：publicJComboBox(ComboBoxModeldataModel)：ComboBoxModel是一個(gè)代表一般模型的接口，可以自定義一個(gè)類實(shí)現(xiàn)該接口，且必須實(shí)現(xiàn)以下兩種方法：publicvoidsetSelectedltem(Objectitem)：publicObjectgetSelectedltem()：任務(wù)3使用常用組件在實(shí)現(xiàn)ComboBoxModel接口時(shí)，還可以繼承AbstractListModel類，以便使用其中兩個(gè)操作下拉列表框的重要方法：getsize()方法返回列表的長(zhǎng)度；getElementAt(intindex)方法返回指定索引處的值。publicJComboBox(Object[]arrayData)：publicJComboBox(Vectorvector)：構(gòu)造JComboBox對(duì)象后，利用下面幾個(gè)常用的方法可以方便地操作下拉列表框：addItem(Objectobj)：添加列表項(xiàng)。getItemCount()：返回列表項(xiàng)的個(gè)數(shù)。removeItem(Objectobj)：移除列表項(xiàng)。setEditable(Booleanflag)：設(shè)置列表項(xiàng)是否可編輯。任務(wù)3使用常用組件2．列表框組件（JList）JList類的常用構(gòu)造方法有以下幾種：publicvoidJList()：publicvoidJList(Object[]listData)：publicvoidJList(Vect