Home Overview Demos/Webs News Download/Install Docs/Support Investors/Partners Commercial Tutorial: Simple ItsNat (Core) Application Tutorial: Simple ItsNat (Core) STATELESS Application Tutorial: Single Page Interface SEO Compatible Web Site With ItsNat STATEFUL Using HASHBANGS Tutorial: Single Page Interface SEO Compatible Web Site With ItsNat STATELESS Using HASHBANGS Tutorial: Single Page Interface SEO Compatible Web Site With ItsNat STATEFUL Using HISTORY API Tutorial: Single Page Interface SEO Compatible Web Site With ItsNat STATELESS Using HISTORY API Tutorial: Hybrid Client-Server Centric Programming
Tutorial: Simple ItsNat (Core) Application

Last update: 2010, April 23  


Create a new servlet
Designing the page template
Registering the page template
Testing the template with a link or URL
Adding behavior

We are going to create a simple Single Page Interface AJAX based web application using the "core" part of the framework (without components).

First of all you need to download and decompress the ItsNat distribution and create a new web application with your favorite IDE, the name is not important, we will use "itsnat" in this tutorial. Follow the instructions explained in the download section, specifically the section "What does any new ItsNat based web application need?"

Create a new servlet

ItsNat does not provide a framework servlet, the main reason is because init(ServletConfig) method must be used to setup the ItsNatHttpServlet object (ItsNat wrapper of your servlet) and register used templates. Any servlet request must be dispatched to ItsNatHttpServlet wrapper. To simplify this ItsNat provides an abstract servlet: HttpServletWrapper, the source code is very simple and useful to understand how the layering works:

When the servlet is first loaded an ItsNatHttpServlet layer object is created wrapping the real servlet object (init method).

As you can see in the line:

Any request received by this servlet is redirected to the ItsNat servlet wrapper.

The easiest way to create your application servlet is to inherit from HttpServletWrapper. Use your favorite IDE to create a new servlet, we will use the name "servlet" but this name is not mandatory, and replace the source code with:

No special configuration is required in the web.xml archive to register the servlet (use the typical default code generated by your IDE).

A typical ItsNat application only needs one servlet, anyway multiple ItsNat based servlets may be deployed and they may cooperate because the same ItsNatSession and ItsNatServletContext objects are shared.

Designing the page template

ItsNat supports HTML and XHTML files, in our example we are developing a HTML file like the following:

The isnat:nocache attribute (and the XML mandatory itsnat namespace declaration) set to true, tells the framework to avoid caching the <div> content, because page caching is enabled by default (can be disabled). <head> and <h3> elements will be cached automatically, for instance, at the server DOM, <head> contains a text node with a cache mark as the only child node, <h3> is not touched actually because the framework detects there is no saving (only contains and very small text).

This file will work as a template, and can not be accessible directly with a public URL, so will be saved below the standard WEB-INF folder, for instance:


Registering the page template

Now we need to bind the template with ItsNat with the following instructions (inside init() method):

ItsNat identifies the template with the specified name, manual.core.example, this name uses a Java-like format; this format is not mandatory but is highly recommended.

In this example no special configuration technique or framework is used and a hard coded file name is used in the code, if you think this approach is not elegant use the configuration technique you like more (.properties, custom XML, Spring …), the easiest way is to use .properties archives using the template names as keys.

Why a XHTML file is registered with a text/html MIME? Mozilla/Firefox, Safari, Opera etc accept application/xhtml+xml header but Microsoft Internet Explorer (MSIE) 6-8 does not, this is the most compatible declaration and is the main reason why the MIME type must be explicitly declared when registering.

Testing the template with a link or URL

Inside any static html, JSP etc add the following relative link:

or type the following URL in your browser:


A page like this will be loaded in your browser:

This page is the template page with no "user defined" processing. If you inspect the source code the page is not exactly the original template, some non-intrusive JavaScript code was added automatically at the end of the page, this JavaScript, mostly the "unload" event listener, controls the page lifecycle notifying when the page is unloaded.

Adding behavior

We need to intercept any request to the manual.core.example page, to achieve this we need to register a "load listener" to the ItsNatDocumentTemplate object of the page:

The CoreExampleLoadListener source code:

The processRequest method mimics HttpServlet.doGet/doPost methods, but using ItsNat object layers (in fact request and response are ItsNatHttpServletRequest and ItsNatHttpServletResponse objects). This method is called every time the page is requested to load by the client; the same page can be loaded several times and several times this method is called.

The ItsNatHTMLDocument object is the ItsNat object layer wrapping the Java W3C DOM HTMLDocument object. The HTMLDocument instance is initially clone of the template; every loaded page has a different ItsNatHTMLDocument/HTMLDocument object pair, then any modification made on an HTMLDocument while loading only affects to the concrete page loading. Any ItsNatHTMLDocument/HTMLDocument object pair lives during the lifecycle of the page and keeps the page state in server, any subsequent AJAX based event is targeted to the concrete document object in server.

ItsNatHttpServletRequest and ItsNatHttpServletResponse are unique per request and must not be saved beyond the request (load or AJAX-event request).

To isolate the document load processing and save any desired per loaded page state, a CoreExampleDocument auxiliary object is created; this object does not need to be saved (registered etc).

The load method modifies the document changing text nodes and adding a final element, using pure Java W3C DOM because the page DOM tree page is in the server as a Java W3C DOM tree. Any change to the original template is sent to the client.

Redeploying and reloading:

If you click the “Click Me!” text nothing happens, we must add a remote W3C DOM event listener:

The call ((EventTarget)clickElem1).addEventListener("click",this,false); adds a remote event listener listening for click events in client. In client automatically a proxy event listener is registered, when the symmetric element in client is clicked the native event is transported by AJAX to the server and converted in a Java W3C DOM Event, this event is dispatched to the registered Java EventListener in server. Only client events are transported to the server when some listener is registered in server listening this event type and node.

Redeploying and reloading again our web page now receives clicks and sends client events to the server using AJAX (in asynchronous-hold mode, the declared mode by default). Now both DOM elements are enabled/disabled to receive events every time the appropriate element is clicked.

The code fragment:

Is used to show how the DOM Event object is implemented by ItsNat and can be used to obtain the ItsNatServletRequest object (ItsNatHttpServletRequest actually). Of course the returned ItsNatDocument is the same object as the itsNatDoc field.

The following image shows the client page state after the user clicks the first element:

We have finished our first ItsNat AJAX based web application!!

This example shows the basics, ItsNat provides many more things see the Reference Manual and JavaDoc for more info.

Terms of Use Privacy Statement Contributor Agreement Add to deli.cio.us Single Page Interface logo ItsNat logo Innowhere logo