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 teamWednesday, 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 HarmattanWednesday, October 26, 2011

4. Wednesday, October 26, 2011

6. The anatomy of your app ?Wednesday, October 26, 2011

7. User Interface Network / Parsing / Playback / RPC Processing OtherWednesday, 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

16. “Skeleton, muscle, skin”Wednesday, October 26, 2011

19. Tabs Share Tracks Toolbar Profile Logo Cover Tracks Player SliderWednesday, 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 TracksWednesday, October 26, 2011

21. Top Level States Player Screen Splash Views Screen Screen Artist Info Screen About ScreenWednesday, October 26, 2011

22. Views Screen State Top Lists Search This Week My PlaylistWednesday, October 26, 2011

23. Top Lists State Popular Fresh Tracks Tracks Recommended TracksWednesday, 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.hWednesday, October 26, 2011

25. ... Q_SIGNALS: void views(); ... statemachine.h ... m_splashScreenState->addTransition(this, SIGNAL(views()), m_viewsScreenState); ... statemachine.cppWednesday, October 26, 2011

26. QHistoryState *viewsScreenHistoryState = new QHistoryState(m_viewsScreenState); viewsScreenHistoryState->setDefaultState(m_topListsViewState); m_viewsScreenState->setInitialState(viewsScreenHistoryState); statemachine.cppWednesday, October 26, 2011

27. Almost there.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.hWednesday, 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 480x854Wednesday, 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.qmlWednesday, October 26, 2011

43. QtObject { ... // images property string backgroundImage: "qrc:/images/background.jpg" ... } Theme.qml Image { id: main source: theme.backgroundImage ... } MainWindow.qmlWednesday, 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.cppWednesday, October 26, 2011

47. Thank you! cutehacks.com Illustrations by Frits Ahlefeldt-Laurvig, HikingArtist.comWednesday, October 26, 2011