Embed Size (px)
Citation preview
QML & JavaScript on MeeGo
Rajesh LalMeeGo Team, Nokia Silicon Valley
FUN with
Tools Available
AdvancedGraphics & Animation
Rich Mobile Apps
3 Steps for MeeGo Development ( with demo )
Mobile Apps Revenue ($ Million)
http://www.gartner.com/it/page.jsp?id=1282413
4,250
6,770
29,500(estimated)
Worldwide Total Revenue
What is MeeGo
is a Linux-based open source mobile operating system
Targeted to mobile devices & consumer electronics
What makes MeeGo Exciting ?
Fully Open Source
Linux Foundation
Target Multiple devices Smart phones, Tablets, Net books,
In-Vehicle Infotainment (IVI) SmartTV, IPTV-boxes
MeeGo V1.1 Available Today
3 Steps to FAST MeeGo Development
Tools Available
AdvancedGraphics & Animation
Rich Mobile Apps
TODAY Qt Quick & QML JavaScript
Step1: Development Environment
• Qt Application Framework• IDE – Qt Creator• Qt UI/GUI Designer• Qemu Emulator• Smartphone Simulator
… and we have real deviceAvailable Today
Qt Application Framework
Integrated Development Environment
Qt Creator
Qt Designer
• UI Designer• GUI Designer
Simulator
Simulator
Storage NetworkLocationContactsSensorsGalleryCamera
{
…and the Device
N900MeeGo
Step 2. Advanced Graphics & Animations
Declarative Runtime
Qt Meta Object Language(QML)
Quick Designer
Qt Quick
QML = Powerful Declarative Language
Creating a Game in Qt Quick
Angry Developer
1. Cutting Edge UI2. JavaScript binding3. Putting it Together
Creating a Game in Qt Quick
Three Parts
Demo: 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)
Timer for Pig’s Movement
Timer for Hit or Miss
Timer Pig’s Movement
Timer Hit or Miss
Step 3. Rich Mobile Apps
JavaScript Expressions
Import JavaScript Files
RSS, XML, JSON, REST
Multi ThreadedJavaScript
JavaScript to build Mobile Apps
Qt Container
QMLJavaScript
C++ is not Required
JavaScript file: Clock.js
QML Binding
JavaScript to build Mobile Apps
Putting it ALL TogetherIn 5 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 add2In 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
Add QML file , Images and JavaScript File as resources
* Make sure your JavaScript file name is lowercase
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
Steps to Develop FAST on
Get Qt SDK with Qt Quickhttp://get.qt.nokia.com
Download MeeGohttp://meego.com/downloads
Deploy using MADDEhttp://wiki.maemo.org/MADDE/QtCreator_integration_for_windows
Questions [email protected] @rajeshlalnokia
THANK YOU
