Titanium Native
Module
The missing handbook
THE FOLLOWING SESSION HAS BEEN APPROVED FOR
TITANIUM
DEVELOPERS
SO DON’T PANIC IF YOU DON’T KNOW OBJECTIVE-C
TL;DR @presentation
• What a module looks like
• Methods & Properties
• TiModule
• TiProxy (Non Visual)
• TiUIView & ViewP...
Who am I?
• Titan
• Using Ti 4+ year
• Language Geek
• Enterprise Innovator
@benCoding
Bencoding.com
From the documentation
Maybe think of it as this…
Your JavaScript
Titanium’s JavaScript
Ti SDK / Kroll
Titanium SDK
Modules
Your Modules
What is
Kroll?
Kroll is….
• Bridge between Native and JavaScript
• Translates types, arguments, etc
• Exposes methods, properties, etc
• ...
Components of modules
TiModule
TiProxy TiUIView
TiView
Proxy
The bad news…
Cross-platform native
modules means code
at least twice
Methods
@Kroll.method
public void demoMethodNoReturn()
public int demoMethodNumberInt(Object[] args)
public float demoMethodNumber...
Method Examples
-(NSNumber*) demoMethodNumberFloat:(id)args {}
-(NSString*) demoMethodString:(id)args {}
-(NSDictionary*) ...
Methods… things to consider
• Most native arguments are converted, ie strings
• More complex arguments are converted to NS...
Properties
Properties
private boolean DEBUG = false;
@Kroll.getProperty
public boolean getDebug()
{
return DEBUG;
}
@Kroll.setPropert...
Properties
-(id)debug
{
return NUMBOOL(NO);
}
-(void)setDebug:(id)value
{
NSLog(@”Setting debug”);
}
TiModule
TiModule the important parts
@Kroll.module(name="TiLight", id="ti.light")
public class TiLightModule extends KrollModule
{...
TiModule Example
@Kroll.module(name="Tilight", id="ti.light")
public class TilightModule extends KrollModule
{
public Tili...
TiModule the important parts
#import "TiModule.h"
@interface TiLightModule : TiModule {
}
@end
Import TiModule.h
Implement...
TiModule Example
#import <AVFoundation/AVFoundation.h>
#import "TiLightModule.h“
@implementation TiLightModule
- (void) to...
Available at….
Ti.Light
https://github.com/benbahrenburg/ti.light
TiProxy
TiProxy the important parts
@Kroll.proxy(creatableInModule = BasicgeoModule.class)
public class GeocoderProxy extends Krol...
TiProxy Life Cycle
TiProxy Life Cycle overrideable elements
• public void handleCreationDict(KrollDict options)
• public v...
TiProxy Example
@Kroll.proxy(creatableInModule = BasicgeoModule.class)
public class GeocoderProxy extends KrollProxy {
pub...
TiProxy the important parts
#import "TiProxy.h"
@interface BencodingBasicgeoGeocoderProxy:
TiProxy{
}
@end
Import TiProxy....
TiProxy Life Cycle
• -(id)init
• -(void)_destroy
• -(void)dealloc
• -(id)_initWithPageContext:(id<TiEvaluator>)context
• -...
TiProxy Example
#import "BencodingBasicgeoGeocoderProxy.h“
#import "TiUtils.h“
@implementation BencodingBasicgeoGeocoderPr...
Available at….
BasicGeo
https://github.com/benbahrenburg/
benCoding.BasicGeo
TiUiView &
TiViewProxy
TiUIView + TiViewProxy Relationship
TiUIView
Native object,
ie UIView
TiViewProxy
Model / Controller for the
paired TiUIVi...
TiViewProxy the important parts
Kroll.proxy(creatableInModule = TisqModule.class)
public class ViewProxy extends TiViewPro...
TiUIView the important parts
public class View extends TiUIView
{
…..
public View(TiViewProxy proxy)
{
super(proxy);
…..
s...
Life Cycle
TiUIView
• public void processProperties(KrollDict props)
• public void propertyChanged(String key, Object oldV...
TiViewProxy Example
@Kroll.proxy(creatableInModule = TisqModule.class)
public class ViewProxy extends TiViewProxy {
public...
TiUiView Example
public class View extends TiUIView{
…..
public Date getValue(){
CalendarPickerView square = (CalendarPick...
TiViewProxy the important parts
#import " TiViewProxy.h "
@interface TiSqViewProxy : TiViewProxy {
…..
}
@end
Import
TiVie...
TiUIView the important parts
#import "TiUIView.h"
@interface TiSqView :
TiUIView<TSQCalendarViewDelegate>{
…..
}
@end
Impo...
TiUIView Life Cycle
• -(id)init
• -(void)dealloc
• -(void)willMoveToSuperview:(UIView *)newSuperview
• -(void)initializeSt...
TiUiView Example
@implementation TiSqView
…..
-(void)setBackgroundColor_:(id)value{
TiColor *newColor = [TiUtils colorValu...
TiViewProxy Life Cycle
• -(id)init
• -(void)_destroy
• -(id)_initWithPageContext:(id<TiEvaluator>)context
• -(id)_initWith...
TiViewProxy Example
#import "TiSqViewProxy.h"
#import "TiUtils.h"
#import "TiSqView.h"
@implementation TiSqViewProxy
…
-(N...
Available at….
Ti.SQ
https://github.com/benbahrenburg/ti.sq
Appcelerator Resources
• ModDevGuide
− https://github.com/appcelerator/titanium_modules/tree/master/moddevguide
• Guide - ...
Community
• Mads Møller @nappdev
• Olivier Morandi @oliver_morandi
• Matt Apperson @AppersonLabs
• Fokke Zandbergen @Fokke...
Questions?
@benCoding
benbahrenburg
bencoding.com
Ti conf
Upcoming SlideShare
Loading in …5
×

Ti conf

1,434 views
1,338 views

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,434
On SlideShare
0
From Embeds
0
Number of Embeds
441
Actions
Shares
0
Downloads
35
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Ti conf

  1. 1. Titanium Native Module The missing handbook
  2. 2. THE FOLLOWING SESSION HAS BEEN APPROVED FOR TITANIUM DEVELOPERS SO DON’T PANIC IF YOU DON’T KNOW OBJECTIVE-C
  3. 3. TL;DR @presentation • What a module looks like • Methods & Properties • TiModule • TiProxy (Non Visual) • TiUIView & ViewProxy’s
  4. 4. Who am I? • Titan • Using Ti 4+ year • Language Geek • Enterprise Innovator @benCoding Bencoding.com
  5. 5. From the documentation
  6. 6. Maybe think of it as this… Your JavaScript Titanium’s JavaScript Ti SDK / Kroll Titanium SDK Modules Your Modules
  7. 7. What is Kroll?
  8. 8. Kroll is…. • Bridge between Native and JavaScript • Translates types, arguments, etc • Exposes methods, properties, etc • Manages references
  9. 9. Components of modules TiModule TiProxy TiUIView TiView Proxy
  10. 10. The bad news… Cross-platform native modules means code at least twice
  11. 11. Methods
  12. 12. @Kroll.method public void demoMethodNoReturn() public int demoMethodNumberInt(Object[] args) public float demoMethodNumberFloat(Object[] args) public String demoMethodString(Object[] args) public HashMap demoMethodDictionary(Object args) public Date demoMethodDate(HashMap hm) public Object[] demoMethodArray(Object[] args)
  13. 13. Method Examples -(NSNumber*) demoMethodNumberFloat:(id)args {} -(NSString*) demoMethodString:(id)args {} -(NSDictionary*) demoMethodDictionary:(id)args {} -(NSDate*) demoMethodDate:(id)args {} -(NSArray*) demoMethodArray:(id)args {} -(NSNull*) demoMethodNull:(id)args {} -(TiFile*) demoMethodFile:(id)args {} -(TiBlob*) demoMethodBlob:(id)args {} -(TiRect*) demoMethodRect:(id)args {} -(TiPoint*) demoMethodPoint:(id)args {}
  14. 14. Methods… things to consider • Most native arguments are converted, ie strings • More complex arguments are converted to NSDictionary • BOOL return results much be converted to numbers NUMBOOL(NO)
  15. 15. Properties
  16. 16. Properties private boolean DEBUG = false; @Kroll.getProperty public boolean getDebug() { return DEBUG; } @Kroll.setProperty public void setDebug(boolean value) { DEBUG = value; }
  17. 17. Properties -(id)debug { return NUMBOOL(NO); } -(void)setDebug:(id)value { NSLog(@”Setting debug”); }
  18. 18. TiModule
  19. 19. TiModule the important parts @Kroll.module(name="TiLight", id="ti.light") public class TiLightModule extends KrollModule { ….. public TiLightModule() { super(); } } Decorate module so Kroll knows what to do Extend KrollModule
  20. 20. TiModule Example @Kroll.module(name="Tilight", id="ti.light") public class TilightModule extends KrollModule { public TilightModule() { super(); } @Kroll.method public void toggle() { if (isLighOn) { p.setFlashMode(Parameters.FLASH_MODE_OFF); camera.setParameters(p); camera.stopPreview(); isLighOn = false; } else { p.setFlashMode(Parameters.FLASH_MODE_TORCH); camera.setParameters(p); camera.startPreview(); isLighOn = true; } } }
  21. 21. TiModule the important parts #import "TiModule.h" @interface TiLightModule : TiModule { } @end Import TiModule.h Implement the TiModule interface
  22. 22. TiModule Example #import <AVFoundation/AVFoundation.h> #import "TiLightModule.h“ @implementation TiLightModule - (void) toggle: (id) unused { AVCaptureDevice *device = [AVCaptureDevicedefaultDeviceWithMediaType:AVMediaTypeVideo]; [device lockForConfiguration:nil]; if (device.torchMode == AVCaptureTorchModeOff) { [device setTorchMode:AVCaptureTorchModeOn]; [device setFlashMode:AVCaptureFlashModeOn]; } else { [device setTorchMode:AVCaptureTorchModeOff]; [device setFlashMode:AVCaptureFlashModeOff]; } [device unlockForConfiguration]; } @end
  23. 23. Available at…. Ti.Light https://github.com/benbahrenburg/ti.light
  24. 24. TiProxy
  25. 25. TiProxy the important parts @Kroll.proxy(creatableInModule = BasicgeoModule.class) public class GeocoderProxy extends KrollProxy { { ….. public GeocoderProxy() { super(); } } Decorate so Kroll knows what to do Extend KrollProxy
  26. 26. TiProxy Life Cycle TiProxy Life Cycle overrideable elements • public void handleCreationDict(KrollDict options) • public void handleCreationArgs(KrollModule createdInModule, Object[] args) * Java’s native constructor and other life cycle elements also apply
  27. 27. TiProxy Example @Kroll.proxy(creatableInModule = BasicgeoModule.class) public class GeocoderProxy extends KrollProxy { public GeocoderProxy() { super(); } @Kroll.method public boolean isSupported(){ return CommonHelpers.reverseGeoSupported(); } }
  28. 28. TiProxy the important parts #import "TiProxy.h" @interface BencodingBasicgeoGeocoderProxy: TiProxy{ } @end Import TiProxy.h Implement the TiProxy interface
  29. 29. TiProxy Life Cycle • -(id)init • -(void)_destroy • -(void)dealloc • -(id)_initWithPageContext:(id<TiEvaluator>)context • -(id)_initWithPageContext:(id<TiEvaluator>) context_ args:(NSArray*)args • -(void)_configure • -(void)_initWithProperties:(NSDictionary *)properties
  30. 30. TiProxy Example #import "BencodingBasicgeoGeocoderProxy.h“ #import "TiUtils.h“ @implementation BencodingBasicgeoGeocoderProxy -(NSNumber*)isSupported:(id)unused { BOOL hasMinOSVersion=NO; if(NSClassFromString(@"UIReferenceLibraryViewController")) { hasMinOSVersion=YES; } return NUMBOOL(hasMinOSVersion); } @end
  31. 31. Available at…. BasicGeo https://github.com/benbahrenburg/ benCoding.BasicGeo
  32. 32. TiUiView & TiViewProxy
  33. 33. TiUIView + TiViewProxy Relationship TiUIView Native object, ie UIView TiViewProxy Model / Controller for the paired TiUIView
  34. 34. TiViewProxy the important parts Kroll.proxy(creatableInModule = TisqModule.class) public class ViewProxy extends TiViewProxy { { ….. public ViewProxy () { super(); } @Override public TiUIView createView(Activity activity) { ….. } } Decorate Extend TiViewProxy Create the TiIUView
  35. 35. TiUIView the important parts public class View extends TiUIView { ….. public View(TiViewProxy proxy) { super(proxy); ….. setNativeView(calendar); } } Extend TiUIView TiViewProxy passed to constructor Set as native view
  36. 36. Life Cycle TiUIView • public void processProperties(KrollDict props) • public void propertyChanged(String key, Object oldValue, Object newValue, KrollProxy proxy) TiViewProxy • public TiUIView createView(Activity activity) • public void handleCreationDict(KrollDict options)
  37. 37. TiViewProxy Example @Kroll.proxy(creatableInModule = TisqModule.class) public class ViewProxy extends TiViewProxy { public ViewProxy() { super(); } @Kroll.getProperty() public Date getValue(){ ti.sq.View demoView = (ti.sq.View)view; return demoView.getValue(); } }
  38. 38. TiUiView Example public class View extends TiUIView{ ….. public Date getValue(){ CalendarPickerView square = (CalendarPickerView)getNativeView(); return square.getSelectedDate(); } public void setValue(HashMap hm){ Date newValue = convertHMtoDate(hm); CalendarPickerView square = (CalendarPickerView)getNativeView(); square.selectDate(newValue); } ….. }
  39. 39. TiViewProxy the important parts #import " TiViewProxy.h " @interface TiSqViewProxy : TiViewProxy { ….. } @end Import TiViewProxy.h Implement the TiViewProxy interface
  40. 40. TiUIView the important parts #import "TiUIView.h" @interface TiSqView : TiUIView<TSQCalendarViewDelegate>{ ….. } @end Import TiUIView.h Implement the TiUIView interface
  41. 41. TiUIView Life Cycle • -(id)init • -(void)dealloc • -(void)willMoveToSuperview:(UIView *)newSuperview • -(void)initializeState • -(void)configurationSet • -(void)frameSizeChanged:(CGRect)frame bounds:(CGRect)bounds
  42. 42. TiUiView Example @implementation TiSqView ….. -(void)setBackgroundColor_:(id)value{ TiColor *newColor = [TiUtils colorValue:value]; UIColor *clr = [newColor _color]; UIView *sq = [self square]; sq.backgroundColor = clr; } -(void)setPagingEnabled_:(id)value{ [[self square] setPagingEnabled:[TiUtils boolValue:value]]; } ….. }
  43. 43. TiViewProxy Life Cycle • -(id)init • -(void)_destroy • -(id)_initWithPageContext:(id<TiEvaluator>)context • -(id)_initWithPageContext:(id<TiEvaluator>)context_ args:(NSArray*)args • -(void)_configure • -(void)_initWithProperties:(NSDictionary *)properties • -(void)viewWillAttach • -(void)viewDidAttach • -(void)viewDidDetach • -(void)viewWillDetach
  44. 44. TiViewProxy Example #import "TiSqViewProxy.h" #import "TiUtils.h" #import "TiSqView.h" @implementation TiSqViewProxy … -(NSArray *)keySequence{ return [NSArray arrayWithObjects: @"min",@"max",nil]; } -(void)viewDidAttach{ if ([NSThread isMainThread]) { TiSqView * ourView = (TiSqView *)[self view]; [ourView render]; } [super viewDidAttach]; } …
  45. 45. Available at…. Ti.SQ https://github.com/benbahrenburg/ti.sq
  46. 46. Appcelerator Resources • ModDevGuide − https://github.com/appcelerator/titanium_modules/tree/master/moddevguide • Guide - Extending Titanium Mobile − http://docs.appcelerator.com/titanium/latest/#!/guide/Extending_Titanium_Mobile • Titanium Mobile Source − https://github.com/appcelerator/titanium_mobile
  47. 47. Community • Mads Møller @nappdev • Olivier Morandi @oliver_morandi • Matt Apperson @AppersonLabs • Fokke Zandbergen @FokkeZB • Jordi Domenech iamyellow.net • Russ Frank @russjf • Paul Mietz Egli @pegli • Aaron Saunders @aaronksaunders
  48. 48. Questions? @benCoding benbahrenburg bencoding.com

×