Grilo: Enhancing the multimedia experience in MeeGo (MeeGo Conference San Francisco 2011)
Build Cutting edge Mobile Apps using QML and JavaScript for MeeGo N9: Linux Foundation Collaboration...
35
Build Cutting-edge Mobile Apps Using QML & JavaScript Rajesh Lal MeeGo Team, Nokia Silicon Valley
description
Learn to create cutting-edge mobile applications 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 of Build Cutting edge Mobile Apps using QML and JavaScript for MeeGo N9: Linux Foundation Collaboration...
Build Cutting-edge Mobile Apps
Using QML & JavaScript
Rajesh LalMeeGo Team, Nokia Silicon Valley
MeeGo AppCutting-edge
3 Steps for MeeGo Development
Rich Feature
+ =
2009
2010
2013
Mobile Apps Total Revenue ($ Million)
http://www.gartner.com/it/page.jsp?id=1282413
4,250
6,770
29,500(estimated)
Worldwide
What makes Exciting ?
Fully Open Source
Linux Foundation
Target Multiple devices Available Today
MeeGo V1.1 - HandsetsMeeGo 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• 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 Mobile Apps Angry Developer
Qt Quick & QML JavaScript Game
+ =
Cutting-edge Graphics & Animation
QML Declarative Runtime
Quick Designer
Qt Quick Cutting Edge
QML = Powerful Declarative Language
Graphics
Elements
Shapes
Text
Animation
State
Transitions
Transform.
Binding
Property
JavaScript
C++
Creating a Game
Angry Developer
1. Cutting Edge UI1 QML file & images
2. JavaScript binding 1 JavaScript file
3. Putting it Together
Creating a Game using Qt Quick
Game: Angry Developer
Playing Moving
Angry Developer: Missed
AngryMissed
Angry Developer: Hit “Hurrah!”
HappyDestroyed
QML Elements
State Change
Playing Angry Happy Pig Moving Pig Destroyed
State Change
Ball Animation
Bouncing Ball Animation Throw Transition
Bouncing Ball Animation
Throw Transition
QML Logic (2 Timers)
Pig’s Random Movement
Hit or Miss
Timer Pig’s Movement
Timer Hit or Miss
Step 2. Rich Mobile Apps
JavaScript Expressions
Import JavaScript Files
RSS, XML, JSON, REST
Multi ThreadedJavaScript
JavaScript to build Rich Features
Qt Container
QMLJavaScript
C++ is not Required
JavaScript file: Clock.js
QML Binding
Putting the Game Together
In 5 easy Steps
Step1/5: Create New Application
Create new Mobile Qt Application1
Select Qt for PR1.3
Remove files • mainwindow.ui• mainwindow.h• mainwindow.cpp
2/5 Add Qt Declarative
QT += declarativeIn Project.pro file add2
In our case add this to NativeQMLJS.pro
3/5 Add Qt Declarative
3 In main.cpp, include QtDeclarative and add code
4/5 Add Files
QML file , Images and JavaScript File
* Make sure your JavaScript file name is lowercase
as resourcesAdd
5/5 Add the Binding
Add the binding in QML file and call JavaScript
import "clock.js" as MyClock…Text { id:txttime text: MyClock.gettime()}
Demo
Angry Developer
3 Steps for FAST development on
Download Qt SDK
Create UI QML
Develop Logic
JavaScript
Thank YouDownload MeeGo
http://meego.com/downloads
Get Qt SDK with Qt Quickhttp://get.qt.nokia.com
Know MADDEhttp://wiki.maemo.org/MADDE
Questions [email protected] @rajeshlalnokia
