MeeGo Harmattan

Course Introduction

Digia – Who Are We?

● Digia Plc – http://www.digia.com

● Tino Pyssysalo● Senior Software Specialist● Tampere, Finland

Pre-requisites

● We are going to use both in this training

Basics of and QML

“Goal of the training is to get the developers excited for the tools, the device and technologies rather then pure knowledge transfer.”

Course Contents

9:00 Welcome Course introduction

9:15 MeeGo UX UX Concepts

10:45 Coffee Break

11:00 Development Environment Qt Creator 1.1.2, MeeGo 1.2 Harmattan API, Qt, Qt Quick

12:00 Lunch

13:00 SW Development for MeeGo Application Framework, Mobility APIs, demos

16:00 Ovi Store Publication Application Publishing Guidelines

16:30 Round-up

http://www.developer.nokia.com/Devices/MeeGo /

MeeGo Harmattan

MeeGo UX

Agenda

● Introduction to MeeGo● Overall UI Model● MeeGo Application Design● UX Principles● MeeGo Design dos and donts● UI Patterns and Components

Goals

● High-level overview of the UX● Details of User Experience are found in the MeeGo UX

Guideline documentation● http://swipe.nokia.com/

● The presentation does not cover the actual software components what to use, but only represents the expectation level of MeeGo 3rd party UI

● MeeGo is a new platform, which has similarities with other platforms in the market, but it has its own signature UX that should be captured within the application development

What Is MeeGo Harmattan?

N900Maemo 5FremantleUI: Hildon

Debian packaging

N9/N950MeeGo 1.2

Harmattan APIUI: MeegoTouch –

All it takes is a swipeDebian packaging

?MeeGo 1.x

UI: MeegoTouchRPM packaging

“The MeeGo effort will be an ongoing exploration of innovative platform disruptions and next-generation devices, platforms and user experiences.”--Stephen Elop, CEO, Nokia

● Display - 3.9" AMOLED display with curved glass, 16M colors, 854 x 480 pixels screen resolution

● Memory - 16GB/64GB, 1GB RAM● Connectivity - A-GPS, Compass, WLAN 802.11 abgn, micro

USB, BT 2.1, NFC● Audio - MP3 player, 3.5 mm audio jack, Supported codecs:

mp3, AAC, AAC+, eAAC+, WMA, FLAC● Video - Video recording and playback up to 720P, H.263,

H.264, MPEG-4, WMV 9, Matroska● Camera - 8 Megapixel AF camera with

Carl Zeiss optics, dual-LED flash, wide-angle lens

Nokia N9

MeeGo Design Principles

● Simple & Intuitive● Reduce the visual noise, keep things as simple as

possible● No sub-folders in Application Launcher, shallow

navigation● Direct touch and swipe

● Meaningful Personalization● Personalization in smart and dynamic ways, not just

theming

● Speaks My Language● Familiar language that feels approachable and friendly● “The gallery won’t open” vs. “Unable to open gallery”

● Premium Nokia● A luxurious product with beautiful graphics and rich

motion

● Delightful to Use● Brings a smile to your face from first use and again day

after day

MeeGo Harmattan

MeeGo UX – UI Model

Home Screen

The Home screen for MeeGo is comprised of three key views: Notifications, Applicationsand Multitasking.

These views exist adjacent to each other on a single row and can be accessed by horizontally dragging between the screens.

UI Overview

MeeGo Harmattan

MeeGo UX – Application Design

Application Types

● Productivity apps● Deals with more

pragmatic actions, such as sending a text message (clock, calendar, notes)

● Immersion apps● Offers more

entertainment-based or visually rich experiences (camera, gallery, musi/video player)

Company Confidential. ©2010 Nokia

Application Types

● Productivity● Efficiency, simplicity are

important● Drill-down structure● Simple toolbars

highlighting key actions● Tabs showing content

views ● Usually rely more on

common components● Calendar

● Immersion● It is common to use full

views● Customized user

experience● May rely on N9 native

components● It will be the designer’s

responsibility to decide how to represent content, navigation and interactions

● Map browsing

Screen Anatomy ● Status bar and notification banners

● Shows signal strength, time and battery life● Supports access to the Settings Shortcuts menu● Required element for all views except full screen

views● As an event is received or triggered, a Notification

banner should be displayed in place of the Status Bar

● Header Menu● Used to control the main navigation within the

application from the header● Header bar is also an option to consider the

theming of your application

● Content Area● Presents navigation options, text, media, etc.● Actions can also be presented together with the

content

● Action Bar (toolbar)/Tab bar● An optional bar fixed to the bottom of the screen● An optional Tab Bar containing up to five

navigation options is available when a Tool Bar exists

Screen Layouts – Lists

● A list view provides a simple view for large amounts of text- based data that can be navigated vertically

● A range of list view layouts and options accommodate for different requirements

Screen Layouts – Grids

● Visual content such as photos or video are best displayed in a grid view that can be navigated vertically

Screen Layouts – Split Views

● A split view combines a traditional list view with a dynamic view to promote content more visually

Screen Layouts – Full Screen

● For applications that need to provide a more immersive experience, a Full Screen mode is available

● It is important, however, to provide application navigation where needed, as well as a way to exit an application

● As a principle, a Swipe from any edge should exit the application

Navigation within Applications

● Three different patterns

● Filtering with Header Menu

● Drill Down● Tabs

● Some of the UX problems with navigation can be solved with a Sheet Component

Navigation Structures

Navigation within Applications – Header Menu

Navigation within Applications – Tabs

● Quick access between distinct areas or modes

● For applications with a flat navigational structure

● The Basic Tabs bar should only display navigation options (up to a maximum of five)

● Never add the Back button, Action Menu or actions to the bar● Instead, create buttons within the Content area to accommodate these

actions

● Navigation options in an application should not change over time

Navigation within Applications – Drill Down

● The Drill Down is the most scalable navigation model, providing access to an application’s full navigation structure at the top level

● It allows a user to find a desired content item by navigating down the hierarchy of the application’s information structure via categories

● As the user moves down the structure, a Back button becomes available that facilitates navigation to the previous level.

Navigation within Applications - Overlays

● The framework offers different types of overlays that enable the user to respond or provide input and information

● Each type of overlay has its own purpose and is used in a different context

● For example, the Sheet is used for the more complex interactions, while the other are used for simple one click interactions

Highlight Color

● A key visual attribute of all Nokia N9 applications is the highlight color

● Each application owns a unique highlight color for personality and differentiation

● When choosing your application's highlight color, consider aligning it with the primary color of your brand to promote your brand's presence and strengthen your application's identity

Applying Highlight Color

● Highlight color can be applied across a set of components

● Apply your highlight color consistently throughout your application

● Your highlight color will help in the recognition of your application across the various home screens

Icons

● Launcher icons

● In-app icons

● Toolbar icons

http://www.developer.nokia.com/swipe/ux/downloads/NokiaN9_Icon_Guidelines.pdf

MeeGo Harmattan

MeeGo UX – Dos and Donts

Dos and Donts – 1/3

● Keep it simple and easy to use● Make it obvious what your application does and how it

works

● Avoid replication of MeeGo’s core interaction model● Don’t introduce Layer-based, edge-swiping navigation

structure within the application

● This is a touch UI● Consider ergonomics and the size of people’s fingers

when laying out your application and designing controls

● Rely on common components for familiarity, either by using them directly or, when appropriate, changing them in a logical and coherent way

Dos and Donts – 2/3 ● Distribute functions accordingly

● Most important functions are in the action bar, secondary functions in the content area or view menu, and when appropriate, place specific content functions in the object menu.

● Avoid duplication of same function in different views

● Aim to scroll only repeating content● Don’t hide distinct functions below the fold line as people

may not discover them

● Curb your verbosity● Use simple and concise language that users can

understand easily● Be consistent with the framework structure● Ensure that Swipe is available at any time during

application use, always bring the user back to home, and be sure to follow the global navigation rules

Dos and Donts – 3/3

● Be consistent with core interactions● Don’t create conflicting behaviors to those set in the

guidelines, such as confirming actions and using gestures

● It should be possible to revert most actions, so prompts are only used for unexpected events or irreversible things

● Think carefully when your application is an exception to the rules, like the full screen cases

MeeGo Harmattan

UI Patterns and Components

Patterns

● Toolbar● Back always on the left, Action menu on the right● Negative actions on the right

● Dialogues and menus● Query dialog, action menu, object menu

● Sheet● Self-contained full screen view sliding from the bottom● Change context temporarily, e.g. send an email● Sheet buttons always on top

● Completer ● Time and date picker

Company Confidential. ©2010 Nokia

Components

● View headers● With text, icon, action

● Group headers and dividers● Separates groups or

sections

● List items● Text, thumbnail, icon,

frame

● Text fields● Labels● Buttons

● Text, icon and text, dropdown

● Controls● Checkbox, switch, radio

buttons

● Sliders● Tooltip, actions

● Progress bars● Spinners

● In view header, in-content, modal loading, sheet

● System banners● Popup right below the

status bar● Icon and at most three

lines of text

MeeGo Harmattan

Development Environment

Qt SDK 1.1.2

● Combines all Qt development under one SDK!● Can be installed on Windows/Mac OSX/Linux

● Main features:● Qt 4.7.3● Qt Quick 1.0 (1.1 for Harmattan)● QtMobility APIs 1.1.3● Qt Creator 2.2.1● Qt Designer ● Harmattan Emulator● Integrated Cross-Compiler (MADDE)● Simulator ● Package support

Installation

● Note! MeeGo Harmattan target is available in Custom/Experimental installation only

● The driver for USB connectivity is found in (Win) C:\QtSDK\Madde\usbdriver

Targets

● MeeGo 1.2 Harmattan API● MeeGo API + mobility APIs + QtQuick + Qt Quick

Components + some platform APIs

● Harmattan Platform API● Middleware APIs● Build your daemon using D-Bus or GObject interface to

communicate with other components

Emulator

● Uses QEMU● Runs the deivce binary

● Simulator may be useful as well● Easy to test the functionality of

mobility APIs

● Note: May crash, if OpenGL mode is set to autodetect● Change the mode to Software

Rendering

Device Deployment ● Set the phone into Developer Mode

● Settings>Security>Developer Mode

● Connect the USB cable (or WiFi)● Select SDK in the dialog opened in the phone

● Launch SDK Connectivity application ● Create a new device configuration and change the

device configuration in Run settings ● Look at the password and host name in SDK connectivity

Debugging Tools● Run your device in the developer mode and you may run

several debugging tools ● Settings > Security > Developer mode ● Launch apps from the terminal

● latrace● Traces library calls

● strace● Traces system calls

● valgrind ● Memory leaks, heap profiling, cache profiling, call graph

● htop● Process viewer

● Energy profiler● Power consumtpion, mobile IP traffic, CPU activities

MeeGo Harmattan

MeeGo 1.2 Harmattan API

MeeGo 1.2 Harmattan API

● Fully productized set of APIs

● One API reference

● Compatibility Promise (Updates)

● APIs cover most development needs

QMLQt

ComponentsQt

Mobility

QtQt

WebkitQt Sparql

GStreamer Pulseaudio

Open GL ES 1.1/2.0

Resource Policy

Signon Telepathy Qt4

Qm SystemOvi

Notifications Engine

Accounts

Basic Mobile Application

● Network – Location – Maps

● Integrated into Harmattan UX

C++ Wrapper

.des

ktop

icon

QML Files

.pro

QML Qt Components Qt Mobility

Qt Qt Webkit Qt Sparql

GStreamer PulseaudioOpen GL ES

1.1/2.0

Resource Policy

Signon Telepathy Qt4

Qm SystemOvi Notifications

EngineAccounts

Extended Mobile Multimedia Application ● Multimedia– Tracker● Integrated into

Harmattan UX

C++ Wrapper

.des

ktop

icon

QML Files

.pro

.aeg

is

.qrc

.js Files

C++/Qt Logic

QMLQt

ComponentsQt Mobility

QtQt

WebkitQt Sparql

GStreamer PulseaudioOpen GL ES

1.1/2.0

Resource Policy

Signon Telepathy Qt4

Qm System

Ovi Notifications Engine

Accounts

Mobile Game

● Develop on top of standard technologies:● Open GL ES● GStreamer● Pulseaudio

QMLQt

ComponentsQt

Mobility

QtQt

WebkitQt Sparql

GStreamer

Pulseaudio

Open GL ES 1.1/2.0

Resource Policy

Signon Telepathy Qt4

Qm System

Ovi Notifications

EngineAccounts

Platform API

● If the APIs in the Harmattan API are not sufficient, there is the Platform API, which contains an even richer set of API’s, but:

● We don’t give a compatibility promise!

Security Framework

● Applications must announce the possible protected resources they require and provide● Protected resources are listed in the Aegis manifest XML

file

● Qt SDK generates the Aegis manifest file automatically for most protected resources when the app is packaged

● In case of “Access denied” errors or secure services, provided by you app, you have to edit the manifest file manually

● The goal is:● Configurable access control● Integrity checking for all executable files● Protection of sensitive data● Protection of software deployment chain

MeeGo 1.2 Harmattan API

Platform APISEC

UR

ITY F

W

Aegis Manifest File

<aegis> <request> <!-- My first app credentials --> <credential name="Location" /> <for path="/usr/bin/MyApp1 /> </request> <request> <!-- My second app credentials --> <credential name="Cellular" /> <credential name="Location" /> <for path="/usr/bin/MyApp2" /> </request> </aegis>

● Credentials can be seen from @credential tag in the header files● Package component may request or provide credentials

● CAP::capability● UID::user● GID::group

● Cellular● Location● Synchronization

● TrackerReadAccess

● TrackerWriteAccess

MeeGo Harmattan

Qt

What Is Qt?

● C++ application & UI framework● Open source

● Cross-platform● Both desktop and embedded (mobile) systems!● ”Write once, deploy everywhere”

● Integrated cross-platform toolset● QtCreator, QtAssistant, QtDesigner, QtLinguist…

Application UI in Qt

Other

QML/JavaScriptC++

QWidgets Graphics View Qt Quick

QtOpenGL

Platform OpenGL APIs

HTML/JavaScript/CSS

QtWebKit

All these can be mixed in the same app if needed!

What Can You Do with Qt?

The Qt Stack

Desktop OSs

Symbian Maemo/MeeGo

Symbian Linux

Qt Mobility APIs

Linux C/C++libraries

Open C / POSIX

Qt

Symbian C++

UI

Engine

Mobile features

(Qt add-on)

Low level

native access

QtNetworkQtXml

QtGUI

QtCoreQtScript QtSql

QtSvg

QtXmlPatterns

QtOpenGL

Native APIs

QtDeclarative QtWebkit

QtMultimedia

Qt Quick

Qt Components

Latest Features in Qt

New Animation Framework

UI Effects

Multi-Touch and Gesture support

Qt for Symbian

Qt for Maemo/MeeGo

Qt 4.6

Performance Improvements in QtWebKit

Qt Quick

”Qt User Interface Creation Kit”

QML

Qt 4.7(.1)Qt 4.7(.2)

Company Confidential. ©2010 Nokia

Working with Qt SDK 1.1

1. Design UI

2. Code Logic

3. Try in Qt Simulator

4. Plug in device(s) and select target

Company Confidential. ©2010 Nokia

Working with Qt SDK 1.1

1. Design UI

2. Code Logic

3. Try in Qt Simulator

4. Plug in device(s) and select target

Company Confidential. ©2010 Nokia

Qt Programming Characteristics

● Heavily object-based C++

● Hundreds (> 700) of ready-made classes● Class names start with Q● You must not use Q prefix

in your own class names

● High abstraction level

● UIs built from widgets ● UI building block, derived

from QWidget

● Meta-object system● Observer pattern for

object-to-object communication (signals and slots)

● QObject as a common base class

● Parent and child objects● Memory management,

window sharing

● Has similarities to Java● However, is still C++!

Qt Modules

● Qt is split into modules (libraries)● QtCore – Basic types, containers, event loop, application base

class● QtGui – GUI application, widgets, 2D painting● QtWebKit – Web browser functionality embedded into an

application

QtCore

QtGui QtNetworkQtSql QtXml

QtOpenGl QtSvg Qt3Support

Phonon

QtWebKit

QtScript

QtXmlPatternsQtOpenVG

QtMultimedia

QtMobility APIs

Basic Types

● Basic data types in Qt come from standard C++● int, bool, double, char, …

● For strings, use QString● Stores 16-bit QChar types● Use QByteArray for 8-bit data

● Structs and arrays● Dynamic arrays are typically created using QList<T>● QStringList can be used instead of QList<QString>● Other, more specialized container classes also exist

● QVector, QLinkedList, …

QWidget

● The base class for all UI elements in Qt● Take a look at the QWidget reference documentation for details

● Basic QWidgets are quite desktop-oriented● But can be used in mobile applications as well

● However, prefer using Qt Quick and Qt Components in mobile applications

● Especially good for quick prototyping because of Qt Designer

Display Widgets

● Labels (QLabel)● Text Browsers (QTextBrowser)● LCDNumbers (QLCDNumber)● Progress Bar (QProgressBar)● Calendar (QCalendarWidget)● Web View (QWebView)● Graphics View (QGraphicsView)● ...and more…

Input & Selection Widgets

● Push buttons (QPushButton)● Selection buttons (QRadioButton, QCheckBox)● Text input

● Line input (QLineEdit)● Plain text input (QPlainTextEdit)● Plain & rich text input (QTextEdit)

● Spin boxes (QSpinBox)● Dial (QDial)● Scroll bars (QScrollBar)● Sliders (QSlider)● …and more…

Very First Qt Application#include <QtGui/QApplication> #include <QtGui/QLabel>

int main( int argc, char** argv ) { QApplication app( argc, argv );

QLabel label( "Yep, I'm a HelloWorld!" ); label.show(); // or showMaximized() or showFullScreen()

return app.exec(); }

Class QApplication from QtGui Module ● Initializes application settings

● Palette, font● Encapsulates the main event loop QApplication::exec()● Defines application’s look and feel (style)● Provides localization of strings● Knows application’s windows

● widgetAt()● Use global qApp pointer to access QApplication instance in

your code● E.g. calling qApp->quit() closes the application

● Derived from QCoreApplication [QtCore]● Used in console applications or Qt processes without any UI

Building Qt Applications

1. qmake –project● Optional step: creates a Qt project file (.pro). You can

also create this manually or use the one generated by Qt Creator.

2. qmake● Uses the .pro file as input and produces platform-specific

Makefile(s)

3. make● Compiles the program for the current platform● Executes also additional tools, such as moc, uic and rcc

Project

file (.pro) Platformspecific

Makefiles

ApplicationBinarymakeqmake

-projectqmake

QObject

● Heart of Qt's object model● Base class for all object classes● All QWidgets are QObjects also!● Provides object trees and object ownership● QObject's responsibility is to provide a central

location for the most important concepts in Qt

● Has three major responsibilities● Memory Management● Introspection● Event handling

Parent/Child Mechanism

● Each QObject instance may have a parent QObject● Child informs its parent about its existence, upon which the

parent adds it to its own list of children

● If a widget object does not have a parent, it is a window

● The parent widget does the following for its children:● Hides and shows children, when hidden/shown itself● Enables and disables children when enabled or disabled itself

● Note that a child may be explicitly hidden, although the parent is shown

Parent/Child Mechanism

● The ownership of all child QObjects is transferred to the parent● Automatic deletion by the parent● Children must be allocated from the heap with the new

operator!● Manual deletion will not, however, cause double deletion

because the child informs its parent of the deletion

● All QObjects without a parent must be deleted manually● Stack allocation of the parent is a good option to avoid

problems

● Occasionally it may seem like Qt would hold some sort of automatic garbage collection but this is not true!● Always pay attention to ownerships and responsibilities!

Demonstration – Using Qt Creator

● Let’s start by studying how Qt Creator is used for creating new mobile Qt applications

● The SDK contains a simulator tool for mobile targets● Meant for quick testing only!● Not an exact match of any actual device● Provides mechanisms for simulating different kinds of events● Always test on a real device before publishing your application

Qt Meta-Object System

● Qt Meta-Object System extends C++ with dynamic features● Similar to those in Java, for example

● Dynamic features include:● Mechanism to access any function in a class

● Also private ones● Used by signals and slots

● Class information● Type without RTTI (Run-Time Type Information)● Information about base classes

● Translate strings for internationalization● Dynamic properties

How Does It Work?

// In myclass.h:

class MyClass : public QObject { Q_OBJECT // The rest of the class

declaration... };

qmake sees the Q_OBJECT macro and creates code to extend MyClass’s code.

This extension (moc_myclass.cpp) is the Meta-Object!

myclass.cpp

moc_myclass.cpp

Signals and Slots

● Qt’s signals and slots mechanism is one of the features enabled by the Meta-Object System

● It is simply an extremely flexible implementation of the observer pattern● Type safe● Many-to-many connections possible

● Used via the QObject base class

Signals and Slots

Object1

signal1

signal2

Object2

signal1

signal2

Object3

signal1

signal2

Object4

signal1

signal2

slot1

slot2

slot1slot1

slot2

slot3

connect(Object1, signal1, Object3, slot1)

connect(Object1, signal2, Object3, slot2)

connect(Object1, signal2, Object4, slot2)

connect(Object2, signal1, Object4, slot1)

Signals

● A signal is a way to inform a possible observer that something has happened in the observed class● A QPushButton is clicked● An asynchronous service handler has finished● Value of QSlider is changed

● Signals are member functions that are automatically implemented in the Meta-Object● Only the function declaration in the header file is provided

by the developer

● Signal is sent, or emitted, using the keyword emit● emit clicked();● emit someSignal(7, “Hello”);

Slots

● A slot is a function that is to be executed when a signal has been emitted● (When QPushButton is clicked), close QDialog● (When service is ready), ask for the result and store it● (When QSlider value is changed), display it in

QLCDNumber

● A slot function is a normal class member function implemented by the developer● Can be private, protected or public

Signals and Slots In a Class// NewClass.h

class NewClass : public QObject {

Q_OBJECT // Meta-object file needed

signals: // Implementation in the automatically generated Meta-Object

(moc_newclass.cpp) void newSignal(int myInt, QString myString); void anotherSignal();

public slots: // Slots are implemented as normal member functions in NewClass.cpp void newSlot(int i, QString s); void someSlot();

};

Signals and slots must be explicitly connected:

bool success = QObject::connect(senderObject, SIGNAL(valueChanged(int)), observerObject, SLOT(display(int)));

Connecting Signals to Slots

● Signals and slots must be explicitly connectedbool success = QObject::connect(

senderObject, SIGNAL(valueChanged(int)), observerObject, SLOT(display(int)));

● Signal and slot signatures must match● However, a signal may have more parameters than the

corresponding slot● SIGNAL and SLOT macros actually handle function names as

strings● No compile time error checking is made!

● Signals can also be connected to other signals

How to Update a Value Using a Slider?int main( int argc, char** argv ) {

QApplication app( argc, argv );

QWidget window;

QVBoxLayout* layout = new QVBoxLayout( &window );

QLCDNumber* lcd = new QLCDNumber( &window );

QSlider* slider = new QSlider( Qt::Horizontal, &window );

layout->addWidget( lcd );

layout->addWidget( slider );

window.showMaximized();

return app.exec();

} layout

lcd slider

window

Signals

● A signal is a way to inform a possible observer that something of interest has happened inside the observed class

● A QPushButton is clicked● QPushButton::clicked()

● An asynchronous service handler is finished● QNetworkAccessManager::finished( QNetworkReply* reply )

● Value of QSlider is changed (and the new value is informed as a parameter)

● QSlider::valueChanged( int )

● Signals are member functions that are automatically implemented in the meta-object

● Only the function declaration is provided by the developer

● Signal is sent, or emitted, using the keyword emit● emit clicked();● emit someSignal(7, “Hello”);

Slots

● A slot is a function that is to be executed when a signal has been emitted.● (When QPushButton is clicked), close QDialog● (When service is ready), ask for the value and store it● (When QSlider value is changed), display the value in

QLCDNumber

● A Slot function is a normal member function implemented by the developer

Connections

● To receive a signal in a slot, signal and slot must be connectedbool success = QObject::connect(

senderObject, SIGNAL(valueChanged(int)), observerObject, SLOT(display(int)));

● Emitted signal results● In an immediate slot function call, if signal and slot

implemented in objects in the same thread

● Signal and slot signatures must match (signal may have more parameters)● No compile time error checking is made!

Slider Signal Connected to a Slot

int main( int argc, char** argv ) {

QApplication app( argc, argv );

QWidget window;

QVBoxLayout* layout = new QVBoxLayout( &window );

QLCDNumber* lcd = new QLCDNumber( &window );

QSlider* slider = new QSlider( Qt::Horizontal, &window );

layout->addWidget( lcd );

layout->addWidget( slider );

QObject::connect( slider, SIGNAL(valueChanged(int)),

lcd, SLOT(display(int)));

window.showMaximized();

return app.exec();

}

1. Slider is moved (to value 21)

2. emit valueChanged(21)

3. display(21)

Company Confidential. ©2010 Nokia

Events vs. Signals

QPushButton object

1. User presses button in UI

QEvent (mouse press)

Event handler

Hey! I’m

clicked()

Some Object

slot function

Some Object

slot function

Some Object

slot function2. Event is generated and delivered for the corresponding object’s event handler function

3. Pushbutton emits a signal clicked() to ”shout out loud” of the situation

4. Previously connected slot functions get called

Qt Property System

● Data members of QObject-derived classes can be exposed as properties

● Properties are defined in class declarations using the Q_PROPERTY macro:Q_PROPERTY( QString title READ title WRITE setTitle )Q_PROPERTY( bool enabled READ isEnabled WRITE setEnabled )

● Properties can be accessed using base class functions● QObject::property() and QObject::setProperty()● No need to know the exact type of the target object!● If the property named in QObject::setProperty() does not

exist, it will be dynamically added to the object at run-time

● Take a look at QWidget’s properties, for instance!

Qt Property System

// (Simplified) MyObject.h:

class MyObject : public QObject {

Q_OBJECT Q_PROPERTY(QString myText READ text WRITE setText)

public: void setText(const QString& text) { m_text = text; } QString text() const { return m_text; }

private: QString m_text;

};

// Usage in SomeCode.cpp:

MyObject* myObject = new MyObject(); QObject* object = myObject;

myObject->setText(”Some text”); // Access either in the normal way... object->setProperty(”myText”, ”Other text”); // ... or by using the property system

MeeGo Harmattan

Qt Quick

Qt Quick & QML

● ”Qt User Interface Creation Kit”● Declarative UI technology ● Introduced in Qt 4.7.0● QML – ”Qt Meta-Object Language”● QtDeclarative – New C++ module in Qt

● Aimed at designers and developers alike● Drag’n’drop designer tool provided● GIMP & Adobe Photoshop plugins also available

Development Tools

● Qt Creator IDE comes with the Qt SDK● Full QML support with a drag’n’drop designer tool since v2.1

● Qt SDK also contains a qmlviewer.exe tool● Used for quickly previewing a QML/JavaScript UI● Can be used on desktop, Qt Simulator & mobile devices

QML at a Glance – HelloWorld.qmlimport QtQuick 1.0

Rectangle { width: 200; height: 200 color: "lightblue"

Text { id: helloText anchors.horizontalCenter:

parent.horizontalCenter font.pixelSize: parent.height / 10 font.bold: true text: "Meet QML!"

}

Image { id: helloImageanchors.centerIn: parent source: "icons/qt_logo.png"

}

MouseArea { anchors.fill: parent onClicked: { helloImage.visible = false; helloText.text = "Bye-bye picture!";

} } }

It’s simply all about elements, properties and their values!

Import Statement

● Gives you access to the built-in QML elements● Rectangle, Item, Text, Image, …

● Specifies which version of Qt Quick you are using● Notice the syntax change in Qt 4.7.1!

● Guarantees backwards compatibility● Only features of the specified version are loaded

// In Qt 4.7.1 onwards:import QtQuick 1.0

Rectangle { width: 200; height: 200 // ...

// In Qt 4.7.0:import Qt 4.7

Rectangle { width: 200; height: 200 // ...

QML Elements & Propertiesimport QtQuick 1.0

Rectangle { width: 200; height: 200 color: "lightblue"

Text { id: helloText anchors.horizontalCenter:

parent.horizontalCenter font.pixelSize: parent.height / 10 font.bold: true text: "Meet QML!"

}

Image { id: helloImageanchors.centerIn: parent source: "icons/qt_logo.png"

}

MouseArea { anchors.fill: parent onClicked: { helloImage.visible = false; helloText.text = "Bye-bye picture!";

} } }

Each .qml file has exactly one root element

All visual elements inherit the Item element defining certain

common properties:

id, anchorsx, y, z

width, heightopacity, visible, rotation, scale

…

QML elements form a parent/child hierarchy

QML Elements & Propertiesimport QtQuick 1.0

Rectangle { width: 200; height: 200 color: "lightblue"

Text { id: helloText anchors.horizontalCenter:

parent.horizontalCenter font.pixelSize: parent.height / 10 font.bold: true text: "Meet QML!"

}

Image { id: helloImageanchors.centerIn: parent source: "icons/qt_logo.png"

}

MouseArea { anchors.fill: parent onClicked: { helloImage.visible = false; helloText.text = "Bye-bye picture!";

} } }

If more than one property on a line, separate with a semi-colon

A special id property can be assigned to any element

Used for accessing its properties & methods from elsewhere

A special parent property always refers to the element’s

parent

Can be used instead of the id property to refer to the parent

Anchor Layout

● Each visual QML element has ● 6 invisible anchor lines, and● 4 invisible margin lines

● Used for specifying relative positions of items● To remove/clear an anchor, set it to undefined

left right

top

bottom

horizontalCenter

verticalCenter

leftMargin rightMargin

topMargin

bottomMargin

Note! For performance reasons, you can anchor an item only to its direct

parent or siblings

Anchor LayoutRectangle { id: rect1 color: "blue" // ... }

Rectangle { id: rect2 color: "red" anchors.left: rect1.right // ... }

Rectangle { id: rect1 color: "blue" // ... }

Rectangle { id: rect2 color: "red" anchors.left: rect1.right anchors.leftMargin: 5 // ... }

Rectangle { id: rect1 color: "blue" // ... }

Rectangle { id: rect2 color: "red" anchors.left: rect1.right anchors.top: rect1.bottom // ... }

Basic Positioners

Column { spacing: 2 Rectangle { color: "red"; width: 50; height: 50 } Rectangle { color: "green"; width: 20; height: 50 } Rectangle { color: "blue"; width: 50; height: 20 } }

Row { spacing: 2 Rectangle { color: "red"; width: 50; height: 50 } Rectangle { color: "green"; width: 20; height: 50 } Rectangle { color: "blue"; width: 50; height: 20 } }

Basic Positioners

Grid { columns: 3 spacing: 2 Rectangle { color: "red"; width: 50; height: 50 } Rectangle { color: "green"; width: 20; height: 50 } Rectangle { color: "blue"; width: 50; height: 20 } Rectangle { color: "cyan"; width: 50; height: 50 } Rectangle { color: "magenta"; width: 10; height: 10 } }

Column { spacing: 2 Rectangle { color: "red"; width: 50; height: 50 } Row { spacing: 2 Rectangle { color: “yellow"; width: 50; height: 50 } Rectangle { color: “black"; width: 20; height: 50 } Rectangle { color: "blue"; width: 50; height: 20 } } Rectangle { color: "green"; width: 20; height: 50 } }

Event Handling – Signals

● In Qt certain kinds of events are delivered as signals● In Qt/C++ a slot function is needed to react to these events

● In QML a special signal handler property is used instead● The needed property depends on the signal source● Mouse click, timer event, key press, custom signal, …

● In this section we will concentrate on MouseArea● I.e. handling signals generated by mouse click events● On touch screen devices this is the same as touch events

● For key event handling use Keys and KeyNavigation● See Qt Quick documentation for details

MouseArea – Basic Usage

● MouseArea provides a number of signals● onClicked, onPressed, onReleased, onPressAndHold, ...

● By default reacts to left button clicks and touch events● Set acceptedButtons property to change this behavior

Rectangle { width: 200; height: 200

MouseArea { anchors.fill: parent // Can be freely sized/positioned like any

other elementonClicked: { // Signal handler for the clicked

signal

console.log(mouse.x); // MouseEvent object called mouse delivered with the

console.log(mouse.y); // signal (click position, keyboard modifiers, etc.) parent.visible = false;

} } }

Animations

● Here is a rather complex first example● Still very easy to understand, right?

Rectangle { id: rect; width: 120; height: 300; Image {

id: img source: "face-smile.png" anchors.horizontalCenter: parent.horizontalCenter

SequentialAnimation on y { id: anim running: true; loops: Animation.Infinite NumberAnimation {

to: 300-img.height; duration: 2000; easing.type: Easing.OutBounce

} PauseAnimation { duration: 1000 } NumberAnimation {

to: 0; duration: 1000; easing.type: Easing.OutQuad } }

} }

Custom Component Example

// MyButton.qmlimport Qt 4.7

Rectangle { width: 100; height: 30 radius: 10 opacity: 0.5; color:

"yellow" Text {

id: myText

anchors.centerIn: parent font.pixelSize:

16 font.bold: true text: "Click

me!" } MouseArea {

anchors.fill: parent

onClicked: { //

TODO: //

Handle click}

} }

// Components.qmlimport Qt 4.7

Rectangle { id: mainRect width: 150; height: 150 color: "black"

MyButton { anchors.centerIn:

parent }

MyButton { anchors.top:

parent.top

anchors.horizontalCenter:

parent.horizontalCenter }

MyButton { anchors.bottom:

parent.bottom

anchors.horizontalCenter:

parent.horizontalCenter }

}

Model/View

● Qt uses a Model/View pattern for presenting data● Rather like MVC pattern where view and controller are combined

● QML provides new model and view elements● QML views allow more flexibility than C++ views● You can use either QML or C++ models with QML views

● For more background information, see Qt documentation:

Model/View Components

ListModel { ListElement {

title: "Pancakes" picture:

"pancakes.jpg" } ListElement {

title: "Fruit Salad"

picture: "fruit.jpg" } ListElement {

title: "Vegetable Soup"

picture: "vegetable.jpg" } ListElement {

title: "Hamburger" picture:

"hamburger.jpg" } ListElement {

title: "Lemonade" picture:

"lemonade.jpg" } }

// Simplified code:Row { Image {

source: picture } Text {

text: title }}

ModelThe data source

ViewOrganizes the data for display

DelegateRenders each data item

Model/View Example

● MyModel.qml● Simple ListModel for the data

● ModelView.qml● ListView for displaying the data● Delegate & highlight components

ListModel { id: contactModel ListElement {

name: "Bill Smith"

number: "555 3264"

} ListElement {

name: "John Brown"

number: "555 8426"

} ListElement {

name: "Sam Wise"

number: "555 0473"

} }

Model/View ExampleRectangle { width: 180; height: 200; color: "green"

Component { id: delegate Item { id: wrapper; width: 180; height: 40 Column {

x: 5; y: 5 Text { text: '<b>Name:</b> ' +

name } Text { text: '<b>Number:</b> ' +

number } } }

} Component { id: highlight

Rectangle { color: "lightsteelblue"; radius: 5 }

} ListView {

anchors.fill: parent model: MyModel{}

delegate: delegatehighlight: highlight

} }

Delegate is quite often defined as an inline component in the same

file where the view is

It can also be placed in a separate file, the same way as the model

A highlight component can be used to highlight the currently

selected item

The view needs a reference to the model and delegate (and highlight

if it used)

View Elements

ListViewVertical or horizontal list of items

GridViewGrid of items

PathViewItems placed along a freely

specifid path

MeeGo Harmattan

QML and C++ Integration

Using QObjects from QML

● QObjects are accessible from QML code● All things specified in meta-data of QObject can be

seen in QML● Signals● Slots● Properties

Steps to Expose QObjects

Assuming the QObject has a well defined (Qt-like) interface consisting signals, slots, and properties the steps are straightforward

1. Refer to a context, QDeclarativeContext, in the QML engine, or QDeclarativeEngine

2. Set the context property● In other words, give a name for your instance of QObject

derived class

Example: Class Header

class MyCounter : public QObject{ Q_OBJECT Q_PROPERTY(int currentValue READ currentValue WRITE setValue NOTIFY currentValueChanged)

public: explicit MyCounter(QObject *parent = 0);

signals: void currentValueChanged();

public slots: void reset(); void increaseCounter();

public: void setValue(int value); int currentValue() const;

protected: int counter;

};

Example: Implementation

void MyCounter::increaseCounter(){ const int valueNow = currentValue(); setValue(1 + valueNow);}

void MyCounter::setValue(int value){ counter = value; emit currentValueChanged();}

int MyCounter::currentValue() const{ return counter;}

int main(…) { … QDeclarativeEngine* engine = view.engine(); QDeclarativeContext* context = engine->rootContext();

MyCounter counter; context->setContextProperty("theCounter", &counter);}

Using QObject from QML

● Properties of Qobject can be accessed in the same way as QML properties

● The update signal of a property is required to QML runtime to notice the change of the property

● Any slot function can be called from QML/Javascriptimport Qt 4.7Rectangle { id: theWindow width: 200; height: 200 Text { anchors.centerIn: theWindow text:"The counter="+theCounter.currentValue } MouseArea { anchors.fill: parent onClicked: { theCounter.increaseCounter() } }}

MeeGo Harmattan

Application Framework

Application Framework

QtDeclarative

Qt Components

C++ Business Logic

QML User-Interface

JS Environment QML Primitives

MeeGo Plug-ins

Mobility Plug-ins

Application Plug-ins

Application

Qt Quick Components

● Component library allowing the creation of user-interfaces of a Qt Quick application from a set of ready UI components● Window (PageStackWindow)● PageStack● Page● TabGroup● ToolbarLayout (toolbar)● TextArea (TextField)● Sheet● Screen● SelectionDialog, QueryDialog, Dialog● Buttons (Radio, Sheet, Tool)● ScrollDecorator

Application Structure ● Window

● Main container for Qt components● Typically one in the application● Provides several orientation change signals● User navigates between the pages● Use the sub-element PageStackWindow to provide a frame

for the application

● Page● Has status (active/inactive)● May have a page-specific toolbar and menu

● PageStack● Implements common navigational patterns● Pages are pushed and popped from the stack● User can use right (previous page) and left (next page)

swipe to navigate between pages

Navigational Patterns● Identify your application type● Productivity

● Pragmatic tasks, such as sending a message● Simple, intuitive, typically drill-down and simple toolbar

pattern● Often using Qt Quick components

● Immersion● Entertaining or visually rich UI● Video player, map player, games● Typically, full screen● Possibly, customized layout and controls● Application menu pattern

● Flat experience

Simple Application UI – Window import QtQuick 1.1 import com.meego 1.0

PageStackWindow { id: appWindow initialPage: mainPage MainPage {id: mainPage}

ToolBarLayout { id: commonTools visible: true ToolIcon { platformIconId: "toolbar-view-menu"; anchors.right: parent===undefined ? undefined : parent.right onClicked: (myMenu.status == DialogStatus.Closed) ? myMenu.open() : myMenu.close() } }}

Simple Application UI – Page import QtQuick 1.1 Import com.nokia.meego 1.0

Page { id: mainPage anchors.margins: rootWindow.pageMargin

function openFile(file) { var component = Qt.createComponent(file) if (component.status == Component.Ready) pageStack.push(component); else console.log("Error loading component:", component.errorString()); } // Page content MouseArea { id: mouseArea anchors.fill: background // Note this element is not shown in the example (page content) onClicked: { listPage.openFile(page) }}

Page Navigation// Pages can be created using any elementExamplePage { id: examplePage greeting: "Hello World!" } // orComponent { id: examplePage ExamplePage { greeting: "Hello World!" } }

// It is possible to provide property bindings, when a page is created pageStack.push(examplePage, { foo: bar, foz: baz });

// If Component element is used, an Item is created and // destroyed automatically

// If any other element type is used (Item), then the owenership// is changed and returned when the page is pushed and // popped

Page Navigation – Lazy Loading// In case you have multiple pages, you should consider lazy loading of pagesPage { id: root anchors.margins: 0 Item { id: container } property Item containerObject;

onVisibleChanged: { if (visible) { var object = componentDynamic.createObject(container); containerObject = object; } else { containerObject.destroy(); } }

Component { id: componentDynamic Item {

Element – ContextMenu PageStackWindow { id: rootWindow initialPage: Page { Rectangle { id: contextColorRect anchors.centerIn: parent width: 100; height: 100 color: "black" MouseArea { id: longPressArea anchors.fill: parent onPressAndHold: myContextMenu.open() } }

ContextMenu { id: myContextMenu MenuLayout { MenuItem { text: "Red"; onClicked: { contextColorRect.color = "darkred" } } } }

Styling and Theming

● Qt Quick components provide a system-specific common look-and-feel

● However, the components themselves do not provide a common LAF

● Use system-specific constants● Elements have style attribute

● Menu => MenuStyle● Platform-dependent style

● There is a theming daemon● Shares the most common graphics and icons between

apps● Do not consume app memory

import "UIConstants.js" as UIConstants

UIConstants.DEFAULT_MARGINUIConstants.BUTTON_SPACINGUIConstants.HEADER_DEFAULT_HEIGHT_PORTRAIT UIConstants.HEADER_DEFAULT_HEIGHT_LANDSCAPE

UIConstants.FONT_XLARGE // 32 px UIConstants.FONT_XSMALL // 18 px UIConstants.FONT_SLARGE // 26 px UIConstants.FONT_DEFAULT // 24 px UIConstants.FONT_LSMALL // 22 px

BorderImage { source: "image://theme/meegotouch-list-background-pressed-center" }

MeeGo Harmattan

Mobility APIs

QtMobility APIs

Out-of-Process

Camera

Landmarks, Maps,Navigation

Service Framework

Publish&Subscribe

Messaging

Contacts

Bearer Management(to QtNetwork in 4.7)

Versit

Sensors

Multimedia

System InformationLocation

Organizer

Document Gallery

Feedback

1.0.2 1.1 (Qt SDK)

Local Connectivity

(BT, NFC)

1.2 (Tech Preview)

Augmented Reality?

Face Recognition?

QML Bindings

QML QtMobility API Bindings

Note: some APIs are still under development – subject to

change!

Location API and Mapimport QtQuick 1.0 import QtMobility.location 1.1

Item { width: 500; height: 500; focus: true Map {

id: map

plugin: Plugin { name : "nokia" }

size.width: parent.width size.height: parent.height

zoomLevel: 12

center: Coordinate { latitude:

61.4979781 longitude:

23.7649307 }

MapCircle{ center: Coordinate

{

latitude: 61.4979781

longitude: 23.7649307 } radius: 1000.0

} }

}

Import the API you need…

…and use it the QML way!

Location API and MapItem { ... Map { id: map; ... } MyButton {

text: "Street Map"MouseArea {

onClicked: map.mapType = Map.StreetMap;}

} MyButton {

text: "Satellite" MouseArea { onClicked: map.mapType =

Map.SatelliteMapDay; }

} MyButton {

text: "Zoom Out" MouseArea { onClicked: map.zoomLevel -= 1; }

} MyButton {

text: "Zoom In"MouseArea { onClicked: map.zoomLevel += 1; }

}}

Notes on the Location API

● Current implementation always downloads maps from the Ovi Maps server● Does not utilize maps installed on device for the the Ovi

Maps application

● To get information about user’s current location, use the PositionSource QML element● Gives you latitude and longitude you can pass to the Map

● Also provides altitude and speed information

● See the Location API documentation & sources for details & examples

MeeGo Harmattan

Ovi Store Publication

Ovi Store Entry Requirements – 1

● What can be published?● Active content● Passive content, like wallpaper

● Run tests● Installation

● Proper package name and version● Installation, launch, termination, and uninstallation

● Functional● Content item does not crash or hang ● Nokia branding guidelines (no excessive violence,

swearing, alcohol drinking, racism, …) ● Application UI should be accessible during phone calls

Ovi Store Entry Requirements – 2 ● Robustness

● Content item must not interfere with system and other apps

● Interruptions must be properly handled while the app is running

● Input fields must provide a virtual keyboard (portrait / landscape)

● Swipe interaction principles must be followed

● Co-existence● Follow the connection creation logic defined by the user● Follow the offline profile● Does not interfere with voice calls● User must not be prevented to make emergency calls

● Usability● Large enough UI elements for finger usage

● Performance● Lights off, CPU in low-power mode

Course Summary

● QtCreator 1.1.2 now supports Harmattan target as well

● Plenty of debugging/profiling tools on the device● MeeGo 1.2 Harmattan API provided

● MeeGo API (Qt), Moility APIs, Qt Quick, Qt Components● Qm system, Qt sparql, Qt4 telepathy etc.● Security framework

● Applications written in QML using Qt Components● Stylable, themable ● OpenGL, QtWebKit, and Qt can be used as well

● Application logic with C++/C● Using Qt APIs, mobility APIs or platform APIs