Introduction to QML for Meego - Universitas...

Introduction to QML for Meego

1

Valerie Tai

Technical Services Manager

Nokia, Southeast Asia & Pacific

2

Nokia Platforms - Development Options

Native applications (Qt)

Web Apps (HTML)

Java Applicationss

Phones Series 40

Smartphones Symbian

Smartphones MeeGo / Maemo

3

What is Qt?

© 2011 Nokia Company Confidential 10/25/2011

4 © 2011 Nokia Qt App Development v. 3.4.3 September 30, 2011 Andreas Jakl

Multi Platform App Development

Operating System Symbian, MeeGo, Windows, Mac OS, Linux

Native apps Use operating system and its functions directly

(different code for networking, GPS, etc.)

Multi Platform App Development

5 © 2011 Nokia Company Confidential 10/25/2011

Operating System Symbian, MeeGo, Windows, Mac OS, Linux

Native apps Use operating system and its functions directly

(different code for networking, GPS, etc.)

Your App

Qt framework Same code works on all platforms, covers many usecases (GPS, etc.)

(if needed, direct access is still possible)

What is Qt?


Developer App Source Code

Using Qt SDK for – Dev. environment – Testing – Translation – Help

Using Qt framework for – User Interface – Networking – Location (GPS) – Web integration – ...

Publish to – Nokia Store (Symbian, MeeGo) – Windows – Linux – Mac – Embedded

Qt – What’s Inside?


• Cross-Platform − Same source code for multiple

platforms − Maximum performance – native

apps!

• Generic − User Interface − Declarative UI, animation, gestures,

multi-touch, 3D (OpenGL) − WebKit & JavaScript engine included − Multimedia (audio, video) − Networking, XML − SQL, files, app settings − Container classes, object

communication, threading, unit testing

Mobile focus Location, Maps Sensors Messaging (SMS, email) Contacts, Calendar Camera System information Haptics (vibration)

Extend Include any 3rd party C++ library / code

23 modules, ~ 800 classes,

~ 9000 functions

Qt: On Your PC already!


… and many, many more!

9

Qt – How?


Developer Environment Setup


• Qt SDK 1.1.3 −One-click installation

− IDE, toolchains, documentation, examples

−http://developer.nokia.com/Qt

Symbian

Qt SDK works on

Windows, Linux, Mac

Maemo

Simulator Desktop

MeeGo

http://developer.nokia.com/Qt

http://developer.nokia.com/Qt

Introduction to Qt SDK

11

http://www.developer.nokia.com/Develop/Qt/Tools/

Qt development for Symbian, Maemo, MeeGo

and Desktop

1 installer package

• Windows, Linux and Mac (online and offline)

• Qt Creator 2.3.1

• Qt Simulator 1.2 (UI gesture, NFC tags)

• Qt 4.6.3 and Qt 4.7.3

• Qt Quick 1.0 (1.1 for Harmattan)

• Qt Mobility 1.1.3 (1.2 for Harmattan)

• Beta support for Symbian Belle

• Remote Compiler for S60

• Smart Installer for S60


http://www.developer.nokia.com/Develop/Qt/Tools/

Qt SDK 1.1.3 Custom Installation

12

Not upgradable from Qt SDK 1.0

Select Custom during installation

And check Experimental (for Harmattan)


Installation Note: To install on an Apple Mac, xCode is required.

13

The MeeGo Platform


• Open Source Linux for Mobile

Computers

– Based on Maemo and MobLin

– Developed by Nokia and Intel

– Hosted by the Linux Foundation

– www.meego.com

• Nokia N9

– MeeGo 1.2 Harmattan

14 © 2011 Nokia Qt App Development v. 3.4.3 September 30, 2011 Andreas Jakl

Netbook

Connected TV

Handset

Media Phone In-Vehicle

http://www.meego.com/

Maemo/MeeGo Platforms

15

N900

Maemo5

Fremantle

UI: Hildon

Debian packaging

(*.deb)

N9

MeeGo 1.2

Harmattan

UI: MeeGoTouch

Debian packaging

(*.deb)

MeeGo 1.1

UI: MeeGoTouch

RPM packaging

(*.rpm)

Introduction to N9/N950

16 © 2011 Nokia Company Confidential

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

•UX guideline

•Report bugs

•Flash N950

•Specifications of N9

•Download SDK

•Online library to search for help

•Application publishing guideline

10/25/2011

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

Comparing N9 and N950

17

N950


N9

• Physically larger, aluminum

• Slide-out QWERTY keyboard

• 4” TFT LCD display

• front camera on top right corner (same camera module)

• No NFC

• 1320mAh battery

• Physically smaller, polycarbonate unibody.

• Pure touch-screen device

• 3.9” AMOLED display

• front camera on bottom right corner (same camera module)

• Supports NFC

• 1450mAh battery

• N9 has slightly more sensitive magnetometer and ALS

• Display resolution is same on both devices (854x480). Due to the use of different display technologies, developers should avoid one pixel with fonts and graphical objects with lines one pixel wide. Also avoid the extensive use of bright colors, especially white, when developing for OLED displays as this increases the power consumption (typical for OLED displays).

• N950 has a different physical camera module than N9. Both camera modules have very similar image quality (Carl Zeiss branding in N9) and both modules support 8Mpix image mode.

Differences Notes

18

MeeGo UX Overview


Company Confidential


Nokia N9 UI

http://www.developer.nokia.com/swipe/ux/



Hardware • 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



Guiding Principles • Simple Interaction

– Swipe from any edge

– No hardware and software buttons on screen

– Designed for one hand use

– “Open applications” screen for recently accessed

content



Visual Principles • Simple, Intuitive and Delightful

– Reduce visual noise (keep things simple!)

– Personalization in smart and dynamic ways

– Familiar language that feels approachable and friendly;

– Luxurious product, beautiful graphics, rich motion



Home Screens

• Home contains 3 key views : Events, Applications, Open Applications

• Swipe to navigate between the 3 views



Application Basic View • Status Bar and Notifications Banner

• Signal strength, time battery life

• Access to Settings Shortcuts menu

• Required for all views except full

screen

• Header Bar

• Optional bar at top of screen

• Content Area

• App content area

• Navigational components:

• Toolbar

• Tab Bar

25

Setting up Qt Creator and MeeGo Test Device


Qt SDK 1.1.3 Custom Installation

26

Not upgradable from Qt SDK 1.0

Select Custom during installation

And check Experimental (for Harmattan)


Installation Note: To install on an Apple Mac, xCode is required.

Harmattan Emulator

27

• QEMU

• Note: May crash, if OpenGL mode is set to autodect

• Change to Software Rendering

(Tools > Options > Linux Devices > Qemu Settings)


Setting up Qt Creator and N950


Note: Windows XP will likely have device driver issue - need manual install. Let us know if you need the drivers.

• Follow the steps in the next few slides to set up the N950 device to communicate with your Qt Creator (on your PC)

Step 1 – Connect to internet (Phone)

29

• Switch on N950

• Click on Settings

• Select Internet Connection


Step 2 – Enable Developer mode (Phone)

30

• Click on Settings-> Security -> Developer mode


Step 3 – Allow Installations from Non-Store Sources (Phone)

31

• Click on Settings-> Applications -> Installations


Step 4 – Connect N950 to your PC via the USB cable


• Select the “SDK” option

Step 5 – Set up SDK connection on N950 (Phone)

33

• Click on the “SDK Conne…” Icon

• Select “USB”


Step 6 – Set up Qt Creator (on the PC)


• Launch Qt Creator 1. Select Tools-> Options

2. Select Linux Devices tab

3. Click on Add button

4. Select “Device with MADDE support (Fremantle, Harmattan, MeeGo)”

5. Click “Start Wizard”

35

1. Enter a name (e.g. N950)

2. Select “MeeGo 1.2 Harmattan” and “Hardware Device”

3. Click on Next


36

• Select No and click on Next


37

• Select “Create new keys” and click on Next


38

• Click on “Create Keys” and Next


39

• Enter the Password (shown in the N950 device)

• Click on Deploy Key,

• Click OK when key is successfully deployed

• Then click Next and Finish


40

• Click on Next, then Finish to complete the setup

• You should then see the Device Configuration Test screen showing that the device configuration is okay


Final step

41

• Set the device as default so that your application will run directly on the device when it is connected


42

Your First MeeGo Application!


Your First Meego Application (Hello World)

43

• In Qt Creator

• Go to File - > New File or Project

44

• Enter a project name (e.g. helloworld)

• Make sure that your project directory is the same directory as the Qt SDK


45

• Select Qt Quick Components for Meego/Harmattan

• Click Next


46

• Choose only the Harmattan target

• Click Next, Next and Finish • Note: Click “Yes” to Qt Creator generating packaging files to add to project


Running Application on Device

47

• Make sure that you have selected Run target to be the N950 device you have set up earlier:

• Projects > Run > Device configuration (make sure the N950 is selected)

49

MeeGo 1.2 Harmattan API


MeeGo 1.2 Harmattan API


Basic Mobile Application


.desktop QML

.pro Qt C++

icon .qrc

Multimedia Mobile Application


.desktop QML

.pro Qt C++

icon .qrc .aegis

Security Framework

53

• Aegis manifest XML file

• For example QML plugin for Contacts

• TrackerReadAccess

• TrackerWriteAccess

• GRP::metadata-users


Security Credentials


Qt Mobility Required token

Contacts GRP::metadata-users TrackerReadAccess TrackerWriteAccess

Gallery TrackerReadAccess TrackerWriteAccess

Location Location TrackerReadAccess TrackerWriteAccess

Messaging Cellular TrackerReadAccess TrackerWriteAccess

Organizer GRP::calendar GRP::metadata-users TrackerReadAccess TrackerWriteAccess

System Info Cellular mce::DeviceModeControl mce::TKLockControl

MultimediaKit GRP::pulse-access GRP::video

Targets

55

• MeeGo 1.2 Harmattan API

• MeeGo API + mobility + Qt Quick + Qt Quick Components + some platform APIs

• Harmattan Platform API

• Middleware APIs

• Build daemon using D-Bus or GObject interface to communicate with other components


Types of Project


Output will be a .deb

Output will be a .sis

Output will be qml

Qt Quick Project Wizards

57

• Wizards guide users through the project creation steps

• Available wizards

• Qt Quick Application • App can be deployed to Desktop, Symbian and Meego

• Contains QML and C++ code

• Qt Quick UI • Pure QML project, recommended for designers

• Custom QML Extension Plugin • Advanced project type for C++ developers who want to provide

extension in Qt Quick UI projects


Qt Quick Application Types


What is in a Harmattan Application Project?


60

Basic QML


QML

61

• Qt Meta-Object Language

• Declarative, script-like language for defining the elements of a graphical UI

• QML is fully extensible with C++


QML syntax

62

• Import the Qt module


/* this is to illustrate a multiline

comment in a qml file */

import QtQuick 1.1

Rectangle {

width: 250 // Single line comment

height: 3 * 100

color: “lightblue”

}

QML syntax

63

• Declare the elements

• One main element in the file (root element)




import QtQuick 1.1

Rectangle {


height: 3 * 100


}

QML syntax

64

• Each element has a body between { }




import QtQuick 1.1

Rectangle {


height: 3 * 100


}

QML syntax

65

• Elements contain properties

• Property is defined as

• name: value

• value can be of javascript

• or name: value ; name: value




import QtQuick 1.1

Rectangle {


height: 3 * 100


}

Standard QML element

66

• A number of ready-made QML UI elements are provided

• Item

• Rectangle

• Image, Scale, Rotation, Translate

• Text

• MouseArea

• ListView, GridView, PathView, WebView

• Flickable

• Flipable

• Column, Row, Grid

• State, list of Animations

http://doc.qt.nokia.com/4.7/qdeclarativeelements.html


http://doc.qt.nokia.com/4.7/qdeclarativeelements.html

Identity


import QtQuick 1.1

Item {

width: 400; height:200

Text {

id: txtQuick

x: 50; y:25

text: “Qt Quick”

font.family: “Helvetica”; font.pixelSize: 50

}

Rectangle {

x:50; y: 75; height: 5

width: txtQuick.width

color: “green” // or ”#00ff00”

// opacity : 0.0 to 1.0

}

}

Colors

68

• You can define colors in the following ways:

• Use SVG names • “red”, “blue”, “lightblue”…

• Color components • “#<rr><gg><bb>”

• Built in function (red, green blue, alpha) • Qt.rgba(0,0.5,0,1)

• Opacity • 0.0 – transparent

• 1.0 - opaque


Images

69

• source contains a relative path

• width and height are obtained from the image

• scale property to enlarge the image


import QtQuick 1.1

Rectangle {

width: 400; height: 400

color: “black”

Image {

x: 150; y:150

source: “../images/rocket.png”

scale: 2.0

//rotation: 45

}

}

Add Images into your project

70

• Copy your image file and paste into your project directory using Windows Explorer (same directory where the main.qml is stored)

• Create a res.qrc and add the image files (Optional)


Anchors

71

• Used to position and align items

• Each QML item can have 6 invisible anchors and 4 margin lines


import QtQuick 1.1

Rectangle {



id: rectangle1

Text{

text: “Centered text”; color: “green”

font.family: “Helvetica”

font.pixelSize: 32

anchors.centerIn: rectangle1

}

}

Anchors

72

• Anchors are used for specifying relative positions of items

• Offsets and margins


leftMargin rightMargin

topMargin

bottomMargin

Rectangle { id: rect1; ... }

Rectangle { id: rect2; anchors.left: rect1.right;

... }


Rectangle { id: rect2; anchors.left: rect1.right;

anchors.leftMargin: 5; ... }

Anchors

73

• Multiple anchors can be used • Anchors can be used to control the size of an item



Rectangle { id: rect2; anchors.left: rect1.right; anchors.top: rect1.bottom;

... }

Rectangle { id: rect1; x: 0; ... }

Rectangle { id: rect2; anchors.left: rect1.right; anchors.right: Rect3.left;

... }

Rectangle { id: Rect3; x: 150; ... }

Grid Layout

74

• Represented by the QML item Grid • Arranges child items in a grid format

• Provides transition effects when items are added, moved or removed


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 }

}

Row Layout

75

• Represented by the QML item Row • Arranges child items in a row format



Row {

spacing: 2




}

Column Layout

76

• Represented by the QML item Column • Arranges child items in a vertical format



Column {

spacing: 2




}

Combine Layout

77

• Combine Row inside a Column


Column {

spacing: 2


Row {

spacing: 2

Rectangle { color: "yellow"; width: 50; height: 50 }

Rectangle { color: "black"; width: 20; height: 50 }

Rectangle { color: "blue"; width:50; height: 20 }

}


}

Mouse Click

78

• Mouse areas define parts of the screen where you can click

• Define a MouseArea child element

• Use an anchor to apply the area to the entire parent


Text {

…

MouseArea {

anchors.fill: parent

onPressed:{

parent.color = “red”

}

onReleased: { // or onClicked

parent.color = “green”

}

/* onClicked : {

} */

}

}

Drag


Rectangle {

id: opacitytest; width: 600; height: 200; color: "white“;

Image {

id: pic; source: "qtlogo-64.png“;

anchors.verticalCenter: parent.verticalCenter;

opacity: (600.0-pic.x) / 600;

MouseArea {


drag.target: pic

drag.axis: "XAxis"

drag.minimumX: 0

drag.maximumX: opacitytest.width-pic.width

}

}

}

Pinch

80

• Enables simple pinch gesture handling

• Can be enabled or disabled


Rectangle {

…

Image {

id: butterfly;

source: “butterfly.png";

PinchArea {

enabled: true


pinch.target: butterfly

pinch.minimumScale: 0.5

pinch.maximumScale: 2

pinch.minimumRotation: -360

pinch.maximumRotation: 360

}

}

}

Exercise 1:

81

1) Create a new Qt Quick Project as before (or you can just re-use your helloworld)

2) Choose your favourite picture and add into the project

(hint: refer slide 50)

3) Amend the MainPage.qml

• Add an Image element

• Add a PinchArea

• Set it draggable (hint: add a MouseArea)

4) Build and run in the N950


Solution (MainPage.qml):


import QtQuick 1.1

import com.meego 1.0

Page {

tools: commonTools

Image {

id: butterfly

source: “butterfly.png“

PinchArea {

enabled: true


pinch.target: butterfly

pinch.minimumScale: 0.5

pinch.maximumScale: 2

pinch.minimumRotation: -360

pinch.maximumRotation: 360

}

MouseArea {


drag.target: butterfly

}

}

}

States

83

• Represented by the State element

• Each item can define a set of states


states: [

State {

name: “fade_out”

PropertyChanges { target: butterfly; opacity: 0.1 }

},

State {

name: “fade_in”

PropertyChanges { target: butterfly; opacity: 0.9 }

}

]

Set the Initial State

84

• Define the initial state

• Use Timer to switch between states


Timer {

interval: 1000

running: true

repeat: true

onTriggered: {

if( parent.state == “fade_in" ) {

parent.state = “fade_out"

} else {

parent.state = “fade_in"

}

}

}

state: “fade in”

Transitions

85

• Define how items change when switching states

• Add animation

• Applied to 2 or more states

• Specify to and from properties

• Can be set to reversible


transitions: [

Transition {

from: “fade_in”; to: “fade_out”

reversible: true

PropertyAnimation {

target: butterfly

properties: “opacity”

duration: 1000

}

}

]

Exercise 1- continued

86

5) Add at least 2 states in your application

6) Set the initial state

7) Add a Timer to change between the states

8) Add a Transition


Solution: (Add states)


import QtQuick 1.0

Rectangle {

width: 360

height: 360

Image {

…

}

states: [

State {

name: “trans”

PropertyChanges { target: red_star; opacity:0.1 }

},

State {

name: “solid”

PropertyChanges { target: red_star; opacity:0.9 }

}

]

state: “solid” //Set the Initial State

}

Solution: (Add Timer)


import QtQuick 1.0

Rectangle {

width: 360

height: 360

Image {

…

}

states: [

…

]


Timer {

interval: 1000

running: true

repeat: true

onTriggered: { if( parent.state == “solid” )

{ parent.state = “trans” }

else{ parent.state = “solid” } }

}

}

Solution: (Add Transition)


import QtQuick 1.0

Rectangle {

width: 360

height: 360

Image {

…

}

states: [

…

]


Timer {

…

}

transitions: [

Transition { from: “*”; to: “*”

PropertyAnimation { target: red_star

properties: “opacity”

duration: 1000 } } ]

}

Animations

90

Types of animations: • PropertyAnimation

• NumberAnimation

• ColorAnimation

• RotationAnimation

• Use element Behavior

• Use element Transition (Already covered earlier)


Property Animation


import QtQuick 1.1


Page{

…

Rectangle {

id: rect1

x: 150; y:150

color: “green”

PropertyAnimation {

target: rect1

properties: “width, height”

from: 0; to: 100

duration: 1000 //milliseconds

running: true //not run by default

}

}

}

Number Animation


import QtQuick 1.1


Page{

…

Rectangle {

id: rect1

y:150; width: 100; height: 100

color: “green”

NumberAnimation on x {

from: 0; to: 150

easing.type: “OutExpo”



}

}

}

Type QEasingCurve in help to see the list of easing curves

Color Animation


import QtQuick 1.1


Page{

…

Rectangle {

id: rect1

w: 150; y:150; width: 100; height: 100

ColorAnimation{

target: rect1

property: “color”

from: Qt.rgba(0, 0.5, 0, 1)

to: Qt.rgba(1, 1, 1, 1)



}

}

}

Rotation Animation


import QtQuick 1.1


Page{

…

Image{

id: ball

anchors.centerIn: parent

source: “../images/ball.png”

smooth: true

RotationAnimation on rotation{

from: 45; to: 315

direction: RotationAnimation.Clockwise

duration: 1000

}

}

}

Behavior


import QtQuick 1.1


Page{

…

Rectangle {

id: rect1

w: 150; y:150; width: 100; height: 100

color: “red”

Behavior on width {

NumberAnimation { duration: 1000 }

}

MouseArea {


onClicked: rect1.width = 50

}

}

}

Animation Group

96

Types of grouping: • SequentialAnimation

• PauseAnimation

• ParallelAnimation


Sequential Animation


Image{

id: rocket


source: “../images/rocket.svg”

}

SequentialAnimation {

NumberAnimation {

target: rocket; properties: “scale”

from: 1.0; to: 0.5

duration: 1000

}

NumberAnimation {

target: rocket; properties: “opacity”

from: 1.0; to: 0.0

duration: 1000

}

running: true

}

• Allows animations to be run sequentially

Pause Animation


Image{

id: rocket



}

SequentialAnimation {

NumberAnimation {


from: 1.0; to: 0.5

duration: 1000

}

PauseAnimation {

duration: 1000

}

NumberAnimation {


from: 1.0; to: 0.0

duration: 1000

}

running: true

}

• Defines a pause between animations when nothing happens for a specified duration

Parallel Animation


Image{

id: rocket



}

ParallelAnimation {

NumberAnimation {


from: 1.0; to: 0.5

duration: 1000

}

NumberAnimation {


from: 1.0; to: 0.0

duration: 1000

}

running: true

}

• Allows multiple animations to be run in parallel

Data Models/Views

100

• Model

• Your data

• Delegate

• A component that describes a prototype item of each piece of data in the model

• View

• A visual element that shows the contents of a model


List View


ListModel {

id: nameModel

ListElement { title: “Pancakes”

picture: “pancakes.jpg” }

ListElement { title: “Fruit Salad”

picture: “fruit.jpg” }

ListElement { title: “Vegetable Soup”

picture: “vegetable.jpg” }

…

}

Component{

id: nameDelegate

Text {

text: title

font.pixelSize: 32

}

Image {

source: picture

}

}

ListView {


model: nameModel

delegate: nameDelegate

}

Grid View


ListModel {

id: nameModel

ListElement { file: “../images/rocket.svg”

name: “rocket” }

ListElement { file: “../images/clear.svg”

name: “clear” }

ListElement { file: “../images/arrow.svg”

name: “arrow” }

ListElement { file: “../images/book.svg”

name: “book” }

}

Component{

id: nameDelegate

Column {

Image {

id: delegateImage

source: file


fillMode:

Image.PreserveAspectFit

}

Text {

id: delegateText

text: name

font.pixelSize: 24

}

}

}

GridView {


model: nameModel

delegate: nameDelegate

}

Path View


PathView { // With equal distribution of dots

anchors.fill: parent; model: MyModel; delegate: delegate

path: Path {

startX: 20; startY: 0

PathQuad { x: 50; y: 80; controlX: 0; controlY: 80 }

PathLine { x: 150; y: 80 }


}

}

PathView { // With 50% of the dots in the bottom part

anchors.fill: parent; model: MyModel; delegate: delegate

path: Path {

startX: 20; startY: 0


PathPercent { value: 0.25 }

PathLine { x: 150; y: 80 }

PathPercent { value: 0.75 }


PathPercent { value: 1 }

}

}

Items equally distributed

50% of items in the bottom part of the path

List of QML elements

104

• Qt Quick 1.0 • http://doc.qt.nokia.com/4.7-

snapshot/qdeclarativeelements.html

• Qt Quick 1.1 • http://doc.qt.nokia.com/4.7-snapshot/qtquick-

whatsnew.html


http://doc.qt.nokia.com/4.7-snapshot/qdeclarativeelements.html




http://doc.qt.nokia.com/4.7-snapshot/qtquick-whatsnew.html






105

Qt Quick Components for MeeGo


Qt Quick Components

106

• A library consists of a set of ready UI components

• PageStackWindow • PageStack

• Page

• ToolbarLayout

• TextField/TextArea

• Sheet

• Dialog

• Buttons

• …


PageStackWindow


Example – Multiple Pages/ToolBar app


Starting point: main.qml

import QtQuick 1.1


PageStackWindow {

id: appWindow

initialPage: mainPage

MainPage { id: mainPage }

ToolBarLayout {

id: commonTools

visible: false

ToolIcon {

iconId: "toolbar-back";

onClicked: { pageStack.pop(); }

}

}

}

Sets up ToolBarLayout in main.qml as it can used commonly across pages Visible set to false (visibility set in individual pages that may/may not need it

Example – Multiple Pages/ToolBar app


MainPage.qml

import QtQuick 1.1


Page {

id: mainPage

tools: commonTools

Label {

id: label


text: qsTr("Page Stack Demo!")

}

ToolBarLayout {

id: commonTools

ToolButton {

text: "Second Page";

onClicked: { pageStack.push(Qt.resolvedUrl("SecondPage.qml")); }

}

}

}

ToolBarLayout set to visible in MainPage.qml Shows just 1 button that links to Second Page (SecondPage.qml) which we will add shortly…

Add a new Page?

110

• Right click on the qml directory and select Add New

• Select QML > QML File > Choose

• Name it as SecondPage > Next > Add to project (select your project e.g. pages.pro) > Finish

• You should see it appear in the qml directory



SecondPage.qml

import QtQuick 1.1


Page {

id: secondPage

tools: commonTools

Label {

text: qsTr("Second Page!")

}

ToolBarLayout {

id: commonTools

ToolIcon {

iconId: "toolbar-back";

onClicked: { pageStack.pop(); }

}

}

}

ToolBarLayout also set to visible in SecondPage.qml Shows just the back button to go back 1 page in the PageStack

For your Information

112

PageStackWindow/PageStack/Page

• Provides you with a page stack

• Provides you with clear, find, pop, push and replace methods

• pageStack.depth

• Given the stack [A, B, C]

• push(D)

• pop()

• replace(D)

• pop(A)


[A, B, C, D]

[A, B]

[A, B, D]

[A ]

Menu


Starting point: main.qml

import QtQuick 1.1


PageStackWindow {

id: appWindow

initialPage: mainPage

MainPage { id: mainPage }

ToolBarLayout {

…

}

Menu {

}

}

id: myMenu

visualParent: pageStack

MenuLayout {

MenuItem { text: “Dark Red”

onClicked : {colorRect.color = “darkred”}

}

MenuItem { text: “Dark Blue”

onClicked : {colorRect.color = “darkblue”}

}

}

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()

}

Continued…


Lock Orientation


MainPage.qml

import QtQuick 1.1


Page {

id: secondPage

tools: commonTools

orientationLock: PageOrientation.LockPortrait

// PageOrientation.Automatic

// PageOrientation.LockLandscape

Label {

id: label

text: “Second Page”

}

…

}

Note: Opening N950 keypad over-rides this. Will not happen on N9

TextField/TextArea


117

TextArea {

text: “this is a \nmultiline\ntext area”

height: 200; width: 200

}

TextField {

placeholderText: “Enter password"

maximumLength: 12

echoMode: TextInput.Password

}

TextField {

text: “read only text field”

readOnly: true

}

TextField {

placeholderText: “Enter 1000 to 2000”

validator: IntValidator { bottom: 1000; top: 2000; }

}


Sheet

118

A full screen dialog that slides up from the bottom


Page {

…

Sheet {

id: mySheet

acceptButtonText: “OK”

rejectButtonText: “Cancel”

content: Flickable

{

flickableDirection: Flickable.VerticalFlick

Label { text: “hello” }

}

onAccepted: console.log(“OK”);

onRejected: console.log(“Cancel”);

}

}

Dialog


Consists of : title, content field, button field

Information Dialog

120

• Usually consists of: title, content, button


Page {

…

Dialog {

id:myDialog

visualParent: parent

title : Item {

}

content: Item {

}

buttons: ButtonRow {

}

}

Component.onCompleted : {

myDialog.open();

}

}

id: dialogTitle

height: 50

width: parent.width

Text {

font.pixelSize: 25


color: “white”

text: “Information Dialog”

}

Information Dialog

121



Page {

…

Dialog {

id:myDialog


title : Item {

}

content: Item {

}


}

}


myDialog.open();

}

}

id: contentInfo

height: 50

width: parent.width

Text {

font.pixelSize: 22


color: “white”

text: “This is an info dialog content”

}

Information Dialog

122



Page {

…

Dialog {

id:myDialog


title : Item {

}

content: Item {

}


}

}


myDialog.open();

}

}

style: ButtonStyle {}

anchors.horizontalCenter: parent.horizontalCenter

Button {

text: “OK”

onClicked: myDialog.close()

}

Query Dialog

123

• Prompt a question to the user

• Consists of: title (with/without icon), message, buttons for OK and Cancel


Page {

…

QueryDialog {

id: queryDialog

acceptButtonText: “OK”

rejectButtonText: “Cancel”

titleText: “Question Dialog”

message: “Do you want to proceed to save?”

onAccepted: { … }

onRejected: { … }

}

}

Buttons


Busy Indicator


import QtQuick 1.1


Page {

id: mainPage

tools: commonTools

BusyIndicator {

id: indicator1

anchors.verticalCenter: parent.verticalCenter


platformStyle: BusyIndicatorStyle { size: “large” }

running: true

}

……


indicator1.running = false;

}

}

126

Qt Mobility


Qt Mobility APIs

127

1.0.2 1.1.3 1.2 (TP)


Service Framework Publish & Subscribe Messaging Contacts System Info Bearer Management Versit Sensor Multimedia Location

Organizer Document Gallery Feedback Camera Landmarks, Maps, Navigation QML Bindings

Local Connectivity (BT, NFC)

QML Qt Mobility API Bindings

128

Contacts

Feedback

Gallery

Location / Maps

Multimedia

Organizer

Publish & Subscribe

Service Framework

Messaging

System Information

Sensors Note: Some are still under development – subject to change


Multimedia - Audio


import QtMultimediaKit 1.1

Page {

Audio {

id:playMusic

source: “music.wav”

}

Button {

id: playButton

text: “Play”


onClicked: {

playMusic.play();

}

}

}

Multimedia - SoundEffect



Page {

SoundEffect {

id:effect1

source: “cymbal.wav”

}

Button {

id: playButton

text: “Play Effect”


onClicked: {

effect1.play();

}

}

}

Sensors


import QtMobility.sensors 1.1

Page {

…

Accelerometer{

active: true

onReadingChanged: {

console.log(“x: “ + reading.x + “ y: “ + reading.y + “ z: “ + reading.z)

}

}

}

Gallery


import QtMobility.gallery 1.1

Page {

…

GridView {


cellWidth: 120

cellHeight: 124

model: DocumentGalleryModel {

rootType: DocumentGallery.Image

properties: [“url”]

}

delegate: Image {

source: url

width: 124; height: 120;

}

}}

Exercise:

133

1) This application will demonstrate the use of both the Sensor and Gallery apis. It will use the Gallery api to get a list of available audio files in the device. And uses Accelerometer api to switch between audio files.

2) Create a new project

3) Amend the MainPage.qml to add the followings: • Label 1 – display “Artist name”

• Label 2 – display “-”

• Label 3 – display “Title name”

• Label 4 – display “-”

• Button – display text “Play”


Exercise - continued

134

4) Now we add the DocumentGalleryModel element into MainPage.qml

import QtMobility.gallery 1.1

DocumentGalleryModel {

id: docModel

rootType: DocumentGallery.Audio

properties: [“url”, “artist”, “title”]

filter: GalleryWildcardFilter {

property: "fileName";

value: "*.mp3";

}

}


135

5) We will need to add a Audio element to play the audio file and define the onClicked method for the play button


Audio {

id: audioElement

}

Button {

id: playButton


text: “Play”

onClicked: {

…… <detailed code in next slide>

}

}


136

Button {

id: playButton


text: “Play”

onClicked: {

if(!audioElement.playing)

{

artistLabel.text = docModel.get(0).artist

titleLabel.text = docModel.get(0).title

audioElement.source = docModel.get(0).url

audioElement.play();

text = “Stop”

}

else

{ audioElement.stop();

text= “Play”

}

}

}


137

6) Lets add some fun into this application by using the Accelerometer API to switch between the audio files

import QtMobility.sensors 1.1

Accelerometer {

active: true

onReadingChanged: {

…… <detailed code in next slide>

}

}


138

property int i: 0;

Accelerometer {

active: true

onReadingChanged: {

if(reading.x > 12 || reading.x <-12)

{

if(i<( docModel.count-1))

i++

else

i=0

if(audioElement.playing)

audioElement.stop();

artistLabel.text = docModel.get(i).artist

titleLabel.text = docModel.get(i).title

audioElement.source = docModel.get(i).url

audioElement.play();

}

}

}

139

Additional Suggestions


Making a call


Page {

…

TextField {

id: telno


placeholderText: “Please enter telephone no”

}

Button {


anchors.top: telno.bottom

anchors.topMargin: 10

text: qsTr(“Call”)

onClicked: {

Qt.openUrlExternally(“tel:” + telno.text)

}

}

}

tel:

tel:

tel:

Add SMS feature


• Create a new class “Sendmessage” using QObject as the base class

• Required header files are <qmessagemanager.h> and <qmessageservice.h>

• QTM_USE_NAMESPACE

• This is the sendsms()

void Sendmessage :: sendsms()

{

QMessage message;

message.setType(QMessage::Sms);

QString recipient(“1234567”);

message.setTo(QMessage Address::Phone, recipient));

message.setBody(“sms text here”);

QMessageService *m_service = new QMessageService();

if(!m_service->send(message))

{

}

}

Need to add “Cellular” into aegis file

144

Publishing


Packaging

145

When you create a project for Harmattan target, you will be prompt to add some files to your project. Remember to select Yes.

• qtc_packaging directory is created

• Contains the following

• Copyright

• Rules

• Control file

• Changelog

• Compat

• README

• These files are required to build a .deb file


Modify .desktop file

146

• Click the .desktop file of your application

• Change the icon and the name displayed for your application

• Save the file


Modify control file


Modify copyright file

148

Remember to save after you modified


Ovi Store Entry Requirements

149

• Go through the test cases described in MeeGo 1.2 Harmattan applications: Ovi Store Entry Requirements


Submitting your application

150

• Ensure that you have tested your application extensively on a real device

• Build and package your application with the necessary metadata with the right version of the SDK

• Go to https://publish.ovi.com and submit


https://publish.ovi.com/

Thank You

151

[email protected]

Introduction to QML for Meego - Universitas...

Documents

Transcript of Introduction to QML for Meego - Universitas...