基于案例的軟件構(gòu)造教程（第2版） 課件 07GUI軟件構(gòu)造

第7章

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