第7章

GUI軟件構造第7章GUI軟件構造首先認識GUI及其基本元素，理解GUI的基本設計原則，學習GUI的設計模式、在GUI開發中廣泛運用的編程范式——事件驅動編程，通過例子學習使用工具構造GUI軟件。深入討論GUI的其他設計原則，探討GUI測試方法。2016秋數據科學與軟件工程學院2第7章GUI軟件構造故事8圖形界面測試工具2016秋數據科學與軟件工程學院3第7章GUI軟件構造7.1GUI簡介7.2GUI的基本元素與設計規范7.3JavaGUI設計模式7.4事件驅動編程7.5案例分析與實踐7.6討論與提高7.7思考與練習題2016秋數據科學與軟件工程學院47.1GUI簡介7.1.1GUI發展軌跡7.1.2JavaGUI的構造工具2016秋數據科學與軟件工程學院57.1.1GUI發展軌跡2016秋數據科學與軟件工程學院67.1.2JavaGUI的構造工具1．JavaSwing工具包Swing作為一個用于開發Java圖形界面應用程序的經典開發工具包，jdk1.2即包含了Swing。2016秋數據科學與軟件工程學院77.1.2JavaGUI的構造工具2016秋數據科學與軟件工程學院87.1.2JavaGUI的構造工具2．JavaGUI可視化設計工具——WindowBuilder2016秋數據科學與軟件工程學院97.2GUI的基本元素與設計規范7.2.1GUI的基本元素7.2.2GUI基本設計規范2016秋數據科學與軟件工程學院107.2.1GUI的基本元素1．窗口與對話框“窗口”是一種容器類，而且是頂層容器類。所謂頂層容器類，即可以容納其他容器或組件、本身可獨立顯示、不依賴其他容器類的類。窗口一般是指javax.swing.JFrame類，依次派生自java.awt.Window類、java.awt.Container類。2016秋數據科學與軟件工程學院117.2.1GUI的基本元素“對話框”是一個與窗口類似的頂層容器類，對話框與普通窗口不同。對話框用于交互，一般會向用戶提示一些信息并能獲取用戶的信息反饋。javax.swing.JDialog是一個對話框類，它依次派生自java.awt.JDialog類、java.awt.Window類，與jFrame類同源。另一個可以創建對話框的類JoptionPane，它有4個常用的靜態方法，用于創建4種常用的對話框，如表7.2所示。2016秋數據科學與軟件工程學院127.2.1GUI的基本元素2016秋數據科學與軟件工程學院137.2.1GUI的基本元素2016秋數據科學與軟件工程學院147.2.1GUI的基本元素2．菜單和工具條菜單包括菜單條（JMenuBar）、菜單（JMenu）和菜單項（JMenuItem）。JmenuBar是容器類，但不是頂層容器，因此需要放置在一個頂層容器中。工具條（JToolBar）是一個容器類，可以放置各種常用的工具或組件。2016秋數據科學與軟件工程學院157.2.1GUI的基本元素3．圖標在某些場合，使用圖標（icon）比使用文字更加簡潔、更加容易辨析。4．基本組件派生自Component的類稱為“組件”，分三類（注意，這樣分類并不完全）：頂層容器類（派生自Window），如窗口或對話框；非頂層容器類（如菜單條和工具條），稱為中間容器類；必須放置在容器上的那些非容器類，稱為“基本組件”，它們位于設計界面的“Components”組內。2016秋數據科學與軟件工程學院167.2.1GUI的基本元素（1）標簽（JLabel）（2）文本域（JTextField）（3）密碼域（JPasswordField）（4）單選按鈕（JRadioButton）（5）復選框（JCheckBox）（6）組合框（JComboBox）（7）文本區域（JTextArea）（8）按鈕（JButton）還有進度條、滑塊、多選列表等基本組件2016秋數據科學與軟件工程學院177.2.2GUI基本設計規范1．界面合理合理的界面，要求有合理的布局和顏色搭配。窗口中的組件要排列整齊，既不能太擁擠，也不能太空曠，界面的顏色要與軟件的功能、界面布局搭配協調，并且遵循人們對于顏色的習慣性理解。2016秋數據科學與軟件工程學院187.2.2GUI基本設計規范2．風格一致GUI界面應使用標準的組件、明確定義的術語，與用戶的習慣認知和知識領域一致。同時，界面信息表現方式也要前后一致，不同功能模塊的操作方式、字體、標簽風格、顏色方案、錯誤提示信息等方面應一致。2016秋數據科學與軟件工程學院197.2.2GUI基本設計規范3．元素標準（1）窗口與對話框的標準。窗口能適應不同分辨率的屏幕，能正確地關閉和縮放；窗口中的組件在窗口縮放時應具有正確的位置；窗口中的組件應具有恰當的焦點順序；要根據不同場合正確使用不同類型的對話框（如消息提示、確認、輸入等類型）。2016秋數據科學與軟件工程學院207.2.2GUI基本設計規范（2）菜單和工具條的標準。菜單應提供線索以幫助用戶識別、而非強迫用戶去記憶；菜單項措辭準確、順序合理；菜單的層次不宜過多。工具條應具有最常用的功能，應允許用戶自定義工具條的功能；工具條的功能按鈕可采用圖標或文字相結合的方式合理提示用戶。2016秋數據科學與軟件工程學院217.2.2GUI基本設計規范（3）圖標的標準。圖標應輪廓清晰、與背景區分明顯，圖標應采用能表達出實際功能的圖形，避免過度抽象；圖標的設置符合多數用戶的表達習慣和使用習慣。2016秋數據科學與軟件工程學院227.2.2GUI基本設計規范（4）基本組件的標準。組件間距合理、屬于同組的組件區域明顯；具有文本編輯區域的組件尺寸應符合大多數情況的文字長度；按鈕的位置符合用戶使用習慣，根據功能正確使用如單選按鈕、復選框等不同的輸入組件；當組件不可用或內容不可編輯時，要設置相應屬性，以免誤導用戶。2016秋數據科學與軟件工程學院237.3JavaGUI設計模式7.3.1觀察者模式7.3.2MVC模式2016秋數據科學與軟件工程學院247.3.1觀察者模式在觀察者模式中，把上文中那些狀態將會發生改變的對象作為“被觀察者”或“觀察對象”（Subject），當被觀察者的狀態發生改變時，則會通知另一類被稱為“觀察者”（Observer）或“偵聽器”（Listener）的對象，后者會根據新狀態做出相應的反應。被觀察者可以將不同的觀察者加入到對不同狀態變化的偵聽對象列表中。2016秋數據科學與軟件工程學院257.3.1觀察者模式2016秋數據科學與軟件工程學院267.3.1觀察者模式弊端：觀察者一方面接收狀態變化的通知，另一方面還要做出相應的動作——執行相應的業務功能，這等于說在一個類當中整合了輸入解析和業務邏輯兩部分功能，不符合單一職責的設計原則。這種功能耦合的設計，使得觀察者類把輸入解析和業務邏輯捆綁在一起，不能使用同一個觀察者類處理不同的業務邏輯。2016秋數據科學與軟件工程學院277.3.2MVC模式2016秋數據科學與軟件工程學院287.4事件驅動編程事件驅動編程主要用于GUI和其他為響應用戶的交互做出特定動作的應用程序。在事件驅動編程的應用中，通常有一個監聽事件的主循環，一旦監測到其中的一個事件，就觸發一個函數調用，執行相應的動作。事件驅動編程可以理解為實現MVC模式的一種技術方案。2016秋數據科學與軟件工程學院297.4事件驅動編程7.4.1事件捕捉與處理7.4.2焦點事件和Tab順序7.4.3實例講解2016秋數據科學與軟件工程學院307.4.1事件捕捉與處理用戶對于組件的動作或組件狀態的改變都可以列入事件。而發生動作或狀態改變的這個組件，就是事件源。在Swing中，采用事件類（Event）表示某種事件，采用了偵聽器類（Listener）來捕捉與處理事件。偵聽器類對不同的事件進行偵聽，當發生特定事件時，即進行相應的處理。2016秋數據科學與軟件工程學院317.4.1事件捕捉與處理Swing中常用的事件有窗口事件、動作事件、鍵盤事件、鼠標事件、文本事件、焦點事件等，如表7.3所示。2016秋數據科學與軟件工程學院327.4.1事件捕捉與處理事件的處理可采用匿名類、適配器類等多種方式。即使是Java這種與平臺無關的語言，其GUI的顯示效果也取決于特定的操作系統。2016秋數據科學與軟件工程學院337.4.2焦點事件和Tab順序焦點就是獲取鍵盤或鼠標輸入的能力。組件獲得焦點，即可獲取鍵盤輸入，而組件失去焦點，鍵盤輸入的接收方也就隨之改為其他組件。在多個不同組件當中，焦點如何切換呢？默認的方法是：（1）使用Tab鍵，每按一次Tab鍵，焦點按照一定的次序在組件之間切換；（2）使用鼠標單擊組件，被單擊的組件獲得焦點，而原先獲得焦點的組件則失去焦點。2016秋數據科學與軟件工程學院347.4.2焦點事件和Tab順序“默認焦點”指當GUI程序（或網頁）運行時，無須用戶操作而首先獲得焦點的那個組件。默認焦點應當遵循以下兩條設計原則。（1）默認焦點應當處于用戶最經常選擇的最先輸入組件。（2）對于具有連續多個文本輸入組件的界面，焦點切換順序應當從第一項輸入組件開始，按照從左至右、由上到下的順序依次切換。2016秋數據科學與軟件工程學院357.4.3實例講解2016秋數據科學與軟件工程學院367.5案例分析與實踐7.5.1探路的GUI構造任務7.5.2重構GUI構造任務2016秋數據科學與軟件工程學院377.6討論與提高7.6.1GUI的設計原則7.6.2GUI的測試2016秋數據科學與軟件工程學院387.6.1GUI的設計原則1．關注用戶及其任務，而不是技術。設計界面時，不應首先關注用何種技術實現，而應當了解軟件的用戶、任務和工作的環境。2．首先考慮功能，然后才是表示。軟件體現了特定的概念及概念間的關系，設計人員在向用戶呈現一個“軟件界面”前，首先應當完整地定義概念及其相互關系——開發、更新概念模型。用戶界面是隨概念模型的確定而設計出來的。2016秋數據科學與軟件工程學院397.6.1GUI的設計原則3．對任務的看法與用戶保持一致。按照用戶的觀點進行設計。（1）讓用戶自然地使用。（2）使用用戶熟悉的詞匯而不是計算機專業詞匯。（3）軟件的工作細節應當保留在內部。4．設計要符合常見情況軟件界面設計應減少常用情況下的操作步驟?！俺Ｓ谩庇袃桑阂皇鞘褂迷摴δ艿挠脩舳?；二是使用該功能的頻度高。對于多用戶使用的功能，要置于明顯處；對于使用頻度高的功能，應當降低鼠標單擊或按鍵次數。2016秋數據科學與軟件工程學院407.6.1GUI的設計原則5．不要分散用戶對目標的注意力軟件的設計應當使用戶專注于他們的任務和目標，而不要去考慮軟件的運行、操作等方面。具體如下。（1）不能讓用戶解決額外問題；（2）不要讓用戶通過推理、猜測的方式使用程序，用戶界面中的各項組件、命令、設置等功能和使用的詞匯都應當清晰明確，避免用戶靠猜測、推理、試探的方法使用軟件。2016秋數據科學與軟件工程學院417.6.1GUI的設計原則6．促進學習我們不應當指望所有用戶通過閱讀用戶手冊而學會使用軟件。軟件界面本身就應該能促進用戶體驗使用軟件。我們應當顯示明確的文字和按鈕，使用自然易懂的圖示，保持軟件的一致性，降低用戶出錯的風險和糾錯成本。2016秋數據科學與軟件工程學院427.6.1GUI的設計原則7．傳遞信息，而不僅僅是數據。軟件應當將用戶的注意力集中到重要的數據，幫助他們提取信息，而不是把所有的數據一股腦地扔給用戶。在設計界面時，應當注意，“屏幕屬于用戶”，焦點的轉移、窗口的激活、鼠標的移動都應當由用戶主動控制。2016秋數據科學與軟件工程學院437.6.1GUI的設計原則8．設計應滿足響應需求用戶對于交互式軟件的“響應”（response）會有很高的要求。即使用戶執行的某項操作需要一定時間才能得出結果，也一定要盡快給出響應以表示“接受了用戶操作”，而最終結果可以稍晚給出。9．通過用戶試用發現并改正錯誤用戶界面是否具有“易用性”，要靠實際用戶參與試用才能獲得檢驗。2016秋數據科學與軟件工程學院447.6.2GUI的測試1．GUI測試的困難（1）程序流程不可預知。（2）輸入空間大，測試用例多。（3）傳統方法難以覆蓋。2016秋數據科學與軟件工程學院457.6.2GUI的測試2．GUI測試模型（1）基于有限狀態自動機的測試模型。有限狀態自動機（FiniteStateMachine，FSM）一個具有離散輸入/輸出的數學模型，在任何時刻都能處于某個特定狀態。GUI組件中屬性值的改變使得系統的狀態發生改變，這些狀態就可以描述為FSM模型的狀態集合。狀態轉換圖是FSM的圖形化表示，提出的測試方法適用FSM。但是對于復雜的GUI程序，狀態數量龐大，FSM建模成本很高、維護困難，降低了測試效率。2016秋數據科學與軟件工程學院467.6.2GUI的測試（2）基于事件流圖和交互圖的測試模型。事件流圖（EventFlowGraph，EFG）是一個有向圖，它以GUI的窗口和事件為建模元素，頂點表示事件，邊表示事件之