ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++

?
?
M
Marius Bugge Monsen

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.

1 of 47
Downloaded 145 times
The Anatomy of Real World Apps Dissecting cross-platform apps written using Qt Quick and C++ Wednesday, October 26, 2011
Marius Bugge Monsen ? Co-Founder of Cutehacks ? Eight years at Trolltech and Nokia ? Main developer of Qt Itemviews ? Team lead for Qt Widgets team Wednesday, October 26, 2011
? Symbian ? Symbian ? Maemo 5 ? Maemo 5 ? MeeGo Harmattan ? MeeGo Harmattan (soon) ? Android (experimental) ? Symbian ? Maemo 5 ? Symbian ? MeeGo Harmattan ? MeeGo Harmattan ? Android ? Symbian ? Symbian ? MeeGo Harmattan ? MeeGo Harmattan Wednesday, October 26, 2011
Wednesday, October 26, 2011
Wednesday, October 26, 2011
The anatomy of your app ? Wednesday, October 26, 2011
User Interface Network / Parsing / Playback / RPC Processing Other Wednesday, October 26, 2011
QML Qt / C++ Wednesday, October 26, 2011
QML QObject Qt / C++ Wednesday, October 26, 2011
QML Item QObject Models Qt / C++ Wednesday, October 26, 2011
What is the state of your app? Wednesday, October 26, 2011
Enter the hero! Wednesday, October 26, 2011
QML State Item QObject Machine Models Qt / C++ Wednesday, October 26, 2011
State A ¡°Next¡± ¡°Next¡± ? State B State C ¡°Next¡± Wednesday, October 26, 2011
State A ¡°Next¡± ¡°Next¡± ! State B State C ¡°Next¡± Wednesday, October 26, 2011
¡°Skeleton, muscle, skin¡± Wednesday, October 26, 2011
Wednesday, October 26, 2011
Wednesday, October 26, 2011
Tabs Share Tracks Toolbar Profile Logo Cover Tracks Player ºÝºÝߣr Wednesday, October 26, 2011
Splash Popular Screen Tracks Top Lists View Recommended Screen Tracks This Week¡¯s Tracks Player Fresh Tracks Screen Search Artist Info Search for Screen Artists My Playlist About Search for Screen Tracks Wednesday, October 26, 2011
Top Level States Player Screen Splash Views Screen Screen Artist Info Screen About Screen Wednesday, October 26, 2011
Views Screen State Top Lists Search This Week My Playlist Wednesday, October 26, 2011
Top Lists State Popular Fresh Tracks Tracks Recommended Tracks Wednesday, October 26, 2011
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
... Q_SIGNALS: void views(); ... statemachine.h ... m_splashScreenState->addTransition(this, SIGNAL(views()), m_viewsScreenState); ... statemachine.cpp Wednesday, October 26, 2011
QHistoryState *viewsScreenHistoryState = new QHistoryState(m_viewsScreenState); viewsScreenHistoryState->setDefaultState(m_topListsViewState); m_viewsScreenState->setInitialState(viewsScreenHistoryState); statemachine.cpp Wednesday, October 26, 2011
Almost there. Wednesday, October 26, 2011
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
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
SplashScreen { Timer { interval: 1000 repeat: false running: true onTriggered: stateMachine.views(); } } Wednesday, October 26, 2011
Light at the end of the tunnel. Wednesday, October 26, 2011
Splash Popular Screen Tracks Top Lists View Recommended Screen Tracks This Week¡¯s Tracks Player Fresh Screen Tracks Search Artist Info Search for Screen Artists My Playlist About Search for Screen Tracks ¡°Skeleton¡± Wednesday, October 26, 2011
Splash Popular Screen Tracks Top Lists View Recommended Screen Tracks This Week¡¯s Tracks Player Fresh Screen Tracks Search Artist Info Search for Screen Artists My Playlist About Search for Screen Tracks ¡°Skeleton¡± ¡°Muscle¡± Wednesday, October 26, 2011
Splash Popular Screen Tracks Top Lists View Recommended Screen Tracks This Week¡¯s Tracks Player Fresh Screen Tracks Search Artist Info Search for Screen Artists My Playlist About Search for Screen Tracks ¡°Skeleton¡± ¡°Muscle¡± ¡°Skin¡± Wednesday, October 26, 2011
Wednesday, October 26, 2011
Wednesday, October 26, 2011
360x640 640x480 480x854 Wednesday, October 26, 2011
3.5¡± 2.46¡± 3.9¡± Wednesday, October 26, 2011
Wednesday, October 26, 2011
Wednesday, October 26, 2011
Wednesday, October 26, 2011
#if defined(Q_OS_SYMBIAN) context->setContextProperty("nhdMode", true); #else context->setContextProperty("nhdMode", false); #endif main.cpp QtObject { property real screenFactor: nhdMode ? 1.0 : 1.33 // geometry property int verticalMargin: 2 * screenFactor ... // fonts property int fontSize: 14 * screenFactor ... } Theme.qml Wednesday, October 26, 2011
QtObject { ... // images property string backgroundImage: "qrc:/images/background.jpg" ... } Theme.qml Image { id: main source: theme.backgroundImage ... } MainWindow.qml Wednesday, October 26, 2011
Wednesday, October 26, 2011
import com.meego 1.0 PageStackWindow { initialPage: Page { orientationLock: PageOrientation.Automatic MainWindow { anchors.fill: parent } } } MeegoWindow.qml #if defined(MEEGO_EDITION_HARMATTAN) viewer.setMainQmlFile(QLatin1String("qml/NRKP3Untouched/MeeGoWindow.qml")); #else viewer.setMainQmlFile(QLatin1String("qml/NRKP3Untouched/MainWindow.qml")); #endif main.cpp Wednesday, October 26, 2011
Wednesday, October 26, 2011
Thank you! cutehacks.com Illustrations by Frits Ahlefeldt-Laurvig, HikingArtist.com Wednesday, October 26, 2011

More Related Content

The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++

  • 1. The Anatomy of Real World Apps Dissecting cross-platform apps written using Qt Quick and C++ Wednesday, October 26, 2011
  • 2. Marius Bugge Monsen ? Co-Founder of Cutehacks ? Eight years at Trolltech and Nokia ? Main developer of Qt Itemviews ? Team lead for Qt Widgets team Wednesday, October 26, 2011
  • 3. ? Symbian ? Symbian ? Maemo 5 ? Maemo 5 ? MeeGo Harmattan ? MeeGo Harmattan (soon) ? Android (experimental) ? Symbian ? Maemo 5 ? Symbian ? MeeGo Harmattan ? MeeGo Harmattan ? Android ? Symbian ? Symbian ? MeeGo Harmattan ? MeeGo Harmattan Wednesday, October 26, 2011
  • 6. The anatomy of your app ? Wednesday, October 26, 2011
  • 7. User Interface Network / Parsing / Playback / RPC Processing Other Wednesday, October 26, 2011
  • 8. QML Qt / C++ Wednesday, October 26, 2011
  • 9. QML QObject Qt / C++ Wednesday, October 26, 2011
  • 10. QML Item QObject Models Qt / C++ Wednesday, October 26, 2011
  • 11. What is the state of your app? Wednesday, October 26, 2011
  • 12. Enter the hero! Wednesday, October 26, 2011
  • 13. QML State Item QObject Machine Models Qt / C++ Wednesday, October 26, 2011
  • 14. State A ¡°Next¡± ¡°Next¡± ? State B State C ¡°Next¡± Wednesday, October 26, 2011
  • 15. State A ¡°Next¡± ¡°Next¡± ! State B State C ¡°Next¡± Wednesday, October 26, 2011
  • 19. Tabs Share Tracks Toolbar Profile Logo Cover Tracks Player ºÝºÝߣr Wednesday, October 26, 2011
  • 20. Splash Popular Screen Tracks Top Lists View Recommended Screen Tracks This Week¡¯s Tracks Player Fresh Tracks Screen Search Artist Info Search for Screen Artists My Playlist About Search for Screen Tracks Wednesday, October 26, 2011
  • 21. Top Level States Player Screen Splash Views Screen Screen Artist Info Screen About Screen Wednesday, October 26, 2011
  • 22. Views Screen State Top Lists Search This Week My Playlist Wednesday, October 26, 2011
  • 23. Top Lists State Popular Fresh Tracks Tracks Recommended Tracks Wednesday, October 26, 2011
  • 24. 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
  • 25. ... Q_SIGNALS: void views(); ... statemachine.h ... m_splashScreenState->addTransition(this, SIGNAL(views()), m_viewsScreenState); ... statemachine.cpp Wednesday, October 26, 2011
  • 26. QHistoryState *viewsScreenHistoryState = new QHistoryState(m_viewsScreenState); viewsScreenHistoryState->setDefaultState(m_topListsViewState); m_viewsScreenState->setInitialState(viewsScreenHistoryState); statemachine.cpp Wednesday, October 26, 2011
  • 28. 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
  • 29. 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
  • 30. SplashScreen { Timer { interval: 1000 repeat: false running: true onTriggered: stateMachine.views(); } } Wednesday, October 26, 2011
  • 31. Light at the end of the tunnel. Wednesday, October 26, 2011
  • 32. Splash Popular Screen Tracks Top Lists View Recommended Screen Tracks This Week¡¯s Tracks Player Fresh Screen Tracks Search Artist Info Search for Screen Artists My Playlist About Search for Screen Tracks ¡°Skeleton¡± Wednesday, October 26, 2011
  • 33. Splash Popular Screen Tracks Top Lists View Recommended Screen Tracks This Week¡¯s Tracks Player Fresh Screen Tracks Search Artist Info Search for Screen Artists My Playlist About Search for Screen Tracks ¡°Skeleton¡± ¡°Muscle¡± Wednesday, October 26, 2011
  • 34. Splash Popular Screen Tracks Top Lists View Recommended Screen Tracks This Week¡¯s Tracks Player Fresh Screen Tracks Search Artist Info Search for Screen Artists My Playlist About Search for Screen Tracks ¡°Skeleton¡± ¡°Muscle¡± ¡°Skin¡± Wednesday, October 26, 2011
  • 37. 360x640 640x480 480x854 Wednesday, October 26, 2011
  • 38. 3.5¡± 2.46¡± 3.9¡± Wednesday, October 26, 2011
  • 42. #if defined(Q_OS_SYMBIAN) context->setContextProperty("nhdMode", true); #else context->setContextProperty("nhdMode", false); #endif main.cpp QtObject { property real screenFactor: nhdMode ? 1.0 : 1.33 // geometry property int verticalMargin: 2 * screenFactor ... // fonts property int fontSize: 14 * screenFactor ... } Theme.qml Wednesday, October 26, 2011
  • 43. QtObject { ... // images property string backgroundImage: "qrc:/images/background.jpg" ... } Theme.qml Image { id: main source: theme.backgroundImage ... } MainWindow.qml Wednesday, October 26, 2011
  • 45. import com.meego 1.0 PageStackWindow { initialPage: Page { orientationLock: PageOrientation.Automatic MainWindow { anchors.fill: parent } } } MeegoWindow.qml #if defined(MEEGO_EDITION_HARMATTAN) viewer.setMainQmlFile(QLatin1String("qml/NRKP3Untouched/MeeGoWindow.qml")); #else viewer.setMainQmlFile(QLatin1String("qml/NRKP3Untouched/MainWindow.qml")); #endif main.cpp Wednesday, October 26, 2011
  • 47. Thank you! cutehacks.com Illustrations by Frits Ahlefeldt-Laurvig, HikingArtist.com Wednesday, October 26, 2011