L、物件互動行為塑模～循序圖 UML 2.0的四種互動圖 循序圖 循序圖的建構步驟 循序圖建構實例 循序圖、溝通圖 互動概觀圖、時序圖

Presentation on theme: "L、物件互動行為塑模～循序圖 UML 2.0的四種互動圖 循序圖 循序圖的建構步驟 循序圖建構實例 循序圖、溝通圖 互動概觀圖、時序圖"— Presentation transcript:

1 L、物件互動行為塑模～循序圖 UML 2.0的四種互動圖 循序圖 循序圖的建構步驟 循序圖建構實例 循序圖、溝通圖 互動概觀圖、時序圖
生命線、訊息、操作與操作描述 控制焦點、框架 循序圖的建構步驟 循序圖建構實例

2 靜態觀點vs.動態觀點 靜態觀點 動態觀點 只是呈現物件如何被定義、以及物件與物件的關聯性，並不能透露出物件間是如何互相溝通、傳遞訊息。
主要以類別圖或物件圖來表達物件間之靜態結構 動態觀點 呈現出系統如何對來自使用者的行動/要求做出反應，以及資料如何由儲存的地方移動到使用者的畫面。

3 對應靜態、動態觀點 一個使用個案，應要有一個與之對應的類別圖 一個使用個案，也應有一個與之對應的互動圖 以表達該個案內，物件間的靜態結構關係
以表達該個案內，物件間的動態互動行為 主要根據使用個案之情節描述、表單、活動圖或類別圖，以及與使用者的互動，來進行建構

4 物件互動行為塑模 主要針對使用者介面(User Interface, UI)與應用程式核心(Application Core, AC, 簡稱應用程式）兩部分之物件間與物件內元件的行為進行塑模。 以互動圖來表達物件間的互動行為 以狀態圖來表達物件內元件的狀態、轉換與控制

5 1. UML 2.0的四種互動圖 (1) 循序圖（Sequence Diagram）
描述一個使用個案執行過程中，參與該個案的物件、以及物件間傳遞訊息的先後順序 強調訊息傳遞的時間性

6 循序圖 實例

7 循序圖實例：病患約診

8 UML 2.0的四種互動圖 (2) 溝通圖（Communication Diagram）
描述一個使用個案執行過程中，有哪些物件必須參與，透過合作，傳遞訊息，以完成一個使用個案 強調合作物件間的結構 在UML 1.0 時稱為合作圖

9 溝通圖實例

10 UML 2.0的四種互動圖 (3) 互動概觀圖（Interaction Overview Diagram） 是一種活動圖的變形
用以描述高層次的控制流程及它們之間的互動

11 互動概觀圖實例

12 UML 2.0的四種互動圖 (4) 時序圖（Timing Diagram）
當主要探討重點是有關於時間時，時序圖將焦點放在生命線或者生命線之間在時間軸上狀態的改變。

13 時序圖實例

14 物件互動行為塑模的圖形選擇 四種互動圖中，以循序圖及溝通圖最為重要 溝通圖與循序圖在語意上是相同的，且可互相轉換，轉換的過程中不會有資訊遺失
為避免系統分析與設計工作上的重複，且許多UML工具可讓循序圖與溝通圖直接轉換，所以繪製互動圖時，只需要畫其中一種圖形即可 本課程主要介紹：循序圖

15 2. 循序圖 描述一個使用個案中參與物件及物件間的互動行為 強調以時間發生的先後順序表達物件間的訊息傳遞與處理程序

16 2.1 生命線(Lifeline) 在互動圖中，我們稱參與互動的物件為生命線 以矩形表示，在下方加上與物件垂直的虛線
矩形中應標示該物件名稱與其類別名稱(Object: Class)，而物件的名稱可省略。

17 實作觀點，循序圖的三種物件 介面物件(Interface Object)：也稱邊界物件，是行為者和系統交談的媒介。
控制物件(Control Object)：包含許多應用系統邏輯（如企業規則），也負責協調與管理其他物件。 實體物件(Entity Object)：常以企業的領域術語命名，用來表示使用個案完成後仍需要儲存在資料庫中的資料，但某些實體物件也可以是暫存的資料，例如搜尋結果。

18 2.2 訊息(Message) 在訊息傳遞的表達上，採用一條帶箭頭的直線，表示物件obj1傳送一個 訊息給物件obj2

19 呼叫與回傳訊息 呼叫訊息 回傳訊息：以水平虛線箭頭表示
若使用個案的情節是以事件列描述，也就是採用「主詞＋動詞＋受詞」的方式，且其中的動詞為操作，則該操作的輸入或輸出就可能是訊息。 水平實線、實心三角形箭頭表示同步訊息；帶有箭頭的直線為非同步訊息 回傳訊息：以水平虛線箭頭表示

20 同步與非同步訊息 同步訊息（Synchronous Message） 非同步訊息（Asynchronous Message）
當該訊息一旦被啟動，只有等到啟動生命線結束之後，訊息才會回傳給呼叫者 非同步訊息（Asynchronous Message） 一旦啟動之後，會立刻返回呼叫者，呼叫者會繼續執行接下來該執行的動作而不會等待非同步訊息的回傳。 例如Web 2.0應用網站，常採AJAX技術 下頁：登入的訊息在Javascript中被啟動，執行一個非同步的動作send()將使用者的資訊傳送到伺服器端去驗證 在等待伺服器驗證的同時，使用者還是可以繼續其動作而不會有影響（例如：繼續瀏覽畫面等） 一旦伺服器處理完畢，回傳到客戶端，客戶端的Javascript回呼函數會接著執行接下來所必須的工作（例如改變使用者的畫面變成會員的畫面）。

21 AJAX非同步訊息實例

22 訊息參數 當一個物件傳遞訊息給另個一物件時，訊息也可以一起傳送參數
下圖顯示john這個學生送了「註冊課程」訊息給系統，及他想要註冊的課程cour (類別型態為Course) 參數名稱：型態

23 訊息回傳值(Return Value) 如果一個訊息有回傳值，也可以將它在循序圖中表示出來
以下圖為例，當註冊課程成功時，我們希望這個訊息能夠傳回一個整數，存放在名為result的變數中：

24 2.3 操作(Operation)與操作描述 操作 操作描述
指某一物件接到另一物件送達的訊息時，接收端物件為了執行發送端物件送來之要求，所提供因應的處理方法。 循序圖的操作描述需與類別圖的操作相對應 操作描述 操作的細部說明，從系統的行為觀點，描述系統動作與邏輯程序及所需的輸入與輸出

25 循序圖範例 & 操作描述 操作描述 … 顯示細部說明() 執行時機：客戶瀏覽便當型錄時點選【顯示細部說明】超連結。 執行事項：
系統依客戶點選的便當編號至資料庫中搜尋該便當資料。 將此便當的所有欄位資料﹝便當編號、便當名稱、單價、餐廳﹞顯示在新網頁，同時出現【瀏覽便當型錄】按鈕。

26 2.4 控制焦點(Focus of Control)
代表系統在執行過程中，某物件在某個時間點上因收到訊息而被啟動，並獲得控制權。 用長且細的矩形（長條圖）表示，且與該物件的生命線重疊。

27 2.5 框架(Frame) 把原本單一線式訊息，擴充成由一連串線式訊息組成的區段
以表達某一區段範圍內一連串相關訊息與操作組合的控制流程、輸入與輸出等 名稱 框架內容（組合區段）

28 常用的框架1：多選一(Alternative)
If 前提為真，執行運算域A；Else 執行運算域B

29 常用的框架2：自由選擇(Option) 表達可能發生的訊息序列，組合區段用opt命名
其概念如多選一的「If …」(如右圖的選擇顯示明細)，但沒有「Else …」的部分

30 常用的框架3：迴圈(Loop) 用loop命名 當條件True(如右圖的繼續訂購)，運算域中的訊息會持續被執行，直到條件False為止

31 常用的框架4：終止(Break) 用「break」命名 若條件為False，運算域中的訊息被跳過
當條件True時，運算域中的訊息才會被執行，但當運算域中的訊息被執行完畢(例如一旦放入光碟)，該區段以下所有訊息傳遞與操作將被終止

32 常用的框架5：平行(Parallel) 用par命名 每個運算域包含多個訊息傳遞，所有運算域的訊息傳遞可同時執行
且所有訊息傳遞執行完畢之後，該區段的工作才算完成。

33 常用的框架6：參考(Referencing)
被參考的循序圖名稱與參數標示在內容區 參考框架可提升循序圖之重複使用性

34 上頁被參考的循序圖

35 呼應p.8的互動概觀圖 描述高層次的控制流程及它們之間的互動 右圖告訴讀者，這個部分請參考其他相關的互動圖以了解細部內容以及互動流程

36 3. 循序圖的建構步驟 可先從類別圖或使用個案的情節描述中，確認物件、物件間傳遞的訊息及操作，再進一步繪製循序圖。 確認物件 操作描述
描述訊息 繪製循序圖

37 3.1 確認物件 可直接沿用類別圖上類別之物件 將各物件繪製成循序圖中的生命線 這些生命線可依出現的順序進行排列
兩個生命線間，表達訊息的水平線距離愈短愈好 較佳

38 3.2 操作描述 通常放在循序圖的最左側，描述內容主要來自使用個案的情節描述 可僅作功能性的描述

39 3.3 描述訊息 描述物件間訊息傳遞的動作 當一個物件送出一訊息給另一個物件時，由發送端畫出一條往接收端之水平線段箭頭，水平線上須標示訊息名稱及可能的參數 描述訊息的相關原則如下： 盡可能將每一訊息的參數數目減到最少，有利於再用。 相同或類似的訊息處理，其命名應相同，如此可瞭解物件間相似的訊息傳遞。 命名時，應能從名稱上反映出物件間訊息傳遞的作用、訊息的內容或其意義。

40 3.4 繪製循序圖 將生命線依物件間訊息傳遞或接收發生的時間順序，由左至右安排。 在生命線上標示物件間傳遞或接收之相關訊息與操作。
接著依每一生命線執行某動作之時段畫出控制焦點。 繪製UI(使用者介面)循序圖與AC(應用程式)循序圖時，尚需檢視兩者間訊息傳遞與操作的一致性與完整性。

41 4. 循序圖建構實例 以課本西子灣線上訂購系統「新增訂購項目」使用個案為例 介紹如何利用UI 循序圖以及AC 循序圖進行物件互動行為塑模

42 「新增訂購項目」使用個案描述 西子灣文化事業股份有限公司 使用個案名稱：新增訂購項目 行為者：客戶
目標：使客戶能在線上瀏覽書籍產品並進行訂購 前提：客戶已連線至網站 結束狀態：客戶讀取已置入書籍訂購項目之購物車內容 一系列事件： 正常程序-- 1.客戶透過瀏覽器上網，至西子灣線上訂購系統後，瀏覽書籍型錄。 2.客戶如欲得知一書籍之詳細資料，可查看其細部說明（如表10 及10-3b）。 3.客戶若有意購買書籍，可點選該書籍產品將之置入購物車內，並設定訂購數量（未設定時預設值為1）（客戶可一次訂購一至多項書籍產品，訂購數量不加以限制）。 4.系統自動計算並顯示購物車內的訂購金額 ‧計算單項產品金額 = 單價 × 數量 ‧計算訂購總金額：Σ（單項產品金額） 5. 客戶讀取已置入書籍訂購項目之購物車內容 例外狀況-- 客戶不慎將非欲訂購之書籍項目置入購物車內 客戶可於購物車內，刪除或修改錯誤的訂購項目與數量

43 「新增訂購項目」使用個案之活動圖

44 4.1 使用者介面(UI)循序圖 步驟1：確認物件 分析「新增訂購項目」使用個案中的一系列事件及活動圖，從其中的相關名詞找出介面物件。
控制物件亦可由一系列事件及活動圖之活動找出 例如可由「顯示細部說明」活動找出「顯示」控制物件 UI 循序圖中，控制物件與實體物件可濃縮成一個系統「應用程式核心(Application Core, AC)」物件，此AC 物件與介面物件間，會有訊息傳遞與操作執行

45 使用者介面(UI)循序圖 步驟2：確認物件間的訊息與操作 可由新增訂購項目使用個案之一系列事件或活動圖之活動進行分析，表示成下表：

46 使用者介面(UI)循序圖 步驟3：繪製UI 循序圖

47 步驟3：繪製UI 循序圖(Cont.)

48 4.2 應用程式(AC)循序圖 步驟1：確認物件 分析「新增訂購項目」使用個案中的一系列事件及活動圖，從其中的相關名詞找出實體物件。
例如註記1.1與1.2的系統輸出資訊，可得知需有一「書籍資料」實體物件於資料庫中記錄書籍之詳細資訊。。 於AC 循序圖中，可將建構UI 循序圖時找出之介面物件濃縮成一個「使用者介面(User Interface, UI)」物件，此UI 物件與控制和實體物件間會有訊息傳遞與操作執行

49 應用程式(AC)循序圖 步驟2：確認物件間的訊息與操作 可由新增訂購項目使用個案之一系列事件或活動圖、UI循序圖進行分析，表示成下表：

50 應用程式(AC) 循序圖 步驟3：繪製AC 循序圖 … 操作描述（部分） 瀏覽書籍型錄() 執行時機：客戶以瀏覽器瀏覽西子
　　　　　灣線上訂購系統，即顯 　　　　　示書籍型錄UI。 執行事項：系統至資料庫中搜尋書 　　　　　籍資料。 … 操作描述（部分）

51 步驟3：繪製AC 循序圖(Cont.)