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 two 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 core 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.png|align=center!
When the ICEfaces core .jar file is added to a JSF application, the standard RenderKit is overridden with the ICEfaces RenderKit and this custome 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. The implementation of the differencing algorithm in ICEfaces 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:
!ICEfaces-2.0-D2D.png|align=center!
# User interacts with some browser control in the page.
# Ajax Event generated for _singleSubmit_.
# Ajax Request sent to the application.
# The JSF lifecycle executes on a single component 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 mechanism updates the client-side DOM with page updates.
[!icefaces-services-wiki.png|align=center!|http://www.icesoft.org/java/services/icefaces-professional-services.jsf]
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 two 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 core 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.png|align=center!
When the ICEfaces core .jar file is added to a JSF application, the standard RenderKit is overridden with the ICEfaces RenderKit and this custome 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. The implementation of the differencing algorithm in ICEfaces 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:
!ICEfaces-2.0-D2D.png|align=center!
# User interacts with some browser control in the page.
# Ajax Event generated for _singleSubmit_.
# Ajax Request sent to the application.
# The JSF lifecycle executes on a single component 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 mechanism updates the client-side DOM with page updates.
[!icefaces-services-wiki.png|align=center!|http://www.icesoft.org/java/services/icefaces-professional-services.jsf]