Appcelerator® Deep Dive                tiTokyo                February 16, 2013                   Ricardo Alcocer        P...
About me• Currently work as Appcelerator Platform  Evangelist in the Silicon Valley Area• Have been developing Apps with T...
Download Titanium Studio• Download Titanium Studio from appcelerator.com• Make sure you install and configure the  necessa...
Two flavors of Titanium?
Very simple App in Titanium          Classic
Files organized by directories
App.JS
Different versions ofApplicationWindow.js
FirstView.js
Enter the MVC Pattern                                    Business logic, data                            Model   manipulat...
What is Appcelerator® Alloy™?•   Official MVC Framework for Titanium•   Free and Open Source•   Declarative UI•   Widgets•...
Why build an MVC Framework?• Help developers build scalable apps• Provide a basis for best practices on Titanium  developm...
Same App built on Alloy
Dramatic reduction of required            files
Write less code!
Alloy provides advanced ways of    interacting with XML from            Javascript
Basic Folder Structure             App Logic             App styling (colors, positioning, etc)             User Interface...
User Interface Definition
User Interface Definition                    Menu Definition
User Interface Definition                  Main View Definition
User Interface Definition                  Main View Definition
Open and Close the menu using     Javascript : index.js
Live Demo
Change the look-and-feel andlayout of your App using Themes        Let’s add Themes to our App
Themes
Live Demo
Reuse code by creating       Widgets Let’s build a Widget for the Menu functionality
Widgets are like “mini-apps”• Similar folder structure• Instead of an “index”  file, you have a “widget”  file
Widget.json• Contains meta-data about the Widget
To use the Widget• Define it as a  dependency on your  “config.json” file• Use the “Require” tag  to include it in your  X...
Live Demo
Adding data to your app
With Alloy you can use backbone.js   to create data-bound controls• Model creation is built into Titanium Studio
The “model file”• The generated  “model file” defines  a data structure and  a data store
Bind your model to a UI control• The “Collection” Tag allows you to define a  data collection based on your model, and  bi...
Data can be added dynamically• Reference data elements from within your  XML
Live Demo
There’s much more!•   Sync Adapters•   Migrations•   Underscore.js functionalities•   Command-Line Interface (CLI)•   Appc...
Alloy 1.0 is out! Here’s what                new:• Only works with Ti SDK 3.0 and later• Android fastdev• New SQL Adapter ...
What’s next with Alloy?• Debugging of Alloy apps in Studio (coming  in 3.1.0)• Dynamic Styling of Apps• Adapter framework•...
Code• All code samples in this presentation can  be found at:     http://github.com/ricardoalcocer
Thank you        Ricardo Alcocer     ralcocer@appcelerator.comFollow me on Twitter @ricardoalcocer
Upcoming SlideShare
Loading in …5
×

Appcelerator Alloy Deep Dive - tiTokyo 2013

8,538 views

Published on

Slides for my presentation at tiTokyo 2013

Published in: Technology
5 Comments
10 Likes
Statistics
Notes
  • @ricardoalcocer Ahhh, that's great. thank you. i'll create my own little thing now and await the next release with baited breath... best wishes :) Sean
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @seanicode Dynamic styling is coming on the next Alloy release, so stay tunned!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi Ricardo !
    Thank you so much for your answer :) This is great for me... It works as you say... I have set a theme now at compile time based on which version OS of the app I'm compiling...

    My next task is that I'm hoping to be able to change branding & theme at runtime but I think the themes are brought in at compile time. Certainly the theme details are in the Resources directory for a single theme.

    I am hoping to allow users to change theme on the app...
    If I find a way to do this, I will post it here or if you know, then please pass it on... I'm sure I can do it using some programming method, but I thought it would be great to be able to do it using the theming engine...

    Best wishes, Sean
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi Sean,

    The 'themes' folder has a folder for each theme, say 'theme1'. Inside 'theme1' you'll have an 'assets' and 'styles' folder. Then inside styles you drop the TSS files for your theme and inside 'assets' you drop any theme-specific images. By changing the theme on your config.json you're telling Alloy to go and look those files inside the theme folder. Another good example here: https://github.com/appcelerator/alloy/tree/master/test/apps/advanced/themes

    Good luck!

    R
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • He Ralcocer - this is wonderful !

    I would love more information on the themes part of this tutorial. Assigning a theme is one thing, but I didn't see where to put the various theme tss files etc. I would love to know more about making my app very brandable using themes. Thank you for showing me the possibilities. Sean
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
8,538
On SlideShare
0
From Embeds
0
Number of Embeds
3,666
Actions
Shares
0
Downloads
83
Comments
5
Likes
10
Embeds 0
No embeds

No notes for slide

Appcelerator Alloy Deep Dive - tiTokyo 2013

  1. 1. Appcelerator® Deep Dive tiTokyo February 16, 2013 Ricardo Alcocer Platform Evangelist @ Appcelerator, Inc. @ricardoalcocer ralcocer@appcelerator.com
  2. 2. 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
  3. 3. Download Titanium Studio• Download Titanium Studio from appcelerator.com• Make sure you install and configure the necessary SDKs from Apple and Android
  4. 4. Two flavors of Titanium?
  5. 5. Very simple App in Titanium Classic
  6. 6. Files organized by directories
  7. 7. App.JS
  8. 8. Different versions ofApplicationWindow.js
  9. 9. FirstView.js
  10. 10. Enter the MVC Pattern Business logic, data Model manipulation, etcWhat the user Routing, decisionsees View Controller making .XML + .TSS Files .JS Files User
  11. 11. What is Appcelerator® Alloy™?• Official MVC Framework for Titanium• Free and Open Source• Declarative UI• Widgets• Themes
  12. 12. 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
  13. 13. Same App built on Alloy
  14. 14. Dramatic reduction of required files
  15. 15. Write less code!
  16. 16. Alloy provides advanced ways of interacting with XML from Javascript
  17. 17. Basic Folder Structure App Logic App styling (colors, positioning, etc) User Interface Definition
  18. 18. User Interface Definition
  19. 19. User Interface Definition Menu Definition
  20. 20. User Interface Definition Main View Definition
  21. 21. User Interface Definition Main View Definition
  22. 22. Open and Close the menu using Javascript : index.js
  23. 23. Live Demo
  24. 24. Change the look-and-feel andlayout of your App using Themes Let’s add Themes to our App
  25. 25. Themes
  26. 26. Live Demo
  27. 27. Reuse code by creating Widgets Let’s build a Widget for the Menu functionality
  28. 28. Widgets are like “mini-apps”• Similar folder structure• Instead of an “index” file, you have a “widget” file
  29. 29. Widget.json• Contains meta-data about the Widget
  30. 30. 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
  31. 31. Live Demo
  32. 32. Adding data to your app
  33. 33. With Alloy you can use backbone.js to create data-bound controls• Model creation is built into Titanium Studio
  34. 34. The “model file”• The generated “model file” defines a data structure and a data store
  35. 35. 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
  36. 36. Data can be added dynamically• Reference data elements from within your XML
  37. 37. Live Demo
  38. 38. There’s much more!• Sync Adapters• Migrations• Underscore.js functionalities• Command-Line Interface (CLI)• Appcelerator Cloud Services (ACS)
  39. 39. 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
  40. 40. 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
  41. 41. Code• All code samples in this presentation can be found at: http://github.com/ricardoalcocer
  42. 42. Thank you Ricardo Alcocer ralcocer@appcelerator.comFollow me on Twitter @ricardoalcocer

×