BlackBerry 10 appswith Adobe AIR & Apache FlexJAM364Mariano Carrizo@kiwox – mariano@entiractive.com5 – 6 February, 2013
About me BlackBerry Developer Elite BlackBerry Developer Group Argentina    http://www.blackberrydev.com.ar iOS Developer...
About me           3
Agenda Past and present of Adobe AIR Adobe AIR + BlackBerry 10 Built for BlackBerry 10, deep integration APIs Extending wi...
Adobe AIR                                      Free and open source SDK                                      Cross platfom...
Adobe AIR features  Local filesystem access  Device sensors API  SQLite  Adobe Native Extensions (ANE)                    ...
Adobe AIR: Filesystem var appBundle:File = File.applicationDirectory .resolvePath(“myFile.txt”); var shared:File = File.ap...
Adobe AIR: GPS  import flash.sensors.Geolocation;  import flash.sensors.GeolocationEvent;  ...  protected function localiz...
Adobe AIR: CameraUIif(CameraUI.isSupported) {   var cam:CameraUI = new CameraUI();   cam.addEventListener(MediaEvent.COMPL...
Adobe AIR: CameraUI     if(CameraUI.isSupported) {        var cam:CameraUI = new CameraUI();        cam.addEventListener(M...
Adobe AIR: CameraUIprotected function onMediaComplete(event:MediaEvent):void {   if(event.data!=null) {        var ldr:Loa...
Adobe AIR: CameraUI    protected function imageLoadComplete(event:Event):void {       var ldr:Loader = event.target.loader...
Adobe AIR: CameraRoll    protected function choosePicture():void {            if(CameraRoll.supportsBrowseForImage) {     ...
Built for BlackBerry 10Platform SDK                          14
Adobe AIR on BB10 AIR Runtime 3.1 (more to come?) No cross-compiling required BlackBerry 10 SDK    Fuse UI components   ...
Adobe AIR on BB10   var request:InvokeRequest = new InvokeRequest();   request.target = "com.example.image.view";   reques...
Adobe AIR on BB10var segment:SegmentedControl = new SegmentedControl();segment.x = 10;segment.y = 200;var buttonArray:Arra...
Adobe AIR on BB10                    18
Adobe AIR + BlackBerry 10Live Demo #1                            19
Adobe AIR + FrameworksMaking life easier                         20
Frameworks and libraries  User Interfaces      Charting     Apache Flex         IBM Ilog Elixir     PureMVC  Games and ...
Apache Flex              22
Apache FlexNavigationBar TabBar                23
Adobe AIR + BlackBerry 10 + FlexLive Demo #2                                   24
Tips & TricksReaching a good application
Performance metrics  Response time     Screen load/appear     Framerate (FPS)  Memory  Bundle size
Performance metricsEffects, Scrolling, Transitions       Startup, Navigation, Data processing              10%            ...
Flex Performance  BitmapImage     GraphicElement     Remote loading, scaling and Caching     Supports multiple DPI base...
Flex Performance                    Create and Render 1000 Instances     BitmapImage       MX Image                       ...
Flex Performance  Caching and Queuing     ContentCache class        Cache on by default        Queue off by default     ...
Performance: Images                      Bitmap                      UIComponent                      GraphicElements     ...
Performance: Images                  Create and Render 1000 graphics      Compiled FXG    GraphicElements                 ...
Flex Performance: Text    RichEditableText   RichText   Label   StyleableTextFieldPoor performance                        ...
Flex Performance: ItemRenderers   <s:ItemRenderer>       <fx:Script>           <![CDATA[       import spark.core.ContentCa...
Flex Performance: ItemRenderers  Cache external content requests  Beware text components  Do not use filters / shadows  La...
Q&ATime to answer                 36
THANK YOUJAM364Mariano Carrizo@kiwox – mariano@entiractive.com5 – 6 February, 2013
Upcoming SlideShare
Loading in...5
×

BlackBerry10 apps with Adobe AIR & Apache Flex - BlackBerry JAM Europe

702

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
702
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "BlackBerry10 apps with Adobe AIR & Apache Flex - BlackBerry JAM Europe"

  1. 1. BlackBerry 10 appswith Adobe AIR & Apache FlexJAM364Mariano Carrizo@kiwox – mariano@entiractive.com5 – 6 February, 2013
  2. 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. 3. About me 3
  4. 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. 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 5Stats source: http://www.adobe.com/products/player_census/flashplayer/
  6. 6. Adobe AIR features Local filesystem access Device sensors API SQLite Adobe Native Extensions (ANE) 6
  7. 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. 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. 9. Adobe AIR: CameraUIif(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. 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. 11. Adobe AIR: CameraUIprotected 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. 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. 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. 14. Built for BlackBerry 10Platform SDK 14
  15. 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. 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. 17. Adobe AIR on BB10var 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. 18. Adobe AIR on BB10 18
  19. 19. Adobe AIR + BlackBerry 10Live Demo #1 19
  20. 20. Adobe AIR + FrameworksMaking life easier 20
  21. 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. 22. Apache Flex 22
  23. 23. Apache FlexNavigationBar TabBar 23
  24. 24. Adobe AIR + BlackBerry 10 + FlexLive Demo #2 24
  25. 25. Tips & TricksReaching a good application
  26. 26. Performance metrics Response time  Screen load/appear  Framerate (FPS) Memory Bundle size
  27. 27. Performance metricsEffects, Scrolling, Transitions Startup, Navigation, Data processing 10% 16% 24% 23% 67% 60% Rendering ActionScript Other 27
  28. 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. 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. 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. 31. Performance: Images Bitmap UIComponent GraphicElements FXG 31
  32. 32. Performance: Images Create and Render 1000 graphics Compiled FXG GraphicElements Creation Validation UIComponents Render 0 200 400 600 800 Time (ms) 32
  33. 33. Flex Performance: Text RichEditableText RichText Label StyleableTextFieldPoor performance Better performance 33
  34. 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. 35. Flex Performance: ItemRenderers Cache external content requests Beware text components Do not use filters / shadows LabelItemRenderer / IconItemRenderer 35
  36. 36. Q&ATime to answer 36
  37. 37. THANK YOUJAM364Mariano Carrizo@kiwox – mariano@entiractive.com5 – 6 February, 2013

×