the anatomy of real world apps - dissecting cross-platform apps written using qt quick and c++

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

Wednesday, October 26, 2011

• Co-Founder of Cutehacks• Eight years at Trolltech and Nokia• Main developer of Qt Itemviews• Team lead for Qt Widgets team

Marius Bugge Monsen


• Symbian• Maemo 5• MeeGo Harmattan• Android (experimental)

• Symbian• Maemo 5• MeeGo Harmattan (soon)

• Symbian• Maemo 5• MeeGo Harmattan• Android

• Symbian• MeeGo Harmattan




The anatomy of your app ?


Network /RPC

Parsing / Processing

Playback / Other

User Interface


Qt / C++

QML


Qt / C++

QML

QObject


Qt / C++

QML

QObjectItem

Models


What is the state of your app?


Enter the hero!


Qt / C++

QML

QObjectItem

ModelsState

Machine


State B State C

State A

“Next” “Next”

“Next”

?


State B State C

State A

“Next” “Next”

“Next”

!


“Skeleton, muscle, skin”


Share

Logo

Player

Tabs

Toolbar

Tracks

Slider

Cover Tracks

Profile


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


Views Screen

Player Screen

Artist Info Screen

Top Level States

Splash Screen

About Screen


Top Lists

This Week

Search

My Playlist

Views Screen State


Popular Tracks

Recommended Tracks

Fresh Tracks

Top Lists State


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


...m_splashScreenState->addTransition(this, SIGNAL(views()), m_viewsScreenState);...

...Q_SIGNALS: void views();...

statemachine.h

statemachine.cpp


QHistoryState *viewsScreenHistoryState = new QHistoryState(m_viewsScreenState);

viewsScreenHistoryState->setDefaultState(m_topListsViewState);

m_viewsScreenState->setInitialState(viewsScreenHistoryState);

statemachine.cpp


Almost there.


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


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 }}


SplashScreen { Timer { interval: 1000 repeat: false running: true onTriggered: stateMachine.views(); }}


Light at the end of the tunnel.


SplashScreen

ViewScreen

PlayerScreen

AboutScreen

Top Lists

This Week’sTracks

Search

My Playlist

PopularTracks

FreshTracks

RecommendedTracks

Search forArtists

Search forTracks

Artist InfoScreen

“Skeleton”


SplashScreen

ViewScreen

PlayerScreen

AboutScreen

Top Lists

This Week’sTracks

Search

My Playlist

PopularTracks

FreshTracks

RecommendedTracks

Search forArtists

Search forTracks

Artist InfoScreen

“Skeleton” “Muscle”


SplashScreen

ViewScreen

PlayerScreen

AboutScreen

Top Lists

This Week’sTracks

Search

My Playlist

PopularTracks

FreshTracks

RecommendedTracks

Search forArtists

Search forTracks

Artist InfoScreen

“Skeleton” “Skin”“Muscle”


360x640 640x480 480x854


3.5” 2.46” 3.9”


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


Image { id: main source: theme.backgroundImage ...}

QtObject { ...

// images property string backgroundImage: "qrc:/images/background.jpg" ...}

Theme.qml

MainWindow.qml


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


Illustrations by Frits Ahlefeldt-Laurvig, HikingArtist.com

cutehacks.com

Thank you!


the anatomy of real world apps - dissecting cross-platform apps written using qt quick and c++

Technology

splashscreenstate constantq

popular screen tracks

viewsscreenstate constantq

screen trackswednesday

aboutscreenstate constantq

playerscreenstate constantq

myplaylistviewstate

trackstabstate constantq