Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10

1,559 views

Published on

Mobile Tea #6

Published in: Technology, Art & Photos
  • Be the first to comment

Luca Filigheddu - Sviluppiamo in Cascades per Blackberry 10

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

×