Creating Slick User Interfaces With Qt

Preview:

DESCRIPTION

Describes four different ways of creating GUIs in Qt and what their pros and cons are. The different ways are: QWidget, QGraphicsView, Qt Quick and QtWebKit using HTML5. Thanks to Marius, Ariya, Alessandro and Henrik for helping out with it :) First given at SEE2010 in Amsterdam (http://www.see2010.org/)

Citation preview

1

Creating

Slick User InterfacesWith Qt

Espen Riskedal / CutehacksSEE 2010

2

Purpose of this talk

Explain which Qttechnologies to use now,and what to choosein the future.

3

Espen Riskedal

Masters from University of Bergen

6 years in Trolltech

2 years in NOKIA

Co-founded Cutehacks AS

4

Mobile appsSymbian

MeeGo

Android

5

Agenda

A quick Qt primerThe good and the bad

QWidget

QGraphicsView

Qt Quick

QtWebKit (HTML5)

Conclusion

6

A quick Qt primer«Which class was

that again?»

QWidget

QWebView

QDeclarativeView

QGraphicsView

QFrame

QAbstractScrollArea

QPaintDeviceQObject

8

QWidget QGraphicsView

Qt Quick QtWebKit

The Good and the Bad

«What do I gainand what do I lose?»

QWidget

11

QWidget

Low-level

Painting

Alien widgets

Scrolling

Mature

High-level

Touch interface

Resolution dep.

Style API

Transformations

Good Bad

Yr.noby cutehacks.com

Flightsby cutehacks.com

Programming tip #1Hire a designer :)

Programming tip #2qDrawBorderPixmap (...)

Programming tip #3QWidget::scroll(...)Qt::WA_OpaquePaintEvent

QGraphicsView

QGraphicsView

Resolution indep.

Transformations

Lightweight items

Layers

Anchor layouts

Components

Performance

Style API

Good Bad

Orange Wednesdaysby orange.co.uk

Images from http://blog.symbian.org/2010/07/30/building-orange-wednesdays-in-qt/

Programming tip #4QGraphicsItem::setCacheMode()QGraphicsItem::DeviceCoordinateCache

Qt Quick

21

Qt Quick

Property bindings

Rapid prototyping

Resolution indep.

No compile

Anchor layouts

Components

Memory

Style API

Good Bad

Work in progressby cutehacks.com

Flickr mobileby qt.nokia.com

Programming tip #5don't mix too many layers of transparencydon't build too deep hierarchiesdon't put javascript in the critical path

QtWebkit + HTML5

25

QtWebKit + HTML5

Standard

Cross-platform

Designer friendly

Corporations

Memory

CPU

Immature

Good Bad

Sencha Touchby sencha.com

Programming tip #6QGraphicsWebView

Conclusion

«It depends :-)»

29

Conclusion

Right now

Custom widgets on top

of QWidget

30

Conclusion

Near future (Q1 2011)

Qt Quick

31

Conclusion

A year from now (Q3 2011)

HTML5?

Qt Quick withQt components?

32

Multi platform

33

THANK YOU!

Questions?

34

http://cutehacks.com@snowpong