| Info |
|---|
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
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<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
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.
...