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

lfiligheddu@blackberry.com

@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

Questions? / Answers!

Feel free to email me:

lfiligheddu@blackberry.com

49