titanium introduction
DESCRIPTION
IntroductionTRANSCRIPT
![Page 1: Titanium Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062304/559221321a28abdf598b46d5/html5/thumbnails/1.jpg)
Titanium
![Page 2: Titanium Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062304/559221321a28abdf598b46d5/html5/thumbnails/2.jpg)
Ghosts
Steve Brownlee&
Alan Schultz
![Page 3: Titanium Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062304/559221321a28abdf598b46d5/html5/thumbnails/3.jpg)
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
![Page 4: Titanium Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062304/559221321a28abdf598b46d5/html5/thumbnails/4.jpg)
What is Titanium?
Cross-Platform Application Development var cross-platform !== write-once-run-anywhere;
Current Platforms
Desktop
Windows
OSXLinux
Mobile
iOS
AndroidBlackberry (soon)
![Page 5: Titanium Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062304/559221321a28abdf598b46d5/html5/thumbnails/5.jpg)
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
![Page 6: Titanium Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062304/559221321a28abdf598b46d5/html5/thumbnails/6.jpg)
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
![Page 7: Titanium Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062304/559221321a28abdf598b46d5/html5/thumbnails/7.jpg)
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
![Page 8: Titanium Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062304/559221321a28abdf598b46d5/html5/thumbnails/8.jpg)
DesktopFrom now, you’re on your own
JavaScript Desktop App
Less
BackbonejQueryUI
![Page 9: Titanium Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062304/559221321a28abdf598b46d5/html5/thumbnails/9.jpg)
MobileYay!
![Page 10: Titanium Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062304/559221321a28abdf598b46d5/html5/thumbnails/10.jpg)
MobileHTML + CSS + JavaScript
Titanium API
Objective C Bridge
iPhone OS
Native iPhone App
Titanium API
Java Bridge
Android OS
Native Android App
![Page 11: Titanium Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062304/559221321a28abdf598b46d5/html5/thumbnails/11.jpg)
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!
![Page 12: Titanium Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062304/559221321a28abdf598b46d5/html5/thumbnails/12.jpg)
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)
![Page 13: Titanium Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062304/559221321a28abdf598b46d5/html5/thumbnails/13.jpg)
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
![Page 14: Titanium Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062304/559221321a28abdf598b46d5/html5/thumbnails/14.jpg)
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
![Page 15: Titanium Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062304/559221321a28abdf598b46d5/html5/thumbnails/15.jpg)
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
![Page 16: Titanium Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062304/559221321a28abdf598b46d5/html5/thumbnails/16.jpg)
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)
![Page 17: Titanium Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062304/559221321a28abdf598b46d5/html5/thumbnails/17.jpg)
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
![Page 18: Titanium Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062304/559221321a28abdf598b46d5/html5/thumbnails/18.jpg)
Titanium CodeTweetaniumhttps://github.com/appcelerator-titans/Tweetanium
Kitchen Sinkhttps://github.com/appcelerator/KitchenSink
![Page 19: Titanium Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062304/559221321a28abdf598b46d5/html5/thumbnails/19.jpg)
Dart
![Page 20: Titanium Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062304/559221321a28abdf598b46d5/html5/thumbnails/20.jpg)