Qt Developer Days 2009 Keynote - Portable UIs

QML, the future of Qt’s UINew Paradigms for Portable User Interfaces

What Determines a User Interface (UI)

• Graphics Power

• Screen

• Input Method

• Purpose

What Determines a User Interface (UI)

• Graphics Power 2D primitives

• Screen 75dpi

• Input Method keybord, joystick, mouse

• Purpose offline content creation, calculation

15 years ago

What Determines a User Interface (UI)

• Graphics Power animated 3D rendering

• Screen 240dpi

• Input Method keyboard, stylus, touch, accelerometer

• Purpose managing huge amounts of content(online & offline), communication, collaboration, fun

Today

Widget Model

Window

Widget

Widget

Widget

Widget

Widget

Widget

Widget Model

• Widgets are rectangular• Widgets have a parent and optional child widgets• Widgets are clipped to their parent and clip their children• Widgets draw the pixels they are responsible for• Widgets manage their content• Widgets are expensive to show/hide/move/resize • Widgets are (almost) impossible to flip/rotate/stretch

Example 1: A List of Items

Example 1: A List of Items

Widget Model

UIs using widgets are

– Clearly structured / Bulky– Static– Enforcing standard platform look and feel– Very useful for traditional applications

The Future

Widgets

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 directlytogether 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 and effects

• The declarative language itself is simple and intuitive, the rest is JavaScript.

• All the power and freedom of Qt is still available

Live Demonstration

Summary

• QML is a new declarative language extension to Qt• It provides you with all the elements you need to think

about a UI and nothing more• It allows complete concentration on the UI and finding

and solving problems as fast as possible• It’s so simply and intuitive that designers and developers

can work directly together• Programmers: You will never want to code a UI in C++

again• Designers: You will never need to prototype the UI with a

separate technology again