Upload
ricardo-alcocer
View
2.407
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
Develop your first mobile App for iOS and Android!
Ricardo Alcocer // Platform Evangelist!March 12, 2013!
Silicon Valley Titanium User Group!
!Format of this talk!
Our objective for today!
!BUILD AN APP!
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!
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!
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
h"p://blog.planetargon.com/entries/2010/3/1/designer-‐vs-‐developer
Harmony between design and functionalities!
Model
View Controller TSS
XML JS
JS
Invisible to the end-‐user User Interface Components
The MVC Pattern!
Designers and developers can now get along!
h"p://images.elephantjournal.com/wp-‐content/uploads/2012/01/dog-‐and-‐cat-‐sleeping-‐together.jpg
Download Titanium Studio!
Make sure you download Studio!
Configure platform SDKs!
SDKs allow you to compile with the naRve tools and provide you with Phone Simulators for tesRng
Success!!
Now you can follow the “Quick Start Guide”, or….!
h"p://amazingjpg.blogspot.com/2012/11/reckless-‐abandon-‐photo-‐by-‐peter-‐brannon.html
…you can try to fly!
h"p://www.justsaypictures.com/images/training-‐wheels-‐01.jpg
Titanium is very powerful, so better get your training wheels on!
Let’s build a “Jokes” App!
Let’s create a new project!
Select Titanium Project!
Select Alloy as your Titanium Project Type!
Configure your project!
In reverse URL format: ie. (com.mycompany.myapp)
Select target plaYorms for this project
Are you using Appcelerator Cloud Services?
Name for your App
Titanium Studio!
These two work together to build UI
These one implement funcRonaliRes and interacRvity
Remember?
We won’t look at these
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
Default App running on iPhone Simulator!
Default index.xml!
<Alloy> <Window class="container"> <Label id="label" onClick="doClick">Hello, World</Label> </Window> </Alloy>
Objects in index.xml!
<Alloy> <Window class="container"> <Label id="label" onClick="doClick">Hello, World</Label> </Window> </Alloy>
index.xml + index.tss working together!
<Alloy> <Window class="container"> <Label id="label" onClick="doClick">Hello, World</Label> </Window> </Alloy>
".container": { backgroundColor:"white" }, "Label": { width: Ti.UI.SIZE, height: Ti.UI.SIZE, color: "#000" }
XML
TSS
!Enough of the basics.
Let’s get started!!
Back to our “Jokes” App!
Thinking as a Web developer!
DIV DIV
DIV
DIV DIV
DIV
DIV DIV
PAGE
Thinking as a Web developer!
DIV DIV
DIV
DIV
PAGE
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/
Titanium allows you to use native platform elements!
h"p://docs.appcelerator.com/Rtanium/3.0/#!/api
The vocabulary is well documented!
h"p://docs.appcelerator.com/Rtanium/3.0/#!/api/Titanium.UI.Window
In Titanium Terms!
VIEW VIEW
VIEW
VIEW VIEW
VIEW
VIEW VIEW
Window
TableView
In Titanium Terms!
VIEW VIEW
VIEW
VIEW
WINDOW
Building the App Structure (XML)!
<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>
Expected Result
Building the App Structure (XML)!
<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>
Expected Result
Hey! That’s not what I wanted!
We need to apply styling to the elements. Let’s start with container and header
Styling the main “container” and “header”!
".container": { backgroundColor:"white", layout: 'vertical' }, "#header":{ height: "50dp", backgroundColor: "blue" }
Next: the “appicon” area
Styling the “appicon”!
"#appicon":{ width: "50dp", height: "50dp", left: "0", backgroundColor: "#fff" }
Next: let’s specify a height for the “rowContainer”
The App so far!
"#rowContainer":{ height: "60dp"
}
Next: the “rowIcon” area
The App so far!
"#rowIcon":{ lek: “5dp”, height: "50dp", width: "50dp", backgroundColor: "red "
}
Next: the rest of the elements in the “rowContainer”
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
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
The App so far!
"#header":{ height: "50dp",
backgroundColor: "#4698D6" }, "#appRtle":{ font: { fontSize: "20dp",
fontWeight: "bold" }, color: "#fff"
}
Next: more styling on the table rows
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
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
The App so far!
<View id="rowIcon" backgroundImage="/happyface.png"></View>
Images live inside the /assets folder.
We’ll make this change on the XML, so we can assign different images to each row:
Next: the icon on the “header”
The App so far!
"#appicon":{ width: "50dp", height: "50dp", lek: "0", backgroundImage: "/topicon.png" }
Finally: some real data on the table row
The App so far!
<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>
Go to your index.xml file and change the placeholder data
To add more rows, copy and paste this code block!
The finalized main screen!!
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
A little bit of code to link both files (1/4)!
<TableView id="mainlist" onClick="onTableClick"> <TableViewRow id="listrow" ezawin="turkeycrossing">
The index.xml file needs to know what to do when you click on the rows
The name of a previously created XML file
A little bit of code to link both files (2/4)!
var ezR=require('ezR'); funcRon onTableClick(e){
ezR.openWinFromRow(e.rowData); } $.index.open();
The index.js needs to define the acRon for onTableClick
Remember: every screen or controller is a combinaRon of 3 files: XML, TSS, JS
A little bit of code to link both files (3/4)!
<Bu"on id="backbu"on" plaYorm="ios" onClick="closeme">Back</Bu"on>
On each “joke” page, define the acRon for the “back” bu"on
A little bit of code to link both files (4/4)!
var ezR=require('ezR'); funcRon closeme(e){
ezR.closeWin($.turkeycrossing); }
Define the acRon for the closeme
Startup images and App Icons!
Titanium provides templates for all the images you need. Simply replace with your own.
h"p://ratking.de/2012/10/06/mini-‐ludum-‐dare-‐37-‐a-‐not-‐game-‐jam-‐part-‐2/
The same code could be repurposed!
Some Apps built with Titanium!
Much more!
• Command-line interface!• Modules, Widgets, Sync Adapters!• ACS – Appcelerator Cloud Services!• Gaming via Lanica.com!• Enterprise-ready!!
Code + Slides!
Code available at ! http://github.com/ricardoalcocer!!Slides available at! http://speakerdeck.com/ricardoalcocer! http://slideshare.net/ralcocer!
!!
Community Support!
!!
Appcelerator Q&A !https://developer.appcelerator.com/questions/newest!
!Twitter!
https://twitter.com/appcelerator!!!!
Questions?!
?