Titanium Introduction
20
Titani um
-
Upload
chortlehoort -
Category
Technology
-
view
1.303 -
download
3
description
Transcript of Titanium Introduction
Titanium
Ghosts
Steve Brownlee&
Alan Schultz
ShrieksNovember 9th
Discuss Inversion of Control and Dependency Injection with Brian Cavalier
Future TalkVal Head will talk about Designing Motion (valhead.com)
FutureJavaScript Gaming Competition
• impactJS.com
• craftyJS.com
• flashJS.com
What is Titanium?
Cross-Platform Application Development var cross-platform !== write-once-run-anywhere;
Current Platforms
Desktop
Windows
OSXLinux
Mobile
iOS
AndroidBlackberry (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
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, });
Creating a desktop application container is easy
DesktopFrom now, you’re on your own
JavaScript Desktop App
Less
BackbonejQueryUI
MobileYay!
MobileHTML + CSS + JavaScript
Titanium API
Objective C Bridge
iPhone OS
Native iPhone App
Titanium API
Java Bridge
Android OS
Native Android 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
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 + ‘!’;});
Start with a view (Image, Scrollable, Table, Web, DashBoard, CoverFlow)
Mobile
// Create a menu arrayvar 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 datavar view = Titanium.UI.createTableView({ data : menus});
// Add the menu to the windowTitanium.UI.currentWindow.add(view);
Application Menus
Mobile
// Show login buttonTitanium.Facebook.createLoginButton({style:'wide'});
// Request user feedsTitanium.Facebook.requestWithGraphPath('me/feed', { message: statusText.value }, "POST", showRequestResult);
// Show Facebook data dialogsTitanium.Facebook.dialog("feed", data, showRequestResult);
// Query Facebook data via REST APIvar 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) {});
Integrate with Facebook
Mobile
// Retrieve all people in contact listvar people = Titanium.Contacts.getAllPeople();
// Add each person as a table view rowfor (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;
Work with contacts
Mobile
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 + ‘!’;});
Start with a view (Image, Scrollable, Table, Web, DashBoard, CoverFlow)
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 CodeTweetaniumhttps://github.com/appcelerator-titans/Tweetanium
Kitchen Sinkhttps://github.com/appcelerator/KitchenSink
Dart
