2011 javatwo jsf 2.0
TRANSCRIPT
JavaTWOJavaTWO 專業技術大會專業技術大會--JSF 2.0 JSF 2.0 全面啟動全面啟動
anthonychen• JWorld@TW JDBC 版版主• 經歷：• 倍力資訊資深研發工程師
JWorld@TW JDBC 版版主
資訊業經歷11年
• 倍力資訊資深研發工程師• Sun 聲揚
曾任職於：倍力資訊Sun Microsystems 教育訓練中心HTC
Agenda
• JSF 邁向2.0之路
• JSF 的實作與元件庫
• JSF 2 全面啟動• JSF 2 全面啟動
• JSF與其他Web 技術
JSF – 邁向2.0之路
JSF
• Java Server Faces
• Java EE 標準規格之一
• 以元件與事件導向為基礎概念• 以元件與事件導向為基礎概念
• 於2004推出第一版 (JSR 127)
• 於2009推出第二版 (JSR 314)
JSF – from 1.0 to 2.0
1.0 2.01.2
2000 2002 2003 20062004 2005 2007 2008 2009 2010 2011
JSF 1 的怨言…
• Configuration 複雜
• 缺乏頁面佈局設計，須依賴第三方實作
• 沒有Ajax，須依賴第三方實作• 沒有Ajax，須依賴第三方實作
• 元件客製困難
• 慢又浪費資源
• 學習曲線高
Web 開發趨勢
• 行動裝置支援– 智慧型手機，平板電腦
• 更高的互動性– Ajax enabled– Ajax enabled– HTML 5
• 簡化開發模式– Convention over configuration 慣例優先於設
定
JSF 實作與元件庫
JSF 2 實作 v.s. 元件庫
• 實作 (Reference implementations)– 核心元件– 符合標準JSF規範– 只具備標準功能實作– 只具備標準功能實作
• 元件庫 (Component libraries)– 基於標準核心元件運作– 多半為第三方開發– 百花齊放，功能擴充豐富
JSF 2 實作
• Mojarra– 官方參考實作 (RI)– GlassFish 內建– Mojarra Scales 提供額外擴充元件– Mojarra Scales 提供額外擴充元件
(http://java.net/projects/scales)
JSF 2 實作
• Apache MyFaces– 符合JSF規格的API與module實作– 許多延伸元件
• Trinidad, Tomahawk, Tobago…• 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• Orchestra– 實現conversation scope– 整合Hibernate/Toplink，提供DynaForm– 底層為Spring
• Extensions Validator– 欄位驗證外掛
• Extensions CDI– Contexts and Dependency Injection (CDI - JSR 299)
JSF 2 第三方元件庫授權 元件數量 外觀主題 開發工具支援 文件資源 行動裝置支援
Apache License
多，尤其layout相關
較陽春，不易修改
尚可，無拖放開發
官方尚可，但網路資源多
尚可
MPL 尚可 不錯 尚可，無拖放開發
尚可 尚可
Apache License
3.0 開始比較多 不錯，易修改(JQuery UI)
尚可，無拖放開發
尚可 有針對行動裝置的TouchFaces
LGPL 尚可 尚可 尚可，無拖放開 網路資源多 尚可LGPL 尚可 尚可 尚可，無拖放開發
網路資源多 尚可
Commercial 多，還有Goggle Map等專有元件
專業 JDeveloper支援度高，其他尚可
官方多，網路資源較少
尚可
JSF 2 全面啟動
JSF 2.0 新東西
• Annotation• Ajax 支援• Partial State• 更多的 scope• 更多的 scope• 內建支援 Facelet template技術• Composite component
Annotation
• 拋棄複雜的 XML 設定
• 用annotation建立Managed Bean
• 用annotation設定 Page Scope• 用annotation設定 Page Scope
• 用annotation驗證資料
Annotation – Managed Bean設定
<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 1.2 : faces-config.xml
@ManagedBean
@SessionScoped
public class SystemSessionBean{
}
JSF 2.0 : Managed Bean Annotation
Annotation – 建立其他元件
• @FacesComponent • @FacesRenderer • @FacesConverter • @FacesValidator • @FacesValidator • @FacesBehavior
face-config.xml
• 即使在JSF 2.0，faces-config.xml 設定檔還是必需的
• 下列設定還是需要 faces-config.xml
– i18n 語系設定– i18n 語系設定
– ELResolvers 設定
– PhaseListeners 設定
Annotation – Bean驗證
Annotation 說明
@NotNull 不可為Null
@Min 必須大於等於指定值
@Max 必須小於等於指定值
JSF 2支援 JSR 330的 Bean 驗證規格
@Max 必須小於等於指定值
@Size 必須介於指定的最小值與最大值之間
@Pattern 必須符合指定的Java regular expression
Annotation – Bean驗證public class User{
@NotNull
private String name
@Max(30)
private String addressline1;
@Size(max=30)@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• @CustomScoped• Flash scope
Facelet
• 高度自訂的模板技術
• 為 JSF 最佳化，執行速度快
• XHTML 為基礎• 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"/><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:h="http://java.sun.com/jsf/html"
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:h="http://java.sun.com/jsf/html"
xmlns:trh="http://myfaces.apache.org/trinidad/html"
xmlns:tr="http://myfaces.apache.org/trinidad"
template="/templates/generalPageTemplate.xhtml">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– 撰寫Renderer– 註冊faces-config.xml– 再客製JSP tag
Composite Components
• JSF 2.0– 在/<web_root>/resources 下建立元件目錄– 撰寫XHTML文件，放到元件目錄– 在Facelet模板中使用元件– 在Facelet模板中使用元件
完全不用寫 Java 程式!
Composite Components
<!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>
hello.xhtml
<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>
存取屬性值
Composite Components
• 將 hello.xhtml 放到/<web_root>/resources/anthony
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
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: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標籤所在的表單@form 只處理Ajax標籤所在的表單
元件id名稱 指定Ajax處理的表單元件，可以指定多個元件，以空白分隔
EL 可以透過EL指定處理的元件，內容必須是字串或字串集合
JSF 與其他 WEB 開發技術
JSF 的優勢
• Java EE 標準• 元件化快速開發• 優秀且強大的 template 引擎 – Facelet• *Ajax 支援• *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 Homehttp://javaserverfaces.java.net/
• JSF 2.2 VOTED ISSUES http://java.net/jira/secure/IssueNavigator.jspa?requestId=10523=10523
• Java Server Faces Specification http://javaserverfaces-spec-public.java.net
• Apache MyFaceshttp://myfaces.apache.org
• JSF Matrixhttp://www.jsfmatrix.net