第14章 系統元件與結構塑模

本章大綱 學習目標 14.1 導論 14.2 元件圖 14.3 部署圖 14.4 結論

學習目標 詳讀本章，你至少能瞭解： 物件導向系統分析與設計中之系統元件與結構塑模工作。 何謂元件圖、部署圖及其用途。 如何建構元件圖、部署圖及其建構準則。 如何以元件圖和部署圖進行系統元件與結構塑模。 

14.1 導論 系統元件與結構塑模主要是以元件圖來表達系統中，一群元件間的靜態結構關係，而以部署圖來表達系統中軟硬體元件間的實體關係。 本章將分別介紹元件圖與部署圖之元件，再介紹其塑模原則。

14.2 元件圖(1/2) 元件圖(Component Diagram)用以說明系統中各軟體元件間之配置結構與關係。 系統元件與結構塑模主要是以元件圖視覺化地表達系統中實體元件間的靜態結構關係，以及說明其建構細節。

14.2 元件圖(2/2) 圖14-1中共有五個元件：index.htm、books.htm、purchase.exe、cart.dll 及product.dll。 index.htm 及books.htm 皆為網頁元件，兩者間有超連結 關係。 purchase.exe 是一個共通閘道介面(CGI)執行檔元件，提供books.htm 所呼叫的功能。 cart.dll 及product.dll 是動態連結函式庫(DLL)元件，提供purchase.exe 執行時所需之動態連結函式。 圖14-1 元件圖範例

14.2.1 元件圖之元件(1/10) 元件圖主要包括元件、介面、連接埠與關係。

14.2.1 元件圖之元件(2/10)

14.2.1 元件圖之元件(3/10) 元件 元件(Component)是系統的實體模組，也是系統中可被替換的部分，適合提供給一群介面做適當的實現(實作)。 UML 1.x版之元件是以一個矩形貼上兩個小標籤(矩形)表示，且一元件有唯一的名稱置於矩形內部，也可在名稱上方加上該元件之Stereotype。 UML 2.x版之元件是在矩形內部之右上角標示UML 1.x版元件之縮小圖。 圖14-2a 元件範例

14.2.1 元件圖之元件(4/10) 元件之名稱有單純的名稱或延伸型的路徑名稱 必要時也可以加上一些標籤值或用額外的區隔來表達其詳細資料，顯示元件提供或要求的介面。 圖14-2b 單純的與延伸型的元件範例

14.2.1 元件圖之元件(5/10) 三種主要元件： 部署元件(Deployment Component) 是形成可執行系統所需要的元件，這些元件通常包括動態連結函式庫與執行檔，即可直接或間接執行的檔案元件，例如EXE 或DLL。 工作產品元件(Work Product Component) 可用以產生部署元件，為發展可執行系統時的產物，包括原始碼檔與資料檔等元件。 執行元件(Execution Component) 是一種系統執行的順序，為系統執行時所產生的一些元件。

14.2.1 元件圖之元件(6/10) 介面 介面(Interface)是許多操作（不包含實作）的集合，用來說明類別或元件所提供的服務，而其他類別或元件可以透過介面來實作這個類別或元件。 介面常以一小空心圓表示（稱為簡單型式），當然若介面是一個類別，也可以直接以類別符號表達（稱為延伸型式）。 介面是元件間的膠著劑，能在不必重建或修改系統的前提下，讓系統加入新元件或替換舊元件，並將相關元件連結在一起，以維持系統正常運作。

14.2.1 元件圖之元件(7/10) 圖14-3 有purchase.java 與products.java 兩個元件。purchase.java 程式元件使用一個PInterface 介面來實作products.java 程式元件。 上層是以簡單型式表示介面，下層則以延伸型式表示之。 圖14-3 介面範例

14.2.1 元件圖之元件(8/10) 左圖之元件左端有一個完整圓周的介面符號，代表元件「提供」的介面，而右端只有半個圓周的介面符號代表元件「要求」的介面，介面的名稱應標示在介面符號的附近。 左右兩圖之表達方式不同，但都提供了相同的資訊，即broker.java 元件提供customer介面，並要求product 介面。 圖14-3b 介面範例二

14.2.1 元件圖之元件(9/10) 關係 關係是描述元件與元件，或元件與介面間的結合關係，關係之意義與表達符號均與類別圖相同。

14.2.1 元件圖之元件(10/10) 元件間提供或要求之介面，也可由相依關係取代。 圖14-4左邊之元件圖為元件Product 提供一介面OrderableItem，即元件Order 所要求的介面。 此類關係可簡化如右邊之元件圖，以相依關係表達元件Order 會使用到元件Product 所提供之服務。 圖14-4 元件間相依關係

14.2.2 元件圖之塑模原則(1/18) 建構元件圖請參考下列原則： 從使用個案的情節描述、活動圖或循序圖中找出類別的溝通方式，並參考類別圖之關聯，可判斷各元件間之關係，元件圖中常見的是相依關係。 依UML 之可擴充性機制，也可自訂各元件之Stereotype。 使用工具軟體來管理元件及各元件間的關係，應是較佳且有效率的方法。 應避免元件間有循環的相依關係，如ABCA。 有繼承關係的元件，可合併成一個元件。

14.2.2 元件圖之塑模原則(2/18) Booch et al.(2005)依不同元件，分別提出八種元件圖之塑模原則： 塑模執行檔與函式庫 塑模資料表、檔案與文件 塑模應用程式介面 塑模原始碼 塑模系統的原始碼 塑模執行檔版本 塑模實體資料庫 塑模可調適性系統

14.2.2 元件圖之塑模原則(3/18) 塑模執行檔與函式庫 找出實體系統之分割。 用UML 所定義的標準元素將任一執行檔與函式庫塑模成元件。 用介面來塑模相關元件間的相依與實現化關係。 塑模執行檔、函式庫與介面間之關係，例如常見的相依關係。

14.2.2 元件圖之塑模原則(4/18) 圖14-5a 以元件圖塑模執行檔與函式庫之範例 圖14-5a有personnel.exe、training.dll、salary.dll、retirement.dll 及pension.dll 五個元件。 personnel.exe 是執行檔元件，其他四個均是動態函式庫元件。 training.dll、salary.dll 與retirement.dll 三個函式庫元件提供personnel.exe 在執行時所需動態連結的函式。 而pension.dll 則提供retirement.dll 所需動態連結的函式。 圖14-5a 以元件圖塑模執行檔與函式庫之範例

14.2.2 元件圖之塑模原則(5/18) 塑模資料表、檔案與文件 找出系統建置時之輔助元素（例如企業用資料表等文件）。 用UML 所定義的標準元素，將上述之元素塑模成元件。 塑模輔助元件與其他執行檔、函式庫與介面間之關係，例如常見的相依關係。

14.2.2 元件圖之塑模原則(6/18) 圖14-5b 以元件圖塑模 資料表、檔案與文件之範例 圖14-5b中personnel.exe 是執行檔元件。 personnel.ini 是檔案元件，提供personnel.exe 執行時之起始設定值。 personnel.hlp 是文件元件，提供personnel.exe 執行時之線上輔助說明。 salary.tbl 是資料表元件，提供salary.dll 中函式所需的資料。 圖14-5b 以元件圖塑模 資料表、檔案與文件之範例

14.2.2 元件圖之塑模原則(7/18) 塑模應用程式介面 找出實體系統之程式界線 ，將之塑模為介面，並找出其屬性與操作。 僅展示介面的重要特性，例如可視覺化的部分，而將其他特性留在介面的說明中描述。 塑模每個API 的實現化關係。

14.2.2 元件圖之塑模原則(8/18) 圖14-5c 表示UseButtom.exe 執行元件提供IApplet、IColor、IButton、IEvent 四個API 供其他元件使用。 圖14-5c 以元件圖塑模API 之範例

14.2.2 元件圖之塑模原則(9/18) 塑模原始碼 根據開發工具的限制，塑模用於儲存邏輯元素細節的檔案，以及檔案間的相依關係。 上述檔案中可包括標籤值，例如版本、作者及進出入資訊等。 盡可能以開發工具來管理上述檔案間之關係。

14.2.2 元件圖之塑模原則(10/18) 圖14-5d 描述四個以ASP 撰寫的程式元件product.asp、purchase.asp、orders.asp 及confirm.asp與fobjvbs.inc 程式碼間之相依關係，圖中也表達各元件之版本。 圖14-5d 以元件圖塑模原始碼之範例

14.2.2 元件圖之塑模原則(11/18) 塑模系統的原始碼 找出一群有關的原始碼檔案，將其塑造成檔案構造型的元件。 對較大型之系統，用套件 來展示原始碼檔案之群集。 清楚表達原始碼檔案的相關資訊，例如作者、最後更新日期及版本等。 在上述各檔案間用相依關係來塑模。

14.2.2 元件圖之塑模原則(12/18) 圖14-5e 描述一個以C++語言撰寫的財會系統。 其中tax.h 共有1.0、1.5及2.0三個不同的版本，而ap.cpp 檔會用到(相依關係)tax.h {version=2.0}及ap.h。 account.cpp 則會用到ap.cpp。 ar.cpp 會用到tax.h {version=2.0} 。 圖14-5e 以元件圖塑模系統 原始碼之範例

14.2.2 元件圖之塑模原則(13/18) 塑模執行檔版本 找出要塑模的元件群，包括一節點中之元件或跨節點之元件群（如執行檔、函式庫、檔案及文件等）。 為元件群中之每一元件塑造其構造型。 找出各相關元件間的關係，包含提供服務元件與接受服務元件間之介面。

14.2.2 元件圖之塑模原則(14/18) 圖14-5f中orders.dll 檔提供dbDriver、selfCheck 兩個介面，以供其他元件使用。 cart.dll 檔使用dbDriver 介面與ado.dll 檔。 圖14-5f 以元件圖塑模執行檔版本之範例

14.2.2 元件圖之塑模原則(15/18) 塑模實體資料庫 找出表達邏輯資料庫綱目(Logical Database Schema)中之類別。 將這些類別轉換成資料表。 為每一元件塑造其構造型，如資料表之元件圖。 盡可能使用工具將邏輯設計轉換成實體設計。

14.2.2 元件圖之塑模原則(16/18) 圖14-5g 表示人力資源資料庫元件是由員工、獎懲、薪資、教育訓練及出勤考核五個資料表元件所組成。 圖14-5f 以元件圖塑模執行檔版本之範例

14.2.2 元件圖之塑模原則(17/18) 塑模可調適性系統 找出元件在節點間移動的實體分配，例如兩資料庫系統做備份的關係。 如果要塑模引發該元件移動的事件，則可用互動圖（循序圖、溝通圖等）表達元件案例。

14.2.2 元件圖之塑模原則(18/18) 下圖表示伺服器B 上的人力資源資料庫被備份至伺服器A 上的人力資源資料庫內。 圖14-5h 以元件圖塑模可調適性系統之範例

14.2.3 元件圖之建構案例(1/5) 找出元件與關係 由西子灣線上訂購系統案例的類別圖及類別匯總表可知，有顯示與訂購兩個控制類別可使用執行檔來完成其功能。可以前述「塑模執行檔與函式庫」之原則，分別將其塑模成元件，此外也需要一個使用者介面模組及資料庫元件。 其中，依顯示控制類別之操作描述可知該元件之功能「計算金額」是從資料庫中讀取客戶選購之書籍編號的書籍資料後，將書籍之售價乘以購物車之訂購數量，並重新顯示計算金額後之購物車介面。 其他元件依各類別之操作描述得知其應有之功能後，摘述如表14-2。

表14-2 西子灣線上訂購系統案例之元件（部分範例）

14.2.3 元件圖之建構案例(2/5) 上述元件中，客戶可透過「使用者介面模組」互動網頁程式（以PHP 撰寫）執行網路線上訂購作業。 過程中，「使用者介面模組」須透過Display 及Order 二個介面完成表14-2所列之功能，也就是，「顯示物件類別模組」與「訂購物件類別模組」分別藉由Display 介面及Order 介面來提供服務。 此外，二個ActiveX-DLL：「顯示物件類別模組」及「訂購物件類別模組」皆可存取後端資料庫。

14.2.3 元件圖之建構案例(3/5) 繪製元件圖 依據上述元件描述可知，顯示與訂購二個元件屬於執行檔，且皆可存取後端資料庫，因此這二個執行檔與資料庫間有相依關係。 此外，使用者介面須透過Display 及Order 二個介面完成訂購功能，所以使用者介面與這二個介面間也分別有相依關係。 西子灣線上訂購系統之元件圖可表達如圖14-6。

14.2.3 元件圖之建構案例(4/5) 繪製元件圖 依據上述元件描述可知，顯示與訂購二個元件屬於執行檔，且皆可存取後端資料庫，因此這二個執行檔與資料庫間有相依關係。 此外，使用者介面須透過Display 及Order 二個介面完成訂購功能，所以使用者介面與這二個介面間也分別有相依關係。 西子灣線上訂購系統之元件圖可表達如圖14-6。

14.2.3 元件圖之建構案例(5/5) 圖14-6 西子灣線上訂購系統元件圖

14.3 部署圖(1/2) 部署圖(Deployment Diagram)用來說明系統各軟硬體（例如處理器、處理元件）元件的配置與關聯，或是硬體及網路此類基礎建設之拓撲，例如系統是由哪些硬體所組成，硬體上面安裝了哪些軟體，而硬體間使用了哪些中介軟體來做連結。 系統元件與結構塑模主要是以部署圖視覺化的表達系統中，一群實體節點與實體節點間的靜態結構關係及說明其建構細節。

14.3 部署圖(2/2) 圖14-7 描述某個系統的運作環境是以區域網路連接六部伺服器主機（Proxy、DHCP、檔案、E-mail、資料庫及網站伺服器）。 這個區域網路與外界Internet 的連結方式是藉由Proxy 伺服器透過DSU/CSU 節點連接上Internet。 圖14-7 部署圖範例

14.3.1 部署圖之元件(1/10) 部署圖有產出、節點與連接三元件，如下表所示。

14.3.1 部署圖之元件(2/10) 產出 產出(Artifacts)代表現實生活中具體的資訊，為軟體使用或執行的實體檔案。 例如原始碼檔（.java 或.cpp 檔案）、可執行檔（.exe 或.jar 檔案）、程式庫檔（.dlls檔案）等。 其表達方式為一矩形，其右上表有一折角之文件圖示，並在其名稱上方標示構造型 <<artifact>>。

14.3.1 部署圖之元件(3/10) 節點 節點(Nodes)代表著一種計算資源，也可說是一個硬體。 例如，可以是一個單純的設備或感應器，也可能是一部大型主機等。因此，一台Web Server、一組硬碟陣列、一台電腦或一台印表機等皆可設為一個節點。 節點是以立方體圖形來表示，它必須有一個唯一的名稱以示區別。

14.3.1 部署圖之元件(4/10) 節點之名稱是以字串表示，可由文字加上數字與標點符號等組成，名稱若加上底線則表示為節點之實例(Instance)。 節點之名稱有單純的名稱或延伸型的路徑名稱，路徑名稱是節點名稱前再加上該節點所在之套件名稱，且兩者間以雙冒號(::)隔開。 基本上，節點僅表達其名稱，但必要時也可以加上一些標籤值或用額外的區塊來表達其詳細資料。 圖14-8a 單純的與延伸型的節點範例

14.3.1 部署圖之元件(5/10) 有三種方式可用以表示產出被部署在節點上： 直接將產出畫入節點中，此方式可顯示產出間的相依關係，如圖14-8b所示。 圖14-8b 部署產出之範例一

14.3.1 部署圖之元件(6/10) 將產出畫在節點外，並以部署關係連結產出與節點，如圖14-8c所示。 圖14-8c 部署產出之範例二

14.3.1 部署圖之元件(7/10) 簡單的將產出以條列式列在節點之中，此方式可節省繪圖空間，如圖14-8d 所示。

14.3.1 部署圖之元件(8/10) 連接 連接(Connections)表示節點、元件或產出間的溝通方式或路徑，也表示其間之關係。 節點與元件間可用相依關係，符號表達方式與類別圖相同，如圖14-9a。 節點與節點間最常用的連接是關聯關係，關聯關係表達節點間的實體連接，以實線連接兩節點來表達，如圖14-9b。 節點與產出間可用部署關係來表達，表達方式為虛線加上開放式箭頭，並於其上標示 <<deploy>>，如圖14-8c。

14.3.1 部署圖之元件(9/10) 圖14-9a中有purchase節點及order.asp 與cart.dll 元件。

14.3.1 部署圖之元件(10/10) 如圖14-9b ，一台應用程式伺服器與一組硬碟陣列之間就有關聯關係，其符號表達方式為一實線，並於實線上方以雙尖括號標示連結的方式。 圖14-9b 節點間之關聯關係範例

14.3.2 部署圖之塑模原則(1/13) 建構部署圖可參考下列原則： 先規劃要塑模的系統範圍，例如一個應用程式或整個組織裡的所有系統。 將軟體部署在節點之中，並描述其開發、安裝、操作之重要資訊。 確認節點所在的平台環境與其連結方式，必要時也可考慮系統之架構，例如三層式架構。 考慮基礎建設中的技術問題，例如防火牆的建置、網路拓撲方式、系統連接方式為Intranet 或Internet 等。

14.3.2 部署圖之塑模原則(2/13) Booch et al.(2005)依不同類型系統之結構，分別提出五種部署圖之塑模原則： 塑模處理器與設備 塑模元件的分配 塑模崁入式系統 塑模主從式架構系統 塑模完全分散式架構之系統

14.3.2 部署圖之塑模原則(3/13) 塑模處理器與設備 從系統的部署觀點，找出與電腦有關的元素，並將之塑模成節點。 若這些元素是表達一般性的處理器與設備，則將其定義成處理器與設備。若這些元素是領域中之部分詞彙，則將每一個元素用一個適當的圖像(Icon)定義之。 如同類別塑模一樣，對每一節點考慮其屬性與操作。

14.3.2 部署圖之塑模原則(4/13) 圖14-10a 處理器與設備之部署圖範例

14.3.2 部署圖之塑模原則(5/13) 塑模元件的分佈 將每一個系統中之重要元件分配給一個節點。 對每一個元件考慮其重複的位置，因為相同種類的元件（例如特定的執行檔與函式庫）有可能被同時放在多個節點上。 考量下列三種方式以表達部署圖之配置： 不要詳細描述配置，可將細節部分放在節點的說明上。 用相依關係連接節點及其部署之元件。 以區塊(Compartment)來列出部署在節點中之元件。

14.3.2 部署圖之塑模原則(6/13) 圖14-10b 表示用戶端電腦群與應用程式伺服器的連結是透過10BASE-T 的乙太網路，該節點上會執行purchase.exe 應用程式。 主控台與應用程式伺服器的連結是透過RS-232的序列線，該節點上會執行admin.exe 及monitor.exe 兩個應用程式。

14.3.2 部署圖之塑模原則(7/13) 應用程式伺服器與磁碟陣列的連結是透過BUS 匯流排，該節點的CPU 為Intel P3-1GHz、主記憶體512MB，其上會執行sqladmin.exe 及top.exe 兩個應用程式。 圖14-10b 元件分佈之部署圖範例

14.3.2 部署圖之塑模原則(8/13) 塑模嵌入式系統 找出系統的設備(Device)及節點。 對每一設備塑造一個Stereotype圖像，予以視覺上的區別。 找出處理器及設備的關係。 必要時對某一精密設備再建構一個更詳細的部署圖。

14.3.2 部署圖之塑模原則(9/13) 圖14-10c 表示一台個人電腦是由九個設備所組成：主機、顯示器、鍵盤、CD-ROM、影像顯示卡、硬式磁碟機、滑鼠、CCD 攝影機和網路卡，CCD 攝影機與個人電腦之間是使用USB 介面連接。 圖14-10c 嵌入式系統之部署圖範例

14.3.2 部署圖之塑模原則(10/13) 塑模主從式架構系統 找出伺服器端及客戶端節點。 將與系統行為有密切關係的設備突顯出來。 對每一處理器及設備作一構造型圖像，以利視覺上區別。 塑模部署圖中之節點類型。 用套件的觀念說明節點之邏輯群集。

14.3.2 部署圖之塑模原則(11/13) 圖14-10d 表示系統為主從式架構，客戶端是藉由資訊站及主控台向伺服器端提出服務要求，提供服務的伺服器端是由二至多台(2..*)Proxy 伺服器及四至多台(4..*)一般用途伺服器等設備所組成，各伺服器上執行的服務程式如節點上的英文敘述。 圖14-10d 主從式架構系統之部署圖範例

14.3.2 部署圖之塑模原則(12/13) 塑模完全分散式架構系統 與上述塑模較單純的主從式架構系統一樣，須先找出系統的處理器及設備。 如果要對系統的執行績效或網路改變對系統的影響做評估，則須將通訊設備描述到某一個可供評估的詳細程度。 用套件的觀念說明節點之邏輯群集。 將這些處理器及設備的網路型態用部署圖繪出。 假如需瞭解系統之動態情況，可就想要瞭解的行為以使用個案圖表達，再以互動圖擴充描述之。

14.3.2 部署圖之塑模原則(13/13) 圖14-10e 完全分散式架構之系統部署圖範例

14.3.3 部署圖之建構案例(1/4) 找出節點 分析西子灣線上訂購系統案例元件圖之元件，可將元件視為一個處理器，並分配給一個節點，但若兩個元件間有較多訊息傳遞，則不適合分置在兩個處理器上。 本案例為三層式架構，因此依前述「塑模主層式架構系統」之原則，找出伺服器端有：書籍型錄、購物車、確認訂單與使用者介面模組放在同一Web Server 的處理器上，而資料庫放在另一Database Server 的處理器上。 因本系統之使用者利用瀏覽器從遠端經由網際網路來執行程式，所以本案例需增加客戶端處理器，也就是新增一個節點以表示使用者所在之瀏覽器與硬體。

14.3.3 部署圖之建構案例(2/4) 本案例系統之設計屬三層式主從式架構之Web-based 系統： 第一層是客戶端的瀏覽器及其硬體 第二層伺服器端是網站伺服器(例如MS-IIS5) 第三層伺服端是資料庫伺服器(例如MS-SQL Server)

14.3.3 部署圖之建構案例(3/4) 客戶端瀏覽器經由Internet 以TCP/IP 通訊協定連上網站伺服器，網站伺服器與資料庫伺服器間以100BASE-T 網路連接，使用的通訊協定也是TCP/IP，屬於公司內部網路(Intranet)。

14.3.3 部署圖之建構案例(4/4) 找出連接 由於Client 與Web Server 及Web Server 與Database Server 間均是透過TCP/IP 網路協定溝通，因此西子灣線上訂購系統之部署圖可表達如圖14-11。 圖14-11 西子灣線上訂購系統部署圖

14.4 結論 系統元件與結構塑模主要是以元件圖與部署圖兩種實體圖表達系統元件與軟硬體間之實體關係。 其中元件圖表達系統中一群元件間的靜態結構關係，發展元件的一個重要概念為重用已建立之元件。 而部署圖表達系統中軟硬體元件間的實體關係。