Mobile Tea #6

1. Cascades 101
How To Build Astonishing User Interfaces for
BlackBerry 10
Luca Filigheddu
Head of Developer Evangelism EMEA
lfiligheddu@blackberry.com
@filos

2. What is Cascades?
• Qt toolkit
• Cascades replaces QtQuick – QtGui
• UI runs in separate thread
• “Talks” to C++ and vice-versa

3. 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

4. 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

5. Easy to Read, Declaritive QML
Objects
Properties
Arrays (also properties)
JavaScript functions (also properties)
5

6. Visual Tooling
6

7. Standard UI Components
7

8. Cascades APIs
•
•
•
•
•
•
•
•
•
•
•
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
8

9. Cascades – New in 10.2
•
•
•
•
•
•
•
Custom fonts
Screen reader
Headless Applications
GeoFencing
Bluetooth improvements
Peripheral discovery
…MORE…
• à http://bit.ly/cascades102
9

10. A typical Cascades app
JavaScript-based
UI logic
QML-based UI
structure
Qt/C++ Base
10

11. C++ layer
Qt makes C++ easy to use and provides
structure
APIs and platform services exposed as
C++ classes
Qt/C++
Base
UI framework exposed as C++ classes
Access to the underlying low level NDK
and OpenGL
11

12. C++ layer
JavaScript
QML
UI structure
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
12

13. Any mix is possible
JavaScript
QML
UI structure
Qt/C++
Base
13

14. Moving between QML and C++ is
easy
JavaScript
myCppFunction()
myJSFunction{
}
QML
MyObject {
MyProperty: x
}
MyObject {
MyOtherObj {…}
}
C++
myCppFunction {
}
myJSFunction()
class MyClass {
int property;
}
QmlDocument::create
("asset:///main.qml")
14

15. Controls

16. Hello World!
16

17. Hello world
import bb.cascades 1.0
Page {
content: Label {
text: "Hello World"
}
}

18. Same thing in C++
Page* root = new Page;
Label* label = Label::create()
.text("Hello World");
root->setContent(label);
Application::instance()->setScene(root);

19. What to choose?
C++
QML

20. Application structure controls
Tab menu
Page
Action bar
Action menu
Context menu

21. Application structure controls
Title bar
Navigation pane
“navigation transition”
“peek”

22. More controls…
Label
Checkbox
Radio group
Text field
Date/time picker
Button, Toggle button
ImageView
Slider, Text area

23. Custom controls

24. Architecture

25. 60 fps!
25

26. Client server architecture
Client
Server
Tell the server what to render
Get events back

27. Client Server
Application
Cascades
React
Tap
Fetch
data
Scroll
list
Start
animation
Do
something
else

28. Scene Graph

29. Scene Graph
Root
Container
Hello World
RotationZ
Scale
Opacity
Container
Text: “Hello World”

30. In QML
Container {
opacity: 0.5
scaleX: 1.5; scaleY: 1.5
rotationZ: 45
ImageView { … }
Label { … }
}

31. C++
Container *bubble= new Container();
bubble->setOpacity(0.5f);
bubble->setScale(1.5f);
bubble->setRotationZ(45);
bubble->add(ImageView::create() ... );
bubble->add(Label::create() ... );
…

32. Animations

33. Animations
Ÿ
Ÿ
Ÿ
Ÿ
Ÿ
Translate, rotate, scale, fade
Implicit animations
Explicit animations
Duration, start/end, easing curve
Grouped animations
33

34. Events

35. Example

36. 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;
}
}
}
}

37. Layouts

38. StackLayout & DockLayout

39. Container {
layout: DockLayout {}
Cow {
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Top
}
Cow {
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
}
}

40. Container {
layout: StackLayout {
orientation: LayoutOrientation.TopToBottom
}
Cow {
layoutProperties: StackLayoutProperties {
spaceQuota: 1
}
}
Cow {
layoutProperties: StackLayoutProperties {
spaceQuota: 2
}
}
}

41. Custom controls

43. SpeedGauge
Container
DockLayout
RotationZ (-10)
TranslationY (30)
RotationZ (-40)
TranslationY(30)

44. Lists

45. List Items
Ÿ Prepackaged item types
„
„
Header
StandardListItem
Ÿ Custom list item
„
“Anything”
45

46. Data binding
DataModel
Array
Grouped
JSON
XML
QList
SQL
custom

47. UI adaptability

48. Multiple Form Factors

49. 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

50. 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

51. Questions? / Answers!
Feel free to email me:
lfiligheddu@blackberry.com
51