2011 JavaTwo JSF 2.0

  • 1,920 views
Uploaded on

 

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,920
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
148
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 技術
  • 4. JSF – 邁向2.0之路
  • 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.02000 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) 發 的TouchFacesLGPL 尚可 尚可 尚可,無拖放開 網路資源多 尚可 發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@SessionScopedpublic 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 Componentshello.xhtml<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0Transitional//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 3Template 1 1 3 3 2 2Component 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