Tutorial: Single Page Interface SEO Compatible Web Site With ItsNat STATELESS Using HASHBANGS
Last update: 2015, Sept. 27
This tutorial shows the stateless SPI web site version of this stateful using hashbangs tutorial, reading the stateful version first is highly recommended, main ItsNat concepts are not going to be repeated in this tutorial and some parts of the stateless version are identical to stateful.
The objective of this tutorial is to make a Single Page Interface SEO Compatible Stateless using Hashbangs website. It is based on the stateless mode introduced in ItsNat v1.3. When we say stateless we mean there is no need of server affinity or session data sharing, in this mode ItsNat does not use the built-in web session system of your Java app server, therefore client requests of the same page can target any node in a cluster of symmetric nodes with the same ItsNat website.
To understand this tutorial some basic knowledge of ItsNat is required, especially the stateless mode.
SPI, SEO compatiblity and Stateless relationship
Web application set-up
ItsNat does not require special set up or application servers, any servlet container supporting Java 1.6 or upper is enough. Use your preferred IDE to
create an empty ItsNat web application, this tutorial uses
Creating the ItsNat servlet
Create a servlet as explained in stateful hashbang tutorial.
According to this setup the URL accessing our servlet is (8080 is supposed):
Because our web site is SPI we would like a prettier URL like
Now replace the generated code of the
It is very similar to the stateful version but with some subtle differences:
In this example the default URL is:
The main page of our web site is loaded as explained in the stateful hashbang version.
Main page processing
Returning to the servlet:
This call registers with the name "main" the page template file
Stateless events are used in this tutorial to notify the server about the next fundamental
state to be loaded (in the stateful example stateful custom user events were used), any received stateless event in server will load a document specified by
Back to the servlet we also register a load listener for the
In stateless the
In this tutorial the same template is going to be used for the initial load and for stateless event processing, this is the simplest (not mandatory) option, in this case is appropriated because the template is very simple, everything is in the same position when the page is loaded and when processing stateless events, there is no need of locById attributes in this tutorial (please read first about how ItsNat support stateless apps in Manual, a tutorial about using stateless mode exists).
Unlike the stateful mode,
Again we are using a mini-framework in this tutorial:
We are not going to explain the classes of the package
Main page processing stateless
Now is time to step down to describe how the mini-framework manages a stateless web site.
There is only one class into the package
Some parts of this class are very similar to the stateful example, others are very different.
phase but the document loaded may differ from the client state, for instance, this is the reason of this DOM cleaning in client to prepare the client
to receive the new inserted markup of the new state, take a look to the code of
Some explanation is needed: the method
Main page processing and hashbangs
Time to another step down to know how to manage hashbangs.
Code is basically the same as stateful but the sentence
Everything explained in stateful hashbang tutorial about Google AJAX Crawling specification is also applied here.
Infrastructure of fundamental states
Now is the time to deep inside a concrete example using our mini-framework. We must to define the fundamental states being used as examples in this SPI web site.
This is the source code of the concrete
Code is similar to the stateful version but not the same, in stateless we need to provide the necessary data from client to recreate in server the client state and perform the required operations to change the client to a new state.
State definition is very different in stateless, in stateful we can easily remember in server the current state in client, in stateless is not possible
unless you make some custom use of session, we are not going to use sessions in no way, so we need the necessary data from client, this is the reason of the
This is the
This code is different to the stateful version, we know the new menu item to activate but we do not know what is the current selected (remember it is stateless), therefore we clear all menu items and select the new active (this method is called by the base class for all menu items).
This is the
States are inherited from
The state "overview" including a popup ("overview.popup") is an example of how we can make a limited use of ItsNat components also in stateless:
Download, Online Demo and Links
See running online (try to clear cookies to check there is no need of keep client state in server)
Download source code in GitHub.