Tutorial: Hybrid Client-Server Centric Programming
Last update: 2011, Mar. 11
First of all we must need to define what client-centric and server-centric programming in the web is.
Even if you code in Java with GWT, this technology is client-centric because your code will be executed in client.
Client and server centric mismatch
Reconciling client-server centric approaches with ItsNat
As of ItsNat v1.1 a new feature was introduced, disconnected nodes from client, server DOM nodes can be removed only in server remaining client DOM nodes intact. Later the same DOM subtree in server can be reconnected again in sync with client.
JCarousel is a "semi" black-boxed component, because some templating is possible, the list of the images is defined by us with something like:
<ul id="carouselId" class="jcarousel-skin-tango"> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> </ul>
In some location of the page, this script must be executed to invoke JCarousel to render the carousel when the page is loaded:
The jCarousel layout seems to be very clean based on plain HTML, this is not true, the initial layout is just to provide the list of images, this HTML code will be fully replaced (rendered).
ItsNat just can provide the required initial layout of the jCarousel component, because the final DOM rendered by jCarousel on the client is very different to the initial DOM. This final DOM is no longer in sync with the server, therefore the DOM in server used to set up jCarousel must be ignored otherwise we can break our ItsNat application. Yes we can integrate jCarousel but once rendered we cannot change the component for instance adding new images with ItsNat… unless we rebuild the component again.
The following example shows how we can use jCarousel as a client based extension of ItsNat in client but fully managed in server.
We are going to create an ItsNat based web application.
Create an empty web application with your preferred IDE, the context name is not relevant,
in this example we will use
Download ItsNat and follow the instructions of "What does a new ItsNat based web application need?"
Download jCarousel and decompress (v0.2.7 is the version used in this tutorial).
Create a public web folder with name
The port number may be different.
To avoid remote image loading from Flickr (just for performance), copy the images linked in jCarousel examples:
To the public folder
Create a new servlet with name
Replace with the following code:
Add the following pure HTML template (which is registered with name
to the file
Create the Java file
The method processRequest will be called whe the page is being loaded.
And the Java file
As you can see most of the code is just Java W3C DOM HTML and W3C DOM Events.
The key method is ItsNatDocument.disconnectChildNodesFromClient(Node), this method removes the content of the element only on the server, the client remains the same. So jCarousel can render the carousel with no problem.
Because we have saved the initial setup of the carousel, we can restore the removed nodes, just inserting the content again into the parent element of the DOM subtree being disconnected. Before inserting, ItsNat automatically clears the content in client, in this case the jCarousel component is fully removed, now new nodes will be also added to the client and again the client is in sync with server, then we perform the required changes to the initial layout (add a new image in the specified position) and jCarousel is called again to render the new component, in this case a new parameter is provided to scroll the component to the new image.
Fortunately jCarousel detects when a component is no longer in the page with no problem and can render new components beyond page load phase.
Deploy, run and open the example with this URL (port may different).
See it already deployed online in action.