fun with qml and javascript: embedded linux conference 11th april 2011, hotel kabuki, san francisco...
DESCRIPTION
Learn to develop News, Social, Tools and Fun & Game Apps using QML and JavaScript on MeeGo devices. Know how to apply some advanced graphics and animations with simple QML and see how JavaScript allows you to create a feature rich application. No C++ required. A tutorial with live demos targeted to beginner to intermediate Mobile developers interested in developing mobile applications on Linux based Mobile Devices.TRANSCRIPT
![Page 1: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/1.jpg)
Fun with QML and JavaScript
Mobile Apps for MeeGo
Rajesh LalMeeGo Team, Nokia Silicon Valley
![Page 2: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/2.jpg)
Fast Development on
QML JavaScript Mobile Apps
+ =
![Page 3: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/3.jpg)
Mobile Apps Download
http://distimo.com By 2013
Total
Revenue
$29 billion+
Paid Free
Source: Gartner
![Page 4: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/4.jpg)
What is MeeGo
is a Linux-based open source
mobile operating system
Targeted to mobile devices & consumer electronics
![Page 5: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/5.jpg)
What makes Exciting ?
Fully Open Source
Linux Foundation
Target Multiple devices Available Today
MeeGo V1.1 - Handsets
MeeGo V1.1 - Net books
MeeGo V1.1 - In-Vehicle Infotainment
… and SmartTV, IPTV-boxes, Tablets
![Page 6: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/6.jpg)
MeeGo Development Environment
• Qt Application Framework
• IDE – Qt Creator
• Qt Quick & QML
• Qt UI Designer
• Qemu Emulator
• Smartphone Simulator
… and we have a device to testAvailable Today
![Page 7: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/7.jpg)
3 Steps to Develop FAST on MeeGo
Cutting-edge UI Rich Features Mobile Apps
Qt Quick & QML JavaScript Fast
+ =
![Page 8: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/8.jpg)
4 Mobile Apps for MeeGo
Popu
larity
Effort on MeeGo
![Page 9: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/9.jpg)
1/4 News Apps on MeeGo
CNN News
![Page 10: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/10.jpg)
1/4 News Apps on MeeGo
List/Grid
View
XML
Reader
Display UI
(Delegate)
![Page 11: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/11.jpg)
1/4 News Apps on MeeGo
XML Reader
http://rss.cnn.com/rss/magazines_fortune.rss
![Page 12: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/12.jpg)
1/4 News Apps on MeeGo
XML Reader
![Page 13: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/13.jpg)
1/4 News Apps on MeeGo
Display UI (Delegate)
Delegate is a component that creates an instance for each item in the model
![Page 14: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/14.jpg)
1/4 News Apps on MeeGo
Delegate
![Page 15: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/15.jpg)
1/4 News Apps on MeeGo
ListView
![Page 16: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/16.jpg)
1/4 News Apps on MeeGo
ListView Grid View
![Page 17: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/17.jpg)
1/4 News Apps on MeeGo
Demo
![Page 18: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/18.jpg)
2/4 Social Apps on MeeGo
REST
API
Auth.
Welcome
Access
Edit
Data
![Page 19: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/19.jpg)
2/4 Social Apps on MeeGo
CallLogin(name,pwd)
Worker Script
Login
Login thread
JSON
API Call
From QML
AJAXRemote
Cloud
![Page 20: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/20.jpg)
2/4 Social Apps on MeeGo
1. API Call
2. Login thread instance
3. Worker Script
4. Login.js with AJAX
![Page 21: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/21.jpg)
2/4 Social Apps on MeeGo
API Call
![Page 22: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/22.jpg)
2/4 Social Apps on MeeGo
Login Thread Instance
![Page 23: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/23.jpg)
2/4 Social Apps on MeeGo
ScriptLogin.QML (Actual Thread)
![Page 24: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/24.jpg)
2/4 Social Apps on MeeGo
Login.js with AJAX
![Page 25: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/25.jpg)
3/4 Tools on MeeGo
N900 Access Device Data
![Page 26: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/26.jpg)
3/4 Tools on MeeGo
Device
Data
Qt Mobility
API
JavaScript
Binding
![Page 27: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/27.jpg)
JavaScript Expressions
Import JavaScript Files
Qt Mobility API
JavaScript
3/4 Tools on MeeGo
![Page 28: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/28.jpg)
3/4 Tools on MeeGo: Clock.js
![Page 29: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/29.jpg)
3/4 Tools on MeeGo: QML Binding
![Page 30: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/30.jpg)
30
QML Plug-ins Qt Mobility API
Gallery Document Gallery API
Location Location API
Multimedia API includes audio and video
Service Framework
Discovering and connecting to services
Messaging Messaging , email ,sms etc
3/4 Tools on MeeGo: Qt Mobility
![Page 31: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/31.jpg)
31
import Qt 4.7
import QtMultimediaKit 1.1
...
Audio {
id: myMedia
source: “beethoven.wav"
}
MouseArea {
id: playArea
anchors.fill: parent
onPressed: { myMedia.play() }
}
3/4 Tools on MeeGo: Multimedia
![Page 32: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/32.jpg)
32
import Qt 4.7
import QtMobility.location 1.1
Rectangle {
width: 500
height: 500
Map {
id: myMap
size.width: parent.width
size.height: parent.height
zoomLevel: 5
center: Coordinate {
latitude: 101
longitude: 202
}
}
}
3/4 Tools on MeeGo: Location
![Page 33: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/33.jpg)
Demo
3/4 Tools on MeeGo: Location
![Page 34: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/34.jpg)
4/4 Fun and Games on MeeGo
Angry Developer
![Page 35: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/35.jpg)
4/4 Fun and Games on MeeGo
Events
BindingGraphics State
Animation
![Page 36: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/36.jpg)
4/4 Fun and Games on MeeGo
Graphics
Elements
Shapes
Text
Animation
State
Transitions
Transform.
Binding
Property
JavaScript
C++
![Page 37: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/37.jpg)
Playing Moving
4/4 Fun and Games on MeeGo
![Page 38: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/38.jpg)
AngryMissed
4/4 Fun and Games on MeeGo
![Page 39: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/39.jpg)
HappyDestroyed
4/4 Fun and Games on MeeGo
![Page 40: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/40.jpg)
4/4 Fun and Games: QML Elements
![Page 41: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/41.jpg)
Playing Angry Happy Pig Moving Pig Destroyed
4/4 Fun and Games: State Change
![Page 42: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/42.jpg)
4/4 Fun and Games: State Change
![Page 43: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/43.jpg)
Bouncing Ball Animation Throw Transition
4/4 Fun and Games: Ball Animation
![Page 44: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/44.jpg)
4/4 Fun and Games: Bouncing Ball
![Page 45: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/45.jpg)
4/4 Fun and Games: Throw Transition
![Page 46: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/46.jpg)
Pig’s Random
Movement
Hit or Miss
4/4 Fun and Games: Logic Timers
![Page 47: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/47.jpg)
4/4 Fun and Games: Pig Movement
![Page 48: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/48.jpg)
4/4 Fun and Games: Hit or Miss
![Page 49: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/49.jpg)
4/4 Fun and Games on MeeGo
Angry DeveloperDemo
![Page 50: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/50.jpg)
3 Steps for FAST development on
Download Qt SDK
Create UI QML
Develop Logic
JavaScript
![Page 51: Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal](https://reader033.vdocument.in/reader033/viewer/2022052823/5551455cb4c905f2288b4c7a/html5/thumbnails/51.jpg)
Thank You
Download MeeGohttp://meego.com/downloads
Get Qt SDK with Qt Quickhttp://get.qt.nokia.com
Know MADDEhttp://wiki.maemo.org/MADDE
Questions [email protected] @rajeshlalnokia