2011 JavaTwo JSF 2.0

JavaTWO 專業技術大會
-JSF 2.0 全面啟動

anthonychen
• JWorld@TW JDBC 版版主
JWorld@TW JDBC 版版主
• 經歷：資訊業經歷11年

• 倍力資訊資深研發工程師
曾任職於：
倍力資訊
• Sun 聲揚 Microsystems 教育訓練中心
Sun
HTC

Agenda
• JSF 邁向2.0之路
• JSF 的實作與元件庫
• JSF 2 全面啟動
• JSF與其他Web 技術

JSF
• Java Server Faces
• Java EE 標準規格之一
• 以元件與事件導向為基礎概念
• 於2004推出第一版 (JSR 127)
• 於2009推出第二版 (JSR 314)

JSF – from 1.0 to 2.0

1.0 1.2 2.0

2000 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011

JSF 1 的怨言…
• Configuration 複雜
• 缺乏頁面佈局設計，須依賴第三方實作
• 沒有Ajax，須依賴第三方實作
• 元件客製困難
• 慢又浪費資源
• 學習曲線高

Web 開發趨勢
• 行動裝置支援
– 智慧型手機，平板電腦
• 更高的互動性
– Ajax enabled
– HTML 5
• 簡化開發模式
– Convention over configuration 慣例優先於設
定

JSF 2 實作 v.s. 元件庫
• 實作 (Reference implementations)
– 核心元件
– 符合標準JSF規範
– 只具備標準功能實作
• 元件庫 (Component libraries)
– 基於標準核心元件運作
– 多半為第三方開發
– 百花齊放，功能擴充豐富

JSF 2 實作
• Mojarra
– 官方參考實作 (RI)
– GlassFish 內建
– Mojarra Scales 提供額外擴充元件
(http://java.net/projects/scales)

JSF 2 實作
• Apache MyFaces
– 符合JSF規格的API與module實作
– 許多延伸元件
• Trinidad, Tomahawk, Tobago…
• Orchestra, Extensions Validator, Extensions CDI...
– HTML 5 支援 (http://bit.ly/myfaces-html5-
demo)

Apache MyFaces
• Trinidad/Tomahawk/Tobago
– UI擴充元件庫
– Trinidad/Tomahawk支援JSF 2.0
– Trinidad是Oracle ADF的open source版，由Oracle捐獻給Apache
• Orchestra
– 實現conversation scope
– 整合Hibernate/Toplink，提供DynaForm
– 底層為Spring
• Extensions Validator
– 欄位驗證外掛
• Extensions CDI
– Contexts and Dependency Injection (CDI - JSR 299)

JSF 2 第三方元件庫
授權元件數量外觀主題開發工具支援文件資源行動裝置支援

Apache 多，尤其layout 較陽春，不易修尚可，無拖放開官方尚可，但網尚可
License 相關改發路資源多
MPL 尚可不錯尚可，無拖放開尚可尚可
發
Apache 3.0 開始比較多不錯，易修改尚可，無拖放開尚可有針對行動裝置
License (JQuery UI) 發的TouchFaces
LGPL 尚可尚可尚可，無拖放開網路資源多尚可
發
Commercial 多，還有專業 JDeveloper支援官方多，網路資尚可
Goggle Map等度高，其他尚可源較少
專有元件

JSF 2.0 新東西
• Annotation
• Ajax 支援
• Partial State
• 更多的 scope
• 內建支援 Facelet template技術
• Composite component

Annotation
• 拋棄複雜的 XML 設定
• 用annotation建立Managed Bean
• 用annotation設定 Page Scope
• 用annotation驗證資料

Annotation – Managed Bean設定
JSF 1.2 : faces-config.xml
<managed-bean>
<managed-bean-name>SystemSessionBean</managed-bean-name>
<managed-bean-class>test.SystemSessionBean</managed-bean-class>
<managed-bean-scope>session</managed-bean>
</managed-bean>

JSF 2.0 : Managed Bean Annotation

@ManagedBean
@SessionScoped
public class SystemSessionBean{

}

Annotation – 建立其他元件
• @FacesComponent
• @FacesRenderer
• @FacesConverter
• @FacesValidator
• @FacesBehavior

face-config.xml
• 即使在JSF 2.0，faces-config.xml 設定檔還是必
需的
• 下列設定還是需要 faces-config.xml
– i18n 語系設定
– ELResolvers 設定
– PhaseListeners 設定

Annotation – Bean驗證
JSF 2 支援 JSR 330 的 Bean 驗證規格

Annotation 說明
@NotNull 不可為Null
@Min 必須大於等於指定值
@Max 必須小於等於指定值
@Size 必須介於指定的最小值與最大值之間
@Pattern 必須符合指定的Java regular expression

Annotation – Bean驗證
public class User{

@NotNull
private String name

@Max(30)
private String addressline1;

@Size(max=30)
private String addressline2;

@Size(min = 1, message = "Please enter the Email")
@Pattern(regexp = "[a-zA-Z0-9]+@[a-zA-Z0-9]+.[a-zA-Z0-9]+", message =
"Email format is invalid.")
private String email;

}

其他驗證功能
• JSF 2 額外提供了驗證的標籤
– <f:validateRequired> 驗證必填的表單欄位
– <f:validateRegexp> 使用regular expression驗
證元件

更多 Page Scope 支援
• @RequestScoped
• @ViewScoped
• @SessionScoped
• @CustomScoped
• Flash scope

Facelet
• 高度自訂的模板技術
• 為 JSF 最佳化，執行速度快
• XHTML 為基礎
• 可攜度高，便於切換不同第三方元件庫
• 亦支援JSTL (須使用facelet提供的library)

Facelet 模板

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<head>…</head>
<body>
<div id="header">
<ui:include src="/jspf/pageHeader.jspx"/>
<div id="content">
<ui:insert name="content"/>
</div>
</div>
</body>
</html>

套用 Facelet 模板
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:trh="http://myfaces.apache.org/trinidad/html"
xmlns:tr="http://myfaces.apache.org/trinidad"
template="/templates/generalPageTemplate.xhtml">

<ui:define name="pageTitle">
<h:outputText value=“System"/>
</ui:define>

<ui:define name="content">
<h:outputText value=“Hello"/>
</ui:define>

</ui:composition>

內嵌 facelet template
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:trh="http://myfaces.apache.org/trinidad/html"
xmlns:tr="http://myfaces.apache.org/trinidad"
template="/templates/generalPageTemplate.xhtml">

<ui:define name="pageTitle">
<h:outputText value=“System"/>
</ui:define>
<ui:define name="content">
<ui:decorate template="/template/defaultPanel.xhtml">
<ui:param name="panelTitle" value="#{bean.homePanelTitle}"/>
<ui:param name="panelIcon“ value="/resources/icon.png"/>
</ui:decorate>
</ui:define>
</ui:composition>

Composite Components
客製化自己的元件
• JSF 1 時:
– 繼承 UIComponent
– 撰寫Renderer
– 註冊faces-config.xml
– 再客製JSP tag

• JSF 2.0
– 在/<web_root>/resources 下建立元件目錄
– 撰寫XHTML文件，放到元件目錄
– 在Facelet模板中使用元件

完全不用寫 Java 程式!

hello.xhtml
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”
xmlns:h=“http://java.sun.com/jsf/html”
xmlns:composite=“http://java.sun.com/jsf/composite”>
<head>
<title>My Composite Component</title>
</head>
<body>
<composite:interface>
<composite:attribute name=“user"/>
</composite:interface>
<composite:implementation>
<h:outputText value="Hello, #{cc.attrs.name}!"/>
</composite:implementation>
</body>
</html>

存取屬性值

• 將 hello.xhtml 放到
/<web_root>/resources/anthony

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:anthony=http://java.sun.com/jsf/composite/anthony>

<anthony:hello name=“Anthony"/>

</html>

Ajax 支援
• 新標籤 <f:ajax />
• event屬性 - Ajax觸發事件
• render屬性 - Partial view rendering
<h:form>
<h:panelGrid>
<h:inputText value=“#{bean.text}”>
<f:ajax event=“keyup” render=“text”/>
</h:inputText>
<h:outputText id="text" value="#{bean.text}" />
</h:panelGrid>
</h:form>

<input id="j_idt5:j_idt7" type="text" name="j_idt5:j_idt7" onkeyup="mojarra.ab(this,event,'keyup',0,'j_idt5:text')" />

Ajax 支援
• Listener 屬性 – 使用Managed Bean註冊的
listener
<h:form>
<h:panelGrid>
<h:inputText value="#{bean.text}" >
<f:ajax event=“keyup” render=“text count” listener=“#{bean.countListener}”/>
</h:inputText>
<h:outputText id=“text” value=“#{bean.text}”/>
<h:outputText id=“count”value=“#{bean.count}”/>
</h:panelGrid>
</h:form>

public void countListener(AjaxBehaviorEvent event) {
count = text.length();
}

Ajax 支援
• Partial view processing
– JSF 1.x 時，預設當form被submit，所有元件
都會被送到server-side
– JSF 2.0透過 <f:ajax execute=“”/> 屬性，可以
只處理部分元件

Ajax 支援
設定值說明
@all 所有頁面表單內的元件都會被送出處理
@none 不送出任何表單元件
@this 只送出Ajax request 所 trigger 的元件(預設值)
@form 只處理Ajax標籤所在的表單
指定Ajax處理的表單元件，可以指定多個元件，以空白分
元件id名稱
隔
EL 可以透過EL指定處理的元件，內容必須是字串或字串集合

JSF 與其他 WEB 開發技術

JSF 的優勢
• Java EE 標準
• 元件化快速開發
• 優秀且強大的 template 引擎 – Facelet
• *Ajax 支援
• *Annotation

JSF 與其他 Web技術
Struts 2 Spring MVC JSF 1 JSF 2 GWT ZK

開發生產力 1 1 2 2 2 2

學習曲線 1 1 2 2 2 2

專案活躍程度 2 3 2 3 2 3

Template 1 1 3 3 2 2
Component
1 1 3 2 1 3
實作數
Ajax支援 2 2 2 3 3 3
網路資源與文
2 2 2 2 1 1
件
Mobile 支援 1 1 1 2 2 2

11 12 17 19 15 18

JSF 的缺點
• 較難優化，尤其是對網頁size與速度要求較
高時 Intranet
• 學習門檻較傳統MVC框架高熟悉使用單
一實作
• 商業Application Server支援較慢
Glassfish, Tomcat, JBoss…

其他參考資源
• JSF Home
http://javaserverfaces.java.net/
• JSF 2.2 VOTED ISSUES
http://java.net/jira/secure/IssueNavigator.jspa?requestId
=10523
• Java Server Faces Specification http://javaserverfaces-
spec-public.java.net
• Apache MyFaces
http://myfaces.apache.org
• JSF Matrix
http://www.jsfmatrix.net

2011 JavaTwo JSF 2.0

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (9)

Similar to 2011 JavaTwo JSF 2.0

Similar to 2011 JavaTwo JSF 2.0 (20)

2011 JavaTwo JSF 2.0