dcsimg

Under the Hood of Native Web Apps for Android

Web Development for Mobile Devices is the latest rage. But what if you want an "off-line" web application? No problem!

The HTML

Here is the html used in our application — as you can see, it is really very simple. Despite all the mention of CSS, we are not actually using any for this application! If you want this to be spiffy, you are welcome to download the code and add a style-sheet — our focus here is on making things run under the hood — not worried about the paint today.

<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=0.25,user-scalable=yes" />
<title>Going Native</title>
</head>
<body onload="window.linuxmag.Info('App loaded!');">
<center>
<h3>Going (Web) Native</h3>
<input type="text" id="ib"><br />
<button onclick="window.linuxmag.Info(document.getElementById('ib').value);">Log Info</button>  
<button onclick="window.linuxmag.Error(document.getElementById('ib').value);">Log Error</button><br />
<button onclick="if (window.confirm('End App?')) window.linuxmag.EndApp();">Kill This App</button><br />
<img src="file:///android_asset/lmlogo.jpg">
</center>
</body>
</html>

Aside from the basic html code, the thing to make not of is the Javascript code which includes “window.linuxmag.*”. This code is essentially exercising three new functions we have mapped into the browser’s Javascript environment: Info, Error, and EndApp, all part of the “linuxmag namespace”.

Note also the link to the logo image file — it is using a file:///android_asset based url. The android_asset folder maps to the “assets” folder in the development project — refer to the image above to see the lmlogo.jpg sitting in the assets folder. We will see this url construction used again when we look at the Java code, which is up next.

The Java

The Java code provides three basic items to our application:

  • The Java code makes our application “native” — one of our primary goals here.
  • An instance of a WebView view in our one and only Android Activity, defined in main.xml.
  • Implementation of the “linuxmag” functions demonstrated in the HTML/Javascript shown above.

We will look at the java source file in three sections. First the imports:

package com.msi.linuxmag.goingnative;

import android.app.Activity;
import android.os.Bundle;

import android.webkit.WebView;
import android.webkit.WebSettings;
import android.webkit.WebChromeClient;

import android.util.Log;

We see that we have an import statement for the boiler-plate Activity and Bundle classes. Next we have three import statements for three explicit classes within the android.webkit package. Note that we could also have used a single import android.webkit.* statement to replace those three lines. Lastly, we have an import statement for the Logging facility used by our application.

Now for the MainAct Activity class implementation, which includes a fair number of comments to walk us through what the code is doing.

public class MainAct extends Activity {
    /** Called when the activity is first created. */
    private WebView browser = null;
	@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        // connect to our browser so we can manipulate it
        browser = (WebView) findViewById(R.id.mybrowser);

        // get settings so we can config our WebView instance
        WebSettings settings = browser.getSettings();

        // JavaScript?  Of course!
        settings.setJavaScriptEnabled(true);
        // clear cache
        browser.clearCache(true);

        // this is necessary for "alert()" to work
        browser.setWebChromeClient(new WebChromeClient());

        // add our custom functionality to the javascript environment
        browser.addJavascriptInterface(new MyCoolJSHandler(), "linuxmag");

        // load a page to get things started
        browser.loadUrl("file:///android_asset/index.html");

    }

    final class MyCoolJSHandler () // defined later in this article
}

Here is a quick and dirty run-down of what is happening in the onCreate() method.

  • Call the super class’s onCreate() method [ boiler-plate code]
  • Setup the view with a call to setContentView [ boiler-plate code]
  • Connect an instance of a WebView control to the WebView control defined in the main.xml file, shown at the end of this article
  • Get the settings object
  • Enable Javascript!
  • Clear the cache — very helpful during development
  • Setup our WebChromeClient. This is needed for certain functions like alert and confirm. You may want to check out the online documentation on this class.
  • Ahh, the magic — setup a Javascript interface between the browser and a class we define named MyCoolJSHandler, relating them via the namespace “linuxmag”
  • Load up our statically provided index.html file

Let’s see what goes on in the Javascript handler.

	final class MyCoolJSHandler
	{
		// write to LogCat (Info)
		public void Info(String str) {
			Log.i("GoingNative",str);
		}

		// write to LogCat (Error)
		public void Error(String str) {
			Log.e("GoingNative",str);
		}

		// Kill the app
		public void EndApp() {
			finish();
		}
	}

This class is surprisingly simple — just define functions with a public signature and this function is exposed in the javascript environment, thanks to the earlier call to addJavascriptInterface() on the WebView instance.

A call to window.linuxmag.Info(“some string”) in Javascript is mapped to the Info method of the MyCoolJSHandler class, anonymously created in this example. This implementation just drops a line in the Log with a level of “I” for Info.

The Error and EndApp functions similarly exercise native API calls. However, this could go much further and interact with the Contacts database, the Camera, a raw socket connection, etc. This is a super simplification, but in essence, this is what the folks at PhoneGap are doing — mapping Javascript-accessible code into native Java code.

Let’s wrap up with a couple of necessary xml files that are part of our project. First main.xml, which defines the layout for our Activity. In this case we have a single WebView in a LinearLayout. In a more sophisticated application, this layout might include an “Address Bar” to accompany the WebView.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

 <WebView
      android:id="@+id/mybrowser"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:layout_weight="1"
  />
</LinearLayout>

As for all Android native applications, we need an AndroidManifest.xml file. This file provides the linkages and permissions that are required for an application, including a special permissions entry for applications which want to access resources from the Internet. This is required in the event that you want to link to data beyond the local device.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.msi.linuxmag.goingnative"
      android:versionCode="1"
      android:versionName="1.0">
    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".MainAct"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
    <uses-sdk android:minSdkVersion="5" />
     <uses-permission android:name="android.permission.INTERNET" />
</manifest>

So that’s pretty much it. In honor of our “EndApp” function, wrapped in a window.confirm() in the code, we’ll end with a screen shot of ending the application. I hope you learned something along the way. If this was of interest to you, please let me know.

confirm.png

Comments on "Under the Hood of Native Web Apps for Android"

Usually posts some very interesting stuff like this. If you?re new to this site.

Usually posts some very fascinating stuff like this. If you are new to this site.

Just beneath, are several completely not associated internet sites to ours, nevertheless, they are surely worth going over.

I like to spend my free time by scaning various internet recourses. Today I came across your site and I found it is as one of the best free resources available! Well done! Keep on this quality!

Want to be a part of an incredible workforce?

Usually posts some extremely exciting stuff like this. If you are new to this site.

Wonderful story, reckoned we could combine some unrelated data, nevertheless really worth taking a search, whoa did one particular master about Mid East has got a lot more problerms as well.

Below you will find the link to some websites that we consider you should visit.

Usually posts some pretty interesting stuff like this. If you are new to this site.

DVD Movies: Older blockbusters, children’s movies and classic movies are usually good sellers.
The war raged on and their bookstore was destroyed when Manila was declared an ‘open city’ to America’s
bombing attacks in order to drive away Japan’s Imperial Army.
This type of professional occupation is highly in demand in (1) New York
City, NY, (2) San Francisco, CA (3) Los Angeles,
CA, (4) Columbus, OH, and Chicago, IL.

Also visit my blog post; giuseppe zanotti mens

Wonderful story, reckoned we could combine a handful of unrelated information, nevertheless really really worth taking a appear, whoa did a single find out about Mid East has got extra problerms too.

That will be the end of this post. Right here you will obtain some internet sites that we consider you will appreciate, just click the hyperlinks.

That will be the finish of this article. Here you?ll obtain some websites that we believe you?ll value, just click the hyperlinks.

That would be the end of this report. Here you will locate some internet sites that we believe you?ll enjoy, just click the links.

Here is a good Blog You might Obtain Fascinating that we encourage you to visit.

Wonderful story, reckoned we could combine a handful of unrelated information, nonetheless definitely really worth taking a appear, whoa did a single discover about Mid East has got far more problerms at the same time.

Check beneath, are some completely unrelated internet websites to ours, on the other hand, they are most trustworthy sources that we use.

Please go to the sites we adhere to, including this one, as it represents our picks from the web.

Here is a good Weblog You might Find Fascinating that we encourage you to visit.

Wonderful story, reckoned we could combine several unrelated information, nonetheless seriously really worth taking a appear, whoa did 1 discover about Mid East has got extra problerms too.

Just beneath, are a lot of absolutely not related web-sites to ours, having said that, they may be certainly really worth going over.

That would be the finish of this article. Right here you?ll obtain some web pages that we feel you?ll appreciate, just click the hyperlinks.

Please pay a visit to the web-sites we adhere to, such as this a single, because it represents our picks from the web.

Usually posts some quite intriguing stuff like this. If you?re new to this site.

Always a big fan of linking to bloggers that I adore but don?t get a lot of link adore from.

Here are some hyperlinks to web sites that we link to mainly because we assume they’re really worth visiting.

Check beneath, are some totally unrelated web-sites to ours, nevertheless, they are most trustworthy sources that we use.

Although internet websites we backlink to beneath are considerably not associated to ours, we really feel they may be in fact worth a go by way of, so have a look.

Always a significant fan of linking to bloggers that I adore but really don’t get a whole lot of link appreciate from.

We like to honor many other world wide web sites around the net, even if they aren?t linked to us, by linking to them. Below are some webpages really worth checking out.

Below you will locate the link to some sites that we consider you’ll want to visit.

Leave a Reply