Sunday, January 29, 2012

Introduction

In this tutorial we'll develope a simple Andorid application using combination of native Android development, jQ.Mobi framework
and HTML. Application sample can be downloaded from this link.

The main point of this tutorial is too use adventages of HTML and JavaScript for UI design, and native Android development
and Java language for business logic development.
For UI development, we'll use jQ.Mobi framework and HTML. JQ.Mobi is an HTML5 optimized rewriting JQuery JavaScript library, which offers
way much faster execution than some other JS frameworks (JQuery Mobile, Zepto...). It is compatible for Andorid and iPhone platforms.

The basic concept of this sample lies in integration of HTML/JavaScript based UI with Android Java backend.
Andorid provides a generic way of exposiong Android Java objects in JavaScript code through interface that is registered using WebView class.
This interface provide us a set of abilities:

Screen flow

This very simple aplication will contain two HTML pages. First page will be used for saving fruit data in Andorid SQLite database and the
second page will show all fruits from database table.

First page (index.html) - Add new fruit

Second page (viewall.html) - View all added fruits

Database access

First, create a new Andorid project in Eclipse. After that, create a new package where we'll add some classes for database access.
Create a new class named DataSQLHelper that will extend SQLiteOpenHelper class.

In onCreate method we create new WebView component that will be used for HTML preview and JavaScript execution. We'll also need to enable JavaScript for WebView component.
In the next step, we'll create an instance of BDRepository class. Creating this instance, it will be created fruitapp.db database with "fruit" table. After that, we'll register "fruitInterface" for current context. This JavaScript interface represents the interface
that will be used for calling Java methods from JavaScript, and vice versa. In the end, we'll load index page.

Method addNewFruit is used to insert data from HTML form into database table. On the other hand, method sendResultToJavaScript is used to read all the records from
"fruit" table in form of JSON representation and send JSON string to HTML by sending it like argument of javascript function.
Both of these methods will be called from JavaScript using JavaScript interface.

Override method onKeyDown to define event on click of back button. In our case, default behavior is to go to previuos page.

Adding HTML pages and JavaScript

In assets create folders www and css-js:

In folder css-js add exported files from downloaded jQ.Mobi archive.

In folder www create new "index.html" page. In this case, it was used HTML 5, but you can use any version of HTML.

Add fruit

Fruit Name:

Fruit Number:

In "head" tag we add css and jQ.Mobi libraries. After that, create simple form with basic input fields and buttons.
In the end, add JavaScript functions.

saveFruit function reads values from input fields and use it as arguments in Java method addNewFruit call.
Notice that for Java method calls, we use interface that we added before in our Activity class.

goToAllRecordsPage function redirects to next page.

clearFields function clears values from input fields.

In folder www create another HTML page called "viewall.html".

All fruits

Records:

Again, in the "head" tag we add css and jQ.Mobi libraries. In body part, add an unordered list element that will be used to display fruit data.

After page loads, Java sendResultToJavaScript method will be called. As argument of this method we use name of JavaScript method that we'll be invoked.
JavaScript function getRecords we'll parse JSON result set and add records data to list items.