整合式物件導向技術於Web 應用系統設計之研究

整合式物件導向技術於

Web 應用系統設計之研究

Integrated Object-Oriented Approach to Modeling the Web

Application’s Design

楊欣哲

高國峰

東吳大學資訊科學系副教授

東吳大學資訊科學系碩士生

e-mail :

sjyang@cis.scu.edu.tw

e-mail :

nms8905@cis.scu.edu.tw

摘要

近年來由於全球資訊網(World Wide Web;以 下簡稱Web)技術快速發展及應用普及化，所以企 業如何在 WWW 的環境下有效率地建置適合的 Web 應用系統就是一項重要的課題。目前，有許 多物件導向資訊技術已經針對 WWW 架構下提供 Web 應用系統整合資料與行為之基礎。由於 Web 應用系統具備：(1)所有資訊的呈現都是透過網頁 (Web pages)的型式來展現，(2)網頁與網頁間呈現 出脈絡交錯的連結關係特性，因此如何將網頁與 網頁間的連結關係具體地於系統設計階段表現出 來，對於Web 應用系統的開發與擴充性是相當重 要的。 有鑑於此，本研究將運用關係管理結構法 (RMM: Relationship Management Methodology)整 合至物件導向分析與設計(OOA/OOD)中，使用 UML(Unified Modeling Language)工具加以延伸擴 充以整合 RMM 方法所分析出的網頁關聯結構， 再搭配三層次 MVC(Model-View-Controller)與快 速雛型法(Prototyping)等方法，以設計 Web 應用 系統，而達成有效地建立Web 應用系統之目標。 利用此種系統設計技術其後經用 XML 語言與 Java 語言來建置一 Web 應用系統，可有效地建置 物件系統模型並驗證此系統設計方法的可行性與 實用性。總之，採用此整合式物件導向技術於 WWW 架構下來建置 Web 應用系統預期將可帶來 六大特色：模組性、再利用性、可維護性、資料 與程序之有效分配、安全性以及良好的績效。 關鍵詞：物件導向、關係管理結構法、快速雛型 法、Web、MVC

Abstract

Due to the recent advances in World Wide Web technology, how an organization to efficiently implement Web applications under WWW environment is becoming a primary issue. Currently, some object-oriented technologies are to develop for further integrating with the WWW infrastructure, and

also to provide the basis for combining data and behavior of Web Applications. Since all information on the WWW are presented through Web pages, and Web pages are inter-connected, it is essential to clearly identify the connectivity of the Web pages in order to develop Web applications efficiently. On this basis, we can integrate OOA/OOD (Object-Oriented Analysis and Design) with RMM (Relationship Management Methodology) analysis via utilizing UML (Unified Modeling Language) and 3-tier MVC (Model-View-Controller) and Prototyping to design the system for Web applications. Based on that design issues, we can build a practical Web application through the use of XML and JAVA to identify the feasibility and usability. Consequently, any Web applications built upon this integrated object-oriented approach can have six anticipated merits: modularity, reusability, maintainability, effective distribution of data and functionality, security, and good performance.

Keywords: Object-Oriented, RMM, Prototyping,

Web, MVC

一、導論

近年來由於全球資訊網 (World-Wide-Web) 之 技術快速發展以及應用日益普及，應用軟體系統 的作業平台已逐漸地移至以 Web 為基礎的平台環 境來建置 ，究其因主 要是因為其 跨作業系統平 台、用戶端需求較有彈性和標準的操作介面以及 便於集中的管理維護等優點。但是 Web 系統起初 設計目標是作為資訊相互傳遞的媒體，Web 系統 的資訊內容是以網頁 (Web pages) 的方式呈現，而 內容的交互參考資訊則是以超連結 (hyperlink) 的 方式來表示。使用 Web 平台建置之應用軟體系統 (以下簡稱 Web 應用系統) 與一般作業平台上建置 之應用軟 體系統的主 要差異性也 在於必須考慮 Web 平台的超媒體特性，所以 Web 應用系統也稱 為超媒體應用系統 (hypermedia application) [10] 。 現今網頁開發技術的標準已由 HTML 演化成為 XML(Extensible Makeup Language)[1] ，這兩種技 術都是由 W3C(World Wide Web Consortium)所制

定。XML 與 HTML 主要的差異在於 XML 沒有固 定 的 標 籤 集(tag set)[23] ， 可 允 許 使 用 者 透 過 XML-Data[19] 可自行的定義 XML 文件結構，再 透過XSL(Extensible Stylesheet Language)[4] 可使 XML 能更有彈性地展現文件的內容。以上的技術 使得網頁能以更生動活潑的方式呈現出超媒體的 特質，但是要設計Web 應用系統除了網頁技術之 外，更需要有妥善的系統開發方法以確保系統能 順利地進行設計與建置，可是傳統應用系統的開 發方法並不能有效地反應Web 應用系統的超媒體 特性，這也是傳統應用系統開發方法無法適用於 Web 應用系統的原因[11] 。針對 Web 應用系統的 超媒體特性，在系統設計上可整合下列兩種方法 來加以改善，以反應其超媒體的特性： (1) 以 Web 的超媒體 (hypermedia) 特性為基礎的結構化 開發方法即 - 關係管理結構法 (RMM: Relationship Management Methodology) [14] ，其提供以結構化 的方法改善其他軟體設計方法上對導覽設計的缺 陷 ； (2) 物件導向為基礎的設計方法如 - 物件導 向 超 媒 體 設 計 (OOHDM : Object-Oriented Hypermedia Design Model) [20] ，其提供以物件模 型 的 方 式 呈 現 出 導 覽 前 後 關 係 (navigational context) 、 使 用 XML 的 Meta Data 延 伸 的 WebComposition [11] 模型與使用 UML 工具來建 構 Web 應用系統的 Jim Conallen [4, 5] 設計模 型。 綜觀結構化設計與物件導向設計兩種設計方 式，可歸納出Web 應用系統開發時因具備有三種 的觀點來說明所建置的系統模型 [22] 分別是： (1) 概念模型 (conceptual model)：說明應用系統的概 念上的組織與架構模型此可以是獨立於Web 系統 建 置 技 術 的 模 型 、 (2) 導 覽 模 型 (navigational model)：反應 Web 平台上超連結相互參考關係的 模型與 (3) 介面模型 (interface model)：此為實際 與網頁製作相關的模型。而目前 UML (Unified Model Language) [18] 工具已是軟體業界公認的 物件模型圖示標準，透過 UML 工具可以有效地 表示物件模型。對於超媒體特性而言，以上所述 之系統模型中如何有效地建立導覽模型是建置 Web 應 用 系 統 的 主 要 關 鍵 。 然 而 XML 的 DOM(Document Object Model)規範利用繼承的樹 狀結構建立 XML 文件中介面(interfaces)間的關聯 性，所以 XML 的技術比 HTML 更有效地將物件 模型轉化成 XML 格式以縮小物件模型與網頁建 置技術的差異[8] 。因此本篇論文將提出一套整合 系統設計方法以開發Web 應用系統，亦即以物件 導向技術為基礎並整合關係管理結構法 (RMM: Relationship Management Methodology) 以有效地 設計出 Web 應用系統導覽模型與使用 UML 工 具，並加以延伸擴充。總之，RMM 分析出的導 覽模型能使用UML 工具加以表示，並且於設計時 配合三層次 MVC (Model-View-Controller)與快速 雛型 法(Prototyping)等方法，以達到有效地建立 Web 應用系統的導覽模型和網頁架構。XML 技術 可 以 由 使 用者 自 行 定 義或 擴 充 ， 透過 XML 中 DOM、DTD(Document Type Definition)、XLink 與 XSL(Extensible Stylesheet Language)等相關技術可 以預先建置一 XML 應用程式架構(Framework)。 因而使 Web 應用系統建置時能更方便地將物件系 統模型轉化成XML 文件，並將複雜的企業邏輯以 Java 語言工具建置以結合 XML 文件，由此可整合 現有或傳統的應用程式系統[12] 進而產生其雛型 系統。最後，將使用此方法以設計一 Web 應用系 統實例，來說明並驗証此設計方法的可行性、有 效性與實用性。

二、

Web 應用系統設計原理

本節將概要地介紹 Web 應用系統的設計原 理，首先將對傳統的物件導向設計與結構化 Web 設計作一簡單地說明，最後將整合此二者設計方 法進而提出物件導向的Web 應用系統設計觀念。 (一) 物件式導向設計與結構化 Web 設計現況探討 目前應用系統建置已逐漸使用物件導向方法來 進行設計，此種設計方法的主要特徵就是透過物 件與物件 間互動的模 型來建立應 用系統。原則 上，經由物件導向方法可以設計出三種物件類型 以建立應用系統架構，此三種物件類型分別為： (1) 實體物件(Entity Object) ： 用於定義出系統中 的資訊、 (2) 介面物件(Interface Object) ： 用於定 義系統中與介面相關地行為與資訊、 (3) 控制物件 (Control Object) ： 定義不屬於上述兩者之功能行 為。由此三者物件類型所建構之物件導向應用系 統可以達到有效的功能分配，使應用系統具模組 性、再利用性與可維護性。近年來，由於應用系 統須使用並資料庫系統並加以連結，所以應用系 統的開發上須將應用程式中的物件模型上加入資 料庫物件(Database Object)類型物件，再將實體物 件與控制物件整合成企業物件(Business Object) 類 型，然後再配合介面物件類型物件之後，這樣的 物件模型也就是現今應用系統設計時所經常使用 的 三 層 式 (3-tier) 應 用 系 統 架 構 或 稱 為 Model-View-Controller 模型(以下簡稱為 MVC 模型)。上 述所簡介的物件導向應用系統模型架構，其目的 是為了使應用系統達成模組性、再利用性、可維 護性、資料與程序之有效地進行功能分配等優點 以利於應用系統開發之需求及效益。

RMD Domain 元素 元件(Slices) Access 元素 連結 雙向連結 群組 條件式索引 條件式導覽 條件式索引 導覽 圖1. RMM 方法論物件導覽模型基本圖示 傳統上 Web 應用系統的設計目標只是為了提 供資訊傳遞的媒體，所以如何設計網頁資訊的內 容便成為 Web 系統設計主要的問題。而關係管理 結構法 (RMM) 主要是針對超媒體的一種結構化設 計 方 法 ， 藉 由 關 係 管 理 資 料 模 型 (RMDM: Relationship Management Data Model) 來表達 Web 應用系統中的超媒體導覽模型，RMDM 主要是由 一些基本圖示所組成 (如圖 1 所示) 。經由 RMM 方法建立的 RMDM 模型可表達 Web 應用系統中 網頁的導覽模型，使用 RMM 方法設計 Web 應用 系統分為下列三個步驟： (1) E-R 設計：此階段中 以需求定義文件開始一般的實體關連模型 (Entity-Relationship Model) 的設計，其產出為 E-R 圖 (2) 元 件(Slice)設計 :此階段中將前一階段中的實體 (Entity)予以分割成為較小且有意義的元件，其產 出為元件圖，(3) 導覽設計：此階段中將前一階段 的元件連結成導覽模型，其產出為 RMDM 圖，經 由 RMM 方法使設計人員可以有一清晰且明確的 方法已建立Web 應用系統中的導覽模型。 (二) 、Web 應用系統使用物件式導向設計方法 Web 應用系統設計時將由三個觀點來考慮其 應用系統之模型。首先是概念模型，任何應用系 Web 應用系統需求收求 收集 物件導向系統分析 物件導向系統設計 Web 網頁程式設計 Web 應用系統建置 Web 網頁應用系統 自由格式 例如：訪談記錄、企業作 業手冊、文件等 Use Case 文件 Web Pages 樣本 靜態模型 類別圖(Class Diagrams) 實體關連圖(E-R Diagrams) 動態模型 順序圖(Sequence Diagrams) 靜態模型 類別圖(Class Diagrams)

Web 類別圖(Class Diagrams Extension for Web Application) 動態模型 順序圖(Sequence Diagrams) 活動圖(Activing Diagrams) 網頁設計程式設計 Web 類別單元測試 Web 雛型系統 修正與有效性 整合測試 效率評估 MVC 方法論 開發行程 階段產出 分離 Interface Controller Entity E-R Diagram Design Pattern E-R Diagram Navigation Design 三層式功能 分割 P P P

統 (不論是不是 Web 應用系統) 皆是以概念模型 為其之核心，它反映了應用系統中物件的關係與 行為。因為Web 應用系統具有超媒體的特性，所 以必須清楚的定義出網頁 (或視為 Nodes) 與其間 如何瀏覽的方式 (可視為 Links) 。總之，概念模 型可使用一般的物件式導向方法來設計。其次是 導覽模型，它主要在定義一個概念模型的View， 如同 MVC 模型中對於 View 定義，這也是 Web 應用系統系統設計最重要的部分。最後是介面模 型，主要在定義使用者介面的規格，前述兩個模 型是無關於資訊系統建置實作的，然而在介面模 型中則是與系統建置實作有較密切相關的模型。 經由上述的觀念，可以將Web 應用系統的架構與 物件式導向的觀念作一整合，希望藉由這樣的整 合使Web 應用系統開發時可利用現有物件導向方 法之優點。但是Web 應用系統與傳統應用系統設 計主要的差異是導覽模型的設計，對於Web 應用 系統而言如何能妥善地建立導覽模型是非常重要 的。本文將提出一套整合式物件式導向的技術， 其目的在整合物件導向相關方法與導覽模型的建 立。下節將先介紹此整合式物件導向方法並探討 雛型系統與說明模型改善方式，最後將使用此方 法建置一Web 應用系統實例以進行實証研究。

三、整合式物件導向

Web 應用系統方法

綜觀前節對於 Web 應用系統的設計原理， 本文所提出之整合式物件導向Web 應用系統方法 是將超媒體之特性結合物件導向開發技術。首先 針對本方法其整體Web 應用系統開發程序作一說 明，並且定義各個階段所作的活動與產出；然後 將再對本方法中導覽模型的定義與架構作一闡 述，並且說明Web 應用系統開發流程以及實作模 型的建立。原則上，整合式物件導向Web 應用系 統開發程序可分為五個步驟其流程如圖二所示， 現將各步驟說明如下： 步驟一：Web 應用系統功能需求收集。此階 段為Web 應用系統功能定義與確認應用系統之需 求，主要是經由與使用者和企業內部的專業人員 訪談來作為需求收集與建置Use Case [15] 模型的 基礎，由此階段建構Use Case 功能模式結構圖與 相關功能需求文件。 步驟二：物件導向系統分析。此階段中將收 集之需求如訪談記錄與企業內相關文件所製作而 成之使用個案 (Use Case) 加以分析，依照傳統物 件 導 向 分 析 原 理 歸 納 出 三 種 物 件 類 型 ： 實 體 (Entity) 物件、控制 (Control) 物件與介面 (Interface) 物件，前兩者合稱為企業 (Business) 物件。依上述 分析並整合 RMM 法將實體物件間關係規劃其關 連性架構以建構成物件類別結構間的實體物件關 連模型，最後將介面物件視為網頁方式表示如圖3 所示，完成物件分析模型。 步驟三：物件導向系統設計。此階段主要是 由系統分析階段的結果來進行系統的設計工作， 首先將由前一階段分析出的實體模型開始，由實 體物件模型中使用MVC 方法來分割實體物件以找 出元件(Slice)與節點(Node)物件。再經分析模型中 的實體物件關連模型來對此元件模型進行導覽設 計，此導覽模型將由 Web 應用延伸類別圖(Class diagrams extension for Web application) 的 方 式 表 現。如於設計時發覺原分析模型無法反應設計的 需要時可回前一階段修正之，然後控制物件將進 行細部設計。由於設計階段物件會分割成較小的 物件，須經MVC 法再確認控制物件是否已進行適 當的功能分割，並使用UML 工具以有效地完成系 統物件設計模型。 步驟四：Web 網頁程式設計。由設計出的 Web 類別圖，選擇適當網頁設計語言 (如 ASP, Java Servlet, JSP 等) 進行網頁與程式的撰寫。此階 段中將對設計出的每個 Web 類別實際地建構與程 式撰寫，所以此步驟對於系統的網頁編排與部署 (Deployment) 需提出妥善的規劃。 步驟五：Web 應用系統建置。在 Web 網頁程 式設計完成後將完成之各Web 類別組合成 Web 應 用系統的雛型系統。首先，測試各整合後之單元 的功能性是否完備，並驗證 Web 應用系統的有效 性是否符合功能需求。然後，依據使用者實際的 功能需求以重覆(iterative)和漸進方式來增強雛型 系統，並可使用物件導向測試方法來測試此 Web 雛型系統各子單元[17] 。最後，各個子單元系統 結合成 Web 應用系統，在此必須對系統的各種功 能作交叉的測試以確保功能完整性，並且評估與 網頁 方法 1 方法 2 屬性 物件 方法 m 圖3. 網頁與物件模型架構

調適影響系統執行的效率。 經上述五步驟依序地進行或於步驟二至步驟 五之間執行模型化 (Modeling) ，亦即至前階段加 以調整或修正。最後，Web 網頁應用系統完成並 可實際地部署於使用的WWW 環境中。 原則上，上述之方法主要著重於系統分析、 系統設計、Web 網頁設計與 Web 雛型系統的建置 四個階段，Web 應用系統與傳統應用系統設計的 差異也就是導覽設計的部分，同時導覽模型是超 媒體(Hypermedia)應用系統所特有的模型，這也 是傳統物件式導向分析與設計方法所欠缺的。為 了Web 應用系統的建置時能充分展現對超媒體應 用系統所特有的導覽模型的架構，將使用 UML 的類別圖並加入針對導覽所需的特性來加以擴增 而成為能表達出導覽中的觀念與架構，以滿足 Web 應用系統中導覽模型建置的需求，此種類別 圖稱之為 Web 應用延伸類別圖(Class diagrams extension for Web application) 。此種 Web 應用延 伸類別圖與 UML 的類別圖相似，是以類別與類 別之間的關聯來說明物件模型靜態架構並利用 UML 的 stereotype 的機制來加以擴充 [18] 。現針 對Web 應用延伸類別圖中的圖示逐一說明： 元件(Slices)類別：元件類別(圖 4 所示)為此 Web 應用延伸類別圖中的組成基礎，然而Web 應用系 統的網頁可以由一個或一個以上的類別所構成。 圖4. 元件(Slices)類別 節點(Node)類別：節點類別(圖 5 所示)主要是在表 示一個具體的網頁物件，它可以由許多的元件類 別組合而成或是單獨的存在於Web 應用系統之 中。 <<Node>> 類 別 圖5. 節點(Node)類別 類別間存取 (Access) 關係：主要是說明 Web 應用 系統的導覽模型，而類別間存取關係所使用到的 圖示可分為三類：(1)節點類別間的關係、(2) 元 件類別與節點類別間的關係、(3) 元件類別間的關 係。其說明如下： (1) 節點類別間的關係是表示的是節點類別 間導覽行為，主要是可以分為三項：條件式索 引、條件式導覽與條件式索引導覽，分別說明如 下： 條件式索引(Conditional index) 如圖 6 所示： 其主要是應用於節點物件間的聚合關係，有著這 樣關係的兩個節點類別其主要是表示一個從屬的 導覽關係如樹狀的分歧。 <<Node>> 類 別 <<Node>> 類 別 <<Conditional index>> 圖6. 條件式索引(Conditional index)關係 條件式導覽(Conditional Guided Tour) 如圖 7 所示：主要是應用於節點物件間的聚合關係，有 著這樣關係的兩個節點類別其主要是表示環狀的 導覽關係。 <<Node>> 類 別 <<Node>> 類 別

<< Conditional Guided Tour >>

圖7. 條件式導覽(Conditional Guided Tour) 關係 條件式索引導覽(Conditional Indexed Guided Tour) 如圖 8 所示：主要是應用於節點物件間的聚 合關係，此種連結關係是結合上述兩種的導覽方 式。 <<Node>> 類 別 <<Node>> 類 別 << Conditional Indexed Guided Tour >>

圖8. 條件式索引導覽(Conditional Indexed Guided Tour)關係 (2) 元件類別與節點類別間的關係主要是說明 群組關係，如圖 9 所示： 群組關係說明節點類別 與元件類別間的聚合關係，也可實際地反應出單 一的網頁物件是如何由元件類別組合而成。 <<Node>> 類 別 <<Slice>> 類 別 圖9. 群組(Grouping)關係 (3) 元件類別間的關係說明元件類別間的關聯 性，主要分為兩種：單向連結與雙向連結。 單向連結(Unidirectional link) 如圖 10 所示： 表示元件類別間有參考引用的關係存在，但是參 考方向是固定的時候。 <<Slice>> 類 別 <<Slice>> 類 別 圖10. 單向連結(Unidirectional link)關係 雙向連結(Bi-directional link) 如圖 11 所示： 雙向連結表示元件類別間有參考引用的關係，並 且此參考關係是互相參考的關係。 <<Slice>> 類 別 <<Slice>> 類 別 圖11. 雙向連結(Bi-directional link)關係 <<Slice>> 類 別

透過上述的圖示將Web 應用系統中導覽模型 以UML 類別圖的型式表現出來，既有 UML 工具 的類別圖可以整合Web 應用系統模型的特殊屬性 加以擴充，例如圖12 所示的訂購系統物件模型經 由導覽設計後將以圖13 所示的方式表現其導覽模 型。 產品 <<entity>> 訂購項目 <<entity>> 1 1 採購明細 <<interface>> 訂單 <<entity>> 1..n 1 1..n 1 1 圖12. 訂購系統物件模型 訂單資訊 <<Slice>> 訂購項目資訊 <<Slice>> 產品資訊 <<Slice>> 訂單管理網頁<<Node>> 採購明細網頁 <<Node>> <<group>>

<<Conditional Indexed Guided Tour>>

產品明細網頁 <<Node>>

<<group>> <<Conditional index>>

<<Conditional Indexed Guided Tour>>

圖13. 訂購系統物件式導覽模型 本研究之設計方法主要的目標是針對 Web 應用系統使用物件式導向分析與設計技術能有效 地建立導覽模型，但是系統開發中常會需要表示 出豐富且複雜的企業規則，透過物件導向技術與 搭配 MVC 方法可以快速且有效地將企業企業規 則以物件模型表示，然而Web 應用系統中物件的 行為並不能直接的使用Web 網頁來建置，此時將 原有概念模型中所定義的物件中物件行為獨立抽 離為單一的物件，而成為行為物件如 Command Pattern[2, 7] 的模型，行為物件則可利用 JAVA 的 Servlet / JSP 或 CORBA[3, 13] 的技術來加以建 置。對於導覽模型中所呈現出來的關聯性經由建 置一 XML 應用程式架構可預先將條件式索引、 條件式導覽與條件式索引導覽這三項關聯予以建 置。導覽模型建置時由模型中元件與節點類別定 義撰寫成XML 之 DTD 格式，而網頁物件則為此 DTD 所規範之 XML 格式。再將網頁物件間關聯 性繼承預先所建置之 XML 應用程式架構後可更 有效地將模型中的網頁關聯性撰寫成 XML 格 式，最後利用 DOM 將網頁物件與 Java 或相關技 術設計出之企業行為物件予以整合以建置完成一 雛型Web 應用系統。透過上述設計方法將有效地 建立導覽模型並針對企業的行為物件予以妥善地 分割後進而提升 Web 應用系統之效率和建置更複 雜的Web 應用系統。

四、

Web 應用系統實例探討

本節中主要是依據上述的整合式物件導向方 法於 WWW 的環境上設計電力公司停限電管理系 統，並實際探討此 Web 應用系統之相關議題以驗 證此設計方法之可行性與有效性。因電力公司停 限電系統常需要提供一般電力用戶停限電資訊， 所以適合使用 Web 系統平台來建立。利用物件導 向技術設計 Web 應用系統可提供模組性、再利用 性、擴充性等優點。因此，使用物件導向技術概 念對於停限電資訊系統的開發有極大的幫助。另 外，實際系統的建置部分則可使用 Java 技術，因 為 Java 具有跨平台、軟體功能分配性、可攜性與 易於維護等優點。 現針對電力公司停限電管理系統建置依上述 所建議的 Web 應用系統開發流程進行說明。首 先，進行 Web 應用系統需求收集步驟；此步驟主 要是透過 使用者的訪 談並按使用 者功能需求規 劃，以完成停限電管理系統的使用個案圖如圖 14 所示。其主要系統功能分別為工作停電子系統、 事故停電子系統、限電管理子系統、停限電月報 子系統、電力用戶停限電資訊子系統等五項子系 統，其各子系統功能間相依的關係如圖 15 所示。 接下來將進行物件導向系統分析以完成系統相關 之模型架構與流程。依據傳統物件導向分析原理 分 析 出 三 種 物 件 類 型 ， 由 實 體(entity) 與 介 面 (interface)物件類型建立物件(網頁)與物件(網頁)間 的實體物 件關連模型 。實體物件 關連模型依據 RMM 方法設計其導覽模型架構以完成 Web 應用 延 伸 類 別 圖(Class diagrams extension for Web application) ，所產生延伸類別圖再應用 MVC 功能 分配法來確認各網頁是否已完成適當的資料與程 序之分配，如此即可完成系統的物件設計模型。 本實例中將電力用戶停限電資訊子系統透過物件 類別結構 間的實體物 件關連模型 設計之後完成 Web 應用延伸類別圖如例圖 16 所示。完成設計之 後，則進行 Web 網頁程式設計步驟，此步驟中先 使用 XML 技術建置網頁物件再利用 Java 技術建 置電力公司之企業行為物件並在 WWW 的環境上 建置用戶停限電資訊子系統之雛型系統。以建置 雛型系統為基礎，依使用者實際功能需求以重複 (iterative)和漸增方式來修正與增加停限電管理雛 型系統功能。雛型系統完成後，將依系統功能需 求與物件 導向測試方 法對雛型系 統進行功能測 試，以確保功能完整性並評估系統執行效率。最

後，可於 WWW 作業環境上建置較完整的電力公 司停限電管理系統。 經使用本研究之設計方法實例驗證後，證實 本設計方法有兩項重要成效：(1)利用關係管理結 構法可以有效地將Web 應用系統中複雜的超媒體 特性以系統結構式設計出網頁導覽模型，降低因 超媒體特性所造成的系統複雜度；(2)結合物件導 向方法與 MVC 法可使傳統應用系統能快速地移 轉至 Intranet 架構下建置 Web 應用系統並且兼容 傳統物件模型，以有效地達成模組性、再利用性 與可維護性及良好的績效。 圖 14. 電力運轉管理系統 Use Case 功能結構圖 圖 15. 電力運轉管理各子系統功能相依圖 圖 16. 電力用戶停限電資訊子系統 導覽類別圖

五、結論

目前單純使用物件導向技術來設計 Web 應用 系統之架構模型仍嫌有不足，主要是因為 Web 應 用系統是以網頁與網頁間所組合或聯結而成的。 因此，物件導向技術應用於 Web 應用系統時首要 之務就是能將 Web 的超媒體(Hypermedia)特性亦 即網頁與網頁間的超連結(Hyperlink)關係以物件的 模型方式表現出來。而關係管理結構法則對超媒 體關係模型化(Hypermedia Process Model) 提供了 結構化的關聯性架構，亦同時表示出網頁與網頁 之間複雜的關聯性，但是卻難反應重複使用以及 資料與程序之有效分配等特性。然而目前的物件 導向技術則對重複使用於資料和程序之有效分配 等應用程式特性提供了有效的解決方法，所以除 利用關係管理結構法來設計 Web 應用系統的導覽 模型外，並應整合MVC 方法將模型與行為物件加 以分割後，便於使用 JAVA 或 CORBA 的技術來 設計複雜的企業邏輯規則以建置雛型系統以提昇 系統效能。預先將網頁物件間關聯性利用XML 技 術建立 XML 應用程式架構後，對於本研究所提出 之物件導覽模型將可利用物件導向繼承技術將網 頁導覽的關係經由繼承此應用程式架後能有效地 建立。總之，在整合 Web 網頁間關聯架構與物件 導向技術來設計 Web 應用系統，預期將達成模組 性、再利用性、可維護性、資料與程序之有效分 用戶停限電資訊網頁 <<Node>> 限電預告查詢網頁 工作停電預告查詢網頁 <<Node>> 事故停電預告查詢網頁 限電資訊 <<Slice>> 限電案件 工作停電資訊 <<Slice>> 工作停電案件 事故停電資訊 <<Slice>> 事故停電案件 <<Conditional Index>> <<Conditional Index>> <<Conditional Index>>

<<group>> <<group>> <<Node>> <<Node>> <<group>> 工作停電預告查詢 事故停電查詢 限電預告查詢 停電查詢 電力用戶 事故案件管登 _服務中心 限電案件管登 _{營業管理人員} 工作停電排定 _{工務管理人員} 停電中案件管理 _{電力調度人員} 事故停電月報 工作停電月報 電力業務主管 事故停電管理 工作停電管理 限電管理 停限電管理 停電資訊月報

配、安全性以及良好的績效等特性，因而縮短 Web 應用系統的開發週期和降低其開發成本進而 大幅提高了系統之維護性。 利用整合式物件導向技術來設計 Web 應用 系統之物件(網頁)導覽模型，除可快速且有效地 將傳統應用系統移轉至Web 應用系統之外，未來 可將 XML 技術[7] 以統合企業內資訊格式與資訊 交換內容並利用建置 XML 應用程式架構而達成 更大的延展性與重複使用性並與其他Web 程式設 計技術有更完善的整合。此外，所設計出Web 應 用系統物件模型可利用 MVC 法進行功能分配， 利 用 此 種 方 法 可 以 再 整 合 XML 中 的 XSLT(Extensible Stylesheet Language Transactions) 技術可使Web 應用系統適合於行動通訊的計算環 境與一般 Intranet 的計算環境。原則上，利用本 研究提出的設計方法所產生之物件模型架構應可 適 用 於 更 多 相 關 的 Web 物 件 技 術 例 如 Microsoft’s .Net 或 J2EE 技術。

誌謝：本論文承蒙國科會研究計畫經費補助得以 順利完成(計畫編號: NSC 89-2218-E-031-004) ， 特申謝意。

六、參考文獻

[1] T. Bray, J. Paoli, and C.M. Sperberg-McQueen,

eds., “Extensible Markup Language (XML) 1.0,” W3C Recommendation, World Wide

Web Consortium, 1998; http://www.w3.org/TR/REC-xml.

[2] F. Buschman, R. Meunier, H. Rohnert, P.

Sommerland and M. Stal, “Pattern-Oriented

Software Architecture, A System of Patterns,”

John Wiley & Sons Inc. U.S.A., 1996.

[3] Eun Sook Cho, Soo Dong Kim, Sung Yul Rhew,

Sang Deuk Lee and Chang Kap Kim, “Object-Oriented Web Application Architectures and Development Strategies,” In 4th _Asia-Pacific

Software Engineering Conference and International Computer Science Conference

(APSEC '97 / ICSC '97), Clear Water Bay, HONG KONG, Dec. 2—Dec. 5, 1997.

[4] J. Clark and S. Deach, eds., “Extensible

Stylesheet Language(XSL),” W3C Working Draft, World Wide Web Consortium, 1998, http://www.w3.org/TR/WD-xsl.

[5] Jim Conallen, “Building Web Application with

UML,” Addison-Wesley Inc. Reading MA,

U.S.A., 2000.

[6] Jim Conallen, “Modeling Web Application with

UML,” White Paper Conallen Inc, June 1998,

http://www.conallen.com/whitepapers/webapps/ ModelingWebApplications.htm .

[7] David Carlson, “Modeling XML Application with

UML,” Addison-Wesley Inc., Reading MA,

U.S.A., 2001.

[8] S. Decker, S. Melnik, F. V. Harmelen, D. Fensel,

M. Klein, J. Broekstra, M. Erdmann and I. Horrocks, “The Semantic Web : The Roles of XML and RDF,” IEEE Internet Computing, Vol. 4, No.5, Sep./Otc., 2000.

[9] E. Gamma, R. Helm, R. Johnson, and J.

Vlissides., “Design Patterns: Elements of

Reusable Object-Oriented Software,”

Addison-Wesley Inc., Reading MA, U.S.A., 1995.

[10] F. Garzotto, D. Schwabe and P. Paolini, “HDM-

A Model Based Approach to Hypermedia Application Design,” ACM Transaction on

Information Systems, Vol. 11, No. 1, Jan. 1993,

pp. 1-26.

[11] Hans-W. Gellersen and Martin Gaedke,

“Object-Oriented Web Application Development,” IEEE

Internet Computing, Vol. 3, No. 1, Jan./Feb.

1999, pp. 60-68.

[12] Karl M. Goeschka and Markus W. Schranz,

“Client and Legacy Integration in Object-Oriented Web Engineering,” IEEE MultiMedia, Vol. 8, No. 1, 2001.

[13] T. Isakowitz and E. Stohr; P. Balasubramaniam,

“RMM: A Methodology for Structured Hypermedia Design,” Communications of the

ACM Journal, Vol. 38, No. 8, Aug. 1995, pp.

34-48.

[14] T. Isakowitz, A. Kamis, and M. Koufaris,.

“Reconciling Top-Down and Bottom-Up Design Approaches in RMM,” The DATA BASE for

Advances in Information Systems, Vol. 29, No. 4,

pp. 58-67.

[15] Ivar Jacobson, “Object-Oriented Software

Engineering: A Use Case Driven Approach,”

Addison-Wesley Inc. Reading MA, U.S.A., 1992.

[16] R. E. Johnson and B. Foote, “Design Reusable

Class,” Journal of Object-Oriented Programming, Vol. 1, No. 5, June/July 1988, pp.

22-35.

[17] David Kung, Chien-hung Liu and Pei Hsia, “An

Object-Oriented Web Test Model for Testing Web Applications,” In Proc. of IEEE 24th

Annual International Computer Software and Applications Conference (COMPSAC2000),

Taipei, Taiwan, October 25 -- October 29, 2000.

[18] C. Larman, “Applying UML and Patterns, An

Introduction to Object-Oriented Analysis and Design,” Prentice Hall Inc., NJ U.S.A., 1998

[19] A. Layman et al., “XML-Data,” W3C Note,

World Wide Consortium, 1998, http://www.w3.org/TR/1998/NOTE-XML-data.

[20] Gaedke, M.; Gellersen, H.-W.; Schmidt, A.;

Stegemüller, U. and Kurr, W., “Object-oriented Web Engineering for Large-scale Web Service

Management,” In 32nd _{Anual Hawaii}

International Conference on System Sciences

(HICSS '32), Maui, Hawaii, USA , Jan. 5. -- Jan. 8. 1999.

[21] E. F. Mohamed and D. C. Schmidt,

“Object-Oriented Application Frameworks,”

Communications of the ACM Journal, Vol. 40,

No. 10, October 1997, pp. 57-66.

[22] Daniel Schwabe and Gustavo Rossi, “An Object

Oriented Approach to Web-Based Application Design,” Theory and Practice of Object Systems, Vol. 4, No. 4, 1998, pp. 207-225.

[23] Lauren Wood, “Programming the Web : The

W3C DOM Specification”, IEEE Internet

Computing, Vol. 3, No. 1, Jan./Feb. 1999,