Web Application 的設計、開發、維護與管理方面的議題持續的被討論著。一個合適的開發方法可以增加Web Application的彈性與降低維護成本，而隨著環境的改變，Web Application的內容也越來越多，且流通的資訊也越來越大，複雜度也隨之而增加。隨著應用的層面越來越廣，網站的成功與否，也日趨對企業的成敗扮演關鍵性角色，所以網站的外觀與可用性逐漸決定一切，而隨著程式碼越來越複雜，對於可靠度、效能、以及容錯能力的需求，也是與日俱增，Web Application的複雜度已經成長到需要一套開發模式，以解決前述的問題。
Eclipse建立一個標準的開發平台，讓程式設計師在撰寫各類Java程式時能有一個一致的整合開發環境(Integrated Development Environment, IDE)。透過它提供的外掛開發環境PDE(Plug-in Development Environment)與GEF(Graphical Editing Framework)所提供的API，讓程式設計師能快速的建置有編輯器功能的外掛程式。
JSF是Java最新的網站應用系統技術，JSF是一個以元件為基礎的事件驅動式模型，它很類似於獨立GUI應用程式的開發模型。在JSF模型下，程式開發者可以專注於發展第一流的開發工具，而不必另研擬特殊的API，或是重新開發別人已經發明的程式。
Tiles為撰寫Web頁面提供了一種範本機制，它能將網頁的佈局和內容分離。它允許先創建範本，然後在運行時動態地將內容插入到範本中。Tiles框架建立在JSP的include指令的基礎上，但它提供了比JSP的include指令更強大的功能。
本篇研究整合了JavaServerFaces與Struts Tiles 架構上的優點，在Eclipse平台上利用GEF架構提供一個圖形化的編輯介面。透過圖形化的編輯方式，讓流程能更容易的修改與維護，更透過整體流程圖形化的呈現，提供了網路應用程式好的管理環境。Tiles的架構更加強了本編輯器的功能，讓本編輯器能適用於多種不同需求的網路應用程式的開發上。透過圖形化的框架編輯，讓網頁的佈局與Java程式碼更為分離，讓程式設計師與網頁美工人員的工作能分離，為網路應用程式開發模式提供新的研究貢獻。

The design, development, and maintenance of Web applications are interesting and important. An appropriate development method can increase the flexibility and decrease the maintenance cost of Web applications. As times go by, the complexity of Web applications increases dramatically. Furthermore, the success of a business depends more and more on the design of its Web site. However, as program code becomes more and more complicated, the demand of its efficiency, reliability, and fault tolerant capabilities increase also. The complexity of Web Applications requires a better development model to solve the problem.

Eclipse is an integrated development environment for Java applications. Through its plug-in capability and the API of GEF (Graphical Editing Framework), Eclipse can provide graphic editing capability for programmers.

JavaServerFaces (JSF) is the most advanced technology for developing Web applications using Java. It is a component-based event-driven development model similar to the development model used for developing GUI applications. Struts Tiles provide Web designer a template-based mechanism for organizing content and layout of Web applications.

This research integrates benefits of JSF and Struts Tiles to develop a graphic editor using GEF framework on the Eclipse platform. Through its graphical editing capability, the page flow and layout of a Web application can be integrated and shared among multiple pages which simplifies the modification and maintenance of Web applications.

ㄧ、緒論 1
1.1 研究背景與動機 1
1.2 研究目的 4
1.3 研究範圍與限制 4
1.4 研究步驟 4
1.5 論文架構 5
二、文獻探討 7
2.1 MVC相關研究 7
2.1.1 設計樣式 7
2.1.2 傳統MVC設計樣式 7
2.1.3 MVC 於web-base application的應用 8
2.1.4 MVC設計樣式用於網路應用程式開發上的優缺點 9
2.2 Model1、Model2與Java Server Faces基本架構及關連性 10
2.2.1 Model1 10
2.2.2 Model2 11
2.2.3 JSF簡介 11
2.2.4 JSF的MVC架構 12
2.2.5 faces-config.xml 部署檔 13
2.3 Eclipse 與GEF framework 16
2.3.1 Eclipse簡介 16
2.3.2 Eclipse的設計架構 16
2.3.3 Eclipse的外掛開發環境 17
2.3.4 GEF framework 19
2.4 Tiles framework 21
三、系統設計與實作 25
3.1 目的 25
3.2 系統概念，功能描述 25
3.3 系統架構描述 25
3.4 系統實作 27
3.4.1 Viewer (JSFEditor.java) 28
3.4.2 Model & EditPart 29
四、系統實驗與評估 31
4.1 JSFConfig Editor使用者介面 32
4.2 網頁應用程式專案的建立 32
4.3 框架功能的支援 37
4.4 圖形化開發模式與純文字開發模式比較 41
4.5 開發購物入口網站應用程式 44
4.5.1 頁面框架 44
4.5.2 系統流程 47
五、結論 51
參考文獻 52

中文部分
1.林新聰(2001)，一個以MVC為基礎的EJB電子商務應用框架，國立台北科技大學電腦通訊與控制研究所碩士論文。
2.邱炫儒(2002)，以文件式Model-View-Controller設計樣式為基礎的應用系統開發方法，中原大學資訊管理研究所碩士論文。
3.陳宏儒(2003)，支援Java語言與XML應用之OpenFlow網頁開發環境 - 以Apache Cocoon為例，國立雲林科技大學資訊管理研究所碩士論文。
4.張嘉淵(2003)，以模式為基礎之開放式Web應用程式開發環境，國立雲林科技大學資訊管理研究所碩士論文。
5.陳冠儒(2004)，網路應用程式架構Struts之分析工具，私立中原大學資訊工程研究所碩士論文。
6.鄭世昌(2003)，網路應用程式架構Struts的View發展工具，私立中原大學資訊工程研究所碩士論文。
英文部分
7.Hans Bergsten(2004)，JavaServer Faces互動式網站介面，歐萊禮出版社
8.Matthew Robinson(2003)，Swing實作手冊，博碩文化
9.Carla Sadtler et al., “Patterns for e-business: User-to-Business Patterns for Topology 1 and 2 using WebSphere Advanced Edition,” IBM Redbooks publication, 2000.
10.Enhydra XMLC 2.1 , http://xmlc.enhydra.org/.
11.G. Kappel, W. Retschitzegger, W. Schwinger, Modeling Customizable Web Applications A Requirement''s Perspective, Kyoto International Conference on Digital Libraries, 2000.
12.Ibrahim, Bertrand, Visual languages to bridge the gap between software developers and their clients, Special session on "Visual Languages for Universal Communication", 1st International Conference on "Universal Access in Human-Computer Interaction" (UAHCI 2001), New Orleans, Luisiana, 5-10 August 2001.
13.Ketil Hunn, The Design of Visual Languages, 1997
14.Sho-Huan Simon Tung and Chia-Yuan Chang, Iconic Web Design and Programming, Department of Information Management of National Yunlin University of Science and Technology.
網頁部分
15.http://sourceforge.net/projects/webwork
16.http://jakarta.apache.org/struts/api/index.html
17.http://www2.tw.ibm.com/developerWorks/tutorial/SelectTutorial.do?
tutorialId=8#sec4
18.http://www.ifreethinking.com:8088/archives/david/000026.html
19.http://www.jdom.org/docs/apidocs/
20.http://java.sun.com/j2se/1.4.2/docs/index.html
21.http://www.jamesholmes.com/JavaServerFaces/
22.http://java.sun.com/docs/books/tutorial/uiswing/
23.http://java.sun.com/j2ee/javaserverfaces/1.1/docs/api/index.html