Angular 6 前端網頁

Angular6 前端網頁的部分，本系統提供兩個 Angular 元件，讓使用者檢視、

生成與編輯物件資料： Angular reactive form 與 Angular tree component。本系統 也實現了兩組遞迴解析器：一個是將表單資料轉換為JSOG 的解析器；一個是將 JSOG 資料能顯示於 Angular tree component 的解析器。使用者編輯時，也不侷限 於單一元件，兩元件能共享資料，也實作了清除表單、清除session storage、儲存 所有物件資料的功能。

Angular reactive form： 提供使用者生成與編輯物件資料的功能。前述所抓取到 的 annotation 屬性，會依照配對好的 HTML 標籤，基於 Angular 6 框架，製作 Form 的介面，並在每個欄位上顯示各資料的型態與顯示名稱。使用者在輸入資 料時，能一目了然地看見各資料的欄位，並且知道該欄位要填入何種型態的資料，

避免出錯。此元件也支援從 Angular tree component 拖放屬性值的動作。編輯完 成後，會透過本系統所撰寫之解析器，將表單內容轉換為JSOG，暫存於 session storage 中。由於 JSOG 是類似於 JSON 之樹狀結構，解析器需要遞迴地將表單內 容轉化為JSOG。

圖3-10 Angualr reavtive form

Angular tree component： 提供使用者檢視與編輯暫存物件資料的功能。由於編 輯好的Java 物件資料會以 JSON 格式暫存在瀏覽器上的 session storage，而 JSON 格式屬於樹狀結構，我們選擇用Angular tree component，這個開源的 Angular 元 件，來呈現session storage 中的物件資料。在這個 Angular 元件上，使用者可以 檢視或編輯暫存資料的各個屬性名稱、屬性值，或是拖曳屬性值到 Angular reactive form 上。

圖3-11 Angular tree component 示意圖

為了符合Angular tree component 的資料格式，以及達到以上所提及的功能，

本研究設計了兩個資料結構，物件節點與屬性節點，來顯示JSOG 的樹狀結構。

1. 物件節點： 代表整個物件，底下會有數個屬性節點。物件節點的顯示為 物件的名稱，無法被編輯，但名稱可以被複製。

表3-4 物件節點之資料結構

名稱 說明

name 物件節點顯示的名稱。

pureName 物件節點所代表之物件名稱，同name 的值。

val 物件節點所代表之物件在session storage 中的值。

formVal 物件節點代表之物件的表單內容。

type 物件節點代表之物件，所屬之Java class。

canEdit boolean 值，表示是否能夠編輯，在物件節點中為 false。

children 此節點的子節點陣列。

2. 屬性節點： 代表物件中的變數成員。屬性節點也許是終端節點，或者是 了遞迴解析器，將JSOG 遞迴地轉換為符合 Angular tree component 的資料格式。

本研究也客製化了 Angular tree component 的右鍵內容：輸出物件（Output object）、編輯屬性值（Edit Value）、複製屬性值（Copy value）、複製物件（Copy object）、同一型態的屬性值之複製貼上（Paste value）、刪除屬性值（Delete value）。 由於此 Angular tree component 主要是提供使用者檢視資料暫存之情況，此 Angular 元件上的編輯功能，只提供有限的修改。在貼上屬性值的部分，為了不 讓物件在反序列化的過程中發生錯誤，使得使用者找不到錯誤點，本系統將貼上 屬性值的功能做了嚴格的限制，限定只有同一型態的同一個屬性值，才能在此 Angular tree conponent 貼上。使用者依然可以複製該屬性值，貼到 Angular reactive form 上做編輯。以下將對於此元件自定義的右鍵功能，做進一步的描述。

1. 輸出物件（Output object）： 點選物件節點，能輸出單一物件的 JSOG 到 client 端。

2. 編輯屬性值（Edit Value）： 選擇一個物件資料的屬性節點，針對單一屬 性做編輯動作。

3. 複製屬性值（Copy value）： 選擇一個物件節點或屬性節點，複製節點的 值到剪貼簿中，將來可以貼到系統所產生的Angular reactive form 做編輯，

或是執行此元件的功能5（同一型態的屬性值貼上）。如果使用者選取物

件節點，則會複製物件節點的名稱。

4. 複製物件（Copy object）： 在 Angular tree component 的物件節點上按右 鍵，複製並生成該物件的資料內容，給予不同@id 值，然後儲存於 session storage 中。

5. 同一型態的同一屬性值之貼上（Paste value）： 在 Angular tree component 中，使用者將屬性值複製後，於另一個相同型態的物件資料的相同屬性 名稱貼上複製的值，並且更新session storage 中的暫存資料。

6. 刪除屬性值（Delete value）： 刪除選取的屬性值，並更新 session storage 中的暫存資料。

資料共享： Angular tree component 與 Angular reactive form 分別屬於不同的 Angular 元件，但資料必須互相傳遞。在 Angular 元件中，除了利用@Input、

@Output 做到資料傳遞之外，撰寫 Angular service 也是解決的方法之一，讓兩元 件能儲存、獲取共享的資料。本系統實作之功能之一：重新編輯物件（Edit Object）， 即 是 運 用 元 件 Angular 之間的 資料 共享 與 傳遞。 使用 者 能在 Angular tree component 中，選擇要編輯的物件節點後，讓使用者在 Angular reactive form 中，

進行編輯動作。

為了達到這樣的功能，本系統採用Angular 的 Observable data service[36]模 式，撰寫一個 service，當作元件之間的共用資料。只要 service 的資料更新，所 有元件的資料也會隨之更新。以下介紹service 與元件之間，資料共用的架構。

圖3-12 Observable data service 架構

每個暫存物件皆有自己的表單內容，在此稱為FormValue。將每個暫存物件 的名稱與FormValue 組成一個 Map，當作共享的資料項目。使用者如果在 Angular tree component 中編輯暫存物件，會將編輯結果寫入該物件的 FormValue，並回傳 至 Observable Data Service 中，維持 FormValue 的一致性與唯一性。Angular Reactive Form 產生的新物件資料，也會將其 FormValue 寫入 Observable data service 中。選擇「重新編輯物件（Edit Object）」時，會獲取該物件資料的 FormValue，

呈現在Angular reactive form 上，讓使用者編輯。

Observable data service 之中使用 BehaviorSubject 儲存資料。在共享資料時，

根據依賴反轉原則（Dependency Inversion Principle），不建議將Angular 元件直接 相依於service，而是相依於一個 interface；根據介面隔離原則（Interface Segregation Principles），Angular 元件僅相依於所需的 interface。

圖3-13 資料共享之 UML

第 4 章：操作流程與展示

此章節主要說明本研究之系統的操作流程與操作展示。於4.1 節說明操作流 程，分為「開發者操作流程」、「操作者操作流程」與「使用者操作流程」。於4.2 節展示，使用本研究指系統時，各步驟的網頁元件與伺服器溝通的細節。