BlackBerry - Cascades 101 - How To Build Astonishing User Interfaces for BlackBerry 10
-
Upload
israel-mobile-summit -
Category
Technology
-
view
2.107 -
download
1
description
Transcript of BlackBerry - Cascades 101 - How To Build Astonishing User Interfaces for BlackBerry 10
Cascades 101How To Build Astonishing User Interfaces for BlackBerry 10
Luca Filigheddu
BlackBerry Developer Evangelist
@filos
Why Use Cascades?
Elegant UI Framework• Great looking core UI components• Easy to build custom UI components• Dedicated UI tooling including design
preview (w/ Photoshop Plugin)
Increase Productivity• Higher level APIs• QT flavoured C++ and declarative UI
approach
The NDK – Two layers
High Level – Cascades High level APIs / C++ Qt + QML + JavaScript Built-in Elegance, beautiful UI Provides the BlackBerry 10 UXLow Level Posix/Low level C; great for porting Raw OS access, windowing, etc. OpenGL ES, OpenAL, ...Excellent for
games Great for Open Source Integration
3
Easy to Read, Declaritive QML
4
Objects
Properties
Arrays (also properties)
JavaScript functions (also properties)
Visual Tooling
5
Standard UI Components
6
Cascades APIs
7
• Advertising Service• App Integration (Invocation Framework)• BBM integration• Location• Payment services (in-app purchases)• Push services and notifications• Audio and Video• Imaging• Camera• Sensors• Networking
A typical Cascades app
8
Qt/C++ Base
QML-based UI structure
JavaScript-based UI logic
C++ layer
9
Qt/C++Base
Qt makes C++ easy to use and provides structure
APIs and platform services exposed as C++ classes
UI framework exposed as C++ classes
Access to the underlying low level NDK and OpenGL
C++ layer
10
QMLUI structure
JavaScript
Declarative UI model – Declare the structure of your app, Cascades will piece it together for you
Add runtime logic and react to user events in JavaScript
Realtime UI preview in the tool
Many platform features exposed in QML as well
Any mix is possible
11
QMLUI structure
JavaScript
Qt/C++Base
Moving between QML and C++ is easy
12
C++
QML
JavaScript
myCppFunction()
myCppFunction {}
myJSFunction{}
myJSFunction() class MyClass { int property;}
MyObject { MyProperty: x}
QmlDocument::create("asset:///main.qml")
MyObject { MyOtherObj {…}}
Controls
Hello World!
14
Hello world
import bb.cascades 1.0
Page { content: 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);
What to choose?
C++ QML
Application structure controls
Page
Action bar
Tab menu Action menu Context menu
Application structure controls
“navigation transition”
Navigation pane
Title bar “peek”
More controls…
CheckboxRadio group Button, Toggle button
Label Text field Date/time picker
Slider, Text area
ImageView
Custom controls
Architecture
23
60 fps!
Client server architecture
Client Server
Tell the server what to render
Get events back
Client Server
Application
Cascades Tap
React
Scroll list
Fetch data
Do something
else
Start animation
Scene Graph
Scene Graph
RootContainer
Text: “Hello World”
Container
Hello World
RotationZScaleOpacity
In QML
Container { opacity: 0.5 scaleX: 1.5; scaleY: 1.5 rotationZ: 45 ImageView { … } Label { … }}
C++
Container *bubble= new Container();bubble->setOpacity(0.5f);bubble->setScale(1.5f);bubble->setRotationZ(45);bubble->add(ImageView::create() ... );bubble->add(Label::create() ... );…
Animations
Animations
Translate, rotate, scale, fade Implicit animations Explicit animations Duration, start/end, easing curve Grouped animations
31
Events
Demo
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; } } }}
Layouts
StackLayout & DockLayout
Container { layout: DockLayout {} Cow { horizontalAlignment: HorizontalAlignment.Center verticalAlignment: VerticalAlignment.Top } Cow { horizontalAlignment: HorizontalAlignment.Center verticalAlignment: VerticalAlignment.Center }}
Container { layout: StackLayout { orientation: LayoutOrientation.TopToBottom } Cow { layoutProperties: StackLayoutProperties { spaceQuota: 1 } } Cow { layoutProperties: StackLayoutProperties { spaceQuota: 2 } }}
Custom controls
ContainerDockLayout
SpeedGauge
RotationZ (-10) RotationZ (-40)
TranslationY (30) TranslationY(30)
Lists
List Items
Prepackaged item types Header StandardListItem
Custom list item “Anything”
43
Data binding
DataModel
JSON SQL
XMLGroupedArray QList custom
UI adaptability
Multiple Form Factors
How 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