• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Build Cutting edge Mobile Apps using QML and JavaScript for MeeGo N9: Linux Foundation Collaboration Summit Apr7 2011 San Francisco @iRajLal
 

Build Cutting edge Mobile Apps using QML and JavaScript for MeeGo N9: Linux Foundation Collaboration Summit Apr7 2011 San Francisco @iRajLal

on

  • 3,850 views

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 ...

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.

Statistics

Views

Total Views
3,850
Views on SlideShare
3,101
Embed Views
749

Actions

Likes
3
Downloads
50
Comments
3

34 Embeds 749

http://www.meegoexperts.com 233
http://irajeshlal.blogspot.com 218
http://irajlal.blogspot.com 101
http://blogs.in.nokia.com 94
http://irajeshlal.blogspot.in 17
http://www.tizenexperts.com 15
http://irajlal.blogspot.in 12
http://www.slideshare.net 9
http://irajlal.blogspot.fr 7
http://irajeshlal.blogspot.co.uk 6
http://irajlal.blogspot.com.br 5
http://sakola.net 4
http://irajlal.blogspot.de 2
http://irajlal.blogspot.dk 2
http://aakanshaindia.blogspot.com 2
url_unknown 2
http://irajeshlal.blogspot.ca 2
http://irajeshlal.blogspot.de 2
http://www.linkedin.com 1
http://irajlal.blogspot.com.au 1
http://irajlal.blogspot.kr 1
http://irajlal.blogspot.jp 1
http://cowww02.europe.nokia.com 1
http://irajlal.blogspot.ca 1
http://irajlal.blogspot.ch 1
http://irajeshlal.blogspot.ch 1
http://irajlal.blogspot.be 1
http://irajlal.blogspot.nl 1
http://irajeshlal.blogspot.com.br 1
http://irajlal.blogspot.co.uk 1
http://irajeshlal.blogspot.mx 1
http://irajeshlal.blogspot.tw 1
http://irajeshlal.blogspot.com.au 1
http://irajlal.blogspot.it 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • SLIDE 1: There is a very REAL Mobile Apps Opportunity -------------------------------------------------------- 2010 - xyz Million $ -> 2013 - abc Million dollars 2010- Growth Distimo report
  • My Goal for the afternoon is to Show you 3 things--------------------------------------------------1. Tools/SDK/Devices for MeeGo Development are available TODAY QT SDK, Qt Creator, Complete IDE, QT Quick, Designer, and device N900 2. Fun to Create Cutting Edge Graphics and Animation using QML With QML states and Transitions its so easy that it is fun3. Easy to develop Feature rich Mobile App using JavaScript These three tools will give you the power to create cutting edget Mobile Apps for MeeGo TODAY But Before I jump into the interesting part let me give you a context
  • SLIDE 1: There is a very REAL Mobile Apps Opportunity -------------------------------------------------------- 2010 - xyz Million $ -> 2013 - abc Million dollars 2010- Growth Distimo report
  • SLIDE 3 : WHAT MAKES MEEGO EXCITING ? -------------------------------------- MeeGo Targets Multiple Devices - smart phones - netbooks - entry-level desktops / nettops - tablet computers - mobile computing and communications devices - in-vehicle infotainment devices - SmartTV / ConnectedTV - IPTV-boxes - and other embedded systemsYou can go to http://meego.com/downloads and download the MeeGo OS v 1.1 for smartphones, IVI and NetbookIt's a great Investment. Now we know that there is a real Mobile Application development opportunity and MeeGo is a great platform to develop upon, The Million dollar question is how can we develop on MeeGo ?
  • SLIDE 5: GOAL 1: SDK (the IDE, debugger, simulator, everything)------------------------------------------------------------------- The QT SDK needed to develop and the Device is available TODAY
  • My Goal for the afternoon is to Show you 3 things--------------------------------------------------1. Tools/SDK/Devices for MeeGo Development are available TODAY QT SDK, Qt Creator, Complete IDE, QT Quick, Designer, and device N900 2. Fun to Create Cutting Edge Graphics and Animation using QML With QML states and Transitions its so easy that it is fun3. Easy to develop Feature rich Mobile App using JavaScript These three tools will give you the power to create cutting edge Mobile Apps for MeeGo TODAY But Before I jump into the interesting part let me give you a context
  • SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
  • SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
  • SLIDE 8-12 : DEMO CLOCK------------------------
  • SLIDE 8-12 : DEMO CLOCK------------------------
  • SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
  • SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
  • SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
  • SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
  • SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
  • SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
  • SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
  • SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
  • SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
  • SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
  • SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
  • SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
  • SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
  • SLIDE 7: GOAL 3: JavaScript to build Mobile Apps ------------------------------------------------- The Logic for the Mobile Application can be developed in JavaScript
  • SLIDE 8-12 : DEMO CLOCK------------------------
  • SLIDE 8-12 : DEMO CLOCK------------------------
  • SLIDE 7: GOAL 3: JavaScript to build Mobile Apps ------------------------------------------------- The Logic for the Mobile Application can be developed in JavaScript
  • SLIDE 8-12 : DEMO CLOCK------------------------
  • SLIDE 8-12 : DEMO CLOCK------------------------
  • SLIDE 8-12 : DEMO CLOCK------------------------
  • SLIDE 8-12 : DEMO CLOCK------------------------
  • SLIDE 8-12 : DEMO CLOCK------------------------
  • SLIDE 8-12 : DEMO CLOCK------------------------
  • SLIDE 8-12 : DEMO CLOCK------------------------
  • SLIDE 1: There is a very REAL Mobile Apps Opportunity -------------------------------------------------------- 2010 - xyz Million $ -> 2013 - abc Million dollars 2010- Growth Distimo report

Build Cutting edge Mobile Apps using QML and JavaScript for MeeGo N9: Linux Foundation Collaboration Summit Apr7 2011 San Francisco @iRajLal Build Cutting edge Mobile Apps using QML and JavaScript for MeeGo N9: Linux Foundation Collaboration Summit Apr7 2011 San Francisco @iRajLal Presentation Transcript

  • Build Cutting-edge Mobile Apps
    Using QML & JavaScript
    Rajesh Lal
    MeeGo Team, Nokia Silicon Valley
  • 3 Steps for MeeGo Development
    +
    =
    MeeGo App
    Cutting-edge
    Rich Feature
  • Mobile Apps Total Revenue ($ Million)
    6,770
     29,500
    (estimated)
    4,250
    Worldwide
    http://www.gartner.com/it/page.jsp?id=1282413
  • 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
    • Qt UI Designer
    • Qemu Emulator
    • Smartphone Simulator
    … and we have a device to test
    Available Today
  • 3 Steps to Develop FAST on MeeGo
    +
    =
    Cutting-edge UI
    Angry Developer
    Rich Mobile Apps
    Qt Quick & QML
    Game
    JavaScript
  • Cutting-edge Graphics & Animation
    Cutting Edge
    Qt Quick
    QML
    Declarative Runtime
    Quick Designer
  • QML = Powerful Declarative Language
  • Creating a Game
    Angry Developer
  • Creating a Game using Qt Quick
    Cutting Edge UI
    1 QML file & images
    JavaScript binding
    1 JavaScript file
    Putting it Together
  • Game: Angry Developer
    Moving
    Playing
  • Angry Developer: Missed
    Missed
    Angry
  • Angry Developer: Hit “Hurrah!”
    Destroyed
    Happy
  • QML Elements
  • State Change
    Pig Moving
    Pig Destroyed
    Playing
    Angry
    Happy
  • 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 Threaded
    JavaScript
  • JavaScript to build Rich Features
    Qt Container
    JavaScript
    QML
    C++ is not Required
  • JavaScript file: Clock.js
  • QML Binding
  • Putting the Game Together
    In 5easy Steps
  • Step1/5: Create New Application
    Create new Mobile Qt Application
    1
    Select Qt for PR1.3
    Remove files
    • mainwindow.ui
    • mainwindow.h
    • mainwindow.cpp
  • 2/5 Add Qt Declarative
    In Project.pro file add
    2
    QT += declarative
    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
    as resources
    Add
    * 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
  • 3 Steps for FAST development on
  • Thank You
    Download MeeGo
    http://meego.com/downloads
    Get Qt SDK with Qt Quick
    http://get.qt.nokia.com
    Know MADDE
    http://wiki.maemo.org/MADDE
    Questions
    Rajesh.Lal@nokia.com @rajeshlalnokia