UsingWebView - android-scripting - A guide to HTML scripts and using WebView APIs. - Scripting Layer for Android brings scripting languages to Android.

UsingWebView

A guide to HTML scripts and using WebView APIs.

Updated Aug 16, 2011 by rjmatthews62

Introduction

SL4A r1 introduces a built-in HTML interpreter and APIs for controlling a WebView.

UiFacade also offers a range of features for directly manipulating dialog boxes and menus. See Ui Help for more detail.

Full Screen Interface

Experimantal support for a Full Screen UI is now availabe. See FullScreenUI

Using WebViews

The webViewShow(url) API makes it possible to open a custom HTML page specified by the URL (it's possible to use file://) in a WebView. WebViews offer the same familiar Android class available to all supported languages:

var droid = new Android();

However, unlike other languages, the Android class exposed in WebViews has an additional method registerCallback():

droid.registerCallback("event_name", function(data) { alert(data); });

The specified callback will be called any time an event with "event_name" is posted (e.g. when new sensor data arrives). For example:

<html>
  <head>
    <title>Sensor Monitor</title>
  </head>
  <body>
    <div>X-Force: <div id="xforce" style="display: inline;" /></div>
    <div>Y-Force: <div id="yforce" style="display: inline;" /></div>
    <div>Z-Force: <div id="zforce" style="display: inline;" /></div>
      <script>
        var droid = new Android();
        var display = function(data) {
          document.getElementById("xforce").innerHTML = data.data.xforce;
          document.getElementById("yforce").innerHTML = data.data.yforce;
          document.getElementById("zforce").innerHTML = data.data.zforce;
        }
        droid.startSensing();
        droid.registerCallback("sensors", display);
      </script>
  </body>
</html>

Which leads us to the HTML interpreter. It's not necessary to actually have a backing script in another language in order to use the WebView. The HTML Interpreter enables you to execute HTML files (like above) the same way you would a Python script.

If you decide to launch your WebView from an interpreter, such as Python, you can communicate back and forth between the WebView and your Python script via events. Events posted in either the Python script or WebView's JavaScript can be received by the other side.

Exchanging Events

Let's start with a simple example that's written in pure JavaScript:

<html>
  <head>
    <title>Text to Speech</title>
    <script>
      var droid = new Android();
      var speak = function() {
        droid.ttsSpeak(document.getElementById("say").value);
      }
    </script>
  </head>
  <body>
    <form onsubmit="speak(); return false;">
      <label for="say">What would you like to say?</label>
      <input type="text" id="say" />
      <input type="submit" value="Speak" />
    </form>
  </body>
</html>

Entering text into the box and clicking submit will use the TTS API to speak the text. Now, let's change this to be started by a Python script. Assuming the above script is saved as text_to_speech.html, we could launch it in a WebView from Python like so:

import android

droid = android.Android()
droid.webViewShow('file:///sdcard/sl4a/scripts/text_to_speech.html')

Launching this Python script will open the text_to_speech.html script in a WebView and then exit. However, the WebView will stay open and work just as before.

Now lets change the HTML so that it raises an event that our Python script will wait to consume:

<html>
  <head>
    <title>Text to Speech</title>
    <script>
      var droid = new Android();
      var speak = function() {
        droid.postEvent("say", document.getElementById("say").value);
      }
    </script>
  </head>
  <body>
    <form onsubmit="speak(); return false;">
      <label for="say">What would you like to say?</label>
      <input type="text" id="say" />
      <input type="submit" value="Speak" />
    </form>
  </body>
</html>

Launching this script by itself won't do much. We'll need to change the Python as well:

import android

droid = android.Android()
droid.webViewShow('file:///sdcard/sl4a/scripts/text_to_speech.html')
while True:
  result = droid.waitForEvent('say').result
  droid.ttsSpeak(result['data'])

This bit of Python will wait for "say" events generated by the JavaScript. Whenever a "say" event arrives, it will use the TTS API to speak the data attached to the event.