the anatomy of real world apps - dissecting cross-platform apps written using qt quick and c++
Post on 19-May-2015
64.560 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
Wednesday, October 26, 2011
• Symbian• Maemo 5• MeeGo Harmattan• Android (experimental)
• Symbian• Maemo 5• MeeGo Harmattan (soon)
• Symbian• Maemo 5• MeeGo Harmattan• Android
• Symbian• MeeGo Harmattan
• Symbian• MeeGo Harmattan
• Symbian• MeeGo Harmattan
Wednesday, October 26, 2011
Wednesday, October 26, 2011
Wednesday, October 26, 2011
The anatomy of your app ?
Wednesday, October 26, 2011
Network /RPC
Parsing / Processing
Playback / Other
User Interface
Wednesday, October 26, 2011
Qt / C++
QML
Wednesday, October 26, 2011
Qt / C++
QML
QObject
Wednesday, October 26, 2011
Qt / C++
QML
QObjectItem
Models
Wednesday, October 26, 2011
What is the state of your app?
Wednesday, October 26, 2011
Enter the hero!
Wednesday, October 26, 2011
Qt / C++
QML
QObjectItem
ModelsState
Machine
Wednesday, October 26, 2011
State B State C
State A
“Next” “Next”
“Next”
?
Wednesday, October 26, 2011
State B State C
State A
“Next” “Next”
“Next”
!
Wednesday, October 26, 2011
“Skeleton, muscle, skin”
Wednesday, October 26, 2011
Wednesday, October 26, 2011
Wednesday, October 26, 2011
Share
Logo
Player
Tabs
Toolbar
Tracks
Slider
Cover Tracks
Profile
Wednesday, October 26, 2011
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
Wednesday, October 26, 2011
Views Screen
Player Screen
Artist Info Screen
Top Level States
Splash Screen
About Screen
Wednesday, October 26, 2011
Top Lists
This Week
Search
My Playlist
Views Screen State
Wednesday, October 26, 2011
Popular Tracks
Recommended Tracks
Fresh Tracks
Top Lists State
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
...m_splashScreenState->addTransition(this, SIGNAL(views()), m_viewsScreenState);...
...Q_SIGNALS: void views();...
statemachine.h
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
SplashScreen
ViewScreen
PlayerScreen
AboutScreen
Top Lists
This Week’sTracks
Search
My Playlist
PopularTracks
FreshTracks
RecommendedTracks
Search forArtists
Search forTracks
Artist InfoScreen
“Skeleton”
Wednesday, October 26, 2011
SplashScreen
ViewScreen
PlayerScreen
AboutScreen
Top Lists
This Week’sTracks
Search
My Playlist
PopularTracks
FreshTracks
RecommendedTracks
Search forArtists
Search forTracks
Artist InfoScreen
“Skeleton” “Muscle”
Wednesday, October 26, 2011
SplashScreen
ViewScreen
PlayerScreen
AboutScreen
Top Lists
This Week’sTracks
Search
My Playlist
PopularTracks
FreshTracks
RecommendedTracks
Search forArtists
Search forTracks
Artist InfoScreen
“Skeleton” “Skin”“Muscle”
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
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
Wednesday, October 26, 2011
Image { id: main source: theme.backgroundImage ...}
QtObject { ...
// images property string backgroundImage: "qrc:/images/background.jpg" ...}
Theme.qml
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 } }}
#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
Wednesday, October 26, 2011
Wednesday, October 26, 2011
Illustrations by Frits Ahlefeldt-Laurvig, HikingArtist.com
cutehacks.com
Thank you!
Wednesday, October 26, 2011
top related