Appcelerator's Titanium, native apps via JavaScript

Transcript

1. Juan Felipe Alvarez Saldarriaga Appcelerator's Titanium @nebiros
2. Intro "An open, extensible development environment for creating beautiful native apps across different mobile devices and OSs including iOS, Android, and BlackBerry, as well as hybrid and HTML5. It includes an open source with over 5,000 device and mobile operating system APIs, , a powerful Eclipse- based IDE, , an MVC framework and for a ready-to-use mobile backend." – SDK Studio Alloy Cloud Services appcelerator.com
3. Titanium SDK "The Titanium SDK helps you to build native cross- platform mobile application using JavaScript and the Titanium API, which abstracts the native APIs of the mobile platforms. Titanium empowers you to create immersive, full-featured applications, featuring over 80% code reuse across mobile apps. Appcelerator licenses Titanium under the Apache 2 license and is free for both personal and commercial use." – appcelerator.com
4. What problem solves? Each platform has their own native controls, also, their own UX flows, Titanium try to solve this problems.
5. Foursquare – orainteractive.com
6. Demo
7. Classic tiapp.xml is the file where all the application saves it's configuration. app.js works as the main entry point of our application. The Resources folder saves all our JavaScript code, also our assets. i18n folder has our strings to be translated. CommonJS Module Specification is implemented, so require() function works like in node.js, YAY!. UI implementation isn't so easy, some logic needs to be written in order to handle different platforms.
8. Alloy "It is a development framework to facilitate the rapid development of high quality mobile applications. It follows a model-view-controller (MVC) architecture and using XML and CSS it provides a simple model for separating the application user interface, business logic and data models." – appcelerator.com
9. Features Standard MVC framework built on Node.js with Backbone.js and Underscore.js support. Fully code your app using XML, CSS (likely) and JavaScript. Use Alloy CSS themes to manage your app’s look and feel. Easily bind data sources to your apps’ user interface. Reusable widgets support. Offline storage support. Fully integrated with Studio.
10. Models Models inherit from the class. Backbone.Model
11. Model anatomy exports.definition = { config : { // table schema and adapter information }, extendModel: function(Model) { _.extend(Model.prototype, { // Extend, override or implement Backbone.Model }); return Model; }, extendCollection: function(Collection) { _.extend(Collection.prototype, { // Extend, override or implement Backbone.Collection }); return Collection; } }
12. Model local instance var book = Alloy.createModel('book', {title:'Green Eggs and Ham', author:'Dr. Seuss'}); var title = book.get('title'); var author = book.get('author'); // Label object in the view with id = 'label' $.label.text = title + ' by ' + author;
13. Model global instance // This will create a singleton if it has not been previously created, // or retrieves the singleton if it already exists. var book = Alloy.Models.instance('book');
14. Models Models inherit from the class. To access a model locally in a controller, use the method. You can also create a global singleton instance of a model, either in markup or in the controller, which may be accessed in all controllers. Backbone.Model Alloy.createModel
15. Model local collection var library = Alloy.createCollection('book'); library.fetch(); // Grab data from persistent storage
16. Model global collection // This will create a singleton if it has not been previously created, // or retrieves the singleton if it already exists. var library = Alloy.Collections.instance('book');
17. Models Models inherit from the class. To access a model locally in a controller, use the method. You can also create a global singleton instance of a model, either in markup or in the controller, which may be accessed in all controllers. Collections are ordered sets of models and inherit from the class. You can create a collection via method or to access it globally. Backbone.Model Alloy.createModel Backbone.Collection Alloy.createCollection Alloy.Collections.instance
18. Controllers Controllers contain the application logic used to control the UI and communicate with the model.
19. Controller anatomy // controllers/index.js function doClick(e) { alert($.label.text); } $.index.open(); // views/index.xml <Alloy> <Window class="container"> <Label id="label" onClick="doClick">Hello, World</Label> </Window> </Alloy>
20. Controllers Controllers contain the application logic used to control the UI and communicate with the model. All UI elements which have an id attribute in a view are automatically defined and available as a property prefixed by the special variable $ in the controller. To access external controllers and views, use the and methods, respectively. Alloy.createController Controller.getView
21. Controllers Controllers contain the application logic used to control the UI and communicate with the model. All UI elements which have an id attribute in a view are automatically defined and available as a property prefixed by the special variable $ in the controller. To access external controllers and views, use the and methods, respectively. Controllers can inherit from other controllers by assigning it a base (parent) controller: exports.baseController = "baseControllerName" . Alloy.createController Controller.getView
22. Conditional code OS_ANDROID, true if the current compiler target is Android. OS_BLACKBERRY, true if the current compiler target is BlackBerry. OS_IOS, true if the current compiler target is iOS. OS_MOBILEWEB, true if the current compiler target is Mobile Web. ENV_DEV, true if the current compiler target is built for development (running in the simulator or emulator). ENV_TEST, true if the current compiler target is built for testing on a device. ENV_PRODUCTION, true if the current compiler target is built for production (running after a packaged installation).
23. Conditional code if (OS_IOS) { var closeButton = Ti.UI.createButton({ title: 'Close', style: Ti.UI.iPhone.SystemButtonStyle.PLAIN }); closeButton.addEventListener('click', function(){ $.window.close(); }); $.window.leftNavButton = closeButton; }
24. Passing arguments When initializing an external controller, you can pass arguments to customize it, for instance, var controller = Alloy.createController("controller", {args1: "foo"}) . In the external controller, the special variable arguments[0] is used to receive the arguments.
25. Passing arguments // views/row.xml <Alloy> <TableViewRow id="rowView"/> </Alloy> // controllers/row.js var args = arguments[0] || {}; $.rowView.title = args.title || ""; $.rowView.url = args.url || "";
26. Passing arguments var data = []; for (var i = 0; i < source.length; i++) { var arg = { title: source[i].postTitle, url: source[i].postLink }; var row = Alloy.createController("row", arg).getView(); data.push(row); } $.tableView.setData(data);
27. alloy.js It's the initializer file. Can be used to execute some code near the beginning of the application's lifecycle.
28. Views "In Alloy, the view component represents the UI of the application, comprised of XML markup and Titanium style sheets. The XML markup defines the structure of the view, while the TSS file contains the styling elements applied to the XML markup--similar to the relationship between HTML and CSS." – appcelerator.com
29. XML It abstracts the Titanium SDK UI components. You do not need to code the creation and setup of these components using JavaScript and the Titanium SDK API. Within a controller, a UI component can be referenced if its id attribute is defined.
30. XML // views/index.xml <Alloy> <Window class="container"> <Label id="label" onClick="doClick">Hello, World</Label> </Window> </Alloy>
31. TSS Titanium Style Sheets (TSS) file uses a JSON-like syntax to define the attributes of elements in the XML files. Attributes are the properties of the Titanium object. Styles are defined at three different levels: markup element, class attribute and the id attribute.
32. TSS // This is applied to any element with the class attribute assigned to "container" ".container": { backgroundColor:"white" }, // This is applied to all Labels in the view "Label": { width: Ti.UI.SIZE, height: Ti.UI.SIZE, color: "#000", // black transform: Alloy.Globals.rotateLeft // value is defined in the alloy.js file }, // This is only applied to an element with the id attribute assigned to "label" "#label": { color: "#999" /* gray */ }
33. TSS Titanium Style Sheets (TSS) file uses a JSON-like syntax to define the attributes of elements in the XML files. Attributes are the properties of the Titanium object. Styles are defined at three different levels: markup element, class attribute and the id attribute. There's a global style file, called app.tss , which applies all styles defined inside it to all views. You can specify platform or device size conditionals, [platform=ios,android], [platform=ios formFactor=tablet]. Custom query styles, also themes are allowed.
34. Demo
35. Questions
36. More information Juan Felipe Alvarez Saldarriaga hola@juan.im Documentation @nebiros docs.appcelerator.com