Appcelerator Alloy Deep Dive - tiTokyo 2013
-
Upload
ralcocer -
Category
Technology
-
view
7.840 -
download
3
description
Transcript of Appcelerator Alloy Deep Dive - tiTokyo 2013
![Page 1: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/1.jpg)
Ricardo AlcocerPlatform Evangelist @ Appcelerator, Inc.
@ricardoalcocer [email protected]
Appcelerator® Deep Dive
tiTokyoFebruary 16, 2013
![Page 2: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/2.jpg)
About me
• Currently work as Appcelerator Platform Evangelist in the Silicon Valley Area
• Have been developing Apps with Titanium since 2009
• Former Titanium trainer in the Caribbean and Latin America
• Hacker in constant training
![Page 3: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/3.jpg)
Download Titanium Studio
• Download Titanium Studio from appcelerator.com
• Make sure you install and configure the necessary SDKs from Apple and Android
![Page 4: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/4.jpg)
Two flavors of Titanium?
![Page 5: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/5.jpg)
Very simple App in Titanium Classic
![Page 6: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/6.jpg)
Files organized by directories
![Page 7: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/7.jpg)
App.JS
![Page 8: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/8.jpg)
Different versions of ApplicationWindow.js
![Page 9: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/9.jpg)
FirstView.js
![Page 10: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/10.jpg)
Enter the MVC Pattern
Model
ControllerView
User
Routing, decision making
Business logic, data manipulation, etc
What the user sees
.JS Files.XML + .TSS Files
![Page 11: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/11.jpg)
What is Appcelerator® Alloy™?
• Official MVC Framework for Titanium• Free and Open Source• Declarative UI• Widgets• Themes
![Page 12: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/12.jpg)
Why build an MVC Framework?
• Help developers build scalable apps• Provide a basis for best practices on
Titanium development• Simplify development of Titanium apps• Make Titanium more approachable to web
developers and designers (use of XML, CSS)• Reduce the amount of code written• Set the foundation for widget/ component/
sample libraries
![Page 13: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/13.jpg)
Same App built on Alloy
![Page 14: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/14.jpg)
Dramatic reduction of required files
![Page 15: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/15.jpg)
Write less code!
![Page 16: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/16.jpg)
Alloy provides advanced ways of interacting with XML from Javascript
![Page 17: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/17.jpg)
Basic Folder Structure
App Logic
User Interface Definition
App styling (colors, positioning, etc)
![Page 18: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/18.jpg)
User Interface Definition
![Page 19: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/19.jpg)
User Interface Definition
Menu Definition
![Page 20: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/20.jpg)
User Interface Definition
Main View Definition
![Page 21: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/21.jpg)
User Interface Definition
Main View Definition
![Page 22: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/22.jpg)
Open and Close the menu using Javascript : index.js
![Page 23: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/23.jpg)
Live Demo
![Page 24: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/24.jpg)
Change the look-and-feel and layout of your App using Themes
Let’s add Themes to our App
![Page 25: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/25.jpg)
Themes
![Page 26: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/26.jpg)
Live Demo
![Page 27: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/27.jpg)
Reuse code by creating Widgets
Let’s build a Widget for the Menu functionality
![Page 28: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/28.jpg)
Widgets are like “mini-apps”
• Similar folder structure
• Instead of an “index” file, you have a “widget” file
![Page 29: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/29.jpg)
Widget.json
• Contains meta-data about the Widget
![Page 30: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/30.jpg)
To use the Widget
• Define it as a dependency on your “config.json” file
• Use the “Require” tag to include it in your XML file
![Page 31: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/31.jpg)
Live Demo
![Page 32: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/32.jpg)
Adding data to your app
![Page 33: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/33.jpg)
With Alloy you can use backbone.js to create data-bound controls
• Model creation is built into Titanium Studio
![Page 34: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/34.jpg)
The “model file”
• The generated “model file” defines a data structure and a data store
![Page 35: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/35.jpg)
Bind your model to a UI control
• The “Collection” Tag allows you to define a data collection based on your model, and bind it to your TableView
![Page 36: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/36.jpg)
Data can be added dynamically
• Reference data elements from within your XML
![Page 37: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/37.jpg)
Live Demo
![Page 38: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/38.jpg)
There’s much more!
• Sync Adapters• Migrations• Underscore.js functionalities• Command-Line Interface (CLI)• Appcelerator Cloud Services (ACS)
![Page 39: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/39.jpg)
Alloy 1.0 is out! Here’s what new:
• Only works with Ti SDK 3.0 and later• Android fastdev• New SQL Adapter inline with our
updated adapter model• Content Assist in Studio: it will be
officially released in 3.1.0 but it is already available in the nightly stream
![Page 40: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/40.jpg)
What’s next with Alloy?
• Debugging of Alloy apps in Studio (coming in 3.1.0)
• Dynamic Styling of Apps• Adapter framework• Widget models and themes• Finalizing model-view binding
![Page 41: Appcelerator Alloy Deep Dive - tiTokyo 2013](https://reader033.fdocuments.us/reader033/viewer/2022052600/5581c538d8b42ae06c8b471c/html5/thumbnails/41.jpg)
Code
• All code samples in this presentation can be found at:
http://github.com/ricardoalcocer