JBoss RichFaces 3.3
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 Component Development Kit (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.
What This Book Covers
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.
Skin Customization
We have finished our application and now we would like to customize its look
to follow the style we like. In this chapter, we will see how to change the style of
existing skins (using CSS and XCSS) and how to create a new personalized skin
starting from the built-in skins that the RichFaces framework offers.
Skinnability
In the Chapter 1, First Steps, we read an introduction of what RichFaces skinnability
is about, and during the development of our application, we've learned how to set
the default skin for a project and even how to change it dynamically .
Summarizing, every RichFaces component gives the support for skinnability and it
means that just by changing the skin, we change the look for all of the components.
That's very good for giving our application a consistent look and not repeating the
same CSS values for each component every time.
RichFaces still uses CSS, but it also enhances it in order to make it simpler to manage
and maintain.
Customize skin parameters
A skin file contains the basic settings (such as font, colors, and so on) that we'll use
for all the components—just by changing those settings, we can customize the basic
look and feel for the RichFaces framework.
As you might know, RichFaces comes with some built-in skins (and other
external plug 'n' skin ones)—you can start with those skins in order to create your
own custom skin.
The built-in skins are:
- Plain
- emeraldTown
- blueSky
- wine
- japanCherry
- ruby
- classic
- deepMarine
The plug 'n' skin ones are:
The plug 'n' skin skins are packaged in external jar files (that you can download from
the same location as that of the RichFaces framework) that must be added into the
project in order to be able to use them. We will see how to create our custom plug 'n'
skin in the next chapter.
Remember that the skin used by the application can be set as context-param in the
web.xml file:
<context-param>
<param-name>org.richfaces.SKIN</param-name>
<param-value>emeraldTown</param-value>
</context-param>
This is an example with the emeralTown skin set:
If we change the skin to japanCherry, we have the following screenshot:
That's without changing a single line of CSS or XHTML!
Edit a basic skin
Now let's start creating our own basic skin. In order to do that, we are going to
reuse one of the built-in skin files and change it. You can find the skin files in the
richfaces-impl-3.x.x.jar file inside the META-INF/skins directory.
Let's open the file and then open, for example, the emeraldTown.skin.properties
file that looks like this (yes, the skin file is a .properties file!):
#Colors
headerBackgroundColor=#005000
headerGradientColor=#70BA70
headerTextColor=#FFFFFF
headerWeightFont=bold
generalBackgroundColor=#f1f1f1
generalTextColor=#000000
generalSizeFont=18px
generalFamilyFont=Arial, Verdana, sans-serif
controlTextColor=#000000
controlBackgroundColor=#ffffff
additionalBackgroundColor=#E2F6E2
shadowBackgroundColor=#000000
shadowOpacity=1
panelBorderColor=#C0C0C0
subBorderColor=#ffffff
tabBackgroundColor=#ADCDAD
tabDisabledTextColor=#67AA67
trimColor=#BBECBB
tipBackgroundColor=#FAE6B0
tipBorderColor=#E5973E
selectControlColor=#FF9409
generalLinkColor=#43BD43
hoverLinkColor=#FF9409
visitedLinkColor=#43BD43
# Fonts
headerSizeFont=18px
headerFamilyFont=Arial, Verdana, sans-serif
tabSizeFont=11
tabFamilyFont=Arial, Verdana, sans-serif
buttonSizeFont=18
buttonFamilyFont=Arial, Verdana, sans-serif
tableBackgroundColor=#FFFFFF
tableFooterBackgroundColor=#cccccc
tableSubfooterBackgroundColor=#f1f1f1
tableBorderColor=#C0C0C0
tableBorderWidth=2px
#Calendar colors
calendarWeekBackgroundColor=#f5f5f5
calendarHolidaysBackgroundColor=#FFEBDA
calendarHolidaysTextColor=#FF7800
calendarCurrentBackgroundColor=#FF7800
c alendarCurrentTextColor=#FFEBDA
calendarSpecBackgroundColor=#E2F6E2
calendarSpecTextColor=#000000
warningColor=#FFE6E6
warningBackgroundColor=#FF0000
editorBackgroundColor=#F1F1F1
editBackgroundColor=#FEFFDA
#Gradients
gradientType=plain
In order to test it, let's open our application project, create a file called mySkin.skin.
properties inside the directory /resources/WEB-INF/, and add the above text.
Then, let's open the build.xml file and edit it, and add the following code into the
war target:
<copy
tofile="${war.dir}/WEB-INF/classes/mySkin.skin.properties"
file="${basedir}/resources/WEB-INF/mySkin.skin.properties"
overwrite="true"/>
Also, as our application supports multiple skins, let's open the components.xml file
and add support to it:
<property name="defaultSkin">mySkin</property>
<property name="availableSkins">
<value>mySkin</value>
<value>laguna</value>
<value>darkX</value>
<value>glassX</value>
<value>blueSky</value>
<value>classic</value>
<value>ruby</value>
<value>wine</value>
<value>deepMarine</value>
<value>emeraldTown</value>
<value>japanCherry</value>
</property>
If you just want to select the new skin as the fixed skin, you would just
edit the web.xml file and select the new skin by inserting the name into
the context parameter (as explained before).
Just to make an (bad looking, but understandable) example, let's change some
parameters in the skin file:
# Colors
headerBackgroundColor=#005000
headerGradientColor=#70BA70
headerTextColor=#FFFFFF
headerWeightFont=bold
generalBackgroundColor=#f1f1f1
generalTextColor=#000000
generalSizeFont=18px
generalFamilyFont=Arial, Verdana, sans-serif
controlTextColor=#000000
controlBackgroundColor=#ffffff
additionalBackgroundColor=#E2F6E2
shadowBackgroundColor=#000000
shadowOpacity=1
panelBorderColor=#C0C0C0
subBorderColor=#ffffff
tabBackgroundColor=#ADCDAD
tabDisabledTextColor=#67AA67
trimColor=#BBECBB
tipBackgroundColor=#FAE6B0
tipBorderColor=#E5973E
selectControlColor=#FF9409
generalLinkColor=#43BD43
hoverLinkColor=#FF9409
visitedLinkColor=#43BD43
# Fonts
headerSizeFont=18px
headerFamilyFont=Arial, Verdana, sans-serif
tabSizeFont=11
tabFamilyFont=Arial, Verdana, sans-serif
buttonSizeFont=18
buttonFamilyFont=Arial, Verdana, sans-serif
tableBackgroundColor=#FFFFFF
tableFooterBackgroundColor=#cccccc
tableSubfooterBackgroundColor=#f1f1f1
tableBorderColor=#C0C0C0
tableBorderWidth=2px
#Calendar colors
calendarWeekBackgroundColor=#f5f5f5
calendarHolidaysBackgroundColor=#FFEBDA
calendarHolidaysTextColor=#FF7800
calendarCurrentBackgroundColor=#FF7800
calendarCurrentTextColor=#FFEBDA
calendarSpecBackgroundColor=#E2F6E2
calendarSpecTextColor=#000000
warningColor=#FFE6E6
warningBackgroundColor=#FF0000
editorBackgroundColor=#F1F1F1
editBackgroundColor=#FEFFDA
#Gradients
gradientType=plain
Here is the screenshot of what happened with the new skin:
How do I know which parameters to change? The official RichFaces Developer
Guide contains, for every component, a table with the correspondences between the
skin parameters and the CSS properties they are connected to.
|
