Page Comparison

...

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 HTML Document

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

...

Code Block

	html
	html

<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 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

Code Block

	javascript
	javascript

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

Code Block

	javascript
	javascript

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.

...

Versions Compared

Old Version 4

New Version 5

Key

Step 1. Create HTML Document

Step 2. Declare new local module

Step 3. Build your new module