0% found this document useful (0 votes)

551 views

Getting Started Guide

ICEsoft Technologies, Inc. Assumes no responsibility or liability for any errors or inaccuracies. ICEfaces Getting Started Guide is a guide that will help you quickly get started. Icefaces is a trademark of ICEsoft technologies, Inc. Sun, Sun microsystems, the Sun logo, Solaris and Java are trademarks or registered trademarks of Sun Microsystems, Inc.

Uploaded by

Sharad Chavan

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

551 views

Getting Started Guide

Uploaded by

Sharad Chavan

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 51

Getting Started Guide

Copyright 2005-2006. ICEsoft Technologies, Inc. All rights reserved.

The content in this guide is protected under copyright law even if it is not distributed with software that includes an end user license
agreement.

The content of this guide is furnished for informational use only, is subject to change without notice, and should not be construed as
a commitment by ICEsoft Technologies, Inc.

ICEsoft Technologies, Inc. assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational
content contained in this guide.

ICEfaces is a trademark of ICEsoft Technologies, Inc.

Sun, Sun Microsystems, the Sun logo, Solaris and Java are trademarks or registered trademarks of Sun Microsystems, Inc. in the United
States and in other countries.

All other trademarks mentioned herein are the property of their respective owners.

ICEsoft Technologies, Inc.

Suite 300, 1717 10th Street NW
Calgary, Alberta, Canada
T2M 4S2

Toll Free: 1-877-263-3822 (USA and Canada)

Telephone: 1-403-663-3322
Fax:1-403-663-3320

For additional information, please visit the ICEfaces website: http://www.icefaces.org

ICEfaces 1.5

November 2006
About this Guide

The ICEfaces Getting Started Guide is a guide that will help you quickly get started building ICEfaces
applications. This guide is applicable to both the ICEfaces open source project and the ICEfaces Enterprise
Production Suite (ICEfaces EPS). By reading through this guide, you will:
• Gain a basic understanding of what ICEfaces is and what it can do for you.
• Install ICEfaces and run the sample applications on your local application server.
• Work through a basic ICEfaces tutorial that transforms a standard JSF application into a rich web
application powered by ICEfaces.
• Understand how to integrate ICEfaces with various J2EE application servers and development
environments.
For more information about ICEfaces, visit the ICEfaces Web site at:
http://www.icefaces.org

In this guide...
We have organized this guide into these chapters to help you get started using ICEfaces quickly:
• Chapter 1: Introduction to ICEfaces — Provides an overview of ICEfaces and its key features and
capabilities.
• Chapter 2: Configuring Your Environment for ICEfaces — Describes how to set up the ICEfaces
environment on your local Tomcat server to run the sample applications and tutorial included with the
installation.
• Chapter 3: Running the ICEfaces Sample Applications — Highlights, through several sample
applications, the features and capabilities that ICEfaces technology provides.
• Chapter 4: ICEfaces Tutorial: The TimeZone Application — Demonstrates how to transform a
standard JSF application into a rich interactive ICEfaces application through a series of tutorial
exercises. Each exercise in the tutorial illustrates a key capability of ICEfaces.
• Chapter 5: Configuring Other Environments for ICEfaces — Provides details for setting up other
development environments to use ICEfaces.

iii
Prerequisites
ICEfaces applications are JSF applications, and as such, the only prerequisite to working with ICEfaces is
that you must be familiar with JSF application development. A J2EE™ 1.4 Tutorial, which includes several
chapters describing JSF technology and application development, is available at:
http://java.sun.com/j2ee/1.4/docs/tutorial/doc/

ICEfaces Documentation
You can find the following additional ICEfaces documentation at the ICEfaces Web site
(http://documentation.icefaces.org):
• ICEfaces Developer’s Guide — Includes materials targeted for ICEfaces application developers and
includes an in-depth discussion of the ICEfaces architecture and key concepts, as well as reference
material related to markup, APIs, components, and configuration.
• ICEfaces Release Notes — Read the ICEfaces Release Notes to learn about the new features included
in this ICEfaces CE release.
For additional information about enterprise-scale ICEfaces development, visit the ICEsoft Web site
(http://www.icesoft.com/products/icefaces.html) and refer to this document:
• ICEfaces EPS Developer’s Guide — ICEfaces EPS is an extension to ICEfaces. The ICEfaces EPS
Developer’s Guide describes additional features related to large-scale production deployments of
ICEfaces applications. This guide is available only with ICEfaces EPS.

ICEfaces Technical Support

For more information about ICEfaces, visit the ICEfaces Technical Support page at:
http://support.icefaces.org/

iv
Contents

About this Guide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iii

Chapter 1 Introduction to ICEfaces . . . . . . . . . . . . . . . . . . . . . . . . 1

Chapter 2 Configuring Your Environment for ICEfaces . . . . . . . . . 3
Prerequisites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Java 2 Platform, Standard Edition . . . . . . . . . . . . . . . . . . . . . 3
Ant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Tomcat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Web Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
ICEfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
ICEfaces Library Dependencies . . . . . . . . . . . . . . . . . . . . . . . 6

Chapter 3 Running the ICEfaces Sample Applications. . . . . . . . . . 8

AuctionMonitor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
AddressForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Component Showcase . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Chapter 4 ICEfaces Tutorial: The TimeZone Application . . . . . . . 12

Overview of the TimeZone Application . . . . . . . . . . . . . . . . . . . . 14
Step 1 – Basic JSF TimeZone Application . . . . . . . . . . . . . . . . . . . 14
Creating a JSP Page with Standard JSF and HTML Tags . . . . 14
Creating the Backing JavaBean (TimeZoneBean.java) . . . . . . 16
Binding the Bean to the JSP Page . . . . . . . . . . . . . . . . . . . . 20
Configuring the Web Application . . . . . . . . . . . . . . . . . . . . . 20
Building and Deploying timezone1 . . . . . . . . . . . . . . . . . . . 21
Step 2 – Integrating ICEfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Turning JSP into JSP Document . . . . . . . . . . . . . . . . . . . . . 23
Registering ICEfaces Servlets . . . . . . . . . . . . . . . . . . . . . . . 23
Building and Deploying timezone2 . . . . . . . . . . . . . . . . . . . 24
Step 3 – Dynamic Updating—Make the Clocks Tick . . .. . . . .. . . . 24
Enhancing the TimeZoneBean . . . . . . . . . . . . .. . . . .. . . . 25
Configuring ICEfaces for Concurrent Views . . . .. . . . .. . . . 26
Building and Deploying timezone3 . . . . . . . . . .. . . . .. . . . 27
Step 4 – Dynamic Table Rendering . . . . . . . . .. . . . .. . . . .. . . . 28
Modifying timezone.jspx . . . . . . . . . . . .. . . . .. . . . .. . . . 28
Modifying TimeZoneBean.java . . . . . . . .. . . . .. . . . .. . . . 30
Modifying TimeZoneWrapper.java . . . . . .. . . . .. . . . .. . . . 31
Building and Deploying timezone4 . . . . .. . . . .. . . . .. . . . 32
Step 5 – Applying Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Adding a Style Sheet to the Application . . . . . . . . . . . . . . . . 33
Adding Images to the Application . . . . . . . . . . . . . . . . . . . . 33
v
Contents (continued)

Implementing Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Building and Deploying timezone5 . . . . . . . . . . . . . . . . . . . 37
Step 6 – Integrating Facelets . . . . . . . . . . . . . . . . . . . . . . .. . . . 37
Facelets Dependencies . . . . . . . . . . . . . . . . . . . . . . .. . . . 37
Configuring for Facelets . . . . . . . . . . . . . . . . . . . . . .. . . . 38
Change Web Files from JSP Document to Facelets . . . .. . . . 39
Building and Deploying timezone6 . . . . . . . . . . . . . . .. . . . 39
Step 7 – Capitalize on Facelets . . . . . . . . . . . . . . . . . . . . . . . . . 39
Putting the TimeZoneBean in Charge . . . . . . . . . . . . . . . . . 39
Adding New Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Updating TimeZoneBean.java . . . . . . . . . . . . . . . . . . . . . . 41
Building and Deploying timezone7 . . . . . . . . . . . . . . . . . . . 42

Chapter 5 Configuring Other Environments for ICEfaces . . . . . . 43

J2EE Application Servers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
J2EE Integrated Development Environments . . . . . . . . . . . . . . . . 43

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

vi
Chapter 1 Introduction to ICEfaces

ICEfaces™ is the industry's first standards-compliant AJAX-based solution for rapidly creating
pure-Java, rich web applications that are easily maintained, extended, and scaled, at very low cost.
ICEfaces provides a rich web presentation environment for JavaServer Faces (JSF) applications that
enhances the standard JSF framework and lifecycle with AJAX-based interactive features. ICEfaces
replaces the standard HTML-based JSF renderers with Direct-to-DOM (D2D) renderers, and introduces
a lightweight AJAX bridge to deliver presentation changes to the client browser and to communicate
user interaction events back to the server-resident JSF application. Additionally, ICEfaces provides an
extensive AJAX-enabled component suite that facilitates rapid development of rich interactive web-
based applications. The basic architecture of an ICEfaces-enabled application is shown in Figure 1
below.

Figure 1 ICEfaces-enabled JSF Application

The rich web presentation environment enabled with ICEfaces provides the following features:
• Smooth, incremental page updates that do not require a full page refresh to achieve presentation
changes in the application. Only elements of the presentation that have changed are updated
during the render phase.
• User context preservation during page update, including scroll position and input focus.
Presentation updates do not interfere with the user’s ongoing interaction with the application.

1
Introduction to ICEfaces

These enhanced presentation features of ICEfaces are completely transparent from the application
development perspective. Any JSF application that is ICEfaces-enabled will benefit.
Beyond these transparent presentation features, ICEfaces introduces additional rich presentation
features that the JSF developer can leverage to further enhance the user experience. Specifically, the
developer can incorporate these features:
• Intelligent form processing through a technique called Partial Submit. Partial Submit
automatically submits a form for processing based on some user-initiated event, such as tabbing
between fields in a form. The automatic submission limits form processing to the single control that
has been altered, but allows the application lifecycle to execute in response to that change. This
means that the application developer can introduce intelligent form processing logic that reacts
instantaneously to user interactions with the form.
• Server-initiated asynchronous presentation data push. Standard JSF applications can only
deliver presentation changes in response to a user-initiated event, typically some type of form
submit. ICEfaces introduces a server-initiated rendering that enables the server-resident application
logic to push presentation changes to the client browser in response to changes in the application
state. This enables application developers to design systems that deliver data to the user in a near-
real-time asynchronous fashion.

2
Chapter 2 Configuring Your
Environment for
ICEfaces

This chapter contains instructions to help you get up and running quickly with ICEfaces technology. We
start by outlining the prerequisites for a standard configuration using a Java 2 Standard Edition (J2SE)
Platform, Tomcat, and Ant to help build and deploy the ICEfaces sample applications and tutorials.
If you would like to run the sample applications or the tutorial in your chosen development environment,
or with a different application server, refer to Chapter 5, Configuring Other Environments for
ICEfaces, on page 43.

Prerequisites
This guide is intended to be used by Java developers with some level of enterprise experience and a
basic understanding of JavaServer Faces (JSF). If you haven't already done so, we recommend that you
review the Sun JSF Tutorial found at:
http://java.sun.com/j2ee/1.4/docs/tutorial/doc/JSFIntro.html
To run the sample ICEfaces applications, you will need to download and install the following:
• Java 2 Platform, Standard Edition
• Ant
• Tomcat
• ICEfaces
• Web browser (if you don’t already have one installed)
The following sections provide detailed instructions for downloading the software to set up an
environment where you can run the ICEfaces sample applications and tutorial.

Java 2 Platform, Standard Edition

To run the ICEfaces sample applications with Tomcat, you will need to install a version of the Java 2
Standard Edition (J2SE) Platform, version 1.4.2 or higher.
If you already have Java installed on your system, verify your version by typing the following on the
command line:
java -version
To upgrade or install the latest release of the J2SE, visit the Sun web site:
http://java.sun.com/downloads/index.html

3
Configuring Your Environment for ICEfaces

Installers and instructions are provided for the various systems that Sun supports. The demo
applications can be run on any version of Windows, Linux, and Mac OS X capable of running J2SE
version 1.4.2 or higher.

Ant

The ICEfaces tutorial relies on Ant to build and deploy the various stages of the tutorial application. You
will need Ant version 1.6.3 or higher for the build files provided in this ICEfaces release.
If you already have a version of Ant installed, you can verify that you have a recommended version by
typing the following on a command line:
ant -version
To upgrade your current version or install a new version of Ant, visit the following location:
http://ant.apache.org/
If you are not familiar with Ant, detailed instructions for downloading and installing Ant for your
environment are available in the online manual at:
http://ant.apache.org/manual/index.html

Tomcat

Java web applications require an appropriate J2EE runtime environment. ICEfaces applications require
support for servlets and JavaServer Pages (JSP). Tomcat is a popular choice for this type of development
because the ICEfaces code has been extensively tested on Tomcat.
Tomcat is available from the Apache Jakarta Project at:
http://jakarta.apache.org/tomcat/
Download and install Tomcat 5.x according to the instructions provided with the software. Although it
is possible to run ICEfaces applications in other standard J2EE containers, all the instructions provided
in this guide refer to Tomcat. You should be able to use any 5.x version of Tomcat (either 5.0.x or 5.5.x).
Once Tomcat is successfully installed, follow the instructions to start the server. This will differ
depending on what platform you are using.

Web Browser

Web applications use a web browser as the client. This ICEfaces distribution has been verified with the
following browsers:

Vendor Product Version

Microsoft Internet Explorer 6.x+, 7

Mozilla Firefox 1.x+

Mozilla Mozilla 1.7.x+

Apple Safari 1.3+

Netscape Netscape 7.x+

4
Configuring Your Environment for ICEfaces

ICEfaces

If you are reading this document, you may have already downloaded and installed ICEfaces. If you
haven't, you can get the latest version of ICEfaces from:
http://www.icefaces.org
A binary and source code distribution of ICEfaces are available. With either distribution, begin unzipping
ICEfaces to your preferred location. If you downloaded the sorce code distribution, the resulting
directory structure should look similar to the structure shown in Figure 2. If you downloaded the binary
distribution, the sorce code directories bridge component and core will not be present.

Figure 2 ICEfaces Directory Structure

5
Configuring Your Environment for ICEfaces

ICEfaces Library Dependencies

The following lists the ICEfaces dependencies on the JAR files when required.

ICEfaces Runtime Dependencies

The following JARs are required to use ICEfaces:
• backport-util-concurrent.jar
• commons-beanutils.jar
• commons-collections.jar
• commons-digester.jar
• commons-fileupload-1.0.jar
• commons-logging.jar
• commons-logging-api.jar
• el-api.jar
• icefaces.jar
• icefaces-comps.jar
• icefaces-enterprise.jar (ICEfaces EPS only)
• xercesImpl.jar
• xml-apis.jar

ICEfaces Component Runtime Dependencies

• acegi-security-1.0.1.jar (required only if component security featrues are used)
• krysalis-jCharts-1.0.1-alpha-1.jar (required only if chart component used)

ICEfaces Facelets Support

The following files are required if using Facelets with ICEfaces:
• el-ri.jar
• icefaces-facelets.jar
• servlet-api.jar

ICEfaces Ant Build Script Support

The following files are required to use Ant scripts included with ICEfaces:
• Apache Ant (v1.6.3 or greater, not included)
• catalina-ant.jar
• jasper-runtime.jar
• jasper-compiler.jar

6
Configuring Your Environment for ICEfaces

ICEfaces Examples Applications and Tutorials

The following files are required to compile and run some of the tutorials and example applications
included with this release:
• jsp-api.jar
• jstl.jar (timezone1, only)
• servlet-api.jar

Sun JSF 1.1 RI Runtime

• jsf-api.jar
• jsf-impl.jar

Apache MyFaces JSF 1.1 Runtime

• commons-discovery.jar
• commons-el.jar
• commons-lang-2.1.jar
• myfaces-api.jar
• myfaces-impl.jar

7
Chapter 3 Running the ICEfaces
Sample Applications

ICEfaces is bundled with three sample applications: Auction Monitor, Address Form, and Component
Showcase.
If you have downloaded the binary distribution of ICEfaces, these applications are available in prebuilt
WARs located at:
[install_dir]/ICEfaces-1.5-bin/icefaces/samples/

If you downloaded the source code distribution of ICEfaces, it is necessary to build the samples. This
is accomplished by running ant from the [install_dir]/ICEfaces-1.5-src/icefaces/
directory. This will build all of the sample bundles and place them in the distribution directory at:
[install_dir]/ICEfaces-1.5-src/icefaces/dist/samples/

The WARs can be deployed to any supported Java Application Servers. If you are working with Tomcat,
the quickest and easiest way to deploy a WAR file is to copy the file into the webapps directory of the
Tomcat installation. By default, Tomcat periodically checks this directory for updates and, if it finds a
new WAR file, it automatically deploys the application. Once you've copied the WAR file into webapps
and Tomcat has deployed the application, you can view and interact with it by opening a web browser
and typing in the appropriate URL for the application that you want to browse.

Application Archive URL

AuctionMonitor auctionMonitor.war http://localhost:8080/auctionMonitor/
AddressForm address.war http://localhost:8080/address/
Component component- http://localhost:8080/component-showcase/
Showcase showcase.war

The sample applications highlight the various features and capabilities that ICEfaces technology
provides.

8
Running the ICEfaces Sample Applications

AuctionMonitor

ICEfaces AuctionMonitor (auctionMonitor.war) simulates the tracking of live auctions with ticking
countdown timers and interactive bidding. It also includes a simple integrated chat and some demo
notes on how to interact with the AuctionMonitor.

Figure 3 AuctionMonitor Sample Application

The application uses a number of standard JSF components: dataTable, commandButton, and
panelGrid. ICEfaces and Direct-to-DOM rendering provides for asynchronous and dynamic updates of
these components without a full page refresh. This is illustrated by the ticking clocks, real-time bid
updates, the dynamically rendered buttons, the ability to hide and show table rows on demand, and the
integrated chat session. For more information on these ICEfaces features, refer to the ICEfaces
Developer’s Guide.
Open the AuctionMonitor in two browser windows to fully appreciate the interactive features of this
application.

9
Running the ICEfaces Sample Applications

AddressForm

ICEfaces AddressForm (address.war) shows how a prototypical address form can be validated and
updated on the fly using partial submits and without fully refreshing the page.

Figure 4 AddressForm Sample Application

Typically, this type of form would require a user to fill in all the fields and submit it for server-side
validation. That, or a raft of JavaScript code to do client-side validation. However, using JavaServer
Faces components and ICEfaces, you can do a partial submit with each field entry and only offer the
submit button when the form is completely validated. As each field is entered, a partial form submission
is sent to the server and only those components that require updates are changed. It's rich, interactive,
efficient, and lightweight. Most importantly, it doesn't require any JavaScript programming.

10
Running the ICEfaces Sample Applications

Component Showcase

The Component Showcase (component-showcase.war) demo shows how the current ICEfaces
custom components and extended components can be used together to build a rich web application.
The full source to this demonstration is available in the src directory. The Component Showcase also
provides a short description of what each component does, a demonstration of the component working,
the demonstrations source and the component TLD.

Figure 5 Component Showcase

The application also lets a user switch between the two available CSS Themes. Use the Component
Showcase to quickly see how each custom component is used, and as a detailed reference to each
component’s properties.

11
Chapter 4 ICEfaces Tutorial: The
TimeZone Application

This tutorial guides you through a series of exercises that takes a basic JavaServer Faces application
and transforms it, using ICEfaces, into a much more dynamic application with an enriched user
experience. The tutorial begins with a simple web application called TimeZone and demonstrates how
to build the ICEfaces-enriched application shown in Figure 6.

Figure 6 ICEfaces TimeZone Application

This tutorial consists of seven steps with increasing levels of richness, each designed to demonstrate
ICEfaces capabilities:

12
ICEfaces Tutorial: The TimeZone Application

Step 1 – Basic JSF TimeZone Application shows a basic JSF application built entirely from basic
JSF HTML components in JSP.
Step 2 – Integrating ICEfaces uses the same basic JSF application, converted to JSP Document,
running with ICEfaces.
Step 3 – Dynamic Updating—Make the Clocks Tick modifies the application to add ticking
clocks and to support separate but concurrent instances of the TimeZone application from
multiple web browser windows or tabs.
Step 4 – Dynamic Table Rendering adds a dynamic data table, which can be manipulated by
checkboxes, to make the TimeZone application more interactive.
Step 5 – Applying Styles demonstrates how to add CSS formatting and styles to enhance the
appearance of the TimeZone application.
Step 6 – Integrating Facelets uses the same JSF application, converted to XHTML, running with
ICEfaces and Facelets together.
Step 7 – Capitalize on Facelets uses Facelets functionality to do header inclusion and
dynamically generate content from the Java bean.
The seven exercises are organized in the directory structure shown in Figure 7. Prior to starting this
tutorial, we recommend that you read Chapter 2, Configuring Your Environment for ICEfaces,
on page 3 to ensure that your environment is configured properly to deploy and execute ICEfaces
applications on your J2EE application server.

Figure 7 TimeZone Tutorial Directory Structure

13
ICEfaces Tutorial: The TimeZone Application

Overview of the TimeZone Application

By following all the steps in this tutorial, you will build an ICEfaces application called TimeZone (shown
in Figure 6 on page 12) from source code and deploy it to your local Tomcat server.
The application is not entirely an accurate representation of all time zones represented on the map, but
serves as an effective example of how to enrich a web application with ICEfaces. The application was
deliberately simplified to demonstrate the features that ICEfaces provides to improve the richness and
interactivity of a web application.
The completed ICEfaces TimeZone application has the following features:
• The current time, using the time zone of the application server, is displayed in the top left of the
table.
• To the right of the server's current time is a second time display for an alternate time zone, which
can be chosen by clicking on any section of the map.
• Below the map are checkboxes that, when selected, add time zone details to the table at the
bottom. Deselecting a checkbox removes the details from the table.

Step 1 – Basic JSF TimeZone Application

The first step is to create a regular JavaServer Faces (JSF) version of the TimeZone web application
using stock JSF components. All the files for this part of the tutorial are in the timezone1 directory.

Creating a JSP Page with Standard JSF and HTML Tags

Our first iteration of the TimeZone application (see Figure 8 below) has a panelGrid component at the
top to hold the two separate time displays:
• the application's host server time, and
• the time for the zone selected from the map.
A second panelGrid below holds six time zone map images, implemented as commandButton
components. When a region of the map is clicked, the display at the top right updates to display the
selected region’s time and time zone.

14
ICEfaces Tutorial: The TimeZone Application

Figure 8 TimeZone Application as Stock JSF Application

The code for the timezone.jsp page is as follows:

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<f:view>
<html>
<head><title>ICEfaces: TimeZone Sample Application</title></head>
<body>
<h3>ICEfaces: TimeZone Sample Application</h3>
<h:form>
<h:panelGrid columns="2">
<h:outputText style="font-weight:600" value="Server Time Zone"/>
<h:outputText style="font-weight:600" value="Time Zone Selected from Map"/>
<h:outputText value="#{timeZoneBean.serverTimeZoneName}"/>
<h:outputText value="#{timeZoneBean.selectedTimeZoneName}"/>
<h:outputText style="font-weight:800" value="#{timeZoneBean.serverTime}"/>
<h:outputText style="font-weight:800"
value="#{timeZoneBean.selectedTime}"/>
</h:panelGrid>
<h:panelGrid columns="6" cellspacing="0" cellpadding="0">
<h:commandButton id="GMTminus10" image="images/hawaii.jpg"
actionListener="#{timeZoneBean.listen}"/>
<h:commandButton id="GMTminus9" image="images/alaska.jpg"
actionListener="#{timeZoneBean.listen}"/>
<h:commandButton id="GMTminus8" image="images/pacific.jpg"
actionListener="#{timeZoneBean.listen}"/>
<h:commandButton id="GMTminus7" image="images/mountain.jpg"
actionListener="#{timeZoneBean.listen}"/>
<h:commandButton id="GMTminus6" image="images/central.jpg"
actionListener="#{timeZoneBean.listen}"/>

15
ICEfaces Tutorial: The TimeZone Application

<h:commandButton id="GMTminus5" image="images/eastern.jpg"

actionListener="#{timeZoneBean.listen}"/>
</h:panelGrid>
</h:form>
</body>
</html>
</f:view>
Most of the components are dynamically bound to backing JavaBeans through JSF expression language
bindings as shown below:
<h:outputText value="#{timeZoneBean.serverTimeZoneName}"/>

Note: Throughout this tutorial, we use boldface text to highlight code we want to bring
to your attention. ICEfaces does not require any code to be typed in bold.

The commandButton components also use JSF expression language bindings in the actionListener
attribute as shown below.
<h:commandButton id="GMTminus10" image="images/hawaii.jpg"
actionListener="#{timeZoneBean.listen}"/>
The id attribute of a commandButton component is used to pass information into the bean identifying
which button was pressed.
<h:commandButton id="GMTminus10" image="images/hawaii.jpg"
actionListener="#{timeZoneBean.listen}"/>

Creating the Backing JavaBean (TimeZoneBean.java)

The com.icesoft.faces.tutorial.TimeZoneBean class is the backing bean for the timezone.jsp page.
The bean stores the current state of the selections and all the time zone information.
The code for the TimeZoneBean.java class is as follows:
package com.icesoft.tutorial;

import javax.faces.context.FacesContext;
import javax.faces.component.UIComponent;
import javax.faces.event.ActionEvent;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.TimeZone;

/**
* Bean backing the Time Zone application.
* Also controls time zone information during the session.
*/

public class TimeZoneBean {

/**
* The default {@link TimeZone} for this host server.
*/
16
ICEfaces Tutorial: The TimeZone Application

private TimeZone serverTimeZone;

/**
* {@link DateFormat} used to display the server time.
*/
private DateFormat serverFormat;

/**
* Active {@link TimeZone} displayed at top of UI.
* Changes when a time zone is selected by pressing one of six
* commandButtons in UI map.
*/
private TimeZone selectedTimeZone;

/**
* {@link DateFormat} used to display the selected time.
*/
private DateFormat selectedFormat;

/**
* List of all possible {@link TimeZoneWrapper} objects,
* which must mirror the map UI.
*/
private ArrayList allTimeZoneList;

/**
* Constructor initializes time zones.
*/
public TimeZoneBean(){
init();
}

/**
* Initializes this TimeZoneBean's properties.
*/
private void init() {
serverTimeZone = TimeZone.getDefault();
serverFormat = buildDateFormatForTimeZone( serverTimeZone );
selectedTimeZone = TimeZone.getTimeZone("Etc/GMT+0");
// selected time zone set to UTC as default
selectedFormat = buildDateFormatForTimeZone( selectedTimeZone );

// Entries in this list are hardcoded to match entries in

// the timezone web file, so no parameters can be changed.
allTimeZoneList = new ArrayList( 6 );
allTimeZoneList.add(new TimeZoneWrapper("Pacific/Honolulu",
"GMTminus10"));
allTimeZoneList.add(new TimeZoneWrapper("America/Anchorage",
"GMTminus9"));
allTimeZoneList.add(new TimeZoneWrapper("America/Los_Angeles",
"GMTminus8"));
allTimeZoneList.add(new TimeZoneWrapper("America/Phoenix",
"GMTminus7"));
allTimeZoneList.add(new TimeZoneWrapper("America/Chicago",
"GMTminus6"));
allTimeZoneList.add(new TimeZoneWrapper("America/New_York",
"GMTminus5"));
}

17
ICEfaces Tutorial: The TimeZone Application

/**
* Gets server time.
*
* @return Server time.
*/
public String getServerTime() {
return formatCurrentTime( serverFormat );
}

/**
* Gets server time zone display name.
*
* @return Server time zone display name.
*/
public String getServerTimeZoneName() {
return displayNameTokenizer( serverTimeZone.getDisplayName() );
}

/**
* Gets selected time zone time.
* This is the time zone selected by one of six commandButtons from the map
* in the UI.
*
* @return selectedTimeZone time.
*/
public String getSelectedTime() {
return formatCurrentTime( selectedFormat );
}

/**
* Gets selected time zone display name.
*
* @return selectedTimeZone display name.
*/
public String getSelectedTimeZoneName() {
return displayNameTokenizer( selectedTimeZone.getDisplayName() );
}

/**
* Extracts the first word from a TimeZone displayName.
*
* @param displayName A TimeZone displayName.
* @return String The first word from the TimeZone displayName.
*/
public static String displayNameTokenizer(String displayName) {
if( displayName == null ) {
displayName = "";
}
else {
int firstSpace = displayName.indexOf(' ');
if (firstSpace != -1) {
displayName = displayName.substring(0, firstSpace);
}
}
return displayName;
}

public static DateFormat buildDateFormatForTimeZone(TimeZone timeZone) {

SimpleDateFormat currentFormat = new SimpleDateFormat("EEE, HH:mm:ss");
18
ICEfaces Tutorial: The TimeZone Application

Calendar currentZoneCal = Calendar.getInstance( timeZone );

currentFormat.setCalendar( currentZoneCal );
currentFormat.setTimeZone( timeZone );
return currentFormat;
}

public static String formatCurrentTime(DateFormat dateFormat) {

Calendar cal = dateFormat.getCalendar();
cal.setTimeInMillis( System.currentTimeMillis() );
return dateFormat.format( cal.getTime() );
}

/**
* Each TimeZoneWrapper has an id of a component in the UI
* that corresponds to its time zone. By this, if an event comes
* from a component in the web page, then this will return the
* relevant TimeZoneWrapper.
*
* @param componentId Id of component in UI
* @return TimeZoneWrapper
*/
private TimeZoneWrapper getTimeZoneWrapperByComponentId(String componentId)
{
for(int i = 0; i < allTimeZoneList.size(); i++) {
TimeZoneWrapper tzw = (TimeZoneWrapper) allTimeZoneList.get( i );
if( tzw.isRelevantComponentId(componentId) )
return tzw;
}
return null;
}

//
// Implicit interfaces as defined by the callbacks in the web files
//

/**
* Listens to client input from commandButtons in the UI map and sets the
* selected time zone.
*
* @param event ActionEvent.
*/
public void listen(ActionEvent event) {
UIComponent comp = event.getComponent();
FacesContext context = FacesContext.getCurrentInstance();
String componentId = comp.getClientId(context);
TimeZoneWrapper tzw = getTimeZoneWrapperByComponentId( componentId );
if( tzw != null ) {
selectedTimeZone = TimeZone.getTimeZone( tzw.getId() );
selectedFormat = buildDateFormatForTimeZone( selectedTimeZone );
}
}
} // End of TimeZoneBean class

TimeZoneBean stores the current state and time zone information, and also handles the actions
generated by clicking the commandButtons. The listen(ActionEvent event) method in the bean
takes the ID of the commandButton clicked, and uses the helper TimeZoneWrapper objects to
determine which TimeZone ID should be used to instantiate the selectedTimeZone object. For clarity,

19
ICEfaces Tutorial: The TimeZone Application

the commandButton IDs represent the offset from Greenwich Mean Time (GMT) of their respective
TimeZone objects. The IDs can be arbitrary, as long as they are all unique in the web application, and
match between the web file and the Java event handler.

Binding the Bean to the JSP Page

JSF uses an XML file called faces-config.xml to manage the configuration of beans so that the beans'
methods are available to components in the page.
The code for the faces-config.xml file is as follows:
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces

Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">

<faces-config xmlns="http://java.sun.com/JSF/Configuration">

<managed-bean>
<managed-bean-name>timeZoneBean</managed-bean-name>
<managed-bean-class>com.icesoft.tutorial.TimeZoneBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>

</faces-config>
The entry bean is given a name by which it can be referred to in the JSP page and the name is also
associated with a Java class so that it can be instantiated as required. The bean is also given a scope
to indicate how the bean can be accessed.

Configuring the Web Application

At the heart of it, the TimeZone application is a standard J2EE web application that requires a
deployment descriptor. This means we need to create a web.xml file.
The code for the web.xml file is as follows:
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"

"http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app>

<display-name>ICEfaces Tutorial: Timezone Part 1</display-name>

<description>
ICEfaces Tutorial: Timezone Part 1
</description>

<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>server</param-value>
</context-param>

<context-param>
20
ICEfaces Tutorial: The TimeZone Application

<param-name>javax.faces.application.CONFIG_FILES</param-name>
<param-value>/WEB-INF/faces-config.xml</param-value>
</context-param>

<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup> 1 </load-on-startup>
</servlet>

<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>

</web-app>
This is a fairly typical descriptor for a JSF application. The Faces Servlet is declared and configured to
load on startup. The .faces extension is mapped to the Faces Servlet.
In TimeZone 1, the deployment descriptor file for running under MyFaces, web_myfaces.xml, is exactly
the same as web.xml. It has been included for consistency with the later TimeZone steps, where the
deployment descriptor files differ.

Building and Deploying timezone1

For the tutorial applications, we rely on Ant as a build tool and Tomcat as the container to run the
application. A build.xml file has been provided that can build and deploy the application to Tomcat for
you. The build file relies on build.properties for system specific information that it needs to successfully
build and deploy the application.

21
ICEfaces Tutorial: The TimeZone Application

The content of build.properties is as follows:

tomcat.host = localhost
tomcat.port = 8080
username = nobody
password = nowhere

compile.debug = false
lib.dir = ../../lib
icefaces.jar = ../../lib/icefaces.jar
components.jar = ../../lib/icefaces-comps.jar
icefaces-facelets.jar = ../../lib/icefaces-facelets.jar

1. Edit the build.properties file to suit your environment. You will also need to modify the username
and password to correspond to some existing username and password in the Tomcat tomcat-
users.xml file or add a user with the manager role to the file if one is not already present.

Note: For security, the default Tomcat configuration does NOT include a username with
the manager role. If you have just downloaded and installed Tomcat, you will need
to add a manager role in order to deploy to Tomcat using the ant install task. An
example tomcat-users.xml file is included in the tutorial directory as a reference.
You can also refer to the documentation for Tomcat for more information.

2. To deploy the application using the build file, ensure that you have an account that will let you
deploy using the remote deployment mechanism.
3. Ensure that Tomcat is running.
4. When your environment is ready, navigate to the following directory:
<icefaces-install-dir>/tutorial/timezone1
5. To compile the source code, generate a WAR file with all the required resources and deploy it to the
running Tomcat server. From the command line, type:
ant install
By default, the WAR file created includes Sun's JSF reference implementation. If you would like to
build a WAR file using MyFaces, type the following instead:
ant -f build_myfaces.xml install
This tells ant to use the build_myfaces.xml file instead of the default build.xml. The generated WAR
file contains the appropriate MyFaces libraries and deployment descriptor (web.xml) file.
6. To interact with the application, point your web browser at the following URL, making adjustments
for your environment as required. For example, port 8080 is the default port that Tomcat uses, but
if you have changed this in your installation, alter the URL accordingly.
http://localhost:8080/timezone1
If all goes well, you should see the first incarnation of the TimeZone application running in your browser.
Clicking a different time zone on the map updates the time and time zone information in the top right
of the table.

22
ICEfaces Tutorial: The TimeZone Application

Step 2 – Integrating ICEfaces

In this step of the tutorial, we integrate ICEfaces technology into our existing JSF application. All the
files and resources for this part of the tutorial are contained in the timezone2 directory.

Turning JSP into JSP Document

JSP pages (unlike the more recent JSP Document specification) are not required to be well-formed XML
documents. ICEfaces requires well-formed XML documents, so we need to make some modifications to
our JSP page to align it with the JSP Document specification.
1. Change the file extension of the timezone.jsp file from .jsp to .jspx. This is the first step in
converting the web page to a JSP Document (XML-compatible JSP). The .jspx extension identifies
the file as an XML-compliant JSP page and allows us a bit of flexibility with our servlet mappings.
2. Remove the JSP taglib directives and declare them using xml namespaces in the JSF <f:view>
element:
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
becomes:
<f:view xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
If the page consists of well-formed JSF and XHTML tags, this is the only change necessary to convert
the page to JSP Document.

Registering ICEfaces Servlets

As an extension to JSF, ICEfaces provides its own version of the FacesServlet (PersistentFacesServlet)
as well as an additional Servlet (BlockingServlet) for handling asynchronous updates. We register these
Servlets in the deployment descriptor file (web.xml) by adding the following entries:
<servlet>
<servlet-name>Persistent Faces Servlet</servlet-name>
<servlet-class>
com.icesoft.faces.webapp.xmlhttp.PersistentFacesServlet
</servlet-class>
<load-on-startup> 1 </load-on-startup>
</servlet>

<servlet>
<servlet-name>Blocking Servlet</servlet-name>
<servlet-class>com.icesoft.faces.webapp.xmlhttp.BlockingServlet</servlet-class>
<load-on-startup> 1 </load-on-startup>
</servlet>
We also need to add a new Servlet mapping of PersistentFacesServlet to .iface.
<servlet-mapping>
<servlet-name>Persistent Faces Servlet</servlet-name>
<url-pattern>*.iface</url-pattern>
</servlet-mapping>

23
ICEfaces Tutorial: The TimeZone Application

We also need to add a couple of mappings for ICEfaces' internal use.

<servlet-mapping>
<servlet-name>Persistent Faces Servlet</servlet-name>
<url-pattern>/xmlhttp/*</url-pattern>
</servlet-mapping>

<servlet-mapping>
<servlet-name>Blocking Servlet</servlet-name>
<url-pattern>/block/*</url-pattern>
</servlet-mapping>
To support ICEfaces running under MyFaces, we need to add an additional context parameter to tell
MyFaces to use .iface as the default suffix so that requests are properly directed to ICEfaces'
PersistentFacesServlet.
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.iface</param-value>
</context-param>

Building and Deploying timezone2

If you got timezone1 to run, then your environment has been set up and is running correctly. From the
command line, navigate to the <icefaces-install-dir>/tutorial/timezone2 directory and type:
ant install
or, to run using MyFaces, type:
ant -f build_myfaces.xml install
This should compile the source code, generate a WAR file with all the required resources, and deploy it
to a running Tomcat server. To interact with the application, point your web browser at the following
URL, making adjustments for your environment as required.
http://localhost:8080/timezone2
This version of TimeZone looks identical to timezone1 and has no functional difference. However, with
little effort, we've integrated ICEfaces into our JSF application. The components are now being rendered
by the ICEfaces Direct-to-DOM (D2D) RenderKit and we are now ready to enrich this application with
some dynamic, asynchronous updates.

Step 3 – Dynamic Updating—Make the Clocks Tick

In this section, we are going to make the clocks tick by pushing updates from the server to the web
browser, changing the content dynamically, but without a full page refresh, thanks to ICEfaces and
Direct-to-DOM rendering.
We will also make some minor changes to the web.xml and faces-config.xml files, to support concurrent
instances of the application, viewed from multiple windows or tabs of the same web browser.
All the files for this part of the tutorial are in the timezone3 directory.

24
ICEfaces Tutorial: The TimeZone Application

Enhancing the TimeZoneBean

Now that we have integrated ICEfaces, the work to show the clocks tick is done in the bean. No actual
work is done to make the clocks tick because the system time updates automatically for us. Rather, at
some interval, the components that display the clock times must be rendered, and those updates must
be sent to the web browser. For this, we will use the ICEfaces specific RenderManager facilities to
manage a JSF render pass. For timezone3, the following changes are made to the TimeZoneBean.java
file.
1. First we add some imports to support the new ICEfaces features:
import com.icesoft.faces.webapp.xmlhttp.*;
import com.icesoft.faces.async.render.*;
2. Then we make the bean implement com.icesoft.faces.async.render.Renderable, so we can
use it with the RenderManager facilities:
public class TimeZoneBean implements Renderable {
3. A rendering interval is added as a bean property:
private final int renderInterval = 1000;
4. Add helper objects for maintaining the rendering state and managing the threading issues:
private PersistentFacesState state;
private IntervalRenderer clock;
5. Initialize the rendering state:
private void init() {
...
state = PersistentFacesState.getInstance();
}
6. Provide a callback method to use the RenderManager to set up the interval rendering:
public void setRenderManager(RenderManager renderManager) {
clock = renderManager.getIntervalRenderer("clock");
clock.setInterval(renderInterval);
clock.add(this);
clock.requestRender();
}

25
ICEfaces Tutorial: The TimeZone Application

7. Allow the RenderManager facilities to access the rendering state:

public PersistentFacesState getState() {
return state;
}
8. Provide a callback method to allow notification of rendering problems. An example of an expected
invocation would be when the user has closed the web browser, and so there is no target to render
to:
public void renderingException(RenderingException renderingException) {
if( clock != null ) {
clock.remove(this);
clock = null;
}
}
9. To enable use of the RenderManager requires adding it as a managed application scoped bean, and
having the application server tie it to our timeZoneBean's renderManager property. This is
accommodated by making the following changes to the faces-config.xml file.
<managed-bean>
<managed-bean-name>renderManager</managed-bean-name>
<managed-bean-class>
com.icesoft.faces.async.render.RenderManager
</managed-bean-class>
<managed-bean-scope>application</managed-bean-scope>
</managed-bean>
<managed-bean>
<managed-bean-name>timeZoneBean</managed-bean-name>
<managed-bean-class>com.icesoft.tutorial.TimeZoneBean</managed-bean-
class>
<managed-bean-scope>request</managed-bean-scope>
<managed-property>
<property-name>renderManager</property-name>
<value>#{renderManager}</value>
</managed-property>
</managed-bean>
10. The RenderManager needs to know about the context and session lifecycles. To provide the
appropriate information, the ICEfaces application needs to publish its Context events. This is
achieved by adding the following code snippet to the web.xml file:
<listener>
<listener-class>
com.icesoft.faces.util.event.servlet.ContextEventRepeater
</listener-class>
</listener>

Configuring ICEfaces for Concurrent Views

ICEfaces supports the concept of concurrent DOM viewing, which allows multiple windows or tabs of
the same browser to view distinct instances of the same application. Without concurrent DOM viewing,
pointing two different browser windows at the same application leads to unpredictable behavior since
the server-side DOM would be shared between the two views. You can see what happens by opening

26
ICEfaces Tutorial: The TimeZone Application

two browser windows (of the same browser) and direct both windows to the timezone2 demo. Clicking
on various time zones will update one view or the other but not both reliably.
Concurrent DOM viewing ensures each view has its own separate DOM and that backing beans are
appropriately scoped for their responsibilities. To configure TimeZone to support concurrent DOM
viewing, we need to modify both the deployment descriptor (web.xml or web_myfaces.xml) and the
JavaServer Faces configuration file (faces-config.xml).
1. Add a context parameter to the deployment descriptor file (web.xml or web_myfaces.xml) so that
ICEfaces is properly configured to support concurrent DOM views:
<context-param>
<param-name>com.icesoft.faces.concurrentDOMViews</param-name>
<param-value>true</param-value>
</context-param>
2. In faces-config.xml, change the scope of the TimeZoneBean from session to request:
<managed-bean>
<managed-bean-name>timeZoneBean</managed-bean-name>
<managed-bean-class>com.icesoft.tutorial.TimeZoneBean</managed-bean-
class>
<managed-bean-scope>request</managed-bean-scope>
...
</managed-bean>

This version of TimeZone looks identical to timezone1 and timezone2, but now, you should see the
clocks ticking as the page is dynamically updated with each render pass initiated by the bean. With
concurrent DOM viewing configured, we can now open timezone3 in two separate browser windows
and operate them as if they were two distinct clients with updates and changes being accurately
rendered.

Building and Deploying timezone3

To see timezone3 in action, navigate to the <icefaces-install-dir>/tutorial/timezone3 directory and type:

ant install
or, to run using MyFaces, type:
ant -f build_myfaces.xml install
This should compile the source code, generate a WAR file with all the required resources, and deploy it
to a running Tomcat server. To interact with the application, point your web browser at the following
URL, making adjustments for your environment as required.
http://localhost:8080/timezone3
This version of TimeZone looks identical to timezone1 and timezone2 but now you should see the clocks
ticking as the page is dynamically updated with each render pass initiated by the bean.

27
ICEfaces Tutorial: The TimeZone Application

Step 4 – Dynamic Table Rendering

Now that we have the page updating dynamically, let's make it more interactive. We are going to add
the ability to select time zones for which we want to see more detailed information. To do this we will
add some selectBooleanCheckbox components and a dataTable component. As the checkboxes are
selected and de-selected, the rows of the table will show or hide themselves without requiring a full
page refresh. This is accomplished using a feature called partial submit, where each form component,
such as a selectBooleanCheckbox, can trigger a partial form submission to the server when their state
is changed. This is in contrast to regular form submission where only a Submit button would send
updates to the server. The finished product will look similar to Figure 9:

Figure 9 TimeZone Application with Dynamic Table Rendering

Modifying timezone.jspx

In the timezone.jspx page, make the following changes:

1. To support partial submission, we need to use an ICEfaces specific component, which requires
adding a namespace declaration:
xmlns:ice="http://www.icesoft.com/icefaces/component"

28
ICEfaces Tutorial: The TimeZone Application

2. The standard JSF form component is replaced with the ICEfaces form component, enabling partial
submission:
<ice:form partialSubmit="true">
...
</ice:form>
3. In the panelGrid holding the map, add a row of six selectBooleanCheckbox components, under the
six commandButton components.
<ice:selectBooleanCheckbox id="Cminus10" required="false" immediate="true"
valueChangeListener="#{timeZoneBean.timeZoneChanged}"
value="#{timeZoneBean.checkboxStates['Cminus10']}"
autocomplete="off"/>
<ice:selectBooleanCheckbox id="Cminus9" required="false" immediate="true"
valueChangeListener="#{timeZoneBean.timeZoneChanged}"
value="#{timeZoneBean.checkboxStates['Cminus9']}"
autocomplete="off"/>
<ice:selectBooleanCheckbox id="Cminus8" required="false" immediate="true"
valueChangeListener="#{timeZoneBean.timeZoneChanged}"
value="#{timeZoneBean.checkboxStates['Cminus8']}"
autocomplete="off"/>
<ice:selectBooleanCheckbox id="Cminus7" required="false" immediate="true"
valueChangeListener="#{timeZoneBean.timeZoneChanged}"
value="#{timeZoneBean.checkboxStates['Cminus7']}"
autocomplete="off"/>
<ice:selectBooleanCheckbox id="Cminus6" required="false" immediate="true"
valueChangeListener="#{timeZoneBean.timeZoneChanged}"
value="#{timeZoneBean.checkboxStates['Cminus6']}"
autocomplete="off"/>
<ice:selectBooleanCheckbox id="Cminus5" required="false" immediate="true"
valueChangeListener="#{timeZoneBean.timeZoneChanged}"
value="#{timeZoneBean.checkboxStates['Cminus5']}"
autocomplete="off"/>

4. A dataTable is added below the panelGrid component in the UI. This dataTable will display
information on all the selected time zones, getting its data from timeZoneBean's
checkedTimeZoneList property, which is a list of TimeZoneWrapper objects. The properties of each
object in the list are then displayed through JSF expression language bindings in outputText
components in each row of the dataTable.
<h:dataTable frame="box" value="#{timeZoneBean.checkedTimeZoneList}"
var="checkedTimeZone">
<f:facet name="header"><h:outputText value="Checked Time
Zones"/></f:facet>
<h:column>
<f:facet name="header"><h:outputText value="Time Zone"/></f:facet>
<h:outputText value="#{checkedTimeZone.displayName}"/>
</h:column>
<h:column>
<f:facet name="header"><h:outputText value="Location"/></f:facet>
<h:outputText value="#{checkedTimeZone.location}"/>
</h:column>
<h:column>
<f:facet name="header"><h:outputText value="Uses DST"/></f:facet>
<h:outputText value="#{checkedTimeZone.useDaylightTime}"/>
</h:column>
<h:column>

29
ICEfaces Tutorial: The TimeZone Application

<f:facet name="header"><h:outputText value="In DST"/></f:facet>

<h:outputText value="#{checkedTimeZone.inDaylightTime}"/>
</h:column>
<h:column>
<f:facet name="header"><h:outputText value="Time"/></f:facet>
<h:outputText value=" #{checkedTimeZone.time} "/>
</h:column>
</h:dataTable>

Modifying TimeZoneBean.java

Make the following additions to TimeZoneBean.java.

1. Add an import, to allow our use of JSF ValueChangeEvents.
import javax.faces.event.ValueChangeEvent;
2. Declare a list to hold the user's checked time zone selections.
private ArrayList checkedTimeZoneList;
3. Give the IDs of the selectBooleanCheckbox components, from timezone.jspx, for their respective
time zones. These are Cminus5 through Cminus10. This way, when we receive a
ValueChangeEvent, we'll know to which time zone it applies.
allTimeZoneList.add(new TimeZoneWrapper(
"Pacific/Honolulu", "GMTminus10", "Cminus10"));
allTimeZoneList.add(new TimeZoneWrapper(
"America/Anchorage", "GMTminus9", "Cminus9"));
allTimeZoneList.add(new TimeZoneWrapper(
"America/Los_Angeles", "GMTminus8", "Cminus8"));
allTimeZoneList.add(new TimeZoneWrapper(
"America/Phoenix", "GMTminus7", "Cminus7"));
allTimeZoneList.add(new TimeZoneWrapper(
"America/Chicago", "GMTminus6", "Cminus6"));
allTimeZoneList.add(new TimeZoneWrapper(
"America/New_York", "GMTminus5", "Cminus5"));

4. Initialize the list for storing the time zones that the user has checked, and wishes to display in the
dataTable.
checkedTimeZoneList = new ArrayList();

5. Provide a getter accessor method for the checkedTimeZoneList bean property.

public ArrayList getCheckedTimeZoneList(){
return checkedTimeZoneList;
}
6. Add a timeZoneChanged(ValueChangeEvent event) method to be called when a
selectBooleanCheckbox is checked or unchecked. This uses our TimeZoneWrapper helper objects
to map from the selectBooleanCheckbox component ID to the appropriate time zone, and its related
information. Simply adding or removing the TimeZoneWrapper to or from checkedTimeZoneList is
sufficient to add or remove a row in the web page's dataTable.
public void timeZoneChanged(ValueChangeEvent event){
UIComponent comp = event.getComponent();
FacesContext context = FacesContext.getCurrentInstance();
30
ICEfaces Tutorial: The TimeZone Application

String componentId = comp.getClientId(context);

TimeZoneWrapper tzw = getTimeZoneWrapperByComponentId( componentId );
if( tzw != null ) {
boolean checked = ((Boolean)event.getNewValue()).booleanValue();
// If checkbox is checked, then add tzw to checkedTimeZoneList
if( checked ) {
if( !checkedTimeZoneList.contains(tzw) ){
checkedTimeZoneList.add( tzw );
}
// Otherwise, if checkbox is unchecked, then remove tzw from
// checkedTimeZoneList
else {
checkedTimeZoneList.remove( tzw );
}
}
checkboxStates.put(tzw.getCheckboxId(),
checked ? "true" :"false");
}
}

Modifying TimeZoneWrapper.java

Each row in the dataTable is populated by a TimeZoneWrapper bean. Each cell in the dataTable is then
populated by properties of the TimeZoneWrapper beans. So, we have to modify TimeZoneWrapper to
add the requisite properties and accessor methods.
1. Add imports for the utility classes we use for calculating times with.
import java.util.TimeZone;
import java.util.Calendar;
import java.text.DateFormat;

2. Declare a String to hold the associated selectBooleanCheckbox component ID.

private String checkboxId;
3. Declare a helper DateFormat instance for the time bean property.
private DateFormat dateFormat;
4. Alter the constructor to initialize the new fields; checkboxId and dateFormat.
/**
* @param id id used to identify the time zone.
* @param mapId map button component id in web page
* @param checkId checkbox component id in web page
*/
public TimeZoneWrapper(String id, String mapId, String checkId)
{
this.id = id;
this.mapCommandButtonId = mapId;
this.checkboxId = checkId;
this.dateFormat = TimeZoneBean.buildDateFormatForTimeZone(
TimeZone.getTimeZone(id) );
}

5. Add getter accessor methods for the displayName, time, useDaylightTime, inDaylightTime, location
properties.
31
ICEfaces Tutorial: The TimeZone Application

public String getDisplayName() {

TimeZone timeZone = TimeZone.getTimeZone(id);
return TimeZoneBean.displayNameTokenizer( timeZone.getDisplayName() );
}
...
public String getTime() {
return TimeZoneBean.formatCurrentTime( dateFormat );
}
...
public String getUseDaylightTime() {
TimeZone timeZone = TimeZone.getTimeZone(id);
if( timeZone.useDaylightTime() )
return "Yes";
return "No";
}
...
public String getInDaylightTime() {
TimeZone timeZone = TimeZone.getTimeZone(id);
Calendar cal = Calendar.getInstance(timeZone);
if( timeZone.inDaylightTime(cal.getTime()) )
return "Yes";
return "No";
}
...
public String getLocation() {
return id;
}

6. Modify isRelevantComponentId(String) to add support for our new checkbox component ID.
public boolean isRelevantComponentId(String componentId) {
boolean relevant = ( componentId.endsWith(mapCommandButtonId) ||
componentId.endsWith(checkboxId) );
return relevant;
}

7. Add a getter accessor method for our new checkboxId property.

public String getCheckboxId() {
return checkboxId;
}

Building and Deploying timezone4

To run timezone4, navigate to the <icefaces-install-dir>/tutorial/timezone4 directory and type:

32
ICEfaces Tutorial: The TimeZone Application

This version of TimeZone should now have checkboxes. As you click the checkboxes, the rows in the
table should show and hide themselves accordingly. The interface is now richer and more dynamic
thanks to ICEfaces and Direct-to-DOM rendering.

Step 5 – Applying Styles

This step of the tutorial describes how to apply styles throughout the TimeZone application to make it
more visually appealing. This is an important aspect of web application development, and shows how
the dual roles of application developer and page developer come together to put the final polish on an
application.

Adding a Style Sheet to the Application

A Cascading Style Sheet is added to the web folder of timezone.jspx. This file is accessed by the
application through the following line, added to timezone.jspx under the <head> tag:
<link rel="stylesheet" type="text/css" href="./timezone_style.css"/>

Adding Images to the Application

Any images used by the style sheet should be dropped into the images subfolder of the application web
folder.

Implementing Styles

In tutorial examples timezone1 through 4, inline styles were used:

<h:outputText style="font-weight:600" value="Server Time Zone"/>

Tutorial example timezone5 uses only styles from the style sheet, as shown in timezone.jspx, below:
<f:view xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ice="http://www.icesoft.com/icefaces/component">
<html>
<head><title>ICEfaces: TimeZone Sample Application</title></head>
<link rel="stylesheet" type="text/css" href="./timezone_style.css"/>
<body bgcolor="white">
<div id="headerDiv">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td background="images/demo-page-bkgnd.gif">
<img src="images/demo-page-left.gif"/>
</td>

33
ICEfaces Tutorial: The TimeZone Application

</tr>
<tr>
<td height="45" valign="bottom">
<img src="images/timezone_logo.gif"/>
</td>
</tr>
</table>
</td>
<td valign="top" align="right" width="119">
<img src="images/demo-page-right.gif"/>
</td>
</tr>
</table>
</div>

<div id="timeZonePanel">
<ice:form partialSubmit="true">
<h:panelGrid columns="2"
rowClasses="floatingDialogHeader, , " width="100%">
<h:outputText value="Server Time Zone"/>
<h:outputText value="Time Zone Selected from Map"/>
<h:outputText styleClass="formLabel"
value="#{timeZoneBean.serverTimeZoneName}"/>
<h:outputText styleClass="formLabel"
value="#{timeZoneBean.selectedTimeZoneName}"/>
<h:outputText value="#{timeZoneBean.serverTime}"/>
<h:outputText value="#{timeZoneBean.selectedTime}"/>
</h:panelGrid>
<h:panelGrid columns="6" width="100%" cellpadding="0" cellspacing="0">
<h:commandButton id="GMTminus10" image="images/hawaii.jpg"
actionListener="#{timeZoneBean.listen}" style="border: 0px;"/>
<h:commandButton id="GMTminus9" image="images/alaska.jpg"
actionListener="#{timeZoneBean.listen}" style="border: 0px;"/>
<h:commandButton id="GMTminus8" image="images/pacific.jpg"
actionListener="#{timeZoneBean.listen}" style="border: 0px;"/>
<h:commandButton id="GMTminus7" image="images/mountain.jpg"
actionListener="#{timeZoneBean.listen}" style="border: 0px;"/>
<h:commandButton id="GMTminus6" image="images/central.jpg"
actionListener="#{timeZoneBean.listen}" style="border: 0px;"/>
<h:commandButton id="GMTminus5" image="images/eastern.jpg"
actionListener="#{timeZoneBean.listen}" style="border: 0px;"/>
<ice:selectBooleanCheckbox id="Cminus10" required="false"
immediate="true"
valueChangeListener="#{timeZoneBean.timeZoneChanged}"
value="#{timeZoneBean.checkboxStates['Cminus10']}"
autocomplete="off"/>
<ice:selectBooleanCheckbox id="Cminus9" required="false"
immediate="true"
valueChangeListener="#{timeZoneBean.timeZoneChanged}"
value="#{timeZoneBean.checkboxStates['Cminus9']}"
autocomplete="off"/>
<ice:selectBooleanCheckbox id="Cminus8" required="false"
immediate="true"
valueChangeListener="#{timeZoneBean.timeZoneChanged}"
value="#{timeZoneBean.checkboxStates['Cminus8']}"
autocomplete="off"/>
<ice:selectBooleanCheckbox id="Cminus7" required="false"
immediate="true"
valueChangeListener="#{timeZoneBean.timeZoneChanged}"
34
ICEfaces Tutorial: The TimeZone Application

value="#{timeZoneBean.checkboxStates['Cminus7']}"
autocomplete="off"/>
<ice:selectBooleanCheckbox id="Cminus6" required="false"
immediate="true"
valueChangeListener="#{timeZoneBean.timeZoneChanged}"
value="#{timeZoneBean.checkboxStates['Cminus6']}"
autocomplete="off"/>
<ice:selectBooleanCheckbox id="Cminus5" required="false"
immediate="true"
valueChangeListener="#{timeZoneBean.timeZoneChanged}"
value="#{timeZoneBean.checkboxStates['Cminus5']}"
autocomplete="off"/>
</h:panelGrid>
<h:dataTable id="timezoneDataTable"
value="#{timeZoneBean.checkedTimeZoneList}"
var="checkedTimeZone" headerClass="tableHeader" width="100%"
columnClasses="checkedDisplayName,checkedLocation,checkedUseDay
lightTime,checkedInDaylightTime,checkedTime">
<f:facet name="header"><h:outputText styleClass="tableHeaderTitle"
value="Checked Time Zones"/>
</f:facet>
<h:column>
<f:facet name="header">
<h:outputText value="Time Zone"/>
</f:facet>
<h:outputText value="#{checkedTimeZone.displayName}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Location"/>
</f:facet>
<h:outputText value="#{checkedTimeZone.location}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Uses DST"/>
</f:facet>
<h:outputText value="#{checkedTimeZone.useDaylightTime}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="In DST"/>
</f:facet>
<h:outputText value="#{checkedTimeZone.inDaylightTime}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Time"/>
</f:facet>
<h:outputText styleClass="formLabel"
value=" #{checkedTimeZone.time} "/>
</h:column>
</h:dataTable>
</ice:form>
</div>

<div style="position:absolute; top:650px;left:15%;width:500px;
text-align: right;" >
<f:verbatim>
35
ICEfaces Tutorial: The TimeZone Application

There are two <div> elements applied to the page. The first helps create a page heading:
<div id="headerDiv">

The second creates a container for the rest of the application:

The styleClass attribute is used to apply styles from the style sheet to JSF elements:
<h:outputText styleClass="formLabel" value="#{timeZoneBean.serverTimeZoneName}"/>
The JSF panelGrid component has a rowClasses attribute that applies styles from the style sheet to
the rows of the table it creates. In this example, the floatingDialogHeader class is applied to the first
row and the second and third rows are left blank, meaning no style is applied.
<h:panelGrid columns="2" rowClasses="floatingDialogHeader, , " width="100%">

The JSF dataTable component has a headerClass attribute that applies styles to all the headers in the
table. It also has a columnClasses attribute that applies styles to all of the columns in the table:
<h:dataTable id="timezoneDataTable" var="checkedTimeZone"
value="#{timeZoneBean.checkedTimeZoneList}"
headerClass="tableHeader" width="100%"
columnClasses="checkedDisplayName,
checkedLocation,checkedUseDaylightTime,
checkedInDaylightTime,checkedTime">

36
ICEfaces Tutorial: The TimeZone Application

Building and Deploying timezone5

To run timezone5, navigate to the <icefaces-install-dir>/tutorial/timezone5 directory and type:

ant install
or, to run using MyFaces, type:
ant -f build_myfaces.xml install

This should compile the source code, generate a WAR file with all the required resources, and deploy it
to a running Tomcat server. To interact with the application, point your web browser at the following
URL, making adjustments for your environment as required.
http://localhost:8080/timezone5
This version of TimeZone has the same functionality as timezone4, but should look completely different.
Styles have been applied to the application through the style sheet, which use images located in the
web/images folder. With the finishing touches applied, the application is now ready to be presented to
the world.

Step 6 – Integrating Facelets

Each of the steps, until now, have added new functionality to the users of the TimeZone web
application, showing more data or being more interactive. This time though, our application should be
functionally equivalent to the previous, but instead of being based on JSP, will instead use Facelets (see
https://facelets.dev.java.net/). The intent of this step is to show the minimal effort required to
port an ICEfaces JSF JSP Document application to ICEfaces JSF Facelets.

Note: This step is related to Facelets and will be of interest only if you intend to use
Facelets.

Facelets Dependencies

There are three new JAR files, distributed with ICEfaces, which must be included with any ICEfaces
Facelets application:
• icefaces-facelets.jar
• el-api.jar
• el-ri.jar

37
ICEfaces Tutorial: The TimeZone Application

Configuring for Facelets

To configure TimeZone to support Facelets, we need to modify both the deployment descriptor
(web.xml or web_myfaces.xml) and the JavaServer Faces configuration file (faces-config.xml).
1. Add a context parameter to the deployment descriptor file (web.xml or web_myfaces.xml), to
inform the application server that the default file extension for Facelets is .xhtml, since some
application servers assume .jsp or .jspx extensions.
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>
2. For development purposes, add a context parameter to the deployment descriptor file, to enable
Facelets debug logging.
<context-param>
<param-name>facelets.DEVELOPMENT</param-name>
<param-value>true</param-value>
</context-param>
3. Enable some strict verifications in JSF, by adding these context parameters to the deployment
descriptor file.
<context-param>
<param-name>com.sun.faces.validateXml</param-name>
<param-value>true</param-value>
<description>
Set this flag to true, if you want the JavaServer Faces Reference
Implementation to validate the XML in your faces-config.xml
resources
against the DTD. Default value is false.
</description>
</context-param>

<context-param>
<param-name>com.sun.faces.verifyObjects</param-name>
<param-value>true</param-value>
<description>
Set this flag to true, if you want the JavaServer Faces Reference
Implementation to verify that all of the application objects you
have
configured (components, converters, renderers, and validators) can
be
successfully created. Default value is false.
</description>
</context-param>

4. Set the application view handler in the JavaServer Faces configuration file (faces-config.xml).
<application>
<view-handler>
com.icesoft.faces.facelets.D2DFaceletViewHandler
</view-handler>
</application>

38
ICEfaces Tutorial: The TimeZone Application

Change Web Files from JSP Document to Facelets

Rename timezone.jspx to timezone.xhtml. No JSP Document specific features were used in previous
steps that are not already supported by Facelets, so no change to the contents of timezone.xhtml is
necessary.

Building and Deploying timezone6

To run timezone6, navigate to the <icefaces-install-dir>/tutorial/timezone6 directory and type:

ant install
or, to run using MyFaces, type:
ant -f build_myfaces.xml install

Step 7 – Capitalize on Facelets

The main focus of this step is to use Facelets to make our application more dynamic.

Note: This step is related to Facelets and will be of interest only if you intend to use
Facelets.

In previous steps of the tutorial, TimeZoneBean.java and timezone.xhtml (or timezone.jspx) were
codependent. Components in the UI would generate events from user interactions, requiring hard-
coded constants in the bean to interpret the source and relevancy of the events. Changes to component
IDs, or addition or removal of components would necessitate lock-step changes in both the bean and
the web file. This step of the tutorial puts the bean in charge of generating content for the web file.
With a few changes to one section of code in TimeZoneBean.java, any number of arbitrary time zones
could be displayed with timezone.xhtml.

Putting the TimeZoneBean in Charge

First we change timezone.xhtml, to use Facelets mechanisms, to be more dynamic.

1. Add namespace declarations for Facelets components, and Facelet’s implementation of JSTL
components and functions:
<f:view xmlns:f="http://java.sun.com/jsf/core"
39
ICEfaces Tutorial: The TimeZone Application

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:fn="http://java.sun.com/jsp/jstl/functions">
2. Pull out the headerDiv section, and put it into header.xhtml to demonstrate parameterized inclusion:
<ui:include src="/header.xhtml">
<ui:param name="sectionName" value="header"/>
</ui:include>
3. Replace the six commandButtons and selectBooleanCheckboxes with JSTL forEach sections, that
are populated by bean properties using JSF expression language bindings.
Notice how even the IDs for the commandButtons and selectBooleanCheckboxes components come
from the bean so there are no duplicate definitions to keep in sync. One important thing to
remember is that JSTL forEach sections are evaluated at component build time once, and not for
every render. So, with this example, one cannot change the map or number of check boxes with
every clock tick, as one can with the table below it.
<h:panelGrid columns="#{fn:length(timeZoneBean.allTimeZoneList)}"
width="100%" cellpadding="0" cellspacing="0">
<c:forEach var="allTimeZone" items="#{timeZoneBean.allTimeZoneList}">
<h:commandButton id="#{allTimeZone.mapCommandButtonId}"
image="#{allTimeZone.imagePath}"
actionListener="#{timeZoneBean.listen}"
style="border: 0px;"/>
</c:forEach>
<c:forEach var="allTimeZone" items="#{timeZoneBean.allTimeZoneList}">
<ice:selectBooleanCheckbox id="#{allTimeZone.checkboxId}"
required="false" immediate="true"
value="#{allTimeZone.currentlyShowing}"

valueChangeListener="#{timeZoneBean.timeZoneChanged}"/>
</c:forEach>
</h:panelGrid>

Adding New Properties

Each section in the map, and each check box, and each row in the bottom table, are populated by
properties from a TimeZoneWrapper object. We will change TimeZoneWrapper.java to add the new
properties that timezone.xhtml uses JSF expression language bindings to access:
1. Add new property to hold the relative file path to the map image for the time zone being
represented by this TimeZoneWrapper:
private String imagePath;
2. Add another property for managing both the current state of the check box for this time zone, and
the visibility of the corresponding row in the bottom table:
private boolean currentlyShowing;
3. Initialize the new properties:
/**
* @param id id used to identify the time zone.
* @param imgPath Path to the image to represent this time zone.
40
ICEfaces Tutorial: The TimeZone Application

* @param mapId map button component id in web page

* @param checkId checkbox component id in web page
*/
public TimeZoneWrapper(String id, String imgPath, String mapId, String checkId)
{
this.id = id;
this.imagePath = imgPath;
this.mapCommandButtonId = mapId;
this.checkboxId = checkId;
this.currentlyShowing = false;
this.dateFormat = TimeZoneBean.buildDateFormatForTimeZone(
TimeZone.getTimeZone(id) );
}

4. Add accessor methods for the new properties:

public String getImagePath() {
return imagePath;
}
...
public boolean getCurrentlyShowing() {
return currentlyShowing;
}
...
public void setCurrentlyShowing(boolean showing) {
currentlyShowing = showing;
}

Updating TimeZoneBean.java

Finally, update TimeZoneBean.java to initialize and access the newer more dynamic data structures.
1. Create the master list of all time zones in the application, along with their images, and the
component IDs:
private void init() {
...
// Entries in this list determine what will be generated in
// the timezone web file, so should be modifiable,
// but all ids must be unique to each other
allTimeZoneList = new ArrayList(6);
allTimeZoneList.add(new TimeZoneWrapper(
"Pacific/Honolulu", "images/hawaii.jpg", "GMTminus10",
"Cminus10"));
allTimeZoneList.add(new TimeZoneWrapper(
"America/Anchorage", "images/alaska.jpg", "GMTminus9",
"Cminus9"));
allTimeZoneList.add(new TimeZoneWrapper(
"America/Los_Angeles", "images/pacific.jpg", "GMTminus8",
"Cminus8"));
allTimeZoneList.add(new TimeZoneWrapper(
"America/Phoenix", "images/mountain.jpg", "GMTminus7",
"Cminus7"));
allTimeZoneList.add(new TimeZoneWrapper(
"America/Chicago", "images/central.jpg", "GMTminus6", "Cminus6"));
allTimeZoneList.add(new TimeZoneWrapper(

41
ICEfaces Tutorial: The TimeZone Application

"America/New_York", "images/eastern.jpg", "GMTminus5",

"Cminus5"));
...
}
2. Provide a getter accessor method for the master time zone list property:
public ArrayList getAllTimeZoneList(){
return allTimeZoneList;
}
3. Modify the checkbox event handler to properly maintain the new bean properties:
public void timeZoneChanged(ValueChangeEvent event){
UIComponent comp = event.getComponent();
FacesContext context = FacesContext.getCurrentInstance();
String componentId = comp.getClientId(context);
TimeZoneWrapper tzw = getTimeZoneWrapperByComponentId( componentId );
if( tzw != null ) {
boolean checked = ((Boolean)event.getNewValue()).booleanValue();
// If checkbox is checked, then add tzw to checkedTimeZoneList
if( checked ) {
tzw.setCurrentlyShowing( true );
if( !checkedTimeZoneList.contains(tzw) )
checkedTimeZoneList.add( tzw );
}
// Otherwise, if checkbox is unchecked, then remove tzw from
// checkedTimeZoneList
else {
tzw.setCurrentlyShowing( false );
checkedTimeZoneList.remove( tzw );
}
}
}

Building and Deploying timezone7

To run timezone7, navigate to the <icefaces-install-dir>/tutorial/timezone7 directory and type:

ant install
or, to run using MyFaces, type:
ant -f build_myfaces.xml install

For more information on this tutorial or other ICEsoft products, visit our Technical Support page at:
http://www.icesoft.com/support/index.html

42
Chapter 5 Configuring Other
Environments for
ICEfaces

ICEfaces is a J2EE-compliant technology, and as such is portable to a number of commercial and open
source J2EE application server environments. Additionally, ICEfaces can be easily integrated into your
favorite J2EE Integrated Development Environment (IDE). This chapter covers both of these topics.

J2EE Application Servers

While the discussion in this Getting Started Guide focuses on the Apache Tomcat application server,
ICEfaces has been tested against most of the commercial application servers available. Refer to the
ICEfaces Release Notes for a list of application servers supported in this release.
If you are familiar with one of these environments, it should be straightforward to deploy the ICEfaces
demonstration application WAR files to your environment and verify that ICEfaces is compatible with
your specific installation. If an ICEfaces application fails to run in your environment, the problem is
almost always related to classpath conflicts. Resolve these conflicts to ensure that the JARs packaged
in the demo WAR file are being used.

J2EE Integrated Development Environments

ICEfaces supports the most popular Java IDE tools for web-application development, such as Eclipse,
Oracle JDeveloper, Sun Studio Creator, and IBM Rational Application Developer. Refer to the ICEfaces
Release Notes for a list of Java IDEs supported in this release.
ICEfaces tools integration bundles are available as separate downloads at www.iceface.org.

43
Index

A E
AddressForm demo 10 Eclipse 43
AJAX bridge 1 environment, integrated 43
Ant, installing 4
applying styles 33
architecture 1 F
asynchronous updates 2, 9
AuctionMonitor demo 9 Facelets 37, 39
features 2
form processing 2, 10
B
backing JavaBean 16 H
binding the Bean 20
browsers supported 4 HTML tags 14

C I
configuring your environment 3 IBM Rational Application Developer 43
creating a JSP page 14 Integrated Development Environment 43
integrating ICEfaces 23

D
J
D2D. See Direct-to-DOM.
demo J2EE Application Servers 43
AddressForm 10 JavaServer Faces. See JSF.
AuctionMonitor 9 JDeveloper 43
dependencies JSF 1, 14
facelets 37 JSP 23
directory structure
ICEfaces 5
TimeZone 13 O
Direct-to-DOM 1, 9, 24, 33
dynamic table rendering 28 Oracle 43
dynamic updating 24

44
P S
partial submit 2 sample applications 8
prerequisites 3 style sheets 33
Sun Studio Creator 43

R
T
registering servlets 23
rich web application 1 TimeZone tutorial 12–42
TimeZoneBean.java 41
Tomcat, installing 4

The Little Book of Sitecore® Tips: Volume 1
From Everand
The Little Book of Sitecore® Tips: Volume 1
Neil P Shack
No ratings yet
Borland JBuilder 9 Developing J2EE Applications
No ratings yet
Borland JBuilder 9 Developing J2EE Applications
106 pages
Mercedes Wis Epc Installation Guide PDF
No ratings yet
Mercedes Wis Epc Installation Guide PDF
3 pages
How To Speed Up Your PC by Tweaking Windows 10 Registry Settings
100% (1)
How To Speed Up Your PC by Tweaking Windows 10 Registry Settings
3 pages
Getting Started Guide
No ratings yet
Getting Started Guide
74 pages
Ice Faces Developers Guide
No ratings yet
Ice Faces Developers Guide
131 pages
Advanced Multiplayer Game Development with Ureal Engine 5: A Comprehensive Guide to C++ Scripting
From Everand
Advanced Multiplayer Game Development with Ureal Engine 5: A Comprehensive Guide to C++ Scripting
Vladimir Kiselev
No ratings yet
Plain JavaScript: Learning the Front-End
From Everand
Plain JavaScript: Learning the Front-End
Roger Beans-Rivet
No ratings yet
Modern JavaScript: Coding for Today and Tomorrow
From Everand
Modern JavaScript: Coding for Today and Tomorrow
Jay Nans
No ratings yet
A To Z of Internet: Everything You Wanted to Know
From Everand
A To Z of Internet: Everything You Wanted to Know
Bittu Kumar
No ratings yet
Blog Smarter, Not Harder: SEO, Blogging, and AI Strategies to Skyrocket Your Traffic
From Everand
Blog Smarter, Not Harder: SEO, Blogging, and AI Strategies to Skyrocket Your Traffic
Jay Nans
No ratings yet
Mastering Python Advanced Concepts and Practical Applications
From Everand
Mastering Python Advanced Concepts and Practical Applications
Aissa Younes
No ratings yet
Software Patterns Made Easy
From Everand
Software Patterns Made Easy
Justice Nanhou
No ratings yet
SG 245980
No ratings yet
SG 245980
300 pages
Content Creation Revolution with chatGPT
From Everand
Content Creation Revolution with chatGPT
Maria Cowen
No ratings yet
Guide to Web Development with Java - Understanding Website Creation 2nd Edition Tim Downey - Explore the complete ebook content with the fastest download
100% (1)
Guide to Web Development with Java - Understanding Website Creation 2nd Edition Tim Downey - Explore the complete ebook content with the fastest download
67 pages
JAVA PROGRAMMING FOR BEGINNERS: Master Java Fundamentals and Build Your Own Applications (2023 Crash Course)
From Everand
JAVA PROGRAMMING FOR BEGINNERS: Master Java Fundamentals and Build Your Own Applications (2023 Crash Course)
Theo Houle
No ratings yet
Web Services RedBook
No ratings yet
Web Services RedBook
624 pages
Web Application Developers Guide
No ratings yet
Web Application Developers Guide
296 pages
Web Facing
100% (1)
Web Facing
205 pages
Get Guide to Web Development with Java - Understanding Website Creation 2nd Edition Tim Downey PDF ebook with Full Chapters Now
100% (2)
Get Guide to Web Development with Java - Understanding Website Creation 2nd Edition Tim Downey PDF ebook with Full Chapters Now
47 pages
Teaching Scratch Programming…from Scratch
From Everand
Teaching Scratch Programming…from Scratch
John Nunez
No ratings yet
JAKARTA EE Server Faces 3.0
No ratings yet
JAKARTA EE Server Faces 3.0
453 pages
Full Download (Ebook) Beginning JSF 2 APIs and JBoss Seam by Kent Ka Iok Tong ISBN 9781430219224, 9781430219231, 143021922X, 1430219238 PDF DOCX
100% (6)
Full Download (Ebook) Beginning JSF 2 APIs and JBoss Seam by Kent Ka Iok Tong ISBN 9781430219224, 9781430219231, 143021922X, 1430219238 PDF DOCX
71 pages
Autodesk Fusion 360: A Tutorial Approach
From Everand
Autodesk Fusion 360: A Tutorial Approach
Prof. Sham Tickoo
No ratings yet
Get Beginning JSF 2 APIs and JBoss Seam 1st Edition Kent Ka Iok Tong free all chapters
100% (1)
Get Beginning JSF 2 APIs and JBoss Seam 1st Edition Kent Ka Iok Tong free all chapters
40 pages
Beginning JSF 2 APIs and JBoss Seam 1st Edition Kent Ka Iok Tong - Read the ebook now or download it for a full experience
100% (1)
Beginning JSF 2 APIs and JBoss Seam 1st Edition Kent Ka Iok Tong - Read the ebook now or download it for a full experience
78 pages
ChatGPT for Business: Strategies for Success
From Everand
ChatGPT for Business: Strategies for Success
Matthew C. Smith
No ratings yet
And WDSC V7.0 Advanced Edition For i5/OS V5R4
No ratings yet
And WDSC V7.0 Advanced Edition For i5/OS V5R4
484 pages
Gray Hat Hacking the Ethical Hacker's
From Everand
Gray Hat Hacking the Ethical Hacker's
Çağatay Şanlı
5/5 (1)
Download Complete Beginning JSF 2 APIs and JBoss Seam 1st Edition Kent Ka Iok Tong PDF for All Chapters
100% (1)
Download Complete Beginning JSF 2 APIs and JBoss Seam 1st Edition Kent Ka Iok Tong PDF for All Chapters
65 pages
Download full Guide to Web Development with Java - Understanding Website Creation 2nd Edition Tim Downey ebook all chapters
100% (4)
Download full Guide to Web Development with Java - Understanding Website Creation 2nd Edition Tim Downey ebook all chapters
65 pages
Bachelor Thesis
No ratings yet
Bachelor Thesis
41 pages
Beginning JSF 2 APIs and JBoss Seam 1st Edition Kent Ka Iok Tong pdf download
100% (2)
Beginning JSF 2 APIs and JBoss Seam 1st Edition Kent Ka Iok Tong pdf download
53 pages
Programmer Guide To Web
No ratings yet
Programmer Guide To Web
188 pages
The Linux Terminal for Advanced Users - The Command Line Made Easy: First Edition
From Everand
The Linux Terminal for Advanced Users - The Command Line Made Easy: First Edition
Michael Basler
No ratings yet
(Ebook) JavaServer Faces in Action by Kito D. Mann ISBN 9781932394122, 1932394125 download
No ratings yet
(Ebook) JavaServer Faces in Action by Kito D. Mann ISBN 9781932394122, 1932394125 download
58 pages
Cybersecurity for Executives: A Guide to Protecting Your Business
From Everand
Cybersecurity for Executives: A Guide to Protecting Your Business
Matthew C. Smith
No ratings yet
Linux Shell Scripting - A Beginner's Guide: First Edition
From Everand
Linux Shell Scripting - A Beginner's Guide: First Edition
Michael Basler
No ratings yet
Jakarta Faces 4.0
No ratings yet
Jakarta Faces 4.0
346 pages
Cloud Computing : Beginners And Intermediate User Guide
From Everand
Cloud Computing : Beginners And Intermediate User Guide
David comer
No ratings yet
GUI Magic: Mastering Real Projects in Python
From Everand
GUI Magic: Mastering Real Projects in Python
John Nunez
No ratings yet
WebSphere Application Server Express V6 developers guide and development examples 1st ed Edition Bill Moore - Get instant access to the full ebook content
No ratings yet
WebSphere Application Server Express V6 developers guide and development examples 1st ed Edition Bill Moore - Get instant access to the full ebook content
57 pages
Visual Age Pacbase
No ratings yet
Visual Age Pacbase
472 pages
Program AS 400
No ratings yet
Program AS 400
184 pages
Autodesk Fusion 360: A Tutorial Approach, 4th Edition
From Everand
Autodesk Fusion 360: A Tutorial Approach, 4th Edition
Prof. Sham Tickoo
No ratings yet
Unlocking Statistics for the Social Sciences
From Everand
Unlocking Statistics for the Social Sciences
Norma Sinclair
No ratings yet
Websphere5 0
No ratings yet
Websphere5 0
680 pages
Spring Live
100% (1)
Spring Live
353 pages
Complete Download WebSphere Application Server Express V6 developers guide and development examples 1st ed Edition Bill Moore PDF All Chapters
No ratings yet
Complete Download WebSphere Application Server Express V6 developers guide and development examples 1st ed Edition Bill Moore PDF All Chapters
77 pages
WAS 6 Migration Guide
No ratings yet
WAS 6 Migration Guide
0 pages
WAS6 Migration Guide
No ratings yet
WAS6 Migration Guide
256 pages
Android Studio Meerkat Essentials - Compose Edition: Developing Android Apps with Android Studio, Jetpack Compose, and Kotlin
From Everand
Android Studio Meerkat Essentials - Compose Edition: Developing Android Apps with Android Studio, Jetpack Compose, and Kotlin
Neil Smyth
No ratings yet
ICEfaces Asynchronous HTTP Server
No ratings yet
ICEfaces Asynchronous HTTP Server
33 pages
ISO 26262 Made Simple: A Beginner’s Guide to Automotive Safety
From Everand
ISO 26262 Made Simple: A Beginner’s Guide to Automotive Safety
Mohamad Charara
No ratings yet
The Modern Vulkan Cookbook: A practical guide to 3D graphics and advanced real-time rendering techniques in Vulkan
From Everand
The Modern Vulkan Cookbook: A practical guide to 3D graphics and advanced real-time rendering techniques in Vulkan
Preetish Kakkar
No ratings yet
(Ebook) Programming HTML5 Applications: Building Powerful Cross-Platform Environments in Javascript by Zachary Kessin ISBN 1449399088 instant download
100% (1)
(Ebook) Programming HTML5 Applications: Building Powerful Cross-Platform Environments in Javascript by Zachary Kessin ISBN 1449399088 instant download
52 pages
Websphere Version 4 Application Developm
No ratings yet
Websphere Version 4 Application Developm
602 pages
Web Development Using JSP
No ratings yet
Web Development Using JSP
800 pages
IBMRedbook WebSphereMigrationGuide
No ratings yet
IBMRedbook WebSphereMigrationGuide
418 pages
Complete Guide To Web Development With Java - Understanding Website Creation 2nd Edition Tim Downey PDF For All Chapters
100% (4)
Complete Guide To Web Development With Java - Understanding Website Creation 2nd Edition Tim Downey PDF For All Chapters
62 pages
Professional Visual Studio 2017
From Everand
Professional Visual Studio 2017
Bruce Johnson
No ratings yet
Hitachi FX-DUO-88W Interactive Whiteboard
No ratings yet
Hitachi FX-DUO-88W Interactive Whiteboard
2 pages
Zdownloader Release Notes 40076
No ratings yet
Zdownloader Release Notes 40076
3 pages
Certificate: Yokogawa Electric Corporation
No ratings yet
Certificate: Yokogawa Electric Corporation
2 pages
Setup Log
No ratings yet
Setup Log
221 pages
Windows-to-Linux Migration With QT
No ratings yet
Windows-to-Linux Migration With QT
2 pages
Touchkit Touchscreen Controller User Manual: For Windows Ce
No ratings yet
Touchkit Touchscreen Controller User Manual: For Windows Ce
27 pages
XAML WPF Drawing Brush and Resource Dictionary
No ratings yet
XAML WPF Drawing Brush and Resource Dictionary
8 pages
Vpnclient Windows 5.0.03
100% (1)
Vpnclient Windows 5.0.03
3 pages
Mysql Installation Guide: Download Webpage
No ratings yet
Mysql Installation Guide: Download Webpage
16 pages
Upgraded Windows XP To Windows 7
No ratings yet
Upgraded Windows XP To Windows 7
6 pages
Windows Server Administration Fundamentals Course Outline
No ratings yet
Windows Server Administration Fundamentals Course Outline
3 pages
ISTA4 Install Instructions PDF
No ratings yet
ISTA4 Install Instructions PDF
5 pages
Downloads - Editors & Utilities - DF-21
No ratings yet
Downloads - Editors & Utilities - DF-21
1 page
Rhino Dot Net Crash
No ratings yet
Rhino Dot Net Crash
2 pages
Windows 11 Quick Start Guide (21H2)
No ratings yet
Windows 11 Quick Start Guide (21H2)
19 pages
USB Driver Installation Procedure-Kc02us Setup-Ver2.11
No ratings yet
USB Driver Installation Procedure-Kc02us Setup-Ver2.11
7 pages
Gta Vice City
No ratings yet
Gta Vice City
16 pages
Dca Shortcut Key
No ratings yet
Dca Shortcut Key
10 pages
Applet 1
No ratings yet
Applet 1
27 pages
Alan Simpson s Windows XP Reloaded Bible 2nd Edition Alan Simpson - Get instant access to the full ebook with detailed content
100% (1)
Alan Simpson s Windows XP Reloaded Bible 2nd Edition Alan Simpson - Get instant access to the full ebook with detailed content
30 pages
A - Z Command Line
No ratings yet
A - Z Command Line
6 pages
Manual de Utilizare Windows 10
100% (1)
Manual de Utilizare Windows 10
10 pages
To Access . Run Command
No ratings yet
To Access . Run Command
9 pages
AWS and SRW User Installation Guide
No ratings yet
AWS and SRW User Installation Guide
9 pages
G-10 3rd Quarter w8
No ratings yet
G-10 3rd Quarter w8
14 pages
GE Intelligent Platforms - Knowledge Base To Backup The IHC File - Configuration of Proficy Historian
No ratings yet
GE Intelligent Platforms - Knowledge Base To Backup The IHC File - Configuration of Proficy Historian
1 page
Kaspersky Network Agent Manual
No ratings yet
Kaspersky Network Agent Manual
17 pages
Net MD Simple Burner Ver. 1.1: System Requirements
No ratings yet
Net MD Simple Burner Ver. 1.1: System Requirements
2 pages