Intro to QML / Declarative UI Caio Marcelo de Oliveira Filho CampKDE 2010 – San Diego

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! ;-)

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

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

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

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 }

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

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”

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)

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

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

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

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

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

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

Thank you! :-)

Caio Marcelo de Oliveira Filho freenode irc