第6章人機交互界面表示模型與實現重點大學計算機專業系列教材人機交互界面表示模型界面描述語言窗口系統用戶界面管理系統6.1.1行為模型分析人員獲取用戶需求后，結合領域專家的意見和指導，獲取系統中需要完成的任務，對任務的主要因素進行詳細地分析，如任務的層次、發生條件、完成的方法以及它們之間的關系等等。下面就從模型的基本原理、實例、局限性等幾個方面詳細介紹四種常見的行為模型。GOMS（

Goal,Operator,Method,Selection）目標操作方法和選擇行為模型是在交互系統中用來分析用戶復雜性的建模技術，用于建立用戶行為模型。它采用“分而治之”的思想，將一個任務進行多層次的細化，通過目標

(Goal)、操作(Operator)、方法

(Method)以及選擇規則

(Selectionrule)四個元素來描述用戶行為。目標目標就是用戶執行任務最終想要得到的結果。操作操作是任務分析到最底層時的行為，是用戶為了完成任務所必須執行的基本動作。方法方法是描述如何完成目標的過程。一個方法本質上來說是一個內部算法，用來確定子目標序列及完成目標所需要的操作。關閉窗口行為描述實例選擇規則選擇規則是用戶要遵守的判定規則，以確定在特定環境下所使用的方法。當有多個方法可供選擇時，GOMS中并不認為這是一個隨機的選擇，而是盡量預測可能會使用哪個方法。LOTOS（LanguageOfTemporalOrderingSpecification）時序關系說明語言是一種作為國際標準的形式描述語言，它提供了一種通用的形式語義，可保證描述不存在二義性，便于分析和一致性測試理論的研究。其基本思想是用一套形式化和嚴格的表示法來刻畫系統外部可見行為之間的時序關系，系統由一系列進程組成，兩個以上的進程在執行同一個外部可見的行為時會發生交互，進行數據交換、信息傳遞、協調同步等操作。下面給出LOTOS模型中定義的基本算符：

T1|||T2（交替Interleaving）：T1和T2兩個任務相互獨立執行，可按任意順序執行，但永遠不會同步。T1[]T2（選擇Choice）：需要在T1，T2中選擇一個執行，一旦選擇某一個后，必須執行它直到結束，在這中間另一個再無執行機會。任務如何來選擇，并沒有給出一定的形式化描述。T1|[a1,...,an]|T2（同步Synchronization）：任務T1，T2必須在動作（a1,……，an）處保持同步。T1[>T2（禁止Deactivation）：一旦T2任務被執行，T1便無效（不活動）。T1>>T2（允許Enabling）：當T1成功結束后才允許T2執行。中國象棋LOTOS的圖形描述UAN（UserActionNotion）用戶行為標注是一種簡單的符號語言，著眼于用戶和界面兩個交互實體的描述，主要描述用戶的行為序列以及在執行任務時所用的界面。

UAN模型的標識符主要有兩種：用戶動作標識符和條件選擇標識符。用戶動作標識符在UAN的表示模型中有一些常用的已經預定義的符號，用來表示常見的用戶界面的交互動作。如：move_mouse(x,y)移動鼠標至(x,y)；release_button(x,y)在(x,y)位置釋放鼠標按鈕；hightLight(icon)使icon高亮顯示；de_highlight(icon)取消icon的高亮顯示。條件選擇標識符除了表示動作的符號，UAN模型還包含表示條件及選擇的標識符，主要有以下幾種：while(condition)TASK當條件condition為真時，循環執行任務TASK；if(condition)thenTASK如果條件condition滿足，則執行任務TASK；iterationA*orA+表示迭代操作；

waiting

表示等待，可以等待一個條件滿足，也可以等待任務中的一個操作執行。UAN表格表示形式UAN描述的任務“文件拖入垃圾箱”的單通道實例CTT（ConcurrentTaskTreeNotation）任務模型表示法是一種基于圖形符號的，采用層次的樹狀結構來組織并表示任務模型的方法。任務種類和暫態關系的含義及其圖形符號：任務分析是一個以人們的行為為出發點的分析過程，它分析人們完成任務的方法：他們要做的事、要起作用的事和想要知道的事。任務種類：抽象任務（AbstractTask），用戶任務（UserTask），交互任務（InteractionTask），系統任務（ApplicationTask）。暫態關系符號：

Choice：t1[]t2[]…[]tn

Concurrent（IndependentConcurrency）：t1|||t2|||…|||tn帶信息交換的Concurrent：t1|[]|t2|[]|…|[]|tnDisabling：t1[>t2Enabling：t1>>t2>>…>>tn帶信息交換的Enabling：t1[]>>t2[]>>…[]>>tnIndependence：t1|=|t2單用戶任務模型單用戶任務模型在CTT中表示為一棵樹。用戶使用自動取款機的任務模型6.1.2結構模型形式化語言的描述――產生式規則：

ifconditionthenaction或

condition→action或

condition：action一般來說，組成界面描述的產生式規則很多，規則定義的順序并不重要，只要與規則中的條件相匹配，就可以激活相應的動作。產生式規則系統可以是事件引導的，也可以是狀態引導的，或者兩者都有。狀態轉換網絡狀態轉換網絡（STN）的基本思想是定義一個具有一定數量的狀態的轉換機，稱之為有限狀態機（FSM），FSM從外部世界中接收到事件，并能使FSM從一個狀態轉換到另一個狀態。兩種最基本的狀態轉換網絡：狀態轉換網絡（StateDiagrams）擴展狀態轉換網絡（StateCharts）狀態轉換網絡符號簡單狀態轉換網絡帶條件和動作的狀態轉換網絡狀態轉換網絡（StateDiagrams）基于鼠標畫圖工具狀態轉換網擴展狀態轉換網絡（StateCharts）分層的狀態圖實例6.1.3行為模型和結構模型的轉換一般來說行為模型主要對設計起指導作用，在此基礎上，設計人員再進行結構模型（如狀態轉換網絡等）的創建，這個過程很大程度上取決于設計人員的經驗和對行為模型的理解。整體框架轉換算法實例應用最高層目標狀態轉換“運行”目標狀態轉換“走棋”目標狀態轉換6.1.4表現模型表現模型(PM)描述了用戶界面的表現形式，由層次性的交互對象組成。邏輯組織結構面板用戶界面的圖形顯示面板用戶界面的數據結構表示面板用戶界面的繪制面板用戶界面的邏輯組織結構面板內部的事件分發及響應方式控制面板用戶界面交互的核心模塊可以看作是一個事件處理中心，事件處理中心接收并解析用戶動作，然后將結果表現給用戶。事件處理中心對事件的響應的實現面板間的關系

JacobEisenstein創立了兩種新的抽象描述來描述基于面板的用戶界面表現模型。面板關系分類面板種類界面描述語言一般分為兩類：命令式語言(ImperativeLanguage)和陳述式語言(DeclarativeLanguage)。命令式語言要求編程人員明確的指定如何執行任務，陳述性語言要求編程人員只需指定任務要做什么，陳述性語言要比命令式的語言更為抽象。下面介紹幾種常見的陳述性語言。用戶界面標記語言(UIML)語言的基本表示結構擴展界面標記語言(XIML)

XIML由組件(Components)、關系(Relations)和屬性(Attributes)三部分構成。XML語言的基本表示結構

XML用戶界面語言XUL

XUL提供了創建現代圖形界面大多數元素的能力。能夠滿足特定設備的普遍需求，對開發者來說，也已經足夠強大，能夠創建復雜的界面。6.3.1窗口系統結構窗口系統一般有三種結構：在各個應用程序內部實現和管理多任務在操作系統核心集中處理多任務管理多任務的管理可由獨立的管理程序進行管理，應用程序通過調用該管理程序提供的接口來實現對多任務的管理和設備的獨立性操作6.3.2交互事件處理應用程序內部事件處理循環事件處理循環事件注冊方式事件注冊方式處理流程圖6.3.3交互組件開發包一般的窗口系統，輸入和顯示是分離的，許多語言提供了用于開發交互系統的開發軟件包，交互系統開發軟件包在支持窗口管理的基礎上增加了另一種抽象，它把輸入和輸出的行為結合起來。按鈕交互對象行為AWT即抽象窗口工具包（AbstractWindowToolkit），是JavaAPI為Java程序提供的建立圖形用戶界面的基本工具集，AWT可用于JavaApplication和JavaApplet的圖形用戶界面的創建。

AWT類層次結構圖如下：java.awt包中提供了許多圖形操作的類：

Graphics類：提供了許多處理圖形的方法，如繪制線條、各種矩形、各種橢圓、弧線和多邊形等。

Color類：包含了操作顏色的方法和常量。

Font類：包含了操作字體的方法和常量。常用的AWT組件：Frame類文本框和文本區按鈕和標簽面板和畫布布局設計選擇型組件Component類的常用方法Dialog類1、文本框（TextField）單行文本框，可以向其中輸入一行字符串或對其內容進行修改構造方法：publicTextField(Stringtext)publicTextField(intcolumns)publicTextField(Stringtext,intcolumns)

文本區（TextArea）多行文本框，或稱文本區，同樣用于顯示文本字符串，用戶也可以對其中的字符串進行編輯構造方法：publicTextArea(Stringtext)publicTextArea(introws,intcolumns)publicTextArea(Stringtext,intcows,

intcolumns)publicTextArea(Stringtext,intcows,

intcolumns,intscrollbars)

按鈕（Button）用來響應用戶的點擊動作構造方法：publicButton()

publicButton(Stringlabel)

Button類常用方法：

publicStringgetLabel()publicvoidsetLabel(Stringlabel)publicStringgetActionCommand()publicvoidsetActionCommand

(Stringcommand)publicvoidaddActionListener

(ActionListenerlistenerAWT是Java最早出現的圖形界面，但很快就被Swing所取代。Swing才是一種真正的圖形開發。AWT在不同平臺所出現的界面可能有所不同：因為每個OS都有自己的UI組件庫，java調用不同系統的UI。注意AWT為重量級組件，相當消耗資源，且不同系統的組件可能不同。因為這個問題使得AWT開發的軟件難以作到跨平臺。更為要命的是：不同OS的組件庫都存在BUG。必須多種平臺進行測試，并且AWT的組件庫并不豐富。為解決以上問題，SUN和IBM以及NETSCAPE聯合開發出JAVA基礎類包Swing：注意JAVA的基礎類以Swing為核心。注意引用：javax.swing.*;javax表示JAVA的擴展。6.3.4交互框架桌面應用框架下拉菜單示例工具欄示例樹形菜單示例狀態欄示例標簽頁方式工作區示例多層應用架構MultilayeredArchitecture多層架構，一種設計模式，將應用軟件的不同的任務分配到軟件的不同層次中。Web應用軟件的典型結構Web瀏覽器支持動態Web內容技術的引擎（CGI,PHP,JavaServlets）數據庫三層應用架構6.3.5MVC模式和基于Struts的實現

MVC把一個應用的輸入、處理、輸出流程按照模型

(model)、視圖（View）和控制（Controller）的方式進行分離，形成模型層、視圖層、控制層三個層次。MVC模型MVC模式MVC(Model-View-Controller)模式架構模式設計模式將數據與數據的顯示相分離降低開發復雜度可維護性靈活性可重用性模型（Model）應用的信息/數據操作數據的業務規則視圖（View）用戶界面的元素控制器（Controller）具體管理用戶行為（如鍵盤或鼠標事件）與模型的通信過程Web應用軟件中的MVC模式Model存儲在數據庫或XML文件中的數據基于用戶的行為獲取數據并轉換為內容的業務規則ViewHTML頁面Controller收集動態數據并生成HTML頁面中的內容MVC架構模式的流程用戶以某種操作方式與用戶界面交互Controller處理來自用戶界面的輸入事件Controller將用戶的操作通知Model，可能會修改Model數據的狀態視圖調用Model數據生成用戶界面用戶界面等待用戶的進一步交互MVC是一個設計模式，它強制性的使應用程序的輸入、處理和輸出分開。使用MVC應用程序被分成三個核心部件：模型、視圖、控制器。它們各自處理自己的任務。（1）MVC概述模型-視圖-控制器（MVC）是80年代Smalltalk-80中出現的一種軟件設計模式，現已經被廣泛地使用。盡管它源于桌面程序（Desktop），但現在也被廣泛地應用于B/S模式的Web程序開發中。（2）Model-View-Controller是軟件系統的通用體系架構設計基于MVC架構模式的系統時，強調將一個復雜的應用系統分解為模型、視圖和控制器三部分，它們分別對應于應用中的業務邏輯和數據、用戶界面、用戶請求處理和數據顯示的同步。MVC是用來幫助控制應用系統中“變化”的一種設計模式。

MVC(ModelViewController)模型(model)－視圖(view)－控制器(controller)

MVC本來是存在于Desktop程序中的，M是指數據模型，V是指用戶界面，C則是控制器。使用MVC

copyright:AppleInc.的目的是將M和V的實現代碼分離，從而使同一個程序可以使用不同的表現形式。比如一批統計數據你可以分別用柱狀圖、餅圖來表示。C存在的目的則是確保M和V的同步，一旦M改變，V應該同步更新。MVC模式的目的是實現一種動態的程式設計，使后續對程序的修改和擴展簡化，并且使程序某一部分的重復利用成為可能。除此之外，此模式通過對復雜度的簡化，使程序結構更加直觀。軟件系統通過對自身基本部份分離的同時也賦予了各個基本部分應有的功能。（視圖View）-界面設計人員進行圖形界面設計用于與用戶的交互，通常用JSP來實現。（模型Model）-實現系統中的業務邏輯，通常可以用JavaBean或EJB來實現。程序員編寫程序應有的功能（實現算法等等）、數據庫專家進行數據管理和數據庫設計(可以實現具體的功能)。（控制器Controller）-負責轉發請求，對請求進行處理。Controller層是Model與View之間溝通的橋梁，它可以分派用戶的請求并選擇恰當的視圖以用于顯示，同時它也可以解釋用戶的輸入并將它們映射為模型層可執行的操作。Event(事件)導致Controller改變Model或View，或者同時改變兩者。只要Controller改變了Models的數據或者屬性，所有依賴的View都會自動更新。類似的，只要Controller改變了View，View會從潛在的Model中獲取數據來刷新自己。視圖視圖(View)代表用戶交互界面，對于Web應用來說，可以概括為HTML界面，但有可能為XHTML、XML和Applet。隨著應用的復雜性和規模性，界面的處理也變得具有挑戰性。一個應用可能有很多不同的視圖，MVC設計模式對于視圖的處理僅限于視圖上數據的采集和處理，以及用戶的請求，而不包括在視圖上的業務流程的處理。業務流程的處理交予模型(Model)處理。比如一個訂單的視圖只接受來自模型的數據并顯示給用戶，以及將用戶界面的輸入數據和請求傳遞給控制和模型。

模型模型(Model)：就是業務流程/狀態的處理以及業務規則的制定。業務流程的處理過程對其它層來說是黑箱操作，模型接受視圖請求的數據，并返回最終的處理結果。業務模型的設計可以說是MVC最主要的核心。控制控制(Controller)可以理解為從用戶接收請求,將模型與視圖匹配在一起，共同完成用戶的請求。劃分控制層的作用也很明顯，它清楚地告訴你，它就是一個分發器，選擇什么樣的模型，選擇什么樣的視圖，可以完成什么樣的用戶請求。控制層并不做任何的數據處理。例如，用戶點擊一個連接，控制層接受請求后,并不處理業務信息，它只把用戶的信息傳遞給模型，告訴模型做什么，選擇符合要求的視圖返回給用戶。因此，一個模型可能對應多