JAVA教程第3章(程序界面設(shè)計(jì)).ppt

第3章程序界面設(shè)計(jì) 本章提要 用戶界面類型 常用界面元素的使用 常用圖形元素的使用 用戶界面是系統(tǒng)提供給外界的用戶接口 通過這一接口 我們可以對系統(tǒng)進(jìn)行操作 指揮系統(tǒng)按照某種流程運(yùn)行 在諸如銀行業(yè)務(wù) 飛機(jī)售票等這些業(yè)務(wù)中 每天都會有大量的事務(wù)處理 我們必須為辦事人員提供操作方便 美觀大方的操作界面 例如 銀行辦事人員的帳號操作界面 應(yīng)將各種輸入框合理布局在界面中 為飛機(jī)票售票員提供的查詢航班的界面 應(yīng)以列表的形式顯示航班次數(shù) 等等 良好的用戶界面將使得軟件更加人性化 如應(yīng)易于展現(xiàn)功能 且對于用戶而言是必要的 引子 軟件的用戶界面重要嗎 本章知識要點(diǎn) 用戶界面的類型Java中提供的GUI組件類SWING高級組件圖形繪制聲音文件處理 任務(wù)1設(shè)計(jì)產(chǎn)品信息處理界面 問題分析知識學(xué)習(xí)用戶界面的類型Java中提供的GUI組件類任務(wù)實(shí)施 執(zhí)行效果 問題分析 任務(wù)描述 編寫一個(gè)程序 能夠?qū)崿F(xiàn)產(chǎn)品信息處理界面步驟分析 了解Java程序用戶界面類型構(gòu)建圖形用戶界面的方法常用組件設(shè)計(jì)產(chǎn)品信息處理界面 分析需要什么組件 及大小 形狀編寫代碼編譯執(zhí)行 知識學(xué)習(xí) 用戶界面類型 用戶界面分為兩類 字符用戶界面 CUI 圖形用戶界面 GUI 知識學(xué)習(xí) AWT和SWING AWT和SWING是Java設(shè)計(jì)GUI用戶界面的基礎(chǔ) AWT為重量級組件 Swing則大部分是輕量級組件 AWT是Swing的基礎(chǔ) 而基于圖形化用戶界面發(fā)展需要 采用純Java實(shí)現(xiàn)了輕量級先進(jìn)的組件 更為美觀易用 且無本地代碼 從而不依賴本地操作系統(tǒng) AWT會因操作系統(tǒng)不同 出現(xiàn)不同顯示效果 但有一些類是Swing無法代替的 實(shí)現(xiàn)用戶界面時(shí) 可選擇Swing繪制界面上的元素 而將AWT用于界面布局 圖形繪制 字體設(shè)置 事件處理等 進(jìn)行界面元素的繪制時(shí) 不要混用AWT Swing 知識學(xué)習(xí) AWT和SWING AWT 在Java1 0版本中 圖形元素包括在java awt包中 Java的AWT包定義了窗口系統(tǒng)所顯示的各種對象 既包括組織窗口屏幕元素所需的基本類 也包括圖形處理 顯示所需的基本類 java awt java awt Event Color Font Image FlowLayout CardLayout BorderLayout GridBagLayout Graphics Component 知識學(xué)習(xí) AWT和SWING AWT 知識學(xué)習(xí) AWT和SWING SWING是原先AWT的擴(kuò)充 它加入了廣泛的 可完全移植的 類和庫的集合 JFC作為Java平臺的一部分 它有豐富的組件集合 這些都是完全平臺獨(dú)立的 Javax swing 知識學(xué)習(xí) AWT和SWING 知識學(xué)習(xí) 圖形用戶界面組成 容器框架JFrame 面板JPanel 容器面板JPanel 組件文本框JText 姓名 組件標(biāo)簽JLabel 提交 組件按鈕JButtonl 男 女 組件單選JRadioButton 用戶界面組成 藍(lán)球 組件復(fù)選JCheckBox JFrame類 框架 JFrame 是帶標(biāo)題的頂層窗口從類的層次上來看 它是Frame類的擴(kuò)展 屬于Container類 JFrame類的構(gòu)造方法有兩種 JFramemyFrame newJFrame 不帶標(biāo)題的窗體JFramemyFrame newJFrame MyFrame 帶標(biāo)題的窗體 知識學(xué)習(xí) SWING 例子 創(chuàng)建窗體對象frameframe newJFrame HelloJava 創(chuàng)建一文本標(biāo)簽label newJLabel HelloJava 初始化容器frameContainerc frame getContentPane 將文本標(biāo)簽添加到窗體 容器 上c add label 設(shè)置窗口的大小frame setSize 300 300 設(shè)置窗口的可見性frame setVisible true 案例JFrameDemo java JPanel類 JPanel類是一個(gè)大家會經(jīng)常使用的容器類 被稱為面板 一般情況下 我們把所有的組件加入到面板 然后將面板加入到框架 例子 JFrameframe newJFrame JPanalDemo JButtonb1 newJButton Button1 創(chuàng)建panel對象JPanelpanel newJPanel 將按鈕添加到面板panel add b1 將面板添加到框架窗口frame getContentPane add panel frame setSize 300 300 frame setVisible true 案例JPanelDemo java 知識學(xué)習(xí) SWING 有了面板 就可以將很多不同的窗體頁面做成不同的panel 那么在這種情況下 可以隨時(shí)加載不同的panel達(dá)到頁面轉(zhuǎn)換的效果 例子 從框架中移除panel1 加載panel2frame remove panel1 frame getContentPane add panel2 frame setVisible true frame setSize 300 300 知識學(xué)習(xí) SWING 標(biāo)簽 標(biāo)簽是用來在用戶界面中顯示靜態(tài)的文本 用JLabel類來創(chuàng)建一個(gè)標(biāo)簽控件 JLabellabel newJLabel label 文本字段 用JTextField類來創(chuàng)建一個(gè)輸入框控件 getText 方法來得到文本輸入框中的內(nèi)容setText 來設(shè)置文本輸入框中的內(nèi)容 知識學(xué)習(xí) SWING 案例JComponentDemo java 列表框和組合框JList 列表框 和JComboBox 組合框 類都屬于多值控件 它允許用戶在其所給的列表中進(jìn)行選擇 列表框語法 String city 北京 上海 廣州 西安 JListlistCity newJList city 組合框語法 String city 北京 上海 廣州 西安 JComboBoxcomboObj newJComboBox city 知識學(xué)習(xí) SWING 案例JComponentDemo java 知識學(xué)習(xí) SWING 列表框常用方法 組合框常用方法 知識學(xué)習(xí) SWING 復(fù)選和單選按鈕 復(fù)選按鈕是通過JCheckBox來實(shí)現(xiàn) 單選按鈕通過JRadioButton來實(shí)現(xiàn) JCheckBox語法 JCheckBoxmusic music newJCheckBox 音樂 JRadioButton語法 JRadioButtongrade high grade newJRadioButton 小學(xué) high newJRadioButton 中學(xué) 知識學(xué)習(xí) SWING 案例JComponentDemo java 按鈕組語法 ButtonGroupbuttonGroup buttonGroup newButtonGroup buttonGroup add grade buttonGroup add high 知識學(xué)習(xí) SWING 消息對話框 JOptionPane類能夠定制出好幾種不同的消息對話框 普通的消息對話框出錯(cuò)對話框警告對話框詢問對話框等等 知識學(xué)習(xí) SWING JOptionPane showMessageDialog null alert alert JOptionPane ERROR MESSAGE 參數(shù)1 指定該對話框的父容器對象 如果沒有可以指定為null 通?？梢灾付橐延械膄rame對象 參數(shù)2 指定了對話框中顯示的信息 參數(shù)3 指定了對話框任務(wù)欄的標(biāo)題 參數(shù)4 指定了對話框顯示的樣式 知識學(xué)習(xí) SWING JOptionPane showConfirmDialog null chooseone chooseone JOptionPane YES NO OPTION 參數(shù)1 指定該對話框的父容器對象 如果沒有可以指定為null 通?？梢灾付橐延械膄rame對象 參數(shù)2 指定了對話框中顯示的信息 參數(shù)3 指定了對話框任務(wù)欄的標(biāo)題 參數(shù)4 指定顯示在對話框上面的按鈕集 知識學(xué)習(xí) SWING JOptionPane showInputDialog Pleaseinputavalue 函數(shù)中參數(shù)是用來在輸入對話框中顯示的提示內(nèi)容 知識學(xué)習(xí) SWING 案例JComponentDemo java 設(shè)計(jì)產(chǎn)品信息處理界面根據(jù)要添入什么數(shù)據(jù) 什么樣的圖形元素用戶會操作更簡單的兩個(gè)原則進(jìn)行思考 從產(chǎn)品的具體資料中可以得知 每一個(gè)信息都是要求用戶進(jìn)行輸入的 所以對于這種情況 只需要將相應(yīng)的信息對應(yīng)一個(gè)文本輸入框 對于每一個(gè)文本框前應(yīng)該有相應(yīng)提示 提示用戶輸入什么數(shù)據(jù) 所以要為每一個(gè)信息對應(yīng)加入一個(gè)標(biāo)簽 然后再加入一個(gè)確定和一個(gè)取消按鈕 實(shí)現(xiàn)步驟確定圖形元素作為類屬性確定圖形元素的大小確定框架窗口的標(biāo)題 任務(wù)實(shí)施 確定圖形元素作為類屬性 確定圖形元素的大小 確定框架窗口的標(biāo)題和大小框架窗口的標(biāo)題為 產(chǎn)品資料錄入 窗口大小為500 500像素編寫代碼編譯執(zhí)行 模仿例子 設(shè)計(jì)供應(yīng)商錄入界面 要求性別字段采用選擇方式錄入 所在區(qū)域的范圍為廣東 北京 上海 湖南 廣西 湖北 江西 該怎么設(shè)計(jì)我們的用戶界面 動(dòng)手練習(xí) 40分鐘 拓展1 SWING高級組件 用菜單組件顯示下拉式菜單項(xiàng)用表格組件顯示數(shù)據(jù)記錄用樹組件顯示分級列表用文件選擇器選擇文件 拓展1 SWING高級組件 菜單組件類 拓展1 SWING高級組件 JMenu JMenuBar JMenuItem JToolBar JPopupMenu 菜單組件 案例JMenuDemo javaJPopupMenu java 拓展1 SWING高級組件 用菜單組件顯示下拉式菜單項(xiàng)用表格組件顯示數(shù)據(jù)記錄用樹組件顯示分級列表用文件選擇器選擇文件 拓展1 SWING高級組件 表格組件JTable 顯示多行 列數(shù)據(jù)的表格 列名 數(shù)據(jù)記錄 案例JTableDemo java 拓展1 SWING高級組件 用菜單組件顯示下拉式菜單項(xiàng)用表格組件顯示數(shù)據(jù)記錄用樹組件顯示分級列表用文件選擇器選擇文件 拓展1 SWING高級組件 JTree組件樹提供了用樹型結(jié)構(gòu)分層顯示數(shù)據(jù)的視圖 樹中有一根結(jié)點(diǎn) 所有其它結(jié)點(diǎn)為其子結(jié)點(diǎn) 每個(gè)結(jié)點(diǎn)表示一個(gè)數(shù)據(jù)項(xiàng) 案例JTreeDemo java 拓展1 SWING高級組件 SystemTray意為桌面的系統(tǒng)托盤 在Windows下表現(xiàn)為任務(wù)狀態(tài)欄的一個(gè)圖標(biāo) 在很多的應(yīng)用中都有體現(xiàn) 如及時(shí)通訊軟件 MSN 監(jiān)控類軟件 殺毒軟件 等 在Java6的java awt包下提供了SystemTray和TrayIcon類 這兩個(gè)類可以實(shí)現(xiàn)系統(tǒng)托盤功能 實(shí)現(xiàn)的流程 捕獲關(guān)閉窗口事件 隱藏窗口 顯示托盤圖標(biāo) 鼠標(biāo)右擊托盤圖標(biāo) 顯示彈出菜單 自動(dòng) 選擇菜單的顯示窗口項(xiàng) 再顯示窗口 隱藏托盤圖標(biāo) 案例SystemTrayDemo java 拓展1 SWING高級組件 用菜單組件顯示下拉式菜單項(xiàng)用表格組件顯示數(shù)據(jù)記錄用樹組件顯示分級列表用文件選擇器選擇文件 拓展1 SWING高級組件 文件選擇組件JFileChooser 利用該組件可實(shí)現(xiàn)打開 保存指定文件 案例JFileChooserDemo java 任務(wù)2合理優(yōu)化產(chǎn)品信息處理界面 問題分析知識學(xué)習(xí)布局管理器任務(wù)實(shí)施 執(zhí)行效果 問題分析 任務(wù)描述 編寫一個(gè)程序 能夠?qū)崿F(xiàn)產(chǎn)品信息處理界面優(yōu)化步驟分析 了解Java中布局類型常用布局管理器的應(yīng)用方法按照產(chǎn)品信息處理界面設(shè)計(jì) 選擇合理的布局進(jìn)行優(yōu)化編寫代碼編譯執(zhí)行 布局管理是決定容器中組件的大小和位置的過程 布局管理器 LayoutManager 負(fù)責(zé)管理容器中組件的布局 它指明了容器中構(gòu)件的位置和尺寸大小 由java awt包提供 FlowLayout 流布局管理器BorderLayout 邊界布局管理器GridLayout 格子布局管理器CardLayout 卡片布局管理器GridBagLayout GridBag布局管理器 知識學(xué)習(xí) 布局管理器 知識學(xué)習(xí) 布局管理器 FlowLayout類是流布局管理器類 它是缺省布局管理器 流布局管理器可以自動(dòng)依據(jù)窗口的大小 將組件由左到右 由上到下的順序來排列 FlowLayout構(gòu)造方法如下所示 FlowLayout FlowLayout intalign FlowLayout intalign inthgap intvgap 知識學(xué)習(xí) 布局管理器 例子 importjava awt importjavax swing publicclassSampleLayout publicSampleLayout frame newJFrame SampleLayout 創(chuàng)建流布局管理器f1 newFlowLayout FlowLayout LEFT JPanelp1 newJPanel frame getContentPane add p1 容器p1使用流布局管理器p1 setLayout f1 BorderLayout 邊界布局管理器可以讓我們按東 西 南 北 中的方位來布置組件 BorderLayout類有以下構(gòu)造函數(shù) BorderLayout 創(chuàng)建邊界布局管理器 BorderLayout inthgap intvgap 創(chuàng)建邊界布局管理器 并指定控件的垂直與水平間隔 知識學(xué)習(xí) 布局管理器 例子 importjava awt importjavax swing publicclassSampleLayout2 publicSampleLayout2 JFrameframe newJFrame SampleLayout2 JPanelpanel newJPanel panel setLayout newBorderLayout panel add newJButton North BorderLayout NORTH panel add newJButton South BorderLayout SOUTH panel add newJButton East BorderLayout EAST panel add newJButton West BorderLayout WEST panel add newJButton Center BorderLayout CENTER BorderLayout管理器布局圖 GridLayout 格子布局管理器把顯示區(qū)域編組為矩形格子組 然后將控件依次放入每個(gè)格子中 從左到右 自頂向下地放置 GridLayout類有以下構(gòu)造函數(shù) GridLayout introws intcols GridLayout introws intcols inthgap intvgap 知識學(xué)習(xí) 布局管理器 例子 importjava awt importjavax swing publicclassSampleLayout3 publicSampleLayout3 JFrameframe newJFrame SampleLayout3 JPanelpanel newJPanel panel setLayout newGridLayout 3 2 panel add newJButton 1 panel add newJButton 2 panel add newJButton 3 panel add newJButton 4 panel add newJButton 5 panel add newJButton 6 GridLayout管理器布局圖 CardLayout卡片布局管理器是一個(gè)比較復(fù)雜的布局管理器 用這個(gè)管理器 可以使得容器象一個(gè)卡片盒 而容器中的頁面象卡片盒中的卡片一樣任意翻動(dòng)顯示 CardLayout布局管理器有以下構(gòu)造函數(shù) CardLayout 創(chuàng)建一卡片布局管理器CardLayout inthgap intvgap 創(chuàng)建一卡片布局管理器 并指定左右邊距和上下邊距 知識學(xué)習(xí) 布局管理器 為了使得卡片能在容器中一個(gè)一個(gè)的顯示 CardLayout類提供了以下方法 例子 使用卡片布局管理cardLayout newCardLayout panel1 setLayout cardLayout panel1 add card1 panel3 panel1 add card2 panel4 panel1 add card3 panel5 panel1 add card4 panel6 例子 當(dāng)按下按鈕的時(shí)候會觸發(fā)這個(gè)方法publicvoidactionPerformed ActionEventevt Objectobj evt getSource if obj button1 cardLayout first panel1 if obj button2 cardLayout next panel1 if obj button3 cardLayout previous panel1 if obj button4 cardLayout last panel1 cardLayout管理器布局圖 案例CardDemo java GridBag 布局管理器為AWT提供的最靈活 最復(fù)雜的布局管理器 GridBagConstraints類來保存位置信息 使用GridBagLayout類提供的setConstraints 方法將GridBagConstraints類對象綁定到相應(yīng)組件上 實(shí)現(xiàn)布局的方法用GridBagConstraints類的屬性設(shè)置方位信息利用GridBagLayout類提供的setConstraints 方法將方位信息綁定到某組件上將組件加到某容器中 知識學(xué)習(xí) 布局管理器 例子 案例GradBagDemo java fill屬性 可以用來確定如何在它的顯示區(qū)域內(nèi)顯示組件 知識學(xué)習(xí) 布局管理器 Weightx weighty屬性weightx屬性確定此組件是否要拉長 以水平地填入顯示區(qū) 缺省值均為0 不拉長 另一效值為1 拉長 weighty屬性確定此組件是否垂直拉長填入顯示區(qū) 有效值相同 知識學(xué)習(xí) 布局管理器 gridwidth weightx屬性gridwidth屬性指出組件顯示區(qū)域中列的數(shù)目 這些屬性的缺省值為1 設(shè)置為GridBagConstraints REMAINDER 表明該組件后面不能再擺放其他組件 或者說如果要繼續(xù)擺放組件的話 只能在下一行擺放 設(shè)置為GridBagConstraints RELATIVE表明可以在后面繼續(xù)擺放組件 gridheight屬性指出組件顯示區(qū)域中行的數(shù)目 知識學(xué)習(xí) 布局管理器 anchor屬性當(dāng)組件小于其顯示區(qū)域時(shí)使用該屬性 為在顯示區(qū)域內(nèi)確定放置組件的位置 其有效值為 GridBagConstraints CENTER default GridBagConstraints NORTHGridBagConstraints NORTHEASTGridBagConstraints EASTGridBagConstraints SOUTHEASTGridBagConstraints SOUTHGridBagConstraints SOUTHWESTGridBagConstraints WESTGridBagConstraints NORTHWEST 知識學(xué)習(xí) 布局管理器 gridx gridy屬性屬性gridx和gridy分別指出放置組件的長方形網(wǎng)格的行與列的數(shù)目 長方形網(wǎng)格最左面列為gridx 0 最高頂部為gridy 0 相當(dāng)于X Y坐標(biāo) 知識學(xué)習(xí) 布局管理器 設(shè)計(jì)產(chǎn)品信息處理界面布局要求產(chǎn)品信息的內(nèi)容靠左對齊選擇GridBag布局管理器實(shí)現(xiàn)步驟確定圖形元素位置使用GridBag實(shí)現(xiàn)界面布局 任務(wù)實(shí)施 模仿例子 合理優(yōu)化供應(yīng)商錄入界面 要求靠左對齊 按鈕在右下方 動(dòng)手練習(xí) 40分鐘 任務(wù)3美化產(chǎn)品信息處理界面 問題分析知識學(xué)習(xí)Java2D繪圖機(jī)制常用類和包文本處理圖像處理播放音頻任務(wù)實(shí)施 執(zhí)行效果 問題分析 任務(wù)描述 編寫一個(gè)程序 能夠達(dá)到產(chǎn)品信息處理界面美化要求步驟分析 了解Java2D繪圖機(jī)制設(shè)置字體 加載圖片的方法按照產(chǎn)品信息處理界面設(shè)計(jì) 選擇圖片 字體進(jìn)行界面美化編寫代碼編譯執(zhí)行 繪圖界面AWT中的Canvas組件 用于創(chuàng)建畫布SWING中則可直接在頂層窗體 如JFrame JApplet 或者JPanel進(jìn)行繪制繪圖坐標(biāo) 知識學(xué)習(xí) Java2D繪圖機(jī)制 0 0 X軸 Y軸 x y x y 屏幕左上角 單位 像素pix 繪圖機(jī)制每個(gè)Java組件都有一個(gè)與之相關(guān)的圖形環(huán)境 即圖形上下文 java awt Graphic類是圖形上下文的抽象基類 用于管理圖形上下文 繪制圖形 如線條 矩形等 的像素 允許應(yīng)用程序?qū)D形繪制到組件上或空閑屏幕的映像中java awt Graphic類是抽象類 應(yīng)用時(shí)需要?jiǎng)?chuàng)建其子類 以實(shí)現(xiàn)繪圖功能 知識學(xué)習(xí) Java2D繪圖機(jī)制 知識學(xué)習(xí) Java2D繪圖機(jī)制 java awt Graphic類中的方法 繪圖相關(guān)類 顏色類Color Java中的顏色是RGB值來設(shè)定 R G B分別是紅 綠 藍(lán)三種顏色的色量 三種色量組合構(gòu)建多種顏色 java awt Color定義了一些標(biāo)準(zhǔn)顏色 以及操作顏色的方法 知識學(xué)習(xí) Java2D繪圖機(jī)制 繪圖相關(guān)類 字體類Font Java中的字體控制類為java awt Font 定義字體名 字號 風(fēng)格 字體度量類java awt FontMetrics 封裝了字高 寬等數(shù)據(jù) 每個(gè)圖形上下文中都包含一個(gè)Font和FontMetrics對象字體類構(gòu)造函數(shù) Font Stringname intstyle intsize 字體名 Monospaced SansSerif Serif Dialog DialogInput字體風(fēng)格 PLAIN 普通 BOLD 粗體 ITALIC 斜體 知識學(xué)習(xí) Java2D繪圖機(jī)制 小結(jié) GUI元素大致分為兩類 容器類和非容器類 Java1 0版本中 用戶界面用AWT 抽象窗口工具箱 創(chuàng)建 用AWT創(chuàng)建的用戶界面在不同的操作平臺上有不同的表現(xiàn) Java基礎(chǔ)類是原先AWT的擴(kuò)充 它加入了廣泛的 可完全移植的 類和庫的集合 它所包含的主要包之一是javax swing包 javax swing包提供了用戶接口組件 如 窗口 對話框 按鈕 復(fù)選框 列表框 菜單 滾動(dòng)條 文本輸入框 類的集合