0
1Demystifying Native, Web,and Hybrid MobileDevelopment onBlackBerry 10Manny Elawar and Edgar ParadaBlackBerry Developer Ev...
Agenda• What is BlackBerry 10?• Demo• HTML5 and WebWorks• Native Development and Cascades• Hybrid Development• Q & A
What Is BlackBerry 10?• Completely new– Not a revision or upgrade of BlackBerry 7• Secure• Designed as a mobile computingp...
Where Did BlackBerry 10 Come From?BlackBerry®PlayBook™HTML5WebWorksBlackBerry 10TMhttp://developer.blackberry.com
Demo• Will show the UX &Flow. Specifically, one-hand use, the amazingkeyboard, HUB, andinsane multitaskingdesigned to get ...
High Level ArchitectureBlackBerry Services(BES / Mobile Fusion, BIS, Push, Maps, Payments, BBM, Scoreloop, etc.)HTML 5 &We...
Easy to Develop AppsC/C++Native SDKC++/QtCascadesHTML5BlackBerry®WebWorks™“One F***ing Day”Michael ShchadeCEO Fishlabshttp...
Developer Optionshttp://developer.blackberry.comC/C++Native SDKC++/QtCascadesHTML5BlackBerry®WebWorks™BlackBerryRuntime fo...
HTML5 an Open Web Platform
Kudos from developers
Where are we today?
Introducing BlackBerry WebWorks
Here are some fellows
How to get there?
Hello World<script src="webworks.js" type="text/javascript"></script><script>document.addEventListener("webworksready", fu...
Something more complex: Sensorswindow.addEventListener("devicemotion", function(event){var x = event.accelerationIncluding...
Geolocation, info from the GPSfunction onSuccess(position) {console.log("lat = " + pos.coords.latitude);console.log("lon =...
Some inspiration: WebGLhttp://www.gooengine.com
Why Use WebWorks & HTML5?• HTML5 Momentum– Support everywhere– Lot of options (frameworks,libraries, tooling…)– W3C & Cord...
Developer Optionshttp://developer.blackberry.comC/C++Native SDKC++/QtCascadesHTML5BlackBerry®WebWorks™BlackBerryRuntime fo...
Cascades in the native SDK
Native C/C++gameplayhttp://developer.blackberry.com
Cascades, A Native UI Framework• Cascades & Qt, a great match!• Mature C++ applicationframework• Great APIs• Signals and S...
Typical Cascades Apphttp://developer.blackberry.comJavaScriptbased UI logicQML based UIstructureQT/C++Backend
Any Mix Is Possiblehttp://developer.blackberry.comJavaScriptbased UI logicQML basedUI structureQT/C++Backend
Hello worldimport bb.cascades 1.0Page {Label {text: "Hello World"}}
Same thing in C++Page* root = new Page;Label* label = Label::create().text("Hello World");root->setContent(label);Applicat...
C++ QML
http://developer.blackberry.com
3160 fps!
Client server architectureClient ServerTell the server what to renderGet events back
Animations• Translate, rotate, scale, fade• Implicit animations• Explicit animations• Duration, start/end, easing curve• G...
Grouped AnimationSequentialAnimation {id: “turner”repeatCount: AnimationRepeatCount.Foreveranimations : [RotateTransition ...
Easing CurvesParallelAnimation {id: bounceranimations : [TranslateTransition {fromY: 0;toY: 800;duration: 2000;easingCurve...
Demo Events
Handling Touch Events in QMLContainer{onTouch: {if (event.isDown()) {scaleX = 2; scaleY = 2;rotationZ = 45;} else if (even...
QObject::connect(bubble,SIGNAL(touch(bb::cascades::TouchEvent*))this,SLOT(touched(bb::cascades::TouchEvent*)));Handling To...
UI Adaptability - Multiple Form Factors
How to create an adaptable UI?• Built in controls adapt to device type• Layouts, space quota, 9-sliced images, …• Unique (...
Asset selectorsBased on resolution and/or visual styleassets/main_screen.qmldialog.qmlpicture.pngicon.png720x720/main_scre...
Asset selectorsBased on resolution and/or visual styleassets/main_screen.qmldialog.qmlpicture.pngicon.png720x720/main_scre...
Asset selectorsBased on resolution and/or visual styleassets/main_screen.qmldialog.qmlpicture.pngicon.png720x720/main_scre...
Why Use Cascades?• Elegant UI Framework– Great looking core UIcomponents– Easy to build customcomponents– Dedicated UI too...
Demo• USA Today vs New York Times– Can you tell which is HTML5 and which isCascades?
Developer Optionshttp://developer.blackberry.comC/C++Native SDKC++/QtCascadesBlackBerryRuntime forAndroid AppsAdobe AIRHTM...
Developer Optionshttp://developer.blackberry.comC/C++Native SDKC++/QtCascadesBlackBerryRuntime forAndroid AppsAdobe AIRHTM...
Love is in the AIR• Open Source SDK• Cross platform (Mobile & Desk)• 3.5 millions of devs• 70% of online games built on Fl...
AIR for BlackBerry 10 SDK• FileSystem Access• API Sensors• SQL lite• Fuse QNX Components• Invocation Framework• Push, Card...
Fuse QNX ComponentsAdobe AIR on BlackBerry 10
Hello Worldimport flash.display.Sprite;import qnx.fuse.ui.text.Label;public class BlackBerryIOAS3 extends Sprite{public fu...
Local File Systemvar appBundle:File =File.applicationDirectory.resolvePath("myFile.txt");var shared:File =File.application...
Invoke Frameworkvar request:InvokeRequest = new InvokeRequest();request.target = "com.example.image.view";request.action =...
Some inspiration
Why Use AIR?• AIR Community– Lot of Learning Resources– Fast for create games– Different Frameworks,Engines & Libraries• E...
BlackBerry Runtime for Android Apps• Based on Open Source Android, v2.3.3 aka “Gingerbread”• Repackage Android apps, sign,...
thank you!Manny Elawar, Edgar ParadaBlackBerry Developer Evangelists@manny_elawar @edgarparada
Upcoming SlideShare
Loading in...5
×

Demystifying Native, Web, and Hybrid Mobile Development on BlackBerry 10 with Manny Elawar, Edgar Parada

367

Published on

Edgar and Manny will walk through the various development approaches available to developers creating apps on the new BlackBerry 10 platform. Emphasis will be placed on looking at the Native vs. Web-based offerings, and then they will discuss the hybrid model which leverages aspects of both. Focus will be placed on UI and end-user implications.

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
367
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • TAT was acquired by RIM the winter of 2010 Creating a new platform is very difficult task
  • A Page defines an individual screen within an application. Set the content of the page to a Label. Set the text property of a Label to “Hello World”
  • A Page defines an individual screen within an application. Set the content of the page to a Label. Set the text property of a Label to “Hello World”
  • A Page defines an individual screen within an application. Set the content of the page to a Label. Set the text property of a Label to “Hello World”
  • A Page defines an individual screen within an application. Set the content of the page to a Label. Set the text property of a Label to “Hello World”
  • Here is the equivalent in C++ Note what you have to do in C++ that is implicitly done for you in the declarative QML. Dynamic creation (using “new” keyword, or static “create()” method in the case of the Label) Explicitly set the content of the page Reference the Application Singleton instance and set the scene
  • - So what should you choose? - QML for UI, C++ for business logic - Can be combined - Up to the developer, strength You can choose! No difference between UI created in QML or C++ They can be combined Typically, UI in QML and business logic in C++ QML supports JavaScript for signal handling
  • - Client server model to not block the rendering - Once an animation or a list scroll is started, it run - Goodbye to choppy animations GPU - Cascades is single threaded .Like any other UI toolkit .All internal multithreading is hidden from the developer - All access to every class in the toolkit expects to be executed on Application (UI) thread Blocking of the UI thread won’t cause repaint issues, but still block processing of events
  • Why animations? Eye candy. Usability. Draws attention to what is important. (Etc. etc.) “ Any Cascades UI element can be animated ” What can be animated? Switching layouts animates the children of the control “ the layout of a control in a container, such as preferred width and preferred height” Possible to animate character spacing? Implicit animations: Enabled by default Property change triggers animation Can be turned off Properties of an animation: Duration, starting and ending points, and easing curve. (Using different animation classed.) Easing curves: The ones available in the StockCurve class. Characteristics: Interpolation function (animation shape), and velocity (easin/easout functions) Grouped animations: Parallel or sequential
  • Grouped SequantialAnimation Animations listed as list using square brackets First animation rotates the cow 90 degrees for 1000 ms Second animation rotates cow 90 degrees in reverse direction for 1000 ms “ repeatCount ” property of Sequential Animation is set to forever, so animation will run forever when triggered
  • Combining two translate animations in parallel using easing curves. Both animations get applied at the same time and are combined to form a single animation on the cow
  • Qt uses signals &amp; slots paradigm Cascades events are mapped to Qt signals
  • Qt uses signals &amp; slots paradigm Cascades events are mapped to Qt signals Different components -&gt; different events Eg button -&gt; onclicked There are predefined signals and slots for the built-in controls in the Cascades UI framework. Visit the API documentation at developer.blackberry.com to discover them
  • In C++ you use the Qobject::connect method to link a signal that is emitted to a slot that handles the signal Slot can be a custom function that is implemented. Signal can also be custom
  • Quick few slides on developing for different resolutions and form factors Discuss the differences between Z10 and Q10, and commitment to 16:9 and 1:1 ratios
  • Leverage the built-in controls as much as possible, because we have made them adaptable to the device the app is running on Use layouts properly and with rotation and different form factors in mind 9-sliced images help with re-sizing by breaking down a picture into sections and scaling based on specified instructions Asset subset using the Asset Selector (next slide)
  • Assets that are named the same as objects in the main assets, and placed in a folder titled 720x720 will be selected for use on Q10 Must be using 10.1 SDK
  • Assets that are named the same as objects in the main assets, and placed in a folder titled 720x720 will be selected for use on Q10 Must be using 10.1 SDK
  • Assets that are named the same as objects in the main assets, and placed in a folder titled 720x720 will be selected for use on Q10 Must be using 10.1 SDK
  • A Page defines an individual screen within an application. Set the content of the page to a Label. Set the text property of a Label to “Hello World”
  • A Page defines an individual screen within an application. Set the content of the page to a Label. Set the text property of a Label to “Hello World”
  • A Page defines an individual screen within an application. Set the content of the page to a Label. Set the text property of a Label to “Hello World”
  • A Page defines an individual screen within an application. Set the content of the page to a Label. Set the text property of a Label to “Hello World”
  • Transcript of " Demystifying Native, Web, and Hybrid Mobile Development on BlackBerry 10 with Manny Elawar, Edgar Parada"

    1. 1. 1Demystifying Native, Web,and Hybrid MobileDevelopment onBlackBerry 10Manny Elawar and Edgar ParadaBlackBerry Developer Evangelists@manny_elawar @edgarparada
    2. 2. Agenda• What is BlackBerry 10?• Demo• HTML5 and WebWorks• Native Development and Cascades• Hybrid Development• Q & A
    3. 3. What Is BlackBerry 10?• Completely new– Not a revision or upgrade of BlackBerry 7• Secure• Designed as a mobile computingplatform– Not just another mobile phone OS• Designed for people on themove; people that want to getsomething done– Not just consume content on the couchhttp://developer.blackberry.com
    4. 4. Where Did BlackBerry 10 Come From?BlackBerry®PlayBook™HTML5WebWorksBlackBerry 10TMhttp://developer.blackberry.com
    5. 5. Demo• Will show the UX &Flow. Specifically, one-hand use, the amazingkeyboard, HUB, andinsane multitaskingdesigned to get stuffdone.http://developer.blackberry.com
    6. 6. High Level ArchitectureBlackBerry Services(BES / Mobile Fusion, BIS, Push, Maps, Payments, BBM, Scoreloop, etc.)HTML 5 &WebWorksNative C/C++ &Cascades UIBlackBerry 10 OShttp://developer.blackberry.com
    7. 7. Easy to Develop AppsC/C++Native SDKC++/QtCascadesHTML5BlackBerry®WebWorks™“One F***ing Day”Michael ShchadeCEO Fishlabshttp://developer.blackberry.comBlackBerryRuntime forAndroid AppsAdobe AIR
    8. 8. Developer Optionshttp://developer.blackberry.comC/C++Native SDKC++/QtCascadesHTML5BlackBerry®WebWorks™BlackBerryRuntime forAndroid AppsAdobe AIR
    9. 9. HTML5 an Open Web Platform
    10. 10. Kudos from developers
    11. 11. Where are we today?
    12. 12. Introducing BlackBerry WebWorks
    13. 13. Here are some fellows
    14. 14. How to get there?
    15. 15. Hello World<script src="webworks.js" type="text/javascript"></script><script>document.addEventListener("webworksready", function(e) {document.getElementById(someInput).value = "HelloWorld";}, false);</script>
    16. 16. Something more complex: Sensorswindow.addEventListener("devicemotion", function(event){var x = event.accelerationIncludingGravity.x;var y = event.accelerationIncludingGravity.y;var z = event.accelerationIncludingGravity.z;}, true);
    17. 17. Geolocation, info from the GPSfunction onSuccess(position) {console.log("lat = " + pos.coords.latitude);console.log("lon = " + pos.coords.longitude);}navigator.geolocation.getCurrentPosition(onSuccess, onError);
    18. 18. Some inspiration: WebGLhttp://www.gooengine.com
    19. 19. Why Use WebWorks & HTML5?• HTML5 Momentum– Support everywhere– Lot of options (frameworks,libraries, tooling…)– W3C & Cordova Alignment• Great Native Integration– Same performance & featuresas Browser– Access different APIs: Invoke,BBM, PIM, Advertising,Storage, and many more!http://developer.blackberry.com
    20. 20. Developer Optionshttp://developer.blackberry.comC/C++Native SDKC++/QtCascadesHTML5BlackBerry®WebWorks™BlackBerryRuntime forAndroid AppsAdobe AIR
    21. 21. Cascades in the native SDK
    22. 22. Native C/C++gameplayhttp://developer.blackberry.com
    23. 23. Cascades, A Native UI Framework• Cascades & Qt, a great match!• Mature C++ applicationframework• Great APIs• Signals and Slots• Many helper classes• QMLhttp://developer.blackberry.com
    24. 24. Typical Cascades Apphttp://developer.blackberry.comJavaScriptbased UI logicQML based UIstructureQT/C++Backend
    25. 25. Any Mix Is Possiblehttp://developer.blackberry.comJavaScriptbased UI logicQML basedUI structureQT/C++Backend
    26. 26. Hello worldimport bb.cascades 1.0Page {Label {text: "Hello World"}}
    27. 27. Same thing in C++Page* root = new Page;Label* label = Label::create().text("Hello World");root->setContent(label);Application::instance()->setScene(root);
    28. 28. C++ QML
    29. 29. http://developer.blackberry.com
    30. 30. 3160 fps!
    31. 31. Client server architectureClient ServerTell the server what to renderGet events back
    32. 32. Animations• Translate, rotate, scale, fade• Implicit animations• Explicit animations• Duration, start/end, easing curve• Grouped animations33
    33. 33. Grouped AnimationSequentialAnimation {id: “turner”repeatCount: AnimationRepeatCount.Foreveranimations : [RotateTransition {fromAngleZ: 0;toAngleZ: 90;duration: 1000;},RotateTransition {fromAngleZ: 90;toAngleZ: 0;duration: 1000;}]}0 ms 1000 ms 2000 ms
    34. 34. Easing CurvesParallelAnimation {id: bounceranimations : [TranslateTransition {fromY: 0;toY: 800;duration: 2000;easingCurve: StockCurve.DoubleBounceOut;},TranslateTransition {fromX: 0;toX: 500;duration: 1000;easingCurve: StockCurve.QuarticOut;}]}
    35. 35. Demo Events
    36. 36. Handling Touch Events in QMLContainer{onTouch: {if (event.isDown()) {scaleX = 2; scaleY = 2;rotationZ = 45;} else if (event.isUp()){scaleX = 1; scaleY = 1;rotationZ = 0;}}}}
    37. 37. QObject::connect(bubble,SIGNAL(touch(bb::cascades::TouchEvent*))this,SLOT(touched(bb::cascades::TouchEvent*)));Handling Touch Events in C++touched(bb::cascades::TouchEvent *t){if (t->isDown()) {bubble->setScale(2f);bubble->setRotation(45.0f);} else if (t->isUp()){bubble->setScale(1f);bubble->setRotation(0.0f);}}}
    38. 38. UI Adaptability - Multiple Form Factors
    39. 39. How to create an adaptable UI?• Built in controls adapt to device type• Layouts, space quota, 9-sliced images, …• Unique (sub)set of assets perconfiguration
    40. 40. Asset selectorsBased on resolution and/or visual styleassets/main_screen.qmldialog.qmlpicture.pngicon.png720x720/main_screen.qmlpicture.png
    41. 41. Asset selectorsBased on resolution and/or visual styleassets/main_screen.qmldialog.qmlpicture.pngicon.png720x720/main_screen.qmlpicture.png
    42. 42. Asset selectorsBased on resolution and/or visual styleassets/main_screen.qmldialog.qmlpicture.pngicon.png720x720/main_screen.qmlpicture.png
    43. 43. Why Use Cascades?• Elegant UI Framework– Great looking core UIcomponents– Easy to build customcomponents– Dedicated UI tooling includingreal-time design preview andPhotoshop plugin• Increased Productivity– Higher level APIs– QT flavored C++ and declarative UIhttp://developer.blackberry.com
    44. 44. Demo• USA Today vs New York Times– Can you tell which is HTML5 and which isCascades?
    45. 45. Developer Optionshttp://developer.blackberry.comC/C++Native SDKC++/QtCascadesBlackBerryRuntime forAndroid AppsAdobe AIRHTML5BlackBerry®WebWorks™
    46. 46. Developer Optionshttp://developer.blackberry.comC/C++Native SDKC++/QtCascadesBlackBerryRuntime forAndroid AppsAdobe AIRHTML5BlackBerry®WebWorks™  
    47. 47. Love is in the AIR• Open Source SDK• Cross platform (Mobile & Desk)• 3.5 millions of devs• 70% of online games built on Flash• Different tools & frameworksAdobe AIR Free and open source SDK Cross platfom for desktop, mobi 3.5 million developers ~70% online games built with Fl Lot of frameworks and tools
    48. 48. AIR for BlackBerry 10 SDK• FileSystem Access• API Sensors• SQL lite• Fuse QNX Components• Invocation Framework• Push, Cards, Payment, etc.• Adobe Native Extensions ANEs
    49. 49. Fuse QNX ComponentsAdobe AIR on BlackBerry 10
    50. 50. Hello Worldimport flash.display.Sprite;import qnx.fuse.ui.text.Label;public class BlackBerryIOAS3 extends Sprite{public function BlackBerryIOAS3(){initUI();}private function initUI():void {var myLabel:Label = new Label();myLabel.text = "BlackBerryIO";addChild(myLabel);}}
    51. 51. Local File Systemvar appBundle:File =File.applicationDirectory.resolvePath("myFile.txt");var shared:File =File.applicationStorageDirectory.resolvePath("writeableFile.txt");
    52. 52. Invoke Frameworkvar 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);
    53. 53. Some inspiration
    54. 54. Why Use AIR?• AIR Community– Lot of Learning Resources– Fast for create games– Different Frameworks,Engines & Libraries• Empowering UX– First Class Citizen for BB10– Great Designer-DeveloperWorkflows– Creative UI to the limithttp://developer.blackberry.com
    55. 55. BlackBerry Runtime for Android Apps• Based on Open Source Android, v2.3.3 aka “Gingerbread”• Repackage Android apps, sign, and submitted to BlackBerry World• Majority of apps convert with no changes to source (~65%)• Some limitations for first release• No: Native, Google APIs• Eclipse plugin & SDK w/simulator• Android-based apps appear like all other apps in BlackBerry World (AIR,WebWorks, etc.). To the consumer, “An app, is an app”http://developer.blackberry.com.apk in .barout
    56. 56. thank you!Manny Elawar, Edgar ParadaBlackBerry Developer Evangelists@manny_elawar @edgarparada
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×