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

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