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: Single Page Interface SEO Compatible Web Site With ItsNat STATELESS Using History API

Last update: 2015, Sept. 27  

Introduction

Introduction/Setup
Web application set-up
Creating the ItsNat servlet
Main page processing
Main page processing stateless
Main page processing and History API
Infrastructure of fundamental states
Conclusion
Download and Online Demo

This tutorial shows the stateless SPI web site version of this stateful using history api tutorial, and the history API based version of stateless using hashbangs, reading both tutorials before this tutorial is highly recommended, read also the first tutorial stateful using hashbangs because many core concepts are explained there.

The objective of this tutorial is to make a Single Page Interface SEO Compatible Stateless using History API website.


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 spistlesshsapitut as the name of the web application.


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):

http://localhost:8080/spistlesshsapitut/servlet

Because our web site is SPI we would like a prettier URL like

http://localhost:8080/spistlesshsapitut/

Configuration of web.xml is similar to the stateful history api tutorial. In this case, just to play to something different, we are not going to use a prefix like /site, this implies we need to map every fundamental state to the servlet in web.xml:

Also add a simple index.jsp with this content:

"overview" will be the default state.

Now replace the generated code of the servlet class with this code:

Code is the same than stateless hashbang tutorial but in this case the separator "-" is used instead of "."

In this example the default URL is:

http://localhost:8080/spistlesshsapitut/

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 main.html (saved in WEB-INF/pages/):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:itsnat="http://itsnat.org/itsnat">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="expires" content="Wed, 1 Dec 1997 03:01:00 GMT" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <title id="titleId" itsnat:nocache="true">Tutorial: Single Page Interface STATELESS SEO Compatible Web Site With ItsNat Using History API
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="js/spi_hashbang.js?timestamp=2015-08-18_01"></script>
    <script type="text/javascript">
    function setState(state_name,state_secondary_name)
    {
        if (typeof document.getItsNatDoc == "undefined") return; // Too soon, page is not fully loaded
        var userEvt = document.getItsNatDoc().createEventStateless();
        userEvt.setExtraParam('itsnat_doc_name',"main");
        userEvt.setExtraParam('state_name',state_name);
        if (state_secondary_name) userEvt.setExtraParam('state_secondary_name',state_secondary_name);
        document.getItsNatDoc().dispatchEventStateless(userEvt, 3 /*XHR_ASYNC_HOLD*/, 1000000);
    }
    window.spiSite.onBackForward = setState;

    function removeById(id)
    {
        var elem = document.getElementById(id);
        if (!elem) return;
        elem.parentNode.removeChild(elem);
    }
    </script>
</head>
<body>

<div class="main">
    <table style="width:100%; height:100%; padding:0; margin:0;" border="0px" cellpadding="0" cellspacing="0">
    <tbody>
    <tr style="height:50px;">
        <td>
            

Tutorial: Single Page Interface SEO Compatible Web Site With ItsNat STATELESS
Using Hashbangs

</td> </tr> <tr style="height:40px;"> <td> <table style="width:100%; margin:0; padding:0; border: #ED752A solid; border-width: 0 0 2px 0; "> <tbody> <tr class="mainMenu" itsnat:nocache="true"> <td id="menuOpOverviewId"> Overview </td> <td id="menuOpDetailId"> Detail </td> <td> </tr> </tbody> </table> </td> </tr> <tr style="height:70%; /* For MSIE */"> <td id="contentParentId" itsnat:nocache="true" style="padding:20px; vertical-align:super;" > </td> </tr> <tr style="height:50px"> <td style="border-top: 1px solid black; text-align:center;"> SOME FOOTER </td> </tr> </tbody> </table> </div> <iframe id="googleAnalyticsId" itsnat:nocache="true" src="?ganalyt_st=" style="display:none;" ></iframe> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-2924757-6', 'auto'); ga('send', 'pageview'); </script> </body> </html>

This template is basically the same as stateless hashbang example, the main difference is the paths "css/style.css" and "js/spi_hashbang.js...", no ".." is needed because we are not using a prefix in URL.

A lot of stuff about stateless is already explained in stateless hashbang tutorial, take a look to this tutorial.

We are using a mini-framework in this tutorial:

  1. org.itsnat.spi: generic classes, same as all other SPI web site tutorials

    Classes: SPIMainDocumentConfig, SPIMainDocument, SPIState, SPIStateDescriptor

  2. org.itsnat.spistless: stateless specific, already explained in stateless hashbang tutorial

    Class: SPIStlessMainDocument

  3. org.itsnat.spistlesshashbang: stateless and history api processing specific

    Classes: SPIStlessHsapiMainDocument


Main page processing stateless


The only one class into the package org.itsnat.spistless: SPIStlessMainDocument is already explained in stateless hashbang tutorial, nothing new here.


Main page processing and History API


Time to know how to manage the History API in a stateless context.

The package org.itsnat.spistlesshsapi has only one class SPIStlessHsapiMainDocument, this class inherits from SPIStlessMainDocument and specifies how to manage history api in this stateless context.

Yes, SPIStlessHsapiMainDocument is near indentical to SPIStfulHsapiMainDocument of stateful history api tutorial, because History API and hashbang management has nothing to do with stateful or stateless nature of the web site.


Infrastructure of fundamental states


Now the 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 SPITutMainDocument inherited from SPIStlessHsapiMainDocument:

Something new? No, the code is basically the same as SPITutMainDocument of the stateless hashbang example, only note the separator "-" typically used in History API examples. We can say the same about all other classes in package org.itsnat.spistlesshsapitut.


Conclusion


This tutorial has shown a generic example of how to build SPI stateless using History API web sites with ItsNat similar to page based counterparts without sacrificing the typical features of the page paradigm like bookmarking, SEO, JavaScript disabled, Back/Forward buttons (history navigation), page visit counters etc. Use the mini-framework to build your SPI sites using this approach if you want.


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.




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