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.

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

6. - Plasma Netbook

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”