Tutorial: Simple ItsNat (Core) Application
Last update: 2010, April 23
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
When the servlet is first loaded an
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
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
Designing the page template
ItsNat supports HTML and XHTML files, in our example we are developing a HTML file like the following:
This file will work as a template, and can not be accessible directly with a public URL,
so will be saved below the standard
Registering the page template
Now we need to bind the template with ItsNat with the following instructions (inside
ItsNat identifies the template with the specified name,
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:
We need to intercept any request to the
To isolate the document load processing and save any desired per loaded page state,
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:
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
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.