![Page 1: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/1.jpg)
Cascades 101 How To Build Astonishing User Interfaces for BlackBerry 10
Luca Filigheddu Head of Developer Evangelism EMEA [email protected] @filos
![Page 2: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/2.jpg)
What is Cascades?
• Qt toolkit • Cascades replaces QtQuick – QtGui • UI runs in separate thread • “Talks” to C++ and vice-versa
![Page 3: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/3.jpg)
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
![Page 4: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/4.jpg)
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
![Page 5: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/5.jpg)
Easy to Read, Declaritive QML
5
Objects Properties
Arrays (also properties)
JavaScript functions (also properties)
![Page 6: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/6.jpg)
Visual Tooling
6
![Page 7: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/7.jpg)
Standard UI Components
7
![Page 8: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/8.jpg)
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
![Page 9: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/9.jpg)
Cascades – New in 10.2
9
• Custom fonts • Screen reader • Headless Applications • GeoFencing • Bluetooth improvements • Peripheral discovery • …MORE…
• à http://bit.ly/cascades102
![Page 10: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/10.jpg)
A typical Cascades app
10
Qt/C++ Base
QML-based UI structure
JavaScript-based UI logic
![Page 11: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/11.jpg)
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
![Page 12: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/12.jpg)
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
![Page 13: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/13.jpg)
Any mix is possible
13
QML UI structure
JavaScript
Qt/C++ Base
![Page 14: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/14.jpg)
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 {…} }
![Page 15: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/15.jpg)
Controls
![Page 16: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/16.jpg)
Hello World!
16
![Page 17: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/17.jpg)
Hello world
import bb.cascades 1.0 Page { content: Label { text: "Hello World" } }
![Page 18: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/18.jpg)
Same thing in C++
Page* root = new Page; Label* label = Label::create() .text("Hello World"); root->setContent(label); Application::instance()->setScene(root);
![Page 19: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/19.jpg)
What to choose?
C++ QML
![Page 20: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/20.jpg)
Application structure controls
Page
Action bar
Tab menu Action menu Context menu
![Page 21: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/21.jpg)
Application structure controls
“navigation transition”
Navigation pane
Title bar “peek”
![Page 22: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/22.jpg)
More controls…
Checkbox Radio group Button, Toggle button
Label Text field Date/time picker
Slider, Text area
ImageView
![Page 23: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/23.jpg)
Custom controls
![Page 24: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/24.jpg)
Architecture
![Page 25: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/25.jpg)
25
60 fps!
![Page 26: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/26.jpg)
Client server architecture
Client Server
Tell the server what to render
Get events back
![Page 27: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/27.jpg)
Client Server
Application
Cascades Tap
React
Scroll list
Fetch data
Do something
else
Start animation
![Page 28: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/28.jpg)
Scene Graph
![Page 29: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/29.jpg)
Scene Graph
Root Container
Text: “Hello World”
Container
Hello World
RotationZ Scale Opacity
![Page 30: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/30.jpg)
In QML
Container { opacity: 0.5 scaleX: 1.5; scaleY: 1.5 rotationZ: 45 ImageView { … } Label { … } }
![Page 31: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/31.jpg)
C++
Container *bubble= new Container(); bubble->setOpacity(0.5f); bubble->setScale(1.5f); bubble->setRotationZ(45); bubble->add(ImageView::create() ... ); bubble->add(Label::create() ... ); …
![Page 32: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/32.jpg)
Animations
![Page 33: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/33.jpg)
Animations
� Translate, rotate, scale, fade � Implicit animations � Explicit animations � Duration, start/end, easing curve � Grouped animations
33
![Page 34: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/34.jpg)
Events
![Page 35: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/35.jpg)
Example
![Page 36: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/36.jpg)
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; } } } }
![Page 37: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/37.jpg)
Layouts
![Page 38: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/38.jpg)
StackLayout & DockLayout
![Page 39: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/39.jpg)
Container { layout: DockLayout {} Cow { horizontalAlignment: HorizontalAlignment.Center verticalAlignment: VerticalAlignment.Top } Cow { horizontalAlignment: HorizontalAlignment.Center verticalAlignment: VerticalAlignment.Center } }
![Page 40: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/40.jpg)
Container { layout: StackLayout { orientation: LayoutOrientation.TopToBottom } Cow { layoutProperties: StackLayoutProperties { spaceQuota: 1 } } Cow { layoutProperties: StackLayoutProperties { spaceQuota: 2 } } }
![Page 41: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/41.jpg)
Custom controls
![Page 42: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/42.jpg)
![Page 43: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/43.jpg)
Container DockLayout
SpeedGauge
RotationZ (-10) RotationZ (-40) TranslationY (30) TranslationY(30)
![Page 44: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/44.jpg)
Lists
![Page 45: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/45.jpg)
List Items
� Prepackaged item types � Header � StandardListItem
� Custom list item � “Anything”
45
![Page 46: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/46.jpg)
Data binding
DataModel
JSON SQL
XML Grouped Array QList custom
![Page 47: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/47.jpg)
UI adaptability
![Page 48: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/48.jpg)
Multiple Form Factors
![Page 49: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/49.jpg)
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
![Page 50: Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10](https://reader036.vdocument.in/reader036/viewer/2022062704/5560cbafd8b42a19088b4bcf/html5/thumbnails/50.jpg)
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