Simplified Developer Experience with QML

innovateDynamic UIs

QtCreatorCross-platform

performance

Prototyping

OpenGLOpenGL

Transitions

Who are we?

Testers @ Nokia, working on MeeGo middleware

Why are we here?

•Great Technology

•It will make your life easier

•We Love it and we want to share it with you

Window

WidgetWidget

WidgetWidget

WidgetWidget

Widget

Widget

Widget Model

UI’s using widgets are,

• Clearly structured / Bulky

• Static

• Enforce standard platform look and feel

• Very useful for traditional applications

WidgetWidget

WidgetWidget

What do we want? Express a UI the way we think about it: components, views, states,

transitions, animations and effects.

Connect the UI to real data and back-end functionality

Everything should be fast and easy

In fact so easy that also designers can do it (e.g: the sort of people doing Flash, Silverlight and Web)

What do we want? A world where developers and designers work directly together on the same

project

A world where a UI is determined by its usability and not by limitations of the underlying technology.

Meet QML QML is a new declarative language extension to Qt

It maps almost directly to how you should think about a UI: components, views, states, transitions, animations etc

The declarative language itself is simple and intuitive, the rest is javascript

All the power and freedom of Qt is still available

Declarative UI using QML

Rectangle {

id: page

width: 500; height: 200

color: “lightgray”

Text {

id: helloText

text: “Hello World”

font.bold: true

font.pointSize: 24

}

}

Hello World

Example

- simple list based menu with features to launch app, preview app and update it.

-transitions with fluid UI

- 2 persons, 4 hours each

- 350 lines of code

Qt + QML

- Business logic can be written with Qt / C++

- UI layer can be designed with QML

Qt Code QML Great App

Common Questions

• Common Components:

• Currently, many of the standard components like buttons, textboxes etc are missing. But, they are under development.

• Colibri – http://colibri.com

• Performance

• QML is optimized for performance

• Animations, effects etc are generally very fast than what we produce with Qt

Thumbnails

Big picture

Image Viewer Concept