Cascades 101 How To Build Astonishing User Interfaces for BlackBerry 10
Luca Filigheddu Head of Developer Evangelism EMEA [email protected] @filos
What is Cascades?
• Qt toolkit • Cascades replaces QtQuick – QtGui • UI runs in separate thread • “Talks” to C++ and vice-versa
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 UX Low Level � Posix/Low level C; great for porting � Raw OS access, windowing, etc. � OpenGL ES, OpenAL, ...Excellent for
games � Great for Open Source Integration
4
Easy to Read, Declaritive QML
5
Objects Properties
Arrays (also properties)
JavaScript functions (also properties)
Visual Tooling
6
Standard UI Components
7
Cascades APIs
8
• 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
Cascades – New in 10.2
9
• Custom fonts • Screen reader • Headless Applications • GeoFencing • Bluetooth improvements • Peripheral discovery • …MORE…
• à http://bit.ly/cascades102
A typical Cascades app
10
Qt/C++ Base
QML-based UI structure
JavaScript-based UI logic
C++ layer
11
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
12
QML UI 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
13
QML UI structure
JavaScript
Qt/C++ Base
Moving between QML and C++ is easy
14
C++
QML
JavaScript myCppFunction()
myCppFunction { }
myJSFunction{ }
myJSFunction() class MyClass { int property; }
MyObject { MyProperty: x }
QmlDocument::create ("asset:///main.qml")
MyObject { MyOtherObj {…} }
Controls
Hello World!
16
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…
Checkbox Radio group Button, Toggle button
Label Text field Date/time picker
Slider, Text area
ImageView
Custom controls
Architecture
25
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
Root Container
Text: “Hello World”
Container
Hello World
RotationZ Scale Opacity
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
33
Events
Example
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
Container DockLayout
SpeedGauge
RotationZ (-10) RotationZ (-40) TranslationY (30) TranslationY(30)
Lists
List Items
� Prepackaged item types � Header � StandardListItem
� Custom list item � “Anything”
45
Data binding
DataModel
JSON SQL
XML Grouped Array 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