JavaServer Faces 1.2 Peter Antman, CTO, 2007 Mogul
Java Server Faces <ul><li>JSF
A  specification , several implementations
A user interface (UI) framework for Java Web  applications
Designed much like a “fat” UI framework such as Swing and SWT
First RI released 2002
1.0 specification released March 2004, not part of J2EE
1.2 spec released spring 2006
1.2 is part of J2EE 1.5
Is taking of (maybe) </li></ul>
New in JSF 1.2 <ul><li>JSF and JSF now shares expression language
Missmatch with JSP fixed (new JSP ViewHandler and tag base class)
Works with JSTL forEach
Multiple windows and back-button problems fixed </li></ul>
Implementations and add-ons <ul><li>Major implementations </li><ul><li>SUN RI (1.2)
MyFaces (1.0) </li></ul><li>Component libraries </li><ul><li>Tomahawk
Tobago </li></ul><li>Ajax support </li><ul><li>Ajax4jsf
Dynamic Faces </li></ul><li>JSP alternatives </li><ul><li>Facelets </li></ul></ul>
Core design <ul><li>Build on Model-View-Controller (MVC) pattern
Component based </li><ul><li>standard GUI components (connects view and model)
Loose coupling to models through value- and method-binding technology </li></ul><li>Lifecycle managed </li><ul><li>Clearly...
Not tied to any specific view technology
By design geared at server side execution </li></ul>
Building blocks <f:view> <h:form> <h:outputText  value=&quot;#{test2.value}&quot;  <h:inputText  value=&quot;#{test2.value...
Configure web application in web.xml <ul><li>Where should state be saved </li></ul><context-param> <param-name>javax.faces...
View - JSP <ul><li>Add taglibs </li></ul><%@ taglib uri=&quot;http://java.sun.com/jsf/core&quot; prefix=&quot;f&quot; %> <...
Validation - builtin <ul><li>Use builtin validators
Ad an id to enclosing element
Nest validator
Use a message for the element where any errors will appear </li></ul><h:inputText  id=&quot;in&quot;  value=&quot;#{test2....
Validator - custom <ul><li>Implement Validator </li></ul>public void validate(FacesContext, UIComponent comp, Object value...
Use generic method </li></ul><f:validator validatorId=”my.validator.MYID”/> <f:attribute name=”myValidatorConf” value=”Som...
Also possible to do ones own Converters </li></ul>
Upcoming SlideShare
Loading in...5
×

Java Server Faces 1.2 presented (2007)

938

Published on

An overview on JSF 1.2 from 2007.

Published in: Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
938
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Java Server Faces 1.2 presented (2007)"

  1. 1. JavaServer Faces 1.2 Peter Antman, CTO, 2007 Mogul
  2. 2. Java Server Faces <ul><li>JSF
  3. 3. A specification , several implementations
  4. 4. A user interface (UI) framework for Java Web applications
  5. 5. Designed much like a “fat” UI framework such as Swing and SWT
  6. 6. First RI released 2002
  7. 7. 1.0 specification released March 2004, not part of J2EE
  8. 8. 1.2 spec released spring 2006
  9. 9. 1.2 is part of J2EE 1.5
  10. 10. Is taking of (maybe) </li></ul>
  11. 11. New in JSF 1.2 <ul><li>JSF and JSF now shares expression language
  12. 12. Missmatch with JSP fixed (new JSP ViewHandler and tag base class)
  13. 13. Works with JSTL forEach
  14. 14. Multiple windows and back-button problems fixed </li></ul>
  15. 15. Implementations and add-ons <ul><li>Major implementations </li><ul><li>SUN RI (1.2)
  16. 16. MyFaces (1.0) </li></ul><li>Component libraries </li><ul><li>Tomahawk
  17. 17. Tobago </li></ul><li>Ajax support </li><ul><li>Ajax4jsf
  18. 18. Dynamic Faces </li></ul><li>JSP alternatives </li><ul><li>Facelets </li></ul></ul>
  19. 19. Core design <ul><li>Build on Model-View-Controller (MVC) pattern
  20. 20. Component based </li><ul><li>standard GUI components (connects view and model)
  21. 21. Loose coupling to models through value- and method-binding technology </li></ul><li>Lifecycle managed </li><ul><li>Clearly defined cycle for request/response handling </li></ul><li>Event driven </li><ul><li>a request triggers event handlers that update models </li></ul><li>Built in navigation model
  22. 22. Not tied to any specific view technology
  23. 23. By design geared at server side execution </li></ul>
  24. 24. Building blocks <f:view> <h:form> <h:outputText value=&quot;#{test2.value}&quot; <h:inputText value=&quot;#{test2.value}&quot; <h:commandButton action=&quot;#{test2.valueUpdated}&quot; </h:form> Submit UIForm <navigation-rule> <navigation-case> <from-outcome>login <to-view-id>/login.jsp Browser JSP Component Tree <faces-config> faces-config Request Response value binding method binding 1. Restore View 2. Apply Request Values 3. Process Validation 4. Update Model Values 5. Invoke Application 6. Render Response UIViewRoot UIOutput UIInput Converter Validator ActionEvent getValue() setValue() valueUpdated() UICommand <managed-bean> <managed-bean-name>test2 <managed-bean-class>Test2 <managed-bean-scope>session RenderKit Navigation Handler Faces Servlet
  25. 25. Configure web application in web.xml <ul><li>Where should state be saved </li></ul><context-param> <param-name>javax.faces.STATE_SAVING_METHOD</param-name> <param-value>client</param-value> </context-param> <ul><li>Add FacesServlet </li></ul><servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <ul><li>Configure mapping </li></ul><servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> </servlet-mapping >
  26. 26. View - JSP <ul><li>Add taglibs </li></ul><%@ taglib uri=&quot;http://java.sun.com/jsf/core&quot; prefix=&quot;f&quot; %> <%@ taglib uri=&quot;http://java.sun.com/jsf/html&quot; prefix=&quot;h&quot;%> <ul><li>Start with <f:view> </li></ul><f:view> <ul><li>Build page with HTML, JSTL and JSF components </li></ul><h:form> <h:outputText value=&quot;#{test2.value}&quot;/> <h:inputText value=&quot;#{test2.value}&quot; id=&quot;name&quot;/> <h:commandButton action=&quot;#{test2.valueUpdated}&quot; value=&quot;Submit&quot;/> </h:form>
  27. 27. Validation - builtin <ul><li>Use builtin validators
  28. 28. Ad an id to enclosing element
  29. 29. Nest validator
  30. 30. Use a message for the element where any errors will appear </li></ul><h:inputText id=&quot;in&quot; value=&quot;#{test2.value}&quot;> <f:validateLength minimum=&quot;2&quot; maximum=&quot;4&quot;/> </h:inputText> <h:message for=&quot;in&quot; />
  31. 31. Validator - custom <ul><li>Implement Validator </li></ul>public void validate(FacesContext, UIComponent comp, Object value) <ul><li>Add to faces-config
  32. 32. Use generic method </li></ul><f:validator validatorId=”my.validator.MYID”/> <f:attribute name=”myValidatorConf” value=”SomeValue”/> <ul><li>Or develop a custom tag
  33. 33. Also possible to do ones own Converters </li></ul>
  34. 34. JSF – Core JSP tags <ul><ul><li>f:actionListener
  35. 35. f:attribute
  36. 36. f:convertDateTime
  37. 37. f:converter
  38. 38. f:convertNumber
  39. 39. f:facet
  40. 40. f:loadBundle
  41. 41. f:param
  42. 42. f:selectItem
  43. 43. f:selectItems
  44. 44. f:subview
  45. 45. f:validateDoubleRange
  46. 46. f:validateLength
  47. 47. f:validateLongRange
  48. 48. f:validator
  49. 49. f:valueChangeListener
  50. 50. f:verbatim
  51. 51. f:view </li></ul></ul>
  52. 52. JSF – HTML JSP tags <ul><ul><li>h:column
  53. 53. h:commandButton
  54. 54. h:commandLink
  55. 55. h:dataTable
  56. 56. h:form
  57. 57. h:graphicImage
  58. 58. h:inputHidden
  59. 59. h:inputSecret
  60. 60. h:inputText
  61. 61. h:inputTextarea
  62. 62. h:message
  63. 63. h:messages
  64. 64. h:outputFormat
  65. 65. h:outputLabel
  66. 66. h:outputLink
  67. 67. h:outputText
  68. 68. h:panelGrid
  69. 69. h:panelGroup
  70. 70. h:selectBooleanCheckbox
  71. 71. h:selectManyCheckbox
  72. 72. h:selectManyListbox
  73. 73. h:selectManyMenu
  74. 74. h:selectOneListbox
  75. 75. h:selectOneMenu
  76. 76. h:selectOneRadio </li></ul></ul>
  77. 77. Managed Beans <ul><li>POJOS
  78. 78. Must be defined in faces-config
  79. 79. Used through value- and method bindings
  80. 80. Created by container
  81. 81. In- and outjection through EL
  82. 82. Inter bean references through EL
  83. 83. May use J2EE annotations for life cycle callback, resource and EJB reference injection
  84. 84. Not yet any annotations to skip faces-config </li></ul>
  85. 85. Managed Beans – WebWork style <ul><li>Same class handles values and action </li></ul>public void setValue(String v) { this.v = v; } public String getValue() { return v; } public String valueUpdated() { return &quot;sucess&quot;; } <ul><li>Just define it by name in faces-config and scope its available in </li></ul></managed-bean> <managed-bean> <managed-bean-name>test2</managed-bean-name> <managed-bean-class>Test2</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean>
  86. 86. Managed Beans – Struts style <ul><li>Entity bean and Business logic separate </li></ul><managed-bean> <managed-bean-name> valueBean </managed-bean-name> <managed-bean-class>Value</managed-bean-class> <managed-bean-scope>none</managed-bean-scope> <ul><li>Used by action target </li></ul><managed-bean> <managed-bean-name>test3</managed-bean-name> <managed-bean-class>enterprise.jsf_jpa_war.Test3</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> <managed-property> <property-name>value</property-name> <value> #{valueBean} </value> </managed-property> <ul><li>JSP </li></ul><h:outputText value=&quot;#{ valueBean.value }&quot;/> <h:commandButton action=&quot;#{ test3.valueUpdated }&quot; value=&quot;Submit&quot;/>
  87. 87. Bindings <ul><li>Bind a value (set or get) </li></ul><h:outputText value=&quot; #{test2.value} &quot;/> <h:inputText id=&quot;in&quot; value=&quot; #{test2.value} &quot;> <ul><li>Bind an ActionEvent </li></ul><h:commandButton action=&quot; #{test2.valueUpdated} &quot; value=&quot;Submit&quot;/> <ul><li>Binding in faces-config </li></ul><value> #{valueBean} </value>
  88. 88. Using JEE 5 Annotations <ul><li>When running in a Java EE 5 container one may use annotations in managed beans to: </li><ul><li>Inject resources and EJB references
  89. 89. Declare life cycle callbacks </li></ul><li>May be used both at attribute and method level </li></ul>public MyClass { private @EJB myEjb; private DataSource ds; @Resource (name=dataSource) public void setDataSource(DataSource ds) {} @PostConstruc t public void init() {} @PreDestroy public void destroy() {} }
  90. 90. Navigation <ul><li>Navigation may be done declaratively or programmatically
  91. 91. Declaratively by declaring navigation rules </li><ul><li>in faces-config </li></ul></ul><navigation-rule> <from-view-id>/test3.jsp</from-view-id> optional/wildcard <navigation-case> <from-action>#{test3.valueUpdated}</from-action> optional <from-outcome>error</from-outcome> <to-view-id>/test2.jsp</to-view-id> <redirect/> optional/clean state <ul><ul><li>and returning strings from actions </li></ul></ul>public String valueUpdated() { if (//Some error) return &quot;error&quot;; else return &quot;sucess&quot;; <ul><li>Programmatically by creating new views with the ViewHandler </li></ul>
  92. 92. Localization <ul><li>Internationalization support built in
  93. 93. A ViewRoot holds a locale </li></ul>UIViewRoot.getLocale() <ul><li>Which locale in use are governed by a combination of </li><ul><li>Browser header Accept-Language
  94. 94. The supported locales configured
  95. 95. A programatically set locale </li></ul><li>Use a ResourceBundle to localized messages
  96. 96. Use converters such as DateTimeConverter to handle localized input </li></ul>
  97. 97. Localization, cont <ul><li>Configure available locales in faces-config.xml </li></ul><application> <locale-config> <default-locale>en</default-locale> <supported-locale>sv</supported-locale> </locale-config> </application> <ul><li>Create resource bundles and make them available in web app classpath (WEB-INF/classes) </li><ul><li>create one bundle for each locale, ie myBundle_en, myBundle_sv
  98. 98. According to doc a “default” bundle should be possible to use, i.e myBundle.properties. That is not my experience. A default en locale but a swedish one available gives the following: </li></ul></ul>curl -v -H &quot;Accept-Language:fr&quot; < Content-Language: en Meddelande 1 <input (from myBundle_sv)
  99. 99. Localization, cont 2 <ul><li>Use <f:loadBundle> in JSP pages to get access to localized messages </li><ul><li>specify bundle name
  100. 100. specify a variable to make bunde available in as a Map
  101. 101. don't use “.” notation for properties/key (conflicts with EL) </li></ul></ul><f:view> <f:loadBundle basename=&quot; com.mypack.mytestres &quot; var=&quot; msg &quot;/> <h:form> <h:outputText value=&quot; #{msg.myKey1} &quot;/> <ul><li>Or access locale and bundle programatically </li></ul>Locale locale = context.getViewRoot().getLocale() ResourceBundle rb = ResourceBundle(“com.mypack.mytestres”, locale); <ul><li>A locale may also be “overridden” in a page by setting the locale of the RootView: </li></ul><f.view locale=”#{profile.locale}”>
  102. 102. Ajax <ul><li>ajax4jsf
  103. 103. https://ajax4jsf.dev.java.net/nonav/ajax/ajax-jsf/
  104. 104. Extension to JSF that adds Ajax support
  105. 105. implemented using a component library that adds AJAX capability to existing pages without writing any JavaScript code
  106. 106. Define events that will be invoked “ajax”-style
  107. 107. Define JSF component that are target of event (repaint) </li></ul>
  108. 108. Ajax - installation <ul><li>Add the following to web.xml: </li></ul><filter> <display-name>Ajax4jsf Filter</display-name> <filter-name>ajax4jsf</filter-name> <filter-class>org.ajax4jsf.Filter</filter-class> </filter> <filter-mapping> <filter-name>ajax4jsf</filter-name> <servlet-name>Faces Servlet</servlet-name> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher> <dispatcher>INCLUDE</dispatcher> </filter-mapping> <ul><li>Add the following jars to WEB-INF/lib </li><ul><li>ajax4jsf
  109. 109. oscache-2.3.2
  110. 110. commons-logging-1.1
  111. 111. commons-collection-3.2
  112. 112. commons-digester-1.8
  113. 113. commons-beanutils-1.7.0 </li></ul></ul>
  114. 114. Ajaxifyed JSF page <%@page contentType=&quot;text/html&quot;%> <%@page pageEncoding=&quot;UTF-8&quot;%> <%@ taglib uri=&quot;https://ajax4jsf.dev.java.net/ajax&quot; prefix=&quot;a4j&quot;%> <%@ taglib uri=&quot;http://java.sun.com/jsf/core&quot; prefix=&quot;f&quot; %> <%@ taglib uri=&quot;http://java.sun.com/jsf/html&quot; prefix=&quot;h&quot;%> <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;> <f:view> <h:form> <h:outputText id=&quot;out&quot; value=&quot;#{test2.value}&quot;/> <h:inputText id=&quot;in&quot; value=&quot;#{test2.value}&quot;> <a4j:support event=&quot;onkeyup&quot; reRender=&quot;out&quot; /> </h:inputText> <h:message for=&quot;in&quot;/> </h:form> </f:view>
  115. 115. Ajax webpage
  116. 116. Facelets <ul><li>https://facelets.dev.java.net/
  117. 117. Facelets, an alternative to JSP
  118. 118. May use JSF 1.2 in a non JSP 2.1 container
  119. 119. Pure XML
  120. 120. Compiles XML to a JSF tree
  121. 121. Easier Tag handlers
  122. 122. May use EL such as #{myBean.value} almost anywhere
  123. 123. Work well with HTML design (xhtml) </li><ul><li>view directly in browser
  124. 124. alias tags (<input type=&quot;text&quot; jsfc=&quot;h:inputText&quot; value=&quot;#{hello.world}&quot; />) </li></ul><li>Several types of support for templating </li><ul><li>ui:composition, ui:define and ui:param
  125. 125. ui:insert and ui:include
  126. 126. xml taglibs </li></ul><li>NetBeans and Facelets: https://nbfaceletssupport.dev.java.net/ </li></ul>
  127. 127. Facelets template <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xmlns:ui=&quot;http://java.sun.com/jsf/facelets &quot;> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot; /> <title>Demo</title> <style type=&quot;text/css&quot;> body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small; } </style> </head> <body> <h1> < ui:insert name=&quot;title&quot; >Default Title</ui:insert> </h1> <p> < ui:insert name=&quot;body&quot; >Default Body</ui:insert> </p> </body> </html>
  128. 128. Facelets example <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xmlns:ui=&quot;http://java.sun.com/jsf/facelets &quot; xmlns:h=&quot;http://java.sun.com/jsf/html &quot;> <body> < ui:composition template=&quot;/template.xhtml &quot;> <ui:define name=&quot;title&quot;> Message: #{myBean.value} </ui:define> <ui:define name=&quot;body&quot;> <h:form id=&quot;helloForm&quot;> <h:inputText type=&quot;text&quot; id=&quot;userNo&quot; value=&quot;#{myBean.value}&quot;/> <br/> <h:commandButton type=&quot;submit&quot; id=&quot;submit&quot; action=&quot;success&quot; value=&quot;Submit&quot; /> <br/> <h:message showSummary=&quot;true&quot; showDetail=&quot;false&quot; style=&quot;color: red; font-weight: bold;&quot; id=&quot;errors1&quot; for=&quot;userNo&quot;/> </h:form> </ui:define> </ui:composition> </body> </html>
  129. 129. Much more possible to do <ul><li>Internationalization
  130. 130. Add your own ActionListener
  131. 131. Work with ValueChangeListeners
  132. 132. Use the PhaseListener API
  133. 133. Write your own UI components
  134. 134. Create new RenderKit </li></ul>
  135. 135. Resources <ul><li>http://java.sun.com/javaee/javaserverfaces/
  136. 136. http://www.exadel.com/tutorial/jsf/jsftags-guide.html
  137. 137. http://myfaces.apache.org
  138. 138. http://www.theserverside.com/news/thread.tss?thread_id=33326 </li></ul>
  139. 139. Stuff to think about <ul><li>* What is JSF?
  140. 140. * How does it work (life cycle, managed beans, ...)?
  141. 141. * Where is the connection between JSP and JSF?
  142. 142. * How does JSF compare to eg Struts or Shale?
  143. 143. * What are Facelets and why does it make sense to use it?
  144. 144. * What tool support exists for JSF?
  145. 145. * How to test/debug JSF?
  146. 146. * JSF and Ajax
  147. 147. Seam
  148. 148. * Seam experiences
  149. 149. * Why the buzz
  150. 150. Design
  151. 151. * Designing EJB 3/J2EE applications
  152. 152. Tool
  153. 153. * Maven 2 vs Ant </li></ul>
  154. 154. Stuff to think about (cont) <ul><li>Testing
  155. 155. * Test roundripp timing
  156. 156. * Cactus vs Embedded
  157. 157. * Tool support
  158. 158. * POJO
  159. 159. * Persistence (DBUnit)'
  160. 160. * Integrations tests
  161. 161. * GUI testing
  162. 162. Production
  163. 163. * JBoss4/JBoss5 problems
  164. 164. * MyFacec/Faces RI
  165. 165. * Support for J2EE 1.5 </li></ul>
  166. 166. mogul .slut på presentation Kontakt: [email_address]

×