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

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


• 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


The anatomy of your app ?


User Interface

Network / Parsing / Playback /
RPC Processing Other


QML

Qt / C++


QML

QObject

Qt / C++


QML

Item
QObject
Models

Qt / C++


What is the state of your app?


Enter the hero!


QML

State Item
QObject Machine Models

Qt / C++


State A

“Next” “Next”

?
State B State C
“Next”


State A

“Next” “Next”

!
State B State C
“Next”


“Skeleton, muscle, skin”


Tabs
Share

Tracks

Toolbar Profile
Logo

Cover Tracks

Player

Slider


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


Top Level States

Player
Screen

Splash Views
Screen Screen

Artist Info
Screen
About
Screen


Views Screen State

Top Lists Search

This Week My Playlist


Top Lists State

Popular Fresh
Tracks Tracks

Recommended
Tracks


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


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

...
m_splashScreenState->addTransition(this, SIGNAL(views()), m_viewsScreenState);
... 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.


Splash Popular
Screen Tracks

Top Lists

View Recommended
Screen Tracks
This
Week’s
Tracks
Player Fresh
Screen Tracks

Search

Screen Artists

My Playlist

About Search for
Screen Tracks

“Skeleton”


Splash Popular
Screen Tracks

Top Lists

View Recommended
Screen Tracks
This
Week’s
Tracks
Player Fresh
Screen Tracks

Search

Screen Artists

My Playlist

About Search for
Screen Tracks

“Skeleton” “Muscle”


Splash Popular
Screen Tracks

Top Lists

View Recommended
Screen Tracks
This
Week’s
Tracks
Player Fresh
Screen Tracks

Search

Screen Artists

My Playlist

About Search for
Screen Tracks

“Skeleton” “Muscle” “Skin”


360x640 640x480 480x854


3.5” 2.46” 3.9”


#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


QtObject {
...

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

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


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


Thank you!

cutehacks.com

Illustrations by Frits Ahlefeldt-Laurvig, HikingArtist.com


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

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (15)

Más de Marius Bugge Monsen

Más de Marius Bugge Monsen (12)

Último

Último (20)

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