Date post: | 18-Dec-2014 |
Category: |
Technology |
Upload: | fitc |
View: | 326 times |
Download: | 5 times |
1
Demystifying Native, Web, and Hybrid Mobile Development on BlackBerry 10
Manny 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 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
Where Did BlackBerry 10 Come From?
BlackBerry® PlayBook™
HTML5 WebWorks
BlackBerry 10TM
http://developer.blackberry.com
Demo
• Will show the UX & Flow. Specifically, one-hand use, the amazing keyboard, HUB, and insane multitaskingdesigned to get stuff done.http://developer.blackberry.com
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
Easy to Develop Apps
C/C++Native SDK
C++/QtCascades
HTML5 BlackBerry®
WebWorks™
“One F***ing Day”Michael Shchade
CEO Fishlabs
http://developer.blackberry.com
BlackBerry Runtime for
Android AppsAdobe AIR
Developer Options
http://developer.blackberry.com
C/C++Native SDK
C++/QtCascades
HTML5 BlackBerry®
WebWorks™
BlackBerry Runtime for
Android AppsAdobe AIR
Hello World
<script src="webworks.js" type="text/javascript"></script>
<script>document.addEventListener("webworksready", function(e) {
document.getElementById('someInput').value = "Hello World";}, false);</script>
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);
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);
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
Developer Options
http://developer.blackberry.com
C/C++Native SDK
C++/QtCascades
HTML5 BlackBerry®
WebWorks™
BlackBerry Runtime for
Android AppsAdobe AIR
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
Typical Cascades App
http://developer.blackberry.com
JavaScriptbased UI logic
QML based UIstructure
QT/C++Backend
Any Mix Is Possible
http://developer.blackberry.com
JavaScriptbased UI logic
QML basedUI structure
QT/C++Backend
Same thing in C++
Page* root = new Page;Label* label = Label::create() .text("Hello World");root->setContent(label);Application::instance()->setScene(root);
Animations
• Translate, rotate, scale, fade
• Implicit animations
• Explicit animations
• Duration, start/end, easing curve
• Grouped animations
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
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;
} ]}
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; } } }}
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);
}
}
}
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
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
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
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
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
Developer Options
http://developer.blackberry.com
C/C++Native SDK
C++/QtCascades
BlackBerry Runtime for
Android AppsAdobe AIR
HTML5 BlackBerry®
WebWorks™
Developer Options
http://developer.blackberry.com
C/C++Native SDK
C++/QtCascades
BlackBerry Runtime for
Android AppsAdobe AIR
HTML5 BlackBerry®
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 & frameworks
AIR for BlackBerry 10 SDK
• FileSystem Access• API Sensors• SQL lite• Fuse QNX Components• Invocation Framework• Push, Cards, Payment, etc.• Adobe Native Extensions ANEs
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);
}}
Local File System
var appBundle:File = File.applicationDirectory.resolvePath("myFile.txt");
var shared:File = File.applicationStorageDirectory.resolvePath("writeableFile.txt");
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);
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
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