34
1 Creating Slick User Interfaces With Qt Espen Riskedal / Cutehacks SEE 2010

Creating Slick User Interfaces With Qt

Embed Size (px)

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

Page 1: Creating Slick User Interfaces With Qt

1

Creating

Slick User InterfacesWith Qt

Espen Riskedal / CutehacksSEE 2010

Page 2: Creating Slick User Interfaces With Qt

2

Purpose of this talk

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

Page 3: Creating Slick User Interfaces With Qt

3

Espen Riskedal

Masters from University of Bergen

6 years in Trolltech

2 years in NOKIA

Co-founded Cutehacks AS

Page 4: Creating Slick User Interfaces With Qt

4

Mobile appsSymbian

MeeGo

Android

Page 5: Creating Slick User Interfaces With Qt

5

Agenda

A quick Qt primerThe good and the bad

QWidget

QGraphicsView

Qt Quick

QtWebKit (HTML5)

Conclusion

Page 6: Creating Slick User Interfaces With Qt

6

A quick Qt primer«Which class was

that again?»

Page 7: Creating Slick User Interfaces With Qt

QWidget

QWebView

QDeclarativeView

QGraphicsView

QFrame

QAbstractScrollArea

QPaintDeviceQObject

Page 8: Creating Slick User Interfaces With Qt

8

QWidget QGraphicsView

Qt Quick QtWebKit

Page 9: Creating Slick User Interfaces With Qt

The Good and the Bad

«What do I gainand what do I lose?»

Page 10: Creating Slick User Interfaces With Qt

QWidget

Page 11: Creating Slick User Interfaces With Qt

11

QWidget

Low-level

Painting

Alien widgets

Scrolling

Mature

High-level

Touch interface

Resolution dep.

Style API

Transformations

Good Bad

Page 12: Creating Slick User Interfaces With Qt

Yr.noby cutehacks.com

Flightsby cutehacks.com

Page 13: Creating Slick User Interfaces With Qt

Programming tip #1Hire a designer :)

Page 14: Creating Slick User Interfaces With Qt

Programming tip #2qDrawBorderPixmap (...)

Page 15: Creating Slick User Interfaces With Qt

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

Page 16: Creating Slick User Interfaces With Qt

QGraphicsView

Page 17: Creating Slick User Interfaces With Qt

QGraphicsView

Resolution indep.

Transformations

Lightweight items

Layers

Anchor layouts

Components

Performance

Style API

Good Bad

Page 18: Creating Slick User Interfaces With Qt

Orange Wednesdaysby orange.co.uk

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

Page 19: Creating Slick User Interfaces With Qt

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

Page 20: Creating Slick User Interfaces With Qt

Qt Quick

Page 21: Creating Slick User Interfaces With Qt

21

Qt Quick

Property bindings

Rapid prototyping

Resolution indep.

No compile

Anchor layouts

Components

Memory

Style API

Good Bad

Page 22: Creating Slick User Interfaces With Qt

Work in progressby cutehacks.com

Flickr mobileby qt.nokia.com

Page 23: Creating Slick User Interfaces With Qt

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

Page 24: Creating Slick User Interfaces With Qt

QtWebkit + HTML5

Page 25: Creating Slick User Interfaces With Qt

25

QtWebKit + HTML5

Standard

Cross-platform

Designer friendly

Corporations

Memory

CPU

Immature

Good Bad

Page 26: Creating Slick User Interfaces With Qt

Sencha Touchby sencha.com

Page 27: Creating Slick User Interfaces With Qt

Programming tip #6QGraphicsWebView

Page 28: Creating Slick User Interfaces With Qt

Conclusion

«It depends :-)»

Page 29: Creating Slick User Interfaces With Qt

29

Conclusion

Right now

Custom widgets on top

of QWidget

Page 30: Creating Slick User Interfaces With Qt

30

Conclusion

Near future (Q1 2011)

Qt Quick

Page 31: Creating Slick User Interfaces With Qt

31

Conclusion

A year from now (Q3 2011)

HTML5?

Qt Quick withQt components?

Page 32: Creating Slick User Interfaces With Qt

32

Multi platform

Page 33: Creating Slick User Interfaces With Qt

33

THANK YOU!

Questions?

Page 34: Creating Slick User Interfaces With Qt

34

http://cutehacks.com@snowpong