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 openBossa, FOSS stream at INdT - Qt Kinetic - Qt WebKit - Plasma Netbook - S60 demos Currently working with trolls on Widgets/QML One patch to kwin! ;-)

3. What is QML? Describe trees of objects and properties Item { propertyA: 100 propertyB: 100 children: [ Item { propertyC: 100 }, Item { propertyC: 200 } ] }

4. What is QML? Describe trees of objects and properties Item { propertyA: 100 propertyB: 100 Item { propertyC: 100 } Item { propertyC: 200 } }

5. What is QML? Allows embedding ECMAScript code Item { propertyA: 100 propertyB: propertyA + 200 // here onSomeEvent: myFunction() // and here }

6. 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 }

7. Declarative UI using QML Animations and effects “MouseRegion” object for events Note: usually people say just QML instead of “Declarative UI using QML”

8. Analogies EFL: “QML is a kind of Edje for Qt” Web: “QML is a kind of HTML+CSS” Qt: “QML is a kind of.ui file from QtDesigner”

9. Where to use it? Canvas-based applications - Canola, Weather demo, many mobile apps - KDM concept using QML (Small) applications entirely in QML - Plasma applets - Logic in ECMAScript (similar to webapps)

10. Where to use it? More “themeability” - Not just images / colors / fonts - The entire view! Opportunity for designers - Mockups directly in QML - Work nearer to developers

11. Intermission: about designers Graphics designer (think Nuno) Usability designer (think Celeste) “Interaction designer” = Flash mockups :) (anyone in KDE?) QML can help the last one a lot

12. Features of Declarative UI Network transparency Good integration with C++ HTML5-like APIs, e.g. local storage

13. Meanings of “QML” Language to describe trees of objects Language to describe UI of an app Tool for building small applications - Assuming a 'qmlviewer' is similar to webapps

14. End of the Widgets? Widgets too big: Andreas' talk @ GCDS 2009 QML way: simple primitives to build UI Ability to abstract complex components Not end, just changing how widgets are built!

15. Declarative UI project Qt Development Frameworks Expected for Qt 4.7 - Being developed in qt.gitorious.org - Clone it, hack it, give feedback! ;-) More information - labs.qt.nokia.com - #qt-labs @ freenode

16. Thank you! :-)

17. Caio Marcelo de Oliveira Filho caio.oliveira@openbossa.org http://cmarcelo.org/blog cmarcelo @ freenode irc