Download - JSF2
![Page 1: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/1.jpg)
JSF 2: миф или панацея?Магический мир пользовательских
интерфейсов.
Сергей Моренец29 августа 2012 г.
![Page 2: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/2.jpg)
Agenda
• The history of Java Web frameworks• JSF specification and roadmap• JSF plugins and extensions• Custom components design• Q & A
![Page 3: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/3.jpg)
Distributed App UI History
![Page 4: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/4.jpg)
![Page 5: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/5.jpg)
Imagination
![Page 6: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/6.jpg)
Reality
![Page 7: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/7.jpg)
The history of Java Web frameworks
![Page 8: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/8.jpg)
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
![Page 9: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/9.jpg)
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.
![Page 10: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/10.jpg)
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
![Page 11: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/11.jpg)
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
![Page 12: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/12.jpg)
The Birth of JSF• Created as JSR #127• Designed by Sun, Oracle, IBM and BEA in May 2001• J2EE framework for building Web applications
![Page 13: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/13.jpg)
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
![Page 14: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/14.jpg)
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)
![Page 15: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/15.jpg)
History of JSF
• Simple things should be simple. Complex things should be possible.
Alan Kay
![Page 16: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/16.jpg)
JSF 1.0• Initial release in March 2004• Core and performance improvement• Supports Servlet 2.3 and JSP 1.2
![Page 17: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/17.jpg)
JSF 1.1• Bugfix release in May 2004• Performance issues• Based on J2EE 1.3
![Page 18: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/18.jpg)
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
![Page 19: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/19.jpg)
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
![Page 20: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/20.jpg)
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>
![Page 21: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/21.jpg)
ModelBean.javapublic 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;
}
}
![Page 22: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/22.jpg)
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</managed-bean-name>• <managed-bean-class>org.mycompany.ModelBean</managed-
bean-class>• <managed-bean-scope>session</managed-bean-scope>• </managed-bean>• </faces-config>
![Page 23: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/23.jpg)
Component Rendering
![Page 24: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/24.jpg)
Component LifeCycle
![Page 25: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/25.jpg)
Built on JavaBeans concepts
• UIComponent hierarchyPropertiesMethodsEventsValidatorsConvertors• Event modelListener classesEvent objects• Page navigation
![Page 26: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/26.jpg)
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)
![Page 27: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/27.jpg)
Mojarra vs. MyFaces performance
Testcase MyFaces (ms) Mojarra(ms)
1. JSF Protocol Tests 239 207
2. Full Body Replacement 42 35
3. Multi form situation 4134 4426
4. Testing for decorated api calls 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
![Page 28: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/28.jpg)
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
![Page 29: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/29.jpg)
RichFaces 4
![Page 30: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/30.jpg)
• 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
![Page 31: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/31.jpg)
RichFaces Components
• Ajax4JSF • RichFaces
![Page 32: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/32.jpg)
Ajax4JSF• Core Ajax functionality• Page-level Ajax support• Utility components
![Page 33: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/33.jpg)
Rich components• Self-contained and advanced UI components• Extension of standard JSF components• Pluggable customization though Ajax support
![Page 34: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/34.jpg)
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
![Page 35: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/35.jpg)
Alexander Smirnov• Architect of the Jboss Richfaces project• Java Server Faces expert group member• Jboss GateIn portal developer
![Page 36: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/36.jpg)
RichFaces Team
![Page 37: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/37.jpg)
Client Side Validation
![Page 38: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/38.jpg)
Data Table
![Page 39: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/39.jpg)
Popup Panel
![Page 40: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/40.jpg)
Data Grid
![Page 41: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/41.jpg)
Tree
![Page 42: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/42.jpg)
Rich Editor
![Page 43: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/43.jpg)
Pick List
![Page 44: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/44.jpg)
Push
![Page 45: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/45.jpg)
RichFaces Push• Server-side push technique• Based on Atmosphere framework• Client-side support(Comet, HTML5
WebSockets)• Integration with Java Messaging Service
![Page 46: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/46.jpg)
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"); • }
![Page 47: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/47.jpg)
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>
![Page 48: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/48.jpg)
Custom componentsdesign in JSF 1.2
![Page 49: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/49.jpg)
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";• }•
![Page 50: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/50.jpg)
AdvancedDateComponent.javapublic 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()); }
![Page 51: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/51.jpg)
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();• }
![Page 52: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/52.jpg)
AdvancedDateRenderer.java• @Override • public void decode(FacesContext context,• UIComponent component) {
• if (component instanceof AdvancedDateComponent) {
• AdvancedDateComponent dateComponent = (AdvancedDateComponent) component;
• dateComponent.refresh();• dateComponent.setSubmittedValue(context);• }}}
![Page 53: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/53.jpg)
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</renderer-
class> • </renderer> • </render-kit>• </faces-config>
![Page 54: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/54.jpg)
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>• <component-type>advanced.Date</component-
type>•
<renderer-type>renderer.advanced.Date</renderer-type>• </component>• </tag>
• </facelet-taglib>
![Page 55: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/55.jpg)
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>
![Page 56: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/56.jpg)
Custom components design in JSF 2.0
![Page 57: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/57.jpg)
Custom components
• No configuration, XML or otherwise.• No Java code.• To which developers can attach functionality.• Hot-deploy.
![Page 58: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/58.jpg)
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>
![Page 59: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/59.jpg)
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>
![Page 60: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/60.jpg)
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/
trainer">
<h:outputText value="#{msg['account.birthdate']}" /> <tr:compositeDate date=“#{account.birthDate}" days="#{days}" months="months" years="#{years}" />
</ui:composition>
![Page 61: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/61.jpg)
Disadvantages
![Page 62: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/62.jpg)
Jobs at dice.com
![Page 63: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/63.jpg)
StackOverflow tagged questions
![Page 64: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/64.jpg)
• 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
![Page 65: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/65.jpg)
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?
![Page 66: JSF2](https://reader036.vdocuments.site/reader036/viewer/2022081602/554fb830b4c9053d018b45e6/html5/thumbnails/66.jpg)
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