Web Development for Mobile Devices is the latest rage. But what if you want an "off-line" web application? No problem!
The Mobile Web Application
For years the mobile development experience has been a game of “my widgets are cooler than your widgets.”
Or “My development environment is faster than yours”.
The truth is that quality applications often take a lot of time and energy to write well. Sure, the first 90 percent may go quickly enough using — particularly if you are using the latest tool or framework — whichever it is — it doesn’t reall matter. It’s the “second 90 percent” that takes time and talent.
You still need to know how things work under the hood — one day you will find yourself in a corner and have to code your way out of it.
So if you are going to invest in some development skills, where do you spend that capital? How about web technologies?
Web as a better Widget
On the premise that every platform takes time and sweat to learn and become proficient in, why not invest in a set of skills that are nearly universally applicable?
Web technologies present a very compelling environment for a developer to invest their time and talent in. If you learn web skills, you can build some pretty exciting and useful applications today — and for multiple platforms including: desktop, enterprise, and yes, even mobile.
A “web” application makes a lot of sense when you are connecting to a web server — either an “Internet” application or an Enterprise “intranet” application. In these applications the value is generally found in the backend database and/or corporate business data sources. But what if our application is largely “client” oriented — the kind of apps you might buy in an app store? Does it make sense then? Sure thing.
Taking it Native
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.
In the balance of this column we are going to look at an ultra-simple native web application. It is not meant to compete with the more robust native web platforms like PhoneGap and Appcelerator — it is designed to take a peak under the hood of that kind of solution and show how it works. This example is for Android, though there are similar and analogous techniques for other platforms including iPhone, BlackBerry, webOS, etc. Let’s get started.
At the core, a native web application relies on an “embedded browser object”. In the Android world, this is known as a WebView view (or control), found in the android.webkit package. In fact, this package contains a number of classes exposing a variety of browser-related functionality. Using these classes remind me of the old “MasterMind” board game — a moment to learn, a lifetime to master. OK, so its not that hard, but there are a bunch of moving pieces to become familiar with. To describe some of these, we will look at a sample application which performs a couple of basic tasks:
- Write to the the Android Log, with separate functions for Info and Error level entries
- Exit the application
By the way, if your only interest is to show an external webpage from your application, you would likely be better served to simply launch the on-device browser. Using the WebView control is meant for applications where you want to exercise more control over the functionality for your “on device” or native application.
As exhibit A, demonstrating that our application is indeed a native application, here is a screen shot of the application icon on the Android launcher screen.
The code for the application, named GoingNative, is available on the Linux Magazine Mobile code hosting site.
The application presents a very simple user interface including a title, a piece of text in a heading tag, a single input form element, three buttons and a static image. The html file and the image are both packaged in the apk file — there is no need to go to the Internet to run this “native web” application. The image below shows the project in an Eclipse workspace.
And here is a screen shot of the application in action.
Note that this image has the application running in the emulator. The screen in the background is showing a portion of the DDMS perspective in Eclipse. We can see that the application com.msi.linuxmag.goingnative has a process id of 2723 and in the lower portion of the shot we see a couple of entries from our application. We’ll see how those came to be in the log in a moment.
Let’s see how this application is constructed. We’ll start with the HTML.