以Java與瀏覽器為基礎的應用領域物件之編輯系統的快速生成 - 政大學術集成

全文

(1)國立政治大學資訊科學系 Department of Computer Science National Chengchi University. 碩士論文 Master’s Thesis. 以 Java 與瀏覽器為基礎的應用領域物件之編輯系統的快速生成 Rapid Generation of Editing Systems for Application Objects Based on Java and Web Browsers. 研究生：楊宗翰指導教授：陳正佳博士. 中華民國一零八年五月 May 2019. DOI:10.6814/NCCU201900018.

(2) 摘要現今資訊市場上的各式應用系統，均需要產生或處理大量的應用領域資料，像是醫院的病歷資料、企業客戶資料、企業人力資源資料等等。這些資料有相當的比例需直接或間接地由相關者以人工方式輸入；至於其內容與型式，則具有相當大的歧異性，主要由各個應用領域的個別特性，以及系統的實際分析與設計而決定。因此，如何提供一個良好的通用工具，讓開發者能快速地打造適合特定領域的優良編輯環境，讓相關人士得以方便且迅速地輸入相關應用領域資料，顯然是我們在軟體系統開發時，很值得關注的一個課題。本論文提出了一套通用工具系統，能夠為任何給定應用系統的領域物件生成在 Web 瀏覽器上操作的編輯系統。在編輯系統的規格描述部分，我們使用 Java 類別來表示應用領域中的可能物件模型，並在每個 Java 類別中嵌入對應的 Java Annotations 以表示類別實例在網頁上的呈現方式。對規格的後續處理將生成被封裝為 Web 應用的預期編輯系統，之後只要在 Jetty 中安裝並激活該 Web 應用，用戶即可以透過瀏覽器進行領域物件資料的編輯，並可將結果存為 JSOG 格式的文檔。後續的應用則可將之反序列化為應用領域物件。本研究使用的主要技術有：Jetty、Java annotation、Java reflection、Java servlet、Angular 網頁框架。我們的系統產出的編輯器是一個 web 應用，在伺服端它使用了 Jetty 此種以 Java servlet 為基礎的內嵌網頁伺服器，而客戶端部分則使用了 Angular 框架。內嵌網頁伺服器的使用可避免編輯器操作時還需常駐一個遠端網頁伺服器，而搭配 servlet 與 Angular 產生的前端網頁頁面則提供 Angular reactive form 與 Angular tree component，可供使用者輸入與檢視資料內容。當編輯到達一定階段時，編輯系統允許將資料序列化為 JSOG 格式，並暫存於瀏覽器的 session storage 之中，而當編輯結束需要匯出時，系統則可將暫存資料寫到指定的儲存檔。 i. DOI:10.6814/NCCU201900018.

(3) Rapid Generation of Editing Systems for Application Objects Based on Java and Web Browsers. Abstract In today's information market, all kinds of application systems need to generate or process plenty of application data, such as patient medical records, corporate customer data, enterprise human resource data and so on. A large proportion of these data needs to be manually entered directly or indirectly by relevant users; as to the content and type, there is great variety in these data, mainly depending on the domain characteristics of individual application, as well as the actual system analysis and design. It is therefore very attractive to software developers if we could provide a tool allowing to quickly create a good editing system tailored for any given application system, by which users can easily and quickly enter required application data. This thesis comes up with a system capable of generating an editing system operated on web browsers for the domain objects of any given application system. In the specification of the editing system we use Java classes to represent all types of objects in the given application and embed Java annotations in each class to express how its instances are rendered on a web page. Succeeding processing of the specification will generate the intended editing system packaged as a web application. After installing and activating the web application in the Jetty web server, the user can start his editing of domain data by a browser and ends with the result saved as a file of JSOG format. Subsequent applications can deserialize its content into application objects.. ii. DOI:10.6814/NCCU201900018.

(4) The main techniques and tools used in this thesis include: Jetty, Java Annotations, Java Reflection, Java Servlets, and Angular web framework. The editor generated by our system is a web application. On the server side, it uses embedded Jetty, a web server based on Java servlets; on the client side, it uses the Angular framework. The use of an embedded web server avoids the need of the residence of a remote web server when the editor is operated. The web pages of the editor are generated using servlets and Angular. They provide a reactive form and a tree component for the user to enter and view object contents. When the editing reaches a certain stage, the system allows to serialize the result in JSOG format and cache it in the browser's Session Storage. When the editing ends, the cached data can be written to any designated file in the local machine.. iii. DOI:10.6814/NCCU201900018.

(5) 目錄摘要................................................................................................................................. i Abstract ..........................................................................................................................ii 目錄............................................................................................................................... iv 圖目錄..........................................................................................................................vii 表目錄........................................................................................................................... ix 第 1 章序論.................................................................................................................. 1 1.1 研究背景與動機.................................................................................................. 1 1.2 實現方式.............................................................................................................. 3 1.3 論文貢獻與特色.................................................................................................. 5 第 2 章相關研究探討.................................................................................................. 6 2.1 Java 物件 ............................................................................................................. 6 2.1.1 POJO ............................................................................................................. 6 2.1.2 JavaBeans ...................................................................................................... 7 2.1.3 Reflection ...................................................................................................... 8 2.1.4 Annotation ..................................................................................................... 9 2.2 Web Server ......................................................................................................... 10 2.2.1 Servlet ......................................................................................................... 11 2.2.2 Jetty ............................................................................................................. 12 2.2.3 Jetty 與 Tomcat 之比較 .............................................................................. 14 2.3 Java 物件與 JSON 的轉換 ................................................................................ 14 2.3.1 JSON ........................................................................................................... 14. iv. DOI:10.6814/NCCU201900018.

(6) 2.3.2 Jackson ........................................................................................................ 16 2.3.3 Gson ............................................................................................................ 17 2.3.4 JSON-B ....................................................................................................... 18 2.3.5 JSOG ........................................................................................................... 20 2.4 網頁呈現與瀏覽器暫存................................................................................... 21 2.4.1 Angular ........................................................................................................ 21 2.4.2 Angular tree component .............................................................................. 24 2.4.3 HTML5 Web Storage .................................................................................. 25 第 3 章系統架構與實作............................................................................................ 26 3.1 系統架構........................................................................................................... 26 3.2 系統實作........................................................................................................... 29 3.2.1 修改 JSOG package ................................................................................... 30 3.2.2 AnnotationForm 與 AnnotationStyle .......................................................... 32 3.2.3 Jetty Embedded Web Server ....................................................................... 36 3.2.4 Angular 6 前端網頁 .................................................................................... 38 第 4 章：操作流程與展示.......................................................................................... 44 4.1 操作流程........................................................................................................... 44 4.1.1 Java class 產生新物件資料 ........................................................................ 46 4.1.2 編輯已存在之物件資料............................................................................ 47 4.2 操作展示........................................................................................................... 48 4.2.1 開發者操作展示........................................................................................ 48 4.2.2 操作者操作展示........................................................................................ 50 4.2.3 使用者操作展示........................................................................................ 51 第 5 章結論與未來研究方向.................................................................................... 55. v. DOI:10.6814/NCCU201900018.

(7) 5.1 結論................................................................................................................... 55 5.2 未來研究方向................................................................................................... 56 參考文獻...................................................................................................................... 57. vi. DOI:10.6814/NCCU201900018.

(8) 圖目錄圖 2-1 POJO 示意圖...................................................................................................... 7 圖 2-2 自定義 annotation 範例 .................................................................................. 10 圖 2-3 Jetty 架構圖 ...................................................................................................... 12 圖 2-4 Handler 配置示意圖 ........................................................................................ 13 圖 2-5 JSON Object ..................................................................................................... 15 圖 2-6 JSON Array....................................................................................................... 15 圖 2-7 JSON’s value .................................................................................................... 16 圖 2-8 PersonDemo Class ............................................................................................ 18 圖 2-9 Gson Serialization............................................................................................. 18 圖 2-10 Gson Deserialization....................................................................................... 18 圖 2-11 JSON-B Serialization...................................................................................... 19 圖 2-12 JSON-B Desrialization ................................................................................... 19 圖 2-13 Angular 架構圖 .............................................................................................. 21 圖 2-14 web storage 示意圖 ........................................................................................ 25 圖 3-1 系統架構圖 ..................................................................................................... 27 圖 3-2 JSOGRef 增加之變數 ...................................................................................... 30 圖 3-3 JSOGRefSerializer 增加之@type 輸出 ........................................................... 31 圖 3-4 JSOGRefDeserializer 增加之變數傳入........................................................... 31 圖 3-5 JSOGGenrator 改寫之建構函式 ..................................................................... 32 圖 3-6 AnnotationForm annotation .............................................................................. 33 圖 3-7 AnnotationStyle 程式碼 .................................................................................. 36 圖 3-8 在 Java class 中使用自定義之 annotation ..................................................... 36 圖 3-9 解析類別結構之示意圖 ................................................................................. 37 vii. DOI:10.6814/NCCU201900018.

(9) 圖 3-10 Angualr reavtive form ..................................................................................... 39 圖 3-11 Angular tree component 示意圖 ..................................................................... 40 圖 3-12 Observable data service 架構 ......................................................................... 43 圖 3-13 資料共享之 UML .......................................................................................... 43 圖 4-1 開發者之操作流程 ......................................................................................... 44 圖 4-2 操作者之操作流程 ......................................................................................... 44 圖 4-3 使用者之操作流程圖 ..................................................................................... 45 圖 4-4 產生新物件資料之流程圖 ............................................................................. 46 圖 4-5 編輯已存在之物件資料流程圖 ..................................................................... 47 圖 4-6 CarTires 設定 annotations 範例 ....................................................................... 49 圖 4-7 設定多個 Java class 名稱為命令列參數 ....................................................... 50 圖 4-8 Java class 與開啟檔案之選擇區塊 ................................................................. 51 圖 4-9 Angular reactive form ....................................................................................... 51 圖 4-10 Angular tree component 顯示各個暫存資料................................................. 52 圖 4-11 開啟檔案示意圖 ........................................................................................... 53. viii. DOI:10.6814/NCCU201900018.

(10) 表目錄表 2-1 Jetty 與 Tomcat 比較 ........................................................................................ 14 表 2-2 JSON 與 Java Data Binding 的型態對應 ........................................................ 17 表 2-3 三種 API 之差異 ............................................................................................. 20 表 2-4 Angular 的 Component 生命週期 .................................................................... 23 表 2-5 Angular tree component 的資料格式............................................................... 24 表 3-1 AnnotationForm annotation .............................................................................. 33 表 3-2 AnnotationStyle annotation .............................................................................. 34 表 3-3 InputTypeControl Enum ................................................................................... 35 表 3-4 物件節點之資料結構 ..................................................................................... 40 表 3-5 屬性節點之資料結構 ..................................................................................... 41. ix. DOI:10.6814/NCCU201900018.

(11) 第1章序論 1.1 研究背景與動機現今的各式資訊應用系統均需參考或使用大量的應用領域資料，例如：醫療系統的客戶與病歷資料、企業資源規劃(ERP)[1]系統中的各種生產管理、進銷存貨管理、財務會計、人力資源、供應鏈與客戶資訊等等的資料。而這些相關資料可能是由使用者提供，或者由第三方提供。資料產生的方式，或許是由相關程式產出，或者直接、間接的由相關者以人工方式輸入。傳統輸入資料的做法不外以下幾種方式：最原始的做法是由程式驅動，當程式執行至需要相關資料的執行點時，由程式顯示訊息，要求使用者輸入相關資料，等待接收到正確資料後，再執行後續動作。這種方式顯然非常不便且沒效率。接著，在全功能的 GUI[2]尚不發達時，應用程式提供階層式的表單式介面，讓使用者層層選擇，找到對應位置之後，再填入相關資料。這種方式也不甚方便與有效率。之後，隨著 GUI 的進步，各式語言與開發環境，均提供便利又美觀的資料輸入表單與欄位，還能夠查看資料內部的架構與格式。然而就系統開發觀點而言，利用市面現成工具，為特定應用領域的各種型態物件打造現代化的專屬編輯系統，雖非不可行，但卻是相當耗費時間與人力的繁雜任務，而瞭解相關 GUI 工具，具有編輯器設計技能的程式師更是稀少難求。因此，如果存在一個通用工具，讓開發者能快速地打造適合任何給定領域的專屬優良編輯環境，讓相關人士得以方便且迅速地輸入相關應用領域資料，顯然是我們在軟體系統開發時，很期盼能獲得的一個編輯系統開發利器。 1. DOI:10.6814/NCCU201900018.

(12) 以 Java 語言來說，因其跨平台的特性，被廣泛運用在手機、平板電腦、桌上型電腦與網路應用。Java 的另一個特性就是物件導向。程式設計者在設計軟體的時候，可以自行定義類型(class)、關聯(reference)操作與方法(method)。這樣的特性，讓我們能運用 Java class，定義領域資料的型態與內部結構，並將資料以 Java 物件儲存，或是利用 Java 對其他資料格式的支援，例如 XML 或 JSON 等，將之轉換為使用者需要的資料格式。現在市面上有許多的開發軟體提供不錯的環境來開發編輯器，但前提是開發者必須先熟悉採用的開發工具以及相關的複雜 GUI 與編輯框架。然而由於市面工具種類繁多，具有相關技能的程式設計師通常稀有難尋，而從頭訓練的跨入門檻又極度高聳。因此如果能有一大家都熟悉的 GUI 架構，而讓待開發的編輯系統均在此 GUI 架構上建造，則顯然可以節省許多的系統開發時間與人員訓練。基於目前瀏覽器不再只是單純的瀏覽網頁，許多應用程式都有提出瀏覽器版本的服務，例如：LINE, Telegram, 遠端控制等等，因此本研究決定利用瀏覽器廣為人知的人機介面，將編輯系統建造成 web 應用，而得以於無所不在的瀏覽器上執行。我們提供的物件生成與編輯系統會將服務建構在內嵌的網頁伺服器(Jetty)中，使用者能直接開啟瀏覽器來編輯 Java 物件，當編輯結束後，亦可將資料序列化為的 JSOG 字串，並輸出至指定路徑的檔案中。此 JSOG 字串將來能反序列化回 Java 物件，達到為使用者提供一個輕量、方便的 Java 物件生成與編輯服務。. 2. DOI:10.6814/NCCU201900018.

(13) 1.2 實現方式 Java 語言有良好的跨平台特性，能廣泛地應用在不同的裝置上，例如：手機、電腦、嵌入式裝置，其物件導向的特性，也能讓我們結構化地定義資料的各個屬性與使用方法，所以我們選擇以 Java 語言來定義領域物件的資料模型。開發者以 Java class 定義資料模型後，透過本系統所定義的兩個 Java annotation：AnnotationForm, AnnotationStyle，為每一個變數成員標記它們將在網頁上所呈現的樣貌例如標題、名稱、預設值與編輯方式等。接著經過編譯與打包為一 jar 檔之後，即可將之交付系統操作員。操作員將交付的 jar 檔的路徑當作啟動本系統所需之參數，啟動系統後，即能透過本系統來生成或編輯物件，而這些物件是屬於操作者所設定之 Java 類別。除了產生單機應用，可在同一機器執行內嵌 Jetty 與瀏覽器而達成編輯器功能之外，我們亦允許將前述 jar 檔及相關網頁資料一併整合為一網頁應用並打包為一 war 檔。接著只要按 Java EE 的簡單標準程序，即可將之安裝至任何 Java 網頁伺服器。之後任何遠端用戶，只需透過瀏覽器打開此網頁應用之首頁，即可進行所要之編輯。一般來說，Java class 裡會有許多的變數成員，程式設計人員在創建 Java 物件時，都必須定義好每個變數成員的值。依循這個方式，我們將每個變數成員當作物件的各個屬性值，在網頁上讓使用者依照創建 Java 物件的步驟，賦予物件中各個屬性所需要的值，來創建物件資料。物件資料是以 JSOG 作為儲存格式，將來可序列化回 Java 物件，在 Java 程式中使用。前端網頁部分，應用 Google 開發的 Angular 6 作為網頁的框架，處理前端的頁面呈現與元件之間的資料邏輯，快速地且動態地呈現編輯的畫面與資料。本系統以 Angular reactive form 提供使用者生成新的物件資料；以開源的 Angular 元件：Angular tree component，提供資料內容的檢視功能。使用者均可以運用這兩個 Angular 元件來編輯物件資料。 3. DOI:10.6814/NCCU201900018.

(14) 後端伺服器以 Jetty 這個內嵌的網頁伺服器，提供解析類別結構，JSOG 字串輸出，以及網頁服務支援。基於以上開發者、操作者、使用者的觀點，本研究以 Java 讓開發者定義資料模型，並利用 Java reflection 的特性與 Java annotation，於內嵌的 Jetty 伺服器，解析類別結構。操作者設定各個 Java Class 的路徑，讓系統能針對這些 Java class，提供物件資的料生成、檢視與編輯。本系統基於 Angular 框架所產生的網頁介面，提供兩個 Angular 元件，讓使用者能在網頁上生成、檢視與編輯資料，而這些資料會先暫存於瀏覽器的 session storage 之中。等到使用者要將物件資料輸出時，會將暫存的 JSOG 字串匯出成檔案儲存。此 JSOG 字串未來能被反序列化回 Java 物件，在 Java 程式中使用。. 4. DOI:10.6814/NCCU201900018.

(15) 1.3 論文貢獻與特色本論文研究的主要貢獻是提出一套通用工具系統，可快速地為任何應用系統產生輕量型的領域物件生成與編輯系統。該系統的主要特色如下： 1. 以 Java class 定義應用領域物件的資料模型。 2. 用內嵌於 class 的 Java annotation 表示物件屬性資料在網頁上的呈現方式。 3. 產生的編輯器為一 web 應用，它是建構在現今最普遍的網頁伺服器-瀏覽器架構之上。 4. 編輯器的客製化網頁，可提供友善的領域資料編輯環境。 5. 可將完成的編輯資料以通用的 JSOG 檔案格式輸出與儲存。其後可方便地反序列化為 Java 或其他語言的應用物件。至於，利用本系統產生的編輯系統則有以下幾項特性： 1. 為使用者提供客製化的 Form 與網頁，當作資料的編輯頁面。 2. 編輯時，能更方便的檢視資料內容。 3. 資料能輸出成其他格式，或通用的資料格式，例如：一般文字檔或 JSON。 4. 可當作通用的 Java 物件編輯系統，減少開發編輯軟體的時間。. 5. DOI:10.6814/NCCU201900018.

(16) 第2章相關研究探討此章節主要介紹其他相關研究領域，以及本研究所使用到的理論與技術，依照類型分別介紹。將於 2.1 節介紹 Java 物件，包含：POJO、JavaBeans、Reflection 和 Annotation。2.2 節介紹網頁伺服器，包含：Servlet、Jetty 以及 Jetty 與 Tomcat 的比較。2.3 節介紹 Java 物件與 JSON 的轉換，包含 JSON、Jackson、Gson、JSONB、JSOG。2.4 節介紹網頁呈現方法以及瀏覽器暫存，包含 Angular 框架、開源的 Angular tree component 與 HTML5 之 web storage。. 2.1 Java 物件在 Java 語言中，萬物皆物件。每個物件（Object）都是一個類別（Class）的實例（Instance）。程式設計者可以根據需求，設計各式各樣的類別（Class）來產生物件，或是使用類別中的方法，對物件進行操作。其中，有一些特殊設計的 Java 物件，能提供程式設計者許多便利。有了這些物件後，加上 Java 對物件的 Reflection 機制，以及利用 annotation 夾帶不影響程式的額外資訊，將能更靈活的運用 Java 物件。以下將依序介紹 POJO、JavaBeans、Reflection、Annotation。. 2.1.1 POJO POJO 全名是 Plain Old Java Object[11]，如同它字面上的意思，一個單純的 Java 物件，具有很高的可讀性與重複使用性。一個 POJO 具有下列特性： 1. POJO 不實現任何 interfaces、不繼承任何 class、不加註任何 annotation。 6. DOI:10.6814/NCCU201900018.

(17) 2. POJO 只有類別變數，變數的狀態可以是 private、public、protected 或是 default 3. 公開的設值方法（setter）和公開的取值方法（getter）。. 圖 2-1 POJO 示意圖. 2.1.2 JavaBeans JavaBeans[12][13]是 Java 中一種特殊的物件[19]，屬於 POJO 的一種特例，一樣具有很高的可讀性與重複使用性，常見於 JSP 的開發之中。JavaBeans 的精 7. DOI:10.6814/NCCU201900018.

(18) 神在於，將資料的屬性值、方法、JavaBeans 的事件處理，全部包裝在同一類別中，讓我們能有效的控管及使用資料。程式設計者可以使用 java.beans 這個 package，建構自己的 JavaBeans。 JavaBeans 中的所有屬性必須是私有的（private），確保我們只能用同一個 JavaBeans 裡的方法，修改或取得該 JavaBeans 的屬性值。JavaBeans 的屬性值大致上可以分成四類[14][15]： 1. Simple properties：一般型別的屬性，包含其 get/set 方法。 2. Indexed properties：陣列型別的屬性，包含其 get/set 方法與特定陣列位置的 get/set 方法。 3. Bound properties：某個屬性的內容變更時，通知事件處理，或是通知某個實作 PropertyChangeListener 介面的 class，處理內容變更的屬性。 4. Constrained properties：某個屬性的內容改變時，在其允許條件內，可以變更其內容；不在允許條件內，丟出 Exception。 JavaBeans Methods[16]的定義就比較簡短：任何無關屬性定義的公開方法，都是 JavaBean 的方法。 JavaBeans 的事件處理[17][18]：JavaBeans 可以觸發任何類型的事件，也可以自行定義事件處理的方法。如果要自行定義事件處理，事件的監聽器要繼承 java.util.EventListener。. 2.1.3 Reflection Reflection[7]是「電腦程式在執行時（run time）可以存取、檢測和修改它本身狀態或行為的一種能力」。因為擁有 reflection 機制，程式能夠在執行期間得知自己的外觀，對自身進行檢測，甚至根據一些額外的資訊，改變程式狀態或結構，實現自我複製或自我修改。這樣的機制，通常出現在腳本語言，或是以虛擬機器. 8. DOI:10.6814/NCCU201900018.

(19) 為基礎的語言，例如：Java、C#、Python、JavaScript 等等，一般常見的 C 語言或 C++則沒有這項能力。 Java Reflection API[8]針對物件的類別（class）、類別變數成員（class field）、方法（method）、建構函式（constructor），都有定義其 reflection 的方法，提供開發者使用。我們以取得 Class 類別為例，Java reflection API 允許 Java 程式透過 Class 類別，指定一個類別名稱，取得該名稱的 Class 物件，或是透過 Object 類別，取得該物件所屬的 Class 物件。Java 的 reflection 機制讓我們能更彈性的使用、執行程式，允許正在執行中的程式操作自身內部的屬性。本研究之系統，利用 Java 中的 reflection 機制，獲取 Java class 中的各項資訊，包含類別名稱、類別變數成員名稱、變數成員上的標籤等資訊。. 2.1.4 Annotation Annotation[9]是程式的 metadata，記有程式的資料，不會對程式的運行有影響。在 Java 程式進行編譯時，提供資訊讓編譯器處理，或是在程式執行期間，透過 Java reflection 處理標註的資訊。在 Java 中，有三個預先定義好的 annotation： @Override、@Deprecated、@SuppressWarnings。 1. @Override：表示會重新定義父類別中的某個方法。 2. @Deprecated：表示被註記的方法是過時的，不建議使用，使用後會跳出警告訊息。 3. @SuppressWarnings：會讓編譯器忽略警告訊息。開發者也可以自行定義 annotation，預設會將標註資訊儲存於.class 檔之中，可被編譯器或 bytecode 分析工具讀取，但是在執行時就無法讀取標註資訊。定義 annotation 時，增加@Retention，可以指定我們所定義的標註資訊會存在何處、是否可讀取；增加@Target，可以限制被標註的對象[10]。. 9. DOI:10.6814/NCCU201900018.

(20) annotation 中的變數成員宣告，只允許特定型別的變數：基本型別（primitive type）、String、Class、Enum、另一個 Annotation，或是上述型別的陣列。變數成員可依照個人需求，是否加入預設值，以下為一個添加預設值的自定義 annotation 範例，只允許標註方法(method)。. 圖 2-2 自定義 annotation 範例. 本研究之系統利用 annotation，定義了 AnnotationForm 與 AnnotationStyle，兩項標籤，標記本研究之系統所需的資訊。此部分將會在 3.2 系統實作中詳述。. 2.2 Web Server Web Server 可以指軟體、硬體或是軟硬體共同運作下的狀態。以軟體來說，是一個提供網頁的伺服器程式，能控制用戶端如何訪問託管的檔案。以硬體來說，就是一台存放網頁伺服器軟體與網站檔案的電腦。在共同運作的狀態中，電腦會 10. DOI:10.6814/NCCU201900018.

(21) 連上網路，透過 HTTP 協定，將網頁或資料回應給提出請求的用戶端。市面上常見的 HTTP web server 有 Apache 的 Apache HTTP server 、微軟的 Internet Information Server（IIS）、Google 的 Google Web Server。一般來說，用戶端要求的檔案會儲存在 web server 的本地檔案系統裡。Java 在伺服器端的程式為 Java servlet，而常用的 servlet 容器為 Apache Tomcat 與 Jetty web server。本研究提出的工具，使用的是 Eclipse 基金會的 Jetty web server。. 2.2.1 Servlet Servlet[5]全名為 Java servlet，是用 Java 編寫而成的伺服器端程式。大多數的情況下，是基於 HTTP 協定來實現用戶端的請求與回應，目前最新的版本為 servlet 4.0。servlet 的工作模式如下： 1. 用戶端發送請求到伺服器。 2. 伺服器會啟動並調用相對應的 servlet。 3. Servlet 根據請求，產生回應內容並傳給伺服器。 4. 伺服器將回應內容傳給用戶端。 servlet 通常由伺服器或 servlet 容器來控制其生命週期。除非有特殊設定， servlet 只會在第一次請求的時候被載入，所以在首次調用一個 servlet 時，需要比較久的時間。一旦被載入後，就不會從容器中刪除，直到伺服器關閉或重新啟動。以下介紹 servlet 的生命週期[6]： 1. init()：進行 servlet 初始化，可以設定一些共用變數。 2. service()：處理請求。一般來說，我們不會直接覆寫它，而是覆寫處理請求的 doPost(), doGet(), doPut(), doDelete()等方法。 3. destroy()：只會被呼叫一次，用來結束一個 servlet。 4. 在 JVM 關閉時交給垃圾回收器。. 11. DOI:10.6814/NCCU201900018.

(22) 2.2.2 Jetty. 圖 2-3 Jetty 架構圖1. Jetty[3]是一個由 Eclipse 基金會開發與維護的開源專案，可用於商業開發或其他非商業性的應用。Jetty 可以被嵌入於各項裝置、框架、應用程式之中，相容性非常高。在嵌入式的 Java 應用程式中，提供標準的 web 服務，例如：Jetty 已經成為 Eclipse IDE 的一部分，使用者能在 Eclipse IDE 裡直接使用 Jetty 的功能。 Jetty 以 Java 實作，是一個網頁伺服器也是 servlet 容器，核心的元件由 Connector 與 Handler 組成。Connector 在 Jetty 裡負責接收 TCP 網路連結，解析請求、產生回應。Handler[4]是 Jetty 裡特殊的資料結構，負責處理請求，主要的函式為 handle。handle 有四個參數：target, baseRequest, request, response。其中， request 和 response 的型別是基於 servlet API 定義而成，要使用 servlet API 的功能，必須設定好相對應的 Handler。設置 Jetty 伺服器的過程，就是把一個一個的 Handler 加入 Jetty 的 Server 類別裡，讓 Jetty 來管理所有的 Handler。. 1. Jetty Architechture, from. http://www.eclipse.org/jetty/documentation/current/architecture.html#_view_from_20_000_feet 12. DOI:10.6814/NCCU201900018.

(23) Handler 在 Jetty 裡扮演很重要的角色，只要關係到請求與回應的事件，都需要調用 Handler。使用者可以依照自己需求的不同，對 Handler 做不同的配置，例如：依序呼叫各個 Hadler、巢狀呼叫各個 Handler。以下依照功能的不同，介紹不同的 Handler： 1. Coordinating handlers：將 request 傳送到其他 Handler 的 Handler，例如 HandlerCollection、ContextHandlerCollection。 2. Filtering handlers：在 request 裡設置一些參數後，再傳送到其他 Handler 的 Handler，例如 HandlerWrapper, ContextHandler, SessionHandler。 3. Generating handlers：直接產生回應的 Handler，例如 ResourceHandler、 ServletHandler。. 圖 2-4 Handler 配置示意圖2. 2. Jetty Handler Architecture, from. http://www.eclipse.org/jetty/documentation/current/architecture.html#_handlers 13. DOI:10.6814/NCCU201900018.

(24) 2.2.3 Jetty 與 Tomcat 之比較同樣身為 servlet 容器與 HTTP web server，Jetty 與 Tomcat 各有其優缺點。架構上，因為 Jetty 是由 Connector 與 Handler 組成，與 Tomcat 相比相對簡單，也比 Tomcat 更容易擴展。Jetty 也能因應設計者的需求，加載不同的功能。相反的，Tomcat 則是因為支援了許多功能，對 Java web service 的支援較為完善，而降低了擴展時的彈性。基於以上的介紹與比較，本研究之系統以 Jetty 作為後端的伺服器。表 2-1 Jetty 與 Tomcat 比較. Jetty. Tomcat. 架構比較. Handler 實作，架構簡單. 容器設計，架構複雜. 擴展性比較. 容易. 不易擴展. 應用廣泛度. 較低. 較高. 更新速度. 快. 慢. 2.3 Java 物件與 JSON 的轉換 2.3.1 JSON JSON[21] [22] 是一個輕量級的資料交換語言，全名為 JavaScript Object Notation，適合用來儲存由屬性名稱 (name / attribute name) 與屬性值 (value / attribute value) 組成的資料。JSON 用了兩種資料結構，來表示資料的屬性名稱與屬性值，型式如下：. 14. DOI:10.6814/NCCU201900018.

(25) 1. 物件（Object）：{string : value, …}。一個屬性名稱與屬性值，中間由冒號隔開 ( : )，組成一個數對 (pair)，再由一連串未排序的數對組成，開頭為左大括號{，結尾為右大括號}。. 圖 2-5 JSON Object3. 2. 陣列（Array）：[value, value, …]。一群值的集合，以左中括號 [ 開始，右中括號 ] 結束。. 圖 2-6 JSON Array4. 值 (Value)的型態有以下幾種： 1. 字串 (string) 2. 數字：一連串 0-9 的數字組合，可以是正數、負數或小數。 3. 物件 (object) 4. 陣列 (array) 5. true 6. false。 7. null. 3. JSON Object, from https://json.org/. 4. JSON Array, from https://json.org/ 15. DOI:10.6814/NCCU201900018.

(26) 圖 2-7 JSON’s value5. JSON 和 XML 的設計理念不同。XML 是標記式語言 (markup language)錯誤! 找不到參照來源。，將資料由前後相同的標籤標記，結構層層堆積，使得 XML 在程式的判讀上比較繁瑣。JSON 的結構相對簡單、易於讓人閱讀，適合程式語言生成與解析，而且在網頁的應用上，能直接讓 Javascript 使用，利於傳送資料。現今網頁上傳送與儲存資料的格式，皆使用 JSON 為儲存格式。. 2.3.2 Jackson Jackson[23][24]是一個能用來將 Java 物件序列化為 JSON 格式，JSON 格式反序列化為 Java 物件的開源工具，對其他的 jar package 依賴很少，能快速的將 Java 與 JSON 作轉換。Jackson 提供三種方法來處理 JSON：Data Binding、Tree Model、Streaming API。 1. Data Binding：用於轉換 POJO 與 JSON，可以讓 JSON 直接對應到特定的 Java class。以下為 JSON 與 Java 的型態對應。. 5. JSON Value, from https://json.org/ 16. DOI:10.6814/NCCU201900018.

(27) 表 2-2 JSON 與 Java Data Binding 的型態對應. JSON 中的型態. Java 中的型態. object. LinkedHashMap<String, Object>. array. ArrayList<Object>. string. String. complete number. Integer / Long / BigInteger. Fraction. Double / BigDecimal. true / false. Boolean. Null. null. 2. Tree Model：將 JSON 以樹狀結構處理，是最靈活的方式。 3. Stream API：將 JSON 以 Stream 的方式讀取與寫入。其中，JsonParser 讀取 JSON 字串、JsonGenerator 寫入 JSON 字串。. 2.3.3 Gson Gson[25]又稱作 Google Gson，由 Google 開發並發布的 Java 物件與 JSON 的序列與反序列化工具。一開始是 Google 公司因應內部需求而開發使用，公開後已被許多公司與使用者應用。Gson 會產生一個 Gson instance，透過裡面的 toJson()、 fromJson()，將 Java 物件和 JSON 格式做序列化或反序列化。Gson 也提供加入 annotation 的方式，讓使用者能客製化 Gson 轉換出來的 JSON 字串。. 17. DOI:10.6814/NCCU201900018.

(28) 假設我們有一個 PersonDemo Class，產生 PersonDemo 物件後，利用 Gson 實現序列與反序列化：. 圖 2-8 PersonDemo Class. 1. Java 物件序列化：. 圖 2-9 Gson Serialization. 2. JSON 格式反序列化：. 圖 2-10 Gson Deserialization. 2.3.4 JSON-B JSON-B[26][27]全名為 JSON Binding，一樣是提供 JSON 與 Java 物件互相轉換的工具之一，是 Java EE 8 中解析 JSON 的標準 API，結合了較為底層的 JSON Processing（JSON-P）API，能夠在 Java 企業系統中使用。利用 JsonbBuilder Class 和 toJson()、fromJson()，實現 Java 物件和 JSON 格式做序列化或反序列化。 18. DOI:10.6814/NCCU201900018.

(29) 假設我們有一個 PersonDemo Class，如圖 2-8，產生物件後，利用 JSON-B 進行序列化與反序列化。 1. Java 物件序列化：. 圖 2-11 JSON-B Serialization. 2. JSON 格式反序列化：. 圖 2-12 JSON-B Desrialization. 相較於 Jackson 與 Gson，因為 JSON-B 是 Java 的標準 API，對於 Java 原生的類別，例如：java.util.Date、java.util.Calendar，在轉換為 JSON 格式時，有較好的易讀性。例如：使用 java.util.Calendar，設定一個日期，並轉成 JSON 字串。在 Jackson 中，會被轉換為從 1970/1/1 算起的毫秒數；在 Gson 中，會產生包含日期文字的 JSON 字串；JSON-B 產生包含時間零點與時區日期的 JSON 字串。. 19. DOI:10.6814/NCCU201900018.

(30) 表 2-3 三種 API 之差異. 物件 new Calendar.Builder().setDate(2019, 3, 20).build() API Jackson Gson. 1555689600000 { "year":2019, "month":3, "dayOfMonth":20, "hourOfDay":0, "minute":0, "second":0 }. JSON-B. "2019-04-20T00:00:00+08:00[Asia/Taipei]". 2.3.5 JSOG JSOG[28]全名為 JavaScript Object Graph，是一個基於 Jackson 的 JSON 讀取寫入工具。因為 JSON 只能表示有向無環圖的物件，對於有循環引用的物件（circular structure），會無法將其序列與反序列化。JSOG 為了解決這個問題，將 JSON 裡的成員看成一個一個的節點，把存在 circular structure 的節點標上@id，引用到該節點的其他節點，會標記@ref，@ref 的值即為給予的@id 值，紀錄其循環引用的狀態。在反序列化時，能將@id 與@ref 對應，將 JSOG 反序列化回原本的物件。目前 JSOG 有支援的程式語言有：Java、Python、Ruby、Typescript。本研究之系統，採用 JSOG 當作 Java 物件轉換 JSON 格式的工具，並修改了 JSOG package。在 JSOG 中，加入了讀寫@type 的功能，以表示轉換完的 JSOG. 20. DOI:10.6814/NCCU201900018.

(31) 其原先所屬的 Java Class；將@id 的值從原本由 1 開始，改為物件資料生成時的秒數，提供本研究之系統利用，此部分將會在 3.2 系統實作中詳述。. 2.4 網頁呈現與瀏覽器暫存 2.4.1 Angular Angular[31]是由 Google 推出的前端開源框架，原本命名為 AngularJS，用來協助單一頁面應用程式運行。Angular 透過 MVC[32]模式，增強基於瀏覽器的應用，而且在 Angular 上需要的套件與模組，皆可使用 Angular-CLI 安裝。使用者不需要自己架構模組，開發和測試變得更加容易。第一代原名為 Angular JS，第二代之後改名為 Angular，最大的改變就是全面改用 TypeScript[33][34]撰寫，第 N 版就以 Angular N 來命名。從官方的架構圖來看，主要由 Template、Component、 Injector 構成。. 圖 2-13 Angular 架構圖6. 6. Angular architecture, from https://angular.io/guide/architecture#whats-next 21. DOI:10.6814/NCCU201900018.

(32) 以下介紹 Angular 中的組成單元: 1. Template 是一個類似 HTML 的檔案，負責呈現的工作，我們可以在裡面做屬性綁定（property binding）或是事件綁定（event binding），Template 上面有事件發生時，如果需要變動屬性或是要處理事件，都會到其對應的 component 尋找對應的屬性變動設定與方法。 2. Component 是提供屬性或是方法的地方。在創建 Angular 服務時，基本的 Template 屬性設定，或是事件處理需要用到哪些方法、資料綁定，都寫在 Component 裡。 3. Injector 存放了 Component 需要哪些 Service，如果沒有對應的 Service， Injector 會創建一個 Service 並且放入集合中。 4. Service 則是放方法內容的地方。我們可能會有各式各樣的服務，每個服務都會寫成一個目的明確且狹義的方法，包含從遠端儲存或取得資料，都歸類在 Service 裡。 5. Directive 可以看成是沒有 Template 的 Component。本質上來說，Directive 和 Component 是一樣的，但 Directive 可以用來定義 HTML 元素，簡化我們對 DOM 的操作。 Angular 之中，Component 有其生命週期，從一開始透過 Constructor 建置後，能在不同的時間點，調用不同的函式。. 22. DOI:10.6814/NCCU201900018.

(33) 表 2-4 Angular 的 Component 生命週期7. ngOnChanges(). Component 發生事件時，此方法會先接受到當前狀態與前一個狀態的屬性值。. ngOnInit(). Angular 第一次顯示物件的屬性，與輸入物件的屬性值時呼叫，只呼叫一次。. ngDoCheck() ngAfterContentInit(). 有任何變更時，便呼叫此方法。在第一個 ngDoCheck()執行後，呼叫此方法，只呼叫一次。也就是外部內容要放到 Template 之前，或是放到 Directive 的 view 之前呼叫。. ngAfterContentChecked() 每次完成 Template/Directive 的內容變更後執行。 ngAfterViewInit(). Angular 初始化 Component 和子元件的 view 時呼叫，只在第一次 ngAfterContentChecked()之後呼叫一次。. ngAfterViewChecked() ngOnDestroy(). Angular 檢查 Component 與子元件的 view 後呼叫。在 Angular 銷毀元件前，會執行這個方法。. 本研究之系統採用 Angular 框架建構前端網頁，將網頁上的組成要件做成各個 Angular Component。利用 Angular Component 中提供的資料綁定與事件綁定，提升網頁元件的重複利用性，避免撰寫多餘的 HTML 檔案。. 7. Angular lifecycle sequence, from https://angular.io/guide/lifecycle-hooks#lifecycle-sequence 23. DOI:10.6814/NCCU201900018.

(34) 2.4.2 Angular tree component Angular tree component[29][30]是一個開源的 Angular component 專案，讓使用者能一目了然檢視資料的 Angular 樹狀結構元件。在 Angular tree component 呈現的樹狀結構中，有許多滑鼠與鍵盤的事件監聽器可以使用。Angular tree component 有自己的資料表示規則，並非直接將 JSON 格式字串放入即可。本研究之系統，將 Java 物件轉換為 JSOG 後，實現了將 JSOG 轉換為 Angular tree component 能接受的資料表示方法，應用在本系統之中，並利用 Angular tree component 將 JSON 之樹狀結構呈現出來，此部分將會在 3.2 系統實作中詳述。以下是 Angular tree component 中，顯示資料時所需之格式。表 2-5 Angular tree component 的資料格式8. 名稱. 說明. id. 表示節點的唯一 ID。若沒有設定，會自動加入一串唯一的 ID 字串。. name. 節點顯示的名稱。. children. 節點的子節點陣列。每個子節點和父節點有相同的結構。. hasChildren. 用於異步資料載入。表示此節點可能有子節點，即使 children 為空。. isExpanded. 確定節點預設的顯示方式是否以擴展方式啟動。此屬性不可做資料綁定。. 8. angular tree component format, from https://angular2-tree.readme.io/docs/options-1 24. DOI:10.6814/NCCU201900018.

(35) 2.4.3 HTML5 Web Storage HTML5 web storage[35]能夠讓資料儲存於網頁客戶端，資料形式是以 keyvalue pair 儲存。比起 Cookie 只有 4KB 的儲存空間，web storage 的 5MB 空間大了很多，儲存的資料也不會隨著網頁對伺服器端傳送請求，而讓資料在伺服器端與客戶端來回傳送，表示 web storage 不會佔用網路頻寬。web storage 分成 2 種， local storage 與 session storage，以下介紹兩者的相同與差異。相同之處在於對兩者資料的處理動作，包含設置資料、提取資料、刪除資料清除全部資料，都是相同的函式。設置資料 setItem(key, value) 、提取資料 getItem(key) 、刪除資料 removeItem(key) 、清除全部資料 clear()。 local storage 與 session storage 的差異，在於各自的壽命長短與有效範圍。 local storage 除非執行清除，否則資料會一直存在，就算分頁關閉、瀏覽器關閉也會存在。但 session storage 只要分頁關閉，或是重新整理頁面，就會將資料刪除。有效範圍則是在於，local storage 的資料在同一網站的前提下，不同的分頁可存取，也就是說，相同網站的網頁能夠共享 local storage。但是 session storage 只要是不同分頁，就無法共享彼此在 session storage 的資料。. 圖 2-14 web storage 示意圖. 本研究之系統，選用 web storage 裡面的 session storage 當作資料的暫存空間，讓使用者能在編輯資料的途中，讓暫存的物件資料儲存在客戶端的網頁上，頁面結束或是更新頁面後，資料將不再儲存於客戶端的瀏覽器中。. 25. DOI:10.6814/NCCU201900018.

(36) 第3章系統架構與實作此章節將介紹我們的系統架構與實作。首先，於 3.1 節之系統架構中，說明本系統之架構設計，以及簡單介紹，如何在網頁上產生與編輯 Java 物件資料，並儲存為 JSOG。於 3.2 節之系統實作中，闡述系統實作的細節。. 3.1 系統架構整個系統由 Jetty embedded web server 作為後端伺服器，提供系統的網路服務，利用 Java reflection 的特性，解析 Java class 的結構與其中的 annotations，以及 client 端網頁所需之伺服器支援。client 端頁面以 Angular 6 作為網頁框架，搭配 Bootstrap 4，撰寫網頁介面。以 Java 語言來設計領域資料類別，定義領域資料中的各個屬性與方法。利用 HTML5 的 session storage 當作暫存空間，暫存使用者已編輯完成，但還未輸出的資料。session storage 中的暫存資料，會透過 Angular tree component 呈現。最後要輸出時，將編輯好的物件資料，以本系統定義之 JSOG 輸出儲存。使用本系統時，須先設定好應用領域物件的 Java class，作為本系統生成與編輯物件資料的依據。在 Java class 中，依照我們定義的 annotations，填入適當的 annotation 屬性值。本系統架構可以分為 client 端與 server 端兩個部分，以下詳細介紹：. 26. DOI:10.6814/NCCU201900018.

(37) 圖 3-1 系統架構圖. client 部分，由 Angular reactive form 與 Angular tree component 提供生成、檢視與編輯的服務，兩元件之間能傳遞 JSOG，所以，使用者可以選擇在 form 或是 tree 上做編輯。下方的 session storage，為本系統所使用的瀏覽器暫存空間。兩個 Angular 元件的相異處在於：Angular tree component 主要是用來檢視物件資料； Angular reactive form 則是用於生成新的物件資料。相同處在於：無論是 Angular reactive form 或 Angular tree component，皆可編輯物件資料。使用者在生成物件時，會在畫面上選擇 Java class 的名稱，本系統會將選擇的 Java class 名稱傳送到 server，請 server 傳回 Java class 的資訊，包含：變數成員、變數成員的編輯方式、變數成員的預設值。之後，系統藉由 Angular reactive form，產生該 Java class 的 27. DOI:10.6814/NCCU201900018.

(38) 編輯表單，供使用者填寫。使用者填寫完畢後，暫存於 session storage 中，並且由 Angular tree component 顯示暫存的 JSOG。若是要編輯已存在之物件，使用者要先開啟已存在之 JSOG，將之傳送到本系統的 server，獲取 JSOG 之 Java 類別資訊。這些資訊會送到 client 儲存起來，並透過 Angular tree component，將處理過後的 JSOG 顯示出來。使用者欲輸出資料時，使用我們的輸出功能，將 JSOG 傳送到 server，處理變數成員的名稱，並提供給使用者儲存。 server 部分，為本系統之伺服器：Jetty embedded web server，以及操作者所設定的各個 Java class。當 client 傳送 class 名稱到 server 時，server 會開始解析類別結構與變數成員上的 annotations 。然後將這些 Java 類別的資訊 (classinformation)，回傳給 client 網頁，進行後續處理。輸出資料時，將資料解析為符合的 JSOG 字串，輸出至指定的路徑。綜合以上所提及的，本研究針對編輯物件資料時，所需要的資料定義、資料暫存、資料編輯、資料檢視、資料輸出，均有實作。資料定義方面，我們利用 Java 跨平台的特性，讓開發者以 Java 定義領域物件的類別，並在類別中加入本研究所定義的 2 個 annotation： AnnotationForm、 AnnotationStyle，其中包含了各屬性值的輸入方式、呈現名稱與預設值，以利使用本研究之系統。資料暫存方面，本研究之系統是以瀏覽器作為物件編輯之平台，因此，利用 HTML5 訂定的 web storage 空間，作為物件編輯時的暫存區域。由於此暫存空間存在於瀏覽器中，不需要與伺服器做資料傳送，能降低伺服器的負載。資料編輯方面，包含資料建立（Create）、資料讀取（Read）、資料更新（Update）、資料刪除（Delete）。 1. 資料建立（Create）：使用者在 Angular reactive form 上結束編輯動作後，在 session storage 中建立並暫存物件資料。本系統也允許在 Angular tree component 上複製一個暫存的物件資料，並暫存於 session storage。. 28. DOI:10.6814/NCCU201900018.

(39) 2. 資料讀取（Read）：本研究之系統提供物件資料的 JSOG 檔案讀取，並且透過 Angular tree component 顯示暫存於 session storage 中的各項物件資料。 3. 資料更新（Update）：使用者能在本研究之系統提供的 Angular tree component 上，針對屬性值做編輯，或是透過 Angular reactive form 重新編輯整個物件。使用者編輯完成後，能更新 session storage 中的暫存物件資料。 4. 資料刪除（Delete）：使用者能透過 Angular tree component、Angular reactive form 上的操作，刪除物件資料的屬性值。資料檢視方面，本系統實作了暫存空間之資料檢視，如同資料讀取中所提及，以 Angular tree component 的樹狀結構方式，呈現暫存的物件資料內容。資料輸出方面，本系統將暫存之物件資料，轉換為 JSOG，傳送到 Jetty embedded web server，供伺服器做資料寫出的動作，並跳出儲存的對話框，讓使用者選擇檔案名稱與檔案儲存的位置，此 JSOG 字串將來能反序列化回 Java 物件，於 Java 程式中使用。. 3.2 系統實作以下會介紹本研究之實作與系統內的功能，包括：修改 JSOG package、 AnnotationForm 與 AnnotationStyle、Jetty embedded web server、Angular 6 前端網頁之各項元件功能。. 29. DOI:10.6814/NCCU201900018.

(40) 3.2.1 修改 JSOG package Jackson 提供 API，讓使用者對其序列與反序列化的方法做客製化的修改。 JSOG 是基於 Jackson 製作出來的，本研究進而將 JSOG package 做了些微的修改： 1. 增加讀寫@type：我們進行 Java 物件序列化時，在不影響其功能的前提下，於產生出來的 JSOG 中加入@type，紀錄其 Java 物件所屬的 Java class。進行 JSOG 反序列化時，不會將@type 看成 Java 物件中的成員，進行反序列化。 2. @id 的值改為物件生成之時間秒數：原始的 JSOG，將@id 的值由 1 開始，這會讓本系統在編輯物件時，因為物件有互相參照，而產生錯誤。因此，取生成物件的秒數，作為物件資料的@id 值。. 為了增加@type 的讀寫，需要把 JSOG 中定義的 JSOGRef、JSOGRefSerializer、 JSOGRefDeserializer、JSOGGenerator 做調整，控制 Java 物件與 JSOG 之間的序列與反序列化。以下將依序介紹各檔案的功能與在各檔案中增添的內容。. JSOGRef 是一個 Java class，紀錄該物件的@id 值，以及物件是否被引用過。本研究在此 class（類別）中加入 type 變數，紀錄物件的類別名稱，並設定為建構 JSOGRef 物件的變數之一。將來輸出的@type 會紀錄此值，輸出在 JSOG 中。. 圖 3-2 JSOGRef 增加之變數 30. DOI:10.6814/NCCU201900018.

(41) JSOGRefSerializer 繼承了 Jackson 的 JsonSerializer，能依照 JSOGRef 的 id 值，輸出正確的 JSOG。在進行 Java 物件序列化時，會依照 JSOGRef 物件，得知物件是否有引用過，而填入@id 或是@ref。本研究在此增加了@type 的輸出，讓 JSOG 多了@type，表示該 JSOG 所屬的 Java class 名稱。. 圖 3-3 JSOGRefSerializer 增加之@type 輸出. JSOGRefDeserializer 繼承了 Jackson 的 JsonDeserializer，得知 JSOG 字串中的@id、@ref，將他們轉換為 JSOGRef 物件，提供 JSOG 反序列化使用。本研究在此增加了@type 的輸入，將@type 的值，填入 JSOGRef 物件的 type 變數。並且，在 JSOG 反序列化時，@type 不會影響 JSOG 的反序列化。. 圖 3-4 JSOGRefDeserializer 增加之變數傳入. 31. DOI:10.6814/NCCU201900018.

(42) JSOGGenerator 繼承了 Jackson 的 ObjectIdGenerator，是 Java 物件的@id 產生器。遇到新物件時，@id 的值會在此進行累加，並且產生一個 JSOGRef，將 @id 的值傳入 JSOGRef 物件，以提供 Java 物件序列化使用。本研究在此增加了獲取物件類別名稱的函式，並將其類別名稱當作變數，傳入 JSOGRef 物件的建構函式，讓 Java 物件序列化為 JSOG 時，能輸出物件的類別名稱。而且，把 @id 的數值改為物件資料生成時的秒數。. 圖 3-5 JSOGGenrator 改寫之建構函式. 3.2.2 AnnotationForm 與 AnnotationStyle 針對表示領域資料的 Java class，我們定義了兩個 Java annotation： AnnotationForm 標籤、AnnotationStyle 標籤，方便系統取得 Java class 中各屬性在編輯狀態時的表現方式，以及開發者所設定的預設值。 AnnotationForm 包含了兩個屬性，如圖所示：style 是變數成員在編輯時的呈現方式，輸入值是另一個標籤 AnnotationStyle，name 是該變數成員在編輯時所顯示的名稱 (見表 3-1)。有了這兩個屬性，我們便能在後續的網頁呈現與產生物件中，依照標籤的屬性值，給予不同的呈現效果與資料輸出。. 32. DOI:10.6814/NCCU201900018.

(43) 圖 3-6 AnnotationForm annotation. 以下表格列出 AnnotationForm 標籤值內容。表 3-1 AnnotationForm annotation. 項目. 屬性. 說明. 範例. annotation Style. 表示該 class 的. @AnnotationStyle(…). 屬性在編輯狀態 AnnotationForm. 所呈現的方式。 Name. 表示該 class 的. name = “father”. 屬性在編輯狀態所呈現的名稱。. 另一個標籤為 AnnotationStyle，見表 3-2。AnnotationStyle 包含了 value、 textarea 與 input，三個屬性值。value 是該變數成員的預設值。textarea 則是讓開發者能夠選擇以 HTML 的 textarea 標籤，作為變數成員的編輯方式，預設值為 false 字串。input 表示這個變數成員將會用 HTML input 標籤中的其中一個 type 做呈現，型態為 InputTypeControl。如果使用了 textarea，input 的值就不需要填寫，系統會將 input 屬性填入預設值 none。. 33. DOI:10.6814/NCCU201900018.

(44) 表 3-2 AnnotationStyle annotation. 項目. 屬性. 說明. 範例. annotation input. 表示 class 中該變. input = InputTypeControl.text. 數成員將使用何種 input 標籤的 type 當作編輯方式。 AnnotationStyle textarea. 表示 class 中該變. textarea = “true”. 數成員將用 textarea 當作編輯方式。 value. 表示 class 中該變. value = “1". 數成員的預設值。. 在 input 標籤中，並非所有的 type 皆適合呈現，並且收集使用者的輸入資料，所以我們選了能夠收集使用者輸入的 type ，組成一個 Enumeration ： InputTypeControl，供開發者選擇，見表 3-3。InputTypeControl 為一個 Enumeration，定義了本系統能接受之 input 標籤的 type。本研究增加了 none，作為 input 屬性的預設值，避免 input 與 textarea 屬性相互影響，表示開發者必須選擇適當的 type 當作編輯方式，否則會填入系統的預設值 none。. 34. DOI:10.6814/NCCU201900018.

(45) 表 3-3 InputTypeControl Enum. Enum 名稱. Enum 成員 color date email month. InputTypeControl. number password text time week none. 35. DOI:10.6814/NCCU201900018.

(46) 圖 3-7 AnnotationStyle 程式碼. 以下是在一個 Java class 中，利用此兩個 Java annotation 的範例，在類別的變數成員上，添加我們定義的 2 個 annotation。. 圖 3-8 在 Java class 中使用自定義之 annotation. 3.2.3 Jetty Embedded Web Server 在 Jetty web server 中，不另外架設一個常駐遠端的網頁伺服器，而是運用 Jetty 提供的一個特殊服務——嵌入式伺服器 (embedded server)，讓網頁伺服器隨著我們的服務開啟與結束。如此一來，從讀取 Java class、解析結構、客製化網頁表單與輸出物件資料，皆不需理會伺服器是否正在等待請求，因為伺服器是隨著我們的服務而開關的。解析物件結構的部分，我們將 servlet 寫在 Jetty server 中，透過 Java reflection 機制，抓取 Java class 裡的 constructors、fields、annotations。使用 getDeclaredFields() 抓取所有的變數成員，再利用 getType()獲取變數成員的型 36. DOI:10.6814/NCCU201900018.

(47) 別、getName()獲取變數成員的名稱。由於我們的 annotation 是標註在 field 之上，由 field.getAnnotation() 來獲取在 Java class 中的自定義 Java annotation。. 圖 3-9 解析類別結構之示意圖. 輸出物件資料方面，需要轉換物件資料的 key 名稱，以及維持物件互相參照的特性。本研究於此，撰寫了遞迴的解析器，以及利用 Java class 中的 setter 維持各物件之互相參照。首先，編輯系統在 session storage 中暫存的 JSOG 並非最後的輸出結果。原因是，session storage 只是暫存的區域，使用者如果還需要編輯物件資料，在 Angular reactive form 與 Angular tree component 的顯示名稱，就必須是 AnnotationForm 標籤裡定義的 name 之屬性值。唯有在使用者決定要輸出物件資料時，session storage 中的 JSOG 會傳遞給 Jetty server。透過本研究撰寫之解析 37. DOI:10.6814/NCCU201900018.

(48) 器，遞迴地將 JSOG 裡的 key 名稱，轉換為 Java class 中的變數成員名稱，以利最後正確的 JSOG 輸出或反序列化為 Java 物件。再來，針對 JSOG 反序列化為 Java 物件，本研究考慮到 Java 物件之間相互參照的特性，於「多個物件資料反序列化為多個 Java Obect」這個功能（見 4.2.2 使用者操作展示），將多個物件儲存於 Map 中，並記錄各物件的參照對象。撰寫前處理程式，利用 Java reflection 的特性，呼叫 Java class 中的 setter，維持物件互相參照的特性。此前處理程式存放於 Jetty embedded web server 中。如需讀取為 Java object，使用者只要撰寫 Java 程式，直接讀取存放於 Map 的物件即可。. 3.2.4 Angular 6 前端網頁 Angular6 前端網頁的部分，本系統提供兩個 Angular 元件，讓使用者檢視、生成與編輯物件資料： Angular reactive form 與 Angular tree component。本系統也實現了兩組遞迴解析器：一個是將表單資料轉換為 JSOG 的解析器；一個是將 JSOG 資料能顯示於 Angular tree component 的解析器。使用者編輯時，也不侷限於單一元件，兩元件能共享資料，也實作了清除表單、清除 session storage、儲存所有物件資料的功能。暫存之 JSOG：本系統在 session storage 暫存之 JSOG，由於使用者可能還需要編輯，所以在 JSOG 中，每一對 key-value 的值，key 是變數成員的顯示名稱， value 是變數成員的暫存值。等到使用者決定要輸出物件資料時，才會將 JSOG 傳送到伺服器，經由伺服器上的解析器，將所有的 key 值轉換為變數成員的名稱，以利最後正確的 JSOG 輸出或反序列化為 Java 物件。 Angular reactive form：提供使用者生成與編輯物件資料的功能。前述所抓取到的 annotation 屬性，會依照配對好的 HTML 標籤，基於 Angular 6 框架，製作 Form 的介面，並在每個欄位上顯示各資料的型態與顯示名稱。使用者在輸入資料時，能一目了然地看見各資料的欄位，並且知道該欄位要填入何種型態的資料， 38. DOI:10.6814/NCCU201900018.

(49) 避免出錯。此元件也支援從 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 上。. 39. DOI:10.6814/NCCU201900018.

(50) 圖 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. 此節點的子節點陣列。. 40. DOI:10.6814/NCCU201900018.

(51) 2. 屬性節點：代表物件中的變數成員。屬性節點也許是終端節點，或者是分支節點。若是分支節點，表示該屬性節點代表一個物件。系統會在此節點下方產生一個物件節點，用來顯示該物件之中的屬性節點，使用者可以針對該物件資料做檢視與編輯。表 3-5 屬性節點之資料結構. 名稱. 說明. name. 屬性節點在 tree 中的顯示名稱。. pureName. 屬性節點所代表的變數成員在 form 上的顯示名稱。. val. 變數成員的值。. editVal. 與 val 相同，提供編輯時修改。. style. 變數成員在 input 標籤中的 type 或是 textarea 標籤。. type. 變數成員在 Java 中的型態。. canEdit. boolean 值，表示是否能夠編輯。. 由於 JSOG 是樹狀結構，要產生物件節點與屬性節點的結構時，本研究撰寫了遞迴解析器，將 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 上做編輯。以下將對於此元件自定義的右鍵功能，做進一步的描述。. 41. DOI:10.6814/NCCU201900018.

(52) 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 與元件之間，資料共用的架構。 42. DOI:10.6814/NCCU201900018.

(53) 圖 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. 43. DOI:10.6814/NCCU201900018.

(54) 第 4 章：操作流程與展示此章節主要說明本研究之系統的操作流程與操作展示。於 4.1 節說明操作流程，分為「開發者操作流程」、「操作者操作流程」與「使用者操作流程」。於 4.2 節展示，使用本研究指系統時，各步驟的網頁元件與伺服器溝通的細節。. 4.1 操作流程首先，開發者須先撰寫好 Java class，並在 Java class 中的變數成員上，加註本研究定義之 annotations。然後開發者將這些 annotated Java class 與本系統之工具編譯為一個 jar 檔，交付給操作者。. 撰寫Java classes. 內嵌 annotations. 編譯為jar檔. 圖 4-1 開發者之操作流程. 接下來，說明操作者的操作流程。開發者將 jar 檔交給操作者之後，操作者將應用領域的 Java class 路徑，設定為本系統的參數，作為後續提供給使用者生成或編輯時，能選擇之 Java class。. 啟動系統圖 4-2 操作者之操作流程. 44. DOI:10.6814/NCCU201900018.

(55) 接下來，說明使用者的操作流程。以上動作都完成後，使用者開啟瀏覽器，準備生成或編輯時，依照下列的操作流程，即可對一個或多個物件資料生成或編輯。. 圖 4-3 使用者之操作流程圖. 45. DOI:10.6814/NCCU201900018.

(56) 針對生成物件資料與編輯物件資料，使用者可以選擇以下兩種方式，分別達到此兩種需求： 1. Java class 產生新物件資料 2. 編輯已存在之物件資料. 4.1.1 Java class 產生新物件資料由於本系統已預先讓操作者設定可以使用的領域資料 Java class。因此，在系統啟動後，我們利用 Java servlet，解析各 Java class 的結構，與 Java class 中的 annotations，將這些資訊傳送到 client ，進行 client 的顯示之處理。使用者只要在網頁介面上，選擇需要的 Java class，系統會客製化的 Angular reactive form，提供使用者編輯新物件的資料。. 圖 4-4 產生新物件資料之流程圖 46. DOI:10.6814/NCCU201900018.

(57) 4.1.2 編輯已存在之物件資料在網頁介面上，選擇開啟檔案，開啟要編輯的 JSOG 檔案。該檔案中的物件資料，必須是屬於這些 Java class 的資料。條件符合後，Jetty embedded web server 中的 Java servlet，會依照 Java class 上的 annotations，提供前端網頁呈現所需之該 JSOG 資料，並將物件暫存於瀏覽器的 session storage 中。. 圖 4-5 編輯已存在之物件資料流程圖 47. DOI:10.6814/NCCU201900018.

(58) 4.2 操作展示 4.2.1 開發者操作展示讓使用者使用本研究之系統前，開發者需要先將 Java class 定義好，設定好 Java class 上的各個 annotation 屬性值，並設定需要的 Java class 為命令列參數，方可順利啟動系統，供使用者使用。以下為一個 CarTires 的 Java class，並且加入了本研究定義之 annotations。. 48. DOI:10.6814/NCCU201900018.

(59) 圖 4-6 CarTires 設定 annotations 範例. 定義好 Java class 之後，開發者透過 mvn 指令，將 Java class 與我們的工具編譯，然後打包為一個 jar 檔：mvn compile package. 49. DOI:10.6814/NCCU201900018.

(60) 4.2.2 操作者操作展示開發者打包好 jar 檔交給操作者後，操作者必須將 Java class 設定為參數，以利使用者在使用系統時，生成或編輯資料。如圖 4-6 所示，在 Eclipse IDE 中，設定 Java class 的路徑，作為參數。操作者也可以利用 mvn 或是 java 指令，執行 jar 檔，並且將 Java class 的路徑名稱設定為啟動系統的參數，提供給使用者使用。. 圖 4-7 設定多個 Java class 名稱為命令列參數. mvn 指令： mvn exec:java -Dexec.mainClass=jetty.demo.Main -Dexec.args="JavaClassPath1 JavaClassPath2 ……". java 指令： java -jar 名稱.jar JavaClassPath1 JavaClassPath2 …… 實際例子： java -jar embedded-jetty-develop-1-SNAPSHOT-jar-with-dependencies.jar jetty.demo.PersonDemo jetty.demo.Family jetty.demo.SimplePerson. 50. DOI:10.6814/NCCU201900018.

(61) 4.2.3 使用者操作展示使用本研究之系統時，網頁主要的頁面區塊會出現使用者設定好的各個 Java class，以及開啟檔案的欄位。以下將分段介紹兩種使用者可選擇之動作。. 圖 4-8 Java class 與開啟檔案之選擇區塊. Java class 產生新物件資料：選擇其中一個 Java class 後，前端頁面會將 Java class 的名稱送到後端伺服器，讓後端伺服器依據 Java class 的名稱，取得使用者在 Java class 上所定義的各項標籤的屬性值，產生客製化的 Angular reactive form。. 圖 4-9 Angular reactive form. 在 Angular reactive form 上，將資料輸入完之後，選擇儲存，能暫存在瀏覽器的 session storage 之中。暫存的物件資料會透過另一個元件：Angular tree component，顯示在下方，供使用者檢視及編輯。在這個元件中，@id 表示該物件產生時的時間毫秒數。@type 是該物件所屬之 Java class 名稱。@id 與@type 51. DOI:10.6814/NCCU201900018.