3. 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
4. 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)
5. 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
6. 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
7. 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,
});
11. 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!
12. 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 + ‘!’;
});
13. 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);
14. 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) {});
15. 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;
16. 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 + ‘!’;
});
17. 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
