the anatomy of real world apps - dissecting cross-platform apps written using qt quick and c++
DESCRIPTION
In this talk Marius presents an approach to architecting and implementing apps in Qt Quick and C++ that allows both rapid development and scalability. The talk presents architecture and code for real world, high profile apps that are already available in Nokia Store or are under development.TRANSCRIPT
![Page 1: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/1.jpg)
The Anatomy of Real World AppsDissecting cross-platform apps written using Qt Quick and C++
Wednesday, October 26, 2011
![Page 2: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/2.jpg)
• Co-Founder of Cutehacks• Eight years at Trolltech and Nokia• Main developer of Qt Itemviews• Team lead for Qt Widgets team
Marius Bugge Monsen
Wednesday, October 26, 2011
![Page 3: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/3.jpg)
• Symbian• Maemo 5• MeeGo Harmattan• Android (experimental)
• Symbian• Maemo 5• MeeGo Harmattan (soon)
• Symbian• Maemo 5• MeeGo Harmattan• Android
• Symbian• MeeGo Harmattan
• Symbian• MeeGo Harmattan
• Symbian• MeeGo Harmattan
Wednesday, October 26, 2011
![Page 4: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/4.jpg)
Wednesday, October 26, 2011
![Page 5: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/5.jpg)
Wednesday, October 26, 2011
![Page 6: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/6.jpg)
The anatomy of your app ?
Wednesday, October 26, 2011
![Page 7: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/7.jpg)
Network /RPC
Parsing / Processing
Playback / Other
User Interface
Wednesday, October 26, 2011
![Page 8: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/8.jpg)
Qt / C++
QML
Wednesday, October 26, 2011
![Page 9: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/9.jpg)
Qt / C++
QML
QObject
Wednesday, October 26, 2011
![Page 10: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/10.jpg)
Qt / C++
QML
QObjectItem
Models
Wednesday, October 26, 2011
![Page 11: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/11.jpg)
What is the state of your app?
Wednesday, October 26, 2011
![Page 12: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/12.jpg)
Enter the hero!
Wednesday, October 26, 2011
![Page 13: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/13.jpg)
Qt / C++
QML
QObjectItem
ModelsState
Machine
Wednesday, October 26, 2011
![Page 14: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/14.jpg)
State B State C
State A
“Next” “Next”
“Next”
?
Wednesday, October 26, 2011
![Page 15: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/15.jpg)
State B State C
State A
“Next” “Next”
“Next”
!
Wednesday, October 26, 2011
![Page 16: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/16.jpg)
“Skeleton, muscle, skin”
Wednesday, October 26, 2011
![Page 17: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/17.jpg)
Wednesday, October 26, 2011
![Page 18: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/18.jpg)
Wednesday, October 26, 2011
![Page 19: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/19.jpg)
Share
Logo
Player
Tabs
Toolbar
Tracks
Slider
Cover Tracks
Profile
Wednesday, October 26, 2011
![Page 20: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/20.jpg)
Splash Screen
ViewScreen
Player Screen
About Screen
Top Lists
This Week’s Tracks
Search
My Playlist
Popular Tracks
Fresh Tracks
Recommended Tracks
Search for Artists
Search for Tracks
Artist Info Screen
Wednesday, October 26, 2011
![Page 21: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/21.jpg)
Views Screen
Player Screen
Artist Info Screen
Top Level States
Splash Screen
About Screen
Wednesday, October 26, 2011
![Page 22: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/22.jpg)
Top Lists
This Week
Search
My Playlist
Views Screen State
Wednesday, October 26, 2011
![Page 23: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/23.jpg)
Popular Tracks
Recommended Tracks
Fresh Tracks
Top Lists State
Wednesday, October 26, 2011
![Page 24: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/24.jpg)
class StateMachine : public QStateMachine{ Q_OBJECT Q_PROPERTY(QObject *splashScreenState READ splashScreenState CONSTANT) Q_PROPERTY(QObject *viewsScreenState READ viewsScreenState CONSTANT) Q_PROPERTY(QObject *topListsViewState READ topListsViewState CONSTANT) Q_PROPERTY(QObject *popularTabState READ popularTabState CONSTANT) Q_PROPERTY(QObject *recommendedTabState READ recommendedTabState CONSTANT) Q_PROPERTY(QObject *freshTabState READ freshTabState CONSTANT) Q_PROPERTY(QObject *thisWeekViewState READ thisWeekViewState CONSTANT) Q_PROPERTY(QObject *searchViewState READ searchViewState CONSTANT) Q_PROPERTY(QObject *artistsTabState READ artistsTabState CONSTANT) Q_PROPERTY(QObject *tracksTabState READ tracksTabState CONSTANT) Q_PROPERTY(QObject *myPlaylistViewState READ myPlaylistViewState CONSTANT) Q_PROPERTY(QObject *playerScreenState READ playerScreenState CONSTANT) Q_PROPERTY(QObject *aboutScreenState READ aboutScreenState CONSTANT) Q_PROPERTY(QObject *artistInfoScreenState READ artistInfoScreenState CONSTANT)public: ...}
statemachine.h
Wednesday, October 26, 2011
![Page 25: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/25.jpg)
...m_splashScreenState->addTransition(this, SIGNAL(views()), m_viewsScreenState);...
...Q_SIGNALS: void views();...
statemachine.h
statemachine.cpp
Wednesday, October 26, 2011
![Page 26: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/26.jpg)
QHistoryState *viewsScreenHistoryState = new QHistoryState(m_viewsScreenState);
viewsScreenHistoryState->setDefaultState(m_topListsViewState);
m_viewsScreenState->setInitialState(viewsScreenHistoryState);
statemachine.cpp
Wednesday, October 26, 2011
![Page 27: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/27.jpg)
Almost there.
Wednesday, October 26, 2011
![Page 28: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/28.jpg)
class State : public QState{ Q_OBJECT Q_PROPERTY(bool isActive READ isActive NOTIFY isActiveChanged)public: explicit State(QState *parent = 0); ~State();
bool isActive() const;
Q_SIGNALS: void isActiveChanged();
protected: void onEntry(QEvent *event); void onExit(QEvent *event);
private: bool m_active;};
state.h
Wednesday, October 26, 2011
![Page 29: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/29.jpg)
State { name: "splash" when: stateMachine.splashScreenState.isActive PropertyChanges { target: splashScreen; y: 0 } PropertyChanges { target: viewsScreen; y: main.height } PropertyChanges { target: playerScreen; y: main.height } PropertyChanges { target: aboutScreen; y: main.height } PropertyChanges { target: artistInfoScreen; y: main.height }}
Wednesday, October 26, 2011
![Page 30: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/30.jpg)
SplashScreen { Timer { interval: 1000 repeat: false running: true onTriggered: stateMachine.views(); }}
Wednesday, October 26, 2011
![Page 31: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/31.jpg)
Light at the end of the tunnel.
Wednesday, October 26, 2011
![Page 32: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/32.jpg)
SplashScreen
ViewScreen
PlayerScreen
AboutScreen
Top Lists
This Week’sTracks
Search
My Playlist
PopularTracks
FreshTracks
RecommendedTracks
Search forArtists
Search forTracks
Artist InfoScreen
“Skeleton”
Wednesday, October 26, 2011
![Page 33: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/33.jpg)
SplashScreen
ViewScreen
PlayerScreen
AboutScreen
Top Lists
This Week’sTracks
Search
My Playlist
PopularTracks
FreshTracks
RecommendedTracks
Search forArtists
Search forTracks
Artist InfoScreen
“Skeleton” “Muscle”
Wednesday, October 26, 2011
![Page 34: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/34.jpg)
SplashScreen
ViewScreen
PlayerScreen
AboutScreen
Top Lists
This Week’sTracks
Search
My Playlist
PopularTracks
FreshTracks
RecommendedTracks
Search forArtists
Search forTracks
Artist InfoScreen
“Skeleton” “Skin”“Muscle”
Wednesday, October 26, 2011
![Page 35: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/35.jpg)
Wednesday, October 26, 2011
![Page 36: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/36.jpg)
Wednesday, October 26, 2011
![Page 37: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/37.jpg)
360x640 640x480 480x854
Wednesday, October 26, 2011
![Page 38: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/38.jpg)
3.5” 2.46” 3.9”
Wednesday, October 26, 2011
![Page 39: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/39.jpg)
Wednesday, October 26, 2011
![Page 40: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/40.jpg)
Wednesday, October 26, 2011
![Page 41: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/41.jpg)
Wednesday, October 26, 2011
![Page 42: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/42.jpg)
QtObject { property real screenFactor: nhdMode ? 1.0 : 1.33
// geometry property int verticalMargin: 2 * screenFactor ...
// fonts property int fontSize: 14 * screenFactor ...}
#if defined(Q_OS_SYMBIAN) context->setContextProperty("nhdMode", true);#else context->setContextProperty("nhdMode", false);#endif
main.cpp
Theme.qml
Wednesday, October 26, 2011
![Page 43: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/43.jpg)
Image { id: main source: theme.backgroundImage ...}
QtObject { ...
// images property string backgroundImage: "qrc:/images/background.jpg" ...}
Theme.qml
MainWindow.qml
Wednesday, October 26, 2011
![Page 44: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/44.jpg)
Wednesday, October 26, 2011
![Page 45: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/45.jpg)
import com.meego 1.0
PageStackWindow { initialPage: Page { orientationLock: PageOrientation.Automatic MainWindow { anchors.fill: parent } }}
#if defined(MEEGO_EDITION_HARMATTAN) viewer.setMainQmlFile(QLatin1String("qml/NRKP3Untouched/MeeGoWindow.qml"));#else viewer.setMainQmlFile(QLatin1String("qml/NRKP3Untouched/MainWindow.qml"));#endif
MeegoWindow.qml
main.cpp
Wednesday, October 26, 2011
![Page 46: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/46.jpg)
Wednesday, October 26, 2011
![Page 47: The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++](https://reader034.vdocuments.net/reader034/viewer/2022042521/555ad9bbd8b42a62528b4c42/html5/thumbnails/47.jpg)
Illustrations by Frits Ahlefeldt-Laurvig, HikingArtist.com
cutehacks.com
Thank you!
Wednesday, October 26, 2011