Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Learning Appcelerator® Alloy™
1. Learning Appcelerator® Alloy™
Silicon Valley Titanium User Group Meetup
December 11, 2012
Ricardo Alcocer
Platform Evangelist @ Appcelerator, Inc.
@ricardoalcocer
ralcocer@appcelerator.com
2. Presentation format
• Highly technical - We’ll be writing and
analyzing code!
• Less lecture/more step-by-step, hands-on
guide
• Slides and code will be made available for
future reference
• We will be testing on iOS, everything run on
Android with some minor adjustments to the
TSS
3. What is Alloy
• MVC Framework
• Declarative UI
• Free and Open Source
• Beta Stage and under heavy
development
• Makes writing Titanium Apps Super Easy
(it actually feels like building a website)
• Widgets and themes
4. Installing is easy
1. Install Titanium Studio
2. Install Node.js and NPM
3. Go to Terminal and type:
$sudo npm install alloy –g
More details at http://bit.ly/alloyqs
5. Start using it
1. Create a Titanium Mobile Project
2. Go to Terminal and type
$ alloy new
(future versions of Studio will allow you to create Alloy projects)
3. A new directory structure will be created
6. The MVC Pattern
Business logic, data
Model
manipulation, etc
What the user Routing, decision
sees
View
Controller
making
User
7. Why is MVC important
• Clear separation of roles
• Better code organization
• Easier to maintain and expand
14. Example 1
CONTROLLERS/INDEX.JS
function
showWin2(e)
{
var
w=Alloy.createController('win2').getView();
w.open();
}
$.index.open();
At this point, w is a Titanium Window Object
VIEWS/WIN2.XML
STYLES/WIN2.TSS
CONTROLLERS/WIN2.JS
<Alloy>
"#container":{
function
closeme(){
<Window
id="container">
backgroundColor:
"#000"
$.container.close();
<Label
id="thelabel"
},
}
onClick="closeme">I'm
Window
2</Label>
"#thelabel":{
</Window>
height:
Ti.UI.SIZE,
</Alloy>
width:
Ti.UI.SIZE,
color:
"#fff"
}