Comparison of AJAX JSF Libraries Functionality and Interoperability

103 Pages·2011·1.63 MB·English

by  Pavol Pitonak

MASARYK UNIVERSITY
FACULTY OF INFORMATICS
}w(cid:1)(cid:2)(cid:3)(cid:4)(cid:5)(cid:6)(cid:7)(cid:8)(cid:10)(cid:11)(cid:12)(cid:13)(cid:14)(cid:16)(cid:17)(cid:18)(cid:19)(cid:20)(cid:21)(cid:22)(cid:23)(cid:24)(cid:25)(cid:26)(cid:31) !"#$%&’()+,-./012345<yA|
Comparison of AJAX JSF Libraries
Functionality and Interoperability
DIPLOMA THESIS
Bc. Pavol Pitonˇák
Brno,June2011
Declaration
HerebyIdeclare,thatthispaperismyoriginalauthorialwork,whichIhaveworkedoutby
myown. Allsources, referencesand literatureused orexcerptedduring elaborationof this
workareproperlycitedandlistedincompletereferencetotheduesource.
Bc.PavolPitonˇák
Advisor: Mgr.MarekGrác
ii
Acknowledgement
I would like to thank my supervisor, Mgr. Marek Grác, my consultant, Ing. Jirˇí Pechanec,
and RichFaces team, especially Lukáš Frycˇ, for their guidance and support throughout my
workonthisthesis.
Many thanks also go to my family, girlfriend, and close friends who supported me while
workingonthisthesis.
iii
Abstract
This thesis compares functionality of four popular JavaServer Faces component libraries—
RichFaces, ICEfaces, OpenFaces, and PrimeFaces. This thesis demonstrates differences be-
tween them, highlights their unique features, and research their interoperability. A demo
applicationthatwoulddemonstrateinteroperabilityoftheselibrariesiscreatedasapartof
thethesis.
iv
Keywords
Java Server Faces, JSF, RichFaces, ICEfaces, PrimeFaces, interoperability, web framework,
RichInternetApplications
v
Contents
1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
2 TheJavaServerFacesFramework . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.1 HistoryofJavaServerFaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.2 KeyTerms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.3 JSFApplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.4 TheRequestProcessingLifecycle . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.5 TheNavigationModel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.6 ManagedBeansandScopes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.7 TheFaceletsViewDeclarationLanguage . . . . . . . . . . . . . . . . . . . . . 12
2.8 CompositeComponents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.9 ResourceHandling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.10 ComponentLibraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3 AjaxandCoreComponents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.1 AjaxinJSF2andinComponentLibraries . . . . . . . . . . . . . . . . . . . . . 18
3.2 Region . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
3.3 CommandButtonandCommandLink . . . . . . . . . . . . . . . . . . . . . . . 21
3.4 JavaScriptFunction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
3.5 Queue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
3.6 Status . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
3.7 Poll . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
3.8 Push . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
4 InputComponents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
4.1 Calendar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
4.2 InplaceInputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
4.3 Autocomplete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
4.4 Slider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
4.5 Spinner . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
4.6 FileUpload. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
5 OutputComponents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
5.1 ProgressBar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
5.2 Tree . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
6 Panels. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
6.1 PanelsinRichFaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
6.2 PanelsinPrimeFaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
6.3 PanelsinOpenFaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
6.4 PanelsinICEfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
7 IterationComponents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
7.1 RichFacesRepeat,ListandDataGrid. . . . . . . . . . . . . . . . . . . . . . . . 57
7.2 RichFacesDataTable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
vi
7.3 RichFacesExtendedDataTable . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
7.4 RichFacesDataScroller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
7.5 OpenFacesForEach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
7.6 OpenFacesDataTable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
7.7 PrimeFacesDataGrid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
7.8 PrimeFacesDataList . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
7.9 PrimeFacesDataTable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
7.10 ICEfacesDataTable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
8 Charts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
8.1 ChartsinPrimeFaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
8.2 ChartsinOpenFaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
8.3 ChartsinICEfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
9 Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
9.1 FacesValidation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
9.2 BeanValidation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
9.3 ClientSideValidation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
9.4 Cross-fieldValidation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
9.5 Messages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
9.6 Captcha . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
10 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Bibliography . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
A SampleUseofRichFacesSubTable . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
B SampleUseofSortinginRichFacesTable . . . . . . . . . . . . . . . . . . . . . . . 94
C MetamerScreenshot . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
D ContentsofAttachedCD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
vii
1 Introduction
Rich Internet Applications (RIA) became extremely popular in last couple of years. A Rich
Internet Application is a web application that has many of the characteristics of a desktop
application, typically delivered either by way of a site-specific browser, via a browser plu-
gin,independentsandboxes,orvirtualmachines.[1]Thethreemostcommonplatformsare
AdobeFlash,MicrosoftSilverlightandJava.Althoughalltheseplatformsaremature,stable
and widespread, their biggest disadvantage is that they all depend on plugins installed in
user’swebbrowser.
Ontheotherhand,newwebstandardssuchasHTML5arebeingdevelopedinordertopro-
videadvancedfeaturesneedbyRIAsout-of-the-box.HTML5willcontainnewelementsfor
handlingmultimedia(videoandaudio),acanvaselementandimprovedintegrationofSVG
content. Next, there are planned new semantic elements for page header, articles and sec-
tions.SeveralnewAPIsareabouttobeintroducedforofflinestoragedatabase(alsoknown
as Web Storage), drag-and-drop, geolocation, indexed database, an API for handling file
uploads and file manipulation, and many more. Although latest versions of most popu-
lar browsers, namely Google Chrome, Mozilla Firefox, Apple Safari and Microsoft Internet
Explorer support many HTML 5 features, it is expected to become a standard in 2014.[2]
Therefore, most of modern web frameworks uses a mixture of HTML 4 and some propri-
etarytechnologiessuchasAdobeFlashorMicrosoftSilverlight.
IntheJavaworld,thereareseveralwebframeworksandstandardsforcreatingrichinternet
applications.InMarch1998,theJavaServletAPIwasintroduced.Priortoservlets,Javawas
not widelyused asa server-sidetechnology for webapplications. Unlikeother proprietary
webserverAPIs,theJavaServletAPIprovidedanobject-orienteddesignapproachandwas
abletorunonanyplatformwhereJavawassupported.SincetheJavaServletAPIprovided
a low-level handling of HTTP requests, it was tedious and error-prone to generate HTML,
e.g.:
out.println("<img id=\"cat\" src=\"cat.png\"/>");
1
Noticehowthequotesymbols(”)havetobeescaped.
Because of above-mentioned problems of the Java Servlet API, a new technology called
JavaServerPages(JSP)wasintroduced.JSPwasbuiltontopofservletsandprovidedasim-
pler solution to generating large amounts of dynamic HTML. JSP were using a mix of two
basic content forms, scriptlets and markup. Markup is typically HTML with some special
JSP tags, while scriptlets are blocks of Java code. When a page is requested, it is translated
into servlet code that is then compiled and immediately executed. Subsequent requests to
the same page simply invoke generated servlet for the page. Simple page might look like
this:
<%@ page errorPage="myerror.jsp" %>
1
1
1. INTRODUCTION
<%@ page import="com.foo.bar" %>
2
<html>
3
<body>
4
<%! int serverInstanceVariable = 1;%>
5
<% int localStackBasedVariable = 1; %>
6
<table>
7
<tr>
8
<td>
9
<%= toStringOrBlank( "expanded inline data " + 1 ) %>
10
</td>
11
</tr>
12
</table>
13
...
14
The Java Platform, Enterprise Edition (J2EE, later renamed to JEE) contained both Servlet
APIandJavaServerPagesrightfromthefirstversion.
AlthoughJSPwasanimprovement,itwasnotacompletesolution.Developersusedtouse
alotofJavacodeinJSPsmakingthemhardtomaintain.Thus,someseparationofapplica-
tionlogicandviewwasneeded.Whatwasneededwasanimplementationofmodel-view-
controller design pattern. The model-view-controller (MVC) was first described in 1979 by
Trygve Reenskaug.[3] The MVC pattern separates the modeling of the domain, the presen-
tation,andtheactionsbasedonuserinputintothreeseparateclasses:[4]
• model—manages the behavior and data of the application domain, responds to re-
questsforinformationaboutitsstate(usuallyfromtheview),andrespondstoinstruc-
tionstochangestate(usuallyfromthecontroller);
• view—managesthedisplayofinformation;and
• controller—interprets the mouse and keyboard inputs from the user, informing the
modeland/ortheviewtochangeasappropriate.
Because of above mentioned issues with JSP and the need of MVC, several web frame-
workswerecreated.Theycouldbedividedintotwomajorgroupsbyaparadigmtheyuse–
request based (e.g. Struts or Stripes) and component based (e.g. Wicket, Tapestry, Google
WebToolkitandJavaServerFaces).Arequestbasedframeworkbasicallygetsuser’srequest,
thendetermineswhattheapplicationshoulddoandgivestheresponsebacktotheuser.On
the other hand, in a component based framework there is no clear sense of the flow from
fronttoback.Thedeveloperhastothinknotinactionsbutincomponents.JavaServerFaces
(JSF)isbasedoncomponentsbutissomehowsimilartorequestbasedframeworks.
Struts became one of the most dominant Java web frameworks and was donated to the
Apache Foundation in May 2000. Formerly located under the Apache Jakarta Project and
knownasJakartaStruts,itbecameatoplevelApacheprojectin2005.AccordingtoEdward
Burns,[5]theJavaCommunityProcess(JCP)sawthebenefitsthatStrutsofferedbyexplicitly
followingtheMVCapproach.However,Strutslackedarobustwaytohandletheviewtier.
2
1. INTRODUCTION
To address this need, several leading software vendors, including Sun, Oracle, IBM, and
BEA,metthroughtheJCPin2001andvotedtoproceedwithacomprehensiveanddetailed
specificationforbuildingJavawebapplications.
JavaServerFacesbecamepartoftheJavaEEinversion5(May2006).Sinceitcontainedonly
few basic components, soon several component libraries with advanced features were cre-
ated.TheselibrariesbroughtAjax1supportandvariousvisualcomponentssuchascalendar,
spinner, slider or advanced tables. Despite the fact that they all were built on top of a stan-
dard, they did not work together well, if at all. JEE 6 (December 2009) introduced JSF 2.0
which added many missing features. Since many developers wanted to use components
from several JSF libraries, JSF 2.0 were designed with interoperability in mind. However,
theJSFspecificationdoesnotprescribeimplementationdetails.Themaingoalofthisthesis
is to compare functionality of three JSF open source component libraries (ICEfaces, Prime-
Faces, and OpenFaces) with RichFaces and find out how they inter-operate. Author of this
thesis works at Red Hat in RichFaces team. This work will help RichFaces team to under-
standstrengthsandweaknessesofRichFacescomponents.
The work is divided into several chapters. The second chapter describes the history of
JavaServer Faces and new features of JSF 2. There are also above-mentioned component
libraries introduced. The following chapters describe functionality and interoperability of
various groups of components—Ajax, input, output, panels, charts and other components.
Thelastchapterdescribesvalidationofformsonthepages.Itdescribesthreedifferentmech-
anismsforvalidation.
1. AJAX is an acronym for Asynchronous JavaScript and XML. In this work it will be referred to as “Ajax”
becausethisnameisusualinJSFcommunity.
3