▶ 技術交流

軟體設計‭ ‬JSF – Java‭ ‬Server Faces‭ ‬優勢與應用

文 - 黃兆乾、吳政翰


關鍵字:Web form、Web service、JSF、Java Server Faces、UI、MVC

■ 站穩外匯市場,穩健經營第一步

幾年前如果所有的系統都用‭ ‬Windows‭ ‬form‭ ‬開發,相信沒有客戶會有太大的意見。因為當時市面上的 Web‭ ‬form 產品的數量一般,不像現在這麼的常見;但現在‭ ‬Web‭ ‬form‭ ‬的系統已經成長到一個很可怕的狀態了,甚至許多遊戲與軟體都直接以‭ ‬Web‭ ‬form‭ ‬的形式來呈現,Web form‭ ‬的軟體設計方式已經為眾人所接受。

相較於‭ ‬Windows‭ ‬form‭ ‬架構需要在使用者電腦上下載、安裝並執行應用程式;Web Form‭ ‬沒有用戶端部署,用戶端只需要瀏覽器,相對來講使用便利性高很多。在各家瀏覽器的‭ ‬JavaScript‭ ‬執行效能有明顯的改進之後,許多新的網頁應用程式架構可以利用使用者的電腦資源做一些複雜的運算與處理而不必將資料帶回伺服器處理,大大的增加了程式與使用者的互動速度,並且新的網頁標準功能(如‭ ‬WebGL、HTML5‭ ‬等)也讓開發者可以更有彈性的在瀏覽器上開發各種應用程式。

就安全性而言,Windows Form‭ ‬所具有的權限,基本上與使用者所擁有的相同,亦即擁有存取電腦使用者所擁有的資源。例如,使用者可以存取的檔案系統,程式碼就可以存取相同的檔案系統;使用者可以存取某個資料庫,程式碼就可以存取該資料庫,不須經過使用者同意,控管上需花費較多心思。Web form‭ ‬的程式碼存於‭ ‬Server‭ ‬上,如果沒有經過使用者同意取得使用權限,就無法存取使用者的電腦資源,相較之下容易做安全性的控管。此外‭ ‬Windows‭ ‬form‭ ‬與本機資源的溝通透過‭ ‬Port‭ ‬來達成,往往一種服務就需要開一個‭ ‬Port,這意味著使用者如果安裝較多功能性的軟體,須監控多個‭ ‬Port;而‭ ‬Web form‭ ‬不需開放過多的‭ ‬Port,僅需監控封包就可以分析出想要的資訊。上述的種種優點使得‭ ‬Web‭ ‬form‭ ‬的系統為慢慢成為了目前主流的設計趨勢。

■ JSF(Java Server Faces)的好處與優點

  1. 分工明確

    JSF‭ ‬的架構設計清楚地將‭ ‬Web‭ ‬應用程式的開發者劃分了三個角色:網頁設計人員、應用程式設計人員以及‭ ‬UI‭ ‬元件開發人員。

    從使用‭ ‬JSF‭ ‬的角度來看,網頁設計人員與應用程式設計人員可以他們所熟悉的方式開發程式,而不用侵入彼此的工作範圍,而‭ ‬UI‭ ‬元件開發人員可以獨立的開發個別元件,細節的部份留給了他們來處理。

    換言之,Java‭ ‬Server Faces‭ ‬協助了職責的分別,讓不同屬性的開發人員可以彼此合作,而又互不干擾,UI‭ ‬元件的開發搭配整合開發環境(IDE)或是所視即可得的網頁編輯程式,讓‭ ‬Web‭ ‬應用程式的開發得以簡單且迅速,藉此提高應用程式開發效率。

    Web Service運作方式方示意圖

  2. 使用‭ ‬MVC‭ ‬的開發模型易於管理

    既是‭ ‬JAVA Web‭ ‬使用者介面標準又是嚴格遵循‭ ‬Model-View-Controller‭(MVC‭)設計模式的框架。使用者介面(View)與應用程式資料和邏輯(Model)的清晰分離使‭ ‬JSF‭ ‬應用程式更易於管理。

  3. 容易開發

    不用理會‭ ‬HTTP、資料轉換等細節,JSF‭ ‬將細節都隱藏起來了,無論您是網頁設計人員或是應用程式設計人員,都可以使用自己熟悉的方式來使用‭ ‬JSF。

    從網頁設計人員的角度來看,Java‭ ‬Server Faces 提供了一套像是新版本的‭ ‬HTML‭ ‬標籤,但它不是靜態的,而是動態的,可以與後端的動態程式結合,但網頁設計人員不需要理會後端的動態部份,也可以動態的展現資料(像是動態的查詢表格內容),Java‭ ‬Server Faces‭ ‬提供標準的標籤,目前也有許多好用的標籤可供選擇(例如‭:‬‭ ‬Prime‭ ‬Faces‭ ‬跟‭ ‬Rich‭ ‬Faces),而另一方面,Java‭ ‬Server Faces 也允許您自訂標籤。

    從應用程式設計人員的角度來看,Java‭ ‬Server Faces‭ ‬提供一個與‭ ‬MVC‭ ‬的開發模型,他們可以基於事件驅動來開發程式,不必關切‭ ‬HTTP‭ ‬的處理細節,如果必須處理一些視覺元件的屬性的話,他們也可以直接在整合開發環境上拖拉這些元件,點選設定元件的屬性,Java‭ ‬Server Faces‭ ‬甚至還為應用程式設計人員處理了物件與字串(HTTP‭ ‬傳送本質上就是字串)間不匹配的轉換問題。

    從‭ ‬UI‭ ‬元件開發人員的角度來看,他們可以設計通用的‭ ‬UI‭ ‬元件,讓應用程式的開發產能提高,就如同在設計‭ ‬Swing‭ ‬元件等,UI‭ ‬開發人員可以獨立開發,只要定義好相關的屬性選項來調整細節,而不用受到網頁設計人員或應用程式設計人員的干擾。

    三個角色的知識領域原則上可以互不干擾,根據您的角色,您只要瞭解其中一個知識領域,就可以運用‭ ‬Java‭ ‬Server Faces,其它角色的知識領域您可以不用瞭解太多細節。

  4. 易使用的 UI 元件

    JSF UI‭ ‬元件整合了‭ ‬CSS‭ ‬與‭ ‬AJAX‭ ‬簡化了動態網頁的設計難度,讓網頁更生動。

  5. 自定義元件更有彈性

    JSF‭ ‬讓您可以自訂元件,每個元件裡面所包含的子元件都是可替換的,這使得元件在搭配時更有彈性。

■ 資通選用的考量

資通外匯系統與海外分行系統在考量資料傳遞與處理相容性後將逐步導入‭ ‬JSF 作為前端操作介面,透過‭ ‬Web‭ ‬頁面能使得系統畫面的呈現更多樣化也更有彈性。

■ JSF 未來的延伸

JSF UI‭ ‬元件技術最引人注目的一個方面就是它的可插入呈現功能。JSF UI‭ ‬元件能夠根據查看元件的用戶端的類型而以不同的方式呈現。例如‭ : ‬HTML‭ ‬瀏覽器將看到特定‭ ‬UI‭ ‬元件的「HTML‭ ‬瀏覽器相容性」版本,而支援無線或‭ ‬WAP‭ ‬的微型設備將看到同一‭ ‬UI‭ ‬元件的「WML‭ ‬相容性」版本。

JSF‭ ‬通過解除‭ ‬UI‭ ‬元件與其呈現邏輯之間的耦合從而能夠為同一‭ ‬UI‭ ‬元件創建多個呈現介面實現了這一功能。不同的呈現介面可以與‭ ‬UI‭ ‬元件相關聯,在執行時‭ ‬UI‭ ‬元件可以根據請求的用戶端類型決定使用哪一個呈現介面。

並且由於‭ ‬JSF‭ ‬採用‭ ‬Web service‭ ‬架構,所以只要能夠上網的設備,不論是手機或是平板都可以支援,不會侷限於某一種設備,有助於使用者隨時隨地掌握狀況及時處理。

>>本期下一篇技術交流文章:集團導入,制度統一與否

想瞭解更多關於資通‭ ‬AFEIS‭ ‬外匯系統與資通‭ ‬eAresBank‭ ‬海外分行系統相關內容嗎?
★ 詳細產品資訊請洽線上免費諮詢服務服務或資通業務窗口 - 汪小姐 Tel:02 -2522-1351 Ext. 301

推Plurk
列印