國立中山大學企業管理學系研究所碩士論文MDA：微軟.NET ...

⊕

國立中山大學企業管理學系研究所

碩士論文

Department of Business Management

National Sun Yat-sen University

Master Thesis

MDA：微軟.NET Framework 開發平台使用者介面

轉換方法論之研究

MDA: A Methodology of User Interface Transformation

for Microsoft .NET Framework Platform

研究生：盧慧雪

Hui-Hsueh Lu

指導教授：吳仁和、梁慧玫博士

Dr. Jen-Her Wu, Dr. Huei-Mei Liang

中華民國 100 年 6 月

June 2011

ii

中文摘要

圖形化使用者介面已成為當今網頁式系統的主流，而物件導向技術及統一塑

模語言圖形逐漸成為網頁式系統其平台獨立模式（PIM）塑模的主要工具。基於

模式驅動架構（MDA）方法，一旦建構出平台獨立模式，能將其結果轉換成特

定平台模式（PSM）和程式碼樣版。然而，目前尚無從平台獨立模式轉換至微

軟.NET 平台其細部規則之相關研究。因此，本研究提出一套方法論，針對網頁

式系統，提供從平台獨立模式轉換至微軟.NET 平台的準則。研究方法使用的是

設計科學研究法。可用性評估是利用實際的網頁式系統來證明此方法論的可應用

性。評估結果顯示使用本研究所提出之方法，系統開發人員可有效率地將網頁式

系統其平台獨立模式，轉換為微軟.NET 平台及其程式碼樣版。

關鍵字：模式驅動架構、MDA 轉換、網頁式系統、微軟.Net 平台

iii

Abstract Graphic user interface has become the mainstream of today’s web-based systems.

The object oriented technique and the diagrams from the Unified Modeling Language

(UML) are becoming the major tools for modeling the platform independent model

(PIM) of a web-based system. Once the PIM is constructed, the results can then be

transformed into its platform specific model and template code based on the model

driven architecture (MDA) approach. However, the detailed guideline for the

transformation from PIM to the Microsoft .Net platform is lacking. Therefore, this

study presents a methodology which provides guidelines for the transformation from

PIM to Microsoft .Net platform for a web-based system. The research methodology is

articulated using the design science research methodology. A usability evaluation with

a real-world web-based system case is performed to demonstrate its applicability. The

results indicated that with this proposed method, the system developer can effectively

transform the PIM of a web-based system into its Microsoft .Net platform and

template code.

Keywords: Model Driven Architecture, MDA Transformation, Web-based System,

Microsoft .Net Platform

iv

目錄

論文審定書 ................................................................................................. i

中文摘要…………………………………………………………………ii

英文摘要………………………………………………………………...iii

第一章、緒論............................................................................................. 1 第一節、研究背景與動機.................................................................................... 1

第二節、研究目的、範圍.................................................................................... 2

第三節、論文架構................................................................................................ 2

第二章、文獻探討 .................................................................................. 4 第一節、 Microsoft .NET Framework................................................................... 4

第二節、統一塑模語言（UML） ....................................................................... 5

第三節、模式驅動架構（MDA） ...................................................................... 7

第四節、網路應用程式...................................................................................... 10

第五節、使用者介面.......................................................................................... 17

第六節、 UML 使用者介面塑模 ........................................................................ 18

第七節、使用者介面轉換.................................................................................. 21

第三章、研究方法 ................................................................................ 25 第一節、設計科學研究法.................................................................................. 25

第二節、研究流程.............................................................................................. 26

第四章、使用者介面 PSM 轉換方法論 .............................................. 29 第一節、 PIM 轉 Web PSM 轉換步驟 ............................................................... 29

第二節、使用者介面程式樣版對映.................................................................. 32

第三節、 PIM 產出與 Web PSM 對應整理 ....................................................... 36

第五章、展示 ........................................................................................ 38 第一節、公司簡介.............................................................................................. 38

v

第二節、測試項目實施與過程.......................................................................... 38

第三節、個案─典藏管理系統「建立擬藏品資料使用個案」...................... 39

第四節、觀察與評估.......................................................................................... 88

第六章、結論 ........................................................................................ 90 第一節、研究成果.............................................................................................. 90

第二節、研究貢獻.............................................................................................. 90

第三節、研究限制.............................................................................................. 92

第四節、未來研究方向...................................................................................... 92

參考文獻 ................................................................................................. 93

vi

圖次

圖 2-1 UML 圖形類別 .............................................................................. 5

圖 2-2 MDA 軟體發展生命週期 .............................................................. 8

圖 2-3 MDA 轉換程序 .............................................................................. 9

圖 2-4 伺服端網頁處理流程示意圖 ...................................................... 11

圖 2-5 客戶端網頁處理流程示意圖 ...................................................... 12

圖 2-6 表單示意圖 .................................................................................. 13

圖 2-7 建立關聯示意圖 .......................................................................... 15

圖 2-8.NET 物件關聯 ............................................................................. 16

圖 2-9 PAC 架構圖範例 .......................................................................... 17

圖 2-10 Net-PAC 架構圖範例................................................................. 18

圖 2-11 使用者介面塑模與工具 ............................................................ 19

圖 3-1 研究流程 ...................................................................................... 26

圖 4-1 PAC─控制轉 SP ......................................................................... 33

圖 4-2 PAC─表達轉 CP ......................................................................... 34

圖 4-3 Web PSM 類別圖範例 ................................................................. 34

圖 5-1 T 博物館文物典藏管理系統使用個案圖................................... 48

圖 5-2 建立帳號活動圖 .......................................................................... 50

圖 5-3 建立擬藏品資料活動圖 .............................................................. 51

圖 5-4 編輯編目資料活動圖 .................................................................. 52

圖 5-5 建立擬藏品資料使用個案 UI 循序圖 ........................................ 56

圖 5-6 T 博物館文物典藏管理介面架構圖 ........................................... 57

圖 5-7 館員登入介面藍圖 ...................................................................... 58

圖 5-8 功能選項介面藍圖 ...................................................................... 58

圖 5-9 帳號列表介面藍圖 ...................................................................... 59

圖 5-10 帳號資料建立介面藍圖 ............................................................ 60

圖 5-11 擬藏品列表介面藍圖 ................................................................ 61

vii

圖 5-12 擬藏品建立介面藍圖 ................................................................ 62

圖 5-13 擬藏品清單建立介面藍圖 ........................................................ 64

圖 5-14 編目列表介面藍圖 .................................................................... 65

圖 5-15 編目編輯介面藍圖 .................................................................... 67

圖 5-16 建立擬藏品資料使用個案 UI 狀態圖 ...................................... 69

圖 5-17 轉換範圍之介面架構圖 ............................................................ 70

圖 5-18 館員登入 Web PSM 類別圖 ...................................................... 75

圖 5-19 功能選項 Web PSM 類別圖 ...................................................... 76

圖 5-20 擬藏品列表 Web PSM 類別圖 .................................................. 76

圖 5-21 擬藏品建立 Web PSM 類別圖 .................................................. 77

圖 5-22 擬藏品清單建立 Web PSM 類別圖 .......................................... 77

圖 5-23 建立擬藏品資料使用個案 Web PSM 類別圖 .......................... 78

viii

表次

表 2-1 微軟.NET Framework 發展歷史 .................................................. 4

表 2-2 框架類別範例 .............................................................................. 13

表 2-3 指定超連結目標屬性範例 .......................................................... 14

表 2-4 未指定超連結目標屬性範例 ...................................................... 14

表 2-5 使用者介面轉換方法論比較表 .................................................. 24

表 4-1 類別轉換對應 ............................................................................. 30

表 4-2 介面元件屬性與 ASP.Net 網頁控制項對應表 .......................... 30

表 4-3 GridView 物件資料行欄位型別表 ............................................. 31

表 4-4 伺服端網頁程式碼樣版 ............................................................. 35

表 4-5 PIM 產出與 Web PSM 轉換關係表 ............................................ 36

表 5-1 帳號基本資料藍圖 ...................................................................... 40

表 5-2 帳號基本資料詞彙 ...................................................................... 41

表 5-3 擬藏品基本資料藍圖 .................................................................. 41

表 5-4 擬藏品基本資料詞彙 .................................................................. 41

表 5-5 擬藏品清單藍圖 .......................................................................... 42

表 5-6 擬藏品清單資料詞彙 .................................................................. 42

表 5-7 編目資料藍圖 .............................................................................. 43

表 5-8 編目資料詞彙 .............................................................................. 43

表 5-9 建立帳號使用個案 ...................................................................... 45

表 5-10 建立擬藏品資料使用個案 ........................................................ 46

表 5-11 編輯編目資料使用個案 ............................................................ 47

表 5-12 建立擬藏品資料使用個案介面與控制物件 ............................ 53

表 5-13 建立擬藏品資料 UI 循序圖之訊息與操作 .............................. 55

表 5-14 館員登入介面詞彙 .................................................................... 58

表 5-15 功能選項介面詞彙 .................................................................... 58

表 5-16 帳號列表介面詞彙 .................................................................... 59

ix

表 5-17 帳號資料建立介面詞彙 ............................................................ 60

表 5-18 擬藏品列表介面詞彙 ................................................................ 61

表 5-19 擬藏品建立介面詞彙 ................................................................ 62

表 5-20 擬藏品清單建立介面詞彙 ........................................................ 64

表 5-21 編目列表介面詞彙 .................................................................... 65

表 5-22 編目編輯介面詞彙 .................................................................... 67

表 5-23 建立擬藏品資料使用個案介面與伺服端網頁對應 ................ 71

表 5-24 介面屬性與 ASP.Net 網頁控制項對應表 ................................ 71

表 5-25 建立擬藏品資料使用個案類別屬性網頁元件對照表 ............ 72

表 5-26 館員登入 UI 程式碼樣版 ......................................................... 79

表 5-27 功能選項 UI 程式碼樣版 .......................................................... 80

表 5-28 擬藏品列表 UI 程式碼樣版 ...................................................... 81

表 5-29 擬藏品建立 UI 程式碼樣版 ...................................................... 83

表 5-30 擬藏品清單建立 UI 程式碼樣版 .............................................. 85

表 5-31 測試工作回饋表 ........................................................................ 89

1

第一章、緒論

第一節、研究背景與動機

資訊系統技術發展快速，網際網路運用也愈來愈普及，不論是私人企業或是

公家單位對於網路應用資訊系統開發需求亦大量的成長。隨著硬體技術的進步，

及軟體開發技術不斷的更新，使得應用系統需求架構日趨複雜，亦提高了軟體開

發及維護的難度與成本。為了降低軟體開發及維護難度與成本，系統開發技術及

方法亦需不斷精進與更新。

在系統開發流程其系統需求分析與設計階段，系統分析師著重在將使用者需

求轉化為系統功能完整描述、資料庫設計及程式邏輯設計，而在使用者介面分析

與設計較少著墨。目前圖形化介面已成為使用者介面設計主流，使用者介面互動

設計在系統開發過程中其重要地位亦已提昇，如何在分析設計階段，將使用者介

面需求進行描述及定義日趨重要。

統一塑模語言（UML）及物件導向技術提供許多功能與方法來提升系統開

發效率，但系統開發仍存在某些問題，包括如何提昇生產率及可攜性、與其他系

統互通，及需求持續更改相關文件維護等問題（吳仁和, 2010）。由 OMG 定義的

軟體開發架構─模式驅動結構（Model Driven Architecture, MDA），以物件導向系

統分析與設計方法論，配合統一塑模語言（Unified Modeling Language, UML）來

進行軟體系統的分析及開發。

網路應用程式開發語言種類多，根據 Darryl（2010）以工作機會統計出較常

使用之程式語言如：PHP、Java、C#、Visual Basic 等。Java 及微軟.NET framework

是目前使用較普遍之開發平台，而目前針對網路應用程式使用者介面塑模在 PIM

轉PSM及PSM轉Code部份，大多以 JSP語言進行轉換，卻無微軟.NET framework

此平台之方法論。

2

第二節、研究目的、範圍

本研究將以 Microsoft .NET Framework 開發平台來提出使用者介面轉換之方

法，以提昇使用者介面轉換的效率，透過方法論的提出，在 MDA 架構基礎下利

用 UML 進行需求塑模，以改善產生系統使用者介面的效率。

先探討從使用者介面分析塑模到產生使用者介面的步驟及過程，接著整理出

程式樣版產生的步驟，以歸納出利用 Microsoft .NET Framework 開發網路應用系

統方法論，亦即從需求塑模階段主要產出文件，使用者介面類別圖轉換出使用者

介面，輔以搭配使用者介面狀態圖與使用者介面循序圖等塑模工具來產生使用者

介面程式樣版。

在本研究所探討之範圍著重於 PIM 到使用者介面 PSM，並轉換出使用者介

面及程式樣版，其實作程式語言採用 Microsoft VB.Net，系統使用者介面的撰寫

採用 ASP.Net。PIM 轉關聯式 PSM 及 PIM 轉應用程式 PSM，不包含在本研究討

論範圍內。

第三節、論文架構

本研究一共分為六章，各章內容簡述如下：

第一章為緒論，說明本研究背景動機，在此背景下衍生出什麼問題，以及研

究該問題之動機，並說明研究目的、研究範圍與限制。

第二章為文獻探討，針對模式驅動架構、統一塑模語言、使用者介面等議題

進行說明。

第三章為研究方法，詳細描述本研究之方法論，包含完整的研究流程，以及

每一個研究流程所執行的詳細內容。

第四章為使用者介面轉換方法論，經由分析相關論文研究，整理出從系統需

求分析至使用者介面塑模，最後轉換出使用者介面及程式碼的步驟及過程。

第五章是可行性測試，透過個案公司進行個案實性之研討，驗證本研究所提

方法論的可用性。

3

第六章為結論，提出本研究的成果和貢獻，並說明後續研究方向，以做為未

來改進與研究之參考。

4

第二章、文獻探討

第一節、 Microsoft .NET Framework

.NET Framework 是由微軟所開發，主要用以支援建置及執行應用程式和

XML Web Service。根據微軟 MSDN 網站資訊，.NET Framework 包含兩個主要

元件：Common Language Runtime（通用語言執行平台）和.NET Framework 類別

庫。Common Language Runtime 主要用以處理記憶體管理、執行緒管理和遠端處

理等核心服務；而.NET Framework 類別庫可用來開發應用程式，其範圍從傳統

命令列或圖形化使用者介面應用程式到以 ASP.Net 所提供最創新方式為基礎之

應用程式，例如：Web Forms 和 XML Web Services。

其版本之發展之歷史如表 2-1 所示：

表 2-1 微軟.NET Framework 發展歷史版本發行年度 Visual Studio

1.1 2003 Visual Studio .Net 2003

2.0 2005 Visual Studio 2005

3.0 2006



Visual Studio 是微軟提供程式開發人員用以建置 ASP.Net Web 應用程式、桌

面應用程式及行動應用程式之開發工具，可使用之程式語言包含：Visual Basic、

Visual C#、Visual C++、Visual F#等，所有程式語言均使用相同的整合式開發環

境（IDE），故可共用工具，亦可簡化混合語言方案的建立程序。

而 ASP.Net 主要用以進行 Web 應用程式之設計，其使用者介面程式設計分

為兩部份：視覺化元件和邏輯。視覺化項目可包含 HTML 或 ASP.Net 網頁控制

項。而邏輯部份則包含與頁面互動的程式碼，程式碼可置於頁面的 script 區塊中，

或不同類別（Class）中。若程式碼是在不同類別檔案中，則此檔案稱為「程式

5

碼後置」（Code-Behind）的檔案，程式碼後置檔案其程式碼可使用 Visual Basic、

C#或任何其他.NET Framework 語言來撰寫。

第二節、統一塑模語言（UML）

統一塑模語言（Unified Modeling Language, UML）是一種視覺化的塑模語言

（Rumbaugh et al.，2005），是 Rational 公司整合 Booch、Rumbaugh 與 Jacobson

三種方法，及其他物件導向方法論，所提出的物件導向塑模語言（Booch et al.，

2005）。

UML 此視覺化塑模語言標準可將系統結構及行為規格化（Specification）及

文件化（Documentation）。UML2.2 訂定了十四種圖形，其分類如圖 2-1 所示：

圖 2-1 UML 圖形類別各圖形說明如下所述：

1. 輪廓圖（Profile Diagram）

為了適用於不同目的，將模式中所定義元素的 stereotypes、標籤定義及限

6

制，將一個現有的 metamodel 擴充為另一個 metamodel。例如：為了不同開發平

台而調整 UML metamodel。

2. 類別圖（Class Diagram）

主要用來表達系統存在之物件型態及各物件型態間靜態資料結構與邏輯關

係，亦可表達類別的屬性、操作與類別間連結之限制。

3. 元件圖（Component Diagram）

說明系統軟體元件間配置與相依關係。

4. 複合結構圖（Composite Structure Diagram）

用以表達類別或元件在執行階段，各物件如何協同合作完成目標。

5. 部署圖（Deployment Diagram）

主要在描述系統組成元件如何在實體環境中進行部署配置及安排等。

6. 物件圖（Object Diagram）

用以描述系統於某一時間點的靜態資料結構，可用來表達一個系統複雜的資

料結構。

7. 套件圖（Package Diagram）

用以描述系統各類別如何進行分組。

8. 活動圖（Activity Diagram）

用於表達執行某一作業行為之活動、轉換與條件。

9. 使用個案圖（User Case Diagram）

從使用者觀點描述系統行為者與系統間之互動行為與關係。

10. 狀態機圖（State Machine Diagram）

UML1.0 稱為狀態圖。用以表達物件生命週期之狀態轉變及活動結果。

11. 循序圖（Sequence Diagram）

描述系統運作時物件間互動行為，以時間先後順序為主軸，以表達物件間訊

息傳遞與處理程序。

12. 溝通圖（Communication Diagram）

UML1.0 稱為合作圖。用來描述系統運作時物件間互動行為，主要著重在表

達物件間連結結構，並展現物件間訊息傳遞的活動。

13. 時序圖（Timing Diagram）

7

用以解決物件訊息傳遞時，與時間因子相關之處理。

14. 互動概觀圖（Interaction Overview Diagram）

以活動圖為其呈現方式，並結合互動圖以表達整體控制流程。

第三節、模式驅動架構（MDA）

模式驅動架構（Model Driven Architecture，MDA）是由物件管理組織（Object

Management Group，OMG）定義的一種軟體開發架構，與其他系統開發模式生

命週期雷同，MDA 亦包含需求、分析、低階設計、程式編輯、測試與部署，該

模式發展生命週期如圖 2-2。與其他系統開發模式生命週期不同之處，是 MDA

在系統發展過程中，每個階段以模式（Model）為產出，並做為下一階段的輸入。

MDA 在需求階段產出主要是文字描述，此產出是分析階段主要資料來源，該階

段產出是建構出一個平台獨立模式（Platform Independent Model，PIM），利用

PIM 於低階設計階段建構出特定平台模式（Platform Specific Model，PSM）。一

個系統可能包含幾種技術，故一個 PIM 可被轉換為一至多個 PSM（吳仁和，

2010）。

8

需求

分析

低階設計

程式編輯

測試

部署

大部份為文字文件

PIM

PSM

Code

Code

主要流程產出

MDA流程

圖 2-2 MDA 軟體發展生命週期

MDA 包含三個核心模式：PIM、PSM 與 Code（Miller and Mukerji，2003），

分別描述如下：

1. 平台獨立模式（PIM）

PIM 是分析與設計階段重要產出，主要是根據需求塑模結果，從如何支援企

9

業運作觀點描述一個軟體系統，不涉及系統開發與運作平台之描述。PIM 必須以

完整定義的語言來描述，且適合用電腦自動解譯，故相當適合利用 UML 來描述

平台獨立模式。

2. 特定平台模式（PSM）

PSM 是一種特定平台模式，亦即該模式是相依於軟體開發技術。一個 PSM

主要是以開發工具的架構來描述一個軟體系統，對於 PSM 而言，可能供有該特

定平台知識的開發者才能理解。一個系統可能包含數種技術，所以一個 PIM 可

被轉成多個 PSM，而每一個特定技術平台需產生一個相對應技術的 PSM，PSM

間溝通方式可藉由溝通橋樑（Communication Bridge）機制相互溝通。

3. 程式模式（Code）

每一個 PSM 需被轉成程式碼，因為 PSM 相依於其開發技術，因此 PSM 轉

成程式碼的步驟可以直接對應。若有多個 PSM 則會轉出多種程式碼，不同程式

間亦需藉由溝通橋樑來相互溝通。

MDA 轉換程序：先製作 PIM，再將 PIM 轉成一或多個 PSM，接著再將 PSM

轉成 Code。其轉換程序如圖 2-3 所示。

PIM

Object-RelationalPSM AP PSM Web PSM

DB Source Code AP Source Code Web Source Code

Communication

Bridge

Communication

Bridge

Communication

Bridge

Communication

Bridge

Transformation:code generation



Transformation:PIM Relation

Transformation:PIM AP

Transformation:PIM Web

圖 2-3 MDA 轉換程序

圖 2-3MDA 轉換程序中，Code 可分為三部份：DB source code、AP source code

及 Web source code。DB source code 是用來處理資料庫中的資料；AP source code

是處理企業邏輯與商業運算；Web source code 則是網頁程式語言。目前有許多工

10

具供應商已推出可支援 MDA 轉換的 CASE 工具，例如：Rational Rose、Power

Designer 與 Together 等，但這些工具尚未成熟，所產生的程式碼尚無法做為系統

發展最終程式碼，僅能轉出一些樣版程式碼，這些樣版程式碼仍需以人工方式進

行補強。

有關 MDA 轉換之相關研究包含：

1. 由 Kum 和 Kim 於 2006 年提出，利用 MDA 為普及服務（Pervasive Service）

提出一個系統化方法論來產生微軟.NET 元件，所使用之程式語言為 C#。

2. 詹尹云於 2006 年提出，以 UML 工具利用 MDA 及 PAC 的觀念，發展出在

網路應用環境下的使用者介面，以及與開發平台相依的程式碼之方法論。

3. 黃連豐於 2008 年提出，利用 MDA 架構提出以 UML 類別圖轉換為 PHP 程

式樣版之方法與工具，進行轉換之範圍為 PIM 轉關聯式 PSM 及 PIM 轉應

用程式 PSM。

4. 劉文進於 2009 年提出，以詹尹云（2006）所提之方法論為基礎，修正其關

連關係與網路應用程式關連關係不符合，並處理網頁間控制權轉移之問

題。

第四節、網路應用程式

一、定義

網路應用程式（Web Application）是遵循 W3C 技術與標準的軟體系統，結

合了網路並整合後端資料庫，透過客戶端瀏覽器與使用者互動（Kappel et al.，

2006）。網路應用程式之興起，使得資訊能不受時空之限制，讓全球之使用者均

能隨時取得。

二、環境與架構

網路應用程式其架構可分為主從式架構（client/server），及多層式架構

（Kappel et al.，2006）。

1. 主從式架構

客戶端所發出之請求（request）直接指向靜態 HTML，不需經過伺服端進行

11

任何邏輯運算之處理；或在網站伺服端經由應用程式邏輯來存取資料庫。此

種架構適用於簡單的網路應用程式。

2. 多層式架構

包含三層式架構包含提供應用程式資料存取之資料層（data layer）、在應用

程式伺服端處理程式企業邏輯的企業邏輯層（business layer）、及將結果依

期望之格式產出之展現層（presentation layer）。除了上述基本三層式架構

外，若有安全機制之考量（如：防火牆）、快取機制（如：代理伺服器）均

可依實際規劃需求將其整合至請求─回應資料流（request-response flow）內。

三、網路應用程式介面類別

Conallen 提出在網路應用程式下，所使用的類別符號以應用在 UML 內。此

延伸 UML 將介面類別依其性質之不同區分為五種介面類別（Conallen，2003），

茲將五種介面類別分述如下：

1. 伺服端網頁類別（Server Page Class）

伺服端網頁類別是用以表示動態網頁，該動態網頁於伺服端接受請求

（Request）時，會依伺服端之商業邏輯、資料庫存取資料等，將伺服端物

件呈現在該網頁內。所以，伺服端網頁主要是由伺服器所執行，並和伺服端

相關資源進行互動，例如：資料庫、商業邏輯等。

以一個簡單例子來說明伺服端網頁，某使用者利用瀏覽器連結至某拍賣網站

瀏覽拍賣資訊，此時網站伺服器會接收到該使用者之請求（Request），並至

資料庫抓取拍賣資料回傳給使用者，將結果呈現於使用者所開啟之網頁，其

進行之流程如圖 2-4 所示：

圖 2-4 伺服端網頁處理流程示意圖

12

2. 客戶端網頁類別（Client Page Class）

客戶端網頁是以 HTML 格式撰寫的網頁，用以呈現資料、畫面及邏輯（可

利用 JavaScript 或 VBScript 進行處理）；是由客戶端瀏覽器所進行呈現。客

戶端網頁能和其他客戶端網頁或伺服端網頁產生關聯，其關聯將於「網路應

用程式介面類別關聯」進行說明。

以拍賣網站簡介為例，來說明客戶端網頁。以文字說明輔以圖片來進行該拍

賣網站之介紹，可能會有一個按鈕或文字超連結配合內嵌的 JavaScript 或

VBScript 回到首頁。瀏覽器解譯此頁面時，不會和伺服端物件有任何互動，

完全為使用者與該頁面進行互動。如圖 2-5 所示：

圖 2-5 客戶端網頁處理流程示意圖

3. 表單類別（Form Class）

客戶端網頁所有輸入欄位均需置放於表單內，表單主要用以進行資料之輸

入，並沒有屬於自己的操作，與客戶端網頁有「聚集」之關聯。表單類別直

接對應至 HTML<<form>>標籤，而表單內之屬性則是輸入欄位，包含 input

boxes、check boxes、radio buttons 等。表單示意圖如圖 2-6 所示：

13

圖 2-6 表單示意圖

4. 框架類別（Frameset Class）

框架為 HTML 網頁元件之一，以方形頁框（Frame）或設定區域來切割使用

者介面。每一個頁框分別由一個客戶端網頁所產生。其使用之限制是，至少

要包含一個客戶端網頁或目標類別。該類別範例如表 2-2 所示：

表 2-2 框架類別範例 HTML 語法頁面呈現

Frameset.html 內容：

<html>

<FRAMESET COLS="20%,80%">

<FRAME SRC="index.htm">

<FRAME SRC="Content.htm"

NAME="Content">

</FRAMESET>

</html>

5. 目標類別（Target）

目標類別是指在框架（Frameset）內有命名的頁框（Frame），其目的是用來

index.htm Conetnt.htm

14

做為超連結頁面呈現之標的。例如，「框架類別範例」所示，設定 Content.htm

此頁框的名字為”Content”，表示該頁框為目標類別，只要有超連結其 target

屬性指向 Content，則該超連結內容就會呈現在 Content 此頁框內。

延續框架類別之範例來說明目標類別如表 2-3 所示：

表 2-3 指定超連結目標屬性範例 HTML 語法頁面呈現

index.htm 內容：

<html>

<body>

<a href="Ch1.htm"

target="Content">第一章</a><p>

<a href="Ch2.htm">第二章

</a><p>

</body>

</html>

點了第一章後，頁面之呈現：

在 index.htm 內，”第一章”其超連結指定 target 屬性為 Content，其屬性值指

的是在 Frameset.html 內，某一頁框的名稱。點選第一章後，原 Content.htm

的內容會替換為第一章（Ch1.htm）之內容。

而”第二章”其超連結並未指定 target 屬性，點選第二章後，第二章（Ch2.htm）

之內容則覆蓋原 index.htm 之內容，如表 2-4 所示：。

表 2-4 未指定超連結目標屬性範例 HTML 語法頁面呈現

index.htm 內容：

<html>

<body>

<a href="Ch1.htm"

target="Content">第一章</a><p>

<a href="Ch2.htm">第二章

</a><p>

點了第二章後，頁面之呈現：

15

</body>

</html>

四、網路應用程式介面類別關聯

Conallen 除了提出網路應用程式介面類別外，亦定義介面類別間其關聯，包

含了建立（build）、送出（submit）、超連結（link）、重導（redirect）關聯（Conallen，

2003），茲將各關聯分述如下：

1. 建立關聯（build）

伺服端網頁執行時，網站伺服器會將該伺服端網頁建立客戶端網頁，傳送給

瀏覽器解譯呈現；只要介面類別為伺服端網頁一定會有建立關聯存在。因伺

服端網頁會自動產生客戶端網頁，所以在產生伺服端網頁時需將相對應之介

面屬性均建立在伺服端網頁內。

茲利用使用者瀏覽拍賣網站網頁為例，來說明介面類別間其建立關聯，如圖

2-7 所示：

圖 2-7 建立關聯示意圖

Conallen（2003）提及微軟.NET Framework 此開發技術平台所建立之網頁區

分之物件包含：.aspx 檔案、code behind class（指的是將程式碼置於另一檔

案內），而 code behind class 為.aspx 檔案的超類別（superclass）。依 Conallen

所提之概念，以使用者瀏覽拍賣網站網頁為例，來說明.NET Framework 物

件間之關聯，如圖 2-8 所示：

16

圖 2-8.NET 物件關聯

資料來源：Conallen（2003）

Login.aspx 塑模為伺服端網頁，而其 Login.aspx.vb 為 code behind class 是

Login.aspx 的超類別（superclass）。code behind class 包含了多數事件處理程

式碼（event-handling code）。

2. 送出關聯（submit）

此關聯存在於表單（Form）與伺服端網頁間，將表單內之欄位值送出至伺

服端網頁進行處理。可參考「.NET 物件關聯」圖所呈現之送出關聯。

3. 超連結關聯（link）

從客戶端網頁出發，其連結之目標可為客戶端網頁或伺服端網頁；兩個介

面類別間存在超連結關聯時，則此兩個介面類別存在連結關聯。其語法為：

<a href="Ch1.htm">第一章</a>

4. 重導關聯（redirect）

一個網頁處理控制傳送至另一網頁時，此為重導關聯。此關聯可由客戶端

網頁或伺服端網頁發起，重導至客戶端網頁或伺服端網頁。

17

第五節、使用者介面

一般而言，資訊系統主要包括三個部份，使用者介面、應用程式與資料庫，

其中使用者介面是資訊系統與使用者間溝通的主要橋樑。圖形化使用者介面

（Graphic User Interface，GUI）已是目前資訊系統主流，市面上許多使用者介面

開發工具皆提供多種功能與元件，以滿足使用者對使用者介面不同需求。應用這

些工具，系統開發者僅需寫少量程式碼便可建構系統之使用者介面。雖然開發工

具具有如此功能，但由於 GUI 之複雜性，如果缺乏有系統的設計方法，則使用

者、系統分析師與程式設計師間溝通之難度將大幅增加（吳仁和，2010）。

一、 PAC 介面架構

PAC（Presentation-Abstraction-Control）介面架構圖主要是用來描述使用者

介面之結構關係，以及介面間運作之控制流程。良好的介面架構圖能清楚地表現

介面與介面間的連接與控制關係。PAC 模式是常見的介面架構表達工具（見圖

2-9），PAC 架構圖將使用者介面細分成許多子介面，每個子介面可視為一個物

件，每一個物件主要由三個部份所組成，表達、摘述及控制。其中，表達是定義

物件的外觀，並處理訊息的輸入及輸出；摘述是定義物件的功能及概念；控制則

是表達與摘述間溝通的橋樑，同時也是與其他物件相互聯繫的管道（Hussey and

Carrington，1997）。

A1 C1 P1 A2 C2 P2

Abstraction Control Presentation

圖 2-9 PAC 架構圖範例

傳統的 PAC 模式，只能用來表達樹狀的階層式系統介面架構，無法表達

18

Web-based 系統中網狀的使用者介面架構，例如超連結（Hyperlink）型態。因此，

需將 PAC 模式擴充成網狀式的 PAC（稱為 Net-PAC）模式，使其能呈現階層式

與網狀式之使用者介面架構，以表達 Web-based 系統與傳統之系統介面。此外，

Net-PAC 模式中之表達、摘述與控制可分別藉由介面藍圖、介面詞彙、循序圖與

狀態圖（含轉換表）來描述。擴充後之 Net-PAC 架構圖如圖 2-10 所示（吳仁和

等人，2001），除了具備原有之功能外，特別是在 Web-based 系統環境下，更充

分表現系統中各介面間的關聯與互動（吳仁和，2010）。

圖 2-10 Net-PAC 架構圖範例

第六節、 UML 使用者介面塑模

使用者介面塑模方法論起始於使用者需求塑模，將塑模結果進行使用者介面

之靜態結構塑模及動態結構塑模。使用者介面之靜態結構塑模，以了解介面所應

呈現的架構、藍圖及元件功能與細部資訊；而使用者介面之動態結構塑模則是用

以了解介面間之轉換，及介面內元件運作的邏輯與狀態的轉換等。綜上所述，使

用者介面塑模應包括使用者介面靜態結構塑模及使用者介面動態行為塑模（如圖

2-11 所示）（吳仁和，2010），分別描述如下。

19

圖 2-11 使用者介面塑模與工具

二、使用者介面需求塑模

使用者介面是資訊系統與使用者間溝通的主要橋樑，有兩項重要工作：接受

使用者的輸入與展示系統的輸出。因此使用者介面塑模工作應包含兩部份，一是

使用者介面架構與介面元件的設計，該部份主要處理介面元件之選擇或設計、介

面之配置及每個元件之輸入與輸出資訊等；另一部份是介面間與介面內元件間互

動的控制流程。

在使用者介面架構與介面元件設計部份，系統分析師可將使用者所需要的系

統功能以圖形化的介面元件，例如：選單、表格、按鈕、訊息視窗、影像、聲音

或其他方式表現出來，並決定每個處理中資訊的輸入與輸出的方式與規格。並與

使用者討論安排畫面配置，具體描述使用者的操作情形，以決定介面架構圖。而

在介面間與介面內元件間互動部份，可依需求塑模之處理描述來規劃元件間互動

流程，並以循序圖、狀態圖來呈現。

使用者介面需求塑模是需求塑模的一部份，其活動包括需求擷取與需求轉

20

換。需求擷取主要是對系統範圍內各種事物與相關現象，加以了解、判斷及選擇，

並設計成描述性綱目。需求轉換將需求擷取所得到描述性綱目以系統塑模語言轉

換成概念性綱目，利用使用個案圖、配合活動圖、藍圖及資料詞彙，具體表達使

用者於企業流程與資料上之需求。使用個案圖及活動圖其建構步驟描述如下：

1. 使用個案圖

從使用者觀點描述系統的行為者與系統間之互動行為與關係。其建構步驟

為：

(1) 找出行為者

(2) 找出使用個案

(3) 描述使用個案

(4) 找出使用個案間之關係

(5) 繪製使用個案圖

2. 活動圖

用於表達執行某一作業行為之活動、轉換與條件。一個活動圖描述一群循序

與同步的活動，一個活動可表示一個工作流程步驟或一個運算的執行動作。

其建構步驟為：

(1) 找出活動

(2) 找出活動間之轉換

(3) 繪製活動圖

(4) 精錬活動圖

三、使用者介面靜態結構塑模

使用者介面靜態結構塑模主要是表達使用者介面及介面元件間之配置關

係。靜態資料結構塑模可由活動圖及其輸出與輸入的表達，來建構使用者介面架

構圖。在流程塑模工作中，活動圖是用來塑模企業流程重要工具，每一個活動圖

中的輸入與輸出註記可以被設計成一個介面，且其執行順序可被視為是一個層級

架構，因此，一個系統其每個使用個案之活動圖的輸入與輸出註記之整合是一個

階層架構，可以被轉換為使用者介面架構。

使用者介面架構圖需以 Net-PAC 模式來呈現，每一個介面需表達其：表達、

摘述及控制，並給予一個唯一的介面編號與名稱。根據所畫出的 Net-PAC 介面

21

架構圖，針對圖中每一個介面藍圖與使用者討論，以進一步明確定義介面中功能

與資訊需求的名稱、圖像、展示位置、格線、圖表與說明等，並完成介面詞彙。

四、使用者介面動態行為塑模

使用者介面動態行為塑模主要是描述介面間及信面內元件間之互動關係。由

需求塑模結果，配合介面藍圖、介面詞彙與強韌圖，可進行使用者介面及其元件

間之互動行為分析，分析結果可完全用狀態圖表達之，或者介面間之互動行為以

循序圖表達，而每一個介面內之介面元件間之操作順序由狀態圖表達。循序圖及

狀態圖其建構步驟描述如下：

1. 循序圖

描述系統運作時物件間互動行為，以時間先後順序為主軸，以表達物件間訊

息傳遞與處理程序。其建構步驟為：

(1) 確認物件

(2) 描述操作

(3) 描述訊息

(4) 繪製循序圖

2. 狀態圖

用以表示物件在其生命週期中的狀態變化。以微觀物件為主，細分物件所發

生的各項事件，並表達物件生命週期之狀態轉變及活動結果。其建構步驟為：

(1) 找出介面狀態

(2) 找出狀態間之轉換

(3) 繪製狀態圖

(4) 精錬狀態圖

第七節、使用者介面轉換

詹尹云（2006）針對 JSP 網路應用程式提出 MDA 轉換使用者介面方法論，

其所提之步驟依序為：

1. 類別的轉換

22

(1) 每個使用個案會對映產生一個系統中的<<Client-side class>>介面類

別。每個<<Client-side class>>介面類別可載入一至多個<<Form class>>

介面類別；每個<<Form class>>介面類別可由一至多個<<Client-side

class>>介面類別載入。又 Form 必須載入至 Client Page 環境下才能執行

操作，故<<Client-side class>>介面類別和<<Form class>>介面類別間存

在「聚集」關聯關係。

A. 將每個屬於<<Client-side class>>介面類別轉換成一個頁面，

<<Client-side class>>介面類別包含一至多個<<Form class>>介面類

別，則產生的頁面也應包含這些表單。

B. 每個屬於<<Frameset class>>介面類別轉換成一個包含多個頁框的

頁面，其中每個頁框會對映至唯一的頁面。

(2) 分析每個使用個案之「活動圖」中所有輸出／入註記，並搭配「PAC

系統架構圖」找出的所有介面類別轉換為<<Form class>>介面類別，必

須載入至該使用個案的<<Client-side class>>介面類別中執行操作。

(3) 每個使用個案對映產生的控制類別則被轉換為<<Server-side class>>。

2. 屬性元素的轉換

將轉換完成的介面類別中的每一個屬性轉換成該頁面或表單中的一個網頁

元件。

3. 關係的轉換

在網路應用模式中，介面類別間有四種關係：超連結（Link）、建立（Build）、

重導（Redirect）及送出（Submit），依據準則建立類別間可能存在之關係。

劉文進（2009）以詹尹云（2006）所提之方法論為基礎，針對 JSP 網路應用

程式提出 MDA 轉換使用者介面方法論，其所提之步驟依序如下所述：

1. 類別屬性對應網頁元件

介面類別中的每一個屬性轉換成該頁或表單中的網路元件。

2. 使用者介面與控制類別轉換

(1) PIM 中每一個使用者介面類別於 Web PSM 中對應產生一個 Server

Page，同時該 Server Page 會自動建立一個對應於此 Server Page 的 Client

Page，其中 Server Page 與 Client Page 間有「建立」關連關係。

23

(2) 依據介面類別產生對應的表單類別及表單內 UI 元件。

(3) 依據步驟 1 中屬性對照網路元件，建立表單類別組成的 HTML Input、

HTML Select 及 HTML Textarea 元件。

(4) 每個介面類別的操作轉換為一個 Server Page，作為表單類別 Submit 時

的對應 Action。

3. 關係的轉換

介面類別間包含四種關係：超連結（Link）、建立（Build）、重導（Redirect）

及送出（Submit），依據準則建立類別間可能存在之關係。利用 UI 狀態圖找

出網頁間控制權轉移之關係。

詹尹云（2006）及劉文進（2009）均針對 JSP 網路應用程式，提出 MDA 轉

換使用者介面之方法論，利用需求塑模所產出的文件，找出介面及控制類別其屬

性及操作，並確認類別間的關係，以產出使用者介面類別圖（UI Class Diagram）；

藉由此 PIM 產出的 UI 類別圖進行 Web PSM 轉換，其轉換步驟及差異如表 2-5

所示：

24

表 2

-5使用者介面轉換方法論比較表

姓名

步驟

詹尹云（

2006）

劉文進（

2009）

差異

本研究提出之原因

類別的轉換

(1

) 每個使用個案產生一個

CP，

而一個

CP可

載入

多個

表

單。每個表單可由一至多個

CP載入。

(2

) 每個使用個案對映產生的

控制類別轉換為

SP。

(1) 每個使用者介面類別產生

一個

SP，而

SP自動建立

CP。

(2

) 依使用者介面類別產生對

應的表單及表單內

UI元

件

(3) 每個使用者介面類別的操

作轉換為

SP。

進行類別轉換之

PIM

輸入不

一樣。

微軟

.NET

Fra

mew

ork

開發平台一個使用者

介面只能對應一個表

單。

屬性元素轉換

(1) 介面類別每一個屬性轉換

成該頁面或表單中的

HTM

L元件。

(1) 介面類別每一個屬性轉換

成該頁面或表單中的

HTM

L元件。

相同。

介面類別的屬性轉換

為A

SP.N

et網頁控制

項。

關係轉換

(1

) 介面類別包含超連結、建

立、重導

，及送出四種關係。

(1) 介面類別包含超連結、建

立、重導

，及送出四種關係。

(2

) 提出利用

UI狀

態圖處理

網頁間控制移轉。

(1) 四種關係轉換相同。

(2

) 劉文進（

2009）提出詹尹

云（

2006）針對關連關係之處

理與實際網際網路應用程式

關連不符合。

(3

) 劉文進（

2009）提出利用

UI狀

態圖處理網頁間控制移

轉。

(1) 延用四種關係轉

換。

(2

) 並使用劉文進

（20

09）利用

UI狀

態

圖處理網頁間控制移

轉。

25

第三章、研究方法

第一節、設計科學研究法

本研究主要探討系統分析與設計，該主題屬於設計科學領域的一部份，故本

研究採用「設計科學研究法」。本章節用以說明設計科學研究法其步驟與流程，

並說明如何使用設計科學研究法作為研究過程其指導方針，包含提出問題描述、

建立解決方案、如何執行可用性測試與評估之準則。

設計科學研究方法論（Design Science Research Methodology，DSRM）是由

Peffers et al.（2007）所提出，用以說明設計科學應包含下列六大步驟：

1. 確認問題與動機

2. 定義解決方案的目標

3. 設計與發展

4. 展示

5. 評估

6. 溝通

本研究主要使用該方法論前五項研究步驟，其研究流程如圖 3-1 所示。

26

確認問題與動機

定義解決方案的目標

設計與發展

展示

評估

圖 3-1 研究流程

第二節、研究流程

本研究之研究流程分為五步驟，如圖 3-1 所示，針對各個步驟分別說明如下：

一. 確認問題與動機

網路應用程式儼然已成為現今資訊系統之主流，而其使用者介面主要為圖形

化介面，目前針對網路應用程式使用者介面塑模在 PIM 轉 PSM 及 PSM 轉 Code

部份，大多以 Java 語言進行轉換，較少以 Microsoft .NET Framework 開發技術進

行轉換，且無一完整說明 Microsoft .NET Framework 在 PIM 轉 PSM 及 PSM 轉

Code 其塑模規則與步驟之方法論，因此目前業界在使用 UML 來表達網路應用程

式其使用者介面之系統分析過程與產出較為缺乏。

二. 定義解決方案的目標

本研究之研究目標在於整合先前各研究的觀點與方法，發展出一套網路應用

27

程式使用者介面之 Web PSM 轉換方法論，找出在 PIM 塑模階段，哪些是適合進

行 Web PSM 轉換之 UML 圖形，並說明 PIM 階段之產出如何轉換至 Web PSM 其

方法及步驟，最後利用 Web PSM 進行程式碼之轉換。

本研究所提之方法論，其功能是提供業界一套適用於 Microsoft .NET

Framework 此開發平台所建置之網路應用系統，將使用者介面轉換為程式碼之方

法，以加速開發團隊對於網路應用系統其使用者介面之了解，進而提高系統開發

效率與品質。

三. 設計與發展

本研究將會整合現有研究觀點與方法，提出使用者介面 Web PSM 轉換方法

論，其發展步驟依序為：

1. 依據網路應用程式使用者介面之特性，找出 PIM塑模階段哪些產出適合Web

PSM 轉換。

2. 利用適合進行 Web PSM 之 PIM 相關產出，說明如何利用 PIM 產出轉換為

Web PSM，並歸納其方法及步驟。

3. 說明如何利用 Web PSM 進行程式碼樣版之轉換。

進行本研究時，需要下列資訊以協助 Web PSM 轉換方法論之形成：

1. 介面架構圖

2. 介面詞彙

3. 介面狀態圖

4. 介面藍圖

四. 展示

1. 測試案例描述

以一網路應用系統─D 公司開發之文物典藏管理系統其「建立擬藏品資料使

用個案」之實際案例作為可用性測試的案例，案例的輸入為該使用個案的介

面架構圖、介面詞彙、介面狀態圖，及介面藍圖，將本研究的 Web PSM 轉

換方法論實作於此案例上，並根據所提出之可用性測試方法及評估準則執行

可用性測試，以驗證方法論之有效性。

2. 可用性測試規劃

(1) 計劃與事前工作

28

以 D 公司文物典藏管理系統其「建立擬藏品資料使用個案」此一實際

個案進行程式碼樣版的分析與觀察。預計邀請該公司軟體工程師參與

程式樣版分析比對過程，並詳細說明程式碼樣版是如何依循方法論所

產生出來的。

(2) 招募參與者與排定工作時程

排定參與程式碼樣版分析比對的工程師人員、時間與地點，預計邀請

五位工程師參與測試工作，所招募之工程師均有微軟.NET Framework

此開發平台開發之相關經驗，且不限所使用之開發語言。進行之時間

預定於 100 年 5 月 31 日，地點為 D 公司會議室。

(3) 執行測試工作

依照所排定之計畫進行測試，運用本研究所提之方法論對測試案例進

行分析，並向參與測試之人員說明轉換之結果。

(4) 結果分析與報告

請參與之人員依據正確性其評估準則，提出其意見，紀錄相關之意見

後，依據參與人員回饋意見分析所進行之測試工作，是否符合網路應

用系統其使用者介面開發之所需，以及是否有達到所制定的正確性準

則。

五. 評估

本研究將以正確性做為評估準則，來衡量本研究所提之方法論。而在此所指

的正確性是，以本研究所提之方法論轉換結果是否正確。

1. 針對方法論輸入文件之部份，評估針對網路應用系統使用者介面所使用 PIM

塑模之圖形，是否恰當及合理。

2. 利用方法論所產出之 Web PSM 類別圖搭配介面藍圖，所對映之程式碼樣版

其元素之正確性。

3. 程式碼樣版的實用性與正確性。

進行可用性測試過程中，將案例結果紀錄下來，根據正確性之準則去評估測

試的結果，再加以整理與分析，若有不正確的地方再回去修改第二步驟解決方案

的目標或第三步驟方法論的規則與方法設計，以提升方法論的準確性。

29

第四章、使用者介面 PSM 轉換方法論

本章節主要針對網頁程式使用者介面，如何利用 PIM 之產出轉換至 Web

PSM、及提出使用者介面轉換方法論。

以 MDA 架構為基礎，從使用者需求為其出發點，利用系統分析及設計將應

用系統開發過程中，藉由 UML 將需求具體描述，並產製相關文件以做為系統開

發人員開發系統之依據。

本研究所產生之 Web PSM 是以 Microsoft .NET Framework 為其開發技術平

台，利用 PIM 產出之 UI 循序圖、介面架構圖、介面藍圖、介面詞彙、UI 狀態

圖，做為 Web PSM 之輸入，將 PIM 轉成符合微軟開發平台之 PSM。

第一節、 PIM 轉 Web PSM 轉換步驟

PIM 轉 Web PSM 其轉換步驟如下：介面類別的轉換、介面類別屬性元素轉

換、類別關係轉換。其轉換步驟描述如下：

一、介面類別的轉換

介面類別之轉換是利用 PIM 所產出之介面架構圖及介面詞彙，做為 Web

PSM 之輸入。介面架構圖主要用以轉換 SP 或 CP，而介面詞彙用以將介面屬性

轉換為 ASP.Net 網頁控制項。

以介面架構圖做為轉換之參考依據。其轉換細則分述如下：

1. 介面架構圖的控制（Control）轉換為伺服端網頁（SP），並依介面編號及名

稱為該伺服端網頁訂定英文名稱。

2. 介面架構圖的表達（Presentation）轉換為客戶端網頁（CP），該客戶端網頁

是由第 1 點的伺服端網頁其建立關係（build）所自動產生而來。

3. 介面架構圖中，每一個客戶端網頁均產生一個相對應的表單類別（Form

Class）。

4. 客戶端網頁所使用之介面元件屬性可利用介面詞彙，並搭配步驟二「介面類

30

別屬性元素轉換」其對應關係，將介面元件屬性轉換為表單類別內的

ASP.Net 網頁控制項，故表單類別和客戶端網頁有「聚合」關係。

5. 依據第 2 點「表達」是由「控制」此伺服端網頁其建立關係自動產生而來，

故於產生「控制」伺服端網頁時，需將該控制相對應的表達所包含之介面

元件，一律產生出來。

將上述轉換步驟整理如表 4-1 所示之內容：

表 4-1 類別轉換對應介面編號及名

稱

code behind

superclass

伺服端網頁客戶端網頁表單類別

二、介面類別屬性元素轉換

PIM 中每一介面元件屬性在 Web PSM 應可對應至一個網頁元件。而在微軟

開發技術平台下，可將 PIM 中的介面元件屬性對應至 ASP.Net 控制項。

將介面元件屬性、ASP.Net 網頁控制項整理如表 4-2 所示。

表 4-2 介面元件屬性與 ASP.Net 網頁控制項對應表

介面元件屬性 ASP.Net 網頁控制項

Form <<HTML Form>>

Textbox <<ASP TextBox>>

Password <<ASP TextBox>> Password

Button <<ASP Button>>

Label <<ASP Label>>

RadioButton <<ASP RadioButtonList>>

Image <<ASP Image>>

Select <<ASP DropDownList>>

Table <<HTML table>>

<<ASP Table>>

<<ASP GridView>>用於表列式包含編輯、新增

（CommandField）等功能，可包含 ASP.NET 控

build

31


制項，例如：Label、TextBox 等。

介面元件屬性其表列式若包含編輯、新增，其所對應之 ASP.Net 網頁控制項

為<<ASP GridView>>，該網頁控制項屬性其對應細項如表 4-3 所示：

表 4-3 GridView 物件資料行欄位型別表

介面元件屬性 ASP GridView 物件資料行欄位型別屬性

編輯、新增、刪除 CommandField HeaderText

TextBox TemplateField HeaderText

Label TemplateField HeaderText

Select TemplateField HeaderText

RadioButton TemplateField HeaderText

表 4-3 中，介面元件屬性除了依據表 4-2 轉換為 ASP.Net 網頁控制項之外，

亦需再配合其相對應之資料行欄位型別，而 HeaderText 此屬性則是用以呈現該

資料行表頭名稱。

介面類別屬性元素轉換此步驟可藉由 PIM 階段所產出之介面詞彙的「元件

類型」進行屬性與網頁元件之對應。

三、類別關係轉換

類別間之關係轉換包含四種關聯，並利用 UI 狀態圖來處理網頁間控制權移

轉之關係。類別間關係轉換四種關聯如下所述：

1. 建立關聯（build）

伺服端網頁執行時，網站伺服器會將該伺服端網頁建立客戶端網頁，傳送給

瀏覽器解譯呈現；只要介面類別為伺服端網頁一定會有建立關聯存在。因伺服端

網頁會自動產生客戶端網頁，所以在產生伺服端網頁時需將相對應之介面屬性均

建立在伺服端網頁內。

2. 送出關聯（submit）

此關聯存在於表單（Form）與伺服端網頁間，將表單內之欄位值送出至伺

32

服端網頁進行處理。

3. 超連結關聯（link）

從客戶端網頁出發，其連結之目標可為客戶端網頁或伺服端網頁；兩個介面

類別間存在超連結關聯時，則此兩個介面類別存在連結關聯。

4. 重導關聯（redirect）

一個網頁處理控制傳送至另一網頁時，此為重導關聯。此關聯可由客戶端網

頁或伺服端網頁發起，重導至客戶端網頁或伺服端網頁。

將類別間關聯建立步驟描述如下：

1. 伺服端網頁會自動產生客戶端網頁，故與相對應之客戶端網頁有「建立」關

聯。

2. 客戶端網頁和表單間有「聚合」關聯。

3. 介面類別的操作是要處理表單網頁元件，則表單與操作所產生的伺服端網頁

兩者間有「送出」關聯。

4. 利用 UI 狀態圖可找出網頁間控制權移轉之關係，伺服端網頁與伺服端網頁

／客戶端網頁有「重導」關聯。

5. 依據參考文獻「第三節、網路應用程式」Conallen 提出微軟.NET Framework

此開發平台所建立之使用者介面物件包含：.aspx 檔案及 code behind

class，而 code behind class 是.aspx 檔案的超類別。.aspx 檔案用以放置介面

元件，而 code behind class 則是放置該介面的相關操作（event-handling

code），此物件之副檔名依其使用之語言而異，本研究使用 VB.Net，故其

物件副檔名為.aspx.vb。

經由上述三個步驟其轉換及對應，可將 PIM 產出之介面架構圖、介面詞彙

及 UI 狀態圖，利用 Rational Rose 此 Case Tool 繪製 Web PSM 類別圖。

第二節、使用者介面程式樣版對映

進行 Web PSM 轉換至使用者介面，其輸入是本章節第一節 Web PSM 所產

33

出之轉換對應結果與關聯，將第一節進行轉換後之結果，以 ASP.Net 及 VB.Net

程式碼為其轉換後之輸出。

利用需求塑模的結果，進行使用者介面塑模。使用者介面塑模包含，使用者

介面動態結構塑模（利用 UI 循序圖及 UI 狀態圖）以表達不同介面物件間或介

面元件互動順序與控制、使用者靜態結構塑模（利用介面架構圖、介面藍圖、介

面詞彙）來表達使用者介面物件結構及介面元件設計。

藉由介面架構圖找到伺服端網頁、客戶端網頁、表單類別及 ASP.Net 網頁控

制項，以下將介紹如何產生程式碼樣版的方法與步驟。

1. 利用介面架構圖將「控制」轉換為伺服端網頁（本章第一節步驟一第 1 點），

轉換伺服端網頁其名稱自行訂定。介面架構圖其控制轉換為伺服端網頁如

圖 4-1 所示。

圖 4-1 PAC─控制轉 SP

2. 利用介面架構圖將「表達」轉換為客戶端網頁（CP），該客戶端網頁是由第

1 點的伺服端網頁其建立關係（build）所自動產生而來（本章第一節步驟

一第 2 點）。介面架構圖其表達轉換為客戶端網頁如圖 4-2 所示。

34

圖 4-2 PAC─表達轉 CP

3. 每一個「表達」均產生一個相對應的表單類別，並將「表達」所使用之介面

元件利用介面詞彙，將介面元件轉換為 ASP.Net 網頁控制項（本章第一節

步驟一第 3～5 及步驟二），而網頁控制項的命名亦可利用介面詞彙的「資

料表欄位」內容，做為該控制項之名稱；依據步驟三表單與伺服端網頁存

在送出關聯（submit）。

依上述方法與步驟利用 Rational Rose 此 Case Tool 繪製出如圖 4-3Web PSM

類別圖。

圖 4-3 Web PSM 類別圖範例

4. 伺服端網頁可藉由「建立」關係自動產生客戶端網頁，而客戶端網頁會有相

對應的表單類別，所以在產生伺服端網頁時，需將該伺服端網頁相對應的

35

客戶端網頁所包含之介面元件，一律產生出來（本章第一節步驟一第 6

點）。利用上圖 Web PSM 並搭配介面藍圖（用以了解介面元件之配置），

可產生如表 4-4 之程式碼樣版。

表 4-4 伺服端網頁程式碼樣版館員登入 UI

配合介面藍圖進行網頁控制項之配置（Login.aspx） <%@ Page Language="VB" AutoEventWireup="false" CodeFile="login.aspx.vb" Inherits="login" title="館員登入" %> <html> <body> <form id ="form1" runat="server">

<table> <tr>

<td>帳號:</td> <td>

<asp:textbox id="User_Id" runat="server"></asp:textbox> </td>

</tr> <tr>

<td>密碼:</td> <td>

<asp:textbox id="User_Pwd" runat="server" TextMode="Password"></asp:textbox>

</td> </tr> <tr>

<td colspan="2" align="center"> <asp:Button ID="btnLogin" runat="server" Text="登入" />

</td> </tr>

</table> </form> </body> </html>

Login.aspx.vb

36

Partial Class Login '預設以檔名 Login 為 Class 的名稱 Inherits System.Web.UI.Page '依據 Web PSM 類別圖之操作產生程式碼樣版 Sub Login(ByVal User_Id as String, ByVal User_Pwd as String) Handles btnLogin.Click '此為 event-handling code，按了登入按鈕所進行之處理

End Sub End Class

Login.aspx.vb 此類別圖有一函式為 Login，產生程式碼時需補上事件處理程

式碼（event-handling code）也就是 Handles 此關鍵字，以及哪一個 ASP.Net 網頁

控制項之觸發事件行為。

於上例中，指的是按了登入按鈕之後，所需進行之處理，所以 Handles 關鍵字之後，

是利用 Login.aspx 內登入按鈕的 ID，也就是 btnLogin 得知是要觸發哪一個控制項來進

行處理。

第三節、 PIM 產出與 Web PSM 對應整理

依據本章第一節及第二節內容將 PIM 相關產出，與微軟.NET Framework 開

發平台其 Web PSM 轉換步驟，及使用者介面程式樣版彼此間之對應關係整理如

表 4-5 所示：

表 4-5 PIM 產出與 Web PSM 轉換關係表轉換步驟所利用之 PIM 產出目的

介面類別的轉換介面架構圖將介面轉換為伺服端網

頁、客戶端網頁、表單等

類別介面詞彙產生表單內的網頁元件

介面類別屬性元素轉換介面詞彙將介面內的屬性用以對

應為 ASP.Net 網頁控制

項

37

轉換步驟所利用之 PIM 產出目的

類別關係轉換介面架構圖介面類別的轉換之結果

進行類別關係的轉換 UI 狀態圖用以找出網頁間控制權

之移轉使用者介面程式對映介面藍圖表單 ASP.Net 網頁控制

項配置之參考

38

第五章、展示

第一節、公司簡介

D 科技股份有限公司於 2007 年創立，總公司位於高雄，於台北有一辦事處。

D 公司主要營業項目是依客戶需求來進行網路應用系統之規劃及開發，其系統開

發平台主要使用 Micorsoft .NET Framework

因應客戶需求多樣化、專案時程有限，及員工不可能無限制增加等因素，D

公司希望能將撰寫程式此部份進行外包，然而，D 公司其系統分析設計文件大都

著重在系統功能描述及資料庫規劃，在使用者介面上著墨甚少，為了能順利將程

式委外進行，D 公司希望能針對系統分析設計文件進行補強。

本研究提出微軟.NET Framework 開發平台使用者介面轉換方法論，能補強

D 公司系統分析設計文件其使用者介面之分析與設計，以達到其委外目的，進而

確保委外產出之品質。

第二節、測試項目實施與過程

一、計畫與事前工作

利用 D 公司所提供之實際案例進行測試與觀察，其案例為典藏管理系統其

「建立擬藏品資料使用個案」，利用此案例在 PIM 塑模階段所產出之介面架構

圖、介面詞彙、介面狀態圖，及介面藍圖做為方法論的輸入，依據方法論人工產

生程式碼樣版，並邀請 D 公司 5 位工程師參與測試過程，並說明測試工作內容。

招募之工程師均有微軟.NET Framework 此開發平台開發之相關經驗，且不限所

使用之開發語言。

二、招募參與者與排定工作時程

定於民國 100 年 5 月 31 日，地點為 D 公司會議室邀請兩位 J 工程師、一位

39

T 工程師、一位 H 工程師及一位 L 工程師參與測試工作。因參與人員要求不要

揭露姓名及職稱，故以參與人員姓氏第一碼英文字母做為代表，而職稱一律以工

程師做代表。

三、執行測試工作

依所排定之計畫進行測試，以正確性做為評估 Web PSM 轉換方法論之準

則，來衡量方法論是否有效。

1. 針對方法論輸入文件部份，評估針對網路應用系統所使用之 PIM 塑模圖形，

是否恰當及合理。

2. 利用方法論所產出之 Web PSM 類別圖所對映之 ASP.Net 網頁控制項之正確

性。

3. 評估程式碼樣版的實用性與正確性。

四、結果分析與報告

請參與人員依據正確性其評估準則提出其意見，紀錄相關意見後，依據參與

人員回饋意見分析所進行之測試工作，是否符合網路應用系統其使用者介面開發

所需。

第三節、個案─典藏管理系統「建立擬藏品資料使用個案」

一、背景

T 博物館成立於 1998 年，致力於保存及維護與臺灣歷史相關之文化資產。

博物館自籌備處以來，取得為數可觀的藏品，由於博物館並未將藏品資料資訊

化，以致藏品資料未能統一管理，散落於各個承辦人手中。為了有效管理博物館

藏品，因此決定建置典藏管理系統，以達到博物館藏品資料集中管理之目的。

由於 T 博物館並無相關資訊背景人員，針對典藏管理系統之建置以委外開

發之方式進行，並將該系統建置委由 D 公司進行開發。T 博物館則由進行藏品典

藏管理相關承辦人員及該組室主管一同參與該建置案之進行。D 公司取得該系統

40

建置專案後，旋即由專案經理統籌建立專案團隊著手進行規劃，並由系統分析師

利用博物館所提供之相關文件、需求訪談等方式來進行需求擷取。

D 公司專案團隊了解 T 博物館成立之目的緣由，及該博物館資訊設備基礎設

備後，再加與 T 博物館參與人員經過多次會議討論，將 T 博物館典藏管理系統

其目標及限制、使用者與企業需求（作業與功能）分別描述如下：

二、系統目標及限制

1. 文物典藏管理系統其使用對象為館員，且所使用之瀏覽器為 Microsoft

Internet Explorer。

2. 建置一個 Web-based 文物典藏管理系統，提供館員利用瀏覽器之操作來完成

藏品之管理。

三、使用者與企業需求描述

T 博物館文物典藏管理系統其作業與需求功能描述如下所述：

1. 館員若身份為資訊人員登入文物典藏管理系統，並可建立欲使用之人員帳號

基本資料（表 5-1 及表 5-2）。

2. 館員可以透過 Microsoft Internet Explorer 瀏覽器登入文物典藏管理系統後，

才能進行擬藏品資料瀏覽。

3. 館員取得擬藏品資料時，可以建立、查詢該批擬藏品資料（表 5-3 及表 5-4）

後，再建立擬藏品清單（表 5-5 及表 5-6）。

4. 館員可從擬藏品清單來決定入藏藏品有哪些，並將入藏藏品轉至藏品編目資

料（表 5-7 及表 5-8）內，進行藏品編目資料之編輯。

四、藍圖及資料詞彙

表 5-1 帳號基本資料藍圖

T 博物館

帳號基本資料

帳號 A eva0101 密碼 B ******

姓名 C 丁小雨是否啟用 D 啟用

資訊人員 E 是

41

表 5-2 帳號基本資料詞彙

編號欄位名稱長度／型態鍵規則／格式／範圍

／公式

範例

A 帳號 10C v 英數字 eva0101

B 密碼 10C

C 姓名 10C 丁小雨

D 是否啟用 1C 1：啟用、2：暫停

預設值為 1

1

E 資訊人員 1C 1：是、2：否

預設值為 2

1

表 5-3 擬藏品基本資料藍圖

T 博物館

擬藏品基本資料

文物批號 A-B 2011.001 取得方式 C 捐贈

捐贈人 D 曾建康提供日期 F 2011/01/05

文物總稱 E 常民生活文物

表 5-4 擬藏品基本資料詞彙


／公式

範例

A 入藏年度 4C v YYYY

預設值為當年度

2011

B 批次號 3C v 由系統判斷此次新

增資料為該西元年

第幾批次資料

001

C 取得方式 2C 01：購入、02：捐贈、

03：交換、04：託管、

05：貸入

02

42

預設值為 01

D 捐贈人 50C 曾建康

E 文物總稱 100C 常民生活

文物

F 提供日期 8C YYYY/MM/DD 2011/01/05

表 5-5 擬藏品清單藍圖

T 博物館

擬藏品清單

擬登錄編號 A-C 2011.001.0001 原登錄名稱 D 古小皿

文物年代 E 1962 文物金額 F 2,000

文物件數 G 1 藏品狀況 H 佳

入藏否 I 未決

表 5-6 擬藏品清單資料詞彙


／公式

範例

A 入藏年度 4C v YYYY 2011

B 批次號 3C v 999 001

C 流水號 4C v 由系統判斷此藏品

為該批的第幾件

9999

0001

D 原登錄名稱 200C 古小皿

E 文物年代 20C YYYY 或西元前 1962

F 文物金額 10N 9,999,999,999 2,000

G 文物件數 3N 999 1

H 藏品狀況 1C 1：差、2：可、3：

良、4：佳

4

I 入藏 1C Y：入藏、N：不入 T

43


／公式

範例

藏、T：未決

預設值為 T

表 5-7 編目資料藍圖

T 博物館

編目資料

藏品登錄號 A-C 2011.001.0001 藏品分類 D 器物

藏品分級 E 一般古物編目狀態 F 待編目

件數 G 1 年代 H 1962

藏品名稱 I 古小皿

入藏日期 J 2011/03/13 保險金額 K 2,000

藏品描述 L

藏品歷史 M

相關研究描述 O

表 5-8 編目資料詞彙


／公式

範例

A 入藏年度 4C v YYYY 2011

B 批次號 3C v 999 001

C 流水號 4C v 由系統判斷此藏品

為該批的第幾件

9999

0001

D 藏品分類 2C 01：器物、02：書目

資料、03：電影作

品、04：老照片、05：

古地圖、06：古文書

01

44

預設值為 01

E 藏品分級 1C 1：國寶、2：重要古

物、3：一般古物

預設值為 3

3

F 編目狀態 1C 1：待編目、2：編目

中、3：已完成

預設值為 1

1

G 件數 3N 999 1

H 年代 20C 1962

I 藏品名稱 200C 古小皿

J 入藏日期 8C YYYY/MM/DD 2011/03/13

K 保險金額 10N 9,999,999,999 2,000

L 藏品描述 2000C

M 藏品歷史 2000C

O 相關研究描述 2000C

需求塑模─建構使用個案圖

使用個案圖其建構步驟依序如下：找出行為者、找出使用個案、描述使用個

案、找出使用個案間之關係、繪製使用個案。

依據上述步驟並配合案例其程序如下所述：

一、找出行為者

行為者可利用本章第一節的使用者與企業需求描述，以主詞┼動詞┼受詞此

方式整理出下列之事件條列式：

1. 館員┼登入建立┼帳號基本資料。

2. 館員┼登入瀏覽┼擬藏品資料。

3. 館員┼建立┼擬藏品資料。

4. 館員┼建立┼擬藏品清單。

5. 館員┼編輯┼編目資料。

45

依據上述事件條列式其所包含之名詞有：館員、擬藏品資料、擬藏品清單、

編目資料，其中館員可興系統進行互動，故館員為行為者。

二、找出使用個案

利用第一個步驟所找出的行為者逐一找出其所參與或引發的每一個事件，並

將一系列事件有組織地集合起來，並依所符合之內聚力原則，來組合成一個使用

個案。

依據使用者與企業需求描述，以行為者─館員來找出其所參與或引發的事

件，其說明如下：

1. 由使用者與企業需求描述 1 的事件描述，可找出館員有建立帳號之使用個

案，館員新增帳號基本資料。

2. 由使用者與企業需求描述 2～3 一系列事件描述，可找出館員有建立擬藏品

資料之使用個案，館員建立擬藏品資料。

3. 由使用者與企業需求描述 4 的事件描述，可找出館員有編輯編目資料之使用

個案，館員編輯編目資料。

三、描述使用個案

使用個案描述是以使用者觀點，來描述使用者欲達成之目的，並不牽涉程式

邏輯。而完整的使用個案包含行為者、使用個案目標、使用個案發生之前提與結

束狀態、及一系列事件描述（包含正常程序及例外狀況）。

依上述原則，將 T 博物館三個使用個案描述如表 5-9～表 5-11 所示：

表 5-9 建立帳號使用個案

T 博物館

使用個案名稱：建立帳號

行為者：館員

目標：館員能在線上建立館員帳號

前提：館員身份為資訊人員，且該館員帳號可正常使用

結束狀態：帳號建立完成

一系列事件：

正常程序─

46

1. 館員輸入帳號、密碼後，按登入鍵。

2. 驗證成功登入系統，顯示帳號列表、擬藏品列表及編目列表 3 個功能選項。

3. 點選帳號列表可瀏覽帳號資料（表 5-1 及表 5-2）。

4. 館員點選建立，進入帳號基本資料畫面。

5. 館員填寫帳號、密碼、姓名、是否啟用、是否為資訊人員等資料，按儲存

鍵。

6. 介面顯示帳號建立成功。

例外狀況─

館員無法登入系統。

於登入頁面顯示登入系統之帳號或密碼錯誤，或該帳號已停用。

所建立之帳號已存在。

顯示該帳號已存在，不得再建立。

表 5-10 建立擬藏品資料使用個案

T 博物館

使用個案名稱：建立擬藏品資料

行為者：館員

目標：館員能在線上進行擬藏品資料建立

前提：館員有登入系統之帳號，且該帳號可正常使用

結束狀態：擬藏品清單轉編目完成

一系列事件：

正常程序─



3. 點選擬藏品列表可瀏覽擬藏品列表資料（表 5-3 及表 5-4）。

4. 館員按建立鍵進入擬藏品資料畫面。

5. 館員輸入入藏年度、取得方式、捐贈人、文物總稱、提供日期等資料，按

儲存鍵。

47

6. 擬藏品資料儲存成功後，館員可按建立鍵進入擬藏品清單畫面（表 5-5 及

表 5-6）。

7. 館員輸入原登錄名稱、文物年代、文物金額、文物件數、藏品狀況、入藏

等資料，按儲存鍵。

8. 儲存擬藏品清單成功，自動將入藏擬藏品清單拋轉至編目資料（表 5-7 及

表 5-8）。

9. 顯示拋轉至編目資料成功。

10. 按返回鍵回到擬藏品資料畫面，可繼續建立清單，或是按返回鍵回到擬藏

品列表畫面。

11. 於擬藏品列表畫面可繼續建立擬藏品資料，或是按返回鍵回功能選項。

例外狀況─



儲存擬藏品資料失敗。

顯示儲存失敗錯誤訊息。

儲存擬藏品清單失敗。

顯示儲存失敗錯誤訊息。

擬藏品清單拋轉編目資料失敗。

顯示拋轉失敗錯誤訊息。

按拋轉編目鍵進行手動拋轉。

表 5-11 編輯編目資料使用個案

T 博物館

使用個案名稱：編輯編目資料

行為者：館員

目標：館員能在線上進行擬編目資料編輯

前提：館員有登入系統之帳號，且該帳號可正常使用；已存在編目資料

結束狀態：編輯編目資料成功

48

一系列事件：

正常程序─



3. 點選編目列表可瀏覽編目資料（表 5-7 及表 5-8）。

4. 點選欲進行編輯之編目資料，進入編目編輯畫面（表 5-7 及表 5-8）。

5. 輸入藏品描述、藏品歷史、相關研究描述等資料，按儲存鍵。

6. 介面顯示編目資料儲存成功。

例外狀況─



編目資料儲存失敗。

顯示儲存失敗訊息。

四、找出使用個案間之關係

依上述使用個案描述發現，本案例均為單一個案，個案間並無關係存在。

五、繪製使用個案圖

依序完成上述步驟後，可進行使用個案之繪製，圖 5-1 為利用 Case Tool 所

繪製之使用個案圖：

圖 5-1 T 博物館文物典藏管理系統使用個案圖

49

需求塑模─建構活動圖

活動圖其建構步驟為：找出活動、找出活動間之轉換、條件或介面物件、繪

製活動圖。以 T 博物館文物典藏管理系統來進行活動圖之建構，以了解每一個

使用個案其內部行為為何。依其步驟描述如下：

一、找出活動

依據使用者與企業需求描述及使用個案描述找出其活動及所參與之實體。利

用上述三個使用個案描述來找出其活動為何。

建立帳號使用個案：有登入、瀏覽、建立、顯示等活動；有行為者─館員之

參與。

建立擬藏品資料使用個案：有登入、建立、顯示、拋轉等活動；有行為者─

館員之參與。

編輯編目資料使用個案：有登入、編輯、顯示等活動；有行為者─館員之參

與。

二、找出活動間之轉換、條件或介面物件

利用使用個案描述內一系列事件描述之內容，找出每個活動間之轉換、執行

程序及介面物件；介面物件包含資料輸入出格式、欄位。

以建立帳號使用個案為例，館員瀏覽帳號基本資料時，系統呈現帳號、姓名、

啟用、資訊人員等資訊提供給館員。

三、繪製活動圖

找出活動及活動間之轉換、條件或介面物件後，即可進行活動圖之繪製，各

個使用個案其活動圖如圖 5-2～圖 5-4 所示。

50

圖 5-2 建立帳號活動圖

51

圖 5-3 建立擬藏品資料活動圖

52

圖 5-4 編輯編目資料活動圖

使用者介面塑模

使用者介面塑模包括了靜態結構塑模及動態行為塑模。靜態結構塑模包含了

使用者介面架構圖、介面藍圖及介面詞彙；動態行為塑模則包含了 UI 循序圖、

AC 循序圖，及狀態圖。以 T 博物館所完成的使用個案圖及活動圖來進行使用者

介面塑模。

本節進行塑模之順序為：UI 循序圖、靜態結構塑模（包含使用者介面架構

圖、介面藍圖及介面詞彙）、狀態圖。茲分述如下：

一、 UI 循序圖

利用所完成之使用個案描述，及活動圖註記來進行。UI 循序圖其建構步驟

為：確認物件（找出介面物件與控制物件）、確認操作與訊息、繪製 UI 循序圖。

依其步驟描述如下：

53

1. 找出介面物件與控制物件

依據建立擬藏品資料使用個案描述，及活動圖註記找出介面物件與控制物

件，並將其物件、屬性與操作整理如表 5-12 所示：

表 5-12 建立擬藏品資料使用個案介面與控制物件


物件屬性操作

介面物件

館員登入 UI 帳號登入()

密碼

登入

功能選項 UI 帳號列表顯示帳號列表()

擬藏品列表顯示擬藏品列表()

編目列表顯示編目列表()

擬藏品列表 UI 文物批號建立擬藏品()

文物總稱編輯擬藏品資料()

取得方式返回()

建立

編輯

返回

擬藏品資料 UI 入藏年度儲存擬藏品資料()

取得方式建立清單()

捐贈人返回()

提供日期

文物總稱

儲存

建立清單

返回

擬藏品清單建立 UI 原登錄名稱儲存擬藏品清單()

54


物件屬性操作

文物年代返回()

文物金額

文物件數

藏品狀況

入藏否

返回

儲存

拋轉編目

控制物件

登入登入()

建立建立擬藏品()

建立清單()

儲存儲存擬藏品資料()

儲存擬藏品清單()

拋轉編目()

顯示儲存結果()

顯示登入失敗訊息()

載入功能選項()

載入擬藏品列表()

顯示儲存結果()

載入擬藏品資料()

載入擬藏品清單()

2. 確認物件間之訊息與操作

上述分析中，可找出有五個介面物件和四個控制物件；將四個控制物件濃縮

為系統應用程式核心（Application Core），此 AC 與五個介面物件會有訊息傳遞

與操作，可利用建立擬藏品資料使用個案描述或活動圖註記找出來，並將其整理

55

如表 5-13 所示：

表 5-13 建立擬藏品資料 UI 循序圖之訊息與操作

館員與系統之互動關係呼叫物件操作（訊息）接受物件

1. 館員透過「館員登入

UI」，輸入帳號及密碼

後提交給系統。

1. 館員登入(帳號、密碼) 館員登入 UI

2. 館員登入 UI 登入(帳號、密碼) AC

2. 系統驗證館員輸入資

料正確後，載入「功能

選項 UI」。

3. AC 載入功能選項

UI()

功能選項 UI

3. 館員點選擬藏品列

表，系統載入「擬藏品

列表 UI」。

4. 館員顯示擬藏品列表

()

擬藏品列表 UI

5. 擬藏品列表UI 載入擬藏品列表

資料()

擬藏品列表 UI

4. 館員欲建立擬藏品基

本資料可在「擬藏品列

表 UI」點選建立，系

統將載入「擬藏品資料

UI」，讓館員輸入資料

後提交給系統。

6. 館員擬藏品資料建立

()

擬藏品資料 UI

7. 擬藏品資料UI 儲存擬藏品資料

()

AC

8. AC 顯示儲存結果() 擬藏品資料 UI

5. 館員建立擬藏品資料

後，可點選建立清單，

系統將載入「擬藏品清

單 UI」，輸入資料後提

交給系統。

9. 館員建立清單() 擬藏品清單 UI

10. 擬藏品清單UI 儲存擬藏品清單

()

AC

11. AC 顯示儲存結果() 擬藏品清單 UI

6. 館員將擬藏品清單拋

轉至編目。

12. 館員拋轉編目() 擬藏品清單 UI

13. 擬藏品清單UI 儲存編目資料() AC

14. AC 顯示儲存結果() 擬藏品清單 UI

56

3. 繪製 UI 循序圖

依據建立擬藏品資料使用個案描述及其活動圖找出介面物件與控制物件、確

認物件間的訊息與操作後，繪製 UI 循序圖，如圖 5-5 所示：

圖 5-5 建立擬藏品資料使用個案 UI 循序圖

二、靜態結構塑模

用以表達使用者介面及介面元件間的配置關係。靜態結構塑模包含了使用者

介面架構圖、介面藍圖及介面詞彙。

依所產出之活動圖內，其輸出入註記進行介面之設計，並根據活動圖的執行

順序來建構系統完整介面架構圖。以 T 博物館文物典藏管理系統而言，共有三

個使用個案將其編號為：1.建立帳號、2. 建立擬藏品資料、3. 編輯編目資料。

opt [選擇顯示擬藏品列表]

opt [選擇建立擬藏品]

loop

opt [選擇拋轉編目]

57

再利用活動圖進行介面和執行程序之分析，以建立帳號活動圖為例，共有四個介

面，依其執行順序以 1.1、1.2、1.3、1.4 進行編號，依上述所繪製之介面架構圖

如圖 5-6 所示：

圖 5-6 T 博物館文物典藏管理介面架構圖

運用 PAC 概念進行介面的表達及摘述，以介面藍圖來表達介面，介面詞彙

來表達介面摘述。因目前尚無 Case Tool 可產生 ASP.Net 及 VB.Net 程式碼，無法

將相關函式說明輸入轉出，故將函式說明紀錄在介面詞彙內其函式定義處。茲將

三個使用個案其介面藍圖及介面詞彙表達如圖 5-7～圖 5-15 及表 5-14～表 5-22

所示：

58

圖 5-7 館員登入介面藍圖

表 5-14 館員登入介面詞彙

介面代號 1.1/2.1/3.1 介面名稱館員登入 UI

介面說明館員可以輸入帳號與密碼登入系統進行瀏覽與建立

元件名稱元件類型元件功能及概念說明資料表欄位資料型態（長度）

帳號 Textbox 輸入帳號之處 User_Id Char(10)

密碼 Textbox 輸入密碼之處 User_Pwd Char(10)

登入 Button 輸入之帳號與密碼進行

驗證

函式定義

Login (User_Id, User_Pwd)

限制與註解館員未輸入正確的帳號及密碼，或其啟用狀態為暫停，無法登入系統

圖 5-8 功能選項介面藍圖

表 5-15 功能選項介面詞彙

介面代號 1.2/2.2/3.2 介面名稱功能選項 UI

介面說明館員登入後，可自行擇定欲進行之作業頁面


59

帳號列表 Button 用以連結帳號列表頁面

擬藏品列表 Button 用以連結擬藏品列表頁

面

編目列表 Button 用以連結編目列表頁面

函式定義

LinkToAccount()：用以連結至帳號列表頁面。

LinkToPreCollect()：用以連結至擬藏品列表頁面。

LinkToCatalogue()：用以連結至編目列表頁面。

限制與註解無。

圖 5-9 帳號列表介面藍圖

表 5-16 帳號列表介面詞彙

介面代號 1.3 介面名稱帳號列表 UI

介面說明館員可瀏覽帳號資料，或建立帳號資料


帳號 Table 用以顯示帳號 User_Id

姓名 Table 用以顯示館員姓名 User_Name

是否啟用 Table 用以顯示館員帳號是否

啟用

User_Enabled

資訊人員否 Table 用以顯示館員身份是否

為資訊人員

User_Type

編輯 Image 按下此按鈕進入帳號編

60

輯畫面

建立 Button 按下此按鈕進入帳號建

立介面

返回 Button 按下此按鈕返回功能選

項 UI

函式定義

BindData ()：頁面載入時，呈現所有帳號資料。

Create()：進入帳號資料建立 UI，進行帳號建立。

Back()：返回功能選項 UI。

BindUser_Enabled(User_Enabled)：呈現"是否啟用"中文內容。

BindUser_Type(User_Type)：呈現"資訊人員否"中文內容。

edit(User_Id)：進入帳號資料建立 UI。

限制與註解館員為資訊人員之身份，才能進行帳號之建立；非資訊人員僅能瀏覽

帳號資料

圖 5-10 帳號資料建立介面藍圖

表 5-17 帳號資料建立介面詞彙

介面代號 1.4 介面名稱帳號資料建立 UI

介面說明館員進行帳號資料之建立


帳號 Textbox 輸入帳號之處 User_Id Char(10)

61

密碼 Textbox 輸入密碼之處 User_Pwd Char(10)

姓名 Textbox 輸入館員姓名之處 User_Name Char(10)

是否啟用 RadioButton 擇定該館員帳號是否啟

用

User_Enabled Char(1)

資訊人員 RadioButton 擇定該館員身份是否為

資訊人員

User_Type Char(1)

儲存 Button 按下此按鈕進行帳號資

料存檔

返回 Button 按下此按鈕返回帳號列

表 UI

函式定義

BindEditData(User_Id)：繫結欲進行編輯之帳號資料。

Save()：儲存帳號資料。

Back()：返回帳號列表 UI。

限制與註解所建立之帳號不得重複

帳號不得空白

圖 5-11 擬藏品列表介面藍圖

表 5-18 擬藏品列表介面詞彙

介面代號 2.3 介面名稱擬藏品列表 UI

介面說明館員可瀏覽擬藏品資料，或建立擬藏品資料


文物批號 Label 用以顯示文物批號 CollectYear + ’.’

62

+ BatchNo

文物總稱 Label 用以顯示文物總稱 WholeName

取得方式 Label 用以顯示取得方式 GetWay

編輯 Image 按下此按鈕進入擬藏品

編輯畫面

建立 Button 按下此按鈕進入擬藏品

建立介面


項 UI

函式定義

BindData()：頁面載入時，呈現擬藏品資料。

edit(CollectYear, BatchNo)：進入擬藏品建立 UI，以編輯資料。

Create()：進入擬藏品建立 UI，建立擬藏品。

BindBatchNo(CollectYear, BatchNo)：繫結入藏年度及批次號，以呈現文物批號。

BindGetWay(GetWay)：呈現"取得方式"中文內容。


限制與註解無

圖 5-12 擬藏品建立介面藍圖

表 5-19 擬藏品建立介面詞彙

介面代號 2.4 介面名稱擬藏品建立 UI

63

介面說明館員進行擬藏品建立


入藏年度 Textbox 輸入入藏年度之處 CollectYear Char(4)

取得方式 Select 擇定取得方式 GetWay Char(2)

捐贈人 Textbox 輸入捐贈人之處 Donator Varchar(50)

提供日期 Textbox 選擇提供日期 ProvideDate Char(8)

文物總稱 Textbox 輸入文物總稱之處 WholeName Varchar(100)

儲存 Button 按下此按鈕進行擬藏品

資料之建立

清單建立 Button 按下此按鈕進入清單建

立介面

返回 Button 按下此按鈕返回擬藏品

列表 UI

函式定義

BindEditData(CollectYear, BatchNo)：繫結欲進行編輯之擬藏品資料。

Save()：儲存擬藏品資料。

CreateList(CollectYear, BatchNo)：進入擬藏品清單建立 UI，進行擬藏品清單建立。

Back()：返回擬藏品列表 UI。

限制與註解無

64

圖 5-13 擬藏品清單建立介面藍圖

表 5-20 擬藏品清單建立介面詞彙

介面代號 2.5 介面名稱擬藏品清單建立 UI

介面說明館員進行擬藏品清單建立


原登錄名稱 Textbox 輸入原登錄名稱之處 OriginalName Varchar(200)

文物年代 Textbox 輸入文物年代之處 AnitiqueTime Varchar(20)

文物金額 Textbox 輸入文物金額之處 AnitiqueValue Int

文物件數 Textbox 輸入文物件數之處 ItemNo Int

藏品狀況 Select 擇定藏品狀況 AnitiqueStatus Char(1)

入藏否 Select 擇定是否入藏 CollectStatus Char(1)

儲存 Button 按下此按鈕進行擬藏品

清單之建立

拋轉編目 Button 按下此按鈕將所建立之

擬藏品清單資料轉至編

目

返回 Button 按下此按鈕返回擬藏品

清料建立 UI

65

編輯 Image 按下此按鈕將卻編輯之

資料繫結至UI內的控制

項

原登錄名稱 Label 列表呈現原登錄名稱

文物金額 Label 列表呈現文物金額

文物件數 Label 列表呈現文物件數

入藏否 Label 列表呈現入藏否

函式定義

BindData(CollectYear, BatchNo)：頁面載入時，呈現特定年度及批次號擬藏品清單資料。

BindCollectStatus(CollectStatus)：呈現"入藏否"中文內容

Save()：儲存擬藏品清單資料。

edit(CollectYear, BatchNo, SerialNo)：編輯擬藏品清單資料。

Transform()：擬藏品清單資料拋轉至編目資料表。

Back()：返回擬藏品建立 UI。

限制與註解擬藏品清單建立成功後，將入藏文物自動拋轉至編目

圖 5-14 編目列表介面藍圖

表 5-21 編目列表介面詞彙

介面代號 3.3 介面名稱編目列表 UI

介面說明館員可瀏覽編目資料，或編輯編目資料


藏品登錄號 Table 用以顯示藏品登錄號 CollectYear + ’.’

+ BatchNo + ’.’

66

+ SerialNo

藏品名稱 Table 用以顯示藏品名稱 AnitiqueName Varchar(200)

藏品分類 Table 用以顯示藏品分類 AnitiqueType Char(2)

藏品分級 Table 用以顯示藏品分級 AnitiqueLevel Char(2)

件數 Table 用以顯示件數 ItemNo Int

編輯 Image 按下此按鈕進入編目編

輯介面


項 UI

函式定義

BindData()：頁面載入時，呈現編目資料。

BindRegisterNo(CollectYear, BatchNo, SerialNo)：繫結入藏年度、批次號及流水號，以呈現

藏品登錄號。

BindAntiqueType(AnitiqueType)：呈現"藏品分類"中文。

BindAntiqueLevel(AntiqueLevel)：呈現"藏品分級"中文。


edit(CollectYear, BatchNo, SerialNo)：進入編目編輯 UI，以編輯資料。

限制與註解無

67

圖 5-15 編目編輯介面藍圖

表 5-22 編目編輯介面詞彙

介面代號 3.4 介面名稱編目編輯 UI

介面說明館員可進行編目資料之編輯


藏品登錄號 Label 用以顯示藏品登錄號 CollectYear + ’.’

+ BatchNo + ’.’

+ SerialNo

藏品名稱 Textbox 用以輸入藏品名稱 AnitiqueName Varchar(200)

藏品分類 Select 用以擇定藏品分類 AnitiqueType Char(2)

藏品分級 Select 用以擇定藏品分級 AnitiqueLevel Char(2)

編目狀態 Select 用以擇定藏品狀況 CatalogueStatus Char(1)

件數 Textbox 用以輸入藏品件數 ItemNo Int

年代 Textbox 用以輸入藏品名稱 AnitiqueTime Varchar(20)

入藏日期 Textbox 用以擇定入藏日期 CollectDate Char(8)

68

保險金額 Textbox 用以輸入保險金額 Insurance Int

藏品描述 Textbox 用以輸入藏品描述 Description Varchar(2000)

藏品歷史 Textbox 用以輸入藏品歷史 History Varchar(2000)

相關研究描述 Textbox 用以輸入相關研究描述 Research Varchar(2000)

儲存指令鈕按下此按鈕將編輯之資

料儲存起來

返回 Button 按下此按鈕返回編目列

表 UI

函式定義

BindEditData(CollectYear, BatchNo, SerialNo)：繫結欲進行編輯之編目資料。

Save()：儲存編目資料。

Back()：返回編目列表 UI。

限制與註解無

三、狀態圖

利用介面藍圖及 UI 循序圖找出介面狀態間之轉換，並繪製狀態圖，其結果

如下列所示：

69

圖 5-16 建立擬藏品資料使用個案 UI 狀態圖

PIM 轉 Web PSM

本章節利用「建立擬藏品資料使用個案」來進行 PIM 轉至 Web PSM 其轉換

步驟如下：介面類別的轉換、介面類別屬性元素轉換、類別關係轉換。將上述轉

換步驟描述如下：

一、介面類別的轉換

70

依據第四章所提之「介面類別的轉換」方式來進行介面類別之轉換，利用

PIM 所產出之介面架構圖（轉換範圍如圖 5-17 紅框部份），及介面詞彙（表 5-14、

表 5-15、表 5-18、表 5-19、表 5-20）做為此步驟之輸入，其進行步驟如下所述：

圖 5-17 轉換範圍之介面架構圖

1. 介面架構圖的控制轉換為伺服端網頁，並依介面編號及名稱為該伺服端網頁

訂定英文名稱。

2. 介面架構圖的表達（Presentation）轉換為客戶端網頁（CP），該客戶端網頁

是由第 1 點的伺服端網頁其建立關係（build）所自動產生而來。

3. 介面架構圖中，每一個客戶端網頁均產生一個相對應的表單類別（Form

Class）。

4. 客戶端網頁所使用之介面元件屬性可利用介面詞彙，並搭配步驟二「介面類

別屬性元素轉換」其對應關係，將介面元件屬性轉換為表單類別內的

71

ASP.Net 網頁控制項。

5. 依據第 2 點「表達」是由「控制」此伺服端網頁其建立關係自動產生而來，

故於產生「控制」伺服端網頁時，需將該控制相對應的表達所包含之介面

元件，一律產生出來。

將上述步驟整理如表 5-23 所示：

表 5-23 建立擬藏品資料使用個案介面與伺服端網頁對應介面編號及名稱伺服端網頁客戶端網頁表單類別

2.1 館員登入 UI Login.aspx X V

2.2 功能選項 UI Menu.aspx X V

2.3 擬藏品列表 UI PreCollectList.aspx X V

2.4 擬藏品建立 UI CreatePreCollect.aspx X V

2.5 擬藏品清單建立 UI CreatePreList.aspx X V

二、類別屬性對應網頁元件

本案例以 Microsoft .NET Framework 為其開發技術平台，所使用之程式語言

為 VB.Net，可參考表 5-24 介面元件屬性與 ASP.Net 網頁控制項對應表進行對應

轉換，利用介面詞彙其元件類型來進行與 ASP.Net 網頁控制項對應轉換，其轉換

結果可參照表 5-25：

表 5-24 介面屬性與 ASP.Net 網頁控制項對應表


Form <<HTML Form>>

Textbox <<ASP TextBox>>

Password <<ASP TextBox>> Password


Label <<ASP Label>>

RadioButton <<ASP RadioButtonList>>

Image <<ASP Image>>

build

72


Select <<ASP DropDownList>>

Table <<HTML table>>

<<ASP Table>>

<<ASP GridView>>用於表列式包含編輯、新增

（CommandField）等功能，可包含 ASP.NET 控

制項，例如：Label、TextBox 等。

表 5-25 建立擬藏品資料使用個案類別屬性網頁元件對照表

類別/屬性資料表欄位資料型態元件類型 ASP.Net 控制項

2.1 館員登入

UI

帳號 User_Id String Textbox <<ASP TextBox>>

密碼 User_Pwd String Textbox <<ASP TextBox>>

登入 btnLogin Button <<ASP Button>>

2.2 功能選項

UI

帳號列表 btnAccount Button <<ASP Button>>

擬藏品列表 btnPreCollec

t


編目列表 btnCatalogue Button <<ASP Button>>

2.3 擬藏品列

表 UI

編輯 Image <<ASP

GridView>>CommandF

ield

文物批號 BatchNo Label <<ASP

73


GridView>>Label

文物總稱 WholeName Label <<ASP

GridView>>BoundField

取得方式 GetWay Label <<ASP

GridView>>Label

建立 btnCreate Button <<ASP Button>>

返回 btnBack Button <<ASP Button>>

2.4 擬藏品建

立 UI

入藏年度 CollectYear String Textbox <<ASP TextBox>>

取得方式 GetWay String Select <<ASP

DropDownList>>

捐贈人 Donate String Textbox <<ASP TextBox>>

提供日期 ProvideDate String Textbox <<ASP TextBox>>

文物總稱 WholeName String Textbox <<ASP TextBox>>

儲存 btnSave Button <<ASP Button>>

清單建立 btnCreateLis

t



2.5 擬藏品清

單建立 UI

原登錄名稱 OrignalNam

e

String Textbox <<ASP TextBox>>

文物年代 AntiqueTime String Textbox <<ASP TextBox>>

文物金額 AntiqueValu

e

String Textbox <<ASP TextBox>>

74


文物件數 ItemNo String Textbox <<ASP TextBox>>

藏品狀況 AntiqueStatu

s

String Select <<ASP

DropDownList>>

入藏否 CollectStatus String Select <<ASP

DropDownList>>

儲存 btnSave Button <<ASP Button>>

拋轉編目 btnTransfor

m



編輯 Image <<ASP

GridView>>CommandF

ield

原登錄名稱 lblOrignalNa

me

Lable <<ASP

GridView>>Label

文物金額 lblAntiqueVa

lue

Lable <<ASP

GridView>>Label

文物件數 lblItemNo Lable <<ASP

GridView>>Label

入藏否 lblCollectSta

tus

Lable <<ASP

GridView>>Label

三、介面類別的關係轉換

將上述步驟一介面類別的轉換所整理之表 5-23 進行其關係之轉換，依各個

介面類別進行，並利用 Rational Rose Case Tool 繪製 Web PSM 類別圖。五個介面

物件其關係轉換做法雷同，故僅將轉換說明詳列於「館員登入 UI」內，其餘之

介面類別關係轉換，僅將結果呈現出，如圖 5-18～圖 5-22 所示。轉換步驟如下：

1. 館員登入 UI

75

(1) 伺服端網頁（Login.aspx）會自動建立館員登入客戶端網頁，所以伺服

端網頁與客戶端網頁間有「建立」關聯。

(2) 館員登入客戶端網頁與其相對應之表單有「聚合」關聯。

(3) 館員輸入帳號及密碼按登入按鈕，會將表單內屬性欄位值送出至伺服端

網頁進行處理，故表單與伺服端網頁有「送出」關聯。

(4) 微軟.NET Framework 此開發技術平台將程式碼與展現層分開，將程式

碼置於另一檔案內，稱為 Code behind。本案例以 VB.Net 語言撰寫，故

其程式碼檔名為 Login.aspx.vb，該物件為伺服端網頁的超類別

（Superclass），與伺服端相關事件處理之程式碼可置於此檔案內。

依上述步驟，可繪製館員登入 Web PSM 類別圖，如圖 5-18 所示。

圖 5-18 館員登入 Web PSM 類別圖

2. 功能選項 UI

76

圖 5-19 功能選項 Web PSM 類別圖

3. 擬藏品列表 UI

圖 5-20 擬藏品列表 Web PSM 類別圖

4. 擬藏品建立 UI

77

圖 5-21 擬藏品建立 Web PSM 類別圖

5. 擬藏品清單建立 UI

圖 5-22 擬藏品清單建立 Web PSM 類別圖

6. 利用建立擬藏品資料使用個案其 UI 狀態圖建立其狀態轉換關聯關係，並將

上述之 Web PSM 類別圖整合如圖 5-23 所示：

78

圖 5-23 建立擬藏品資料使用個案 Web PSM 類別圖

79

四、程式碼樣版

目前尚無 Case Tool 可產生 Microsoft ASP.Net 及 VB.Net 程式碼，故依上述

步驟所產生之 Web PSM 類別圖，及介面藍圖產生程式碼樣版，可參考表 5-26～

表 5-30。

表 5-26 館員登入 UI 程式碼樣版 2.1 館員登入UI

配合介面藍圖進行網頁控制項之配置─館員登入UI程式碼（Login.aspx） <%@ Page Language="VB" AutoEventWireup="false" CodeFile="login.aspx.vb" Inherits="login" title="館員登入" %> <html> <body> <form id ="form1" runat="server">

<table> <tr>

<td>帳號:</td> <td>

<asp:textbox id="User_Id" runat="server"></asp:textbox> </td>

</tr> <tr>

<td>密碼:</td> <td>

<asp:textbox id="User_Pwd" runat="server" TextMode="Password"></asp:textbox> </td>

</tr> <tr>

<td colspan="2" align="center"> <asp:Button ID="btnLogin" runat="server" Text="登入" />

</td> </tr>

</table> </form> </body> </html>

Login.aspx.vb

80

Partial Class Login '檔名 Login.aspx.vb 預設為 Class 的名稱 Inherits System.Web.UI.Page 'Microsoft .NET 撰寫網程式所需包含之程式碼 '依據 Web PSM 類別圖之操作產生程式碼樣版 Sub Login(ByVal User_Id as String, ByVal User_Pwd as String) Handles btnLogin.Click

End Sub End Class

表 5-27 功能選項 UI 程式碼樣版 2.2 功能選項UI

功能選項UI程式碼（Menu.aspx）配合介面藍圖進行網頁控制項之配置 <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Menu.aspx.vb" Inherits="Menu" title="功能選項" %> <html> <body> <form id ="form1" runat="server">

<table> <tr> <td><asp:Button ID=" btnAccount " runat="server" Text="帳號列表" /></td> <td><asp:Button ID=" btnPreCollect " runat="server" Text="擬藏品列表" /></td> <td><asp:Button ID=" btnCatalogue " runat="server" Text="編目列表" /></td> </tr> </table> </form> </body> </html>

Menu.aspx.vb

Partial Class Menu

81

Inherits System.Web.UI.Page

Sub LinkToAccount() Handles btnAccount.Click

End Sub Sub LinkToPreCollect() Handles btnPreCollect.Click

End Sub

Sub LinkToCatalogue() Handles btnCatalogue.Click

End Sub

End Class

表 5-28 擬藏品列表 UI 程式碼樣版 UI2.3 擬藏品列表UI

擬藏品列表UI程式碼（PreCollectList.aspx）配合介面藍圖進行網頁控制項之配置 <%@ Page Language="VB" AutoEventWireup="false" CodeFile="PreCollectList.aspx.vb" Inherits=" PreCollectList" title="擬藏品列表" %> <html> <body> <form id="form1" runat="server"> <table> <tr align="center"> <td> <asp:Button ID="btnCreate" Text="建立" runat="server" />

<asp:Button ID="btnBack" Text="返回" runat="server" /> </td>

</tr> <tr>

82

<td> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"> <Columns> <asp:CommandField EditImageUrl="~/_Images/iEdit.gif"

ShowEditButton="True" ButtonType="Image" HeaderText="編輯" ItemStyle-HorizontalAlign="Center" />

<asp:TemplateField HeaderText="文物批號"> <ItemTemplate> <asp:Label ID="lblBatchno" runat="server" ></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="WholeName" HeaderText="文物總稱" /> <asp:TemplateField HeaderText="取得方式">

<ItemTemplate> <asp:Label ID="lblGetWay" runat="server"></asp:Label> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>

</td> </tr> </table> </form> </body> </html>

PreCollectList.aspx.vb

依類別圖順序，將程式碼樣版呈現在下方。

Partial Class PreCollectList Inherits System.Web.UI.Page Sub BindData() End Sub Sub edit(ByVal CollectYear as String, ByVal BatchNo as String) Handles GridView1.RowEditing End Sub Sub Create() Handles btnCreate.Click End Sub Sub BindBatchNo(ByVal CollectYear as String, ByVal BatchNo as String) End Sub Sub BindGetWay() End Sub

83

Sub Back() Handles btnBack.Click End Sub End Class

表 5-29 擬藏品建立 UI 程式碼樣版 UI2.4 擬藏品建立UI

擬藏品建立UI程式碼（CreatePreCollect.aspx）配合介面藍圖進行網頁控制項之配置

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="CreatePreCollect.aspx.vb" Inherits=" CreatePreCollect" title="擬藏品建立" %> <html> <body> <form id="form1" runat="server"> <table> <tr> <td>入藏年度</td> <td><asp:textbox id="CollectYear" runat="server"></asp:textbox> </td> </tr> <tr>

<td>取得方式</td> <td><asp:DropDownList ID="GetWay" runat="server"></asp:DropDownList></td> </tr> <tr>

84

<td>捐贈人</td> <td><asp:textbox id="Donator" runat="server"></asp:textbox></td> </tr> <tr> <td>提供日期</td> <td><asp:textbox id="ProvideDate" runat="server"></asp:textbox ></td> </tr> <tr> <td>文物總稱</td> <td><asp:TextBox ID="WholeName" runat="server"></asp:TextBox></td> </tr> <tr> <td colspan="2"> <asp:Button ID="btnSave" runat="server" Text="儲存" /> <asp:Button ID="btnCreateList" runat="server" Text="清單建立" /> <asp:Button ID="btnBack" runat="server" Text="返回" /> </td> </tr> </table> </form> </body> </html>

CreatePreCollect.aspx.vb

Partial Class CreatePreCollect Inherits System.Web.UI.Page Sub BindEditData(ByVal CollectYear as String, ByVal BatchNo as String) End Sub Sub Save() Handles btnSave.Click End Sub Sub CreateList(ByVal CollectYear as String, ByVal BatchNo as String) Handles btnCreateList.Click End Sub Sub Back() Handles btnBack.Click End Sub End Class

85

表 5-30 擬藏品清單建立 UI 程式碼樣版 UI2.5 擬藏品清單建立UI

擬藏品清單建立UI程式碼（CreatePreList.aspx）配合介面藍圖進行網頁控制項之配置 <%@ Page Language="VB" AutoEventWireup="false" CodeFile="CreatePreList.aspx.vb" Inherits=" CreatePreCollect" title="擬藏品清單建立" %> <html> <body> <form id="form1" runat="server"> <table> <tr> <td>原登錄名稱</td> <td><asp:textbox id="OriginalName" runat="server"></asp:textbox> </td> </tr> <tr>

<td>文物年代</td> <td><asp:textbox id="AntiqueTime" runat="server"></asp:textbox> </td> </tr>

86

<tr> <td>文物金額</td> <td><asp:textbox id=" AntiqueValue" runat="server"></asp:textbox></td> </tr> <tr> <td>文物件數</td> <td><asp:textbox id="ItemNo" runat="server"></asp:textbox ></td> </tr> <tr> <td>藏品狀況</td> <td><asp:DropDownList ID="AntiqueStatus" runat="server"></asp:DropDownList></td> </tr> <tr> <td>入藏否</td> <td><asp:DropDownList ID="CollectStatus" runat="server"></asp:DropDownList></td> </tr> <tr> <td colspan="2"> <asp:Button ID="btnSave" runat="server" Text="儲存" /> <asp:Button ID="btnTransform" runat="server" Text="拋轉編目" /> <asp:Button ID="btnBack" runat="server" Text="返回" /> </td> </tr> <tr> <td colspan="2">

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"> <Columns> <asp:CommandField EditImageUrl="~/_Images/iEdit.gif"

ShowEditButton="True" ButtonType="Image" HeaderText="編輯" ItemStyle-HorizontalAlign="Center" />

<asp:TemplateField HeaderText="原登錄名稱"> <ItemTemplate> <asp:Label ID="lblOriginalName" runat="server" ></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="文物金額"> <ItemTemplate> <asp:Label ID="lblAntiqueValue" runat="server" ></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="文物件數">

<ItemTemplate> <asp:Label ID="lblItemNo" runat="server"></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="入藏否">

<ItemTemplate> <asp:Label ID="lblCollectStatus" runat="server"></asp:Label> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </td> </tr> </table> </form>

87

</body> </html>

CreatePreList.aspx.vb

Partial Class CreatePreList Inherits System.Web.UI.Page Sub BindData(ByVal CollectYear as String, ByVal BatchNo as String) End Sub

Sub BindCollectStatus(ByVal CollectStatus as String) End Sub Sub Save() Handles btnSave.Click End Sub

Sub edit(ByVal CollectYear as String, ByVal BatchNo as String, ByVal SerialNo as String) Handles GridView1.RowEditing

End Sub Sub Transform() Handles btnTransform.Click End Sub Sub Back() Handles btnBack.Click End Sub End Class

88

第四節、觀察與評估

本研究所提出微軟.NET Framework 開發平台使用者介面轉換方法論，以實

際案例進行測試時，不論是 PIM 塑模圖形使用之恰當性及合法性、Web PSM 類

別圖對映之 ASP.Net 網頁控制項之正確性，及程式碼樣版產出的正確性，藉由 D

公司參與測試之工程師所回饋之意見，整理分析後，可證實本研究所提之方法

論，能順利將使用者介面藉由系統化方法，以人工方式產生程式碼樣版。

茲將參與測試之工程師相關經歷及回饋意見整理如表 5-31 所示：

89

表 5

-31測試工作回饋表

工程師

微軟

.NET

Fram

ewor

k開發

經驗（年）

有無典藏

系統開發

經驗

方法論及程

式碼樣版是

否正確

意見回饋

回覆

VB

C

#

J 1工程師

7

3 有

是

擬藏品列表

Web

PSM

類別圖中，函

式定義為

edit(

)但程式碼樣版卻為

Grid

Vie

w1_

Row

Editi

ng()名稱不一

致，建議兩者可以調成一致的名稱。

人工進行程碼樣版對映時，直接將

edit(

)函式改為

VB

.Net物件呼叫之方

式，為了讓類別圖之資訊能充分轉換

至樣版內，會再調整程式碼樣版，將

其函式名稱相符合。

J 2工程師

5

3 有

是

操作介面觸發的

Cod

e B

ehin

d函

式，在

PSM

轉C

ode的過程並未實

現對輸入參數的轉換。

調整其程式碼對映內容，以將所輸入

之參數呈現出來。

T工程師

6

1 無

是

無。

H工程師

6

4 無

是

無。

L工程師

3 有

是

無。

90

第六章、結論

第一節、研究成果

本研究主要是探討以 MDA 架構利用 PIM 相關產出，發展微軟.NET

Framework 網路應用程式使用者介面方法論，並利用所發展之方法論產出的 Web

PSM 類別圖產生程式碼樣版。利用「文物典藏管理系統」此一案例實作，將本

研究所提之方法論作一實證範例。

本研究主要研究成果整理如下：

1. 以詹尹云（2006）和劉文進（2009）所提之方法論為基礎，整理出無法延用

方法論之部份，進而提出符合微軟.NET Framework 網路應用程式使用者介

面之方法論；並利用上述之文獻研究，將可延用之方法融入所提之方法論

內。

2. 提出由介面架構圖、介面詞彙、UI 狀態圖轉換至 Web PSM 類別圖之準則及

步驟，並利用轉換後之 Web PSM 類別圖搭配介面藍圖，讓轉換出來的使

用者介面更符合系統所規劃之畫面。

3. 藉由轉換後之 Web PSM 類別圖整理出程式碼樣版。

4. 整理出本研究方法論中，所使用 PIM 塑模階段相關產出，與 Web PSM 轉換

之關聯，並說明每一轉換步驟利用哪些 PIM 產出，以及其目的為何。

第二節、研究貢獻

本研究主要是以 MDA 架構之概念利用 UML 產出之 PIM 類別圖，提出網路

應用程式使用者介面其 Web PSM 程式碼轉換方法，對於學術界之貢獻如下：

1. 整理出微軟.NET Framework 開發平台使用介面架構圖、介面詞彙、UI

狀態圖，做為 Web PSM 之輸入，以及轉換方法及步驟。

91

本研究對於實務界之貢獻如下：

1. 使用者介面其分析及設計塑模相關產出（包含介面架構圖、介面藍圖、

介面詞彙、UI 狀態圖、UI 循序圖），可以提供業界做為系統分析設計

文件之參考，有助於業界及客戶對於需求認知一致，及加速客戶需求之

確認。茲將使用者介面塑模相關產出，可協助業界做為系統分析設計文

件之參考說明如下：

(1) 介面架構圖：系統分析設計文件大多包含系統功能架構圖，此張架

構圖是以功能面為出發點，所以無法揭露一個系統內，包含了哪些

介面此資訊。利用介面架構圖可彌補系統功能架構圖上述之缺點。

(2) 介面藍圖、介面詞彙：一般而言，系統分析設計文件包含操作介面，

及資料表結構，但，大多是以開發人員角度進行撰寫，若客戶不具

資訊背景可能難以了解操作介面，和資料表結構的關係為何。而介

面藍圖及介面詞彙應較符合客戶使用之語言，在需求確認上，應可

較快速獲得客戶承諾（Commitment）。

(3) UI 狀態圖、UI 循序圖：多數系統分析設計文件較少呈現使用者介

面互動之資訊，若將此兩張圖加入文件內，無論是客戶或是開發人

員會較清楚，介面間的互動情形為何，及介面控制權在什麼時候會

發生移轉等資訊。而 UI 循序圖亦可提供測試人員用以檢測系統之

正確性。

2. 使用者介面轉換之步驟，可提供業界做為產生程式碼樣版之參考，進而

發展出符合各業界開發習慣之程式碼樣版，做為程式外包之文件，除

了，能讓人員做更有產能之運用之外，也可降低未來程式自行維護之負

擔。

3. 使用者介面其分析及設計利用 UML 進行塑模，以圖形代替傳統文字描

述，可提高系統設計人員對於系統之了解，降低傳統以文字描述而造成

不同人員解讀不一，並可減少系統分析人員解說之時間。

4. 本研究整理出 PIM 產出與 Web PSM 轉換對應，除了說明每一轉換步驟

使用哪些 PIM 產出之外，也說明使用該 PIM 圖形的目的為何。若業界

欲使用本研究之方法論，此項資訊可提供業界做為產製系統分析設計文

92

件最低限度之 PIM 產出之參考。

第三節、研究限制

本研究之範圍主要是針對使用者介面在特定平台開發網路應用程式時，提出

其塑模方法及轉換步驟，所使用之特定開發平台為 Microsoft .NET Framework，

開發工具為 Microsoft Visual Studio 2008，開發程式語言為 VB.NET。而有關需求

塑模、PIM 轉關聯式 PSM、PIM 轉應用程式 PSM、程式完整功能，及使用者介

面美編等部份，並不在本研究討論範圍內。

第四節、未來研究方向

本研究進行過程中，發現在 UML 塑模及轉換在使用者介面轉換上尚有不足

之處，建議未來研究方向可朝下列幾個方向進行：

1. 網路應用程式其使用者介面千變萬化，如何將網路應用程式其介面類別

能完整的利用 UML 進行塑模，並利用塑模之產出進行轉換，是一個待

研究之課題。

2. 網路應用程式使用者介面轉換在不同開發平台之比較。

93

參考文獻

吳仁和，物件導向系統分析與設計─結合 MDA 與 UML，第三版，臺北：智勝，

2010 年 3 月。

黃連豐，基於模型驅動架構之系統開發研究—以 PHP 語言建置集中採購網站為

例，大同大學資訊經營研究所碩士論文，2008 年 6 月。

詹尹云，MDA 轉換：結合 UML 塑模網路應用環境之使用者介面，國立中山大

學資訊管理學系碩士論文，2006 年 6 月。

劉文進，MDA：Web-based 使用者介面轉換方法論之研究，國立中山大學資訊管

理學系碩士論文，2009 年 6 月。

Bezivin, J., Hammoudi S., Lopes D., and Jouault F., Applying MDA Approach for

Web Service Platform, The 8th IEEE International Enterprise Distributed Object

Computing Conference (EDOC’04), 2004.

Booch, G., Rumbaugh, J., and Jacobson, I., The Unified Modeling Language User

Guide, 2nd Edition, Massachusetts: Addsion-Wesley, 2005.

Conallen, J., Building Web applications with UML, 2nd Edition, Boston:

Addion-Wesley, 2003.

Darryl, K., eWeek, Application Development: Java, C, C++: Top Programming

Languages for 2011, December 2010. Retrieved May, 2010, from

http://www.eweek.com/c/a/Application-Development/Java-C-C-Top-18-Program

ming-Languages-for-2011-480790/.

Hussey, A. and Carrington, D., Comparing the MVC and PAC architectures: a formal

perspective, IEEE Proceedings of Software Engineering, Vol. 144, No. 4, August

1997, pp. 224-236.

Kappel, G., Proll, B., Reich, S., and Retschitzegger, W., Web Engineering: The

Discipline Of Systematic Development Of Web Applications, Hoboken: John

Wiley & Sons, 2006.

Kum, D.K. and Kim, S.D., A Systematic Method to Generate .NET Components from

MDA/PSM for Pervasive Service, Fourth International Conference on Software

94

Engineering Research, Management and Applications (SERA'06), 2006.

Microsoft Corporation, http://msdn.microsoft.com.

Miller, J. and Mukerji, J., MDA Guide Version 1.0.1, Object Management Group, June

2003.

Peffers, K., Tuunanen, T., Rothenberger, M. A., and Chatterjee, S., A Design Science

Research Methodology for Information Systems Research, Journal of

Management Information Systems, Vol. 24, No. 3, 2007, pp. 45-77.

Rumbaugh, J., Jacobson, I., and Booch, G., The Unified Modeling Language

Reference Manual, 2nd Edition, Boston: Addison-Wesley, 2005.

Click below to find more Mipaper at www.lcis.com.tw

Mipaper at www.lcis.com.tw

國立中山大學企業管理學系研究所碩士論文MDA：微軟.NET ...

Documents

Transcript of 國立中山大學企業管理學系研究所碩士論文MDA：微軟.NET ...