Page Comparison

Overview

The icons or "modules" that a user sees in the home screen are either a completely native module (with no representation in the actual portal), a completely web-based module (showing the mobile web version of the portlet inside a WebView, like an iframe), or a native module that overrides a module from the portal (such as the Map and Directory modules in version 1.0. This is a quick example of how to build a native module with no dependencies on the portal.

...

Step 1. Create Controller

A controller in version 1.0 is only required to have three public members: key (unique string identifier for controller), open(), and close(). However, controllers typically need a few similar private properties and methods to function, such as app (the facade), init(), and common UI elements. For this example, we'll create a controller at Resources/js/controllers/HelloWorldController.js.

var HelloWorldController = function (facade) {
    var app = facade, _self = this, init,
    win, label, titleBar;

    init = function () {
        //Give it a unique key so the window manager and other members know what to call it
        _self.key = 'hello';
    };

    this.open = function () {
        win = Titanium.UI.createWindow({
            navBarHidden: true,
            backgroundColor: "#eee"
        });
        win.open();

        titleBar = app.UI.createTitleBar({
            homeButton: true
        });
        win.add(titleBar);

        label = Titanium.UI.createLabel({
            text: "Hello World"
        });

        win.add(label);
    };

    this.close = function () {
        win.close();
    };

    init();
};

...

Step 2. Add to Facade and Window Manager

We need to open Resources/app.js and add 3 lines of code to make sure the controller is fully registered. One line includes the new file from the file system, another line adds the controller to the facade, and another adds the controller to the window manager.

Somewhere around all of the other lines reading Titanium.include('...'); create a new line that reads:

...

Step 3. Add to Config and Set Icon

We need to declare the native module in the config (Resources/js/config.js), so that it will automatically get loaded when drawing the home window (portalWindowController). To do so, we find other native modules in the UPM.NATIVE_MODULES constant, and add another module object to the array before or after the other native modules.

UPM.LOCAL_MODULES.hello = {
    title: 'Hello World',
    fname: 'hello', //used when loading/sorting portlets in PortalProxy
    window: 'hello' //bound to icon when placed in portal window, tells window manager what to open
};

...