This document provides instructions for building a mobile app using Appcelerator Titanium. It begins by explaining the objectives of building an app and the assumptions about the intended audience's experience level. It then introduces Titanium and its capabilities. The document walks through creating a sample "Jokes" app, including setting up the Titanium development environment, configuring a new project, previewing it on simulators, and building out the app's structure and styling using XML and TSS files. The goal is to demonstrate the basic process and tools for designing, developing and running a simple Titanium-based mobile app.

2. Develop your first mobile App
for iOS and Android!
Ricardo Alcocer // Platform Evangelist!
March 12, 2013!
Silicon Valley Titanium User Group!

3. !
Format of this talk!

4. Our objective for today!
!
BUILD AN APP!

5. Base assumptions!
• You are not a “hardcore coder”!
• You know how to build websites with
HTML and CSS!
• You have seen at least a little bit of
Javascript!

6. About Appcelerator Titanium!
• Not a language, but a high-level
Javascript SDK!
• Allows you build Native Apps for
iOS (iPhone, iPod Touch, iPad),
Android (Phone and Tablet),
Mobile Web, Blackberry 10 (beta),
soon for Windows 8 and Tizen!
• Free/Open Source!!
• It’s Native, NOT web app !

7. The design of your App is
SUPER important!
If the users don't like how
your App LOOKS !
!
they will delete it!!
h"p://www.itexico.com/blog/bid/91499/Why-­‐your-­‐Mobile-­‐App-­‐s-­‐UX-­‐UI-­‐must-­‐be-­‐Awesome

8. h"p://blog.planetargon.com/entries/2010/3/1/designer-­‐vs-­‐developer

9. Harmony between design and functionalities!

10. The MVC Pattern!
JS
Model
XML
JS
View
TSS
Controller
User
Interface
Components
Invisible
to
the
end-­‐user

11. Designers and developers can now get along!
h"p://images.elephantjournal.com/wp-­‐content/uploads/2012/01/dog-­‐and-­‐cat-­‐sleeping-­‐together.jpg

12. Download Titanium Studio!

13. Make sure you download Studio!

14. Configure platform SDKs!
SDKs
allow
you
to
compile
with
the
naRve
tools
and
provide
you
with
Phone
Simulators
for
tesRng

15. Success!!

16. Now you can follow the “Quick Start
Guide”, or….!

17. …you can try to fly!
h"p://amazingjpg.blogspot.com/2012/11/reckless-­‐abandon-­‐photo-­‐by-­‐peter-­‐brannon.html

18. Titanium is very powerful, so better get
your training wheels on!
h"p://www.justsaypictures.com/images/training-­‐wheels-­‐01.jpg

19. Let’s build a “Jokes” App!

20. Let’s create a new project!

21. Select Titanium Project!

22. Select Alloy as your Titanium Project
Type!

23. Configure your project!
Name
for
your
App
In
reverse
URL
format:
ie.
(com.mycompany.myapp)
Select
target
plaYorms
for
this
project
Are
you
using
Appcelerator
Cloud
Services?

24. Titanium Studio!

25. These
one
implement
funcRonaliRes
and
interacRvity
We
won’t
look
at
these
These
two
work
together
to
build
UI
Remember?

26. Running an App!
You’ll
only
see
the
target
plaYorms
you
explicitly
configured
iPhone
is
only
available
on
Mac
Android
is
available
on
Win,
Mac
and
Linux

27. Default App running on iPhone Simulator!

28. Default index.xml!
<Alloy>
<Window
class="container">
<Label
id="label"
onClick="doClick">Hello,
World</Label>
</Window>
</Alloy>

29. Objects in index.xml!
<Alloy>
<Window
class="container">
<Label
id="label"
onClick="doClick">Hello,
World</Label>
</Window>
</Alloy>

30. index.xml + index.tss working together!
XML
<Alloy>
<Window
class="container">
<Label
id="label"
onClick="doClick">Hello,
World</Label>
</Window>
</Alloy>
TSS
".container":
{
backgroundColor:"white"
},
"Label":
{
width:
Ti.UI.SIZE,
height:
Ti.UI.SIZE,
color:
"#000"
}

31. !
Enough of the basics.
Let’s get started!!

32. Back to our “Jokes” App!

33. Thinking as a Web developer!
PAGE
DIV
DIV
DIV
DIV
DIV
DIV
DIV
DIV

34. Thinking as a Web developer!
PAGE
DIV
DIV
DIV
DIV

35. Native iOS and Andoroid UI Elements!
h"p://www.teehanlax.com/blog/ios-­‐6-­‐gui-­‐psd-­‐iphone-­‐5/
h"p://www.teehanlax.com/blog/android-­‐2-­‐3-­‐4-­‐gui-­‐psd-­‐high-­‐density/

36. Titanium allows you to use native
platform elements!
h"p://docs.appcelerator.com/Rtanium/3.0/#!/api

37. The vocabulary is well documented!
h"p://docs.appcelerator.com/Rtanium/3.0/#!/api/Titanium.UI.Window

38. In Titanium Terms!
Window
VIEW
VIEW
VIEW
TableView
VIEW
VIEW
VIEW
VIEW
VIEW

39. In Titanium Terms!
WINDOW
VIEW
VIEW
VIEW
VIEW

40. Building the App Structure (XML)!
Expected
Result
<Alloy>
<Window
class="container">
<View
id="header">
<View
id="appicon"></View>
<Label
id="apptitle">Funny
Stuff</Label>
</View>
<TableView
id="mainlist">
<TableViewRow
id="listrow">
<View
id="rowContainer">
<View
id="rowIcon"></View>
<Label
id="rowTitle">Some
Title</Label>
<View
id="rowTypeContainer">
<Label
id="rowTypeCaption">Type:</Label>
<Label
id="rowTypeData">Some
Type</Label>
</View>
</View>
</TableViewRow>
</TableView>
</Window>
</Alloy>

41. Building the App Structure (XML)!
Expected
Result
<Alloy>
<Window
class="container">
<View
id="header">
<View
id="appicon"></View>
<Label
id="apptitle">Funny
Stuff</Label>
</View>
<TableView
id="mainlist">
<TableViewRow
id="listrow">
<View
id="rowContainer">
<View
id="rowIcon"></View>
<Label
id="rowTitle">Some
Title</Label>
<View
id="rowTypeContainer">
<Label
id="rowTypeCaption">Type:</Label>
<Label
id="rowTypeData">Some
Type</Label>
</View>
</View>
</TableViewRow>
</TableView>
</Window>
</Alloy>

42. Hey! That’s not what I wanted!
We
need
to
apply
styling
to
the
elements.
Let’s
start
with
container
and
header

43. Styling the main “container” and
“header”!
".container":
{
backgroundColor:"white",
layout:
'vertical'
},
"#header":{
height:
"50dp",
backgroundColor:
"blue"
}
Next:
the
“appicon”
area

44. Styling the “appicon”!
"#appicon":{
width:
"50dp",
height:
"50dp",
left:
"0",
backgroundColor:
"#fff"
}
Next:
let’s
specify
a
height
for
the
“rowContainer”

45. The App so far!
"#rowContainer":{
height:
"60dp"
}
Next:
the
“rowIcon”
area

46. The App so far!
"#rowIcon":{
lek:
“5dp”,
height:
"50dp",
width:
"50dp",
backgroundColor:
"red
"
}
Next:
the
rest
of
the
elements
in
the
“rowContainer”

47. The App so far!
"#rowTitle":{
lek:
"60dp",
top:
"5dp",
width:
Ti.UI.SIZE,
},
"#rowTypeContainer":{
bo"om:
"5dp",
height:
"20dp",
width:
Ti.UI.SIZE,
layout:
"horizontal",
lek:
"60dp"
},
"#rowTypeCapRon":{
height:
Ti.UI.SIZE,
width:
Ti.UI.SIZE
},
"#rowTypeData":{
height:
Ti.UI.SIZE,
width:
Ti.UI.SIZE
}
Next:
some
colors
on
the
row
elements

48. The App so far!
"#rowTypeCapRon":{
height:
Ti.UI.SIZE,
width:
Ti.UI.SIZE,
font:
{
fontSize:
"12dp"
}
},
"#rowTypeData":{
height:
Ti.UI.SIZE,
width:
Ti.UI.SIZE,
font:
{
fontSize:
"12dp"
}
}
Next:
some
colors
on
the
“header”
area

49. The App so far!
"#header":{
height:
"50dp",
backgroundColor:
"#4698D6"
},
"#appRtle":{
font:
{
fontSize:
"20dp",
fontWeight:
"bold"
},
color:
"#fff"
}
Next:
more
styling
on
the
table
rows

50. The App so far!
"#rowContainer":{
height:
"60dp",
top:
"5dp",
right:
"5dp",
bo"om:
"5dp",
lek:
"5dp",
borderWidth:
1,
borderColor:
"#cacaca",
borderRadius:
5
}
Next:
some
more
colors
on
the
table
row

51. The App so far!
"#rowContainer":{
height:
"60dp",
top:
"5dp",
right:
"5dp",
bo"om:
"5dp",
lek:
"5dp",
backgroundColor:
"#f9f9f9",
borderWidth:
1,
borderColor:
"#cacaca",
borderRadius:
5
},
"#rowTypeCapRon":{
height:
Ti.UI.SIZE,
width:
Ti.UI.SIZE,
font:
{
fontSize:
"12dp",
fontWeight:
"bold"
},
color:
"#B73B22"
}
Next:
the
icon
on
the
row

52. The App so far!
Images
live
inside
the
/assets
folder.
We’ll
make
this
change
on
the
XML,
so
we
can
assign
different
images
to
each
row:
<View
id="rowIcon"
backgroundImage="/happyface.png"></View>
Next:
the
icon
on
the
“header”

53. The App so far!
"#appicon":{
width:
"50dp",
height:
"50dp",
lek:
"0",
backgroundImage:
"/topicon.png"
}
Finally:
some
real
data
on
the
table
row

54. The App so far!
Go
to
your
index.xml
file
and
change
the
placeholder
data
<TableViewRow
id="listrow">
<View
id="rowContainer">
<View
id="rowIcon"
backgroundImage="/happyface.png"></View>
<Label
id="rowTitle">Why
did
the
turkey
cross
the
road?</Label>
<View
id="rowTypeContainer">
<Label
id="rowTypeCapRon">Type:</Label>
<Label
id="rowTypeData">Joke</Label>
</View>
</View>
</TableViewRow>
To
add
more
rows,
copy
and
paste
this
code
block!

55. The finalized main screen!!

56. The App so far!
Use
the
same
procedure
to
create
the
template
for
the
second
page.
I’ll
leave
that
to
you
TIPS:
1. In
Studio,
right-­‐click
in
the
files
area,
select
New
>
Alloy
Controller
2. You
could
move
ALL
your
TSS
to
“app.tss”.
This
is
a
global
file
that
holds
styling
that
will
be
shared
by
all
screens

57. A little bit of code to link both files (1/4)!
The
index.xml
file
needs
to
know
what
to
do
when
you
click
on
the
rows
<TableView
id="mainlist"
onClick="onTableClick">
<TableViewRow
id="listrow"
ezawin="turkeycrossing">
The
name
of
a
previously
created
XML
file

58. A little bit of code to link both files (2/4)!
The
index.js
needs
to
define
the
acRon
for
onTableClick
var
ezR=require('ezR');
funcRon
onTableClick(e){
ezR.openWinFromRow(e.rowData);
}
$.index.open();
Remember:
every
screen
or
controller
is
a
combinaRon
of
3
files:
XML,
TSS,
JS

59. A little bit of code to link both files (3/4)!
On
each
“joke”
page,
define
the
acRon
for
the
“back”
bu"on
<Bu"on
id="backbu"on"
plaYorm="ios"
onClick="closeme">Back</Bu"on>

60. A little bit of code to link both files (4/4)!
Define
the
acRon
for
the
closeme
var
ezR=require('ezR');
funcRon
closeme(e){
ezR.closeWin($.turkeycrossing);
}

61. Startup images and App Icons!
Titanium
provides
templates
for
all
the
images
you
need.
Simply
replace
with
your
own.

62. h"p://ratking.de/2012/10/06/mini-­‐ludum-­‐dare-­‐37-­‐a-­‐not-­‐game-­‐jam-­‐part-­‐2/

63. The same code could be repurposed!

64. Some Apps built with Titanium!

65. Much more!
• Command-line interface!
• Modules, Widgets, Sync Adapters!
• ACS – Appcelerator Cloud Services!
• Gaming via Lanica.com!
• Enterprise-ready!!

66. Code + Slides!
Code available at !
http://github.com/ricardoalcocer!
!
Slides available at!
http://speakerdeck.com/ricardoalcocer!
http://slideshare.net/ralcocer!
!
!

67. Community Support!
!
!
Appcelerator Q&A !
https://developer.appcelerator.com/questions/newest!
!
Twitter!
https://twitter.com/appcelerator!
!
!
!

68. ?
Questions?
!

69. Thank you!
ralcocer@appcelerator.com!
!
Twitter: @ricardoalcocer!