第Java之JSF框架案例詳解這是一個(gè)分為兩部分的系列，其中我介紹了JSF2及其如何適合JavaEE生態(tài)系統(tǒng)。

在第1部分中，我將介紹JavaServerPages（JSF）背后的基本思想，在第2部分中，將介紹Facelets聲明語言。

在構(gòu)建Web應(yīng)用程序時(shí)，我們?yōu)樽罱K用戶提供了一種與我們的應(yīng)用程序進(jìn)行交互的方式，這就是JSF所提供的。

我將向您介紹MVC設(shè)計(jì)模式以及如何使用它，并且您將發(fā)現(xiàn)Facelets視圖語言及其使用方式，如何將數(shù)據(jù)和事件綁定到上下文以及如何通過表達(dá)語言來實(shí)現(xiàn)。

我將通過查看替代模板框架（例如Primefaces）來說明AJAX是如何本地支持的以及生態(tài)系統(tǒng)的可插入性。

JavaEE應(yīng)用程序通常是分層應(yīng)用程序。好吧，我在本文中談?wù)摰膶邮潜硎緦?。表示層?fù)責(zé)訪問者在訪問您的網(wǎng)站時(shí)所看到的內(nèi)容。

這是用戶與您的網(wǎng)站進(jìn)行交互的方式，應(yīng)盡可能地方便用戶使用。幸運(yùn)的是，借助諸如JSF之類的JavaEEAPI很難做到這一點(diǎn)。在JSFAPI包括很多便利，使開發(fā)人員能夠提供高品質(zhì)的用戶體驗(yàn)的開箱和用很少的設(shè)計(jì)知識(shí)。

MVC設(shè)計(jì)模式

讓我們先來看一下ModelViewController設(shè)計(jì)模式，該模式也稱為MVC。

MVC是用于實(shí)現(xiàn)用戶界面的體系結(jié)構(gòu)模式，該用戶界面將Web應(yīng)用程序分為三個(gè)邏輯連接的部分。這樣做是為了將數(shù)據(jù)的內(nèi)部表示形式與數(shù)據(jù)的表示方式分開。

JSF實(shí)際上是古典意義上的MVC框架，其中使用Facelets聲明語言構(gòu)建視圖，并且模型由CDI托管bean表示，控制器由JSF引擎本身負(fù)責(zé)。

在以后的文章中，我將對(duì)CDI托管bean及其扮演的角色有更深的了解。

查看：Facelets

Facelets是用于構(gòu)建JSF視圖和可重用復(fù)合組件的視圖聲明語言。通常，通過組合復(fù)合組件，表達(dá)式語言和標(biāo)簽庫，將視圖構(gòu)建為XHTML頁面。

我們不會(huì)在標(biāo)簽庫或復(fù)合組件的構(gòu)造方面進(jìn)行詳細(xì)介紹。這些超出了本課程的范圍。盡管如此，我們將研究如何使用表達(dá)式語言來綁定CDIbean和用來自應(yīng)用程序內(nèi)部層的數(shù)據(jù)替換視圖中的值。

復(fù)合組件是按給定方式運(yùn)行的可重用代碼段，例如接受用戶輸入的輸入字段。他們可以附加驗(yàn)證器，偵聽器和其他元素，以提供更多有用的交互功能。

但是，F(xiàn)acelets不是我們工具包中僅有的模板語言。實(shí)際上，圍繞第三方組件庫的社區(qū)非常繁忙。

可插拔的庫（例如PrimeFaces，ApacheMyFaces和ICEFaces）都提供了復(fù)合組件，這些組件為視圖增加了實(shí)質(zhì)性功能，從而增強(qiáng)了用戶體驗(yàn)。實(shí)際上，我們將在應(yīng)用程序中使用PrimeFaces的組件，并且稍后將在本課程中看到其示例。

Facelets使導(dǎo)航變得簡(jiǎn)單。您可以僅將視圖名稱傳遞給組件的操作，而JSF引擎負(fù)責(zé)定位和呈現(xiàn)視圖。

這是一個(gè)代碼段，您可以在其中看到管理儀表板模板已傳遞到“取消”按鈕的action屬性。這是單擊按鈕時(shí)將呈現(xiàn)的模板。

p:commandButtonvalue="Cancel"action="/admin/dashboard"/

型號(hào)：裝訂

CDIbean處理了模型部分，并且將它們綁定到視圖的方式是通過表達(dá)語言。數(shù)據(jù)和事件的綁定都是通過這種方式完成的，稍后我們將看到很多示例。

在這里，您可以看到數(shù)據(jù)綁定的示例。我們正在做的是將帳戶CDIbean的名稱字段綁定到頁面的上下文。呈現(xiàn)后，名稱字段的值將在視圖中替換，并在屏幕上顯示給最終用戶。

Welcomep#{}/p

AJAX和HTML5

通過使用內(nèi)置JavaScript資源庫，可以直接使用AJAX。f：ajax標(biāo)記無需任何編碼即可將AJAX功能添加到任何UI組件。

此代碼段顯示了AJAX是為“提交”按鈕上的鼠標(biāo)單擊事件觸發(fā)的。

h:commandButtonid="submit"value="Submit"

f:ajaxevent="click"/