0
The Anatomy of Real World Apps                              Dissecting cross-platform apps written using Qt Quick and C++W...
Marius Bugge Monsen                                     • Co-Founder of Cutehacks                                     • Ei...
• Symbian                  • Symbian                              • Maemo 5                  • Maemo 5                    ...
Wednesday, October 26, 2011
Wednesday, October 26, 2011
The anatomy of your app ?Wednesday, October 26, 2011
User Interface                              Network / Parsing /       Playback /                                RPC     Pr...
QML                              Qt / C++Wednesday, October 26, 2011
QML                              QObject                                        Qt / C++Wednesday, October 26, 2011
QML                                                    Item                              QObject                          ...
What is the state of your app?Wednesday, October 26, 2011
Enter the hero!Wednesday, October 26, 2011
QML                                         State      Item                              QObject   Machine    Models      ...
State A                              “Next”              “Next”                                          ?                ...
State A                              “Next”              “Next”                                          !                ...
“Skeleton, muscle, skin”Wednesday, October 26, 2011
Wednesday, October 26, 2011
Wednesday, October 26, 2011
Tabs                                                                                    Share                             ...
Splash                       Popular                               Screen                       Tracks                    ...
Top Level States                                                    Player                                                ...
Views Screen State                              Top Lists            Search                              This Week        ...
Top Lists State                              Popular                 Fresh                              Tracks            ...
class StateMachine : public QStateMachine        {            Q_OBJECT            Q_PROPERTY(QObject *splashScreenState RE...
...           Q_SIGNALS:               void views();           ...                                                        ...
QHistoryState *viewsScreenHistoryState = new QHistoryState(m_viewsScreenState);            viewsScreenHistoryState->setDef...
Almost there.Wednesday, October 26, 2011
class State : public QState                     {                         Q_OBJECT                         Q_PROPERTY(bool...
State {         name: "splash"         when: stateMachine.splashScreenState.isActive         PropertyChanges { target: spl...
SplashScreen {                                  Timer {                                      interval: 1000               ...
Light at the end of the tunnel.Wednesday, October 26, 2011
Splash                         Popular         Screen                         Tracks                         Top Lists    ...
Splash                         Popular         Screen                         Tracks                         Top Lists    ...
Splash                         Popular         Screen                         Tracks                         Top Lists    ...
Wednesday, October 26, 2011
Wednesday, October 26, 2011
360x640       640x480   480x854Wednesday, 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                con...
QtObject {         ...               // images               property string backgroundImage: "qrc:/images/background.jpg"...
Wednesday, October 26, 2011
import com.meego 1.0            PageStackWindow {                initialPage: Page {                    orientationLock: P...
Wednesday, October 26, 2011
Thank you!                              cutehacks.com                                         Illustrations by Frits Ahlef...
Upcoming SlideShare
Loading in...5
×

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

64,618

Published on

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.

Published in: Technology, Business

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

  1. 1. The Anatomy of Real World Apps Dissecting cross-platform apps written using Qt Quick and C++Wednesday, October 26, 2011
  2. 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. 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. 4. Wednesday, October 26, 2011
  5. 5. Wednesday, October 26, 2011
  6. 6. The anatomy of your app ?Wednesday, October 26, 2011
  7. 7. User Interface Network / Parsing / Playback / RPC Processing OtherWednesday, October 26, 2011
  8. 8. QML Qt / C++Wednesday, October 26, 2011
  9. 9. QML QObject Qt / C++Wednesday, October 26, 2011
  10. 10. QML Item QObject Models Qt / C++Wednesday, October 26, 2011
  11. 11. What is the state of your app?Wednesday, October 26, 2011
  12. 12. Enter the hero!Wednesday, October 26, 2011
  13. 13. QML State Item QObject Machine Models Qt / C++Wednesday, October 26, 2011
  14. 14. State A “Next” “Next” ? State B State C “Next”Wednesday, October 26, 2011
  15. 15. State A “Next” “Next” ! State B State C “Next”Wednesday, October 26, 2011
  16. 16. “Skeleton, muscle, skin”Wednesday, October 26, 2011
  17. 17. Wednesday, October 26, 2011
  18. 18. Wednesday, October 26, 2011
  19. 19. Tabs Share Tracks Toolbar Profile Logo Cover Tracks Player SliderWednesday, October 26, 2011
  20. 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. 21. Top Level States Player Screen Splash Views Screen Screen Artist Info Screen About ScreenWednesday, October 26, 2011
  22. 22. Views Screen State Top Lists Search This Week My PlaylistWednesday, October 26, 2011
  23. 23. Top Lists State Popular Fresh Tracks Tracks Recommended TracksWednesday, October 26, 2011
  24. 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. 25. ... Q_SIGNALS: void views(); ... statemachine.h ... m_splashScreenState->addTransition(this, SIGNAL(views()), m_viewsScreenState); ... statemachine.cppWednesday, October 26, 2011
  26. 26. QHistoryState *viewsScreenHistoryState = new QHistoryState(m_viewsScreenState); viewsScreenHistoryState->setDefaultState(m_topListsViewState); m_viewsScreenState->setInitialState(viewsScreenHistoryState); statemachine.cppWednesday, October 26, 2011
  27. 27. Almost there.Wednesday, October 26, 2011
  28. 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. 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. 30. SplashScreen { Timer { interval: 1000 repeat: false running: true onTriggered: stateMachine.views(); } }Wednesday, October 26, 2011
  31. 31. Light at the end of the tunnel.Wednesday, October 26, 2011
  32. 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. 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. 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
  35. 35. Wednesday, October 26, 2011
  36. 36. Wednesday, October 26, 2011
  37. 37. 360x640 640x480 480x854Wednesday, October 26, 2011
  38. 38. 3.5” 2.46” 3.9”Wednesday, October 26, 2011
  39. 39. Wednesday, October 26, 2011
  40. 40. Wednesday, October 26, 2011
  41. 41. Wednesday, October 26, 2011
  42. 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. 43. QtObject { ... // images property string backgroundImage: "qrc:/images/background.jpg" ... } Theme.qml Image { id: main source: theme.backgroundImage ... } MainWindow.qmlWednesday, October 26, 2011
  44. 44. Wednesday, October 26, 2011
  45. 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
  46. 46. Wednesday, October 26, 2011
  47. 47. Thank you! cutehacks.com Illustrations by Frits Ahlefeldt-Laurvig, HikingArtist.comWednesday, October 26, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×