0
JSF 2: myth or panacea?
Magic world of user
interfaces

Сергей Моренец
29 августа 2012 г.
Agenda
•
•
•
•
•

The history of Java Web frameworks
JSF specification and roadmap
JSF plugins and extensions
Custom compo...
Distributed App UI History
Imagination
Reality
The history of Java Web
frameworks
The Servlet API
• The introduction in March 1998
• Enabled Java developers to write server-side code for
delivering dynami...
JavaServer Pages
•
•
•
•
•

Released in 1999 by Sun Microsystems
High-level abstraction of Java servlets
Java response to ...
Apache Struts
•
•
•
•
•

Introduced by Apache Foundation in 2000
Implementation of the Model-View-Controller paradigm
Enab...
Spring MVC
•
•
•
•
•

Released under Apache 2.0 license in 2003
Spring response to Struts framework
Tightly coupled to the...
The Birth of JSF
• Created as JSR #127
• Designed by Sun, Oracle, IBM and BEA in May 2001
• J2EE framework for building We...
The JSF Design Goals
• Create a standard UI component framework
• Define a set of lightweight Java classes for UI
componen...
The JSF Design Goals
• Define APIs for input validation, including client-side
validation
• Specify a model for internatio...
History of JSF
• Simple things should be simple. Complex things
should be possible.
Alan Kay
JSF 1.0
• Initial release in March 2004
• Core and performance improvement
• Supports Servlet 2.3 and JSP 1.2
JSF 1.1
• Bugfix release in May 2004
• Performance issues
• Based on J2EE 1.3
JSF 1.2
•
•
•
•
•

Release in May 2006
Fully detached from JSP as view technology
Unified expression language support
Lack...
JSF 2.0
Release in June 2009
JSP replaced by facelets as view technology
Full Ajax support similar to Ajax4jsf
Annotations...
JSF Sample Page
•
•
•
•
•
•
•
•
•
•
•
•
•
•

<html xmlns=http://www.w3.org/1999/xhtml
xmlns:h=http://java.sun.com/jsf/html...
ModelBean.java
public class ModelBean {
private Date currentDate;
private String username;
public Date getCurrentDate() {
...
Configuration file
•
•
•
•
•
•
•
•
•
•
•

•
•
•
•

<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://java...
Component Rendering
Component LifeCycle
Built on JavaBeans
concepts
• UIComponent hierarchy
Properties
Methods
Events
Validators
Convertors
• Event model
Listener...
JSF Implementations

• Oracle reference
implementation
• Sub-project of Glassfish

• UI widgets (MyFaces Tomahawk,
MyFaces...
Mojarra vs. MyFaces performance
Testcase

MyFaces (ms)

Mojarra(ms)

1. JSF Protocol Tests

239

207

2. Full Body
Replace...
Ajax-enabled components and
frameworks
•

•
•
•
•
•
•
•
•

jBoss RichFaces, Ajax-enabled JSF components for layout, file
u...
RichFaces 4
•
•
•
•

•
•

•
•

A full set of AJAX enabled components
Client-side validation
Advanced queuing
Push component upgrades i...
RichFaces Components
• Ajax4JSF
• RichFaces
Ajax4JSF
• Core Ajax functionality
• Page-level Ajax support
• Utility components
Rich components
• Self-contained and advanced UI components
• Extension of standard JSF components
• Pluggable customizati...
A Historical Perspective
• Created as Telamon project in 2005 by Alexander
Smirnov
• Released in 2006 as part of Exadel Vi...
Alexander Smirnov
• Architect of the Jboss Richfaces project
• Java Server Faces expert group member
• Jboss GateIn portal...
RichFaces Team
Client Side Validation
Data Table
Popup Panel
Data Grid
Tree
Rich Editor
Pick List
Push
RichFaces Push
•
•
•
•

Server-side push technique
Based on Atmosphere framework
Client-side support(Comet, HTML5 WebSocke...
RichBean.java
• public Date getDate() {
•
return new Date();
• }
•
• public void push() throws MessageException {
•
TopicK...
Index.html
• <a4j:commandButton value="Push!"
action="#{richBean.push}" />
•
• <a4j:push address="sampleAddress">
•
<a4j:a...
Custom components
design in JSF 1.2
AdvancedDateComponent.java
• public class AdvancedDateComponent extends
UIComponentBase {
•
private HtmlSelectOneMenu dayC...
AdvancedDateComponent.java
public Object getValue() {
ValueExpression _ve = getValueExpression("value");
return (_ve != nu...
AdvancedDateRenderer.java
• public class AdvancedDateRenderer extends Renderer{
•
•
•
•
•
•
•
•

@Override
public void enc...
AdvancedDateRenderer.java
• @Override
• public void decode(FacesContext context,
• UIComponent component) {
• if (componen...
Configuration file
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•

<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http...
Tag configuration file
• <?xml version="1.0"?>
• <facelet-taglib xmlns="http://java.sun.com/JSF/Facelet">
• <namespace>htt...
account.xhtml
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui=http://java.sun.com/jsf/facelets
xmlns:h="http...
Custom components
design in JSF 2.0
Custom components
•
•
•
•

No configuration, XML or otherwise.
No Java code.
To which developers can attach functionality....
compositeDate.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java...
compositeDate.xhtml
<cc:implementation>
<h:panelGrid columns="3">
<h:selectOneMenu value="#{date.day}">
<f:selectItems val...
account.xhtml
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:tr="h...
Disadvantages
Jobs at dice.com
StackOverflow tagged questions
•
•
•
•
•
•

High level of understanding
Limited community support
Lack of books and comprehensive documentation
Multiple ...
Love bug story
• I am migrating from RF 3.3.1 to 4.0. I'm experiencing
an issue with the tooltip component. Specifying
"bo...
Love bug story
• Just in case someone else has the same issue, I've
figured it out. In RF 4, 'bottom-right' positioning is...
Q&A

• Сергей Моренец, morenets@mail.ru
JSF 2: Myth of panacea? Magic world of user interfaces
Upcoming SlideShare
Loading in...5
×

JSF 2: Myth of panacea? Magic world of user interfaces

3,881

Published on

Presentation about JSF 2 framework, his advantages and shortcomings.
Additional information about RichFaces usage

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

No Downloads
Views
Total Views
3,881
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "JSF 2: Myth of panacea? Magic world of user interfaces"

  1. 1. JSF 2: myth or panacea? Magic world of user interfaces Сергей Моренец 29 августа 2012 г.
  2. 2. Agenda • • • • • The history of Java Web frameworks JSF specification and roadmap JSF plugins and extensions Custom components design Q&A
  3. 3. Distributed App UI History
  4. 4. Imagination
  5. 5. Reality
  6. 6. The history of Java Web frameworks
  7. 7. The Servlet API • The introduction in March 1998 • Enabled Java developers to write server-side code for delivering dynamic Web content • Java response to CGI
  8. 8. JavaServer Pages • • • • • Released in 1999 by Sun Microsystems High-level abstraction of Java servlets Java response to PHP Adds tags and expression language Works inside JSP container, which handles all JSP page view requests.
  9. 9. Apache Struts • • • • • Introduced by Apache Foundation in 2000 Implementation of the Model-View-Controller paradigm Enabled actions to support navigation Templates in JSP, XML, Velocity Struts 2 with AJAX and plugins support
  10. 10. Spring MVC • • • • • Released under Apache 2.0 license in 2003 Spring response to Struts framework Tightly coupled to the Spring IOC container Defines strategy interfaces for the responsibilities Supports portlet development
  11. 11. The Birth of JSF • Created as JSR #127 • Designed by Sun, Oracle, IBM and BEA in May 2001 • J2EE framework for building Web applications
  12. 12. The JSF Design Goals • Create a standard UI component framework • Define a set of lightweight Java classes for UI components, component state, and input events • Provide a set of common UI components • Provide a JavaBeans model for dispatching events from client-side UI controls to server-side application behavior
  13. 13. The JSF Design Goals • Define APIs for input validation, including client-side validation • Specify a model for internationalization and localization • Automatic support of all available client configuration data, such as the browser version • Support Web Accessibility Initiative (WAI)
  14. 14. History of JSF • Simple things should be simple. Complex things should be possible. Alan Kay
  15. 15. JSF 1.0 • Initial release in March 2004 • Core and performance improvement • Supports Servlet 2.3 and JSP 1.2
  16. 16. JSF 1.1 • Bugfix release in May 2004 • Performance issues • Based on J2EE 1.3
  17. 17. JSF 1.2 • • • • • Release in May 2006 Fully detached from JSP as view technology Unified expression language support Lack of Ajax out-of-box support Core part of J2EE 5
  18. 18. JSF 2.0 Release in June 2009 JSP replaced by facelets as view technology Full Ajax support similar to Ajax4jsf Annotations and convention-over-configuration invention • New conversation scope • • • •
  19. 19. JSF Sample Page • • • • • • • • • • • • • • <html xmlns=http://www.w3.org/1999/xhtml xmlns:h=http://java.sun.com/jsf/html xmlns:f="http://java.sun.com/jsf/core"> <h:body> <h:form> <h2>A Simple JSF Page</h2> <h:outputText value="#{modelBean.currentDate}"> <f:convertDateTime type="both" timeZone="#{userLocale.timeZone}" /> </h:outputText> <h:inputText value="#{modelBean.username}"/> <h:commandButton value="Click Here"/> </h:form> </h:body> </html>
  20. 20. ModelBean.java public class ModelBean { private Date currentDate; private String username; public Date getCurrentDate() { return currentDate; } public void setCurrentDate(Date currentDate) { this.currentDate = currentDate; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } }
  21. 21. Configuration file • • • • • • • • • • • • • • • <?xml version="1.0" encoding="UTF-8"?> <faces-config xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd" version="2.0"> <application> <message-bundle>message</message-bundle> </application> <managed-bean> <managed-bean-name>modelBean</managedbean-name> <managed-beanclass>org.mycompany.ModelBean</managed-bean-class> <managed-bean-scope>session</managed-beanscope> </managed-bean> </faces-config>
  22. 22. Component Rendering
  23. 23. Component LifeCycle
  24. 24. Built on JavaBeans concepts • UIComponent hierarchy Properties Methods Events Validators Convertors • Event model Listener classes Event objects • Page navigation
  25. 25. JSF Implementations • Oracle reference implementation • Sub-project of Glassfish • UI widgets (MyFaces Tomahawk, MyFaces Trinidad, MyFaces Tobago) • Extension packages to (MyFaces Orchestra, MyFaces Extensions Validator, MyFaces Extensions CDI) • Integration modules ( MyFaces Portlet Bridge)
  26. 26. Mojarra vs. MyFaces performance Testcase MyFaces (ms) Mojarra(ms) 1. JSF Protocol Tests 239 207 2. Full Body Replacement 42 35 4134 4426 24 34 5. Double Eval Detection 2047 2060 6. Table Test, replacement of table elements 7289 9229 6. Partial Page Rendering Nav Case 2168 2308 7. Event Lifecycle test 130 131 3. Multi form situation 4. Testing for decorated api calls
  27. 27. Ajax-enabled components and frameworks • • • • • • • • • jBoss RichFaces, Ajax-enabled JSF components for layout, file upload, forms, inputs and many other features. ICEfaces, open-source, Java JSF extension framework and rich components, Ajax without JavaScript PrimeFaces Ajax framework with JSF components Oracle ADF Faces Rich Client, Oracle Application Development Framework Backbase Enterprise Ajax — JSF Edition, Ajax framework IBM Lotus Notes - XPages MyFaces, The Apache Foundation JSF implementation with Ajax components Sun Java BluePrints AJAX Components ZK Ajax framework with JSF components
  28. 28. RichFaces 4
  29. 29. • • • • • • • • A full set of AJAX enabled components Client-side validation Advanced queuing Push component upgrades including JavaMessaging Service (JMS) integrations Component Development Kit (CDK). Comprehensive documentation covering development best practices, and component details. Detailed and automated testing facilities for components, actions, listeners, and pages. Broad cross-browser support
  30. 30. RichFaces Components • Ajax4JSF • RichFaces
  31. 31. Ajax4JSF • Core Ajax functionality • Page-level Ajax support • Utility components
  32. 32. Rich components • Self-contained and advanced UI components • Extension of standard JSF components • Pluggable customization though Ajax support
  33. 33. A Historical Perspective • Created as Telamon project in 2005 by Alexander Smirnov • Released in 2006 as part of Exadel Visual Component Platform • Split into open-source Ajax4jsf and commercial RichFaces in 2006 • Made open-source in 2007 as Jboss Ajax4jsf and Jboss RichFaces • Merged as single RichFaces product in September 2007
  34. 34. Alexander Smirnov • Architect of the Jboss Richfaces project • Java Server Faces expert group member • Jboss GateIn portal developer
  35. 35. RichFaces Team
  36. 36. Client Side Validation
  37. 37. Data Table
  38. 38. Popup Panel
  39. 39. Data Grid
  40. 40. Tree
  41. 41. Rich Editor
  42. 42. Pick List
  43. 43. Push
  44. 44. RichFaces Push • • • • Server-side push technique Based on Atmosphere framework Client-side support(Comet, HTML5 WebSockets) Integration with Java Messaging Service
  45. 45. RichBean.java • public Date getDate() { • return new Date(); • } • • public void push() throws MessageException { • TopicKey topicKey = new TopicKey("sampleAddress"); • TopicsContext topicsContext = TopicsContext.lookup(); • • topicsContext.publish(topicKey, "empty message"); • }
  46. 46. Index.html • <a4j:commandButton value="Push!" action="#{richBean.push}" /> • • <a4j:push address="sampleAddress"> • <a4j:ajax event="dataavailable" render="outputDate" /> • </a4j:push> • • <a4j:outputPanel id="outputDate"> • Date: #{richBean.date} • </a4j:outputPanel>
  47. 47. Custom components design in JSF 1.2
  48. 48. AdvancedDateComponent.java • public class AdvancedDateComponent extends UIComponentBase { • private HtmlSelectOneMenu dayCmb; • private HtmlSelectOneMenu monthCmb; • private HtmlSelectOneMenu yearCmb; • • • • @Override public String getFamily() { return "advanced.Date"; } • • • • • @Override public String getRendererType() { return "renderer.advanced.Date"; }
  49. 49. AdvancedDateComponent.java public Object getValue() { ValueExpression _ve = getValueExpression("value"); return (_ve != null) ? _ve.getValue(getFacesContext().getELContext()) : null; } public void setSubmittedValue(FacesContext context) { Map<String, String> requestParameterValuesMap = context.getExternalContext(). getRequestParameterMap(); String day = requestParameterValuesMap.get(dayCmb.getClientId(context)); String month = requestParameterValuesMap.get(monthCmb.getClientId(context)); String year = requestParameterValuesMap.get(yearCmb.getClientId(context)); Calendar calendar = Calendar.getInstance(); calendar.set(Integer.valueOf(year), Integer.valueOf(month) - 1, Integer.valueOf(day)); } ValueExpression ve = getValueExpression(“value”); ve.setValue(getFacesContext().getELContext(), calendar.getTime());
  50. 50. AdvancedDateRenderer.java • public class AdvancedDateRenderer extends Renderer{ • • • • • • • • @Override public void encodeBegin(FacesContext context, UIComponent component) throws IOException { if(component instanceof AdvancedDateComponent) { CompositeDateComponent dateComponent = (CompositeDateComponent)component; dateComponent.refresh(); dateComponent.updateComponents(); }
  51. 51. AdvancedDateRenderer.java • @Override • public void decode(FacesContext context, • UIComponent component) { • if (component instanceof AdvancedDateComponent) { • AdvancedDateComponent dateComponent = (AdvancedDateComponent) component; • dateComponent.refresh(); • dateComponent.setSubmittedValue(context); • }}}
  52. 52. Configuration file • • • • • • • • • • • • • • • • • • • <?xml version="1.0" encoding="UTF-8"?> <faces-config xmlns="http://java.sun.com/xml/ns/javaee"> <component> <display-name>advancedDate</display-name> <component-type>advanced.Date</component-type> <component-class>org.test.component.AdvancedDateComponent </component-class> <component-extension> <renderer-type>renderer.advanced.Date</renderer-type> </component-extension> </component> <render-kit> <renderer> <component-family>advanced.Date</component-family> <renderer-type>renderer.advanced.Date</renderer-type> <renderer-class>org.test.component.AdvancedDateRenderer</rendererclass> </renderer> </render-kit> </faces-config>
  53. 53. Tag configuration file • <?xml version="1.0"?> • <facelet-taglib xmlns="http://java.sun.com/JSF/Facelet"> • <namespace>http://test.org/web/tags</namespace> <tag> <tag-name>advancedDate</tag-name> <component> <componenttype>advanced.Date</component-type> • <renderertype>renderer.advanced.Date</renderer-type> • </component> • </tag> • • • • • </facelet-taglib>
  54. 54. account.xhtml <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui=http://java.sun.com/jsf/facelets xmlns:h="http://java.sun.com/jsf/html" xmlns:web="http://test.org/web/tags"> <h:outputText value="#{msg['account.birthdate']}" /> <web:compositeDate value=“#{account.birthDate}" /> </ui:composition>
  55. 55. Custom components design in JSF 2.0
  56. 56. Custom components • • • • No configuration, XML or otherwise. No Java code. To which developers can attach functionality. Hot-deploy.
  57. 57. compositeDate.xhtml <html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:cc="http://java.sun.com/jsf/composite"> <cc:interface> <cc:attribute name="birthDate" shortDescription="Value of the component" /> <cc:attribute name="days" shortDescription="List of SelectItem objects representing days" /> <cc:attribute name="months" shortDescription="List of SelectItem objects representing months" /> <cc:attribute name="years" shortDescription="List of SelectItem objects representing years" /> </cc:interface>
  58. 58. compositeDate.xhtml <cc:implementation> <h:panelGrid columns="3"> <h:selectOneMenu value="#{date.day}"> <f:selectItems value="#{days}" /> </h:selectOneMenu> <h:selectOneMenu value="#{date.month}"> <f:selectItems value="#{months}" /> </h:selectOneMenu> <h:selectOneMenu value="#{date.year}"> <f:selectItems value="#{years}" /> </h:selectOneMenu> </h:panelGrid> </cc:implementation> </html>
  59. 59. account.xhtml <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:tr="http://java.sun.com/jsf/composite/trai ner"> <h:outputText value="#{msg['account.birthdate']}" /> <tr:compositeDate date=“#{account.birthDate}" days="#{days}" months="months" years="#{years}" /> </ui:composition>
  60. 60. Disadvantages
  61. 61. Jobs at dice.com
  62. 62. StackOverflow tagged questions
  63. 63. • • • • • • High level of understanding Limited community support Lack of books and comprehensive documentation Multiple resource-consuming dependencies Performance overhead Migration issues between RF3 and RF4
  64. 64. Love bug story • I am migrating from RF 3.3.1 to 4.0. I'm experiencing an issue with the tooltip component. Specifying "bottom-left" for the direction attribute results in the following error: • javax.el.ELException: Cannot convert bottom-left of type class java.lang.String to class org.richfaces.component.Positioning • Was this attribute implemented in 4.0? Am I doing something wrong?
  65. 65. Love bug story • Just in case someone else has the same issue, I've figured it out. In RF 4, 'bottom-right' positioning is no longer valid. You have to use 'bottomRight'. I am completely shocked that none of these changes have made it to their online documentation. I have wasted time trying to figure out what was happening with this component. I cannot believe users are expected to go to the API JavaDocs and look through each class for possible attribute values. • • If any RichFaces guys read this, please either update the online documentation or remove it. There are way too many components in there with information that has not been updated and is just plain wrong
  66. 66. Q&A • Сергей Моренец, morenets@mail.ru
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×