Hands-On Version on Android Programing using HTML
An
extract from the Linux Magazine's article on "Under The Hood of Native
Web Apps for Android" which covered building Off-line web applications
on Android:
Web
applications can provide remarkably sophisticated user interfaces
thanks to powerful rendering engines as CSS capabilities continue to
expand — and the canvas tag is quite capable in and of itself.
Javascript is a challenging yet profoundly powerful programming
environment, enabling a wide array of applications — much more than
just “form validation scripts”. And Ajax can bring in pieces of data
from servers when and if they are required.
OK,
but my cool mobile device has GPS, a Camera and an MP3 player. And an
SQL database. Can those features be leveraged also? Yes.
I want my application in the app-store, can I package it up and sell it? Yes.
So how does this work? By taking the web native.
Therefore let us create a simple logging application.
Our Lab Application Design Details
Write a simple application with the following specification:
Task 1:-
The
UI will be basic HTML form that takes text input and has two buttons
for sending the text in as System Logs, i.e. Log Info and Log Error.
Note that these are not available to pure HTML/Javascript web apps that
execute in the Android browser
Task 2:-
Use
JNI to get system time from the phone into the JAVA code and send Info
log reporting the successful JNI execution from C code
Task 3:-
set variables in the Javascript environment such that the text sent to log along with system time is displayed below the form
Task 4:-
Send this information to the SQLite database
(Read below for more pointers or start hacking on your own)
How to go about doing all this?
Task 1:-
Write a simple HTML code with
<input id="logstr">...</input>
// Use Javascript for var logstr = document.getElementById('logstr').value
// Javascript Tutorial: http://www.tizag.com/javascriptT/javascriptvariables.php
<button onclick="window.isanamespace.LogInfo( logstr );>...</button>
<button onclick="window.isanamespace.LogError( logstr );>...</button>
Feel free to use other HTML elements like images or CSS stylesheets to personalize your application/
These
resources such as the .css file, the image .jpg file and the .html file
can all be placed in a folder under your project directory, which you
can name (say "assets"). They can hereafter be referenced as file:///android_asset/<filename> from any other code in the project directory (HTML, JAVA or C).
Next use JAVA to setup a "WebView" and load this HTML page in it. For this we need the following packages:
import android.webkit.WebView;
import android.webkit.WebSettings;
import android.webkit.WebChromeClient;
You can then setup your WebView environment and load the HTML Page
//Define WebView
private WebView browser = null;
browser = (WebView) findViewById(R.id.mybrowser);
//Enable Javascript
WebSettings settings = browser.getSettings(); settings.setJavaScriptEnabled(true);
//Define a class that binds all its public functions to our Javascript namespace
browser.addJavascriptInterface(new MyJSHandlerInJava(), "isanamespace");
//Load the HTML file
browser.loadUrl("file:///android_asset/index.html");
In this Class MyJSHandlerInJava, define our public functions LogInfo and LogError and call the Log.i and Log.e functions from the android.util.Log package to send user input to the system log. You can watch all the system logs by running tools/ddms.
Task 2 :-
Define
another class that returns the timestamp when you call a function
inside it. Declare this function as Native and use the JNI interface to
get a string value of the present timestamp. See JNI Tutorial below.
Task 3 :-
Add a function to our MyJSHandlerInJava class, that returns a string on call to the javascript environment.
Task 4 :-
Use android.database.sqlite packagee to interact with the SQLite Database.
Logging from NDK Tutorial
http://blog.blackwhale.at/2009/08/android-ndk-logging/
JNI Tutorial
http://support.codegear.com/article/35748
Interesting Article
http://www.ibm.com/developerworks/opensource/library/os-android-sensor/index.html