Creating Slick User Interfaces With Qt

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

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/)

Transcript of Creating Slick User Interfaces With Qt

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