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.
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
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
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
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
27. Same thing in C++
Page* root = new Page;
Label* label = Label::create()
.text("Hello World");
root->setContent(label);
Application::instance()->setScene(root);
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?
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
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");
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
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”