Intro to QML / Declarative UI

7,118 views

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,118
On SlideShare
0
From Embeds
0
Number of Embeds
52
Actions
Shares
0
Downloads
129
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

×