Extending Titanium with native iOS and Android modules

tiConf.eu, valencia, 24/02/2013

Native iOS & Android Modules

Extending Titanium

Olivier MorandiSoftware en!ineer

http://titaniumninja.comolivier.morandi@gmail.com@olivier_morandihttps://github.com/omorandi

Module development is so

Why Bother?

• To levera!e native features★ Underlyin! OS★ 3rd party libraries

• Performance★ To optimize the User Experience

Learnin! Resources

• http://docs.appcelerator.com/titanium/latest/#!/!uide/Extendin!_Titanium_Mobile

• http://docs.appcelerator.com/titanium/latest/#!/!uide/iOS_Module_Development_Guide

• http://docs.appcelerator.com/titanium/latest/#!/!uide/Android_Module_Development_Guide

Official Appcelerator Guides

tiConf.eu, valencia, 24/02/2013 7

• Titanium Mobile SDK★ https://!ithub.com/appcelerator/

titanium_mobile

• Example modules from Appcelerator★ https://!ithub.com/appcelerator/

titanium_modules

Source code

Follow these guys

• Aaron K. Saunders: https://!ithub.com/aaronksaunders

• Ben Bahrenbur!: https://!ithub.com/benbahrenbur!

• Christian Sullivan: https://!ithub.com/euforic

• David Bankier: https://!ithub.com/dbankier

• Jordi Domenec: https://!ithub.com/iamyellow

• Marcel Pociot: https://!ithub.com/mpociot

• Matt Apperson: https://!ithub.com/mattapperson

• Paul Mietz E!li: https://!ithub.com/pe!li

• Ruben Fonseca: https://!ithub.com/rubenfonseca

• Russ Frank: https://!ithub.com/russfrank

Inside Titanium(A bit of architecture)

Titanium cli (node.js) + python scripts

Runtime (iOS)

Titanium Modules

JS APP

Parser

Interpreter

IOS SDK

Bytecode!en

objective-cC++

Runtime (iOS)

Titanium Modules

JS APP

Parser

Interpreter

IOS SDK

Bytecode!en

NO JIT

objective-cC++

Titanium Modules

JS APP

Parser

Native Code

Android SDK

Native Code!en

Runtime (Android)

JavaC++

Titanium Modules

JS APP

Parser

Native Code

Android SDK

Native Code!en

Runtime (Android)

JavaC++

Titanium Modules

JS APP

Parser

Native Code

Android SDK

Native Code!en

Runtime (Android)

JavaC++

Terminology

var win1 = Titanium.UI.createWindow({ title:'Hello World', backgroundColor:'white'});

var label1 = Titanium.UI.createLabel({ color:'black', textAlign:'center', width: 100});

label1.text = 'howdy?';win1.add(label1);

win1.open();

Terminology

win1.open();

moduleobject

Terminology

win1.open();

moduleobject

Objects of t

Titanium API are

injected in th

environment at

startup

Terminology

win1.open();

factorymethod

Terminology

win1.open();

creation properties

Terminology

win1.open();

proxyobject

Terminology

win1.open();

view proxyobject

Terminology

win1.open();

proxy property

Terminology

win1.open();proxy

method

Proxies & Modules

ViewProxy ViewModule

extends

creates

mana!es

Native View TypeiOS UIView

Android View

extends

Proxies & Modules

extends

creates

mana!es

Android View

State:properties

Actions: methods

Events:addEventListener(), fireEvent()

Interface

extends

Proxies & Modules

extends

creates

mana!es

Android View

State:properties

Actions: methods

Interface

Methods for the inte!ration within the application lifecycle•startup() (iOS)•shutdown() (iOS)•onAppCreate() (Android)

extends

Proxies & Modules

extends

creates

mana!es

Android View

State:properties

Actions: methods

Interface

Additional members for the inte!ration within the UI layout system:•add()•remove()•height•width•backgroundColor•...

Methods for the inte!ration within the application lifecycle•startup() (iOS)•shutdown() (iOS)•onAppCreate() (Android)

extends

Let’s create a module

• Create

• Develop

• Build

• Deploy

• Debu!

• Create

• Develop

• Build

• Deploy

• Debu!

Module Development

• Same as for Ti app development on iOS:★ Titanium SDK.★ Xcode

iOS Prerequisites

• Same as for Ti app development on Android:

★ Titanium SDK.

★ Android SDK (+ ANDROID_SDK environment variable)

• Additionally:

★ Android NDK (+ ANDROID_NDK environment variable)

★ Ant 1.7.1 (available in PATH)

★ !perf must be installed and in your system PATH.

★ [Eclipse]

Android Prerequisites

Create (cli)$ alias ti='~/Library/Application\ Support/Titanium/mobilesdk/osx/3.0.0.GA/ titanium.py'

OLD SCHOOL

$ ti create --type=module --id=ti.conf.sample --name=ticonfsample --platform=iphone --dir=./ios

OLD SCHOOL

$ ti create --type=module --id=ti.conf.sample --name=ticonfsample --platform=iphone --dir=./ios

$ ti create --type=module--id=ti.conf.sample --name=ticonfsample --platform=android --dir=./android

OLD SCHOOL

Create (Ti Studio)

Module Boilerplate

Build & Install (cli)

$ ./build.py$ unzip -uo ti.conf.sample-iphone-0.1.zip -d ~/Library/Application\ Support/Titanium/

Build & Install (cli)

$ ./build.py$ unzip -uo ti.conf.sample-iphone-0.1.zip -d ~/Library/Application\ Support/Titanium/

$ ant$ unzip -uo dist/ti.conf.sample-android-0.1.zip -d ~/Library/Application\ Support/Titanium/

Build (Ti Studio)

Build & Install (Ti Studio)

Deploy

var ticonfsample = require('ti.conf.sample');

Ti.API.info(ticonfsample.example());

Ti.API.info("module exampleProp is => " + ticonfsample.exampleProp);ticonfsample.exampleProp = "This is a test value";

<?xml version="1.0" encoding="UTF-8"?><ti:app xmlns:ti="http://ti.appcelerator.org"> <id>com.omorandi.ticonftest</id>

<modules> <module platform="iphone">ti.conf.sample</module> <module platform="android">ti.conf.sample</module> </modules></ti:app>

app.js

tiapp.xml

• Methods

• Passin! ar!uments

• Returnin! values

• Exceptions

• Usin! properties

• Proxies

• Events

• Callbacks

• ViewProxies

Agenda

Proxy/Module Methods

-(id)methodName:(id)args{ NSString result = @"Hello World”;

//do something

return result;}

return value

//do something

return result;}

return value

-(void)methodName:(id)args{ //do something}

no return value

//do something

return result;}

return value

no return value

@Kroll.methodpublic String methodName(){

String result = "Hello world"; //do something

return result;}

return valueno ar!s

//do something

return result;}

return value

no return value

@Kroll.methodpublic String methodName(){

String result = "Hello world"; //do something

return result;}

return valueno ar!s

@Kroll.methodpublic void methodName(String value){ //do something}

no return value

Example: xml2json module

Expected API

var xml2json = require('ti.xml2json');

var json = xml2json.convert(xmlDoc);

https://!ithub.com/omorandi/TiXml2Json

Implementation

@implementation TiXml2jsonModule

-(NSDictionary) convertXml:(NSString)xmlString{ NSDictionary *jsObj;

//do conversion stuff

return jsObj;}

-(id)convert:(id)args{ ENSURE_SINGLE_ARG(args, NSString); return [self convertXml:args];}

Implementation

return jsObj;}

NSArray of ar!uments

Implementation

return jsObj;}

NSArray of ar!uments#define ENSURE_SINGLE_ARG(x,t)\{ \ x = (t*)[x objectAtIndex:0]; \} \

TiBase.h

Utility Macros

#define ENSURE_CLASS(x,t)#define ENSURE_CLASS_OR_NIL(x,t)#define ENSURE_TYPE(x,t)#define ENSURE_TYPE_OR_NIL(x,t)#define ENSURE_ARG_COUNT(x,c)#define ENSURE_SINGLE_ARG(x,t)#define ENSURE_SINGLE_ARG_OR_NIL(x,t)#define ENSURE_DICT(x)#define ENSURE_ARRAY(x)#define ENSURE_STRING(x)#define THROW_INVALID_ARG(m)

TiBase.h

NSStringNSDictionaryNSArrayNSNumberNSDateNSNullTiProxy

Supported Directly

#import "TiUtils.h"

CGFloat f = [TiUtils floatValue:arg];NSInteger f = [TiUtils intValue:arg];

NSString *value = [TiUtils stringValue:arg];

TiColor *bgcolor = [TiUtils colorValue:arg];UIColor *backgroundColor = [bgcolor color];

Conversion Utilities

Return Values

• Sin!le Value (NSStrin!, NSNumber, …)

• Collections (NSArray)★ Converted into a JS Array object

• Dictionary (NSDictionary)★ Converted into a JS object★ key->value ===> property->value

• Proxy (TiProxy)

Return Values

• Sin!le Value (NSStrin!, NSNumber, …)

• Collections (NSArray)★ Converted into a JS Array object

• Dictionary (NSDictionary)★ Converted into a JS object★ key->value ===> property->value

• Proxy (TiProxy)

RETURN AUTORELEASED OBJECTS

xml2json Android

import org.appcelerator.kroll.KrollDict;

@Kroll.module(name="Tixml2json", id="ti.xml2json")public class Tixml2jsonModule extends KrollModule{

@Kroll.methodpublic KrollDict convert(String xml)

{ KrollDict json = null;

return json; }

xml2json Android

import org.appcelerator.kroll.KrollDict;

@Kroll.module(name="Tixml2json", id="ti.xml2json")public class Tixml2jsonModule extends KrollModule{

@Kroll.methodpublic KrollDict convert(String xml)

{ KrollDict json = null;

return json; }

public class KrollDict extends HashMap<String, Object>

KrollDict.java

StringintfloatdoublebooleanObject[]HashMap<String, Object>TiProxy

import org.appcelerator.titanium.util.TiConvert;

int val = TiConvert.toInt(obj);float val = TiConvert.toFloat(obj);double val = TiConvert.toDouble(obj);boolean val = TiConvert.toBoolean(obj);int color = TiConvert.toColor(str);...

Supported Directly Conversion Utilities

http://builds.appcelerator.com.s3.amazonaws.com/module-apidoc/2.0.0/android/or!/appcelerator/titanium/util/TiConvert.html

Return Values

• Sin!le Value (Strin!, Inte!er, …)

• Collections (Object[])★ Converted into a JS Array object

• Dictionary (HashMap<Strin!, Object>)★ Converted into a JS object★ key->value ===> property->value

• Proxy (TiProxy)

Polymorphic Methods

-(id)convert:(id)args{ ENSURE_ARG_COUNT(args, 1);

id arg = [args objectAtIndex:0]; if ([arg isKindOfClass:[NSString class]]) { return [self convertFromString:arg]; } else if ([arg isKindOfClass:[TiBlob class]]) { return [self convertFromData:arg]; } else { [self throwException:@"Expected blob or string argument"

subreason:nil location:CODELOCATION]; }}

Polymorphic Methods

public KrollDict convertFromString(String xml);public KrollDict convertFromBlob(TiBlob blob) @Kroll.methodpublic String convert(Object arg) {

if (arg instanceof String) { return "string"; } if (arg instanceof TiBlob) { return "blob"; } throw new IllegalArgumentException("Invalid argument type,

expected blob or string");}

Varargs

-(void) varArgsMethod:(id)args{ for (int i = 0; i < [args count]; i++) { id arg = [args objectAtIndex:i]; // do something with arg }}

Varargs

@Kroll.methodpublic void varArgsMethod(Object[] args) {

for (int i = 0; i < args.length; i++) { Object arg = args[i];

// do something with arg }}

Properties

module.propertyName = "HELLO";

Ti.API.info("Property: " + module.propertyName);

Properties

@interface TiMyModule: TiModule

@property (nonatomic, readwrite, retain) NSString* propertyName;

@implementation TiMyModule: TiModule

@synthesize propertyName;

TiMyModule.h

TiMyModule.m

Properties: Setter/Getter

- (void) setPropertyName:(id)args { // set property and do stuff}

- (id) propertyName { // do something and return value;}

Properties: Setter/Getter

@Kroll.module(name="My", id="ti.my")public class MyModule extends KrollModule{

private String propertyName; @Kroll.getProperty @Kroll.method public String getPropertyName() { return propertyName; } @Kroll.setProperty @Kroll.method public void setPropertyName(String value) { propertyName = value; }}

Constants

var smsModule = require('ti.ios.sms');

function sendCallback(e){ switch (e.result) {

case sms.SENT: result = 'SENT'; break; case sms.FAILED: result = 'FAILED'; break; case sms.CANCELLED: result = 'CANCELLED'; break; } Ti.API.info("Property: " + module.propertyName);}

Constants

//create the accessor methods for the SENT, CANCELLED and FAILED constantsMAKE_SYSTEM_PROP(SENT,MessageComposeResultSent);MAKE_SYSTEM_PROP(CANCELLED,MessageComposeResultCancelled);MAKE_SYSTEM_PROP(FAILED,MessageComposeResultFailed);

https://!ithub.com/omorandi/TiSMSDialo!/blob/master/Classes/ComOmorandiSMSDialo!Proxy.m

Constants

#define MAKE_SYSTEM_PROP(name,map) \-(NSNumber*)name \{\return [NSNumber numberWithInt:map];\}\

TiBase.h

Constants

#define MAKE_SYSTEM_PROP(name,map) \-(NSNumber*)name \{\return [NSNumber numberWithInt:map];\}\

TiBase.h

@Kroll.module(name="Sms", id="ti.android.sms")public class SmsModule extends KrollModule{ @Kroll.constant public static final int SENT = 0; @Kroll.constant public static final int CANCELLED = -1; @Kroll.constant public static final int FAILED = -2;}

Proxy Objects

var smsModule = require('ti.ios.sms');

//create the smsDialog objectvar smsDialog = smsModule.createSMSDialog({ recipients: ['+123456789'], messageBody: 'hello'});

smsDialog.open();

Creating a Proxy

@interface TiIosSmsSMSDialogProxy: TiProxy<MFMessageComposeViewControllerDelegate>

@implementation TiIosSmsSMSDialogProxy

- (void)open:(id)args{

// retrieve properties (either set on creation, or later)

NSArray * recipients = [self valueForUndefinedKey:@"recipients"];NSString * messageBody= [TiUtils stringValue:[self valueForUndefinedKey:@"messageBody"]];

// do stuff

TiIosSmsSMSDialo!Proxy.h

TiIosSmsSMSDialo!Proxy.m

Proxy Objects

var smsModule = require('ti.android.sms');

//create the sms objectvar sms = smsModule.createSms({ recipient: '+123456789', messageBody: 'hello'});

sms.send();

Creating a Proxy

@Kroll.proxy(creatableInModule=SmsModule.class)public class SmsProxy extends KrollProxy{ private String messageBody = null; private String recipient = null;

// Constructor public SmsProxy() { super(); }

// Handle creation options @Override public void handleCreationDict(KrollDict options) { super.handleCreationDict(options); if (options.containsKey("messageBody")) { messageBody = (String)options.get("messageBody"); } if (options.containsKey("recipient")) { recipient = (String)options.get("recipient"); } }

@Kroll.method public void send() {

// send the message}

Events

// create the Module objectvar tibarcode = require('ti.barcode');

var scanner = tibarcode.createScanner();

// success event listenerscanner.addEventListener('success', function(e) { var code = e.barcode; var type = e.type; alert('Found code: ' + code + ' type: ' + type);});

Notify a chan!e of state, or an asynchronous event

Events

@implementation TiBarcodeScannerProxy

// Scanner Delegate

- (void) imagePickerController: (UIImagePickerController*)reader didFinishPickingMediaWithCode:(NSString*)code andType:(NSString*)type

{ if ([self _hasListeners:@"success"]){ NSDictionary *results = [NSDictionary dictionaryWithObjectsAndKeys: code, @"code", type, @"type", nil];

[self fireEvent:@"success" withObject:results]; }}

Events

public class ScannerProxy extends KrollProxy{

void onScannerResult(String code, String type) {

if (hasListeners("success")) { KrollDict event = new KrollDict(); event.put("code", code); event.put("type", type); fireEvent("success", event); } }}

Callbacks

// let's not freeze on huge xml dataxml2json.convertAsync(xmlDoc, function(data) { Ti.API.info("JSON object: " + JSON.stringify(data.json));});

Notify the result of an asynchronous action

Callbacks

-(void)convertAsync:(id)args{ ENSURE_ARG_COUNT(args, 2); id xml = [args objectAtIndex:0]; KrollCallback *cb = [args objectAtIndex:1]; ENSURE_TYPE(cb, KrollCallback); //pass just the first (string|blob) arg to convertXml() dispatch_async(dispatchQueue, ^(void) { id result = [self convertXml:xml]; NSDictionary *cbArgs = [NSDictionary dictionaryWithObject:result forKey:@"json"]; [self _fireEventToListener:@"success" withObject:cbArgs listener:cb

thisObject:nil]; });}

Callbacks

@Kroll.methodpublic KrollDict convertAsync(String xml, final KrollFunction callback){

new Thread() { @Override public void run() { KrollDict json = null;

KrollDict data = new KrollDict(); event.put("json", json); callback.call(getKrollObject(), data); } }.start();}

ViewProxy

Methods

Properties (!et/set)

Events

Holds the state of a view

Mana!es the native view hierarchy

ViewProxy

Methods

Events

JS THREAD

ViewProxy

Methods

Events

JS THREAD UI THREAD

ViewProxy

Methods

Events

JS THREAD UI THREAD

Mostly async

Super-Smooth TableView

• API• createMessagesView(properties);• setMessages([]messages);• insert(message);• addEventListener(‘click’, callback);

Implementation

@implementation TiSmoothMessagesViewProxy

@synthesize msgs;

//other methods

-(void) insert:(id)args{ ENSURE_SINGLE_ARG(args, NSDictionary); [self.msgs insertMessageOnTop:[self messageFromDictionary:(NSDictionary*)args]];

[self makeViewPerformSelector:@selector(addMessage:) withObject:args createIfNeeded:YES waitUntilDone:NO];

Messa!esViewProxy

@interface TiSmoothMessagesViewProxy : TiViewProxy

@property (nonatomic, retain) MessagesCollection *msgs; //model

TiSmoothMessa!esViewProxy.h

TiSmoothMessa!esViewProxy.m

Implementation

@implementation TiSmoothMessagesViewProxy

@synthesize msgs;

//other methods

-(void) insert:(id)args{ ENSURE_SINGLE_ARG(args, NSDictionary); [self.msgs insertMessageOnTop:[self messageFromDictionary:(NSDictionary*)args]];

[self makeViewPerformSelector:@selector(addMessage:) withObject:args createIfNeeded:YES waitUntilDone:NO];

Messa!esViewProxy

@interface TiSmoothMessagesViewProxy : TiViewProxy

@property (nonatomic, retain) MessagesCollection *msgs; //model

TiSmoothMessa!esViewProxy.h

TiSmoothMessa!esViewProxy.m

create the view and call addMessa!e on the UI thread

Implementation

@implementation TiSmoothMessagesView

-(void)initializeState{ [super initializeState]; viewController = [[InboxViewController alloc] initWithStyle:UITableViewStylePlain];

UITableView *tableView = viewController.tableView; [self addSubview:tableView];}

-(void)addMessage:(InboxMessage*)message{ ENSURE_UI_THREAD(addMessage, message); [viewController addMessageOnTop:message];}

-(void)frameSizeChanged:(CGRect)frame bounds:(CGRect)bounds{ [TiUtils setView: viewController.tableView positionRect:bounds];}

Messa!esView

@interface TiSmoothMessagesView : TiUIView {

MessagesViewController *viewController;}

TiSmoothMessa!esView.h

TiSmoothMessa!esView.m

Implementation

Messa!esView

called by Titanium at view creation

Implementation

Messa!esView

called by Titanium at view creation

called by Titanium for notifyin! a chan!e in frame size

//// PLACE ANY BUILD DEFINITIONS IN THIS FILE AND THEY WILL BE // PICKED UP DURING THE APP BUILD FOR YOUR MODULE//

OTHER_LDFLAGS=$(inherited) -framework AVFoundation -framework CoreMedia -framework CoreVideo -framework QuartzCore /usr/lib/libiconv.dylib

module.xcconfi!

Module Packa!e(.zip)

build & packa!e

app bundle

//// PLACE ANY BUILD DEFINITIONS IN THIS FILE AND THEY WILL BE // PICKED UP DURING THE APP BUILD FOR YOUR MODULE//

OTHER_LDFLAGS=$(inherited) -framework AVFoundation -framework CoreMedia -framework CoreVideo -framework QuartzCore /usr/lib/libiconv.dylib

module.xcconfi!

build & packa!e

app bundle

<?xml version="1.0" encoding="UTF-8"?><ti:module xmlns:ti="http://ti.appcelerator.org" xmlns:android="http://schemas.android.com/apk/res/android"> <iphone> </iphone> <android xmlns:android="http://schemas.android.com/apk/res/android"> <manifest> <uses-permission android:name="android.permission.SEND_SMS" />

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

timodule.xml

build & packa!e AndroidManifest.xml

app.apk

Debu!!in!

Create a debug build

$ sed s/Release/Debug/ build.py > build_debug.py

168: rc = os.system("xcodebuild -sdk iphoneos -configuration Debug")171: rc = os.system("xcodebuild -sdk iphonesimulator -configuration Debug")

build_debu!.py

168: rc = os.system("xcodebuild -sdk iphoneos -configuration Release")171: rc = os.system("xcodebuild -sdk iphonesimulator -configuration Release")

build.py

Debugging

Debug Logs

@Kroll.module(name="Ticonfsample", id="ti.conf.sample")public class TiconfsampleModule extends KrollModule{

// Tag for debug log messages private static final String LCAT = "TiconfsampleModule";

// tells if debug logging has been enabled in the Titanium application private static final boolean DBG = TiConfig.LOGD;

@Kroll.method public void doSomething() { Log.d(LCAT, "doing something"); }}

Android DDMS

Thank you!

Extending Titanium with native iOS and Android modules

Technology

Transcript of Extending Titanium with native iOS and Android modules

Titanium & Titanium Alloys - Lawrence Berkeley National Laboratory

All Categories On Seelye Acquisitions, Inc.catalog.seelyeinc-orl.com/Asset/SDS for CPVC.pdf · Titanium dioxide - Titanium dioxide - Titanium dioxide Titanium dioxide - fraction osure

Welding of Titanium and Titanium Alloys

Develping iOS and Android apps using Appcelerator Titanium

30132127 Titanium and Titanium Alloys

Titanium Electrode Manufacturers - Home | TITANIUM METAL

MOBILE DEVELOPMENT OPTIONS 2014 › mds › 2015 › ...MobileDevOptions... · TOPICS • Android, iOS, HTML5/CSS3, Phonegap, Titanium, and jQuery Mobile • native, cross-platform-to-native,

Forming of Titanium and Titanium Alloys...selected mechanical properties of some titanium alloys. Titanium Alloys Alloy Ti-6Al-4V is the most widely used titanium alloy, accounting

Creating Extensions for iOS and OS X, Part 1 · Creating Extensions for iOS and OS X, Part 1 Extending Apps Session 205 Ian Baird iOS Frameworks Engineer Frameworks! ... Presentation

TITANIUM USA 2013 Summary International Titanium Association ...

Titanium Nanomaterial Removal and Release from …web.iitd.ac.in/~arunku/files/cel411_y14/Titanium nanomaterial... · Titanium Nanomaterial Removal and ... titanium dioxide (TiO 2)

Titanium and titanium alloys

Titanium and Titanium Alloys as Biomaterials - InTechcdn.intechopen.com/...Titanium_and_titanium_alloys_as_biomaterials.pdf · Chapter 5 Titanium and Titanium Alloys as Biomaterials

Features of Titanium Building Materials · PDF fileFeatures of Titanium Building Materials Features of Titanium Building Materials Titanium. Titanium, an element found in 1790, ...

Extending Titanium with Native Modules - tiConf Bangladesh - Dhaka 2015

RECYCLING TITANIUM · Titanium Scrap Processing. Recycling Titanium 8. The Role of the Titanium Scrap Processor. 1. To turn unprocessed Titanium Scrap into a finished product that

Manual Torno Titanium Titanium Yz-1126 Reducido

Mobile Apps per iOS e Android con Appcelerator Titanium

GROUP 13 ORGANOMETALLIC CHEMISTRY · Extending the organometallic chemistry of m-terphenyl ligands to the group 4 metallocenes gave the first m-terphenyl titanium(III) radical Cp

Production of Titanium Dioxide Directly from Titanium Ore ... · Production of Titanium Dioxide Directly from Titanium Ore through Selective Chlorination Using Titanium Tetrachloride