6. TICONFEU,AMSTERDAM,29/06/2014
Not in This Talk
• Basics of native module development
★ module creation
★ proxies, methods, properties, events,
callbacks
• Check out http://www.slideshare.net/
omorandi/ticonf
6
7. TICONFEU,AMSTERDAM,29/06/2014
Why Native Views
• UX/Performance
★ Stock Ti UI components not suitable for
the specific UX requirements
• Integration of native UI components and
libraries
★ Leverage existing solutions from the
Android and iOS OSS communities
★ Integrate third party SDKs
7
31. TICONFEU,AMSTERDAM,29/06/2014
Proxies & Modules
Proxy
ViewProxy ViewModule
extends
has a
creates
19
manages
NativeView Type
iOS UIView
AndroidView
State:
properties
Actions:
methods
Events:
addEventListener(), fireEvent()
Interface
Methods for the integration within the
application lifecycle
•startup() (iOS)
•shutdown() (iOS)
•onAppCreate() (Android)
extends
32. TICONFEU,AMSTERDAM,29/06/2014
Proxies & Modules
Proxy
ViewProxy ViewModule
extends
has a
creates
19
manages
NativeView Type
iOS UIView
AndroidView
State:
properties
Actions:
methods
Events:
addEventListener(), fireEvent()
Interface
Additional members for the integration
within the UI layout system:
•add()
•remove()
•height
•width
•backgroundColor
•...
Methods for the integration within the
application lifecycle
•startup() (iOS)
•shutdown() (iOS)
•onAppCreate() (Android)
extends
47. TICONFEU,AMSTERDAM,29/06/2014
Managing the subview frame
27
TiConfBasicView.m
#import "TiConfBasicView.h"
!
@implementation TiConfBasicView
!
!
-(void)initializeState
{
theView = [[UIView alloc] initWithFrame:self.bounds];
theView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
theView.backgroundColor = [UIColor redColor];
[self addSubview:theView];
}
!
@end
The Ti View frame is managed by the Ti
layout system.
Bounds are not valid until the view takes
part to an on-screen Ti view hierarchy
48. TICONFEU,AMSTERDAM,29/06/2014
Managing the subview frame
27
TiConfBasicView.m
#import "TiConfBasicView.h"
!
@implementation TiConfBasicView
!
!
-(void)initializeState
{
theView = [[UIView alloc] initWithFrame:self.bounds];
theView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
theView.backgroundColor = [UIColor redColor];
[self addSubview:theView];
}
!
@end
The Ti View frame is managed by the Ti
layout system.
Bounds are not valid until the view takes
part to an on-screen Ti view hierarchy
56. TICONFEU,AMSTERDAM,29/06/2014
Property from the Proxy
34
!
UIColor *color = [[TiUtils colorValue:[self.proxy valueForKey:@"color"]] color];
TiConfBasicView.m
Retrieving the property value from the ViewProxy when needed
57. TICONFEU,AMSTERDAM,29/06/2014
Explicit Setter in the ViewProxy
35
-(void)setColor:(UIColor*)color
{
theView.backgroundColor = color;
}
TiConfBasicView.m
-(void)setColor:(id)args
{
//expect 1 argument
ENSURE_ARG_COUNT(args, 1);
UIColor *color = [[TiUtils colorValue:args] color];
//dispatch to the view on UI thread
//(create it if needed, don't wait for completion)
[self makeViewPerformSelector:@selector(setColor:)
withObject:color createIfNeeded:YES waitUntilDone:NO];
}
TiConfBasicViewProxy.m
58. TICONFEU,AMSTERDAM,29/06/2014
Explicit Setter in the ViewProxy
35
-(void)setColor:(UIColor*)color
{
theView.backgroundColor = color;
}
TiConfBasicView.m
-(void)setColor:(id)args
{
//expect 1 argument
ENSURE_ARG_COUNT(args, 1);
UIColor *color = [[TiUtils colorValue:args] color];
//dispatch to the view on UI thread
//(create it if needed, don't wait for completion)
[self makeViewPerformSelector:@selector(setColor:)
withObject:color createIfNeeded:YES waitUntilDone:NO];
}
TiConfBasicViewProxy.m
JS
THREAD
59. TICONFEU,AMSTERDAM,29/06/2014
Explicit Setter in the ViewProxy
35
-(void)setColor:(UIColor*)color
{
theView.backgroundColor = color;
}
TiConfBasicView.m
-(void)setColor:(id)args
{
//expect 1 argument
ENSURE_ARG_COUNT(args, 1);
UIColor *color = [[TiUtils colorValue:args] color];
//dispatch to the view on UI thread
//(create it if needed, don't wait for completion)
[self makeViewPerformSelector:@selector(setColor:)
withObject:color createIfNeeded:YES waitUntilDone:NO];
}
TiConfBasicViewProxy.m
JS
THREAD
UI
THREAD
61. TICONFEU,AMSTERDAM,29/06/2014
Implicit Setter in the View Class
36
-(void)setColor_:(id)arg
{
theView.backgroundColor = [[TiUtils colorValue:arg] color];
}
TiConfBasicView.m
Automatically dispatched by the
ViewProxy on the UI thread
93. TICONFEU,AMSTERDAM,29/06/2014
ARC vs. NON-ARC
• ARC = Automatic Reference Counting
★ Retain/Release handled automatically by
the Clang compiler
• Ti module template project is still NON-
ARC
• You can use ARC code inside of a Ti
module project
56