JAVA圖形用戶界面設計與實現.ppt

《JAVA圖形用戶界面設計與實現.ppt》由會員分享，可在線閱讀，更多相關《JAVA圖形用戶界面設計與實現.ppt（68頁珍藏版）》請在裝配圖網上搜索。

圖形用戶界面的設計與實現 教材第7章 設計原則容器與布局標準組件事件處理自定義成分 用戶界面設計原則 使用圖形界面GUI GraphicsUserInterface 字符界面 采用命令行方式與用戶交互 圖形界面 用多種媒體顯示信息 用直觀 方便的GUI標準組件來接收命令 控制權在用戶 用戶要由操作的主動權 界面與操作的風格一致性 寬容 容錯 性 簡潔與美觀并重 界面構成 容器 標準組件 用戶自定義成分 創(chuàng)建GUI各組成成分 并安排相互位置關系 包含 相鄰 相交 定義GUI各成分對不同事件的響應 實現與用戶的交互與界面功能 界面元素 容器是用來組織其他界面成分和元素的單元 可以形成容器的層次 構筑復雜結構Window Frame Applet Dialog 組件是圖形用戶界面的基本單位 它里面不再包含其他的成分 GUI組件是圖形用戶界面標準化的結果 GUI組件的作用是完成與用戶的交互 用戶自定義成分文字 圖形 圖象 不能像標準組件一樣被系統(tǒng)識別和承認 只起裝飾作用 不能響應用戶的動作 不具有交互功能 AWT包 AbstractWindowsToolkit 抽象窗口工具 AWT類庫中的各種操作是被定義為在一個并不存在的 抽象窗口 中進行的 抽取不同軟硬件平臺中所實現的窗口的公共特性 所設計的界面獨立于具體的界面實現 提供與機器無關的基本GUI標準組件 選擇類組件 單選按鈕 復選框 下拉選單 列表框 文字處理類組件 標簽 文本框 編輯框 命令類組件 按鈕 工具欄 菜單 AWT類層次關系圖 Component Container Panel Applet Window Frame Dialog Button TextField TextArea TextComponent Checkbox MenuComponent Menu MenuItem MenuBar 其他組件 獨立 不獨立 Component類 可顯示在屏幕上的圖形對象 可與用戶交互 方法 add PopupMenupopup 加一彈出菜單addFocusListener FocusListenerl 將發(fā)生在本組件上的事件注冊給監(jiān)聽者 以進行事件處理 setSize intwidth intheight 設置組件尺寸paint Graphicsg 重畫組件setFont Fontf 設置組件字體setBackground Colorc 設置組件背景色setForeground Colorc 設置組件前景色 paint和repaint方法 某組件的paint 和update 為系統(tǒng)自動調用的有關圖形繪制的方法 不可人為編程調用 但可編程重新定義其操作內容 使用repaint 方法可以觸發(fā)update 方法 Font類 java awt Font設計字體顯示效果 創(chuàng)建字體對象 Fontfn newFont String字體 int風格 int字號 字體 TimesRoman Courier Arial等風格 三個常量Font PLAIN Font BOLD Font ITALIC字號 字的大小 磅數 使用字體對象 如設置某組件當前使用的字體 setFont Fontfn 獲取組件當前使用的字體 getFont Color類 構造函數1 設置顏色 Colorc newColor intred intgreen intblue 范圍 0 255newColor 200 200 200 newColor 255 0 100 構造函數2Colorc newColor intrgb 蘭色 0 7位綠色 8 15位紅色 16 23位顏色常量值publicstaticfinalColorblackColor black Color blue Color gray Color redColor white Containers容器組件 Window 不需要其他組件支撐 獨立顯示 FrameDialog 沒有菜單條 不能改變大小Panel 必須放在Window組件中 或Web瀏覽器窗口 才能顯示 它為一矩形區(qū)域 在其中可擺放其他組件 可以有自己的布局管理器 基本方法add Componentcomp 將指定組件放到容器中add Componentcomp intindex remove Componentcomp 刪除指定組件setLayout LayoutManagermgr 設置容器布局paint畫容器 及其上面的組件 容器的組件布局 依靠布局管理器 layoutmanager 方式調用容器的setLayout方法 為容器指定某種布局管理器的一個對象 例 setLayout newFlowLayout 該布局管理器對象負責確定容器中組件的位置和大小 當容器需要定位組件和確定組件大小時 就會給布局管理器對象發(fā)消息 讓它完成該項工作 直接管理組件方式調用容器的setLayout null 方法 關閉布局管理器 調用每一個組件的setLocation 方法決定組件位置 調用每一個組件的setSize 方法決定其大小 直接管理組件將失去平臺無關性 布局管理器對象 布局管理器種類 FlowLayout 組件在一行中從左至右水平排列 排滿后折行BorderLayout 北 南 東 西 中GridLayout 以行和列的網格形式安排組件GridBagLayout 更復雜 功能更強的網格布局CardLayout 每一個組件作為一個卡片 容器僅顯示多個卡片中的某一個 確定容器布局 缺省的布局管理器Window Frame Dialog BorderLayoutPanel Applet FlowLayout 選擇布局管理器的方法建立布局管理器類的對象利用容器的setLayout為容器指定布局 即指定一個布局管理器的對象 例 將myFrame布局設定為FlowLayout類型myFrame setLayout newFlowLayout Frame Frame Stringtitle 構造一個新的不可見的frame隱含的布局管理器是 BorderLayoutsetLayout 設置新的布局管理器 add Componentcomp 在容器上增加一個組件 在容器為不可見的狀態(tài)時加 voidsetSize intwidth intheight setVisible true 7 1a Frame Panel Framefm1 newFrame Hello fm1 setSize 400 350 fm1 setBackground Color gray fm1 setLayout null Panelpn1 newPanel pn1 setSize 100 100 pn1 setBackground Color red pn1 setLocation 0 50 fm1 add pn1 fm1 setVisible true 7 1b FlowLayout布局管理器 構造函數 FlowLayout FlowLayout intalign inthgap intvgap align 對齊方式 LEFTCENTERRIGHThgap 組件水平間距 象素 vgap 組件垂直間距 象素 無參數的構造函數創(chuàng)建的FlowLayout對象 其對齊方式為CENTER居中方式 組件間的橫縱間距都為5個像素 FlowLayout布局管理器 Framef newFrame FlowLayout f setSize 400 300 不起作用f setBackground Color gray f setLayout newFlowLayout FlowLayout LEFT 10 20 b1 newButton button1 b2 newButton button2 b3 newButton button3 f add b1 f add b2 f add b3 f setVisible true f pack 7 1c BorderLayout布局管理器 setLayout newBorderLayout add b1 BorderLayout NORTH 當容器大小改變 組件相對位置不會改變 BorderLayout布局管理器 f newFrame BorderLayout f setSize 200 200 b1 newButton button1 b5 newButton button5 f add b1 BorderLayout NORTH f add b2 BorderLayout SOUTH f add b3 BorderLayout WEST f add b4 BorderLayout EAST f add b5 BorderLayout CENTER f setVisible true 7 1d Border Panel classMyFrameextendsFrame MyFrame Buttonb1 newButton 1 Buttonb2 newButton 2 Buttonb3 newButton 3 Buttonb4 newButton 4 Panelp newPanel p add b1 p add b2 add p BorderLayout NORTH add b3 BorderLayout WEST add b4 BorderLayout CENTER pack setVisible true 7 1e GridLayout布局管理器 創(chuàng)建GridLayout對象作為布局編輯器 指定劃分網格的行數和列數 網格大小一樣 setLayout newGridLayout 行數 列數 setLayout newGridLayout 行數 列數 行間隔 列間隔 調用容器的方法add 將組件加入容器 組件填入容器的順序將按照第一行第一個格中 第一行第二個格中 每個網格中都必須填入組件 如果希望某個網格為空白 可以為它加入一個空的標簽 add newLabel GridLayout布局管理器 f newFrame GridLayout f setLayout newGridLayout 2 3 f setSize 200 100 f setBackground Color gray b1 newButton 1 b6 newButton 6 f add b1 f setVisible true 7 1f 布局例 Framefm newFrame fm setLayout newFlowLayout tf newTextField 22 fm add tf Panelp1 newPanel p1 setLayout newGridLayout 4 3 p1 add Panelp2 newPanel p2 setLayout newGridLayout 4 3 p2 add fm add p1 fm add p2 7 2布局 GridBagLayout布局管理器 每個GridBagLayout對象維護一個動態(tài)矩形網格 每個組件可占據一個或多個單元作為它的顯示區(qū)域 每一個組件都與一個GridBagConstraints類的實例相連 以指定在顯示區(qū)域中如何擺放 并可確定大小 步驟 setLayout newGridBagLayout GridBagConstraintsgbc newGridBagConstraints gbc gridx 0 屬性賦值 add button1 gbc GridBagLayout布局管理器 設置GridBagConstraints類實例屬性值 gridxgridy組件顯示區(qū)域的左上角單元格坐標gridwidthgridheight指定顯示區(qū)域行 列單元數RELATIVE指定緊挨著前一個組件擺放fill當顯示區(qū)域大于組件時如何擴充組件 HORIZONTAL水平充滿VERTICAL垂直充滿BOTH全部填充NONE不調整 隱含 ipadxipady指定組件間最小間隔anchor當顯示區(qū)域大于組件時如何擺放組件 CENTER 隱含 NORTH EAST SOUTH WEST SOUTHEAST NORTHEAST SOUTHWEST NORTHWEST CardLayout布局管理器 將每一個組件視為一張卡片 同一時刻只能顯示一個組件 setLayout newCardLayout CardLayout方法 按序指定組件 first Containerparent last Containerparent previous Containerparent next Containerparent CardLayout方法 按名顯示組件 addLayoutComponent Stringname Componentc show Containerparent Stringname 事件及處理機制 用戶操作GUI組件時會引發(fā)各種事件 事件 描述 發(fā)生了什么事情 的對象 系統(tǒng)根據用戶的操作構造出相應事件類的對象 事件源 事件的產生地 事件處理程序 是一個方法 它接收一個事件對象 分析它 并完成對該事件的處理 每個事件有一個相應的監(jiān)聽者接口 它規(guī)定了能夠接收 并處理 該類事件的方法的規(guī)范 監(jiān)聽者 實現了監(jiān)聽者接口的類 它包含有事件處理程序 編程人員要為事件源指定監(jiān)聽者對象 即指定處理某種事件的事件處理程序 監(jiān)聽者對象方法 鼠標單擊按扭 事件及處理機制 ActionEvent事件 publicvoidactionPerformed ActionEvente ActionListener接口 ActionEvent事件 監(jiān)聽者類 監(jiān)聽者對象 調用按扭的addActionListener 方法 為該按扭指定監(jiān)聽者 實現接口 事件類 ActionEvent類 存放這個事件的細節(jié) 該類的方法有 getSource 返回事件發(fā)生的對象 名 getActionCommand 返回按扭名 ActionListener接口publicvoidactionPerformed ActionEvente 圖形用戶界面例 importjava awt importjava awt event publicclassa publicstaticvoidmain Stringargs MyFrameform1 newMyFrame classMyFrameextendsFrame MyFrame super 窗口標題 setSize 200 100 setFont newFont TimesRoman Font BOLD 20 圖形用戶界面例 setLayout newFlowLayout Buttonb newButton close add b b addActionListener newBprocess setVisible true classBprocessimplementsActionListener publicvoidactionPerformed ActionEvente System exit 0 監(jiān)聽者類 某個類可以兼職也可以專職做這件事 實現監(jiān)聽者接口 一個類若實現一個接口 必須實現接口的全部方法 例如 ActionListener接口只有一個方法 voidactionPerformed ActionEvente 實現接口的類可以是 一般類內部類匿名類 7 3一般類 7 4內部類 7 5匿名類 事件處理有關問題 有哪些事件類 java awt event 每個事件類的監(jiān)聽者接口 每個監(jiān)聽者接口規(guī)定的方法 多方法的監(jiān)聽者接口的適配器 實現接口的抽象類 是什么 組件的事件委托 注冊 方法 窗口事件 適配器說明 關閉窗口框時引發(fā)WindowEvent事件委托 addWindowListener newWclose 定義監(jiān)聽者類classWcloseimplementsWindowListener publicvoidwindowClosing WindowEvente System exit 0 其他方法 窗口事件 WindowListener類有7個方法 都必須實現 windowActivated WindowEvente windowClosed WindowEvente windowClosing WindowEvente windowDeactivated WindowEvente windowDeiconified WindowEvente windowIconified WindowEvente windowOpened WindowEvente WindowAdapter 系統(tǒng)實現的處理窗口事件的抽象適配器類 用空內容實現了WindowListener接口的全部7個方法 classWcloseextendsWindowAdapter 僅須編寫需要的方法 ActionEvent事件 引發(fā)原因 單擊按扭 雙擊列表框中選項 選擇菜單項 文本框中的回車事件監(jiān)聽接口 ActionListener接口方法 actionPerformed ActionEvente 組件注冊該事件方法 addActionListener 監(jiān)聽者對象 TextEvent事件 引發(fā)原因 文本框或文本區(qū)域內容改變事件監(jiān)聽接口 TextListener接口方法 textValueChanged TextEvente 組件注冊該事件方法 addTextListener 監(jiān)聽者對象 ItemEvent事件 引發(fā)原因 改變列表框中的選中項改變復選框選中狀態(tài)改變下拉選單的選中項事件監(jiān)聽接口 ItemListener接口方法 itemStateChanged ItemEvente 組件注冊該事件方法 addItemListener 監(jiān)聽者 AdjustmentEvent事件 引發(fā)原因 操作滾動條改變滑塊位置事件監(jiān)聽接口 AdjustmentListener接口方法 adjustmentValueChanged AdjustmentEvente 組件注冊該事件方法 addAdjustmentListener 監(jiān)聽者 KeyEvent事件 引發(fā)原因 敲完鍵 KEY TYPED 按下鍵 KEY PRESSED 釋放鍵 KEY RELEASE 事件監(jiān)聽接口 KeyListener接口方法 keyPressed KeyEvente 鍵已被按下時調用keyReleased KeyEvente 鍵已被釋放時調用keyTyped KeyEvente 鍵已被敲完時調用KeyEvent方法 charch e getKeyChar 事件監(jiān)聽適配器 抽象類 KeyAdapter組件注冊該事件方法 addKeyListener 監(jiān)聽者 MouseEvent事件 引發(fā)原因 鼠標作用在一個組件上 鼠標事件 鼠標鍵按下 鼠標鍵抬起 單擊鼠標 鼠標光標進入一個組件 鼠標光標離開一個組件 鼠標移動事件 鼠標移動 鼠標拖動鼠標事件監(jiān)聽接口1 MouseListener接受鼠標事件該接口定義的方法 mouseClicked MouseEvente mouseEntered MouseEvente 鼠標光標進入一個組件mouseExited MouseEvente 鼠標光標離開一個組件鼠標事件監(jiān)聽適配器 抽象類 MouseAdapter MouseEvent事件 續(xù) 鼠標事件監(jiān)聽接口2 MouseMotionListener接受鼠標移動事件該接口方法 mouseMoved MouseEvente 鼠標光標在組件上移動mouseDragged MouseEvente 用鼠標拖動一個組件鼠標移動事件監(jiān)聽適配器MouseMotionAdapter組件注冊鼠標事件方法 addMouseListener 監(jiān)聽者 組件注冊鼠標移動事件方法 addMouseMotionListener 監(jiān)聽者 MouseEvent事件 續(xù) MouseEvent方法e getClickCount 1單擊 2雙擊Pointe getPoint 取鼠標光標位置inte getX inte getY 取鼠標光標位置e getModifiers e BUTTON1 MASK鼠標左鍵 e BUTTON3 MASK鼠標右鍵 7 6鼠標事件 WindowEvent事件 引發(fā)原因 有關窗口操作引發(fā)的事件事件監(jiān)聽接口WindowListener接口方法windowActivated WindowEvente 激活窗口windowClosed WindowEvente 調用dispose方法關閉窗口后 windowClosing WindowEvente 試圖利用窗口關閉框關閉窗口windowDeactivated WindowEvente 本窗口成為非活動窗口 WindowEvent事件 續(xù) windowDeiconified WindowEvente 窗口從最小化恢復為普通窗口windowIconified WindowEvente 窗口變?yōu)樽钚』瘓D標windowOpened WindowEvente 當窗口第一次打開成為可見時接口適配器WindowAdapter注冊事件方法addWindowListener FocusEvent事件 引發(fā)原因 組件獲得焦點組件失去焦點事件監(jiān)聽接口FocusListener接口方法 focusGained FocusEvente 組件獲得焦點時調用focusLost FocusEvente 組件失去焦點時調用接口適配器 FocusAdapter組件注冊該事件方法 addFocusListener TextEvent事件 引發(fā)原因 當組件 如文本框 文本改變時引發(fā)事件監(jiān)聽接口 TextListener接口方法 textValueChanged TextEvente 組件注冊該事件方法 addTextListener ComponentEvent事件 引發(fā)原因 當組件移動 改變大小 改變可見性時引發(fā)事件監(jiān)聽接口 ComponentListener接口方法 componentHidden ComponentEvente 組件隱藏componentMoved ComponentEvente 組件移動componentResized ComponentEvente 組件改變大小componentShown ComponentEvente 組件變?yōu)榭梢娊涌谶m配器ComponentAdapter組件注冊該事件方法 addComponentListener ContainerEvent事件 引發(fā)原因 當容器內增加或移走組件時引發(fā)事件監(jiān)聽接口 ContainerListener接口方法componentAdded ContainerEvente 容器內加入組件componentRemoved ContainerEvente 從容器中移走組件接口適配器ContainerAdapter容器注冊該事件方法 addContainerListener 標準組件簡介 Label 標簽 構造函數Labela newLabel information Labela newLabel information Label CENTER 方法a setText 新內容 設置標簽內容Stringa getText 讀取標簽內容Button 按鈕 ButtonmyB newButton Cancel Checkbox組件 構造函數Checkbox Stringlabel Checkbox Stringlabel booleanstate Checkbox Stringlabel booleanstate CheckboxGroupgroup 方法 booleangetState setState booleanstate CheckboxGroup組件 將一組Checkbox按扭組成單選按扭組件 例setLayout newGridLayout 3 1 CheckboxGroupcbg newCheckboxGroup Checkboxck1 newCheckbox one true cbg Checkboxck2 newCheckbox two false cbg Checkboxck3 newCheckbox three false cbg 方法 CheckboxgetSelectedCheckbox setSelectedCheckbox Checkboxbox TextField行編輯框組件 構造函數TextFieldf1 newTextField 30 TextFieldf1 newTextField abc 30 建30個字符寬的行編輯框方法 StringgetText 讀文本框內容setText abc 設置編輯框內容setEchoChar charc 設置回顯字符TextComponent方法 setEditable false selectAll 7 7計算器 TextArea編輯框組件 構造函數TextAreata1 newTestArea 10 45 建10行 45列的文本區(qū)域TextAreata1 newTestArea abc 10 45 TextAreata1 newTestArea abc 10 45 滾動條 滾動條指定SCROLLBARS BOTHSCROLLBARS HORIZONTAL ONLYSCROLLBARS VERTICAL ONLYSCROLLBARS NONE方法append Stringstr 追加文本 List列表框 首先創(chuàng)建List對象 再調用add 方法加入List列表的各選項構造函數List introws booleanmultipleMode rows顯示行數 multipleMode是否允許多選方法 list1 add classA list1 add classB list1 add classC 0 指定加入選項位置 List列表框 方法intgetSelectedIndex 取被選項索引int getSelectedIndexes 取被選項索引 多選 StringgetSelectedItem 取被選項String getSelectedItems 取被選項 多選 voidselect intindex 選中指定的項StringgetItem intindex 按索引號取出該項intgetItemCount 取出項數String getItems 取出所有的項 Choice下拉選單 例ChoiceColorChooser newChoice ColorChooser add Green ColorChooser add Red ColorChooser add Blue StringgetSelectedItem Scrollbar滾動條 構造函數mySlider newScrollbar Scrollbar HORIZONTAL 0 1 0 Integer MAX VALUE 滾動條方向滑塊初始位置滑塊尺寸滾動槽最小值滾動槽最大值方法intgetValue 返回滑塊當前位置setUnitIncrement 1 設置單位增量 點按兩端箭頭 setBlockIncrement 50 設置塊增量 點按滾動槽 7 8滾動條 菜單 創(chuàng)建菜單條 MenuBar MenuBarm MenuBar newMenuBar 創(chuàng)建菜單 Menu 加入菜單條MenumenuFile newMenu File 創(chuàng)建菜單m MenuBar add menuFile 將菜單加入菜單條創(chuàng)建菜單項 MenuItem 加入相應菜單MenuItemf1 newMenuItem Open 創(chuàng)建各菜單項MenuItemf2 newMenuItem Close menuFile add f1 加入菜單menuFile add f2 將菜單條放入frame myFrame setMenuBar m MenuBar 編寫響應菜單操作的代碼 ActionEvent 7 9菜單 文件對話框 FileDialog Frameparent Stringtitle intmode parent對話框所屬窗體title對話框標題mode對話框模式FileDialog LOAD打開文件FileDialog SAVE保存文件 文件對話框 classMyFrameextendsFrame MyFramegetMyFrameIns returnthis 子類方法代碼片段 FileDialogf newFileDialog getMyFrameIns open FileDialog SAVE f setVisible true Stringfname f getDirectory f getFile ig getToolkit getImage fname 繪制用戶自定義成分 一般在容器中 窗口 或畫布上繪制 利用Java awt類庫中的類及其方法繪制用戶自定義的圖形界面成分 Graphics類包含很多繪制圖形和文字的方法 首先要獲得Graphics類的實例 然后利用其方法繪制 Graphics類的實例一般作為相關方法的參數傳遞進來 paint Graphicsg 坐標規(guī)定 paint和repaint方法 某組件的paint 和update 為系統(tǒng)自動調用的有關圖形繪制的方法 不可人為編程調用 但可編程重新定義其操作內容使用repaint 方法可以觸發(fā)update 方法 Graphics的方法 drawLine x1 y1 x2 y2 直線drawRect x y w h 矩形drawOval x y w h 圓或橢圓fillOval x y w h 實心圓或橢圓drawPolygon X坐標數組 Y坐標數組 個數 畫多邊形drawArc x y w h 開始角度 弧度角度 setColor Colorc 置顏色setFont Fontf 置字體getColor getFont 7 10 Graphics的方法 DrawImage Imageimg intx inty this 顯示圖像的方法第一個參數是保存圖像數據的Image對象 第二 三個參數是圖像的左上角坐標 它們決定了圖像在容器中的顯示位置 最后一個參數是顯示圖像的容器對象 staticToolkitgetToolkit getTookit getImage 文件名 7 11動畫 圖象顯示方法 讀取圖片 顯示圖片在application中使用ToolKit類的getImage方法取得圖片 Imageig getToolkit getImage 文件名 然后用Graphics類的drowImage方法顯示Image對象 在applet小程序中 可使用Applet類的getImage方法獲得圖象 Imageig getImage 綜合題 7 2綜合