Introduction to QML for Meego

Valerie Tai

Technical Services Manager

Nokia, Southeast Asia & Pacific

Nokia Platforms - Development Options

Native applications (Qt)

Web Apps (HTML)

Java Applicationss

Phones Series 40

Smartphones Symbian

Smartphones MeeGo / Maemo

What is Qt?

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

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

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

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

Simulator Desktop

Introduction to Qt SDK

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

Qt SDK 1.1.3 Custom Installation

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.

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

Netbook

Connected TV

Handset

Media Phone In-Vehicle

Maemo/MeeGo Platforms

Maemo5

Fremantle

UI: Hildon

Debian packaging

(*.deb)

MeeGo 1.2

Harmattan

UI: MeeGoTouch

Debian packaging

(*.deb)

MeeGo 1.1

UI: MeeGoTouch

RPM packaging

(*.rpm)

Introduction to N9/N950

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

Comparing N9 and N950

• 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

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

Setting up Qt Creator and MeeGo Test Device

Qt SDK 1.1.3 Custom Installation

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

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

• Switch on N950

• Click on Settings

• Select Internet Connection

Step 2 – Enable Developer mode (Phone)

• Click on Settings-> Security -> Developer mode

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

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

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

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

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

3. Click on Next

• Select No and click on Next

• Select “Create new keys” and click on Next

• Click on “Create Keys” and Next

• Enter the Password (shown in the N950 device)

• Click on Deploy Key,

• Click OK when key is successfully deployed

• Then click Next and Finish

• 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

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

Your First MeeGo Application!

Your First Meego Application (Hello World)

• In Qt Creator

• Go to File - > New File or Project

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

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

• Select Qt Quick Components for Meego/Harmattan

• Click Next

• 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

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

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

• 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

• 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

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

Basic QML

• Qt Meta-Object Language

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

• QML is fully extensible with C++

QML syntax

• 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

• Declare the elements

• One main element in the file (root element)

import QtQuick 1.1

Rectangle {

height: 3 * 100

QML syntax

• Each element has a body between { }

import QtQuick 1.1

Rectangle {

height: 3 * 100

QML syntax

• 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

• 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

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

• 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

• 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

• 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

• 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: “Centered text”; color: “green”

font.family: “Helvetica”

font.pixelSize: 32

anchors.centerIn: rectangle1

Anchors

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

anchors.leftMargin: 5; ... }

Anchors

• 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

• 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

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

spacing: 2

Column Layout

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

Column {

spacing: 2

Combine Layout

• Combine Row inside a Column

Column {

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

• 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 : {

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

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

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

• Represented by the State element

• Each item can define a set of states

states: [

State {

PropertyChanges { target: butterfly; opacity: 0.1 }

State {

PropertyChanges { target: butterfly; opacity: 0.9 }

Set the Initial State

• 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

• 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

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 {

PropertyChanges { target: red_star; opacity:0.1 }

State {

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

Types of animations: • PropertyAnimation

• NumberAnimation

• ColorAnimation

• RotationAnimation

• Use element Behavior

• Use element Transition (Already covered earlier)

Property Animation

import QtQuick 1.1

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

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

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

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

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

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

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

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

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

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

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

• 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

Qt Quick Components for MeeGo

Qt Quick Components

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

• 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

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]

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

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

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

• 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

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

Page {

Dialog {

id:myDialog

title : Item {

content: Item {

myDialog.open();

style: ButtonStyle {}

anchors.horizontalCenter: parent.horizontalCenter

Button {

text: “OK”

onClicked: myDialog.close()

Query Dialog

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

Qt Mobility

Qt Mobility APIs

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

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:

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

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";

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>

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”

{ audioElement.stop();

text= “Play”

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>

property int i: 0;

Accelerometer {

active: true

onReadingChanged: {

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

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

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

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)

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

Publishing

Packaging

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

• 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

Remember to save after you modified

Ovi Store Entry Requirements

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

Submitting your application

• 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

Thank You

valerie.tai@nokia.com

Introduction to QML for Meego - Universitas...

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

Introduction to QML for Meego - Universitas...

Documents

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

Meego Harmattan training

Analisi di MeeGo , versione 0 - math.unipd.itbellio/meego-matteo-brunati.pdf · Analisi di MeeGo v0.6 1 INTRODUZIONE 1 Introduzione Questo documento intende essere un’analisi da

Meego Report - Full

MeeGo sdk overview -MeeGo day april 2011

Marble Goes MeeGo

A Glimpse On MeeGo

Linpus Lite for MeeGo: Productizing MeeGo for netbooks and ... · Leading world wide MeeGo OSV & Linux bundle market player. Our Innovations & Achievements “Ecniw” launched, an

Build Cutting edge Mobile Apps using QML and JavaScript for MeeGo N9: Linux Foundation Collaboration Summit Apr7 2011 San Francisco @iRajLal

W3C Widget and MeeGo - MeeGo Meetup Hacker's Dojo Mountain View Dec 2010 @iRajLal

Qml Cpp Integration

Qt Quick on the Desktop - Qt Developer Days 2014 · PDF fileQt Quick on the Desktop ... Introduction Qt Quick Layouts ... Other attempts at QML components • Symbian and MeeGo components

The MeeGo Multimedia Stack

Qml Structures

MeeGo Mobile OS

Latest Development Of MeeGo

Grilo: Easy Access to Online Multimedia Content - Igalia · PDF fileInvolved in Maemo and MeeGo ... Some initial support for Qt/QML Grilo: Easy Access to Online Multimedia Content

MeeTo - Android meets MeeGo

MeeGo Architecture...MeeGo Architecture MeeGo API Based on Qt4.6/7 Necessary for App portability Upcoming MeeGo Touch Framework MeeGo Web Runtime Qt Mobility GTK is not part of MeeGo

QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @iRajLal

QML settings