ICEfaces 1.8

November 12, 2009

What is ICEFaces?

ICEfaces is an integrated AJAX Java application framework that enables Java EE AJAX application developers to easily create and deploy thin-client Rich Internet applications (RIA) in pure Java. ICEfaces is a fully featured product that enterprise developers can use to develop new or existing Java EE AJAX applications at no cost.

ICEfaces leverages the entire standards-based Java EE ecosystem of tools and execution environments. Rich enterprise application features are developed in pure Java, and in a pure thin-client model. There are no Applets or proprietary browser plug-ins required. ICEfaces applications are JavaServer Faces (JSF) applications, so Java EE application development skills apply directly, and Java developers are isolated from doing any JavaScript related development.

ICEfaces 1.8: Next Generation Enterprise Web Development

ICEfaces is the technology leader in the integration of AJAX with the JEE stack. Its
vendor, ICEsoft, offers a wide support for application servers, portal servers, and
important open source frameworks. So, you do not have to bother yourself with the
integration aspects of your project. You can focus on the implementation of business
logic and its presentation in the web browser instead.

If you plan a rock-solid Web 2.0 implementation based on the JSF standard, ICEfaces is
an ideal solution. Important enhancements of the JSF 2.0 standard are already available in
ICEfaces 1.8. So, you can expect minimal porting efforts.

icefaces 1.8 technologies such as skinning, multimedia, and AJAX Push already deliver the
standards of tomorrow and ease the development of collaborative web applications.
icefaces 1.8 can even be mixed with modern RIA concepts based on Adobe Flex. A
community of almost 90,000 developers (at the end of 2009) proves the quality and
potential of the icefaces 1.8 implementation.

This book is an introduction to the icefaces 1.8 framework for enterprise developers with
JSF experience. It describes how you can use icefaces 1.8 components to build Web 2.0
applications with a desktop-like character.

The book examples will explain to you how ICEfaces 1.8 helps integrating AJAX into a JEE
stack (using AJAX Push, JSF, Facelets, Spring, and JPA/Hibernate) without using a line
of JavaScript code. The book has a special focus on the Facelets technology that is now a
part of the JSF 2.0 specification. This will help you to write your own components for a
better reuse and maintenance.

By the end of the book, you will have a solid understanding of how to build modern
and ergonomic web interfaces that fully integrate with the modern Java Enterprise
stacks. You will be able to design and implement reusable and maintainable
presentation components that allow creating customizable, skinnable, and multilingual
web applications.

What This Book Covers

This book focuses on the implementation of desktop-like web applications that generate a
high user acceptance. Each chapter describes a different aspect of how ICEfaces 1.8 can be
used to achieve this.

Chapter 1 gives a short introduction of modern JEE web development. It shows why we
use AJAX and JSF today, and why ICEfaces 1.8 is an ideal framework to use.

Chapter 2 helps you to set up tools and frameworks that are used to create and execute
the sample code. We will have a look at a Windows XP environment using the Sun
Microsystems JDK, the Eclipse IDE, the Maven 2 Build System, the Jetty web container,
and the MySQL Database system. There is a special focus on the installation and the use
of the ICEfaces 1.8 plugin for Eclipse.

Chapter 3 takes a look at what a desktop-like presentation means to modern web
applications. We will have a look at the design principles and start with a common page
layout based on the Facelets templating.

Chapter 4 presents the ICEfaces 1.8 components that help us to implement an intuitive
navigation. The layout ideas from the previous chapter are further developed using the
ICEfaces 1.8 components.

Chapter 5 shows how your web application provides feedback to the user. We will have a
deeper look at the special Facelets components that deliver similar functionality to that
which a desktop developer would use in his/her applications. Additionally, we will have a
look at the ICEfaces 1.8 components that deliver a desktop-like behavior so that the user gets
fast results with minimal effort.

Chapter 6 discusses data presentation components. We will focus on dynamic data tables
that are fed by the database, and offer sortable and resizable columns. The second part of
the chapter describes how to integrate Google Maps, videos, and Flash animations into
your web application.

Chapter 7 describes the partial submit concept that ICEfaces 1.8 offers to update forms on
the fl y. We also take a look at dialog-based validation and how advanced form elements,
such as calendars and rich text editors, can be used.

Chapter 8 offers a model on how to implement the idea of user settings with the help of
ICEfaces 1.8. We will take a deeper look at the language and skin management.

Chapter 9 takes a deeper look at the implementation details of Facelets components that
were used in the previous chapters. We will discuss some fundamental design principles
that help to create reusable and maintainable components without ever writing JSF
custom components from scratch.

Components for Data Presentation and Multimedia

This chapter will discuss components that are primarily used to present data in
different formats. We will start with the classic data table and tree components
—surely, the most used components in enterprise programming. Next, we will
take a look at the charts and maps that are specialized in graphical data presentation.
Multimedia presentations are on the way to becoming the next important standard.
So, we will also take a look at video presentation components.

Data table

The ICEfaces 1.8 data table follows the implementation of the JSF standard data table.
It is primarily enhanced with skinning and security features. It also has some
additional components that make its use more comfortable.

We will have a look at two variants of the ICEfaces 1.8 data table in this chapter.
Both implementations use the same set of data. First, we will take a look at the
static variant and discuss important JSF features. Next, we will take a look at
a dynamic implementation that is offered by the <icefusion:table> tag.

The static table example can be found in the ICEcube menu at Presentation | Data
Table and looks like this:

In ICEfaces 1.8, a data table is defined by an <ice:dataTable> tag, some <ice:column>
tags, and a list of objects. The implementation of the ICEcube example page can be
found at /src/main/webapp/icecube/presentation/dataTable.xhtml:


	<!DOCTYPE html PUBLIC
		"-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns:f="http://java.sun.com/jsf/core"
		xmlns:h="http://java.sun.com/jsf/html"
		xmlns:ice="http://www.icesoft.com/icefaces/component"
		xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:c="http://java.sun.com/jstl/core"
		xmlns:t="http://myfaces.apache.org/tomahawk"
		xmlns:icefusion=
		"http://icefusion.googlecode.com/icefusion">
	<body>
	<ui:composition template=”#{iceFusionConsts.templatePage}”>
		<ui:define name=»title»>
			#{icecube['application.menu.presentation.dataTable']}
		</ui:define>
		<ui:define name=»content»>
			#{icecube['application.menu.presentation.dataTable.text']}
			<ice:form>
				<ice:panelGrid>
					<ice:dataTable id="table" var="tableRows"
						value="#{dataTable.rowsList}"
						rows="3" resizable="true">
						<ice:column>
							<f:facet name="header">
								<ice:outputText value="#{icecube[
									'application.menu.presentation.
									dataTable.attribute.firstname']}"/>
							</f:facet>
							<ice:outputText
								value="#{tableRows.firstname}"/>
						</ice:column>
					</ice:dataTable>
				</ice:panelGrid>
			</ice:form>
		</ui:define>
	</ui:composition>
	</body>
	</html>

The list of objects that is delivered by the backing bean is referenced in the value
attribute of the dataTable. The dataTable iterates over the value list and sets
the var attribute for each member. The column tags define how the data has to be
presented for each member.

You may have recognized the bigger lines between the columns in the screenshot.
These are a result of the resizable attribute in the dataTable tag. If you click on
these and move the mouse, the size of the left column is changed. Normally, you
have to start with the outer right columns to get a useful result.

In the backing bean, we define a list of Java authors with their names, blog addresses,
and a fl ag if JSF is their main business (/src/main/java/com/googlecode/
icecube/presentation/DataTable.java):


	package com.googlecode.icecube.presentation;
	import com.googlecode.icefusion.ui.commons.BackingBeanForm;
	import com.googlecode.icefusion.ui.commons.form.ITable;
	import com.googlecode.icefusion.ui.commons.form
		.ITableRowSortable;
	public class DataTable extends BackingBeanForm
		implements ITable {
		private ArrayList<DataTableRow4JavaAuthors>
			authors = new ArrayList<DataTableRow4JavaAuthors>();
		protected void init() {
			authors.clear();
			authors.add(new DataTableRow4JavaAuthors(
				"Rod","Johnson",
				"http://blog.springsource.com/author/rodj/",false));
			authors.add(new DataTableRow4JavaAuthors(
				"Matt","Raible",
				"http://raibledesigns.com/",false));
			this.initialized = true;
		}
		public List<ITableRowSortable> getRowsList() {
			if (!this.initialized) {
				init();
			}
			return this.getAuthors();
		}

The list of object construct behind the value attribute allows us to use well-known
components from the Java collections, such as List or Map. Just as they can handle
any kind of object, the dataTable tag can also do this. In combination with the JSF
Expression Language (EL) and its internal refl ection, we are able to implement
highly reusable presentation components for different business contexts.

The EL lets you reference an attribute by its name, which is independent from its
type. So, it is possible to use different objects that use the same name for a certain
attribute in the same context without any adaptation in the XHTML or the backing
bean. This is independent from the list type or the attribute type you use with such
an attribute name.

In our example, we have a DataTableRow4JavaAuthors class that allows us to
define the necessary attributes that we want to present in the columns. The class
is a simple POJO that defines attributes with getters and setters.

Pagination

Normally, the dataTable lists have so many objects that it is not useful to present
these all at once in the web browser. So, we need a dataTable extension that allows
limiting the number of objects to render for a single page. For this, we use the
<ice:dataPaginator> tag. It also offers navigation inside the object list. (See the
navigation bar in the screenshot above.) The ICEcube example defines the navigation
like this (/src/main/webapp/icecube/presentation/dataTable.xhtml):



	<ice:form>

		<ice:panelGrid>

			<ice:dataTable id=”table” var=”tableRows”

				value=”#{dataTable.rowsList}”

				rows=”3″ resizable=”true”>

				<ice:column>

					<f:facet name=”header”>

						<ice:outputText value=”#{icecube[

							'application.menu.presentation.

							dataTable.attribute.firstname']}”/>

					</f:facet>

					<ice:outputText

						value=”#{tableRows.firstname}”/>

				</ice:column>

			</ice:dataTable>

			<ice:dataPaginator for=”table”>

				<f:facet name=”first”>

					<ice:graphicImage style=”border:none;”

						url=”#{iceFusionConsts.skinBase}/ … /

						arrow-first.gif”></ice:graphicImage>

				</f:facet>

				<f:facet name=”last”>

					<ice:graphicImage style=”border:none;”

						url=”#{iceFusionConsts.skinBase}/ … /

						arrow-last.gif»></ice:graphicImage>

				</f:facet>

			</ice:dataPaginator>

		</ice:panelGrid>

	</ice:form>

The dataPaginator allows to define navigation controls. In our example, we
reference icons that are part of the ICEfaces 1.8 standard skin Rime. The ICEfusion
skins are based on Rime and with it, also the ICEcube skins.

The dataTable tag defines an id attribute so that the dataPaginator can reference
to it via its for attribute. The dataPaginator becomes active when the rows
attribute of the dataTable defines a number of lines that is smaller than the size
of the list of objects defined via the value attribute.

If you define a dataPaginator tag, it is always rendered even if it doesn’t need to
be. So, it is a good idea to check if the rows attribute of dataTable is really smaller
than the size of the list of objects. You can use the result in the rendered attribute
of the dataPaginator.