Intro to appcelerator

Prepared by
Mohab Tarek
@MohabTarek

Native Development

Java Objective-C

Appcelerator Titanium Mobile
• Titanium is a JavaScript runtime that gives you native access
to the platform’s controls

• You are not building a app via html/css/js (i.e. PhoneGap)

JavaScript

How Titanium Mobile Works
• You write code in JavaScript

• At runtime, your application has 3 major components:
o JavaScript source code (minified and inlined, but not compiled, into Java/Obj-C strings)
o Titanium API implementation in the native OS
o JavaScript interpreter (V8/Rhino for Android, JavaScriptCore for iOS)

• The JavaScript interpreter runs your JavaScript code in an
environment with proxies for the native objects (windows,
controls, etc)

Titanium Mobile
Application Source Files

Our Application

UI API Phone API Optional Modules

Bridge - JavaScript -Java / JavaScript - Objective C

OS - Android / iPhone

Native Android App Native iOS App

JS files to native objective code
• JS is statically analyzed
• Ti’s Python build scripts interact with native SDK tools .
• Native project stub will created
• JS precompiled to bytecode(Android) or inlined in a generated
C file(iOS)
• Your JS and native code package together with V8/Rhino or
JavaScriptCore to interpret JS code at runtime

To start development…

• PC or Mac machine (for iOS development)
• XCode with iOS SDK
• JDK 6 x86
• Android SDK
• Titanium Studio with SDK

Titanium Studio
• Eclipse-- (was
Aptana Studio)
• Editor
• Formatting
• Code-completion
• Build
• Debug
• Release

Ti Studio (why it so powerful)…

• It always notifies you about latest SDK and Studio updates .


• It is so smart, because it catches mistakes immediately!


• Syntax highlighting


• Content assist and more…

Anatomy of a project
Project directory
build/
android/ Build folders, per platform
iphone/

Resources/ Resource files: JS code,
app.js images, sounds, Sqlite DBs,
etc.

manifest
tiapp.xml
Project files

App File Structure
• I18n - Internationalization files
• modules - Third-Party (or Appcelerator) native modules
• Resources
o app.js – Startup file
o images - Generic Images
o android - Android-specific images
• imageshigh / etc – Android density/screen-size dirs
o iphone - iOS-specific images
• @2x files
o lib, ui, whatever - your source file dirs

manifest
#appname: whymca
#publisher: olivier
#url: http://www.whymca.org
#image: appicon.png
#appid: com.whymca.test
#desc: undefined
#type: mobile
#guid: 746e9cb4-49f6-4afe-af0b-5de9f0116f65

tiapp.xml
<?xml version="1.0" encoding="UTF-8" <iphone>
standalone="no"?> <orientations device="iphone">
<ti:app xmlns:ti="http://ti.appcelerator.org"> <orientation>Ti.UI.PORTRAIT</orientation>
<deployment-targets> </orientations>
<target device="iphone">true</target> <orientations device="ipad">
<target device="ipad">false</target> <orientation>Ti.UI.PORTRAIT</orientation>
<target device="android">true</target> <orientation>Ti.UI.UPSIDE_PORTRAIT</orientation>
</deployment-targets> <orientation>Ti.UI.LANDSCAPE_LEFT</orientation>
<id>com.whymca.test</id> <orientation>Ti.UI.LANDSCAPE_RIGHT</orientation>
<name>whymca</name> </orientations>
<version>1.0</version> </iphone>
<publisher>olivier</publisher> <android
<url>http://www.whymca.org</url> xmlns:android="http://schemas.android.com/apk/r
<description>not specified</description> es/android">
<copyright>2011 by olivier</copyright> </android>
<icon>appicon.png</icon> <modules>
<persistent-wifi>false</persistent-wifi> </modules>
<prerendered-icon>false</prerendered-icon> </ti:app>
<statusbar-style>default</statusbar-style>
<statusbar-hidden>false</statusbar-hidden>
<fullscreen>false</fullscreen>
<navbar-hidden>false</navbar-hidden>
<analytics>false</analytics>
<guid>746e9cb4-49f6-4afe-af0b-
5de9f0116f65</guid>

app.js
• Starting point of App
• In app.js, we generally take care of a few things:

o Bootstrap the application with any data we need
o Check for dependencies like device type, platform version or network
connection
o Require and open our top-level UI component
o Background service for both iOS and Android

Getting Titanium Mobile
Step 1: Sign up for Appcelerator
• https://my.appcelerator.com/auth/signup
• “App EXPLORE” plan = Free: Build, test, ship, sell for free
• Additional plans available (more analytics, cloud, support):
http://www.appcelerator.com/plans-pricing

Step 2: Download Titanium Studio
• http://www.appcelerator.com/platform/titanium-studio

Step 3:
• Profit ???

Let’s Get into the interesting
part. Coding…

Create Window

We can also set properties like this
win.backgroundColor="#F00";
win.setBackgroundColor("#F00");

Create button with add event listener

Add sub view to Window or View

Layout (composite )
• composite (or absolute). Default layout. A child view is
positioned based on its positioning properties or "pins" (top,
bottom, left, right and center). If no positioning properties are
specified, the child is centered.
• The child is always sized based on its width and height
properties, if these are specified. If the child's height or width
is not specified explicitly, it may be calculated implicitly from
the positioning properties. For example, if both left and
center.x are specified, they can be used to calculate the width
of the child control.

Layout (vertical)
• Children are laid out vertically from top to bottom. The first
child is laid out top units from its parent's bounding box. Each
subsequent child is laid out below the previous child. The
space between children is equal to the upper child's bottom
value plus the lower child's top value.
• Each child is positioned horizontally as in the composite layout
mode.

Layout (vertical)
• Horizontal layouts have different behavior depending on
whether wrapping is enabled. Wrapping is enabled by default
(the horizontalWrap property is true).
• With wrapping behavior, the children are laid out horizontally
from left to right, in rows. If a child requires more horizontal
space than exists in the current row, it is wrapped to a new
row. The height of each row is equal to the maximum height
of the children in that row.

Include Vs. Require
• Ti.include(‘filename.js');
o is to be used when you want to include some other js file within another file.
o copy-pastes source code every time it's called.
o Used when wanting to define global methods or variables [defined once in top of file.js].

• Require(filename.js).method
o parses module's source code just once and it returns same object that is exported every time
it is called.
o Used when calling a method or variable from another file
o fontSize : require('src/Settings1').getFontNormal()
o var _isAndroidTablet = require('src/GlobalVariables').isAndroidTablet();

o Another File code
exports.isAndroidTablet = function() {

if(scWidth>scHeight && osname=='android')
return true;
return false; }

Animate with UI elements
Before start

After complete

Connect to Web Services

open( “GET|POST”, “*HTTP://URL…+”, “*TRUE|FLASE – async call+”+ )
This async parameter only for iOS

Connect to Web Services

• How to send data using post method?

• How to stop request

Request.open(“SHOW”,”DEM
O”)
Keep your app fresh. Use web services

Database

• Install will copy SQLite database file to device's internal
storage. If file is there, it just uses the open method

• We can use Ti.App.Properties to set db install to true. For E.g.
Ti.App.Properties. setBool(‘isDbInstalled’,true)
• Open will automatically open the DB to perform CRUD
operations

Database code snippets

• Running SQL Queries against the DB

• We can also get number of Rows affected

Database code snippets

• What about SELECT Query?

Internationalization

• Create 2 letter folder inside “i18n” (18 stands for the number
of letters between the first i and last n in internationalization)
in root folder.
• Create Locale folder in it
• In that Locale folder just keep strings.xml

http://bit.ly/TiLang

Our App in different languages

• strings.xml

http://bit.ly/TiLang

Internationalization example
<resources>
<string name="en_NoOfBills">No of bills</string>
<string name="ar_NoOfBills"> string>
</resources>

var lang = require('src/Settings1').getLang();
var lblTitle = Ti.UI.createLabel({
text:L(lang+’ NoOfBills') }

Ti JavaScript API
• UI – Titanium.Contacts
– Titanium.UI – Titanium.Media
– Titanium.UI.Android – Titanium.Android
– Titanium.UI.Clipboard – Titanium.Android.Calendar
– Titanium.UI.iOS – Titanium.Android.NotificationManager
– Titanium.UI.iPad – Titanium.App.iOS
– Titanium.UI.iPhone – Titanium.App.Android
– Titanium.Map • Data Persistence
• Sensors – Titanium.Database
– Titanium.Accelerometer – Titanium.Filesystem
– Titanium.Geolocation – Titanium.App.Properties
– Titanium.Gesture • i18n
• Networking – Titanium.Locale
– Titanium.Network • Utilities/helpers
– Titanium.XML – Titanium
– Titanium.Facebook – Titanium.App
– Titanium.Yahoo – Titanium.API
– Titanium.Analytics – Titanium.Utils
• Device integration
– Titanium.Platform

http://developer.appcelerator.com/apidoc/mobile

Extending the API: why?

• Accessing specific OS features
• Leveraging existing native libraries
• Optimizing critical portions of the app
• Extending/ameliorating portions of the Titanium Mobile
framework

Extending the API: how?
• Creating a fork of Titanium Mobile’s source
code on github
o Unflexible approach
• You put your hands in the heart of the framework
• Maintaining a separate branch can be tedious and
costly
o There are situations where this is the cheaper
approach
• E.g. when needing to extend the functionality of core
modules of the framework (networking, maps, ecc.)

Extending the API: how?
• Creating one or more native modules throught the
Titanium Module SDK
o Great flexibility
o Easy to distribute as
• Open Source
• Binary packages
• Appcelerator Ti+Plus Marketplace (?)

• Add files to modules folder to specific
Android or iOS

Moduli nativi – some examples
• Android barcode scanner (Zxing wrapper)
o https://github.com/mwaylabs/titanium-barcode
• iOS ZipFile (create/decompress zip files)
o https://github.com/TermiT/ZipFile
• iOS TiStoreKit (in app purchase)
o https://github.com/masuidrive/TiStoreKit
• iOS TiSMSDialog (in app sms sending)
o https://github.com/omorandi/TiSMSDialog
• Appcelerator Titanium modules (sample modules)
o https://github.com/appcelerator/titanium_modules

KitchenSink
• https://github.com/appcelerator/KitchenSink/

Cross-platform Strategy
• If possible, build and test your application for multiple
platforms from the start
• Understand the cost of using platform-specific native UI
elements
• Separate business logic and UI construction
• Smaller UI components are easier to maintain across
platforms than large ones
• Test on many devices and resolutions

http://www.appcelerator.com | @appcelerator 50

Some Tools of the Trade


Ti.Platform.osname

A little extra sugar for branching based on OS...


Usage...

use as a convenient way to branch logic
based on operating system, or...

...a convenient way to choose a value
based on operating system


Platform Resources

Code files, images, or any other
resource can be swapped out on a
per-platform basis


Dealing with multiple
resolutions and densities


Terms and Concepts
• Resolution: The total number of physical pixels on a screen
• Density: the spread of pixels across an inch of the actual
screen (DPI)

When defining Android user interfaces, the
top/bottom/left/right/height/width/font etc. values you
use are based on RESOLUTION. SCREEN DENSITY can be
used to determine density-appropriate visual assets to use.


Example

Smaller Physical Size
Resolution: 240x320
Low Density (120dpi)
Same Physical Size
Resolution: 320x480 Resolution: 480x800
Medium Density (160dpi) High Density (240dpi)


Many Screen Types

http://developer.android.com/guide/practices/screens_support.html


Contrast with iOS
• iPhone layout is always
based on a 320x480 point
system, regardless of screen
density/pixels
• Retina display devices (high 480 “points”
density display) require high-
res images (@2x)

320 “points”


Multiple Resolutions
• Ti.Platform.displayCaps
o platformWidth
o platformHeight

• Based on available screen real estate, you may change the size
or layout of your UI
• Use the available emulator skins and devices to test layouts
on multiple resolutions
• Use top/bottom/left/right for sizing where possible


Multiple Densities
• Even if the available screen resolution is the same, higher
density screens call for higher resolution assets
• Provide density-specific images in the ‘android/images’ resource
directory
• Provide highest resolution images, it will scale to rest of images ,
you can modify by adding other images


Structuring your Titanium
application for cross-
platform


Rich client applications (like
Ti Mobile apps) should strive
to be:

event-driven
and
component-oriented


Interaction Events
• Interaction events you
know:
o click
o swipe
o change
o focus
o blur


Custom Events
• Custom events you might not use (but should!)
• Custom events can be app wide
• Custom events can be specific to your app’s components
(business events)


Being component-oriented
helps us build cross-platform
more easily.


Component-Oriented
• Your application is composed of a library of application-
specific components you create
• The smaller the component, the easier it is to make each
components work across platforms
• Encourages the encapsulation and reuse of UI components


Macro

• Ti for Titanium
• L for Titanium.Locale.getString
• alert for Titanium.UI.createAlertDialog
• And also remember about Code snippets
o For e.g. :- button then {ctrl + space} and see the magic..

File System code snippets

File system

Map view code snippets (cont)…

Few more code snippets (cont)…
iOS

Android

Android Manifest
• Android Manifest can be overridden
• Add custom behavior or capabilities to you app
• Copy the one generated by Titanium
• Modify generated file and then put it in
The following folder

Tips & Tricks
• Android has a problem in GC so when closing a page it doesn’t
release it’s objects Ex. Used in changing languages.

if(require('src/Settings1').getLang() != lang)
{
if (win1.children)
{
for (var c = win1.children.length - 1; c >= 0; c--)
{
win1.remove(win1.children[c]);
win1.children[c] = null;
}
}
lang = require('src/Settings1').getLang();
Draw();

}

Tips & Tricks..
• There is only one map view can be added to view in app
• If a view has MapView and another one have map app will
crash immediately .
• When adding annotations remove previously added
annotation first and event listeners

mapview.removeAllAnnotations();
mapview.removeEventListener('click', annotationListener);

Packaging ..
• In order to build applications made for the Android Marketplace, you need
to create a distribution key on your local computer. This key is used to
digitally sign your app.
• Open the Terminal or Prompt type the following
o cd /<path to your android sdk>/tools
• we need to use the Java keytool located in this directory
$ keytool -genkey -v -keystore com.othaim.iktissab -alias Iktissab –keyalg RSA -validity 10000
• Press Enter and execute the command and you'll be asked a series of
questions. You need to provide a password for the keystore - it would be
wise to write it down as you will need it to package your app later.
• Now your key will be exported and saved to the directory you were
currently in.
• Now your key will be exported and saved to the directory you were
currently in. In our case, this is the tools directory under our Android SDK
folder

Packaging ..

• Open your project in Titanium Studio. Make sure your project
is selected in the Project explorer page, and then select the
Distribution button followed by the Distribute – Android
option, as seen in the following screenshot

Packaging ..
• You will need to enter in the distribution location (where you
want the packaged APK file saved to) and the location of the
keystore file you created in the previous recipe, along with the
password and alias you provided earlier. After you enter in
that information it should look something like the following
screenshot:

Pros
• One codebase for two platforms
o You’ll (theoretically) spend less time than writing two native apps
o Maintenance on one codebase should be easier in the long run

• Native interface controls
o Your apps can look just like native ones

• Might be able to reuse your JavaScript in other parts of your project
o eg., Web front-end, Node.js backend

• Platform is open-source
o https://github.com/appcelerator/titanium_mobile

• JavaScript is fun!

Cons
• Platform is young and still changing

• Need to learn a new platform / SDK / quirks
o Knowing the ins & outs of native iOS / Android will help

• You’ll still have lots of if(iOS){} and if(android){}
o LEGO Minifig Collector has 24 blocks of code that are Android or iOS specific

• Performance isn’t 100% of a native app

• SDK/API Documentation is weak (but getting better)

• Q&A support forum is a mess (use SO instead)

Future Platform Support
• Blackberry
• WinPhone7

Links

• https://github.com/appcelerator
• https://github.com/appcelerator-developer-relations
• https://github.com/BradBroulik/titanium-mvc
• https://github.com/tanin47/silver
• https://github.com/railskarthi/acs_custom_object_query
• https://github.com/railskarthi/acs_android_push
• https://github.com/guilhermechapiewski/titanium-jasmine/

Links..

Appcelerator
• http://appcelerator.com
• http://developer.appcelerator.com/questions/newest
• http://stackoverflow.com/questions/tagged/titanium
• http://vimeo.com/appcelerator
• http://vimeopro.com/appcelerator/building-native-mobile-
applications
• https://wiki.appcelerator.org/display/td/TCAD+Course+Labs

Community Projects
• Joli https://github.com/xavierlacot/joli.js/

Credits
• Appcelerator Titanium by Nic Jansma @NicJ
• Extending Titanium Mobile through Native Modules by Olivier Morandi
• Native Android Applications with Titanium by Marshall
Culpepper (@marshall_law) and Kevin Whinnery (@kevinwhinnery)
• Getting started with Titanium by Next-Generation Mobile Platform
• Appcelerator Titanium Smartphone App Development Cookbook book

Intro to appcelerator

More Related Content

What's hot (18)

Viewers also liked (8)

Similar to Intro to appcelerator (20)

More from Mohab El-Shishtawy (6)

Intro to appcelerator

Editor's Notes