實作範例

圖 19 Portfolio Example

圖 19中，股票管理服務的介面包含了四個頁，這裡用了複合頁，來將另外 三個獨立的頁組合起來。上方和左下角都用了 XSLT 頁，來呼叫客戶持有股票，

和公司概況資訊的後端服務，右下角的股票走勢圖是一個經由匯入而產生的遠端 頁，此遠端頁即代表著遠端動態產生股價走線圖的服務，它實際上在所屬的遠端 的表達服務中也是個 XSLT 頁。頁的實體 XML 內容可參照第四章中的頁的種類 一節。

為了呈現出這個範例，我們也實作了這個例子所需要的後端服務。包括一家 某公司提供的客戶持有股票清單服務和公司概況資訊服務。和另一家提供的價格 曲線圖服務。

另外我們也實作了網頁開發圖形使用者介面 (Page Builder)。在介面上，為 了能夠立即觀測到網頁表達服務中每一頁所呈現的內容，一個表達服務除了擁有 它的通訊埠，還需要提供 HTTP 通訊埠。我們的介面提供動態且所見即所得 (WYSIWYG)，並沒有把網頁部署和開發的時間及過程分開，增加開發效率。

圖 20 Page Builder 第二節 效能探討

在這裡要考量的是遠端頁的內容取得，可以是嵌入或是連結的方式。兩種方 式都有各有各的考量和使用時機。而效能的考量，除了嵌入和連結上的比較之 外，我們尚考慮表達服務之間的溝通管道。本論文中的實作在表達服務之間使

用 XML 協定，使得能夠做轉換和最佳化，允許在頁的內容產生的時候能夠做 不同的最佳化。我們也允許不同的溝通管道，可以是直接的物件指標傳遞 (RMI) 或是使用 SOAP。同樣的頁、內容可以被部署在不同的系統，不同的溝通管道 上，而不影響頁的內容。

在效能上，本論文的設計考量了溝通管道技術 (SOAP, socket, RMI)，嵌入 或連結的合作方式和語言。在系統的設計上，使用了 TCP/IP 協定，建立 socket，

來做為表達服務間的溝通管道。使用標準的通訊協定和我們設計的 XML 訊息格 式做為溝通介面，因此表達服務得以跨語言，跨平台。

效能必需在可以接受的範圍內。為了與一般的網頁製作做比較，這裡用 JSP 的方法來實作與例子相同的網頁，動態網頁中使用後端服務的部份也是用相同的 遠端呼叫、連結方式，來跟後端服務溝通。這些 JSP 網頁與此例子被放在同一台 網頁伺服器的容器上。針對不同性質的頁，這裡做了連續重覆連線所花的時間比 較，系統環境設置為：

z CPU：Intel Pentium4 2.0G z Memory：512 Mb

z Servlet application server：Tomcat 5.0.19 z OS：Windows XP

結果如下表 15與表 16，單位為秒：

次數 STATIC HTML

HTMLPage Image ImagePage

100 0.953 1.703 2.641 5.062 1000 7.219 16.312 27.687 49.094

表 15 靜態頁的效能比較

次數 JSP page RewritePage InlineXSLT

由 HTMLPage 和 ImagePage 所做的比較可以看出，不做任何處理，只是完 整的把靜態固定的內容送出去，就差不多是一倍時間的差別。這時間的付出是花 在多了透過 Servlet 來做內容的輸出。在動態網頁的比較方面，以 XSLT 頁來說，

跟 JSP 比，時間量為它的二倍，而改寫頁則為四倍。這一點是因為多了轉譯他端 XML 結果為自定 XML 格式並在伺服端把內容轉譯為 HTML 的處理。

遠端頁使用 Linking 和 Embedding 的方式，需要考量其效能上的差異。如下 拿動態產生圖檔的頁的例子，做了遠端頁使用 Linking 和 Embedding 兩種方式和 非遠端頁的效能比較。

次數 Local RemotePage (Linking) RemotePage (Embedding)

100 21.343 22.25 44.077

1000 206.797 226.656 407.231

表 17 遠端頁 (Chart) 運作方式之效能比較

由表 17，可以看出說，Embedding 比 Linking 所花的時間多了一倍。以這個 例子來說，傳送圖檔與儲存的時間占了相當大的時間量，加上修改網頁中圖檔的 URL 以及超連結的路徑所花的時間，因此造成了如此時間上的代價。

由上述的比較可看出，使用這個架構，基本上會大約比一般的集中式的網頁 伺服器多耗費一倍的工作量。雖然效能上幾近差了一倍之多，但在實作上，還有 改善的空間，例如能夠讓網頁伺服器直接處理我們自定 XML 格式的頁，而非透 過 Servlet 作為中央控制元件 (Controller)，如此相信可大幅地提昇效能。而現今 已有的表達層的網路應用程式架構，大多也都建置在 Java 技術中的 Servlet 之上。

為了要達到提供網頁的服務，有效率且模組化的開發，在某些情形下以如此的效 能做為犧牲或許是可以被接受的，尤其是在運算能力愈趨強大的今天。

而 XSLT Page，Rewrite Page 依照 rule 來將動態內容轉為適當的格式來描述。

當動態取得的內容愈多愈複雜時，轉譯規則 (Rule) 就愈難寫。因為一頁只用一 個轉譯規則集合 (rule set) 來對整頁做轉述。複雜的 Rule 是寫作網頁上的缺點。

對於網路應用程式架構 (Web Application Frameworks) 來說，通常還有許多 問題需要考量以完成一個完整的架構。例如，安全、全球化 (Internationalization)、

表格驗證、錯誤處理、支援執行 Web Service，支援某些資料存取技術 (像 JDBC、

EJB、iBATIS)，等等。但有些已經不在本篇論文所提的架構所針對的重點。但 這些功能和整合的提供，似乎是常被與其他的網路應用程式架構來做比較。

第六章 相關研究

本章討論一些相關論文提出的架構和其概念。並討論一些現在已常用且標準 的技術。分為如何撰寫內容，元件間如何互相溝通以完成內容，如 JSP，Struts；

以及跟 Page Model 有關的內容的表示方法，如包括 HTML，XML + XSLT，CSS，

FO (Format Object)。

WCCM (Web Content Component Model) [16]，為一個內容導向的 web 架構 原型，其主要概念為，一個 web 應用程式以元件的立場來看，在設計上被視為 許多 web 內容元件 (Content Component)，和一些其他提供某內容上的服務的服 務元件的集合。

WCCM 強調元件化，它把內容視為一個元件，在概念上，將內容和元件結 合在一起。並欲藉此原型，增進 web 應用程式設計與維護的效率。WCCM 並描 述此其架構中，內容元件與服務元件的關係。它將內容元件只專注於內容的處 理，表達，而將處理內容上的特殊功能都交由服務元件來輔助。甚至將內容的交 換，交換資料格式上的轉換，都交由其他元件來處理。

WCCM 將軟體工程的精神，應用在 WEB 應用程式上，它的概念在於強調 元件化帶來系統開發上的好處。將內容視為一個元件，並規範其與其之間的關 係，以這樣的觀點來看，能夠提昇設計與維護上的效率，也降低重新設計與維護 上的成本並降低其工作量。

在本論文中所提出的頁原型，裡頭的設計概念也是將頁視為一個負責內容組 織和表達的元件，並將其他特殊的功能都可交由其他元件來完成，比如，搜尋，

統計，網頁流向管理，帳號認證管理，等等。而提供這些服務的，可能是某種類 型的頁，或是其他伴隨的服務。而元件與元件之間的溝通，也是經由 XML。

Bull’s Eye [17]提出將 UI 元件設計分為五種層級的概念，以不致於設計 UI 時太過一般或是只符合於某特殊的實例下使用。它強調出 UI 元件的使用性的問 題。這五個層級分別為元件 (Component)，頁樣版 (Page Template)，頁流 (Page Flow) ， 互 動 樣 式 (Interaction Model) ， 與 包 羅 萬 象 的 原 則 (Overarching Principle)。藉由在每一層級設計它的設計方針的概念，達到 UI 元件能夠跨系統，

跨網站的被使用。

Saimi’s PlayFwas Framework [15]讓初級的開發者能夠經由一套程序和介面 定義文件來有效率地開發 web 應用程式，降低開發的時間，並改善維護和擴充 的問題。在其中它的架構是以一個 Java Servlet，一個 JavaBean，一個 JSP 來完 成一個頁的內容。它們的角色分別為區隔請求並檢查輸入資料，收集並維護產生 的資料，和版面的設計和編排。藉由基本的 Servlet 和 JavaBean 已提供大部份共 同基本的實作，網站設計者在開發 Servlet 和 JavaBean 的時候只需繼承並覆寫掉 一些方法。 architectural patterns)。入口網站的架構強調 model 的部份，後端的個人化服務依 照 使 用 者 的 個 人 喜 好 來 提 供 資 訊 ， 將 個 人 化 的 資 料 對 應 到 關 聯 式 資 料 庫 (relational database) 裡的資料，並且每個個人化服務能夠有效地讀取它們所需的

個人化資料。個人化的儲存物件應該被用一個一般的方法來表示且依據關聯式資 料模型 (Relational Data Model) 來對應。

在本論文中的分散式表達架構，並不專注在使用者個人化資訊的管理，只強 調出這些個人化資訊能夠轉為網頁中所需的 Context 或是連結後面的參數，來完 成調整及客製化遠端網頁的需求。通常此類型的大型網站所得到的個人化資料相 當的龐大，因此個人化的服務都是交由後端服務和資料庫來完成。至於前端網頁 介面 (View) 的部份，只紀錄著使用者身份，和一些按鈕等使用者介面的狀態。

CSS (Cascading Style Sheets) 最早是搭配 HTML 語言的樣式語言，但 CSS 也可作為輸出 XML 文件的樣式語言。CSS 能夠針對指定的標籤定義全新的樣 式，但 CSS 只是單純的定義樣式，XSL (eXtensible Style Language) 提供更強大 的功能。

XSL 在功能上分為兩個部份，分別是轉換 XML 文件，和格式化 XML 文件。

其中轉換的部份是將 XML 文件架構轉換為另一個 XML 架構的文件，此轉換部 份的規格稱為 XSLT (XSL Transformation)。XSLT 並不是在顯示 XML 元素內容，

只是將 XML 元素轉換成其他文件的格式。而格式化 XML 的部份為將 XML 文 件轉換為另外一種格式的文件，例如 PDF 檔。先藉由 XSL Stylesheet 將 XML 文 件轉換為內部仍為一個樹狀結構的文件 (XSL FO)，而此樹狀結構的節點是格式 物件 (Formatting Objects)，例如，段，章。此樹狀結構即對應到此文件即將被輸 出或表達在螢幕上的架構。這個樹接著被格式化成輸出，藉由使用 Stylesheet 中 定義的格式物件裡的格式屬性，描繪此 XML 文件的元素，。

第一個步驟是由 XSLT Processor 轉換輸入的 XML 文件為 XSL FO 實體。第 二個步驟是由一個支援 XSL FO 的描繪者 (Renderer) 將 XSL FO 描繪出來。

因此藉由 XSLT 轉換語言，如本論文中頁模型中的 XSL 頁，提供轉換規則，

利於達到多樣的輸出表達結果。