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
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
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?
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
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!
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.
