2011 JavaTwo JSF 2.0
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • 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
2,255
On Slideshare
2,255
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