Create a Native Webview Module

This document will describe how to build a native module with an HTML webview and local html content. This document assumes you've already gone through this quick tutorial: Build a Native Module - Hello World

In this tutorial, we'll create a simple module that will have an icon in the uMobile home screen, and open an HTML-based module with some text and a button that opens an alert.

Step 1. Create an HTML Document

To get started, let's create an html file in our existing Appcelerator Titanium Project.

Resources/html/HelloWebView.html

Notice, that because this HTML file is local instead of remote, we're able to access the Titanium module to fire events to the native application. We're firing the "openWindow" event with the "Go Home" link in html, which is handled in Resources/js/models/WindowManager.js. Open Resources/html/HelloWebView.html and create an html doc.

<html>
<head>
    <meta name="viewport" content="width=device-width; user-scalable=no" />
    <style type="text/css">
    html {
        margin: 0;
        padding: 0;
        background-color: #ccc;
    }
    body {
        font-family: Arial, Helvetica, Sans-Serif;
        background-color: #eee;
        border-radius: 10px;
        padding: 10px;
    }
    h1 {
        background-color: #ccc;
        font-size: 18pt;
        border-radius: 10px;
        padding:10px;
    }
    </style>
</head>

<body>
<h1>Hello World!</h1>

<a href="javascript:Ti.App.fireEvent('showWindow', {newWindow: 'home'});">Go Home</a>

</body>
</html>

Step 2. Declare the new local module

Since this is just an html-based webview, we don't have to create a controller for it. We just have to declare it as a local module in config.js.

Add to Config and Set Icon

this.nativeIcons = {
        ...
        hellowebview: 'default-icon.png'
    };

this.LOCAL_MODULES.hellowebview = {
        title: 'Hello Web View',
        fname: 'hellowebview',
        url: Titanium.Filesystem.getFile(Titanium.Filesystem.resourcesDirectory, 'html/HelloWebView.html').nativePath,
        externalModule: true
    };

Step 3. Build your new module

Now you should be able to build your app in Titanium Developer and navigate to your new window from the uMobile home screen.

If you have errors building for iOS simulator, try deleting the <project>/build/iphone folder so that it will rebuild with the Filesystem module included.