2011 JavaTwo JSF 2.0
1 like903 views
本文件介绍了JavaServer Faces (JSF) 2.0 的全面启动，包括其历史背景、主要特性和与其他Web开发技术的比较。重点强调了新的注解支持、AJAX功能、Facelets模板技术以及构建和使用组合组件的简化过程。文档总结了JSF 2.0 的优点和缺点，以及当前的开发趋势和使用情况。
![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;
}](https://image.slidesharecdn.com/2011oraclejavatwojsf2-110801111538-phpapp01/85/2011-JavaTwo-JSF-2-0-22-320.jpg)
2011 JavaTwo JSF 2.0
- 1. JavaTWO 專業技術大會 -JSF 2.0 全面啟動
- 2. anthonychen • JWorld@TW JDBC 版版主 JWorld@TW JDBC 版版主 • 經歷： 資訊業經歷11年 • 倍力資訊資深研發工程師 曾任職於： 倍力資訊 • Sun 聲揚 Microsystems 教育訓練中心 Sun HTC
- 3. Agenda • JSF 邁向2.0之路 • JSF 的實作與元件庫 • JSF 2 全面啟動 • JSF與其他Web 技術
- 5. JSF • Java Server Faces • Java EE 標準規格之一 • 以元件與事件導向為基礎概念 • 於2004推出第一版 (JSR 127) • 於2009推出第二版 (JSR 314)
- 6. JSF – from 1.0 to 2.0 1.0 1.2 2.0 2000 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011
- 7. JSF 1 的怨言… • Configuration 複雜 • 缺乏頁面佈局設計，須依賴第三方實作 • 沒有Ajax，須依賴第三方實作 • 元件客製困難 • 慢又浪費資源 • 學習曲線高
- 8. Web 開發趨勢 • 行動裝置支援 – 智慧型手機，平板電腦 • 更高的互動性 – Ajax enabled – HTML 5 • 簡化開發模式 – Convention over configuration 慣例優先於設 定
- 9. JSF 實作與元件庫
- 10. JSF 2 實作 v.s. 元件庫 • 實作 (Reference implementations) – 核心元件 – 符合標準JSF規範 – 只具備標準功能實作 • 元件庫 (Component libraries) – 基於標準核心元件運作 – 多半為第三方開發 – 百花齊放，功能擴充豐富
- 11. JSF 2 實作 • Mojarra – 官方參考實作 (RI) – GlassFish 內建 – Mojarra Scales 提供額外擴充元件 (http://java.net/projects/scales)
- 12. JSF 2 實作 • Apache MyFaces – 符合JSF規格的API與module實作 – 許多延伸元件 • Trinidad, Tomahawk, Tobago… • Orchestra, Extensions Validator, Extensions CDI... – HTML 5 支援 (http://bit.ly/myfaces-html5- demo)
- 13. 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)
- 14. JSF 2 第三方元件庫 授權 元件數量 外觀主題 開發工具支援 文件資源 行動裝置支援 Apache 多，尤其layout 較陽春，不易修 尚可，無拖放開 官方尚可，但網 尚可 License 相關 改 發 路資源多 MPL 尚可 不錯 尚可，無拖放開 尚可 尚可 發 Apache 3.0 開始比較多 不錯，易修改 尚可，無拖放開 尚可 有針對行動裝置 License (JQuery UI) 發 的TouchFaces LGPL 尚可 尚可 尚可，無拖放開 網路資源多 尚可 發 Commercial 多，還有 專業 JDeveloper支援 官方多，網路資 尚可 Goggle Map等 度高，其他尚可 源較少 專有元件
- 15. JSF 2 全面啟動
- 16. JSF 2.0 新東西 • Annotation • Ajax 支援 • Partial State • 更多的 scope • 內建支援 Facelet template技術 • Composite component
- 17. Annotation • 拋棄複雜的 XML 設定 • 用annotation建立Managed Bean • 用annotation設定 Page Scope • 用annotation驗證資料
- 18. 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{ }
- 19. Annotation – 建立其他元件 • @FacesComponent • @FacesRenderer • @FacesConverter • @FacesValidator • @FacesBehavior
- 20. face-config.xml • 即使在JSF 2.0，faces-config.xml 設定檔還是必 需的 • 下列設定還是需要 faces-config.xml – i18n 語系設定 – ELResolvers 設定 – PhaseListeners 設定
- 21. Annotation – Bean驗證 JSF 2 支援 JSR 330 的 Bean 驗證規格 Annotation 說明 @NotNull 不可為Null @Min 必須大於等於指定值 @Max 必須小於等於指定值 @Size 必須介於指定的最小值與最大值之間 @Pattern 必須符合指定的Java regular expression
- 22. 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; }
- 23. 其他驗證功能 • JSF 2 額外提供了驗證的標籤 – <f:validateRequired> 驗證必填的表單欄位 – <f:validateRegexp> 使用regular expression驗 證元件
- 24. 更多 Page Scope 支援 • @RequestScoped • @ViewScoped • @SessionScoped • @CustomScoped • Flash scope
- 25. Facelet • 高度自訂的模板技術 • 為 JSF 最佳化，執行速度快 • XHTML 為基礎 • 可攜度高，便於切換不同第三方元件庫 • 亦支援JSTL (須使用facelet提供的library)
- 26. 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>
- 27. 套用 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>
- 28. 內嵌 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"> <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>
- 29. Composite Components 客製化自己的元件 • JSF 1 時: – 繼承 UIComponent – 撰寫Renderer – 註冊faces-config.xml – 再客製JSP tag
- 30. Composite Components • JSF 2.0 – 在/<web_root>/resources 下建立元件目錄 – 撰寫XHTML文件，放到元件目錄 – 在Facelet模板中使用元件 完全不用寫 Java 程式!
- 31. Composite Components 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> 存取屬性值
- 32. 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>
- 33. 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')" />
- 34. 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(); }
- 35. Ajax 支援 • Partial view processing – JSF 1.x 時，預設當form被submit，所有元件 都會被送到server-side – JSF 2.0透過 <f:ajax execute=“”/> 屬性，可以 只處理部分元件
- 36. Ajax 支援 設定值 說明 @all 所有頁面表單內的元件都會被送出處理 @none 不送出任何表單元件 @this 只送出Ajax request 所 trigger 的元件(預設值) @form 只處理Ajax標籤所在的表單 指定Ajax處理的表單元件，可以指定多個元件，以空白分 元件id名稱 隔 EL 可以透過EL指定處理的元件，內容必須是字串或字串集合
- 37. JSF 與其他 WEB 開發技術
- 38. JSF 的優勢 • Java EE 標準 • 元件化快速開發 • 優秀且強大的 template 引擎 – Facelet • *Ajax 支援 • *Annotation
- 39. 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
- 40. JSF 的缺點 • 較難優化，尤其是對網頁size與速度要求較 高時 Intranet • 學習門檻較傳統MVC框架高 熟悉使用單 一實作 • 商業Application Server支援較慢 Glassfish, Tomcat, JBoss…
- 41. 其他參考資源 • 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