Cascades 101 How To Build Astonishing User Interfaces for BlackBerry 10

Luca Filigheddu Head of Developer Evangelism EMEA lfiligheddu@blackberry.com @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  

Questions? / Answers!

Feel free to email me: lfiligheddu@blackberry.com

51