以主題整合使用者介面元件

在現今的網路應用程式(Web Application)當中大多提供多頁面和頁面導航的功能，讓其功能能夠更多元和複雜化。而在設計網路應用程式時，也必須考慮頁面之間的導航該如何設計使得使用者能夠有更好的體驗。然而，常見設計網路應用程式的工具提供的導航設計介面只能做到說明觸發某一個UI元件之後會導航到哪一個頁面，未能說明在切換頁面的同時附帶了哪些頁面參數資訊給目的頁面。這對於要自動化合成網路應用程式的目的來說，提供的資訊不足以達成該目的。再者，這些設計工具僅能做到產生示範用途的網路應用程式，其沒辦法和後端伺服器互動，示範用途的網路應用程式不能真的滿足使用者的需求。自動化合成符合使用者需求的網路應用程式讓開發者能夠減少大幅的時間和精力去設計和實作。並且也能夠阻止其開發出不符合需求的網路應用程式。若能夠確保自動化生成的網路應用程式具有高度的擴充性和模組化，開發者可以利用這樣的系統迅速地產生網路應用程式來當作原型，再著手擴充其功能，從而省去大量的開發時間，進而達到節省開發成本的目的。在本次研究中，於使用者自行設計的UI元件和頁面的基礎上，能夠再設計頁面之間的導航和提供頁面參數給目的頁面。藉由這些資訊，我們提出了能夠自動化生成符合設計的網路應用程式的系統，該系提供每一個UI元件數個專屬的模板，並利用UI元件的模板結合使用者設計的資料產生出對應的原始碼，藉此合成出網路應用程式。目前系統支援了30種不同的UI元件來符合使用者的各種需求。生成的網路應用程式能夠觸發服務元件的執行和接收其執行的結果，也能夠支援多頁面的導航和傳遞頁面參數的功能。除此之外，系統也能夠擴充客製化和複雜的UI元件以符合使用者的需求。

關鍵字

使用者介面元件；主題；導航；元件組合；模板

並列摘要

Web applications design tools recently provided the developers a feature to navigate among web pages to build a more comprehensive software system. However, it can only navigate to a target page after triggering a user interface component without providing essential page information for the target page. Furthermore, these tools lack the link to backend servers to offer actual functionalities to the UI components. To address the problems mentioned above, this research work proposed the following two essential features: 1. Web pages’ parameters are provided along with the navigation among web pages automatically, and 2. A composition engine with a total of 30 templates corresponding to their UI components is supported to compose a Web frontend system. The benefits of this research work are two-fold: developers can focus more on the requirements and reduce the time and effort in software development.