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

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 components design
Q&A

The history of Java Web
frameworks

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

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.

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

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

The Birth of JSF
• Created as JSR #127
• Designed by Sun, Oracle, IBM and BEA in May 2001
• J2EE framework for building Web applications

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

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)

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 of Ajax out-of-box support
Core part of J2EE 5

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
•
•
•
•

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>

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;
}
}

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>

Built on JavaBeans
concepts
• UIComponent hierarchy
Properties
Methods
Events
Validators
Convertors
• Event model
Listener classes
Event objects
• Page navigation

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)

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

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

•
•
•
•

•
•

•
•

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

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 customization though Ajax support

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

Alexander Smirnov
• Architect of the Jboss Richfaces project
• Java Server Faces expert group member
• Jboss GateIn portal developer

RichFaces Push
•
•
•
•

Server-side push technique
Based on Atmosphere framework
Client-side support(Comet, HTML5 WebSockets)
Integration with Java Messaging Service

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");
• }

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>

Custom components
design in JSF 1.2

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";
}

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());

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();
}

AdvancedDateRenderer.java
• @Override
• public void decode(FacesContext context,
• UIComponent component) {
• if (component instanceof
AdvancedDateComponent) {
• AdvancedDateComponent dateComponent =
(AdvancedDateComponent) component;
• dateComponent.refresh();
• dateComponent.setSubmittedValue(context);
• }}}

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>

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>

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>

Custom components
design in JSF 2.0

Custom components
•
•
•
•

No configuration, XML or otherwise.
No Java code.
To which developers can attach functionality.
Hot-deploy.

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>

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>

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>

StackOverflow tagged questions

•
•
•
•
•
•

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

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?

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

Q&A

• Сергей Моренец, morenets@mail.ru

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

More Related Content

What's hot (20)

Viewers also liked (17)

Similar to JSF 2: Myth of panacea? Magic world of user interfaces (20)

Recently uploaded (20)

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