Building iOS Applications with JavaScript

Andrew Lombardi / @kinabalu

Mystic Coders, LLC

About Me

About Me

13 Years in Business

Software Consultants

International Speakers

Training

App Developer (JavaScript, Objective-C, Java)

 

To our success!

DEMO

Building Hello, World

% titanium create \
	--name=appname \
	--id=com.mysticcoders.helloworld \
	--platforms=android,ipad,iphone
Titanium Command-Line Interface, CLI version 3.0.22, Titanium SDK version 3.0.0.GA
Copyright (c) 2012, Appcelerator, Inc.  All Rights Reserved.

Please report bugs to http://jira.appcelerator.org/

[INFO] Creating Titanium Mobile application project
[INFO] Project 'helloworld' created successfully in 84ms
% cd helloworld
% alloy new

Our View XML

<Alloy>
	<Window class="container">
	<Label id="label" onClick="doClick">Hello, World</Label>
	</Window>
</Alloy>

Our View Stylesheet

".container": {
	backgroundColor:"white"
},
"Label": {
	width: Ti.UI.SIZE,
	height: Ti.UI.SIZE,
	color: "#000"
}

Our Controller

function doClick(e) {  
    alert($.label.text);
}

$.index.open();

Titanium is an open source framework for building mobile applications using Javascript.

Corporate Slide

What is it good for?

Data-driven web service clients

Web service mash-ups

Social utilities

Casual games

Mobile Architecture

Titanium Fundamentals

  • A Titanium application is a JavaScript program that is interpreted at runtime on the device
  • app.js = root execution context of the app
  • No browser involved / WebView
  • We use the WebKit KJS JavaScript engine (iOS) or Rhino (Android/BB)

Titanium Javascript API

  • Organized into logical namespaces
  • “Titanium” (or just “Ti” for short) is the root namespace for all Titanium functionality
  • A few other odds and ends in the global space
    • setTimeout/setInterval
    • alert
    • JSON

Download Appcelerator Titanium

Become an Apple iOS Developer

Cost Breakdown

Store Cost
iOS Developer$99 USD/YR
Apple Profit30% of All Sales

Titanium Studio

Benefits

Manage and run Titanium applications

Package applications for distribution

Run on a device for testing

Develop in derivative Eclipse editor Aptana

Titanium Project in xCode

Offline Fail

Titanium Studio

Find the TitaniumStudio.ini file

  • Windows
    • Navigate to the location of your Studio application (likely under C:\Users\username\AppData\Local\Titanium Studio\)
    • Open TitaniumStudio.ini
    • Edit the options as desired, save and close the file
  • OS X
    • Navigate to the /Applications/Titanium Studio folder in Finder
    • Right-click (or control-click) on TitaniumStudio.app) and choose Show package contents
    • Edit Contents/MacOS/TitaniumStudio.ini. Add the options as desired, and save the file.
  • Linux
    • Navigate to the location of your Studio application (it is wherever you unzipped the download)
    • Open TitaniumStudio.ini
    • Edit the options as desired, save and close the file

Titanium Studio

  • Find the TitaniumStudio.ini file
  • No Debug

Titanium Studio

Checking Memory


var int=self.setInterval(function(){printMem()},1000);
function printMem() {
	Ti.API.debug(Ti.Platform.availableMemory);
}

Universal Apps

if(Ti.Platform.osname === ”ipad”) {

    Ti.include(‘app_ipad.js’);
       
} else {

    Ti.include(‘app_iphone.js’);

}

Test for iOS 7



function isiOS7() {
	// iOS-specific test
	if (Titanium.Platform.name == 'iPhone OS') {
		var version = Titanium.Platform.version.split(".");
		var major = parseInt(version[0],10);

		// Can only test this support on a 3.2+ device
		if (major >= 7) {
			return true;
		}
	}
	return false;
}

Installing Command-Line Tools


Installing NodeJS

On Windows: http://nodejs.org/dist/latest/node.exe

On Mac OS X: http://nodejs.org/dist/latest/

On Linux: https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager

Installing Titanium Runtime + Alloy

% npm install -g titanium
% npm install -g alloy

Alloy Fundamentals

Built on Backbone.js v0.9.2

Underscore.js included

Model / View / Controller

Clear separation of concerns

Conditional view / styles in View XML / TSS files

Conditional View based on Device


Render for iPad


	<Window class="container" id="index" platform="ios" \
		formFactor="tablet">

Render for iPhone


	<Window id="index" platform="ios" formFactor="handheld" \
		barColor="#000">

DEMO

Write Once, Run Everywhere?

NO

Write Once, Adapt Everywhere

Comparison with PhoneGap

  Titanium PhoneGap / Cordova
PlatformiOS, Android, Windows, Blackberry, HTML5iOS, Android, WebOS, Windows, RIM, Symbian
Device HWGPS, Vibration, Accelerometer, Compass, Camera, MicrophoneGPS, Vibration, Accelerometer, Compass, Camera, Microphone
Native UIYesNo
PerformanceNot as fast as native, but "good enough"As fast as HTML / JavaScript on device

Helpful Links

Appcelerator Titanium

Titanium Repository

Titanium Training

Apple Developer Portal

Q & A

Andrew Lombardi / @kinabalu

kinabalu @ irc://irc.freenode.net

#titanium_app, #javascript

https://github.com/kinabalu/titaniumprez