JSF 2.0 – Images, CSS and Java Script

July 2, 2010

JSF 2.0 Cookbook

This book will cover all the important aspects involved in developing JSF applications. It
provides clear instructions for getting the most out of JSF and offers many exercises to
build impressive desktop-style interfaces for your web applications. You will learn to
develop JSF applications starting with simple recipes and gradually moving on to
complex recipes.

We start off with the simple concepts of converters, validators, and file management. We
then work our way through various resources such as CSS, JavaScript, and images to
improve your web applications. You will learn to build simple and complex custom
components to suit your needs. Next, you get to exploit AJAX as well as implement
internationalization and localization for your JSF applications. We then look into
ensuring security for your applications and performing testing of your applications. You
also get to learn all about Facelets and explore the newest JSF 2.0 features. Finally, you
get to learn a few integrations such as JSTL with JSF, Spring with JSF, and Hibernate
with JSF. All these concepts are presented in the form of easy-to-follow recipes.

Each chapter discusses separate types of recipes and they are presented with an
increasing level of complexity from simple to advanced. All of these recipes can be used
with JSF 1.2 as well as JSF 2.0.

JSF Articles

What This Book Covers

Chapter 1, Using Standard and Custom Converters in JSF covers the standard and
custom converters in JSF. We start with implicit and explicit conversion examples, then
move on to creating and using custom converters, and we end up with client-side
converters using MyFaces Trinidad.

Chapter 2, Using Standard and Custom Validators in JSF continues with standard and
custom validators. We see how to use a standard validator, how to create and use custom
validators, and how to use RichFaces and Apache MyFaces validators. We also present
the new JSF 2.0 validators, such as f:validateRegex and
f:validateRequired.

Chapter 3, File Management discusses file management issues. You will see different
methods for downloading and uploading files, learn how to use JSF Core, RichFaces,
PrimeFaces, and Apache Tomahawk. In addition, you will see how to export data to PDF
and Excel, and how to extract data from an uploaded CSV file.

Chapter 4, Security covers some security issues. You will see how to use the JSF
Security project without JAAS Roles, use secured managed beans with JSF Security, and
use Acegi/Spring security in JSF applications.

Chapter 5, Custom Components discusses custom components in JSF. You will see how
to build different kinds of custom components in JSF 2.0, Archetypes for Maven, JSF and
Dojo and more.

Chapter 6, AJAX in JSF starts with the f:ajax tag, continues with Dynamic Faces,
RichFaces, ajax4jsf, and ends up with PrimeFaces and learning to write reusable AJAX
components.

Chapter 7, Internationalization and Localization covers internationalization and
localization. We will see how to load message resource bundles on JSF pages and how to
use locales and message resource bundles. We then move on to parameterized messages,
learning how to display Arabic, Chinese, Russian, and so on and how to select time zones
in JSF 2.0.

Chapter 8, JSF, Images, CSS, and JS discusses JSF with images, CSS, JS, and RSS. We
will integrate JS with JSF, pass values between JS and JSF, crop images, work with
dynamic images, work with pop-up windows, RSS support, and so on.

Chapter 9, JSF—Managing and Testing starts with Faces Console, and moves on to
JSFUnit and JMeter.

Chapter 10, Facelets covers Facelets recipes. You will see how to work with aliasing
components, templates, composition components, passing actions, and sub-elements to
composition components.

Chapter 11, JSF 2.0 Features presents some of the most relevant JSF 2.0 features, such
as annotations, exception handling mechanism, declarative event handling, URLs based
on specified navigation outcome, JSF view parameters, JSF 2.0, and navigation cases.

Chapter 12, Mixing JSF with Other Technologies discusses mixing JSF with other
important technologies, such as Spring, Seam, JSTL, Hibernate, and EJB (JPA).

Appendix, Configuring JSF-related Technologies talks about the issues when a JSFrelated
technology gets into the equation. You need to add some specific configuration,
you have to create a “bridge” between JSF and the technology used. This appendix
contains the configurations for a few technologies.

Explore all the new features of JSF 2.0 that has numerous advantages over JSF 1.2
Work with standard and custom JSF converters and validators
Learn to upload and download with JSF, RichFaces and MyFaces
Work with resources such as CSS, JavaScript and images
Develop sophisticated applications using standard and custom components
Explore AJAX in JSF and related frameworks
Enhance your applications with internationalization and localization
Exploit all of the security tasks in JSF and perform thorough testing of your applications
Get to grips with JSFUnit, JMeter and JXIsight
Integrate JSF with JSTL, Spring and Hibernate

JSF, Images, CSS, and JS

In this chapter, we will cover:

Injecting CSS in JSF

JSF, CSS, and tables

JSF and dynamic CSS

Integrating JavaScript and JSF

Getting a JSF inputText value from JavaScript

Working with JSF hidden fields from JavaScript

Passing parameters from JS to JSF (client to server)

Passing parameters from JSF to JS (server to client)

Opening a pop-up window using JSF and JS

Passing parameters with HTTP GET within the URL

Communicating between parent pop-up windows

Populating a JS load function with JSF values

Dynamic images with PrimeFaces

Cropping images with PrimeFaces

Working with rss4jsf project

Using resource handlers

Injecting CSS in JSF

In this recipe, you will see how to add CSS styles to JSF tags. It is a simple solution, but it has
the advantage that it can be applied to almost all JSF tags that render text, images, and so on.

Getting ready

We have developed this recipe with NetBeans 6.8, JSF 2.0, and GlassFish v3. The JSF 2.0
classes were obtained from the NetBeans JSF 2.0 bundled library.

How to do it…

When you need a simple and classic solution to integrate CSS in JSF it is important to know
that JSF components support the styleClass and style attributes. The styleClass
attribute is used when you are working with CSS classes, while the style attribute allows you
to place CSS code directly in place between quotes.

You can see in the following code snippet how this works with the h:outputText component:



	<?xml version=’1.0′ encoding=’UTF-8′ ?>

	<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

		“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

	<html xmlns=”http://www.w3.org/1999/xhtml”

		xmlns:ui=”http://java.sun.com/jsf/facelets”

		xmlns:h=”http://java.sun.com/jsf/html”

		xmlns:f=”http://java.sun.com/jsf/core”>

		<h:head>

			<title>JSF and CSS example</title>

			<style type=”text/css”>

				.message { text-align: left;

					letter-spacing:5px;

					color:#000099

				}

				.message-overline { text-decoration:overline;

				}

				.message-font { font-family:georgia,garamond,serif;

					font-size:20px;

					font-style:italic;

				}

			</style>

		</h:head>

		<h:body>

			<h:outputText styleClass=”message”

				value=”This text is CSS formated by ‘message’ class!”/>

			<br /><br />

			<h:outputText styleClass=”message message-overline”

				value=”This text is CSS formated by ‘message’ and

				‘message-overline’ classes!”/>

			<br /><br />

			<h:outputText styleClass=”message message-overline message-font”

				value=”This text is CSS formated by ‘message’,

				‘message-overline’ and ‘message-font’ classes!”/>

			<br /><br />

			<h:outputText style=”text-align: left;letter-spacing:5px;

				color:#000099″ value=”This text is CSS formated

				using the ‘style’ attribute instead of ‘message’ class!”/>

			<br /><br />

			<h:outputText style=”text-align: left;letter-spacing:5px;

				color:#000099;text-decoration:overline;”

				value=”This text is CSS formated using the

				‘style’ attribute instead of ‘message’

				and ‘message-overline’ classes!”/>

			<br /><br />

			<h:outputText style=”text-align: left;letter-spacing:5px;

				color:#000099;text-decoration:overline;

				font-family:georgia,garamond,serif;

				font-size:20px;font-style:italic;

				” value=”This text is CSS formated using the

				‘style’ attribute instead of ‘message’,

				‘message-overline’ and ‘message-font’ classes!”/>

			<br /><br />

		</h:body>

	</html>

Notice that when you need to specify more CSS classes under the same styleClass you
need to separate their names by space.

How it works…

As you can see the JSF – CSS construction looks similar to HTML – CSS usage. The interaction
between JSF – CSS imitates HTML – CSS interaction, but, as you will see in the next recipes,
JSF is more fl exible and supports more kinds of attributes for injecting CSS code in JSF pages.

JSF, CSS, and tables

There are two kinds of grids (tables) that are very often used in JSF, h:panelGrid and
h:dataTable. Both of them can be styled with CSS in detail using a set of dedicated
attributes. In this recipe you will see these attributes at work for h:panelGrid, but it
is very simple to extrapolate this to h:dataTable .

Getting ready

We have developed this recipe with NetBeans 6.8, JSF 2.0, and GlassFish v3. The JSF 2.0
classes were obtained from the NetBeans JSF 2.0 bundled library.

How to do it…

Suppose that we have an h:panelGrid. We can “populate” it with CSS styles, using the
following set of attributes:

Knowing these attributes, we build a JSF page to show you how to use them in practice
(notice where we have placed the attributes):



	<?xml version=’1.0′ encoding=’UTF-8′ ?>

	<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

		“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

	<html xmlns=”http://www.w3.org/1999/xhtml”

		xmlns:ui=”http://java.sun.com/jsf/facelets”

		xmlns:h=”http://java.sun.com/jsf/html”

		xmlns:f=”http://java.sun.com/jsf/core”>

		<h:head>

			<title>JSF and CSS example</title>

			<style type=”text/css”>

				.message { text-align: left;

					letter-spacing:5px;

					color:#000099

				}

				.message-font { font-family:georgia,garamond,serif;

					font-size:20px;

					font-style:italic;

				}

				.odd { background-color: blue }

				.even { background-color: red }

			</style>

		</h:head>

		<h:body>

			<h:form>

				<h:panelGrid columns=”3″ border=”1″ footerClass=”message”

					headerClass=”message-font” rowClasses=”odd, even”

					title=”PanelGrid and CSS”>

					<f:facet name=”header”>

						<h:outputText value=”Fill Names Below”/>

					</f:facet>

					<h:inputText/>

					<h:inputText/>

					<h:inputText/>

					<h:inputText/>

					<h:inputText/>

					<h:inputText/>

					<h:inputText/>

					<h:inputText/>

					<h:inputText/>

					<h:inputText/>

					<h:inputText/>

					<h:inputText/>

						<f:facet name=”footer”>

							<h:outputText value=”The End”/>

						</f:facet>

				</h:panelGrid>

			</h:form>

		</h:body>

	</html>

How it works…

Since we have an attribute for each part of a grid, we can easily specify CSS styles to
customize the design of each of these parts. JSF will combine the specified CSS styles to
render a cool grid to the user.