Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco...

Fun with QML and JavaScript

Mobile Apps for MeeGo

Rajesh LalMeeGo Team, Nokia Silicon Valley

Fast Development on

QML JavaScript Mobile Apps

+ =

Mobile Apps Download

http://distimo.com By 2013

Total

Revenue

$29 billion+

Paid Free

Source: Gartner

http://www.gartner.com/it/content/1439600/1439613/october_5_successful_mobile_app_cmilanesi.pdf

What is MeeGo

is a Linux-based open source

mobile operating system

Targeted to mobile devices & consumer electronics

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

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

3 Steps to Develop FAST on MeeGo

Cutting-edge UI Rich Features Mobile Apps

Qt Quick & QML JavaScript Fast

+ =

4 Mobile Apps for MeeGo

Popu

larity

Effort on MeeGo

1/4 News Apps on MeeGo

CNN News


List/Grid

View

XML

Reader

Display UI

(Delegate)


XML Reader

http://rss.cnn.com/rss/magazines_fortune.rss


XML Reader


Display UI (Delegate)

Delegate is a component that creates an instance for each item in the model


Delegate


ListView


ListView Grid View


Demo

2/4 Social Apps on MeeGo

REST

API

Auth.

Welcome

Access

Edit

Data


CallLogin(name,pwd)

Worker Script

Login

Login thread

JSON

API Call

From QML

AJAXRemote

Cloud


1. API Call

2. Login thread instance

3. Worker Script

4. Login.js with AJAX


API Call


Login Thread Instance


ScriptLogin.QML (Actual Thread)


Login.js with AJAX

3/4 Tools on MeeGo

N900 Access Device Data

3/4 Tools on MeeGo

Device

Data

Qt Mobility

API

JavaScript

Binding

JavaScript Expressions

Import JavaScript Files

Qt Mobility API

JavaScript

3/4 Tools on MeeGo

3/4 Tools on MeeGo: Clock.js

3/4 Tools on MeeGo: QML Binding

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

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

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

Demo

3/4 Tools on MeeGo: Location

4/4 Fun and Games on MeeGo

Angry Developer


Events

BindingGraphics State

Animation


Graphics

Elements

Shapes

Text

Animation

State

Transitions

Transform.

Binding

Property

JavaScript

C++

Playing Moving


AngryMissed


HappyDestroyed


4/4 Fun and Games: QML Elements

Playing Angry Happy Pig Moving Pig Destroyed

4/4 Fun and Games: State Change

4/4 Fun and Games: State Change

Bouncing Ball Animation Throw Transition

4/4 Fun and Games: Ball Animation

4/4 Fun and Games: Bouncing Ball

4/4 Fun and Games: Throw Transition

Pig’s Random

Movement

Hit or Miss

4/4 Fun and Games: Logic Timers

4/4 Fun and Games: Pig Movement

4/4 Fun and Games: Hit or Miss


Angry DeveloperDemo

3 Steps for FAST development on

Download Qt SDK

Create UI QML

Develop Logic

JavaScript

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

Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco...

Technology

Transcript of Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco...