Mobile (Offline) Web Applications Java Database Architecture

Offline web applications have become very sophisticated, even rivaling their native app counterparts. As they evolve as first class citizens as a full bred application and to make an Offline Web Application (OWA) behave like their native counterparts, OWAs need a local storage facility; a.k.a. a database. There are several free and or open sourced databases with and without commercial support; there are also many commercial databases.

There are several types of database designs and architectures; some are relational, others are object oriented, still others manage their data as pure XML, while others rely on document based architecture with key/value pairing using a JSON format or some other format and finally there are JavaScript databases that store their data as arrays. I am sure the you as the reader may think of other types and you are very welcome to leave me a comment. I love discussions.

This article will focus on a proposed architecture for using a Java based database. The database must be relational for this architecture to work.

Application Architecture
Application Architecture

Architectural Overview

The web application would be composed of several key components that would interact with each other and provide full cycle functionality.

As you can see from the diagram on the right, the application would implement a quasi MVC design. The HTML/CSS would provide the UI of the application, the View, thus. The JavaScript and Applet would act as the Model and Controller of the application with the database providing data persistence.

Since JavaScript doesn’t have the necessary APIs to communicate directly with most Java databases, a controller mechanism would be needed to interface with a Java relational database and that can implement a JDBC data provider. This can be accomplished with an Applet, which can be embedded with no visibility using either the EMBED or OBJECT Html element. Since an Applet and JavaScript can communicate with each or through and HTML element.

The Java (Controller)

Within the proposed application architecture, the JavaScript would act a the MODEL in the MVC design, providing inter communication between the View (HTML) and the Controller (Applet).

There are a couple of possible inter communication designs for JavaScript-Java; either through the LiveConnect API or directly with the DOM API.

LiveConnect

LiveConnect is a programming interface developed by Netscape to allow two way communication between JavaScript and Java. To this end an Applet would implement the netscape.javascript.JSObject class.

This is a boiler plate example to give you an overview of how to implement the class within an Applet. The example demonstrates getting a handle on the current page and interfacing (calling) a JavaScript function.

LiveConnect Boilerplate Code
LiveConnect Boilerplate Code

Several methods are available to navigate the DOM elements on a HTML page. To use the JSObject, you must include it on the classpath and your need to import the JAWS.jar.

Adding the Applet to the HTML page

To include the applet on a web page, you can either use the OBJECT tag or the EMBED tag. The choice need to script a detection mechanism to see which browser supports either. Also the EMBED was deprecated in HTML4 but has been added to the HTML5 specification. You also need to add the MAYSCRIPT parameter for security reasons.

Object Tag
Object Tag
Embed Tag
Embed Tag

CommonDOM API

The other way to use Java with JavaScript or that matter and more precisely with HTML DOM, is through the CommonDOM API which is available starting with Java 6. By right you don’t need JavaScript but if you need to access a JavaScript function, it is possible.

The following example illustrates a possible implementation. You obtain access to the DOM through the HtmlDocument class.

DOMService (Java DOM API)
DOMService (Java DOM API)

Database access

Access to and from the database would be done using standard JDBC call. Taking the Applet example from above, it will a simple task to add some code to provide CRUD operations to the application.

The following example demonstrates getting a handle on the current page and executing CRUD operations and returning the resultset as a string (XML) which will be processed by a JavaScript function.

CRUD Operations Example
CRUD Operations Example

The JavaScript (Model)

The JavaScript logic would define a series of function to receive the data from the database via the Applet. The JavaScript functions would also render the data to the View (HTML).

Applet Scripting

To enable scripting for the Applet from to define an ID for your Applet then you can access it from within you HTML page and JavaScript.

Add an Applet ID for JavaScript and DOM Access
Add an Applet ID for JavaScript and DOM Access

JavaScript Access

To access a Java method from JavaScript, simply call from a button’s onClick event like:

Accessing Java Method from DOM
Accessing Java Method from DOM

Managing the Data

To access the Applet from within your JavaScript function you need only use the ID and the Applet method, passing parameters as needed.

To process the returning resultset and load the data into a form or to a data grid (table), you would need to convert the resultset to XML or JSON or if it is form data tou could return it as an Object. The JavaScript would then process data according to the incoming form: XML, JSON or Object and could either loop through it or map the returning data to fields on your form.

JavaScript CRUD Operations
JavaScript CRUD Operations

Update/Insert

To write data to the database you would another function to perform either INSERT or UPDATE.

JavaScript / Java operations
JavaScript / Java operations

In Conclusion

Obviously this is not a complete solution, it was the purpose of the application architecture outline. I wanted to demonstrate a viable solution, at least the big pieces, for building Offline web applications; either for mobile or other desktop like desktops, laptops or netbooks. Also there are possibly others architectural designs that are available or even that can improve on this design.

More by this Author


Comments

No comments yet.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working