Slides from my session JAM364 at BlackBerry JAM Europe. February 5th 2013, Amsterdam. Session's video recording available at YouTube: http://www.youtube.com/watch?v=CFIXdXZpFaU

1. BlackBerry 10 apps
with Adobe AIR & Apache Flex
JAM364
Mariano Carrizo
@kiwox – mariano@entiractive.com
5 – 6 February, 2013

2. About me
BlackBerry Developer Elite
BlackBerry Developer Group Argentina
 http://www.blackberrydev.com.ar
iOS Developer Group Argentina
 http://iosdev.com.ar
Adobe Community Professional
Adobe Flex 4 & AIR Certified Expert
Trainer
For BlackBerry PlayBook
2

3. About me
3

4. Agenda
Past and present of Adobe AIR
Adobe AIR + BlackBerry 10
Built for BlackBerry 10, deep integration APIs
Extending with frameworks
Tips & tricks
Live examples
Q&A
4

5. Adobe AIR
Free and open source SDK
Cross platfom for desktop, mobile and TV
3.5 million developers
~70% online games built with Flash Platform
Lot of frameworks and tools
5
Stats source: http://www.adobe.com/products/player_census/flashplayer/

6. Adobe AIR features
Local filesystem access
Device sensors API
SQLite
Adobe Native Extensions (ANE)
6

7. Adobe AIR: Filesystem
var appBundle:File = File.applicationDirectory
.resolvePath(“myFile.txt”);
var shared:File = File.applicationStorageDirectory
.resolvePath(“writeableFile.txt”);
Note: This feature requires permission in bar-descriptor.xml
<permission>access_shared</permission> 7

8. Adobe AIR: GPS
import flash.sensors.Geolocation;
import flash.sensors.GeolocationEvent;
...
protected function localizeMe():void {
if (Geolocation.isSupported) {
geo = new Geolocation();
geo.setRequestedUpdateInterval(1);
geo.addEventListener(GeolocationEvent.UPDATE,
geolocationUpdateHandler);
}
}
Note: This feature requires permission in bar-descriptor.xml
<permission>read_geolocation</permission> 8

9. Adobe AIR: CameraUI
if(CameraUI.isSupported) {
var cam:CameraUI = new CameraUI();
cam.addEventListener(MediaEvent.COMPLETE, onMediaComplete);
cam.addEventListener(ErrorEvent.ERROR, cameraError);
cam.launch(MediaType.IMAGE);
}
Note: This feature requires permission in bar-descriptor.xml
<permission>use_camera</permission> 9

10. Adobe AIR: CameraUI
if(CameraUI.isSupported) {
var cam:CameraUI = new CameraUI();
cam.addEventListener(MediaEvent.COMPLETE, onMediaComplete);
cam.addEventListener(ErrorEvent.ERROR, cameraError);
cam.launch(MediaType.IMAGE);
} else {
var ldr:Loader = new Loader();
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE,
imageLoadComplete);
ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,
ioErrorHandler);
ldr.load(new URLRequest("static.png"));
}
Note: This feature requires permission in bar-descriptor.xml
<permission>use_camera</permission> 10

11. Adobe AIR: CameraUI
protected function onMediaComplete(event:MediaEvent):void {
if(event.data!=null) {
var ldr:Loader = new Loader();
ldr.loadFilePromise(event.data);
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE,
imageLoadComplete);
ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,
ioErrorHandler);
}
}
11

12. Adobe AIR: CameraUI
protected function imageLoadComplete(event:Event):void {
var ldr:Loader = event.target.loader as Loader;
if(ldr!=null) {
addChild(ldr);
}
}
12

13. Adobe AIR: CameraRoll
protected function choosePicture():void {
if(CameraRoll.supportsBrowseForImage) {
var roll:CameraRoll = new CameraRoll();
roll.addEventListener(MediaEvent.SELECT,
onMediaComplete);
roll.browseForImage();
}
}
13

14. Built for BlackBerry 10
Platform SDK
14

15. Adobe AIR on BB10
AIR Runtime 3.1 (more to come?)
No cross-compiling required
BlackBerry 10 SDK
 Fuse UI components
 Deep integration using ANEs
 Payment
 Push Notifications
 Invoke
15

16. Adobe AIR on BB10
var request:InvokeRequest = new InvokeRequest();
request.target = "com.example.image.view";
request.action = InvokeAction.OPEN;
request.mimeType = "image/png";
request.uri = "file:///path/to/image.png";
InvokeManager.invokeManager.invoke( request );
16

17. Adobe AIR on BB10
var segment:SegmentedControl = new SegmentedControl();
segment.x = 10;
segment.y = 200;
var buttonArray:Array=[];
buttonArray.push({label:"Mon"});
buttonArray.push({label:"Tues"});
buttonArray.push({label:"Wed"});
buttonArray.push({label:"Thurs"});
buttonArray.push({label: "Fri”});
segment.dataProvider = new DataProvider(buttonArray);
segment.addEventListener(Event.CHANGE, segmentChanged);
addChild(mySegment); 17

18. Adobe AIR on BB10
18

19. Adobe AIR + BlackBerry 10
Live Demo #1
19

20. Adobe AIR + Frameworks
Making life easier
20

21. Frameworks and libraries
User Interfaces Charting
 Apache Flex  IBM Ilog Elixir
 PureMVC
Games and Physics
Augmented Reality
 Box2D  FLAR Toolkit
 Nape  AR Toolkit (best performance with ANEs)
3D engines Maps
 Away3D  MapQuest
 Flare3D  Yahoo! maps

22. Apache Flex
22

23. Apache Flex
NavigationBar
TabBar
23

24. Adobe AIR + BlackBerry 10 + Flex
Live Demo #2
24

25. Tips & Tricks
Reaching a good application

26. Performance metrics
Response time
 Screen load/appear
 Framerate (FPS)
Memory
Bundle size

27. Performance metrics
Effects, Scrolling, Transitions Startup, Navigation, Data processing
10% 16%
24%
23%
67%
60%
Rendering ActionScript Other
27

28. Flex Performance
BitmapImage
 GraphicElement
 Remote loading, scaling and Caching
 Supports multiple DPI based sources
Spark Image
 Skinnable component
 Uses BitmapImage
 Progress, broken icon, chrome
28

29. Flex Performance
Create and Render 1000 Instances
BitmapImage
MX Image Creation
Validation
Render
Spark Image
0 500 1000 1500 2000 2500 3000 3500
Time (ms) 29

30. Flex Performance
Caching and Queuing
 ContentCache class
Cache on by default
Queue off by default
 contentLoader property on Spark Image, BitmapImage
 IContentLoader interface
Use PNGs
Avoid runtime scaling
30

31. Performance: Images
Bitmap
UIComponent
GraphicElements
FXG
31

32. Performance: Images
Create and Render 1000 graphics
Compiled FXG
GraphicElements Creation
Validation
UIComponents Render
0 200 400 600 800
Time (ms)
32

33. Flex Performance: Text
RichEditableText RichText Label StyleableTextField
Poor performance Better performance
33

34. Flex Performance: ItemRenderers
<s:ItemRenderer>
<fx:Script>
<![CDATA[
import spark.core.ContentCache;
static public const s_imageCache:ContentCache = new ContentCache();
]]>
</fx:Script>
<s:Hgroup>
<s:BitmapImage id="icon" source="{data.graphic}"
contentLoader="{s_imageCache}"/>
<s:VGroup>
<s:Label id="label"/>
</s:Vgroup>
</s:Hgroup>
</s:ItemRenderer> 34

35. Flex Performance: ItemRenderers
Cache external content requests
Beware text components
Do not use filters / shadows
LabelItemRenderer / IconItemRenderer
35

36. Q&A
Time to answer
36

37. THANK YOU
JAM364
Mariano Carrizo
@kiwox – mariano@entiractive.com
5 – 6 February, 2013