MASARYK UNIVERSITY FACULTY}w¡¢£¤¥¦§¨ OF I !"#$%&'()+,-./012345<yA|NFORMATICS Comparison of AJAX JSF Libraries Functionality and Interoperability DIPLOMA THESIS Bc. Pavol Pito ˇnák Brno, June 2011 Declaration Hereby I declare, that this paper is my original authorial work, which I have worked out by my own. All sources, references and literature used or excerpted during elaboration of this work are properly cited and listed in complete reference to the due source. Bc. Pavol Pitoˇnák Advisor: Mgr. Marek Grác ii Acknowledgement I would like to thank my supervisor, Mgr. Marek Grác, my consultant, Ing. JiˇríPechanec, and RichFaces team, especially Lukáš Fryˇc,for their guidance and support throughout my work on this thesis. Many thanks also go to my family, girlfriend, and close friends who supported me while working on this thesis. 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 application that would demonstrate interoperability of these libraries is created as a part of the thesis. iv Keywords Java Server Faces, JSF, RichFaces, ICEfaces, PrimeFaces, interoperability, web framework, Rich Internet Applications v Contents 1 Introduction .........................................1 2 The JavaServer Faces Framework ............................4 2.1 History of JavaServer Faces .............................4 2.2 Key Terms .......................................5 2.3 JSF Application ....................................6 2.4 The Request Processing Lifecycle ..........................8 2.5 The Navigation Model ................................ 10 2.6 Managed Beans and Scopes ............................. 12 2.7 The Facelets View Declaration Language ..................... 12 2.8 Composite Components ............................... 14 2.9 Resource Handling .................................. 15 2.10 Component Libraries ................................. 15 3 Ajax and Core Components ................................ 18 3.1 Ajax in JSF 2 and in Component Libraries ..................... 18 3.2 Region ......................................... 20 3.3 Command Button and Command Link ....................... 21 3.4 JavaScript Function .................................. 21 3.5 Queue ......................................... 22 3.6 Status .......................................... 23 3.7 Poll ........................................... 25 3.8 Push .......................................... 25 4 Input Components ..................................... 29 4.1 Calendar ........................................ 29 4.2 Inplace Inputs ..................................... 31 4.3 Autocomplete ..................................... 31 4.4 Slider .......................................... 34 4.5 Spinner ......................................... 35 4.6 File Upload ....................................... 37 5 Output Components .................................... 40 5.1 Progress Bar ...................................... 40 5.2 Tree ........................................... 41 6 Panels ............................................. 46 6.1 Panels in RichFaces .................................. 46 6.2 Panels in PrimeFaces ................................. 48 6.3 Panels in OpenFaces ................................. 51 6.4 Panels in ICEfaces ................................... 52 7 Iteration Components ................................... 56 7.1 RichFaces Repeat, List and Data Grid ........................ 57 7.2 RichFaces Data Table ................................. 58 vi 7.3 RichFaces Extended Data Table ........................... 60 7.4 RichFaces Data Scroller ................................ 61 7.5 OpenFaces ForEach .................................. 63 7.6 OpenFaces Data Table ................................ 63 7.7 PrimeFaces Data Grid ................................ 69 7.8 PrimeFaces Data List ................................. 70 7.9 PrimeFaces Data Table ................................ 71 7.10 ICEfaces Data Table .................................. 72 8 Charts ............................................. 75 8.1 Charts in PrimeFaces ................................. 75 8.2 Charts in OpenFaces ................................. 77 8.3 Charts in ICEfaces ................................... 79 9 Validation .......................................... 82 9.1 Faces Validation .................................... 82 9.2 Bean Validation .................................... 82 9.3 Client Side Validation ................................. 83 9.4 Cross-field Validation ................................. 84 9.5 Messages ........................................ 85 9.6 Captcha ......................................... 86 10 Conclusion .......................................... 88 Bibliography .......................................... 91 A Sample Use of RichFaces Sub Table ........................... 93 B Sample Use of Sorting in RichFaces Table ....................... 94 C Metamer Screenshot .................................... 95 D Contents of Attached CD ................................. 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, independent sandboxes, or virtual machines.[1] The three most common platforms are Adobe Flash, Microsoft Silverlight and Java. Although all these platforms are mature, stable and widespread, their biggest disadvantage is that they all depend on plugins installed in user’s web browser. On the other hand, new web standards such as HTML 5 are being developed in order to pro- vide advanced features need by RIAs out-of-the-box. HTML 5 will contain new elements for handling multimedia (video and audio), a canvas element and improved integration of SVG content. Next, there are planned new semantic elements for page header, articles and sec- tions. Several new APIs are about to be introduced for offline storage database (also known 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- etary technologies such as Adobe Flash or Microsoft Silverlight. In the Java world, there are several web frameworks and standards for creating rich internet applications. In March 1998, the Java Servlet API was introduced. Prior to servlets, Java was not widely used as a server-side technology for web applications. Unlike other proprietary web server APIs, the Java Servlet API provided an object-oriented design approach and was able to run on any platform where Java was supported. Since the Java Servlet API provided a low-level handling of HTTP requests, it was tedious and error-prone to generate HTML, e.g.: 1 out.println("<img id=\"cat\" src=\"cat.png\"/>"); Notice how the quote symbols (”) have to be escaped. Because of above-mentioned problems of the Java Servlet API, a new technology called JavaServer Pages (JSP) was introduced. JSP was built on top of servlets and provided a sim- 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: 1 <%@ page errorPage="myerror.jsp" %> 1 1. INTRODUCTION 2 <%@ page import="com.foo.bar" %> 3 <html> 4 <body> 5 <%! int serverInstanceVariable = 1;%> 6 <% int localStackBasedVariable = 1; %> 7 <table> 8 <tr> 9 <td> 10 <%= toStringOrBlank( "expanded inline data " + 1 ) %> 11 </td> 12 </tr> 13 </table> 14 ... The Java Platform, Enterprise Edition (J2EE, later renamed to JEE) contained both Servlet API and JavaServer Pages right from the first version. Although JSP was an improvement, it was not a complete solution. Developers used to use a lot of Java code in JSPs making them hard to maintain. Thus, some separation of applica- tion logic and view was needed. What was needed was an implementation of model-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, and the actions based on user input into three separate classes: [4] • model—manages the behavior and data of the application domain, responds to re- quests for information about its state (usually from the view), and responds to instruc- tions to change state (usually from the controller); • view—manages the display of information; and • controller—interprets the mouse and keyboard inputs from the user, informing the model and/or the view to change as appropriate. Because of above mentioned issues with JSP and the need of MVC, several web frame- works were created. They could be divided into two major groups by