introduction to qml for meego - universitas...
TRANSCRIPT
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?
6 © 2011 Nokia Company Confidential 10/25/2011
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?
7 © 2011 Nokia Company Confidential 10/25/2011
• 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!
8 © 2011 Nokia Company Confidential 10/25/2011
… and many, many more!
9
Qt – How?
© 2011 Nokia Company Confidential 10/25/2011
Developer Environment Setup
10 © 2011 Nokia Company Confidential 10/25/2011
• 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
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
© 2011 Nokia Company Confidential 10/25/2011
Qt SDK 1.1.3 Custom Installation
12
Not upgradable from Qt SDK 1.0
Select Custom during installation
And check Experimental (for Harmattan)
© 2011 Nokia Company Confidential 10/25/2011
Installation Note: To install on an Apple Mac, xCode is required.
13
The MeeGo Platform
© 2011 Nokia Company Confidential 10/25/2011
• 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
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
Comparing N9 and N950
17
N950
© 2011 Nokia Company Confidential 10/25/2011
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
© 2011 Nokia Company Confidential 10/25/2011
Company Confidential
Company Confidential
Nokia N9 UI
http://www.developer.nokia.com/swipe/ux/
Company Confidential
Company Confidential
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
Company Confidential
Company Confidential
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
Company Confidential
Company Confidential
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
Company Confidential
Company Confidential
Home Screens
• Home contains 3 key views : Events, Applications, Open Applications
• Swipe to navigate between the 3 views
Company Confidential
Company Confidential
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
© 2011 Nokia Company Confidential 10/25/2011
Qt SDK 1.1.3 Custom Installation
26
Not upgradable from Qt SDK 1.0
Select Custom during installation
And check Experimental (for Harmattan)
© 2011 Nokia Company Confidential 10/25/2011
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)
© 2011 Nokia Company Confidential 10/25/2011
Setting up Qt Creator and N950
28 © 2011 Nokia Company Confidential 10/25/2011
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
© 2011 Nokia Company Confidential 10/25/2011
Step 2 – Enable Developer mode (Phone)
30
• Click on Settings-> Security -> Developer mode
© 2011 Nokia Company Confidential 10/25/2011
Step 3 – Allow Installations from Non-Store Sources (Phone)
31
• Click on Settings-> Applications -> Installations
© 2011 Nokia Company Confidential 10/25/2011
Step 4 – Connect N950 to your PC via the USB cable
32 © 2011 Nokia Company Confidential 10/25/2011
• Select the “SDK” option
Step 5 – Set up SDK connection on N950 (Phone)
33
• Click on the “SDK Conne…” Icon
• Select “USB”
© 2011 Nokia Company Confidential 10/25/2011
Step 6 – Set up Qt Creator (on the PC)
34 © 2011 Nokia Company Confidential 10/25/2011
• 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
© 2011 Nokia Company Confidential 10/25/2011
36
• Select No and click on Next
© 2011 Nokia Company Confidential 10/25/2011
37
• Select “Create new keys” and click on Next
© 2011 Nokia Company Confidential 10/25/2011
38
• Click on “Create Keys” and Next
© 2011 Nokia Company Confidential 10/25/2011
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
© 2011 Nokia Company Confidential 10/25/2011
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
© 2011 Nokia Company Confidential 10/25/2011
Final step
41
• Set the device as default so that your application will run directly on the device when it is connected
© 2011 Nokia Company Confidential 10/25/2011
42
Your First MeeGo Application!
© 2011 Nokia Company Confidential 10/25/2011
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
© 2011 Nokia Company Confidential 10/25/2011
45
• Select Qt Quick Components for Meego/Harmattan
• Click Next
© 2011 Nokia Company Confidential 10/25/2011
46
• Choose only the Harmattan target
• Click Next, Next and Finish • Note: Click “Yes” to Qt Creator generating packaging files to add to project
© 2011 Nokia Company Confidential 10/25/2011
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)
48 © 2011 Nokia Company Confidential 10/25/2011
49
MeeGo 1.2 Harmattan API
© 2011 Nokia Company Confidential 10/25/2011
MeeGo 1.2 Harmattan API
50 © 2011 Nokia Company Confidential 10/25/2011
Basic Mobile Application
51 © 2011 Nokia Company Confidential 10/25/2011
.desktop QML
.pro Qt C++
icon .qrc
Multimedia Mobile Application
52 © 2011 Nokia Company Confidential 10/25/2011
.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
© 2011 Nokia Company Confidential 10/25/2011
Security Credentials
54 © 2011 Nokia Company Confidential 10/25/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
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
© 2011 Nokia Company Confidential 10/25/2011
Types of Project
56 © 2011 Nokia Company Confidential 10/25/2011
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
© 2011 Nokia Company Confidential 10/25/2011
Qt Quick Application Types
58 © 2011 Nokia Company Confidential 10/25/2011
What is in a Harmattan Application Project?
59 © 2011 Nokia Company Confidential 10/25/2011
60
Basic QML
© 2011 Nokia Company Confidential 10/25/2011
QML
61
• 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 10/25/2011
QML syntax
62
• Import the Qt module
© 2011 Nokia Company Confidential 10/25/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
63
• Declare the elements
• One main element in the file (root element)
© 2011 Nokia Company Confidential 10/25/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
64
• Each element has a body between { }
© 2011 Nokia Company Confidential 10/25/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
65
• Elements contain properties
• Property is defined as
• name: value
• value can be of javascript
• or name: value ; name: value
© 2011 Nokia Company Confidential 10/25/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
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
© 2011 Nokia Company Confidential 10/25/2011
Identity
67 © 2011 Nokia Company Confidential 10/25/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
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
© 2011 Nokia Company Confidential 10/25/2011
Images
69
• source contains a relative path
• width and height are obtained from the image
• scale property to enlarge the image
© 2011 Nokia Company Confidential 10/25/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
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)
© 2011 Nokia Company Confidential 10/25/2011
Anchors
71
• Used to position and align items
• Each QML item can have 6 invisible anchors and 4 margin lines
© 2011 Nokia Company Confidential 10/25/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
72
• Anchors are used for specifying relative positions of items
• Offsets and margins
© 2011 Nokia Company Confidential 10/25/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
73
• Multiple anchors can be used • Anchors can be used to control the size of an item
© 2011 Nokia Company Confidential 10/25/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
74
• 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 10/25/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
75
• 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 10/25/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
76
• 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 10/25/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
77
• Combine Row inside a Column
© 2011 Nokia Company Confidential 10/25/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
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
© 2011 Nokia Company Confidential 10/25/2011
Text {
…
MouseArea {
anchors.fill: parent
onPressed:{
parent.color = “red”
}
onReleased: { // or onClicked
parent.color = “green”
}
/* onClicked : {
} */
}
}
Drag
79 © 2011 Nokia Company Confidential 10/25/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
80
• Enables simple pinch gesture handling
• Can be enabled or disabled
© 2011 Nokia Company Confidential 10/25/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.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
© 2011 Nokia Company Confidential 10/25/2011
Solution (MainPage.qml):
82 © 2011 Nokia Company Confidential 10/25/2011
import QtQuick 1.1
import com.meego 1.0
Page {
tools: commonTools
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.maximumRotation: 360
}
MouseArea {
anchors.fill: parent
drag.target: butterfly
}
}
}
States
83
• Represented by the State element
• Each item can define a set of states
© 2011 Nokia Company Confidential 10/25/2011
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
© 2011 Nokia Company Confidential 10/25/2011
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
© 2011 Nokia Company Confidential 10/25/2011
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
© 2011 Nokia Company Confidential 10/25/2011
Solution: (Add states)
87 © 2011 Nokia Company Confidential 10/25/2011
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)
88 © 2011 Nokia Company Confidential 10/25/2011
import QtQuick 1.0
Rectangle {
width: 360
height: 360
Image {
…
}
states: [
…
]
state: “solid” //Set the Initial State
Timer {
interval: 1000
running: true
repeat: true
onTriggered: { if( parent.state == “solid” )
{ parent.state = “trans” }
else{ parent.state = “solid” } }
}
}
Solution: (Add Transition)
89 © 2011 Nokia Company Confidential 10/25/2011
import QtQuick 1.0
Rectangle {
width: 360
height: 360
Image {
…
}
states: [
…
]
state: “solid” //Set the Initial State
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)
© 2011 Nokia Company Confidential 10/25/2011
Property Animation
91 © 2011 Nokia Company Confidential 10/25/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
92 © 2011 Nokia Company Confidential 10/25/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
93 © 2011 Nokia Company Confidential 10/25/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
94 © 2011 Nokia Company Confidential 10/25/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
95 © 2011 Nokia Company Confidential 10/25/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
96
Types of grouping: • SequentialAnimation
• PauseAnimation
• ParallelAnimation
© 2011 Nokia Company Confidential 10/25/2011
Sequential Animation
97 © 2011 Nokia Company Confidential 10/25/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
}
• Allows animations to be run sequentially
Pause Animation
98 © 2011 Nokia Company Confidential 10/25/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
}
• Defines a pause between animations when nothing happens for a specified duration
Parallel Animation
99 © 2011 Nokia Company Confidential 10/25/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
}
• 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
© 2011 Nokia Company Confidential 10/25/2011
List View
101 © 2011 Nokia Company Confidential 10/25/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
102 © 2011 Nokia Company Confidential 10/25/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
103 © 2011 Nokia Company Confidential 10/25/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
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
© 2011 Nokia Company Confidential 10/25/2011
105
Qt Quick Components for MeeGo
© 2011 Nokia Company Confidential 10/25/2011
Qt Quick Components
106
• A library consists of a set of ready UI components
• PageStackWindow • PageStack
• Page
• ToolbarLayout
• TextField/TextArea
• Sheet
• Dialog
• Buttons
• …
© 2011 Nokia Company Confidential 10/25/2011
PageStackWindow
107 © 2011 Nokia Company Confidential 10/25/2011
Example – Multiple Pages/ToolBar app
108 © 2011 Nokia Company Confidential 10/25/2011
Starting point: main.qml
import QtQuick 1.1
import com.meego 1.0
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
109 © 2011 Nokia Company Confidential 10/25/2011
MainPage.qml
import QtQuick 1.1
import com.meego 1.0
Page {
id: mainPage
tools: commonTools
Label {
id: label
anchors.centerIn: parent
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
© 2011 Nokia Company Confidential 10/25/2011
111 © 2011 Nokia Company Confidential 10/25/2011
SecondPage.qml
import QtQuick 1.1
import com.meego 1.0
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)
© 2011 Nokia Company Confidential 10/25/2011
[A, B, C, D]
[A, B]
[A, B, D]
[A ]
Menu
113 © 2011 Nokia Company Confidential 10/25/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…
114 © 2011 Nokia Company Confidential 10/25/2011
Lock Orientation
115 © 2011 Nokia Company Confidential 10/25/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”
}
…
}
Note: Opening N950 keypad over-rides this. Will not happen on N9
TextField/TextArea
116 © 2011 Nokia Company Confidential 10/25/2011
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; }
}
© 2011 Nokia Company Confidential 10/25/2011
Sheet
118
A full screen dialog that slides up from the bottom
© 2011 Nokia Company Confidential 10/25/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
119 © 2011 Nokia Company Confidential 10/25/2011
Consists of : title, content field, button field
Information Dialog
120
• Usually consists of: title, content, button
© 2011 Nokia Company Confidential 10/25/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
121
• Usually consists of: title, content, button
© 2011 Nokia Company Confidential 10/25/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
122
• Usually consists of: title, content, button
© 2011 Nokia Company Confidential 10/25/2011
Page {
…
Dialog {
id:myDialog
visualParent: parent
title : Item {
}
content: Item {
}
buttons: ButtonRow {
}
}
Component.onCompleted : {
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
© 2011 Nokia Company Confidential 10/25/2011
Page {
…
QueryDialog {
id: queryDialog
acceptButtonText: “OK”
rejectButtonText: “Cancel”
titleText: “Question Dialog”
message: “Do you want to proceed to save?”
onAccepted: { … }
onRejected: { … }
}
}
Buttons
124 © 2011 Nokia Company Confidential 10/25/2011
Busy Indicator
125 © 2011 Nokia Company Confidential 10/25/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;
}
}
126
Qt Mobility
© 2011 Nokia Company Confidential 10/25/2011
Qt Mobility APIs
127
1.0.2 1.1.3 1.2 (TP)
© 2011 Nokia Company Confidential 10/25/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
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
© 2011 Nokia Company Confidential 10/25/2011
Multimedia - Audio
129 © 2011 Nokia Company Confidential 10/25/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
130 © 2011 Nokia Company Confidential 10/25/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
131 © 2011 Nokia Company Confidential 10/25/2011
import QtMobility.sensors 1.1
Page {
…
Accelerometer{
active: true
onReadingChanged: {
console.log(“x: “ + reading.x + “ y: “ + reading.y + “ z: “ + reading.z)
}
}
}
Gallery
132 © 2011 Nokia Company Confidential 10/25/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;
}
}}
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”
© 2011 Nokia Company Confidential 10/25/2011
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";
}
}
Exercise - continued
135
5) We will need to add a Audio element to play the audio file and define the onClicked method for the play button
import QtMultimediaKit 1.1
Audio {
id: audioElement
}
Button {
id: playButton
anchors.centerIn: parent
text: “Play”
onClicked: {
…… <detailed code in next slide>
}
}
Exercise - continued
136
Button {
id: playButton
anchors.centerIn: parent
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”
}
}
}
Exercise - continued
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>
}
}
Exercise - continued
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
© 2011 Nokia Company Confidential 10/25/2011
Making a call
140 © 2011 Nokia Company Confidential 10/25/2011
Page {
…
TextField {
id: telno
anchors.horizontalCenter: parent.horizontalCenter
placeholderText: “Please enter telephone no”
}
Button {
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: telno.bottom
anchors.topMargin: 10
text: qsTr(“Call”)
onClicked: {
Qt.openUrlExternally(“tel:” + telno.text)
}
}
}
141 © 2011 Nokia Company Confidential 10/25/2011
Add SMS feature
142 © 2011 Nokia Company Confidential 10/25/2011
• 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
143 © 2011 Nokia Company Confidential 10/25/2011
144
Publishing
© 2011 Nokia Company Confidential 10/25/2011
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
© 2011 Nokia Company Confidential 10/25/2011
Modify .desktop file
146
• Click the .desktop file of your application
• Change the icon and the name displayed for your application
• Save the file
© 2011 Nokia Company Confidential 10/25/2011
Modify control file
147 © 2011 Nokia Company Confidential 10/25/2011
Modify copyright file
148
Remember to save after you modified
© 2011 Nokia Company Confidential 10/25/2011
Ovi Store Entry Requirements
149
• Go through the test cases described in MeeGo 1.2 Harmattan applications: Ovi Store Entry Requirements
© 2011 Nokia Company Confidential 10/25/2011
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
© 2011 Nokia Company Confidential 10/25/2011