使用者操作展示 - 操作展示 - 以Java與瀏覽器為基礎的應用領域物件之編輯系統的快速生成

4.2 操作展示

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

僅提供檢視，無法編輯。一方面是為了維持物件之間，互相參照的連結性，一方面是因為物件所屬之Java class 中，並沒有這兩項。如果使用者需要重新編輯暫存物件，點選物件名稱後，按下“Edit Object“。頁面的主要區塊會重新顯示該物件之Angular reactive form，供使用者編輯。

圖4-10 Angular tree component 顯示各個暫存資料

編輯已存在之物件資料：選擇開啟檔案，從使用者的本機端將 JSON 檔案送至

本系統之伺服器解析。解析完成後，會將此JSON 檔案中的物件資料，暫存於

session storage 中。成功開啟檔案後，即可用 Angular tree component 檢視該物件資料的內容，並且使用Angular reactive form 編輯資料。以下為開啟檔案之示意圖，sp.json 內含兩個 SimplePerson 的物件資料。

圖4-11 開啟檔案示意圖

等到使用者編輯結束之後，使用者欲輸出物件時，能使用四種方式，輸出並使用物件資料：

1. 輸出單一物件資料：在 Angular tree component 上，點選要輸出的單一物件名稱，右鍵「Output object」，session storage 中的 JSOG 會被傳送到 Jetty server，將 JSOG 裡的 key 值，由原先的顯示名稱轉換為 Java class 中的變數成員名稱。然後跳出儲存檔案的視窗，儲存JSOG。

2. 輸出所有物件資料：選擇本系統提供之「Store all object」，儲存所有物件資料，session storage 中的所有 JSOG 會被傳送到 Jetty server，將所有 JSOG 裡的 key 值，由原先的顯示名稱轉換為 Java class 中的變數成員名稱。然後跳出儲存檔案的視窗，儲存檔案。所有的JSOG 會放進一個陣列之中，使用者只需要將之儲存成JSON 檔。

3. 將單一物件資料反序列化為 Java obect：本系統將暫存的 JSOG 轉換為正確的JSOG 後，將該 JSOG 反序列化為 Java object。如要使用此 Java object，必須自行撰寫 Java 程式，讀取此 Java object。

4. 將多個物件資料反序列化為多個 Java obect：如同方式三，但因為是多個物件資料，本系統會將反序列化好的多個Java object，放置在 Map 中，並紀錄其物件參照的對象。撰寫前處理程式，利用Java reflection 的特性，呼叫Java class 中的 setter。依照紀錄的對象，維持物件之間的相互參照。使用者需要再撰寫自己的Java 程式，於 Map 中讀取需要的 Java object。

第 5 章

class 生成客製化的 Angular reactive form，也透過 Angular tree component 提供檢視資料內容的功能，使用者在編輯物件資料時，甚至能選擇Form 或 Tree 來做

5.2 未來研究方向

的類別結構撰寫adapter，使得該 Java class 能被此系統接受。如此一來，將使得本系統之功能更加完善。

參考文獻

[1] 企業資源規劃(ERP). Retrieved May (2019), from https://zh.wikipedia.org/wiki/

企业资源计划

[2] GUI. Retrieved May (2019), from https://zh.wikipedia.org/wiki/图形用户界面 [3] Jetty. Retrieved May (2019), from

http://www.eclipse.org/jetty/documentation/current/index.html

[4] Jetty Handler. Retrieved May (2019), from

http://www.eclipse.org/jetty/documentation/current/architecture.html#_handlers

[5] Servlet. Retrieved May (2019), from https://zh.wikipedia.org/wiki/Java_Servlet [6] Servlet Life Cycle. Retrieved May (2019), from

https://www.tutorialspoint.com/servlets/servlets-life-cycle.htm

[7] Reflection. Retrieved May (2019), from

https://en.wikipedia.org/wiki/Reflection_(computer_programming)

[8] Jakob Jenkov. (2018). Java Reflection API. Retrieved May (2019), from

http://tutorials.jenkov.com/java-reflection/index.html

[9] Java annotation. Retrieved May (2019), from

https://en.wikipedia.org/wiki/Java_annotation

[10] Annotations That Apply to Other Annotations. Retrieved May (2019), from

https://docs.oracle.com/javase/tutorial/java/annotations/predefined.html

[11] Plain old Java object(POJO). Retrieved May (2019), from

https://en.wikipedia.org/wiki/Plain_old_Java_object

[12] Cay S. Horstmann and Gary Cornell. 2013. “Core Java® Volume II—Advanced

Features, Ninth Edition”, pages 421-466. In Chapter 8, JavaBeans Components.

[13] JavaBeans. Retrieved May (2019), from

https://docs.oracle.com/javase/tutorial/javabeans/index.html

[14] Cay S. Horstmann and Gary Cornell. 2013. “Core Java® Volume II—Advanced

Features, Ninth Edition”, pages 432-438. In Chapter 8, 8.5 Beans Property Types.

[15] JavaBeans Properties. Retrieved May (2019), from

https://docs.oracle.com/javase/tutorial/javabeans/writing/properties.html

[16] JavaBeans Methods. Retrieved May (2019), from

https://docs.oracle.com/javase/tutorial/javabeans/writing/methods.html

[17] Cay S. Horstmann and Gary Cornell. 2013. “Core Java® Volume II—Advanced

Features, Ninth Edition”, pages 431-432. In Chapter 8, 8.4 Naming Patterns for

Bean Properties and Events.

[18] JavaBeans Events. Retrieved May (2019), from

https://docs.oracle.com/javase/tutorial/javabeans/writing/events.html

[19] Web Server on wiki. Retrieved May (2019), from

https://en.wikipedia.org/wiki/Web_server

[20] Web Server. Rettrieved May (2019), from

https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_web_server

[21] JSON. Retrieved May (2019), from http://json.org

[22] JSON on wiki. Retrieved May (2019), from https://en.wikipedia.org/wiki/JSON [23] Jackson Tutorial. Retrieved May (2019), from

https://www.tutorialspoint.com/jackson/index.htm

[24] FasterXML. Jackson Github. Retrieved May (2019), from

https://github.com/FasterXML/jackson

[25] Google. Gson Github. Retrieved May (2019), from

https://github.com/google/gson

[26] JSON Binding HomePage. Retrieved May (2019), from http://json-b.net

[27] JSON Binding Github. Retrieved May (2019), from

https://github.com/eclipse-ee4j/jsonb-api

[28] JSOG Github. Retrieved May (2019), from https://github.com/jsog/jsog-jackson/

[29] angular tree component documents. Retrieved May (2019), from

https://angular2-tree.readme.io/docs

[30] 500Tech. angular tree component Github. Retrieved May (2019), from

https://github.com/500tech/angular-tree-component

[31] Angular framework. Retrieved March (2019), from

https://angular.io/guide/architecture

[32] MVC. Retrieved May (2019), from

https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller

[33] TypeScript. Retrieved May (2019), from

https://en.wikipedia.org/wiki/TypeScript

[34] TypeScript documentation. Retrieved May (2019), from

https://www.typescriptlang.org/docs/home.html

[35] HTML5 Web Storage on w3schools. Retrieved May (2019), from

https://www.w3schools.com/html/html5_webstorage.asp

[36] Observable Data Service. Retrieved May (2019), from

https://angular.io/guide/observables

在文檔中以Java與瀏覽器為基礎的應用領域物件之編輯系統的快速生成 - 政大學術集成 (頁 61-69)