Titanium
GhostsSteve Brownlee      & Alan Schultz
ShrieksNovember 9thDiscuss Inversion of Control and Dependency Injection with BrianCavalierFuture TalkVal Head will talk a...
What is Titanium?Cross-Platform Application Development   var cross-platform !== write-once-run-anywhere;Current Platforms...
What is Titanium?• Open source under Apache 2.0• Appcelerator provides training and support services• Titanium Analytics –...
Desktop                   The red-headed stepchild of Titanium• Uses webkit (but it’s behind)• Browser + standard technolo...
DesktopCreating a desktop application container is easy  Titanium.UI.createWindow({      id:         "propertyWindow",    ...
DesktopFrom now, you’re on your own                jQueryUI   Backbone              Less JavaScript Desktop App
Mobile  Yay!
Mobile
Mobile• Play video and sounds• Interact with the camera• Geolocation• Use the accelerometer• Database and file system acce...
Mobile                      Start with a view      (Image, Scrollable, Table, Web, DashBoard, CoverFlow)var view = Titaniu...
Mobile                          Application Menus// Create a menu arrayvar menus = [];menus.push({title:Basic Menu, hasChi...
Mobile                       Integrate with Facebook// Show login buttonTitanium.Facebook.createLoginButton({style:wide});...
Mobile                    Work with contacts// Retrieve all people in contact listvar people = Titanium.Contacts.getAllPeo...
Mobile                      Start with a view      (Image, Scrollable, Table, Web, DashBoard, CoverFlow)var view = Titaniu...
Titanium                                 It doesn’t do everything                       Extending Titanium                ...
Titanium CodeTweetaniumhttps://github.com/appcelerator-titans/TweetaniumKitchen Sinkhttps://github.com/appcelerator/Kitche...
Dart
Titanium Introduction
Upcoming SlideShare
Loading in...5
×

Titanium Introduction

1,407

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,407
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Titanium Introduction

  1. 1. Titanium
  2. 2. GhostsSteve Brownlee & Alan Schultz
  3. 3. ShrieksNovember 9thDiscuss Inversion of Control and Dependency Injection with BrianCavalierFuture TalkVal Head will talk about Designing Motion (valhead.com)FutureJavaScript Gaming Competition • impactJS.com • craftyJS.com • flashJS.com
  4. 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. 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. 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. 7. DesktopCreating 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, });
  8. 8. DesktopFrom now, you’re on your own jQueryUI Backbone Less JavaScript Desktop App
  9. 9. Mobile Yay!
  10. 10. Mobile
  11. 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. 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. 13. Mobile Application Menus// 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);
  14. 14. Mobile Integrate with Facebook// 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) {});
  15. 15. Mobile Work with contacts// 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;
  16. 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. 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
  18. 18. Titanium CodeTweetaniumhttps://github.com/appcelerator-titans/TweetaniumKitchen Sinkhttps://github.com/appcelerator/KitchenSink
  19. 19. Dart
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×