Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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

...

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

...