Go Fullstack: JSF for Public Sites (CONFESS 2013)


Published on

Slides for session Go Fullstack: JSF for public sites by Michael Kurz held at the CONFESS 2013 in Vienna/Austria. This is an updated version of the same session held at CONFESS 2012 including JSF 2.2 view actions.

The examples for this session can be found at https://github.com/jsflive (see slides for details).

Published in: Technology
1 Like
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Go Fullstack: JSF for Public Sites (CONFESS 2013)

  1. 1. No mountains this year, but still snow...Go Fullstack: JSF for public sitesMichael Kurz | IRIAN
  2. 2. Agenda• Motivation• Architecture with/without EE 6 container• Putting the pieces together (CDI and CODI)• JSF and GET-Requests• RESTful URLs with JSF and PrettyFaces• Demonstrations and examples
  3. 3. Motivation• http://scientific-consensus.com• From GWT to JavaServer Faces• Lightweight Java EE 6 architecture• Does JSF really support HTTP GET?
  4. 4. Architecture and Technology Stack Architecture With EE 6 container No EE 6 container Presentation JSF, CDI, CODI JSF, CDI, CODI Service EJB, CDI CDI, CODI Data access EJB, JPA CDI, CODI, JPA
  5. 5. MyFaces Extensions CDI• Portable extension of CDI• Simplifies development with CDI and JSF• Several modules: • JSF 1.2 and 2.x • JPA, Bean Validation...• Works with: • CDI: OpenWebBeans, Weld • JSF: MyFaces, Mojarra (1.2, 2.0 and 2.1)• Watch out for Apache DeltaSpike
  6. 6. Management of Persistence Context• With Java EE container (EJB) @javax.ejb.Stateless public class CustomerRepository { @PersistenceContext private EntityManager em; }• Without Java EE container (CDI + CODI) @ApplicationScoped public class CustomerRepository { @Inject private EntityManager em; }
  7. 7. Transaction Management• With Java EE container • Transactions managed by container (@TransactionAttribute)• Without Java EE container (CDI only) • Transactions managed by CODI @ApplicationScoped public class CustomerService { @Inject private CustomerRepository customerRepository; @Transactional public void saveUser(User user) {...} }
  8. 8. Demonstration• Architecture with CDI and CODIExample: https://github.com/jsflive/mymail-get
  9. 9. The Web versus JSF vs. HTTP GET HTTP POST
  10. 10. JSF requests• HTTP requests in classic JSF page1.xhtml page2.xhtml page3.xhtml GET POST POST /faces/page1.jsf /faces/page1.jsf /faces/page2.jsf• Problems with HTTP POST: • Page reload problematic • URL in browser one step behind • Lack of bookmarkability/direct linking• JSF 2: h:link, h:button and view parameters
  11. 11. JSF 2: Navigation with h:link and h:button• Navigation target in attribute outcome <h:link outcome="/page1.xhtml" value="Page 1"/> <h:link outcome="/page2.xhtml" value="Page 2"> <f:param name="para" value="1"/> </h:link> <h:button outcome="/page3.xhtml" value="Page 3"/>• Renders link or button (h:form not necessary) <a href="/page1.jsf">Page 1</a> <a href="/page2.jsf?para=1">Page 2</a> <input type="button" value="Page 3" onclick="window.location.href = /pag3.jsf"/>
  12. 12. JSF 2: View Parameters• Bind request parameters to bean properties• Tag f:viewParam in f:metadata <f:metadata> <f:viewParam name="id" value="#{myBean.id}"/> </f:metadata> Converted and @Named @RequestScoped validated public class MyBean { private long id; public long getId() {return id;} public void setId(long id) {this.id = id;} }
  13. 13. "View actions" in JSF < 2.2• JSF 2.0 "forgot" about view actions• (JSF) Alternative: PreRenderViewEvent <f:event type="preRenderView" listener="#{bean.preRender}"/>• Listener method for system event public void preRender(ComponentSystemEvent event) { mail = mailService.findById(id); }• Alternative: CODI @PreRenderView
  14. 14. View actions in JSF 2.2• Real view actions part of JSF 2.2 <f:metadata> <f:viewParam name="id" value="#{bean.id}"/> <f:viewAction action="#{bean.load}" onPostback="false" phase="INVOKE_APPLICATION"/> </f:metadata>• Normal action method public String load() { mail = mailService.findById(id); return null; }
  15. 15. Post-Redirect-Get with JSF 2• Request /faces/myPage.xhtml?id=1 <h:form> <h:commandButton action="#{myBean.save}" value="Save"/> <h:commandButton value="Cancel" immediate="true" action="myPage?faces-redirect=true&amp; faces-include-view-params=true"/> </h:form> @Named @RequestScoped public class MyBean { public String save() { return "myPage?faces-redirect=true" + "&faces-include-view-params=true"; } }
  16. 16. Demonstration• GET requests with h:link and h:button• View Parameters and JSF 2.2 view actions• Post-Redirect-Get with JSFExample: https://github.com/jsflive/jsf-get-examples (jsf-get02-jsf22)
  17. 17. RESTful URLs http://myshop.at/node.html?mode=list&cat=1234 http://myshop.at/products/books
  18. 18. Why RESTful URLs?• Readability• Search Engine Optimization (SEO)• Confidence• Looks prettier
  19. 19. RESTful URLs for JSF• PrettyFaces: RESTful URLS for JSF • By OCPsoft, Open Source• Features: • URL Rewriting • Enhanced navigation • Page actions • Seamless integration into JSF • Easy configuration
  20. 20. PrettyFaces: Example 1 (1)• Remove "JSF parts" of URL http://myshop.at/faces/account.xhtml http://myshop.at/account
  21. 21. PrettyFaces: Example 1 (2)• Configuration in pretty-config.xml <url-mapping id="account"> <pattern value="/account"/> <view-id value="/faces/account.xhtml"/> </url-mapping>• Annotation based configuration @Named @RequestScoped @URLMapping(id="account", pattern="/account", viewId="/faces/account.xhtml") public class AccountPage {}
  22. 22. PrettyFaces: Example 2 (1)• Map part of URL to parameter http://myshop.at/faces/products/details.xhtml?id=123 http://myshop.at/product/123
  23. 23. PrettyFaces: Example 2 (2)• Configuration in pretty-config.xml <url-mapping id="productDetails"> <pattern value="/product/#{id}"/> <view-id value="/faces/products/details.xhtml"/> </url-mapping>• Path parameter used in view parameter <f:metadata> <f:viewParam name="id" value="#{bean.id}"/> </f:metadata> <f:event type="preRenderView" listener="#{bean.preRender}"/>
  24. 24. Demonstration• PrettyFacesExample: https://github.com/jsflive/jsf-get-examples (jsf-get03)
  25. 25. Conclusion• Lightweight Architecture with Java EE 6• JSF 2 simplifies GET support• JSF 2.2 adds view actions• PrettyFaces• Necessary for the intranet?
  26. 26. Curious?• Kurz, Marinschek, Müllan: JavaServer Faces 2.0, dpunkt.Verlag• IRIAN JSF@Work Online-Tutorial http://jsfatwork.irian.at• JSFlive Weblog http://jsflive.wordpress.com