Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Titanium UI Examples using JavaScript Modules (commonJS)
Branch: master
Pull request Compare This branch is 7 commits behind tzmartin:master.

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
Resources
.gitignore
CHANGELOG.txt
LICENSE
LICENSE.txt
README
README.md
manifest
tiapp.xml

README.md

TiUIExamples

Description

This app is a collection of various UI design patterns written as JavaScript modules for Titanium Mobile. This will show you how to develop and implement factory components for event driven mobile applications.

THIS IS FOR iOS ONLY. Sorry. Android support is coming next.

Screenshot 1

The Modules

Heads Up Display (HUD)

This is a basic implementation of an a heads up display, or alert view, that gracefully displays loading indicator and message.

HUD Screen Shot

Passcode Window (HUD)

This module is designed to "lock down" an app by invoking a passcode screen and prompting a user to input a 4 digit code. This is loosely based on Apple's internal passcode feature in iOS.

Passcode Screen Shot

More modules to come...

Accessing the Module APIs

To access these modules from JavaScript, you would extend your app namespace in app.js and import the module using the global require() method:

// Extend your existing app namespace for your modules to exist
MyApp.mod = {};
MyApp.mod.hud = require('modules/hud');
MyApp.mod.passcode = require('modules/passcode.mod');

Usage

HUD - MyApp.mod.hud

var HUD = MyApp.mod.hud.init(MyApp.ui.win); // pass in the window to attach the HUD
HUD.show('YOUR MESSAGE');
setTimeout(function(){
    HUD.hide();
},2000);

Methods

init(win);      // window object (required)
show(message);  // message (optional)
hide();         
  1. Initialize the module using the init() method and pass in a 4 digit number to validate against.
  2. Show a HUD by calling show(), passing an optional message to the component.
  3. You can remove a HUD by calling the hide() method.

Note: Replace 'MyApp' with your own app namespace.

Passcode - MyApp.mod.passcode

var PIN = MyApp.mod.passcode.init({code:1234,barColor:'#0079C1'});
PIN.open({
    success:function(){
    // do something
},error:function(){
    // do something
}});

Methods

init(code,barColor);  // 4 digit number (required), barColor (optional)
open(success,error);  // success callback (optional), error callback (optional)
close();              // force close a passcode window
  1. Initialize the module using the init() method and pass in a 4 digit number to validate against.
  2. Show a passcode window by calling open(). You can optionally pass in two callbacks: "success" and "error" that will be executed on each event. This is where you can choose to allow a user to continue or not.

Note: Replace 'MyApp' with your own app namespace.

Author

Terry Martin

License

This content is released under the MIT License. http://www.opensource.org/licenses/mit-license.php

Enjoy! Stay tuned for more modules being added to this project.

Something went wrong with that request. Please try again.