Java圖形界面設(shè)計.ppt

第12章 圖形界面設(shè)計,2,本章主要內(nèi)容,12.1 圖形用戶界面設(shè)計 12.2 圖形用戶界面工具包Swing 12.3 創(chuàng)建組件 12.4 布局管理器,3,12.1 圖形用戶界面設(shè)計,圖形用戶界面(Graphics User Interface，GUI） 用圖形的方式，借助菜單。按鈕等標準界面元素和鼠標操作，幫助用戶方便地向計算機系統(tǒng)發(fā)出指令、啟動操作，并將系統(tǒng)運行的結(jié)果同樣以圖形方式顯示給用戶的技術(shù)。 Java的GUI程序設(shè)計是Java程序設(shè)計的基礎(chǔ)。,4,12.1 圖形用戶界面設(shè)計,Java提供的兩個處理圖形用戶界面的類庫： Java. awt包和javax. swing包,Sun已經(jīng)提供了一個跨平臺 GUI開發(fā)工具包java.awt（抽 象窗口工具箱）,Sun又開發(fā)了一個新的 GUI開發(fā)工具包javax.swing 解決了awt中存在的本地化 問題,5,12.1 圖形用戶界面設(shè)計,AWT 和 Swing 是 Java 設(shè)計 GUI 用戶界面的基礎(chǔ). 與AWT 的重量級組件不同, Swing 中大部分是輕量級組件。 正是這個原因, Swing 幾乎無所不能, 不但有各式各樣先進的組件, 而且更為美觀易用.所以一開始使用 AWT 的程序員很快就轉(zhuǎn)向使用 Swing 了。 但是因為 Swing 是架構(gòu)在 AWT 之上的, 沒有 AWT 就沒有 Swing。所以程序員可以根據(jù)自己的習慣選擇使用 AWT 或者是 Swing。 但是,最好不要二者 混用除開顯示風格不同不說,還很可能造成層次 (Z-Order) 錯亂,6,12.2圖形用戶界面工具包Swing,Java圖形用戶界面的基本元素包括： 用戶界面組件（組件類） 事件處理模塊（事件類） 圖形和圖像工具（圖形類、圖像類） 布局管理器（布局類） 它們主要都在javax.swing包中，Swing是Java包的一部分。,7,8,12.2.1 Swing組件分類,組件：構(gòu)成圖形用戶界面的各種元素。 構(gòu)建圖形用戶界面的類可以分成三組： 容器類(container class) 輔助類(helper class) 組件類(component class)。,9,12.2.1 Swing組件分類,容器類 容器類組件中可以包含其他組件，也可以包含其他容器。 容器又分為兩種：頂層容器和非頂層容器。 頂層容器是可以獨立的窗口，Swing的頂層容器有JFrame、JApplet和JDialog等。 非頂層容器，不是獨立的窗口，它們必須位于窗口之內(nèi)，非頂層容器包括JPanel及JScrollPanel等。,10,12.2.1 Swing組件分類,輔助類和組件類都屬于非容器類組件不能包含其他組件的組件，其種類較多。 輔助類 輔助類是用來描述組件屬性的，輔助類通常包含在java.awt包中，Swing組件不能取代AWT的全部類，只能替代AWT的GUI組件類，AWT輔助類保持不變。 組件類 所有Swing GUI組件類（除JFrame、JApplet和JDialog）都是JComponent類的子類，例如，JButton、JTextField、JTextArea、JComboBox、JList、JRadioButton和JMenu等。 Swing輕型組件分類參見教材P202 表12.1,11,12.2.1 Swing組件分類,一般獨立應(yīng)用程序主要是要框架JFrame作為容器，在JFrame上通過放置JPanel面板來控制圖形界面的布局； 如果應(yīng)用到瀏覽器中，則主要使用JApplet來做容器。JApplet是一個能夠嵌入到瀏覽器中運行的特殊容器。,12,12.2.1 Swing組件分類,1. Swing容器的層次關(guān)系 一般的Swing窗口，實際上包含幾個“層次”。,13,12.2.1 Swing組件分類,1. Swing容器的層次關(guān)系 一般的Swing窗口，實際上包含幾個“層次”，各個層的關(guān)系如教材P202 圖12.2所示。 頂層容器。是一個窗口容器對象，該對象包含了Swing窗口的各個層次，在該對象里面可以加入其它窗口對象。 根窗格。是在創(chuàng)建頂層容器后自動創(chuàng)建的，供Swing頂層容器在后臺使用，是頂層容器中做包含的最內(nèi)層，通常無法在這一層上做任何操作與處理。 分層窗格。加入分層窗格中的組件可以設(shè)置其圖層層次，且不會被內(nèi)容窗格中的對象屏蔽。是其它窗格的父級。,14,12.2.1 Swing組件分類,菜單欄。菜單欄被添加到分層窗格的頂部。是可選的。 內(nèi)容窗格。是分層窗格中的某一層，是一個JPanel對象，在窗體中起著工作區(qū)的作用?？梢苑胖么蟛糠值目梢娊M件。 玻璃窗格。主要用來產(chǎn)生繪圖效果，以及用來觸發(fā)窗口程序的各種事件。玻璃窗格浮在最上面，默認情況下是隱藏的。,15,12.2.1 Swing組件分類,16,12.2.1 Swing組件分類,2. 框架類JFrame 是Java應(yīng)用程序的頂層容器。 JFrame是java.awt.Frame的擴展版本，是一個window子類，在使用Swing類庫實現(xiàn)用戶圖形接口，必須繼承該類。 JFrame容器包括窗口標題、窗口外觀、窗口邊界、調(diào)整窗口大小的圖標、關(guān)閉和最小化窗口的圖標。并且可以直接在容器上添加組件，如按鈕、文本等。,17,12.2.1 Swing組件分類,構(gòu)造方法： public JFrame() throws HeadlessException。 創(chuàng)建了一個新的容器窗口，默認該窗口是不可見的。 public JFrame(String title) throws HeadlessException 創(chuàng)建一個新的容器窗口，通過方法的參數(shù)設(shè)置窗口標題，該窗口默認是不可見的。,18,12.2.1 Swing組件分類,該類的常用方法（P203-204） getContentPane() 該方法返回一個框架對象，使用該框架對象來添加組件，如增加按鈕、菜單、工具欄、列表框等組件。 setSize(int width ,int hight) 設(shè)置窗口尺寸、窗口大小以像素為單位計算。 getJMenuBar() 返回此窗體上設(shè)置的菜單欄。 setJMenuBar(JMenuBar menubar) 設(shè)置此窗體的菜單欄。 setIconImage(Image image) 設(shè)置要作為此窗口圖標顯示的圖像。,19,例App12_1,輔助類,組件類,20,例App12_1,為什么在該實例中被沒有顯示背景色？ JFrame默認采用了FlowLayout布局管理器，你的組件在該布局管理器中被塞滿整個frame，擋住了背景。就是說，實際上JFrame還是有背景的一般用JFrame的時候要初始化一個JPanel，把組件放在JPanel里，然后把JPanel放到JFrame里，這樣可以較好的控制組建位置等其他的東西。在這種方式下直接給JPanel設(shè)置setBackground就可以一直看到背景了,命令提示符環(huán)境,21,例App12_1_1,22,例App12_1_1,例App12_1_2,23,12.2.1 Swing組件分類,3. 面板類JPanel 面板是一種沒有標題欄、沒有邊框的中間層容器，在該容器上可以放置其他組件如單選按鈕、列表框等。還可以包含其他容器，如一個新的JPanel對象，從而方便地實現(xiàn)容器的嵌套。 在面板創(chuàng)建后是無法單獨顯示的。面板不是頂層容器，必須放到其他容器內(nèi)，也可以放入另一個面板內(nèi)。必須放在JFrame或Applet這樣的頂層窗口中才可以顯示。 一個界面只可以有一個JFrame窗體組件，但可以有多個JPanel面板組件,24,12.2.1 Swing組件分類,3. 面板類JPanel 該類的構(gòu)造函數(shù)： JPanel()：創(chuàng)建一個面板，并且該面板組件的布局管理器為FlowLayout()。 JPanel(LayoutManager layout)：創(chuàng)建一個面板，且該面板設(shè)置了指定的布局管理器。布局管理器管理在容器上放置的組件，具體的內(nèi)容會在12.4節(jié)詳細介紹。,25,12.2.1 Swing組件分類,3. 面板類JPanel 常用方法：,JPanel默認的布局管理器是FlowLayout，可以使用setLayout()方法改變其默認布局。 也可以采用包含它的容器不同的布局管理器。,26,例App12_2,在框架中加入面板,27,例App12_2,在框架中加入面板,28,例App12_2,在框架中加入面板,29,12.2.1 Swing組件分類,4. 組件類 又稱控制組件（控件），它里面不能包含其他組件。 作用：完成與用戶的交互，包括接收用戶的命令、接收用戶輸入的文本或用戶的選擇、向用戶顯示文本或圖形。 常用控件：命令類、選擇類、文字處理類等。,30,12.2.1 Swing組件分類,5.圖形界面設(shè)計的步驟 創(chuàng)建組件(Component)：創(chuàng)建組成界面的各種元素，如按鈕、文本框等。 指定布局(Layout)：根據(jù)具體需要排列界面上各元素的位置關(guān)系。 響應(yīng)事件(Event)：定義圖形用戶界面的事件和各界面元素對不同事件的響應(yīng)，從而實現(xiàn)圖形用戶界面與用戶的交互功能。,31,12.2.2 顏色類、字體類、圖像圖標類,1.顏色類Color 屬于java.awt 每種顏色均看作是由紅(R)、綠(G)、藍(B)三色組成。 構(gòu)造方法： Color (int r, int g, int b) 顏色常量值 Color.black , Color.blue , Color.gray , Color. red Color.white 例如 Color c = new Color(int rgb),參數(shù)取值0255，越大則表明這種顏色的成分越重。,32,12.2.2 顏色類、字體類、圖像圖標類,2.字體類Font 用來規(guī)范組件所用的字體樣式、大小與字形等。 構(gòu)造方法： Font (String font_name, int style, int size),字體名稱,字形樣式：PLAIN、BOLD、ITALIC,字號大小,33,Font類的成員方法 public string getName()：獲得字體的名稱 public int getStyle()：獲得字體的樣式 public int getSize()：獲得字體的大小 public boolean isPlain()：若字體是正常型，則返回true public boolean isBold()：若字體是粗體，則返回true public boolean isItalic() ：若字體是斜體，則返回true,12.2.2 顏色類、字體類、圖像圖標類,34,12.2.2 顏色類、字體類、圖像圖標類,3.圖標圖像類ImageIcon Java語言使用javax.swing.ImageIcon類表示圖標。表12.12給出了ImageIcon類的常用構(gòu)造方法，表12.13給出了ImageIcon類的常用方法。,35,Java中Image類與ImageIcon類的區(qū)別,Image類一般尺寸過大，不適合作ImageIcon類。 ImageIcon imageIcon = new ImageIcon(“duke.gif”); / Icon由圖片文件形成 Image image = imageIcon.getImage(); / 但這個圖片太大不適合做Icon / 為把它縮小點，先要取出這個Icon的image ,然后縮放到合適的大小 Image smallImage = image.getScaledInstance(30,20,Image.SCALE_FAST); / 再由修改后的Image來生成合適的Icon ImageIcon smallIcon = new ImageIcon(smallImage); / 最后設(shè)置它為按鈕的圖片 JButton iconButton = new JButton(smallIcon);,36,Java中Image類與ImageIcon類的區(qū)別,而由ImageIcon類到Image類，可以通過： ImageIcon imageIcon = new ImageIcon(“duke.gif”); / Icon由圖片文件形成 JFrame jf=null; jf.setImageIcon(ImageIcon.getImage();,37,12.3 創(chuàng)建組件,12.3.1 標簽 12.3.2 命令按鈕、復(fù)選框、單選按鈕 12.3.3 文本編輯組件、滾動窗格 12.3.4 選項窗格,38,12.3.1 標簽JLabel,標簽用來在窗口中顯示文字的控件 在整個應(yīng)用程序中，不僅把 JLabel 用作文本描述，還將它用作圖片描述。每當在 Swing 應(yīng)用程序中看到圖片的時候，它就有可能是 JLabel。JLabel 對于 Swing 初學者來說沒有許多意料之外的方法。,39,12.3.1 標簽JLabel,基本的方法 get/setText(): 獲取/設(shè)置標簽的文本。 get/seticon(): 獲取/設(shè)置標簽的圖片。 get/setHorizontalAlignment(): 獲取/設(shè)置文本的水平位置。 get/setVerticalAlignment(): 獲取/設(shè)置文本的垂直位置。 get/setDisplayedMnemonic(): 獲取/設(shè)置標簽的訪問鍵（下劃線文字）。 get/setLableFor(): 獲取/設(shè)置這個標簽附著的組件，所以當用戶按下 Alt+訪問鍵時，焦點轉(zhuǎn)移到指定的組件。,40,例App12_3,41,例App12_3,42,例App12_3,43,例App12_4,在框架窗口中加入指定大小的標簽，并設(shè)置當鼠標懸停在標簽上時給出相應(yīng)的提示信息。 Swing中的幾乎所有組件都是繼承自JComponent，它提供了一個setToolTipText(String str)方法，來創(chuàng)建工具提示。,44,例App12_4,45,例App12_4,46,12.3.2 命令按鈕、復(fù)選框、單選按鈕,1. 命令按鈕Jbutton 用戶用鼠標單擊它來控制程序運行的流程。 JButton創(chuàng)建后通過容器的add()將其放入容器。 構(gòu)造方法及常用方法見教材P212，213 表12.16、12.17,47,例App12_5,48,例App12_5,49,12.3.2 命令按鈕、復(fù)選框、單選按鈕,2.復(fù)選框JCheckBox、單選按鈕Jbutton JCheckBox可以單獨使用，而單選按鈕必須配合javax.swing包中的ButtonGroup類將其組成單選按鈕組來使用。 如果有多個復(fù)選框，那么也需要ButtonGroup類將其組成復(fù)選框按鈕組來使用。 重要的 ButtonGroup 方法是： add()：添加 JCheckBox 或 JRadioButton 到 ButtonGroup。 getElements()：獲得 ButtonGroup 中的全部組件，允許對它們進行迭代，找到其中選中的那個。,50,例App12_6,51,例App12_6,注意：ButtonGroup不是java.awt.Component的子類，所以不能添加到容器中,52,例App12_6,53,例App12_6,54,12.3.3 文本編輯組件與滾動窗格,1.文本行組件JTextField 文本行組件JTextField主要用于接收用戶鍵盤輸入的文本。 設(shè)置文本的方法： get/setText()，用于獲取/設(shè)置 JTextField 中的文本,55,12.3.3 文本編輯組件與滾動窗格,2. 密碼文本行組件JPasswordField PasswordField主要用于輸入密碼 getEchoChar()：獲取每次字符輸入時在 JPasswordField 中顯示的字符。默認值為“*”。 setEchoChar()：設(shè)置每次字符輸入時在 JPasswordField 中顯示的字符。 getPassword()：這是從 JPasswordField 中獲得口令的恰當方法，因為它返回一個包含口令的 char。為了保證恰當?shù)陌踩?，?shù)組應(yīng)當被清為 0，以確保它不會保留在內(nèi)存中。,56,12.3.3 文本編輯組件與滾動窗格,3.文本區(qū)組件JTextArea is/setLineWrap()：設(shè)置在行過長的時候是否要自動換行。 is/setWrapStyleWord()：設(shè)置在單詞過長的時候是否要把長單詞移到下一行。 文本區(qū)組件JTextArea 通常與滾動窗格組件JScrollPane一起使用。 4. 滾動窗格組件JScrollPane 用 JTextArea 調(diào)用 JScrollPane 的構(gòu)造函數(shù)，這為 JTextArea 創(chuàng)建了在文本過長時滾動的能力： JScrollPane scroll = new JScrollPane( getTextArea() ); add(scroll);,57,例App12_7,58,例App12_7,59,例App12_7,60,12.3.4 選項窗格JTabbedPane,JTabbedPane組件中允許包含多個選項卡。 用戶選取項目的一種組件，用戶利用該組件來表JTabbedPane類的構(gòu)造方法及常用方法見教材中表12.25、12.26 例如： JTabbedPane tab = new JTabbedPane(); tab.add(“Java”,new JLabel(“Java”); JTabbedPane類有多個addTab()方法，這里采用了其中一種，第一個參數(shù)是頁簽的標題，第二個參數(shù)是頁簽上放置的組件，如JLabel，當然可以是任意的組件。,61,例App12_8,62,例App12_8,63,例App12_8,64,12.4 布局管理器,布局管理即頁面管理。頁面管理（layout）：指窗口上的組件遵循一定的規(guī)則來排列，并會隨著窗口大小的變化來改變組件大小與位置的一種布局方式。 自動布局：當為一個容器指定一個布局管理器后，將一個組件加入該容器中時，布局管理器就能自動設(shè)置該組件的大小和位置。,65,12.4 布局管理器,java.awt包中共定義了五種布局管理器，每個布局管理器對應(yīng)一種布局策略，分別是： 流式布局管理器FlowLayout 邊界式布局管理器BorderLayout 卡片式布局管理器CardLayout 網(wǎng)格式布局管理器GridLayout 網(wǎng)格包布局管理器GridBagLayout。,66,12.4 布局管理器,java.Swing包提供的布局管理器有： 盒式布局管理器BoxLayout 重疊布局管理器OverlayLayout 彈簧布局管理器SpringLayout,67,12.4.1 流式布局管理器FlowLayout,布局策略 組件按照加入容器的先后順序從左向右排列； 一行排滿后就自動地轉(zhuǎn)到下一行繼續(xù)從左向右排列； 每一行中的組件都居中排列。 默認居中對齊，可以通過FlowLayout（int align）方法指定對齊方式,68,12.4.1 流式布局管理器FlowLayout,FlowLayout布局管理器是Panel、Applet和JPanel默認的布局管理方式。 布局管理器的容器中的組件大小不隨容器大小的變化而改變. 當容器中的組件不多時，使用這種布局策略非常方便。 是JPanel默認的布局管理方式。 構(gòu)造方法及常用方法見教材表12.2712.29 見教材例12.9,69,例App12_9,70,例App12_9,71,12.4.2 邊界式布局管理器BorderLayout,將顯示區(qū)域按地理方位分為東(East)、西(West)、 南(South)、北(North)、中(Center)五個區(qū)域。 將組件加入容器中，若沒有指定區(qū)域，則默認為中間；若將組件加入到已被占用的位置，將會取 代原先的組件。,72,12.4.2 邊界式布局管理器BorderLayout,利用add()添加組件時必須指出組件的擺放位置。 是JFrame、JApplet、JDialog默認的布局管理方式。 在BorderLayout類的定義中這5個區(qū)域用5個常量值表示：EAST、WEST、SOUTH、NORTH和CENTER。假設(shè)容器為cp組件為jb。則將組件添加到容器上的方式為： BorderLayout bl = new BorderLayout(); Cp.add(jb,BorderLayout.CENTER); 不是五個部分都必須添加 中間組件會自動調(diào)節(jié)大小,73,例App12_10,74,例App12_9,75,12.4.3 網(wǎng)格式布局管理器GridLayout,提供的頁面布局規(guī)則是將容器的空間劃分成若干行與列的網(wǎng)格形式，在容器上添加組件時，它們會按從左到右、從上到下的順序在網(wǎng)格中均勻排列。 網(wǎng)格的行數(shù)和列數(shù)可以在創(chuàng)建GridLayout對象的構(gòu)造方法里指定。若控件數(shù)正好是行列，則按行、列數(shù)放置；若控件數(shù)超過了行列，則先滿足行。 利用GridLayout布局策略時，容器 中各組件的寬度相同，所有組件的 高度也相同，當容器尺寸發(fā)生變化時， 各組件的相對位置不變。 構(gòu)造方法及常用方法見 教材表12.33、12.34,76,例App12_11,77,例App12_11,78,例App12_11,79,例App12_11