an introduction to titanium

An introduction to TitaniumEnough to get you into trouble

Graham Weldon

PHP developer for 11 years

CakePHP core contributor

Open source public speaker

Love developing/teaching

@predominant

http://grahamweldon.com

http://cakedc.com

The rise of mobile

Making, distributing and selling mobiles apps can be a lucrative business

Well designed, available apps are sought after

Users prefer a service or product if it comes with a mobile counterpart

Mobile

Available

Accessible

Offline

Mobile history

PDA’s

Original Netbooks

Symbian (Nokia domination)

iMode (Success in Japan)

WAP

Java ME

Android, iOS, Windows Phone, Meego, and more

Building for mobile

Google Android

Java

Apple iOS

Objective C

Windows Phone

.NET platform (C#, primarily)

Blackberry

Java

Abstraction Layers

An abstraction layer is a way of hiding the implementation details of a particular set of functionality.

What is an abstraction layer?

Why use anabstraction layer?

Simpler maintenance

Only working with business logic and custom code

One codebase, many platforms

Quicker development

Re-use existing knowledge

Less re-training

I’m convinced!What can I use?

NimbleKit (iOS)

Adobe PhoneGap (Web container)

Adobe Flex / Flash

Appcelerator Titanium (Compiled to native)

Corona (Lua)

Rhomobile

Web

jQuery Mobile

Sencha Touch

Custom

Appcelerator Titanium

Appcelerator Titanium

Wait... Free?

The platform and studio environment cost nothing

You have all the tools you need to build applications

Its also Open Source! http://github.com/appcelerator

Whats the catch?

Appcelerator is a company for profit

Support

Premium modules / extensions

Custom development

Take advantage ofexisting skills

Web Developers

Use Javascript

Learn and extend their knowledge

Benefit their web skills

Only the Titanium specific calls are different

Key advantages

Write once

Deploy everywhere

Cut down on maintenance

Simplify deployment to new platforms

The Titanium Platform

Titanium Studio

Build apps

Debug

Profile

Code hinting

Easy device testing

Easy deployment

How does it work?

Pre-Compiler

Optimise, Analyse code

Find and resolve dependencies

Front End Compiler

Convert to native code

Package in JS engine for other stuff

Platform Compiler

Compiled with native tools

Xcode + iOS SDK, Java + Android SDK

What does that mean?

Its optimising your code

Converting what it can to native device code

Anything it can’t gets run through the JS Engine

Makes it super fast

Makes it super portable no matter the code

Javascript!

A perfect match

Titanium is

View driven

Event based

Perfect for Javascript

Layered view hierarchy

Similar to iOS

Organising and building your app

Resources

The resources folder

Holds all the important stuff

Code

Assets

Platform specific whatsits

Platforms

Sometimes platforms have differences

You need to occasionally provide a different implementation

Maybe some images for just that platform

iPhone folder

appicon.png

Icon for home screen

*-Landscape.png

Landscape splash image

*-Portrait.png

Portrait splash image

Default.png

Standard resolution

Default@2x.png

Double resolution (iPhone4+)

and of course... Android

Code ContextSeparate context to keep things tidy and manageable

‘myVar’ in app.js

Not accessible in win1.js

Use globals sparingly

app.js

win1.js

But I want global data, configs, etc..

Define configuration files

Use the Titanium Include

Ti.include(...);

Separate different information

Only include what you need

UI Structure

Tabbed Layout

Very common

iOS Examples: Twitter app, Foursquare, Commbank, Phone

One window per tab

Tab windows can open sub-windows

Naturally they get a “< back” option

Easy to use and understand

No effort required!

Doh! Platform differences

iOS has tabs at the bottom

Android has tabs at the top

iOS has a title by default for tabGroups

Android doesn’t have a title for tabGroups

More than likely your creative director wants everything to look the same on all platforms

Disregarding previous user epxerience on specific platforms.

There are workarounds!

Custom InterfacesPossible.

But requires some real work.

Manage your UIInterface stacking

Order, and backtracking

Exciting! But scary...

Titanium makes it easy

Ti.Accelerometer

addEventListener

removeEventListener

fireEvent

Simulate accelerometer events

Ti.Geolocation

Quick and easy Geo

Current Position

forwardGeocoder

Address -> Coords

reverseGeocoder

Coords -> Address

Add/remove listeners

Ti.Map

Common interface for all devices

Simple map integration

Use with information from Ti.Geolocation

Add custom pins / locations

Switch map types

Satellite / Standard / Hybrid

Ti.Analytics

Monitor events

Report on them later

Gather info about behaviour

Improve your application

Challenge users

Ti.Contacts

Access the Address Book

Works on all devices

One interface

Integrate contacts

Simplify information sharing

Read only on Android :(

Ti.Database

A simple to use database

SQL compliant

Install and update DBs

Store local data

Great for offline storage

Sync later

Ti.Filesystem

Read files

Write files

iOS restricted to sandbox

(everyone is...)

Android allows access to external media

Ti.Facebook

Simple Facebook integration

REST API (Deprecated)

Graph API

Login

Store authorization

Simple configuration

Works everywhere

Ti.Gesture

Track gestures

add event listeners

customise your app UX

Events

shake

orientation change

Ti.Network

Protocols

TCP

HTTP

Bonjour

Implement any protocol you like on TCP

Connect your app

Create a server

Ti.XML

Easy to use parser

Produce XML too

Makes consuming services easy

Includes things like

rss

atom

oData

Yahoo! YQL

My personal favourite

Grab data from anywhere on the internet

Query using XPATH

Scrape websites (responsibly)

http://developer.yahoo.com/yql/

Commercial Components

There are a heap on the marketplace

Some are reasonably priced

Great way to get things done quickly

You can sell your own components on the marketplace

http://www.appcelerator.com/products/open-mobile-marketplace/

Also checkGithub

Search repos for ‘Titanium’

Currently 706 results

Components

Full projects

http://goo.gl/R69Ck

JSS

JSS: CSS style rules

Not much information about it

But very easy to use

app.js

app.jss

Set almost any property

Always clean before running your app!

app.js

app.jss

app.js

app.jss

Building your appMultiple platform support

Optionally selecta template

< insert coding montage >

Thats it! Thanks!

Graham Weldon

http://grahamweldon.com

@predominant

Cake Development Corporation

http://cakedc.com

@cakedc