Titanium Introduction

Ghosts
Steve Brownlee
&
Alan Schultz

Shrieks
November 9th
Discuss Inversion of Control and Dependency Injection with Brian
Cavalier

Future Talk
Val Head will talk about Designing Motion (valhead.com)

Future
JavaScript Gaming Competition
• impactJS.com
• craftyJS.com
• flashJS.com

What is Titanium?
Cross-Platform Application Development
var cross-platform !== write-once-run-anywhere;

Current Platforms

Windows
iOS

Desktop Mobile
Linux OSX Blackberry
Android
(soon)

What is Titanium?
• Open source under Apache 2.0
• Appcelerator provides training and support services
• Titanium Analytics – How is my app performing?
• Titanium AppCentral – Enterprise App Store

Desktop
The red-headed stepchild of Titanium

• Uses webkit (but it’s behind)

• Browser + standard technologies = consistent experience across OS

• Feature-rich
• File System Access
• Taskbar Notifications
• System Tray
• Transparent Windows
• Databases

Desktop
Creating a desktop application container is easy

Titanium.UI.createWindow({
id: "propertyWindow",
url: "app://second_page.html",
title: "My New Window",
contents: "<html>foo!</html>",
baseURL: "app://page_url",
x: 300,
y: 400,
width: 500,
height: 500,
fullscreen: false,
topMost: false,
transparentBackground: false,
});

Desktop
From now, you’re on your own

jQueryUI
Backbone

Less

JavaScript Desktop App

Mobile
• Play video and sounds
• Interact with the camera
• Geolocation
• Use the accelerometer
• Database and file system access
• Use the mobile network
•Best of all, you get native controls!

Mobile
Start with a view
(Image, Scrollable, Table, Web, DashBoard, CoverFlow)

var view = Titanium.UI.createView({
top : 0,
left : 0,
bottom : 0,
width : screenWidth,
layout : ‘vertical’
}),
field = Titanium.UI.createTextField(),
btn = Titanium.UI.createButton({title : ‘Submit Name’}),
greeting = Titanium.UI.createLabel();

view.add(field);
view.add(btn);
view.add(greeting);

btn.addEventListener(‘click’, function () {
greeting.text = ‘Greetings, ’ + field.value + ‘!’;
});

Mobile
Application Menus

// Create a menu array
var menus = [];
menus.push({title:'Basic Menu', hasChild:true });
menus.push({title:'Menu Handlers (Window Options)', hasChild:true});
menus.push({title:'Menu Handlers (Activity Property)', hasChild:true});

// Create a table view with the menu as its data
var view = Titanium.UI.createTableView({
data : menus
});

// Add the menu to the window
Titanium.UI.currentWindow.add(view);

Mobile
Integrate with Facebook

// Show login button
Titanium.Facebook.createLoginButton({style:'wide'});

// Request user feeds
Titanium.Facebook.requestWithGraphPath('me/feed', {
message: statusText.value
}, "POST", showRequestResult);

// Show Facebook data dialogs
Titanium.Facebook.dialog("feed", data, showRequestResult);

// Query Facebook data via REST API
var query = "SELECT uid, name, pic_square, status FROM user ";
query += "where uid = " + Titanium.Facebook.uid + ")";
query += "order by last_name limit 20";

Ti.API.info('user id ' + Titanium.Facebook.uid);
Titanium.Facebook.request('fql.query', {query: query}, function (r) {});

Mobile
Work with contacts

// Retrieve all people in contact list
var people = Titanium.Contacts.getAllPeople();

// Add each person as a table view row
for (var i = 0; i < people.length; i++) {
var title = people[i].fullName,
rows = [];

rows[i] = Ti.UI.createTableViewRow({
title: title,
person:people[i],
hasChild:true
});
}

return rows;

Titanium
It doesn’t do everything

Extending Titanium
• Do you know Java and/or Objective-C?
• Do you know JavaScript?
• Don’t fork, extend.

More reading: http://wiki.appcelerator.org/display/guides/Extending+Titanium

Titanium Code
Tweetanium
https://github.com/appcelerator-titans/Tweetanium

Kitchen Sink
https://github.com/appcelerator/KitchenSink

Titanium Introduction

More Related Content

Similar to Titanium Introduction

Recently uploaded

Titanium Introduction