Demystifying Native, Web, and Hybrid Mobile Development on BlackBerry 10 with Manny Elawar, Edgar Parada
Download as PPT, PDF1 like1,036 views
The document presents an overview of BlackBerry 10, a new mobile computing platform designed for productivity. It discusses various development approaches for BlackBerry 10, including native, web, and hybrid development, showcasing features like multitasking, an advanced keyboard, and the ability to create adaptable UIs. Developer tools such as Cascades, WebWorks, and Adobe AIR are highlighted for creating feature-rich applications across mobile and desktop platforms.
![Grouped Animation
SequentialAnimation {
id: “turner”
repeatCount: AnimationRepeatCount.Forever
animations : [
RotateTransition {
fromAngleZ: 0;
toAngleZ: 90;
duration: 1000;
},
RotateTransition {
fromAngleZ: 90;
toAngleZ: 0;
duration: 1000;
}
]
}
0 ms 1000 ms 2000 ms](https://image.slidesharecdn.com/blackberry10-130430105234-phpapp02/85/Demystifying-Native-Web-and-Hybrid-Mobile-Development-on-BlackBerry-10-with-Manny-Elawar-Edgar-Parada-33-320.jpg)
![Easing Curves
ParallelAnimation {
id: bouncer
animations : [
TranslateTransition {
fromY: 0;
toY: 800;
duration: 2000;
easingCurve: StockCurve.DoubleBounceOut;
},
TranslateTransition {
fromX: 0;
toX: 500;
duration: 1000;
easingCurve: StockCurve.QuarticOut;
}
]
}](https://image.slidesharecdn.com/blackberry10-130430105234-phpapp02/85/Demystifying-Native-Web-and-Hybrid-Mobile-Development-on-BlackBerry-10-with-Manny-Elawar-Edgar-Parada-34-320.jpg)
Demystifying Native, Web, and Hybrid Mobile Development on BlackBerry 10 with Manny Elawar, Edgar Parada
- 1. 1 Demystifying Native, Web, and Hybrid Mobile Development on BlackBerry 10 Manny Elawar and Edgar Parada BlackBerry Developer Evangelists @manny_elawar @edgarparada
- 2. Agenda • What is BlackBerry 10? • Demo • HTML5 and WebWorks • Native Development and Cascades • Hybrid Development • Q & A
- 3. What Is BlackBerry 10? • Completely new – Not a revision or upgrade of BlackBerry 7 • Secure • Designed as a mobile computing platform – Not just another mobile phone OS • Designed for people on the move; people that want to get something done – Not just consume content on the couch http://developer.blackberry.com
- 4. Where Did BlackBerry 10 Come From? BlackBerry® PlayBook™ HTML5 WebWorks BlackBerry 10TM http://developer.blackberry.com
- 5. Demo • Will show the UX & Flow. Specifically, one- hand use, the amazing keyboard, HUB, and insane multitasking designed to get stuff done. http://developer.blackberry.com
- 6. High Level Architecture BlackBerry Services (BES / Mobile Fusion, BIS, Push, Maps, Payments, BBM, Scoreloop, etc.) HTML 5 & WebWorks Native C/C++ & Cascades UI BlackBerry 10 OS http://developer.blackberry.com
- 7. Easy to Develop Apps C/C++ Native SDK C++/Qt Cascades HTML5 BlackBerry® WebWorks™ “One F***ing Day” Michael Shchade CEO Fishlabs http://developer.blackberry.com BlackBerry Runtime for Android Apps Adobe AIR
- 8. Developer Options http://developer.blackberry.com C/C++ Native SDK C++/Qt Cascades HTML5 BlackBerry® WebWorks™ BlackBerry Runtime for Android Apps Adobe AIR
- 9. HTML5 an Open Web Platform
- 11. Where are we today?
- 13. Here are some fellows
- 14. How to get there?
- 15. Hello World <script src="webworks.js" type="text/javascript"></script> <script> document.addEventListener("webworksready", function(e) { document.getElementById('someInput').value = "Hello World"; }, false); </script>
- 16. Something more complex: Sensors window.addEventListener("devicemotion", function(event) { var x = event.accelerationIncludingGravity.x; var y = event.accelerationIncludingGravity.y; var z = event.accelerationIncludingGravity.z; }, true);
- 17. Geolocation, info from the GPS function onSuccess(position) { console.log("lat = " + pos.coords.latitude); console.log("lon = " + pos.coords.longitude); } navigator.geolocation.getCurrentPosition(onSuccess, onError);
- 19. Why Use WebWorks & HTML5? • HTML5 Momentum – Support everywhere – Lot of options (frameworks, libraries, tooling…) – W3C & Cordova Alignment • Great Native Integration – Same performance & features as Browser – Access different APIs: Invoke, BBM, PIM, Advertising, Storage, and many more! http://developer.blackberry.com
- 20. Developer Options http://developer.blackberry.com C/C++ Native SDK C++/Qt Cascades HTML5 BlackBerry® WebWorks™ BlackBerry Runtime for Android Apps Adobe AIR
- 21. Cascades in the native SDK
- 23. Cascades, A Native UI Framework • Cascades & Qt, a great match! • Mature C++ application framework • Great APIs • Signals and Slots • Many helper classes • QML http://developer.blackberry.com
- 24. Typical Cascades App http://developer.blackberry.com JavaScript based UI logic QML based UI structure QT/C++ Backend
- 25. Any Mix Is Possible http://developer.blackberry.com JavaScript based UI logic QML based UI structure QT/C++ Backend
- 26. Hello world import bb.cascades 1.0 Page { Label { text: "Hello World" } }
- 27. Same thing in C++ Page* root = new Page; Label* label = Label::create() .text("Hello World"); root->setContent(label); Application::instance()->setScene(root);
- 28. C++ QML
- 30. 31 60 fps!
- 31. Client server architecture Client Server Tell the server what to render Get events back
- 32. Animations • Translate, rotate, scale, fade • Implicit animations • Explicit animations • Duration, start/end, easing curve • Grouped animations 33
- 33. Grouped Animation SequentialAnimation { id: “turner” repeatCount: AnimationRepeatCount.Forever animations : [ RotateTransition { fromAngleZ: 0; toAngleZ: 90; duration: 1000; }, RotateTransition { fromAngleZ: 90; toAngleZ: 0; duration: 1000; } ] } 0 ms 1000 ms 2000 ms
- 34. Easing Curves ParallelAnimation { id: bouncer animations : [ TranslateTransition { fromY: 0; toY: 800; duration: 2000; easingCurve: StockCurve.DoubleBounceOut; }, TranslateTransition { fromX: 0; toX: 500; duration: 1000; easingCurve: StockCurve.QuarticOut; } ] }
- 35. Demo Events
- 36. Handling Touch Events in QML Container{ onTouch: { if (event.isDown()) { scaleX = 2; scaleY = 2; rotationZ = 45; } else if (event.isUp()){ scaleX = 1; scaleY = 1; rotationZ = 0; } } } }
- 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. UI Adaptability - Multiple Form Factors
- 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 per configuration
- 40. Asset selectors Based on resolution and/or visual style assets/ main_screen.qml dialog.qml picture.png icon.png 720x720/ main_screen.qml picture.png
- 41. Asset selectors Based on resolution and/or visual style assets/ main_screen.qml dialog.qml picture.png icon.png 720x720/ main_screen.qml picture.png
- 42. Asset selectors Based on resolution and/or visual style assets/ main_screen.qml dialog.qml picture.png icon.png 720x720/ main_screen.qml picture.png
- 43. Why Use Cascades? • Elegant UI Framework – Great looking core UI components – Easy to build custom components – Dedicated UI tooling including real-time design preview and Photoshop plugin • Increased Productivity – Higher level APIs – QT flavored C++ and declarative UI http://developer.blackberry.com
- 44. Demo • USA Today vs New York Times – Can you tell which is HTML5 and which is Cascades?
- 45. Developer Options http://developer.blackberry.com C/C++ Native SDK C++/Qt Cascades BlackBerry Runtime for Android Apps Adobe AIR HTML5 BlackBerry® WebWorks™
- 46. Developer Options http://developer.blackberry.com C/C++ Native SDK C++/Qt Cascades BlackBerry Runtime for Android Apps Adobe AIR HTML5 BlackBerry® WebWorks™
- 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 & frameworks Adobe 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. 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. Fuse QNX Components Adobe AIR on BlackBerry 10
- 50. Hello World import 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. Local File System var appBundle:File = File.applicationDirectory.resolvePath("myFile.txt"); var shared:File = File.applicationStorageDirectory.resolvePath("writeable File.txt");
- 52. Invoke Framework 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);
- 53. Some inspiration
- 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-Developer Workflows – Creative UI to the limit http://developer.blackberry.com
- 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 .bar out
- 56. thank you! Manny Elawar, Edgar Parada BlackBerry Developer Evangelists @manny_elawar @edgarparada
Editor's Notes
- #5: TAT was acquired by RIM the winter of 2010 Creating a new platform is very difficult task
- #16: 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”
- #17: 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”
- #18: 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”
- #28: 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”
- #29: 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
- #30: - 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
- #33: - 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
- #34: 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
- #35: 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
- #36: 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
- #37: Qt uses signals & slots paradigm Cascades events are mapped to Qt signals
- #38: 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
- #39: 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
- #40: 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
- #41: 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)
- #42: 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
- #43: 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
- #44: 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
- #51: 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”
- #52: 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”
- #53: 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”
- #54: 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”