Cascades 101
How To Build Astonishing User Interfaces for
BlackBerry 10
Luca Filigheddu
BlackBerry Developer Evangelist
lf...
Why Use Cascades?
Elegant UI Framework
• Great looking core UI components
• Easy to build custom UI components
• Dedicated...
The NDK – Two layers
High Level – Cascades
High level APIs / C++
Qt + QML + JavaScript
Built-in Elegance, beautiful UI
Pro...
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 serv...
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
...
C++ layer
10
QML
UI structure
JavaScript
Declarative UI model – Declare the
structure of your app, Cascades will piece
it ...
Any mix is possible
11
QML
UI structure
JavaScript
Qt/C++
Base
Moving between QML and C++ is
easy
12
C++
QML
JavaScript
myCppFunction()
myCppFunction {
}
myJSFunction{
}
myJSFunction() ...
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);
App...
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
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
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...
Animations
Animations
Translate, rotate, scale, fade
Implicit animations
Explicit animations
Duration, start/end, easing curve
Groupe...
Events
Demo
Handling Touch Events in QML
Container{
onTouch: {
if (event.isDown()) {
scaleX = 2; scaleY = 2;
rotationZ = 45;
} else if...
Layouts
StackLayout & DockLayout
Container {
layout: DockLayout {}
Cow {
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignme...
Container {
layout: StackLayout {
orientation: LayoutOrientation.TopToBottom
}
Cow {
layoutProperties: StackLayoutProperti...
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”
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)se...
Asset selectors
Based on resolution and/or visual style
assets/
main_screen.qml
dialog.qml
picture.png
icon.png
720x720/
m...
Questions? / Answers!
Feel free to email me:
lfiligheddu@blackberry.com
49
BlackBerry - Cascades 101 - How To Build Astonishing User Interfaces for BlackBerry 10
Upcoming SlideShare
Loading in …5
×

BlackBerry - Cascades 101 - How To Build Astonishing User Interfaces for BlackBerry 10

2,564 views
2,419 views

Published on

Presented at the Israel Mobile Summit 2013
http://www.israelmobilesummit.com

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,564
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
37
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • There are a lot of reasons to use Cascades: Beautiful components, it’s easy, it’s built on Qt and therefore offers a declarative UI approach that helps you get a lot done very quickly. The real-time preview option in the tooling is awesome (more on that later)…Perhaps the most important reason, however, is that Cascades is THE UI framework for BlackBerry 10. We know from experiences (and this is true for all mobile platforms) that applications that integrate with the native Look and Feel of the device do the best in the market. Build your app in Cascades and you’re app will look natural on BlackBerry 10 –an extension of the OS itself.
  • Remember the two layer cake diagram we saw earlier in our tour of the web site. Cascades, the frosting on top, offers a Qt-based, declarative QML interface. You can actually write complete applications in QML and never write any C or C++. You can also embed Javascript. The tools provide a real-time preview of your UI. So, as you code your UI in QML, the UI previewer updates dynamically to show you how your interface would render at that particular moment. This is a very powerful feature.The native And the Native later underneath is Posix compliant which allows you to port your native code from other platforms with confidence. This layer provides all the access to the low-level OS functions (like windowing, networking, etc.). It’s here that game engine developers and other framework providers port their libraries and runtimes. This is where WebKit (the industry standard browser rendering engine) binds to QNX. Same goes for the Android Runtime (the Dalvik VM is implemented here)Let’s take a look at some Cascades QML code…
  • QML is very easy to read and learn.In this code snippet, you can see how a TabbedPane is defined to contain a hierarchy of other items and properties.We’ve defined 2 ActionItems here, “Rotate” and “Break”, both with functions defined to handled “onTriggered” signals.
  • The visual IDE for developing in Cascades (and the NDK in general) is called “Momentics”.Momentics is and Eclipse-based IDE.I’ll walk through the different windows above shortly and describe their main function.
  • Let’s look at the actual components of CascadesThere’s a sample application, called “Cascades Cookbook” that shows examples of all the major pieces and functionality. You’ll see Text entery boxes, sliders, buttons, radio buttons, text labels (single and multi-line). We also provide example apps that demonstrate image rendering, action menus, scrolling lists, and of course, peek.
  • As with BlackBerry OS (our previous Java platform), we offer the BlackBerry Advertising service (which hosts many different ad networks) as well as the BlackBerry Social Platform –this is what you use to make your apps “BBM Connected”.The one in the middle here is a little different in BlackBerry 10. Previously apps could get a launch point from within a core app’s menu. An example of this is BlackBerry Travel’s menu item at the top of the core email app “Add to BlackBerry Travel”. However, with BlackBerry 10, any application can register itself with the OS as providing a particular service –like perform image processing on an image – and then other apps can request the use of your service in a seamless manner. It’s a very powerful app integration capability.
  • A typical Cascades app usually has 3 parts.
  • At the core of the app is the Qt/C/C++ base code. Qt helps provide some structure here for your C++ code. This is where you access all the C++ APIs for the platform services and UI componentsYou also reach all the low-level system facilities and things like OpenGL graphics and OpenAL audio APIs
  • QML provides a declarative model for your UI components. This make defining and laying out your UI objects very simple. You can add runtime logic up here in the UI code as well using JavaScript. Both the QML and the JavaScript are executed/rendered using the realtime UI preview tool in Momentics.Many platform features are available from QML as well –so, you don’t always have to drop down to C/C++ to gain access.
  • Even though Cascades apps typically have these 3 different parts, you don’t need to follow any strict formula.<second stack> Some apps may be mostly QML with a little JS and C++<third stack> You can, of course, have the whole app written in C/C++ (games are often this way)<last stack> You can also have an app that has no C/C++ --it’s all QML for UI definition and JavaScript for logic
  • Another nice feature of these different layers is that you reach each layer from the other, even thought he languages are different.It’s easy to call a C++ function from Javascript.You can call a JavaScript function from C++.You can reference QML properties and QML object assets directly from C++ as well.
  • Simple hello world app with a Label on a Page. What does this look like in QML?
  • A Page defines an individual screen within an application. Set the content of the page to a Label. Set the text property of a Label to “Hello World”
  • Here is the equivalent in C++Note what you have to do in C++ that is implicitly done for you in the declarative QML. Dynamic creation (using “new” keyword, or static “create()” method in the case of the Label)Explicitly set the content of the pageReference the Application Singleton instance and set the scene
  • - So what should you choose?- QML for UI, C++ for business logic- Can be combined- Up to the developer, strengthYou can choose!No difference between UI created in QML or C++They can be combinedTypically, UI in QML and business logic in C++QML supports JavaScript for signal handling
  • The various menus and bars:Tab Menu: Displays a list of tabs to switch between views in the applicationAction Menu: Displays a list of actions available within the context of the page/pane (overflow from the action bar)Page Action Bar: Provides access to Tab menu on the left (if necessary), Action menu on the right (if necessary), and core Actions in the middleContext Menu: Menu specific to a control on the page when it is long-pressed
  • Navigation pane includes a back button automatically when pages/sheets get pushed- Can also “peek” at previous page by swiping on the page from left to right without leaving the top-most page
  • Collection of Controls
  • Possibility to build own controls.Powerful concept of custom controlsThis example is called speedwriterGauge is custom
  • - Client server model to not block the rendering- Once an animation or a list scroll is started, it run- Goodbye to choppy animationsGPU- Cascades is single threaded.Like any other UI toolkit.All internal multithreading is hidden from the developer- All access to every class in the toolkit expects to be executed on Application (UI) threadBlocking of the UI thread won’t cause repaint issues, but still block processing of events
  • User taps the screen and the Application Thread handles the restScrolling a list initiates Fetching the data on the Application threadPoint is to show separation of user interaction and view rendering
  • Discuss the Scene graph, how it is organized, the parent-child relationshipEvents that are detected by a control are also detected up the chain of parents within the Scene Graph, and parents can act upon the event
  • Rotation applied to whole subtreeAny element can be transformed in spacetranslation, rotation, scaleEach node has opacityIf you don’t do transforms, this will not botheryou
  • Properties applied to Container parent also get applied to children (ImageView and Label in this case)
  • Setting container properties in C++. Once the ImageView and Label are added using add(), they become children in SceneGraph and Container properties get applied
  • Why animations? Eye candy. Usability. Draws attention to what is important. (Etc. etc.)“Any Cascades UI element can be animated”What can be animated?Switching layouts animates the children of the control“the layout of a control in a container, such as preferred width and preferred height”Possible to animate character spacing?Implicit animations:Enabled by defaultProperty change triggers animationCan be turned offProperties of an animation: Duration, starting and ending points, and easing curve. (Using different animation classed.)Easing curves: The ones available in the StockCurve class. Characteristics: Interpolation function (animation shape), and velocity (easin/easout functions)Grouped animations: Parallel or sequential
  • Qt uses signals & slots paradigmCascades events are mapped to Qt signals
  • Qt uses signals & slots paradigmCascades events are mapped to Qt signalsDifferent components -> different eventsEg button -> onclickedThere are predefined signals and slots for the built-in controls in the Cascades UI framework. Visit the API documentation at developer.blackberry.com to discover them
  • Three main layout types:StackLayout: Items are stacked on top of each other (by default, configurable) in the order they are declaredOrientation can be changed to BottomToTop, LeftToRight, or RightToLeftDockLayout: Items can be docked in specific regions of the screen.All controls default to top-left corner of containerOrdered from back-to-front in display based on order of declarationAbsolute Layout: Define exact location of each itemGood for gamesDon’t use with Cascades, not good with rotation, resizing, and different form factors/resolutions
  • Docking components on different parts of the Container using DockLayout and Alignment properties
  • UsingSpaceQuota property to provide relative spacing based on a weighting in a stack layout
  • Possibility to build own controls.Powerful concept of custom controlsThis example is called speedwriterGauge is custom
  • Different images are docked on top of each other in a DockLayout using translation. Rotations are used to provide animation of the needle images moving
  • Example of custom list items. Can be simple formatting, or can be a completely different control (like a button)- Can literally be anything. Best to separate into separate QML component and build within a container
  • Easy data bindingQt interfaces using signals and slotsList handles all the logicSlow data sources -> use the power of Qt, threads
  • Quick few slides on developing for different resolutions and form factorsDiscuss the differences between Z10 and Q10, and commitment to 16:9 and 1:1 ratios
  • Leverage the built-in controls as much as possible, because we have made them adaptable to the device the app is running onUse layouts properly and with rotation and different form factors in mind9-sliced images help with re-sizing by breaking down a picture into sections and scaling based on specified instructionsAsset subset using the Asset Selector (next slide)
  • Assets that are named the same as objects in the main assets, and placed in a folder titled 720x720 will be selected for use on Q10Must be using 10.1 SDK
  • BlackBerry - Cascades 101 - How To Build Astonishing User Interfaces for BlackBerry 10

    1. 1. Cascades 101 How To Build Astonishing User Interfaces for BlackBerry 10 Luca Filigheddu BlackBerry Developer Evangelist lfiligheddu@blackberry.com @filos
    2. 2. 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
    3. 3. 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 3
    4. 4. Easy to Read, Declaritive QML 4 Objects Properties Arrays (also properties) JavaScript functions (also properties)
    5. 5. Visual Tooling 5
    6. 6. Standard UI Components 6
    7. 7. 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
    8. 8. A typical Cascades app 8 Qt/C++ Base QML-based UI structure JavaScript-based UI logic
    9. 9. 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
    10. 10. C++ layer 10 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
    11. 11. Any mix is possible 11 QML UI structure JavaScript Qt/C++ Base
    12. 12. 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 {…} }
    13. 13. Controls
    14. 14. Hello World! 14
    15. 15. Hello world import bb.cascades 1.0 Page { content: Label { text: "Hello World" } }
    16. 16. Same thing in C++ Page* root = new Page; Label* label = Label::create() .text("Hello World"); root->setContent(label); Application::instance()->setScene(root);
    17. 17. What to choose? C++ QML
    18. 18. Application structure controls Page Action bar Tab menu Action menu Context menu
    19. 19. Application structure controls “navigation transition” Navigation pane Title bar “peek”
    20. 20. More controls… Checkbox Radio group Button, Toggle button Label Text field Date/time picker Slider, Text area ImageView
    21. 21. Custom controls
    22. 22. Architecture
    23. 23. 23 60 fps!
    24. 24. Client server architecture Client Server Tell the server what to render Get events back
    25. 25. Client Server Application Cascades Tap React Scroll list Fetch data Do something else Start animation
    26. 26. Scene Graph
    27. 27. Scene Graph Root Container Text: “Hello World” Container Hello World RotationZ Scale Opacity
    28. 28. In QML Container { opacity: 0.5 scaleX: 1.5; scaleY: 1.5 rotationZ: 45 ImageView { … } Label { … } }
    29. 29. C++ Container *bubble= new Container(); bubble->setOpacity(0.5f); bubble->setScale(1.5f); bubble->setRotationZ(45); bubble->add(ImageView::create() ... ); bubble->add(Label::create() ... ); …
    30. 30. Animations
    31. 31. Animations Translate, rotate, scale, fade Implicit animations Explicit animations Duration, start/end, easing curve Grouped animations 31
    32. 32. Events
    33. 33. Demo
    34. 34. 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; } } } }
    35. 35. Layouts
    36. 36. StackLayout & DockLayout
    37. 37. Container { layout: DockLayout {} Cow { horizontalAlignment: HorizontalAlignment.Center verticalAlignment: VerticalAlignment.Top } Cow { horizontalAlignment: HorizontalAlignment.Center verticalAlignment: VerticalAlignment.Center } }
    38. 38. Container { layout: StackLayout { orientation: LayoutOrientation.TopToBottom } Cow { layoutProperties: StackLayoutProperties { spaceQuota: 1 } } Cow { layoutProperties: StackLayoutProperties { spaceQuota: 2 } } }
    39. 39. Custom controls
    40. 40. Container DockLayout SpeedGauge RotationZ (-10) RotationZ (-40) TranslationY (30) TranslationY(30 )
    41. 41. Lists
    42. 42. List Items Prepackaged item types  Header  StandardListItem Custom list item  “Anything” 43
    43. 43. Data binding DataModel JSON SQL XMLGroupedArray QList custom
    44. 44. UI adaptability
    45. 45. Multiple Form Factors
    46. 46. 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
    47. 47. 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
    48. 48. Questions? / Answers! Feel free to email me: lfiligheddu@blackberry.com 49

    ×