20,73 €
JBoss RichFaces is a rich component library for JavaServer Faces and an AJAX framework that allows easy integration of AJAX capabilities into complex business applications. Do you wish to eliminate the time involved in writing JavaScript code and managing JavaScript-compatibility between browsers to build an AJAX web application quickly?
This book goes beyond the documentation to teach you how to do that. It will show you how to get the most out of JBoss RichFaces by explaining the key components and how you can use them to enhance your applications. Most importantly, you will learn how to integrate AJAX into your applications without using JavaScript but only standard JSF components. You will learn how to create and customize your own components and add them to your new or existing applications.
First, the book introduces you to JBoss RichFaces and its components. It uses many examples of AJAX components which, among others, include: Calendar, Data Table, ToolTip, ToolBar, Menu, RichEditor, Drag'n'Drop. All these components will help you create the web site you always imagined. Key aspects of the RichFaces framework such as the AJAX framework, skinnability, and CDK (Component Development Kit) will help you customize the look of your web application. As you progress through the book, you will see a sample application that shows you how to build an advanced contact manager. You're also going to be amazed to know about the advanced topics you will learn like developing new components, new skins, optimizing a web application, inserting components dynamically using Java instead of XHTML, and using JavaScript to manage components. This book is more than a reference with component example code: it's a manual that will guide you, step-by-step, through the development of a real AJAX JSF web application.
Develop a real AJAX web application productively using the RichFaces framework, Facelets, and Seam
This is a practical tutorial following the use of RichFaces in a sample application. It includes many examples of the creation and customization of different AJAX components.
This book targets Java Developers who want to enhance their JSF applications by adding AJAX, but without having to use JavaScript. If you want to learn how to use the wide set of AJAX components that you find in the RichFaces framework, this book is for you.
You are expected to have basic knowledge of JSF, but no previous experience with AJAX is necessary.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 276
Veröffentlichungsjahr: 2009
Copyright © 2009 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: November 2009
Production Reference: 1231009
Published by Packt Publishing Ltd.
32 Lincoln Road
Olton
Birmingham, B27 6PA, UK.
ISBN 978-1-847196-88-0
www.packtpub.com
Cover Image by Filippo (<[email protected]>)
Author
Demetrio Filocamo
Reviewer
Allan Lykke Christensen
Acquisition Editor
Sarah Cullington
Development Editor
Swapna V. Verlekar
Technical Editor
Charumathi Sankaran
Copy Editor
Sanchari Mukherjee
Indexers
Rekha Nair
Monica Ajmera
Editorial Team Leader
Gagandeep Singh
Project Team Leader
Lata Basantani
Project Coordinator
Srimoyee Ghoshal
Proofreader
Lynda Sliwoski
Graphics
Nilesh R. Mohite
Production Coordinators
Adline Swetha Jesuthas
Dolly Dasilva
Cover Work
Adline Swetha Jesuthas
Demetrio Filocamo is a computer science engineer with more than 10 years of experience with both Desktop and web applications development. He works as a consultant in London and collaborates with some companies and universities in Italy. Demetrio has been developing Enterprise Java Applications using open source solutions for the last five years.
Allan Lykke Christensen is the vice-president of Danish ICT Management, an international consulting firm with its focus on ICT in developing economies. He is responsible for daily management of teams in Uganda, Bangladesh, and Denmark. In his daily work, he is also responsible for project planning, initiating, and overall implementation. He has been developing and implementing IT projects for more than 10 years. His expertise covers a wide range—he has developed workflow systems, information systems, e-learning tools, knowledge management systems, and websites. He has worked as a team leader on several major European Commission-financed ICT projects in various developing economies. He has co-authored The Definitive Guide toApache MyFaces and Facelets (Apress, 2008) and made countless presentations and training sessions on programming-related topics around the world.
To my grandfather Demetrio, my family and Maria Chiara.
JBoss RichFaces is a rich component library for JavaServer Faces and an AJAX framework that allows easy integration of Ajax capabilities into complex business applications. Do you wish to eliminate the time involved in writing JavaScript code and managing JavaScript-compatibility between browsers to build an Ajax web application quickly?
This book goes beyond the documentation to teach you how to do that. It will show you how to get the most out of JBoss RichFaces by explaining the key components and how you can use them to enhance your applications. Most importantly, you will learn how to integrate Ajax into your applications without using JavaScript, but only standard JSF components. You will learn how to create and customize your own components and add them to your new or existing applications.
First, the book introduces you to JBoss RichFaces and its components. It uses many examples of Ajax components which, among others, include: Calendar, Data Table, ToolTip, ToolBar, Menu, RichEditor, and Drag 'n' Drop. All these components will help you create the web site you always imagined. Key aspects of the RichFaces framework such as the Ajax framework, skinnability, and ComponentDevelopmentKit (CDK) will help you customize the look of your web application. As you progress through the book, you will see a sample application that shows you how to build an advanced contact manager. You're also going to be amazed to know about the advanced topics you will learn such as developing new components, new skins, optimizing a web application, inserting components dynamically using Java instead of XHTML, and using JavaScript to manage components. This book is more than a reference with component example code: it's a manual that will guide you, step by step, through the development of a real Ajax JSF web application.
Chapter 1: What is RichFaces covers the aims of the RichFaces framework, its components, and what you can do by using it in a web application.
Chapter 2: Getting Ready explains how to configure your environment by creating a simple project using the seam-gen tool, adding support to Seam and Facelets, and the manual configuration for the RichFaces libraries. We will understand the IDE that we can use while developing with the framework.
In Chapter 3: First Steps, you will learn to build Ajax applications by developing a simple example, the basics of RichFaces step by step, from creating the project to editing the code, using very important components and their Ajax properties.
Chapter 4: The Application covers how to create the basics of our project by having a look at the side technologies we might know, in order to build good applications. It will cover templating with Facelets, JBoss Seam authentication, and customization of the entities.
Chapter 5: Making the Application Structure explains us how to create the login and registration system of the website. We'll look at all the features that a real application might have.
In Chapter 6: Making the Contacts List and Detail, we will develop the core feature of our application—contact management. We'll learn about Ajax interaction and containers, and about new Ajax components that RichFaces offers.
Chapter 7: Finishing the Application explains how to finish building the application using the RichFaces components, and about customizing them.
In Chapter 8: Skin Customization, we'll see all the powerful customization capabilities that the RichFaces framework offers.
Chapter 9: Creating a New plug 'n' skin covers how to create, customize, and package and deploy a new pluggable skin.
Chapter 10: Advanced Techniques explains you how to use and implement pushing, partial updates, and session expiration handling in order to develop advanced applications.
In Chapter 11: Component Development Kit, we'll see how to start a project in order to develop a simple JSF Ajax component in a simple and effective way using the features the CDK offers.
Appendix: RichFaces Components Overview covers a list of all the components of RichFaces with their functionalities.
This book targets Java Developers who want to enhance their JSF applications by adding AJAX, but without having to use JavaScript. If you want to learn how to use the wide set of AJAX components that you find in the RichFaces framework, this book is for you.
You are expected to have basic knowledge of JSF, but no previous experience with AJAX is necessary.
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text are shown as follows: "Notice that the myNewSkin.skin.properties file contains the properties of the skin."
A block of code is set as follows:
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
Any command-line input or output is written as follows:
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "clicking the Next button moves you to the next screen".
Warnings or important notes appear in a box like this.
Tips and tricks appear like this.
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an email to <[email protected]>, and mention the book title via the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or email <[email protected]>.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book on, see our author guide on www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the example code for the book
Visit http://www.packtpub.com/files/code/6880_Code.zip to directly download the example code
The downloadable files contain instructions on how to use them.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration, and help us to improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the let us know link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata added to any list of existing errata. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or web site name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.
In this chapter, we are going to learn about the RichFaces project and how it can help us develop better Ajax web applications faster.
First, we'll go through a bit of the story of its birth and growth. Thereafter, we'll learn how it works (in general), which components are inside its framework, and what we can do with them. Finally, we'll explain some advanced techniques and start looking at the CDK (Component Development Kit) with a simple example.
RichFaces is a very useful open source framework that allows you to add Ajax capability to your JSF application (using the standard JSF components) without the need to write JavaScript code and manage JavaScript compatibility between browsers. It is integrated with the JSF lifecycle and other standard JSF features such as validation, conversion, and resource management.
Moreover, RichFaces offers the very powerful skinnability. This customizes the look and feel of your JSF applications. You can define different color schemes to create your custom skins or use the predefined ones. Also, you can manage the predefined CSS styles (or add your own ones) to change the appearance of UI library components in a simple and consistent way (you can even use XCSS to dynamically customize the CSS styles). The skinnability feature of RichFaces can apply skins to standard HTML elements such as input, select, textarea, fieldset, and so on.
RichFaces provides two sets of component libraries:
Core Ajax: The Core library contains components that are useful to "ajaxize" JSF pages and standard JSF components. It is very simple to define Ajax areas and to invoke Ajax requests in order to update those areas (we'll see how this is done very soon). Also, it provides a component to generate binary resources on the fly (for example, code-generated images, pdf files, csv files, and so on).
UI: The RichFaces UI library is a set of advanced JSF Ajax components used to add rich user interface features to your applications. The components support Ajax out of the box and perfectly integrate with the Core library. Also, they fully support skins and can be completely adapted according to the users' needs.
Another feature included in the RichFaces framework is the ComponentDevelopmentKit (CDK)—the set of tools used for UI library creation that can be used to make new components with built-in Ajax and skinnability support.
Other extras are the Facelets support, the possibility to create components from Java code (with documented API), the JavaScript API of components to interact with them from the client side (if you want to use JavaScript), and last but not least, the very strong community support.
As you can see, RichFaces has a lot of very powerful features that can help you with rich application development. In the following paragraphs, we'll do a short overview of the framework to start understanding all the possibilities you have.
RichFaces comes from the Ajax4Jsf framework. It was created by Alexander Smirnov who joined Exadel in 2005 in order to continue the development. The idea was to put together the "cool" Ajax techniques with the new JavaServer Faces framework.
The first commercial version was released in March 2006 with the name of Exadel VCP. In the same year, it was split into two projects—Ajax4Jsf (open source) and RichFaces (commercial).
Ajax4Jsf provided the Core Ajax framework and the Ajax components to "ajaxize" JSF components in a page (page-wide Ajax support). RichFaces was a commercial JSF Ajax components library.
In March 2007, Exadel and JBoss (a RedHat division) announced a partnership to open the source code of RichFaces, and the two projects were merged into a single open source project called just "RichFaces". It was a good move to solve the version compatibility issues that the two separate projects had.
Nowadays, the project is moving really fast with the help of the community of users involved with the RichFaces team who also decide what the future developments of the framework will be (such as which feature to develop further, which new component to make first, and so on).
For more information, visit the main web site at http://www.jboss.org/jbossrichfaces/), and the user forum at http://jboss.com/index.html?module=bb&op=viewforum&f=261.
The RichFaces Ajax framework is a JSF component library that adds page-wide Ajax support to your pages, unlike the traditional and limited component-wide Ajax support. It means that you can use Ajax components to invoke Ajax requests that are automatically synchronized with the JSF component tree, and update single areas without reloading the entire web page. The following image, taken from the JBoss documentation, shows the request processing flow:
It is not different from a standard JSF page, and you don't even need to write JavaScript code by using the RichFaces Ajax components. Inside the page you can define different areas you want to update, after the Ajax request.
The framework architecture is composed of five parts:
You can decide when to use a standard JSF request (with a full reload of the web page) or when to use an Ajax request. In the latter case, only the involved Ajax region is processed, and the Delta Ajax markup is sent back to the client after the filter has parsed and verified it.
The verification is done because the XMLHTTPRequest JavaScript function sends the request in XML format; the markup inside the XML request is not validated or corrected. The XML filter can automatically remove HTML code problems, but it's a good practice to write standards-compliant XHTML and HTML code.
Components of the RichFaces framework share a lot of Ajax attributes, which are very useful to manage the Ajax options that you have.
The following component attributes are very important and you can find them in all the Ajax-enabled components of the RichFaces framework:
We'll see these attributes in a lot of components of the framework. Therefore, it is useful to know how they work.
As we have said, these components are used to send Ajax requests to the server. Some examples of these components are:
The RichFaces Ajax framework contains specific components that describe Ajax areas and implement the AjaxContainer interface. The main Ajax container is the view root by default; therefore, you don't need to define an Ajax container for the whole page. However, it's very useful to know how to use the a4j:region component to set new Ajax regions and optimize Ajax requests.
A very important concept to keep in mind while developing is that the Ajax framework can't add or delete elements, but can only replace existing elements in the page. So, if you want to append some code you need to use a placeholder.
RichFaces has a component that can be used as a placeholder: a4j:outputPanel.
Inside the a4j:outputPanel component, you can put other components that use the "rendered" attribute to decide if they are visible or not. When you want to re-render all the included components, just re-render the output panel, and all will work without a problem.
Another feature of the Ajax framework is the Ajax validators. They work with the JSF validation system. However, as it is event based you can use it to trigger the validation while you are typing, or when you move to another field, and so on. You can mix standard and custom validation and also use the Hibernate Validator framework (so you can just annotate the entire properties to add new validators).
The RichFaces framework contains many JSF components to add Ajax to our applications in a very simple way, without needing to know anything about JavaScript (but if you know it, you have more features to use the framework inside your personalized JS code).
There are a lot of components for different kinds of tasks (such as interaction, input, output, drag-and-drop, validation, and so on). We are going to explain how they work every time we use them in the forthcoming chapters.
Throughout the book, we are going to develop an application using RichFaces. While doing so, we'll see how those components work in practice using real examples that cover all of their functionalities.
In standard CSS, you can't define a particular value (for example, a color or a font size) to "reuse" it in more than one selector—you have to copy and paste it where you need it.
So, if you have to change it, you have to search for the value and manually replace it every time it occurs. As you can figure out, this is an error-prone process that can bring lot of problems and layout inconsistencies.
Moreover, if you need an interface that supports multiple sets of color and must be adjusted on the fly , you have to work with a lot of CSS files having the same declarations but different colors, and you would also have to maintain them for other updates.
The RichFaces skinnability feature is here to help us; it's not a CSS replacement, but integrates it by adding more capabilities.
In this chapter, we've learnt what the aims of the RichFaces framework are, what are its components (the Ajax framework, the RichFaces components, and skinnability), and what you can do by using it in a web application.
In the next chapter, we will learn how to use those components while developing a real Ajax application. We are also going to learn the most useful programming pattern and optimization techniques, in order to use this framework at its best for our Ajax web applications.
In this chapter, we are going to set up and understand our project in order to get ready to develop an application using the RichFaces framework.
We'll explain how to create a project (both automatically and manually) and the IntegratedDevelopmentEnvironments (IDEs) that you can use to boost your productivity during the development.
We are going to talk a little about other technologies such as JBoss Seam and Facelets. You don't have to know them to understand this book, but we suggest you to learn them as they really can boost your productivity.
Obviously, we can create the project from scratch using our preferred IDE, but it is a boring and long task, as you have to set a lot of configuration files and check all the library dependencies. The most convenient method of creating a new project is to use an IDE that supports it (for example, Eclipse with the JBoss tools plugin) or use a tool such as seam-gen.
In real life, you would use RichFaces together with other technologies such as JBoss Seam, Facelets, JPA, and so on. The task of creating a complete and ready-to-run project (for different IDEs) is done very well by this tool, which is included in the JBoss Seam distribution.
Of course, we can just configure everything manually (and we'll see how later in the chapter), but for 90% of "real" projects, this is a good starting point, which means you will save a lot of time.
We strongly recommend the use of seam-gen for your first project creation. By using it, you will be able to create "in seconds" a new project, which is ready to deploy and to be opened using the Eclipse, IntelliJ Idea, and NetBeans IDEs!
Seam-gen generates an ANT build script, common configuration files, and a basic structure with Facelets templating support.
Moreover, it can automatically generate the JPA entities from a database using the Hibernate hbm2java tool and a simple CRUD (Create, Read, Update, Delete) application (using a Ruby on Rails approach), although we don't want that at this time.
Seam-gen uses RichFaces as the default component library (both seam-gen and Richfaces are JBoss projects) and automatically configures it into the project. We are going to use it to have a fast start and concentrate on the RichFaces features.
The project we are going to develop has support for EJB, JPA, JSF (of course!), Facelets, JBoss Seam, and RichFaces. All of the libraries are put into the lib directory of the generated project, and you can update them by just overwriting them (see the Update RichFaces libraries in a seam-gen generated project section).
Seam-gen is a command-line tool and is very simple to use. First, let's download and install it in the following way:
That's it; as you can see, it is not a real install, because seam-gen is included in the JBoss Seam distribution package.
Creating a project with seam-gen is quite simple. Just open the terminal window, navigate inside the JBoss Seam folder where you have decompressed the package, and launch the following command if you're using Microsoft Windows:
If you are using a Unix-like system such as GNU/Linux or Mac OS X, enter the following command:
Seam-gen will ask some questions, which you will have to answer. Be sure to say no when it asks if you want to use ICEFaces instead of RichFaces (no is the default answer), and yes to the question "Are you working with tables that already exist in the database?", if you want to generate the entities from an existing database.
In the next chapter, we will develop an example starting from a seam-gen project, and we will see the meaning of every question.
When the setup is complete, you can call seam-gen again to create the project with the following command, if you are using Microsoft Windows:
If you are using a Unix-like system, such as GNU/Linux or Mac OS X, use the following command:
This command creates an empty project with all the things we need in order to start coding.
To generate the JPA entities, you can enter the following command if you are using Microsoft Windows:
If you are using a Unix-like system, use the following command:
You can use other commands in order to generate a CRUD application, new actions, forms, and so on. For a complete list of commands, type the following command if you are using Microsoft Windows:
If you are using a Unix-like system, use the following command:
For more information about seam-gen, you can also consult the official documentation for JBoss Seam at http://docs.jboss.org/seam/2.2.0.GA/reference/en-US/html/gettingstarted.html
The seam-gen generated projects can be opened using your preferred IDE (or if you use Eclipse, you can import them into your workspace), and are ready to be edited in order to implement new features.
