前言

現今各系統的使用者介面主流，無非是以Web介面為首選，除了操作與連線方便之外，最大的優點就是：誰的裝置會沒有瀏覽器呢? 當然開發人員在開發系統時常常可以發現，對使用者仁慈、就是對自己殘忍，因此一個能夠讓開發人員快速開發、簡單使用的框架就相形重要了。我們以最簡單的角度來看開發一個系統的Web操作介面的重點，無不注意的是前端、後段程式邏輯以及資料庫，如果能夠有一套涵蓋各方面的開發框架，則是再好也不過了。

JSF & Primfaces的完美搭配

Web介面除了傳統的ASP.NET、PHP以及新潮的node.js + HTML5之外，另外一類的主流就是Java Web，而這幾年來，JavaWeb也發展得越來越成熟，除了傳統的SSH(Struts2,Spring,Hibernate)三大框架以及JSP/Servlet之外，已經將Facelets(視圖解決框架)納入其規範內的 JSF (Java Server Faces)2的實用性也不容小覷，JSF1與JSF2最大的不同在於，JSF2引入了Annotation，能夠大幅減少各項xml設定檔的內容，降低開發時的複雜度，同時也對AJAX做了相當程度的適應，再搭配上變得更靈活地EJB3.1，將使得網站開發框架變得更完善。而實作JSF2規範最常見的組件有Oracle(Sun)的Mojarra或是Apache的MyFaces，一般的IDE都會內建這兩個組件其中之一，在這邊我們以Java EE版本的Netbeans建立一個 JSF的網站過程畫面做示範：



在上圖中，可以看見我們還勾選了一個叫做PrimeFaces的組件，PrimeFaces是基於JSF與Javascript的擴展項目，其效用是擴展前端頁面的開發選項與AJAX組件，對於網頁上的互動式動態元件，PrimeFaces已經有提供很完整的元件以及CSS外觀套件，如果善用PrimeFaces，除了增快開發速度之外，也能夠對您提供的網頁操作帶來更好的使用者體驗，現在就可以拜訪PrimeFaces的ShowCase 頁面來玩玩看它所提供的元件：http://www.primefaces.org/showcase/ui/home.jsf



JSF2與PrimeFaces的組合已經可以應付大部分的前端網頁操作需求，後端更可配合各種生命週期的ManagedBean 來處理各種前端的需求，常見的如單次要求的RequestScope、網頁關閉前後端資料都存在的ViewScope以及Session未斷開都存在的SessionScope，讓前端網頁可以靈活的存取資料以及掌握使用者的操作，以一個下拉式選單為例，只要在後端建立好一個Map，並指定一個變數來存放使用者所選取的變數以及相對應的getter/setter即可。



而在前端頁面的部份只需要短短這幾行：



就可以立刻產出這樣子的下拉式選單：



當user選取時，會立即將該Map內相對應的value經由setter寫入至後端的currentTemlpateValue中，更可以加入ajax事件來立刻更新頁面上的內容，大大的降低了前後端的耦合性，也增加了元件或資料重複使用的可能。

操作資料庫的好夥伴：JPA2

除了前端與後端邏輯，另外一個重要的要素是資料庫的操作，在這邊JPA2框架無疑是最好的選擇了，基於物件映射(Object-RelationalMmapping)的資料庫操作框架有很多，ORM簡單的解釋就是把資料庫中的表格視為一種Class，每一行row可視為一個Object，如此開發人員就可以當成在撰寫一般程式來操作資料庫中的資料，而其中實作JPA2的組件中，這裡推薦比Hibernate簡單好操作的EclipseLink (前身為TopLink)，在JPA2中，每一張表格結構之物件可以看成一個Entity，在使用IDE建立Entity時，有一個神奇的地方，就是會IDE自動幫你轉成符合Java風格的命名，例如您有個欄位叫做 line_speed，IDE會幫你轉換成lineSpeed，因此要留意的是，在建立資料表時，若能使用相對應的命名風格，在開發時會節省相當多的時間，也方便除錯。每個Entity除了自己的變數(欄位)之外，也可定義數組NamedQuery (使用JPQL)來增進開發效率，假設我們有一張資料表叫做phy_link，則IDE自動產生的NamedQuery如下圖：



除了Entity本身，負責操作Entity的則稱為EntityManager，當定義好與資料庫連線的Persistence持久性單元後，我們可以以這樣的方式來宣告一個EntityManager，如下圖：



這時我們可以用這樣的方式來操作資料庫：



只要宣告一個裝PhyLink的List，再呼叫EntityManager的createNameQuery來調用您自己定義的NamedQuery，最後調用getResultList，馬上就能以物件的形式獲得資料表內的所有資料，除了NamedQuery，EntityManager也有原生的SQL Query可以使用，同時間若您有快取、外來鍵的需求，也通通在JPA2的規範之內，非常方便。

結語

經由這樣子的介紹後，可以看見JSF2、JPA2與Primefaces從前段、後端與資料庫幾乎都包含在內了，整體的邏輯是使用JPA2來控制資料庫、使用JSF2做為前後端主體並以Primefaces來強化元件與網站外觀，對於想要快速開發系統Web操作介面的開發人員來說，這三劍客是一個非常值得考慮的選項。

參考資料

http://www.primefaces.org/
http://www.eclipse.org/eclipselink/
http://javaserverfaces.java.net/