Introduction to www.icefaces.org ICESOFT TECHNOLOGIES INC. - - PowerPoint PPT Presentation

Introduction to…

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

Introduction to ICEfaces

• What is ICEfaces?

– An Internet technology that will allow you to easily build rich highly interactive web applications – An AJAX Framework – A server-side AJAX Framework – A JSF extension

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

– A JSF extension

• Why should I use ICEfaces?

– Your boss wants you to build a more ‘ajaxy’ web application – You want to stick to your server-side Java Enterprise skills – You want to maintain productivity – You want to build a collaborative web application with AJAX Push

Why not Javascript?

– Cross-browser compatibility issues – Hard to find highly skilled JS developers – Challenging to maintain a large Javascript codebase

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

Major Benefits of ICEfaces

• An Enterprise AJAX Solution

– AJAX for server-side developers!

• A Standards-based AJAX Solution

– Server-side standards: JSF – Client-side standards: Javascript & CSS

• Application or Page-level AJAX

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

• Application or Page-level AJAX

– AJAX functionality is built into the framework, not the components

• Secure AJAX
• Large Component

Library

Major Benefits of ICEfaces, cont.

• Compatiblity

– Java App Servers – Web Browsers

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

Major Benefits of ICEfaces, cont.

• Strong integration with other Java frameworks

– Spring

• Spring Core
• Spring Security
• Spring WebFlow

– JBoss Seam

SEAM

Portal

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

– Portlets

• Liferay
• WebLogic
• JBoss Portal

– Myfaces Tomahawk

Major Benefits of ICEfaces, cont.

• Strong “tooling” integration with popular Java IDEs:
• Eclipse
• MyEclipse
• NetBeans

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

Major Benefits of ICEfaces, cont.

• Automatic AJAX

– Automatic AJAX submits – Automatic AJAX updates – Automatic inter-component communication and collaboration

• Transparent AJAX

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

Major Benefits of ICEfaces, cont.

• Direct-to-DOM (D2D) Rendering

DOM DOM (Client)

Incremental DOM Updates Ajax Bridge

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

DOM (Server)

Incremental DOM Updates

Direct-to-DOM isolates Java developers from JavaScript and more…

Major Benefits of ICEfaces, cont.

• AJAX Push

– Asynchronous application driven browser updates – Server-initiated rendering updates to the client

• No more constraint of the “don’t speak until spoken to” mode of

traditional web development

– Integral to ICEfaces, not an afterthought

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

• Components are Ajax Push Ready

– True server-side, “data-push” – Collaborative Web Applications

• Enables next generation web 2.0 collaboration

– (Forums, Chat, Auctions …)

– Real-time updates

ICEfaces Demos

• Component Showcase
• Auction Monitor

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

JSF and ICEfaces

• JSF is component-centric, meaning views are

assembled from UI components

• JSF is an official Java EE Standard:

– JSR 127 (JSF 1.1) – JSR 252 (JSF 1.2) – JSR 314 (JSF 2.0)

• ICEfaces is based on JSF -- this means ICEfaces

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

• ICEfaces is based on JSF -- this means ICEfaces

applications are JSF applications

JSF and ICEfaces (Cont.)

• The JSF specification defines a number of extension

points:

– ICEfaces implements its rich UI and AJAX functionality as a set

• f JSF extensions

– ICEfaces is primarily a JSF render kit extension – ICEfaces is also a component library

• JSF has a pluggable render-kit architecture which

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

• JSF has a pluggable render-kit architecture which

allows for new innovations in the presentation layer (ICEfaces)

ICEfaces Architecture (Overview)

• Understanding ICEfaces Architecture
• Direct-to-DOM (D2D) Rendering
• Partial Submit
• ICEfaces Request Scope
• Incremental Page Updates
• The AJAX Bridge

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

• The AJAX Bridge
• AJAX Push

ICEfaces - Understanding ICEfaces Architecture

• Standard J2EE architecture diagram

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

ICEfaces - Understanding ICEfaces Architecture

• The ICEfaces framework

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

ICEfaces - Understanding ICEfaces

• Understanding ICEfaces Architecture
• With ICEfaces an application is entirely server-based.

– How the page is constructed on the server: – When the page is first requested, all of the presentation is sent to the client, including a JavaScript bridge.The JavaScript bridge is the communication mechanism between the server and the client – When the user interacts with the client, events are sent back

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

– When the user interacts with the client, events are sent back to the server that may alter application state and change the page on the server – When the page changes on the server, we deliver only those incremental changes back to the client

ICEfaces - Understanding ICEfaces

• In a nutshell, this is what we call the Direct-to-DOM (D2D)
• approach. All client-server communication consists of presentation

state updates, and events. This is a very-thin client approach. – No application logic on the client. No business logic on the client – Very small JavaScript footprint on the client

• No need to care about the client-server communication channel

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

• Write your applications as if they were traditional desktop

applications

• Your developers don't need to worry about the plumbing, they

can focus on the application logic, what they know best

ICEfaces - Direct-to-DOM (D2D) Rendering

• Ability to render a JSF component tree directly into a W3C

standard DOM data structure

• ICEfaces provides a Direct-to-DOM RenderKit for the standard

HTML basic components available in JSF

• The basic Sun JSF components render themselves by generating

plain HTML text

• ICEfaces JSF components do not render through HTML text, but

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

• ICEfaces JSF components do not render through HTML text, but

through DOM updates

ICEfaces - Direct-to-DOM (D2D) Rendering

• In ICEfaces, the JSF component tree renders directly to the

server-side DOM.

• The JSF component tree is just a collection of JSF components.

Thus, ICEfaces components render directly to DOM:

• What you need to know about D2D rendering:

Element divElement = dom.createElement("div"); divElement.appendChild(dom.createTextNode("My Component"));

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

• What you need to know about D2D rendering:

– D2D rendering happens mostly under the cover – Its purpose is to enable the AJAX bridge to do DOM diff’ing between the server and the client – If you create your own ICEfaces components or renderers – If you use non-ICEfaces 3rd party components on an ICEfaces page

ICEfaces - Partial Submit

• Introduces a fine-grained user interaction model for intelligent form

processing

• Submit is partial in the sense that only partial validation of the form will
• ccur.
• The standard JSF validator mechanism can be leveraged, or any other

arbitrarily complex or simple evaluation logic can be applied.

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

ICEfaces - ICEfaces Request Scope

• ICEfaces request scope is longer lived than the request scope for non

dynamic applications

• A request begins with the initial page request and remains active through

user interactions with that page

• One consideration is that new browser windows and page reloads of the

same browser window are both regarded as new requests.

• To cause request scope to last only for the duration of a single user

event, "standard request scope"

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

• must be enabled. This is set through the ICEfaces context parameter:

<context-param> <param-name> com.icesoft.faces.standardRequestScope </param-name> <param-value>true</param-value> </context-param>

ICEfaces - The AJAX Bridge

• Lightweight AJAX bridge to deliver presentation changes to the

client browser and to communicate user interaction events back to the server-resident JSF application.

• Application-level Ajax
• ICEfaces restricts Ajax to

– Incremental presentation updates – User event capture and transmission

• Enables thin client scalability
• Handle browser idiosyncrasies

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

• Handle browser idiosyncrasies
• Eliminate the need for JavaScript development

ICEfaces Configuration

• Runtime Dependencies
• JSF Implementations
• Http Connection Timeout
• Concurrent DOM Views
• Synchronous Update

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

Runtime Dependencies

• For each dependency, the versions-licenses.html file records
• JAR filename
• Project website
• Open source license
• Link to open source license terms

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

JSF Implementations

Table 2. JSF Library Jars

JSF Implementation File Name Version Project License Sun RI 1.1 jsf-api.jar 1.1_01 Sun JSF 1.1 RI APIs JSF 1.1 RI License and JSF 1.1 Third Party Licenses Sun RI 1.1 jsf-impl.jar 1.1_01 Sun JSF 1.1 RI implementation JSF 1.1 RI License and JSF 1.1 Third Party Licenses Sun RI 1.2 jsf-api-1.2.jar 1.2_04-b10-p01 Sun JSF 1.2 RI APIs CDDL Version 1.0 Sun RI 1.2 jsf-impl-1.2.jar 1.2_04-b10-p01 Sun JSF 1.2 RI APIs CDDL Version 1.0 MyFaces (JSF 1.1) myfaces-api.jar 1.1.5 Apache MyFaces Apache License Version 2.0

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

Version 2.0 MyFaces (JSF 1.1) myfaces-impl.jar 1.1.5 Apache MyFaces Apache License Version 2.0

Http Connection Time-out

• Java Servlet session time-out is configurable via the web.xml file
• ICEfaces has a connection time-out for the Ajax bridge.
• The ICEfaces component connectionStatus can be used to

monitor the connection status of the Ajax bridge.

• Long running server side task may result in a http connection

timeout

<context-param>

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

<param-name>com.icesoft.faces.connectionTimeout</param-name> <param-value>150000</param-value> </context-param>

Concurrent DOM Views

• By default only one dynamically updated page per web application, a

single DOM is maintained for each user session

• To allow multiple windows for a single application, concurrent DOM views

must be enabled

• Concurrent DOM views enabled, each browser window is distinctly

identified with a view number and DOM updates will be correctly applied to the appropriate window

• Keep in mind that session scoped beans are shared across multiple views

simultaneously.

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

simultaneously.

<context-param> <param-name>com.icesoft.faces.concurrentDOMViews</param-name> <param-value>true</param-value> </context-param>

Synchronous Update

• ICEfaces by default uses asynchronous updates for standard

request/response cycle

• One short coming of synchronous updates is the application

requires a client-generated request

• ICEfaces overcomes this deficiency with an asynchronous update

mode that driving asynchronous presentation changes to the client

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

<context-param> <param-name>com.icesoft.faces.synchronousUpdate</param-name> <param-value>false</param-value> </context-param>

Exercise: Overview

• The goal of this exercise is to convert the jobApplication

project from standard JSF to ICEfaces

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

Step 1: Add the ICEfaces Namespace

• Open the applicationForm.xhtml file in the IDE
• Add the following namespace to the f:view tag:

xmlns:ice="http://www.icesoft.com/icefaces/component"

• Do the same for thankYou.xhtml and noThanks.xhtml

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

Step 2: Rename h: components to ice:

• Open the applicationForm.xhtml file in the IDE
• Use the search & replace feature of the IDE to rename the

h: components to ice: components

– Replace <h: with <ice: – Replace </h: with </ice:

• Do the same for thankYou.xhtml and noThanks.xhtml

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

• Do the same for thankYou.xhtml and noThanks.xhtml

Step 3: Add ICEfaces Theme

• ICEfaces bundles three themes:

– XP – Royale – Rime

• For this exercise, we will use the XP theme
• Add the following component inside the ice:form

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

• Add the following component inside the ice:form

<ice:outputStyle href="./xmlhttp/css/xp/xp.css" />

Step 4: Date Selection Component

• Replace the h:inputText component for dateOfBirth with

ice:selectInputDate

• Set the renderAsPopup property to true

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

Step 5: Add partialSubmit

• There are two ways to add partialSubmit functionality to an

ICEfaces JSF view:

– Add the partialSubmit="true" attribute to the ice:form component – Add the partialSubmit="true" attribute to each individual input component

• You can set partialSubmit="false" on any field in order to

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

• You can set partialSubmit="false" on any field in order to
• verride the setting on the ice:form component
• Add the following attribute to the ice:form component:

partialSubmit="true"

Step 6: Disable partialSubmit on submit button

• Since partialSubmit is set to true on the ice:form, all the

ICEfaces components will participate in the partialSubmit process

• This means that the ice:commandButton will participate in

partialSubmit as well, which doesn’t make sense – we want full validation to take place when the submit button is

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

full validation to take place when the submit button is clicked

• Add the following attribute to the ice:commandButton:

partialSubmit="false"

Step 7: Remove JavaScript

• In the ValueChangeListener exercise, we added some

JavaScript to the postalCode h:inputText component in

• rder to submit the form, so that the cityId and provinceId

fields would be auto-filled

• With partialSubmit, there is no need to perform the

JavaScript ourselves -- let ICEfaces do the work!

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

JavaScript ourselves -- let ICEfaces do the work!

• Remove the following attribute from the postalCode

ice:inputText component:

• nchange="this.form.submit()"

Step 8: Remove Lifecycle Short-Circuit

• During partialSubmit, ICEfaces will only show validation error messages

next to fields that have been visited by the user

– Note: Under the hood, ICEfaces currently does this by visiting each non- visited UIInput field in the component tree, and calling setRequired(false) before the PROCESS_VALIDATIONS phase executes, and restoring the required value to true after the phase executes

• Therefore, it is not necessary to short-circuit the Lifecycle and skip to

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

the RENDER_RESPONSE phase in the ValueChangeListener for the postalCode

• Remove the following lines of code from applicantForm.java:

// Need to skip the PROCESS_VALIDATIONS phase, so that // annoying validation messages are not displayed to the user. facesContext.renderResponse();

Step 9: Run Application

• Re-publish/deploy the jobApplication project
• Run the application in the browser
• Don’t enter a value for first name – just press the TAB key on

the keyboard

– Notice that with ICEfaces, we get client-side validation for free via D2D!

• Enter First Name: John
• Enter Last Name: Doe
• Enter Travel Percentage: 50
• Click on the icon and select a date

ICESOFT TECHNOLOGIES INC.

www.icefaces.org

• Click on the icon and select a date

– Notice that the converter is invoked and the date is formatted correctly via D2D

• Click in the Postal Code field
• Type 32801 and press the tab key

– Note that FL is selected in the drop down list via D2D

• Click the Submit Application button

– Notice the global message at the top via D2D

• Enter Last Name: Smith
• Click the Submit Application button

– Notice that the page navigation takes place via D2D