Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intro to QML / Declarative UI

7,452 views

Published on

This talk will give a high level overview about Qml and Declarative UI support on Qt.

Published in: Technology
  • Be the first to comment

Intro to QML / Declarative UI

  1. 1. Intro to QML / Declarative UI Caio Marcelo de Oliveira Filho CampKDE 2010 – San Diego
  2. 2. Who am I? <ul><li>Developer at INdT, a Nokia research institute
  3. 3. openBossa, FOSS stream at INdT
  4. 4. - Qt Kinetic
  5. 5. - Qt WebKit
  6. 6. - Plasma Netbook
  7. 7. - S60 demos
  8. 8. Currently working with trolls on Widgets/QML
  9. 9. One patch to kwin! ;-) </li></ul>
  10. 10. What is QML? Describe trees of objects and properties Item { propertyA: 100 propertyB: 100 children: [ Item { propertyC: 100 }, Item { propertyC: 200 } ] }
  11. 11. What is QML? Describe trees of objects and properties Item { propertyA: 100 propertyB: 100 Item { propertyC: 100 } Item { propertyC: 200 } }
  12. 12. What is QML? Allows embedding ECMAScript code Item { propertyA: 100 propertyB: propertyA + 200 // here onSomeEvent: myFunction() // and here }
  13. 13. Declarative UI using QML Rectangle { id: page width: 500; height: 200 color: &quot;lightgray&quot; Text { id: helloText text: &quot;Hello world!&quot; font.pointSize: 24 font.bold: true y: 30 anchors.horizontalCenter: page.horizontalCenter } }
  14. 14. Declarative UI using QML <ul><li>Animations and effects
  15. 15. “ MouseRegion” object for events
  16. 16. Note: usually people say just QML instead of “Declarative UI using QML” </li></ul>
  17. 17. Analogies <ul><li>EFL: “QML is a kind of Edje for Qt”
  18. 18. Web: “QML is a kind of HTML+CSS”
  19. 19. Qt: “QML is a kind of .ui file from QtDesigner” </li></ul>
  20. 20. Where to use it? <ul><li>Canvas-based applications
  21. 21. - Canola, Weather demo, many mobile apps
  22. 22. - KDM concept using QML
  23. 23. (Small) applications entirely in QML
  24. 24. - Plasma applets
  25. 25. - Logic in ECMAScript (similar to webapps) </li></ul>
  26. 26. Where to use it? <ul><li>More “themeability”
  27. 27. - Not just images / colors / fonts
  28. 28. - The entire view!
  29. 29. Opportunity for designers
  30. 30. - Mockups directly in QML
  31. 31. - Work nearer to developers </li></ul>
  32. 32. Intermission: about designers <ul><li>Graphics designer (think Nuno)
  33. 33. Usability designer (think Celeste)
  34. 34. “ Interaction designer” = Flash mockups :)
  35. 35. (anyone in KDE?)
  36. 36. QML can help the last one a lot </li></ul>
  37. 37. Features of Declarative UI <ul><li>Network transparency
  38. 38. Good integration with C++
  39. 39. HTML5-like APIs, e.g. local storage </li></ul>
  40. 40. Meanings of “QML” <ul><li>Language to describe trees of objects
  41. 41. Language to describe UI of an app
  42. 42. Tool for building small applications
  43. 43. - Assuming a 'qmlviewer' is similar to webapps </li></ul>
  44. 44. End of the Widgets? <ul><li>Widgets too big: Andreas' talk @ GCDS 2009
  45. 45. QML way: simple primitives to build UI
  46. 46. Ability to abstract complex components
  47. 47. Not end, just changing how widgets are built! </li></ul>
  48. 48. Declarative UI project <ul><li>Qt Development Frameworks
  49. 49. Expected for Qt 4.7
  50. 50. - Being developed in qt.gitorious.org
  51. 51. - Clone it, hack it, give feedback! ;-)
  52. 52. More information
  53. 53. - labs.qt.nokia.com
  54. 54. - #qt-labs @ freenode </li></ul>
  55. 55. Thank you! :-)
  56. 56. Caio Marcelo de Oliveira Filho [email_address] http://cmarcelo.org/blog cmarcelo @ freenode irc

×