4.2 平台專屬導引精靈
4.2.1 網頁應用程式導引精靈模型
Language)[13]來進行描述，HTML 並不是程式語言而是一種標記語言(markup language)，
藉由許多的標記標籤(markup tags)對網頁結構與圖形使用者介面進行定義，但利用 HTML 所描述的是一種比較靜態的網頁與使用者進行互動的方式欠佳，所以常會使用 JavaScript[20]來增加 HTML 網頁動態效果的呈現，JavaScript 是一種廣泛使用在用戶 端網頁程式開發的腳本語言，也就是說在用戶端的瀏覽器上即可執行，不必再透過其他 伺服器的支援。因此在立在本系統上的網頁應用程式導引精靈主要是利用 HTML 與 JavaScript 所建構而成。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
36
圖 4.3：平台專屬的網頁應用程式導引精靈超模型。
‧
頁面結構模型主要以 Web、WPage、WPageName、ComponentSet 與 Component 五 個類別進行定義，Web 為描述整個網頁應用程式導引精靈的主要類別，因此 Web 會包 含一至多個 WPage 頁面，但 WPage 並非一般的網頁格式，而是一個收集導引精靈頁面 內容的集合，Web 會透過 AJAX(Asynchronous JavaScript and XML)[23]技術對 Web 進行非同步性的 WPage 頁面資料轉換，藉此來完成導引精靈頁面轉換的目的。每一個 WPage 裡會包含一至多個 ComponentSet，在此定義的 ComponentSet 主要目的是收集在 WPage 上，描述一個資料收集問題所需的元件集合，所以 ComponentSet 裡包含的是多 個以 Component 作為父類別的使用者介面元件與輔助元件的集合。最後是 WPage 之間 連接關係的建立，每一個 WPage 的名稱都必須以 WPageName 進行宣告並且是唯一的，
接著 Web 會有順序的進行收集，當作每一個 WPage 交換的順序。
使用者介面元件
使用者介面元件主要以 UIComponent、Label、TextArea、Select、Option、Input 與 FieldSet 七個類別進行定義，其中 UIComponent 是定義一個使用者介面元件的父類別並 且繼承 Component，所以 Label、TextArea、Select、Input 與 FieldSet 都必須繼承 UIComponent。
使用者介面元件主要是用來具體呈現在網頁上進行資料收集的方式，並且以 HTML 常使 用到的圖形使用者元件標籤為主，以下將會介紹幾個我們定義的使用者介面元件類別:
• Label：在網頁上給予其他的使用者元件定義一個文字標籤。
• TextArea：定義一個多行數的文字輸入區塊，區塊大小可以透過 TextArea 的屬性加 以定義。
‧
• Select：定義一個下拉式選單的框架，但在 Select 裡的每一個選項都必須再以 Option 類別進行個別的宣告。
• Input：在網頁上最常被使用的一個元件，主要功能是用來收集使用者輸入的資料，
並且 Input 還提供多種不同資料收集的型態，根據「type」的屬性可以分成以下幾 種常使用的型態，並定義在我們的模型裡。
text：定義一個收集文字輸入的欄位。
checkbox：定義一個 checkbox 欄位，提供使用者可以對此欄位進行選取或取 消選取的選擇，checkbox 的特性是可以重複的進行選擇。
radio：定義一個 radiobutton 欄位，提供使用者可以對此物件進行選取或取消 選取的選擇， radio 的特性是只能選擇其中一個，無法重複進行選取。
file：定義一個文字輸入的欄位與一個開啟文件瀏覽器的按鈕，用來進行檔案資 料的選擇。• FieldSet：主要是用來收集有相同性質的元件集合，並且會繪製一個框框將其包圍，
但在我們的模型裡我們將他定義成一個用來收集相同性質 ComponentSet 的集合。
輔助元件
輔助元件主要是以 HelpComponent、HelpMsg、WValidation 與 ErrorMsg 四個類別進 行定義，其中 HelpComponent 是定義一個輔助元件的父類別並且繼承 Component，所以 HelpMsg 與 WValidation 都必須繼承 HelpComponent。對於輔助元件的實作是利用在 HTML 標記標籤中加入 JavaScript 來進行相關功能的延伸，HelpMsg 類別是在網頁上提供一 個動態產生輔助訊息的「[Help]」文字，WValidation 類別則是在網頁上提供一個可以啟 動資料驗證的按鈕，並且產生一個資料驗證的框架，此框架是針對使用者提出的驗證訊 息與錯誤訊息 ErrorMsg 進行建構，但詳細的驗證邏輯還是需要程式開發者自行撰寫。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
39
最後圖 4.4 為利用 Xtext 建構而成的平台專屬的網頁應用程式導引精靈 Ecore 模 型。
圖 4.4：平台專屬的網頁應用程式導引精靈 Ecore 模型。