| 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
...
- html
...
...
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
};
Now all we need to do is create the HTML to be rendered in our WebView. 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.
| 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.
| Tip |
|---|
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. |