Demystifying Native, Web, and Hybrid Mobile Development on BlackBerry 10 with Manny Elawar, Edgar Parada
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 563 views

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. ...

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.

Statistics

Views

Total Views
563
Views on SlideShare
563
Embed Views
0

Actions

Likes
0
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 & slots paradigm Cascades events are mapped to Qt signals
  • Qt uses signals & slots paradigm Cascades events are mapped to Qt signals Different components -> different events Eg button -> 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”

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

  • 1Demystifying Native, Web,and Hybrid MobileDevelopment onBlackBerry 10Manny Elawar and Edgar ParadaBlackBerry Developer Evangelists@manny_elawar @edgarparada
  • 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 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
  • 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 stuffdone.http://developer.blackberry.com
  • 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
  • Easy to Develop AppsC/C++Native SDKC++/QtCascadesHTML5BlackBerry®WebWorks™“One F***ing Day”Michael ShchadeCEO Fishlabshttp://developer.blackberry.comBlackBerryRuntime forAndroid AppsAdobe AIR
  • Developer Optionshttp://developer.blackberry.comC/C++Native SDKC++/QtCascadesHTML5BlackBerry®WebWorks™BlackBerryRuntime forAndroid AppsAdobe AIR
  • 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", function(e) {document.getElementById(someInput).value = "HelloWorld";}, false);</script>
  • Something more complex: Sensorswindow.addEventListener("devicemotion", function(event){var x = event.accelerationIncludingGravity.x;var y = event.accelerationIncludingGravity.y;var z = event.accelerationIncludingGravity.z;}, true);
  • Geolocation, info from the GPSfunction onSuccess(position) {console.log("lat = " + pos.coords.latitude);console.log("lon = " + pos.coords.longitude);}navigator.geolocation.getCurrentPosition(onSuccess, onError);
  • Some inspiration: WebGLhttp://www.gooengine.com
  • 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
  • Developer Optionshttp://developer.blackberry.comC/C++Native SDKC++/QtCascadesHTML5BlackBerry®WebWorks™BlackBerryRuntime forAndroid AppsAdobe AIR
  • 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 Slots• Many helper classes• QMLhttp://developer.blackberry.com
  • 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);Application::instance()->setScene(root);
  • 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• Grouped animations33
  • 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
  • Easing CurvesParallelAnimation {id: bounceranimations : [TranslateTransition {fromY: 0;toY: 800;duration: 2000;easingCurve: StockCurve.DoubleBounceOut;},TranslateTransition {fromX: 0;toX: 500;duration: 1000;easingCurve: StockCurve.QuarticOut;}]}
  • Demo Events
  • 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;}}}}
  • 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);}}}
  • 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 (sub)set of assets perconfiguration
  • Asset selectorsBased on resolution and/or visual styleassets/main_screen.qmldialog.qmlpicture.pngicon.png720x720/main_screen.qmlpicture.png
  • Asset selectorsBased on resolution and/or visual styleassets/main_screen.qmldialog.qmlpicture.pngicon.png720x720/main_screen.qmlpicture.png
  • Asset selectorsBased on resolution and/or visual styleassets/main_screen.qmldialog.qmlpicture.pngicon.png720x720/main_screen.qmlpicture.png
  • 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
  • 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 AIRHTML5BlackBerry®WebWorks™
  • Developer Optionshttp://developer.blackberry.comC/C++Native SDKC++/QtCascadesBlackBerryRuntime forAndroid AppsAdobe AIRHTML5BlackBerry®WebWorks™  
  • 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
  • AIR for BlackBerry 10 SDK• FileSystem Access• API Sensors• SQL lite• Fuse QNX Components• Invocation Framework• Push, Cards, Payment, etc.• Adobe Native Extensions ANEs
  • Fuse QNX ComponentsAdobe AIR on BlackBerry 10
  • 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);}}
  • Local File Systemvar appBundle:File =File.applicationDirectory.resolvePath("myFile.txt");var shared:File =File.applicationStorageDirectory.resolvePath("writeableFile.txt");
  • 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);
  • Some inspiration
  • 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
  • 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
  • thank you!Manny Elawar, Edgar ParadaBlackBerry Developer Evangelists@manny_elawar @edgarparada