第191期 / September 5, 2013

研發新視界

分享到臉書!分享到維特!分享到噗浪!分享到Google+!分享到微博!轉寄友人友善列印

敏捷開發系統的Web操作介面:JSF2、JPA2與Primefaces三劍客

作者/史晉銘

[發表日期:2013/8/22]

前言

現今各系統的使用者介面主流,無非是以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的網站過程畫面做示範:


《圖一》NetBeans設定畫面


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


《圖二》PrimeFaces 元件


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


《圖三》建立Map與宣告變數


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


《圖四》前端的primefaces語句內容


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


《圖五》下拉式選單內容


當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如下圖:


《圖六》IDE自動產生的NamedQuery


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


《圖七》以annotation注入資源


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


《圖八》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/