Intro to QML Meego
-
Upload
clara-hetty-primasari -
Category
Documents
-
view
1.023 -
download
4
Transcript of Intro to QML Meego
1
Eileen Khoo
Technical Services Manager
Nokia, Southeast Asia & Pacific
Introduction to QML for MeeGo
© 2011 Nokia Company Confidential 8/11/2011
Agenda
2
09:15 Registration
09.45 Introduction and Ecosystem Business Updates
10:00 Qt Introduction
12:30 Lunch
13:30 Introduction to NFC
NFC Java API
NFC Qt Mobility API
15:30 Break
15:45 NFC continues
18:00 End of workshop
© 2011 Nokia Company Confidential 8/11/2011
Course Material
3
• Intro to QML for MeeGo pdf
• NFC pdf
• Java NFC pdf
• Tool • Qt SDK 1.1.2
© 2011 Nokia Company Confidential 8/11/2011
Platforms
4
N900
Maemo5
Fremantle
UI: Hildon
Debian packaging
© 2011 Nokia Company Confidential 8/11/2011
N9
MeeGo 1.2
Harmattan
UI: MeeGoTouch
Debian packaging
MeeGo 1.1
UI: MeeGoTouch
RPM packaging
Introduction to N9/N950
5 © 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
8/11/2011
Differences between N9 and N950
6
• N950 is physically larger and is made out of aluminum, whereas N9 has a polycarbonate unibody.
• N950 has a physical slide-out QWERTY keyboard. The N9 is a touch screen device.
• N950 has a 4” TFT LCD display whereas N9 has 3.9” AMOLED display. 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.
• In the N950 the front facing camera is in top right corner and on N9 it is in the bottom right corner. The actual camera module is same.
• N950 does not have support for NFC
• N9 has slightly more sensitive magnetometer and ALS
• N950 has 1320mAh battery, the N9 has 1450mAh battery
© 2011 Nokia Company Confidential 8/11/2011
Introduction to Qt SDK
7
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.2.1
• Qt 4.7.3
• Qt Quick 1.0 (1.1 for Harmattan)
• Qt Mobility 1.1.3 (1.2 for Harmattan)
• Remote Compiler for S60
• Smart Installer for S60
© 2011 Nokia Company Confidential 8/11/2011
Qt SDK 1.1.2
8
Not upgradable from Qt SDK 1.0
Select Custom during installation
And check Experimental (for Harmattan)
© 2011 Nokia Company Confidential 8/11/2011
Targets
9
• 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
© 2011 Nokia Company Confidential 8/11/2011
Harmattan Emulator
10
• QEMU
• Note: May crash, if OpenGL mode is set to autodect
• Change to Software Rendering
© 2011 Nokia Company Confidential 8/11/2011
Setting up Qt Creator and N950
11 © 2011 Nokia Company Confidential 8/11/2011
Step 1 – Enable Developer mode
14
• Click on Settings-> Security -> Developer mode
© 2011 Nokia Company Confidential 8/11/2011
15
• To allow installations from non-Store sources
© 2011 Nokia Company Confidential 8/11/2011
Step 2 – Set up SDK connection on N950
16
• Click on SDK Conne…
© 2011 Nokia Company Confidential 8/11/2011
17
• Connect N950 with laptop using usb cable
• Select SDK mode
• Select USB
© 2011 Nokia Company Confidential 8/11/2011
Step 3 – Set up Qt Creator
18
• Launch Qt Creator
• Go to Tools-> Options
• Select Maemo
• Click on Add button
• Enter a name
• Select Harmattan and Hardware Device
• Click on Next
© 2011 Nokia Company Confidential 8/11/2011
19
• Select No and click on Next
© 2011 Nokia Company Confidential 8/11/2011
20
• Select Create new Keys and click on Next
© 2011 Nokia Company Confidential 8/11/2011
21
• Click on Create Keys and Next
© 2011 Nokia Company Confidential 8/11/2011
Final step
22
• Enter the Password (shown in the N950 device)
• Click on Deploy Key and Next and Finish
© 2011 Nokia Company Confidential 8/11/2011
Your First Meego Application
23
• Launch Qt Creator
• Go to File - > New File or Project
© 2011 Nokia Company Confidential 8/11/2011
24
• Enter a project name
• Make sure that your project directory is the same directory as the Qt SDK
© 2011 Nokia Company Confidential 8/11/2011
25
• Click Next, Next and Finish
© 2011 Nokia Company Confidential 8/11/2011
26 © 2011 Nokia Company Confidential 8/11/2011
27
Digestion
© 2011 Nokia Company Confidential 8/11/2011
Types of Project
28 © 2011 Nokia Company Confidential 8/11/2011
Output will be a .deb
Output will be a .sis
Output will be qml
What is in a Harmattan Application Project?
29 © 2011 Nokia Company Confidential 8/11/2011
30
MeeGo 1.2 Harmattan API
© 2011 Nokia Company Confidential 8/11/2011
MeeGo 1.2 Harmattan API
31 © 2011 Nokia Company Confidential 8/11/2011
Basic Mobile Application
32 © 2011 Nokia Company Confidential 8/11/2011
.desktop QML
.pro Qt C++
icon .qrc
Multimedia Mobile Application
33 © 2011 Nokia Company Confidential 8/11/2011
.desktop QML
.pro Qt C++
icon .qrc .aegis
Security Framework
34
• Aegis manifest XML file
• For example QML plugin for Contacts
• TrackerReadAccess
• TrackerWriteAccess
• GRP::metadata-users
© 2011 Nokia Company Confidential 8/11/2011
35
Basic QML
© 2011 Nokia Company Confidential 8/11/2011
Qt Creator IDE
36
• Cross-platform IDE written in Qt
• Optimized to develop Qt based C++ and QML applications
• Qt Quick is supported from Qt Creator 2.1 onwards
© 2011 Nokia Company Confidential 8/11/2011
Qt Quick Project Wizards
37
• Wizards guide users through the project creation steps
• Available wizards
• Harmattan Application • App can be deploy on N9/N950, contains QML component and C++
code
• Qt Quick Application • App can be deployed to a Symbian device, can contain 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
© 2011 Nokia Company Confidential 8/11/2011
QML
38
• Qt Meta-Object Language
• Declarative, script-like language for defining the elements of a graphical UI
• QML is fully extensible with C++
© 2011 Nokia Company Confidential 8/11/2011
QML syntax
39
• Import the Qt module
© 2011 Nokia Company Confidential 8/11/2011
/* 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
40
• Declare the elements
• One main element in the file (root element)
© 2011 Nokia Company Confidential 8/11/2011
/* 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
41
• Each element has a body between { }
© 2011 Nokia Company Confidential 8/11/2011
/* 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
42
• Elements contain properties
• Property is defined as
• name: value
• value can be of javascript
• or name: value ; name: value
© 2011 Nokia Company Confidential 8/11/2011
/* 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”
}
Standard QML element
43
• 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
© 2011 Nokia Company Confidential 8/11/2011
Identity
44 © 2011 Nokia Company Confidential 8/11/2011
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
45
• 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
© 2011 Nokia Company Confidential 8/11/2011
Images
46
• source contains a relative path
• width and height are obtained from the image
• scale property to enlarge the image
© 2011 Nokia Company Confidential 8/11/2011
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
47
• Add image files into your project directory
• Right click project and select “Add Existing Files” (optional)
• Lastly, double clicked on res.qrc and add the image files
© 2011 Nokia Company Confidential 8/11/2011
Anchors
48
• Used to position and align items
• Each QML item can have 6 invisible anchors and 4 margin lines
© 2011 Nokia Company Confidential 8/11/2011
import QtQuick 1.1
Rectangle {
width: 400; height: 400
color: “lightblue”
id: rectangle1
Text{
text: “Centered text”; color: “green”
font.family: “Helvetica”
font.pixelSize: 32
anchors.centerIn: rectangle1
}
}
Anchors
49
• Anchors are used for specifying relative positions of items
• Offsets and margins
© 2011 Nokia Company Confidential 8/11/2011
leftMargin rightMargin
topMargin
bottomMargin
Rectangle { id: rect1; ... }
Rectangle { id: rect2; anchors.left: rect1.right;
... }
Rectangle { id: rect1; ... }
Rectangle { id: rect2; anchors.left: rect1.right;
anchors.leftMargin: 5; ... }
Anchors
50
• Multiple anchors can be used • Anchors can be used to control the size of an item
© 2011 Nokia Company Confidential 8/11/2011
Rectangle { id: rect1; ... }
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
51
• Represented by the QML item Grid • Arranges child items in a grid format
• Provides transition effects when items are added, moved or removed
© 2011 Nokia Company Confidential 8/11/2011
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
52
• Represented by the QML item Row • Arranges child items in a row format
• Provides transition effects when items are added, moved or removed
© 2011 Nokia Company Confidential 8/11/2011
Row {
spacing: 2
Rectangle { color: "red"; width: 50; height: 50 }
Rectangle { color: "green"; width: 20; height: 50 }
Rectangle { color: "blue"; width: 50; height: 20 }
}
Column Layout
53
• Represented by the QML item Column • Arranges child items in a vertical format
• Provides transition effects when items are added, moved or removed
© 2011 Nokia Company Confidential 8/11/2011
Column {
spacing: 2
Rectangle { color: "red"; width: 50; height: 50 }
Rectangle { color: "green"; width: 20; height: 50 }
Rectangle { color: "blue"; width: 50; height: 20 }
}
Combine Layout
54
• Combine Row inside a Column
© 2011 Nokia Company Confidential 8/11/2011
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 }
}
Mouse Click
55
• 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
© 2011 Nokia Company Confidential 8/11/2011
Text {
…
MouseArea {
anchors.fill: parent
onPressed:{
parent.color = “red”
}
onReleased: { // or onClicked
parent.color = “green”
}
/* onClicked : {
} */
}
}
Drag
56 © 2011 Nokia Company Confidential 8/11/2011
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 {
anchors.fill: parent
drag.target: pic
drag.axis: "XAxis"
drag.minimumX: 0
drag.maximumX: opacitytest.width-pic.width
}
}
}
Pinch
57
• Enables simple pinch gesture handling
• Can be enabled or disabled
© 2011 Nokia Company Confidential 8/11/2011
Rectangle {
…
Image {
id: butterfly; source: “butterfly.png"
PinchArea {
enabled: true
anchors.fill: parent
pinch.target: butterfly
pinch.minimumScale: 0.5
pinch.maximumScale: 2
pinch.minimumRotation: -360
pinch.minimumRotation: 360
}
}
}
Exercise:
58
1) Create a new Qt Quick Project -> Harmattan Application
2) Build and run in the N950
3) Choose your favourite picture and add into the project
4) Amend the MainPage.qml
• Add an Image element
• Set it drag gable
• Add a pinch area
© 2011 Nokia Company Confidential 8/11/2011
States
60
• Represented by the State element
• Each item can define a set of states
© 2011 Nokia Company Confidential 8/11/2011
states: [
State {
name: “fade_out”
PropertyChanges { target: butterfly; opacity: 0.1 }
},
State {
name: “fade_in”
PropertyChanges { target: butterfly; opacity: 0.9 }
}
]
Set the State
61
• Define the initial state • state: “fade_in”
• Use Timer to switch between states
© 2011 Nokia Company Confidential 8/11/2011
Timer {
interval: 1000
running: true
repeat: true
onTriggered: {
if( parent.state == “fade_in" ) {
parent.state = “fade_out"
} else {
parent.state = “fade_in"
}
}
}
Transitions
62
• 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
© 2011 Nokia Company Confidential 8/11/2011
transitions: [
Transition {
from: “fade_in”; to: “fade_out”
reversible: true
PropertyAnimation {
target: butterfly
properties: “opacity”
duration: 1000
}
}
]
Exercise - continued
63
5) Add at least 2 states in your application
6) Add a Timer to change between the states
7) Add a Transition
© 2011 Nokia Company Confidential 8/11/2011
Animations
64
Types of animations: • PropertyAnimation
• NumberAnimation
• ColorAnimation
• RotationAnimation
• Use element Behavior
• Use element Transition (Already covered earlier)
© 2011 Nokia Company Confidential 8/11/2011
Property Animation
65 © 2011 Nokia Company Confidential 8/11/2011
import QtQuick 1.1
import com.meego 1.0
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
66 © 2011 Nokia Company Confidential 8/11/2011
import QtQuick 1.1
import com.meego 1.0
Page{
…
Rectangle {
id: rect1
y:150; width: 100; height: 100
color: “green”
NumberAnimation on x {
from: 0; to: 150
easing.type: “OutExpo”
duration: 1000 //milliseconds
running: true //not run by default
}
}
}
Type QEasingCurve in help to see the list of easing curves
Color Animation
67 © 2011 Nokia Company Confidential 8/11/2011
import QtQuick 1.1
import com.meego 1.0
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)
duration: 1000 //milliseconds
running: true //not run by default
}
}
}
Rotation Animation
68 © 2011 Nokia Company Confidential 8/11/2011
import QtQuick 1.1
import com.meego 1.0
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
69 © 2011 Nokia Company Confidential 8/11/2011
import QtQuick 1.1
import com.meego 1.0
Page{
…
Rectangle {
id: rect1
w: 150; y:150; width: 100; height: 100
color: “red”
Behavior on width {
NumberAnimation { duration: 1000 }
}
MouseArea {
anchors.fill: parent
onClicked: rect1.width = 50
}
}
}
Animation Group
70
Types of grouping: • SequentialAnimation
• PauseAnimation
• ParallelAnimation
© 2011 Nokia Company Confidential 8/11/2011
Sequential Animation
71 © 2011 Nokia Company Confidential 8/11/2011
Image{
id: rocket
anchors.centerIn: parent
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
}
Pause Animation
72 © 2011 Nokia Company Confidential 8/11/2011
Image{
id: rocket
anchors.centerIn: parent
source: “../images/rocket.svg”
}
SequentialAnimation {
NumberAnimation {
target: rocket; properties: “scale”
from: 1.0; to: 0.5
duration: 1000
}
PauseAnimation {
duration: 1000
}
NumberAnimation {
target: rocket; properties: “opacity”
from: 1.0; to: 0.0
duration: 1000
}
running: true
}
Parallel Animation
73 © 2011 Nokia Company Confidential 8/11/2011
Image{
id: rocket
anchors.centerIn: parent
source: “../images/rocket.svg”
}
ParallelAnimation {
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
}
Data Models/Views
74
• 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
© 2011 Nokia Company Confidential 8/11/2011
List View
75 © 2011 Nokia Company Confidential 8/11/2011
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 {
anchors.fill: parent
model: nameModel
delegate: nameDelegate
}
Grid View
76 © 2011 Nokia Company Confidential 8/11/2011
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
width: 64; height: 64
fillMode:
Image.PreserveAspectFit
}
Text {
id: delegateText
text: name
font.pixelSize: 24
}
}
}
GridView {
anchors.fill: parent
model: nameModel
delegate: nameDelegate
}
Path View
77 © 2011 Nokia Company Confidential 8/11/2011
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 }
PathQuad { x: 180; y: 0; controlX: 200; controlY: 80 }
}
}
PathView { // With 50% of the dots in the bottom part
anchors.fill: parent; model: MyModel; delegate: delegate
path: Path {
startX: 20; startY: 0
PathQuad { x: 50; y: 80; controlX: 0; controlY: 80 }
PathPercent { value: 0.25 }
PathLine { x: 150; y: 80 }
PathPercent { value: 0.75 }
PathQuad { x: 180; y: 0; controlX: 200; controlY: 80 }
PathPercent { value: 1 }
}
}
Items equally distributed
50% of items in the bottom part of the path
78
Qt Quick Components
© 2011 Nokia Company Confidential 8/11/2011
Qt Quick Components
79
• A library consists of a set of ready UI components
• PageStackWindow • PageStack
• Page
• ToolbarLayout
• TextField/TextArea
• Sheet
• Dialog
• Buttons
• …
© 2011 Nokia Company Confidential 8/11/2011
PageStackWindow
80 © 2011 Nokia Company Confidential 8/11/2011
Example – Multiple Pages/ToolBar app
81 © 2011 Nokia Company Confidential 8/11/2011
Starting point: main.qml
import QtQuick 1.1
import com.meego 1.0
PageStackWindow {
id: appWindow
initialPage: mainPage
MainPage { id: mainPage }
showStatusBar: false
ToolBarLayout {
}
}
id: commonTools
visible: true
ToolIcon {
id: backButton
visible: pageStack.depth > 1
platformIconId: “toolbar-back”
onClicked: {
myMenu.close();
pageStack.pop();
}
}
ToolButton {
id: secondButton
text: “Second”
onClicked : {
if(pageStack.currentPage.objectName != “secondpage”)
{
pageStack.push(Qt.resolvedUrl(“SecondPage.qml”));
}
}
}
//continued next page
Add a new Page?
82
• Right click on the qml directory and select Add New
• Select QML
• Name it as SecondPage
• Make sure that you add SecondPage.qml in the res.qrc
© 2011 Nokia Company Confidential 8/11/2011
83 © 2011 Nokia Company Confidential 8/11/2011
SecondPage.qml
import QtQuick 1.1
import com.meego 1.0
Page {
id: secondPage
tools: commonTools
objectName: “secondpage”
Label {
id: label
text: “Second Page”
}
…
}
For your Information
84
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)
© 2011 Nokia Company Confidential 8/11/2011
[A, B, C, D]
[A, B]
[A, B, D]
[A ]
Menu
85 © 2011 Nokia Company Confidential 8/11/2011
Starting point: main.qml
import QtQuick 1.1
import com.meego 1.0
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…
86 © 2011 Nokia Company Confidential 8/11/2011
Lock Orientation
87 © 2011 Nokia Company Confidential 8/11/2011
MainPage.qml
import QtQuick 1.1
import com.meego 1.0
Page {
id: secondPage
tools: commonTools
orientationLock: PageOrientation.LockPortrait
// PageOrientation.Automatic
// PageOrientation.LockLandscape
Label {
id: label
text: “Second Page”
}
…
}
TextField/TextArea
88 © 2011 Nokia Company Confidential 8/11/2011
89
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; }
}
© 2011 Nokia Company Confidential 8/11/2011
Sheet
90
A full screen dialog that slides up from the bottom
© 2011 Nokia Company Confidential 8/11/2011
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
91 © 2011 Nokia Company Confidential 8/11/2011
Information Dialog
92
• Usually consists of: title, content, button
© 2011 Nokia Company Confidential 8/11/2011
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
anchors.centerIn: parent
color: “white”
text: “Information Dialog”
}
Information Dialog
93
• Usually consists of: title, content, button
© 2011 Nokia Company Confidential 8/11/2011
Page {
…
Dialog {
id:myDialog
visualParent: parent
title : Item {
}
content: Item {
}
buttons: ButtonRow {
}
}
Component.onCompleted : {
myDialog.open();
}
}
id: contentInfo
height: 50
width: parent.width
Text {
font.pixelSize: 22
anchors.centerIn: parent
color: “white”
text: “This is an info dialog content”
}
Information Dialog
94
• Usually consists of: title, content, button
© 2011 Nokia Company Confidential 8/11/2011
Page {
…
Dialog {
id:myDialog
visualParent: parent
title : Item {
}
content: Item {
}
buttons: ButtonRow {
}
}
Component.onCompleted : {
myDialog.open();
}
}
style: BurronStyle {}
anchors.horizontalCenter: parent.horizontalCenter
Button {
text: “OK”
onClicked: myDialog.close()
}
Query Dialog
95
• Prompt a question to the user
• Consists of: title (with/without icon), message, buttons for OK and Cancel
© 2011 Nokia Company Confidential 8/11/2011
Page {
…
QueryDialog {
id: queryDialog
acceptButtonText: “OK”
rejectButtonText: “Cancel”
titleText: “Question Dialog”
message: “Do you want to proceed to save?”
onAccepted: { … }
onRejected: { … }
}
}
Buttons
96 © 2011 Nokia Company Confidential 8/11/2011
Busy Indicator
97 © 2011 Nokia Company Confidential 8/11/2011
import QtQuick 1.1
import com.meego 1.0
Page {
id: mainPage
tools: commonTools
BusyIndicator {
id: indicator1
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
platformStyle: BusyIndicatorStyle { size: “large” }
running: true
}
……
Component.onCompleted : {
indicator1.running = false;
}
}
98
Qt Mobility
© 2011 Nokia Company Confidential 8/11/2011
Qt Mobility APIs
99
1.0.2 1.1.3 1.2 (Beta)
© 2011 Nokia Company Confidential 8/11/2011
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
100
Contacts
Feedback
Gallery
Location / Maps
Multimedia
Organizer
Publish & Subscribe
Service Framework
Messaging
System Information
Sensors Note: Some are still under development – subject to change
© 2011 Nokia Company Confidential 8/11/2011
Getting your current Location
101
import QtMobility.location 1.2
Page {
…
PositionSource {
id: myLoc
updateInterval: 500
active: true
onPositionChanged: {
console.debug("Current location "+
position.coordinate.latitude.toString() + " " + position.coordinate.longitude.toString());
}
}
Component.onDestruction: {
myLoc.stop();
}
}
© 2011 Nokia Company Confidential 8/11/2011
Display a Map
103 © 2011 Nokia Company Confidential 8/11/2011
import QtMobility.location 1.2
Page {
…
Map {
id: myMap
plugin: Plugin {
name: “nokia”
}
zoomLevel: 14
center: myLoc.position.coordinate
anchors.fill: parent
}
}
Getting your current Location - revisit
105
import QtMobility.location 1.2
Page {
…
PositionSource {
id: myLoc
//updateInterval: 500
active: true
onPositionChanged: {
me.center = position.coordinate
console.debug("Current location "+
position.coordinate.latitude.toString() + " " + position.coordinate.longitude.toString());
}
}
Component.onCompleted: {
myLoc.stop();
} © 2011 Nokia Company Confidential 8/11/2011
106 © 2011 Nokia Company Confidential 8/11/2011
import QtMobility.location 1.2
Page {
…
Map {
id: myMap
plugin: Plugin {
name: “nokia”
}
zoomLevel: 14
center: myLoc.position.coordinate
anchors.fill: parent
MapCircle {
id: me
radius: 50
color: “red”
}
}
}
Add MapImage
108 © 2011 Nokia Company Confidential 8/11/2011
import QtMobility.location 1.2
Page {
…
Map {
id: myMap
plugin: Plugin {
name: “nokia”
}
zoomLevel: 14
center: myLoc.position.coordinate
anchors.fill: parent
MapImage {
id: meImage
source: “monkey.png”
height: 20; width: 20
}
}
}
Getting your current Location - revisit
109
import QtMobility.location 1.2
Page {
…
PositionSource {
id: myLoc
//updateInterval: 500
active: true
onPositionChanged: {
meImage.coordinate = position.coordinate
console.debug("Current location "+
position.coordinate.latitude.toString() + " " + position.coordinate.longitude.toString());
}
}
Component.onCompleted: {
myLoc.stop();
} © 2011 Nokia Company Confidential 8/11/2011
Multimedia - Audio
110 © 2011 Nokia Company Confidential 8/11/2011
import QtMultimediaKit 1.1
Page {
Audio {
id:playMusic
source: “music.wav”
}
Button {
id: playButton
text: “Play”
width: 200; height: 50
onClicked: {
playMusic.play();
}
}
}
Multimedia - SoundEffect
111 © 2011 Nokia Company Confidential 8/11/2011
import QtMultimediaKit 1.1
Page {
SoundEffect {
id:effect1
source: “cymbal.wav”
}
Button {
id: playButton
text: “Play Effect”
width: 200; height: 50
onClicked: {
effect1.play();
}
}
}
Sensors
112 © 2011 Nokia Company Confidential 8/11/2011
import QtMobility.sensors 1.1
Page {
…
Accelerometer{
active: true
onReadingChanged: {
console.log(“x: “ + reading.x + “ y: “ + reading.y + “ z: “ + reading.z)
}
}
}
Gallery
113 © 2011 Nokia Company Confidential 8/11/2011
import QtMobility.gallery 1.1
Page {
…
GridView {
anchors.fill: parent
cellWidth: 120
cellHeight: 124
model: DocumentGalleryModel {
rootType: DocumentGallery.Image
properties: [“url”]
}
delegate: Image {
source: url
width: 124; height: 120;
}
}}
Security Credentials
120 © 2011 Nokia Company Confidential 8/11/2011
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
125
Publishing
© 2011 Nokia Company Confidential 8/11/2011
Ovi Store Entry Requirements
130
• Go through the test cases described in MeeGo 1.2 Harmattan applications: Ovi Store Entry Requirements
© 2011 Nokia Company Confidential 8/11/2011
Submitting your application
131
• 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
© 2011 Nokia Company Confidential 8/11/2011
132
Thank you
© 2011 Nokia Company Confidential 8/11/2011