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