Recommended
More Related Content
Similar to Titanium Introduction
Similar to Titanium Introduction (20)
Recently uploaded
Recently uploaded (20)
Titanium Introduction
- 1. Titanium
- 2. Ghosts Steve Brownlee & Alan Schultz
- 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, });
- 8. Desktop From now, you’re on your own jQueryUI Backbone Less JavaScript Desktop App
- 9. Mobile Yay!
- 10. Mobile
- 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
- 19. Dart