ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Mobile (Offline) Web Applications Java Database Architecture

Updated on October 29, 2011

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


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


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.


    0 of 8192 characters used
    Post Comment

    No comments yet.


    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at:

    Show Details
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the or domains, for performance and efficiency reasons. (Privacy Policy)
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)
    ClickscoThis is a data management platform studying reader behavior (Privacy Policy)