View Source

h1. Definition

Direct-to-DOM (D2D) rendering is a mechanism that renders a JSF component tree into a W3C standard DOM. When the rendered DOM is cached between JSF lifecyles, it can be used to compute the difference between 2 successive page views, to determine a precise set of DOM changes required to update the page from one view to the next. D2D rendering is core to the [Automatic Ajax|Automatic Ajax] feature of the ICEfaces 2.0 framework.

h1. D2D Fundamentals

h2. Rendering

D2D rending does just what it says, it renders a JSF component tree directly into a DOM, as illustrated in the following diagram:
!D2D Sequence_2.jpg|align=center, vspace=5!

When the ICEfaces 2.0 Jar is added to a JSF application, the standard RenderKit is overridden with the ICEfaces RenderKit, and specifically, the ICEfaces RenderKit provides a _DomResponseWriter_ instead of the standard JSF _ResponseWriter_. The _DomResponseWriter_ diverts the output of any component renderer into a server-side DOM data structure.

h2. DOM Differencing

A newly produced DOM from the D2D rendering process represents the page that will be replicated in the client browser DOM. The cached previous DOM is a replica of the DOM currently in the client browser, so the difference between the two DOMs defines the page updates that need to occur at the client browser. The differencing mechanism performs the basic task of calculating the set of updates to transform one DOM into the next, but the implementation in ICEfaces 2.0 has been highly optimized.

h2. Page Updating

Given the set of page updates from the differencing algorithm, the standard JSF Ajax mechanism is used to deliver and insert those updates into the client DOM, thus completing the JSF lifecyle with D2D rendering.

The whole process is illustrated below:
# User interacts with some browser control in the page, generating an Ajax Event.
# Ajax Event causes an Ajax Request to be generated and sent to the application.
# The JSF lifecycle executes across 1 or more components in the component tree, updating the model appropriately.
# Render phase traverses entire component tree, and D2D calculates necessary page updates.
# Page updates are returned in the Ajax Response.
# Standard JSF mechansim updates the client-side DOM with page updates.