QML & JavaScript on MeeGo Rajesh Lal MeeGo Team, Nokia Silicon Valley FUN with
Tools  Available  Advanced Graphics & 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 ...
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  <ul><ul><li>Smart phones, Tablets...
3 Steps to FAST MeeGo Development Tools  Available  Advanced Graphics & Animation  Rich  Mobile Apps  TODAY  Qt Quick & QM...
Step1: Development Environment <ul><li>Qt Application Framework </li></ul><ul><li>IDE – Qt Creator </li></ul><ul><li>Qt UI...
Qt Application Framework
Integrated Development Environment Qt Creator
Qt Designer <ul><li>UI Designer </li></ul><ul><li>GUI Designer </li></ul>
Simulator Simulator Storage  Network Location Contacts Sensors Gallery Camera {
… and the Device N900 MeeGo
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
<ul><li>Cutting Edge UI </li></ul><ul><li>JavaScript binding </li></ul><ul><li>Putting it Together </li></ul>Creating a Ga...
Demo: Angry Developer  Playing Moving
Angry Developer: Missed Angry Missed
Angry Developer: Hit “Hurrah!” Happy Destroyed
QML Elements
State Change Playing Angry Happy Pig Moving Pig Destroyed
State Changes
Ball Animation Bouncing Ball Animation Throw Transition
Bouncing Ball animation
Throw Transition
QML Logic (2 Timers) Timers for Pig’s  Movement Timers 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 Threaded JavaScript
JavaScript to build Mobile Apps QML JavaScript C++ is  not  Required Qt Container
JavaScript file: Clock.js
QML Binding
JavaScript to build Mobile Apps Putting it ALL Together In 5 Steps
Step1/5: Create New Application Create new  Mobile Qt Application 1 Select  Qt for PR1.3 <ul><li>Remove  files  </li></ul>...
2/5 Add Qt Declarative QT += declarative In  Project.pro  file add 2 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 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 &quot;clock.js&quot; as MyClock … Text { id:tx...
Demo Angry Developer
Steps to Develop FAST on
Get Qt SDK with Qt Quick http://get.qt.nokia.com Download MeeGo http://meego.com/downloads Deploy using MADDE http://wiki....
Upcoming SlideShare
Loading in...5
×

QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @iRajLal

4,570

Published on

Build 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. A tutorial with live demos targeted to beginner to intermediate Mobile developers interested in developing mobile applications on Linux based Mobile Devices. No C++ required.

Published in: Technology
2 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,570
On Slideshare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
46
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide
  • SLIDE 1: There is a very REAL Mobile Apps Opportunity -------------------------------------------------------- 2010 - xyz Million $ -&gt; 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 fun 3. 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 $ -&gt; 2013 - abc Million dollars 2010- Growth Distimo report
  • SLIDE 2: About MeeGo ---------------------- What is MeeGo ? MeeGo is a Linux-based open source mobile operating system targeted to mobile devices and consumer electronics market. MeeGo is hosted by the Linux Foundation. WHAT MAKES MEEGO EXCITING ?
  • 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 systems You can go to http://meego.com/downloads and download the MeeGo OS v 1.1 for smartphones, IVI and Netbook It&apos;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 ?
  • 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 fun 3. 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 5: GOAL 1: SDK (the IDE, debugger, simulator, everything) ------------------------------------------------------------------- The QT SDK needed to develop and the Device is available TODAY
  • SLIDE 5: GOAL 1: SDK (the IDE, debugger, simulator, everything) ------------------------------------------------------------------- The QT SDK needed to develop and the Device is available TODAY
  • SLIDE 5: GOAL 1: SDK (the IDE, debugger, simulator, everything) ------------------------------------------------------------------- The QT SDK needed to develop and the Device is available TODAY
  • SLIDE 5: GOAL 1: SDK (the IDE, debugger, simulator, everything) ------------------------------------------------------------------- The QT SDK needed to develop and the Device is available TODAY
  • SLIDE 5: GOAL 1: SDK (the IDE, debugger, simulator, everything) ------------------------------------------------------------------- The QT SDK needed to develop and the Device is available TODAY
  • SLIDE 5: GOAL 1: SDK (the IDE, debugger, simulator, everything) ------------------------------------------------------------------- The QT SDK needed to develop and the Device is available TODAY
  • 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 ------------------------
  • QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @iRajLal

    1. 1. QML & JavaScript on MeeGo Rajesh Lal MeeGo Team, Nokia Silicon Valley FUN with
    2. 2. Tools Available Advanced Graphics & Animation Rich Mobile Apps 3 Steps for MeeGo Development ( with demo )
    3. 3. Mobile Apps Revenue ($ Million) http://www.gartner.com/it/page.jsp?id=1282413 4,250 6,770   29,500 (estimated) Worldwide Total Revenue
    4. 4. What is MeeGo is a Linux-based open source mobile operating system Targeted to mobile devices & consumer electronics
    5. 5. What makes MeeGo Exciting ? Fully Open Source Linux Foundation Target Multiple devices <ul><ul><li>Smart phones, Tablets, Net books, </li></ul></ul><ul><ul><li>In-Vehicle Infotainment (IVI) </li></ul></ul><ul><ul><li>SmartTV, IPTV-boxes </li></ul></ul><ul><ul><li>MeeGo V1.1 Available Today </li></ul></ul>
    6. 6. 3 Steps to FAST MeeGo Development Tools Available Advanced Graphics & Animation Rich Mobile Apps TODAY Qt Quick & QML JavaScript
    7. 7. Step1: Development Environment <ul><li>Qt Application Framework </li></ul><ul><li>IDE – Qt Creator </li></ul><ul><li>Qt UI/GUI Designer </li></ul><ul><li>Qemu Emulator </li></ul><ul><li>Smartphone Simulator </li></ul><ul><li>… and we have real device </li></ul>Available Today
    8. 8. Qt Application Framework
    9. 9. Integrated Development Environment Qt Creator
    10. 10. Qt Designer <ul><li>UI Designer </li></ul><ul><li>GUI Designer </li></ul>
    11. 11. Simulator Simulator Storage Network Location Contacts Sensors Gallery Camera {
    12. 12. … and the Device N900 MeeGo
    13. 13. Step 2. Advanced Graphics & Animations Declarative Runtime Qt Meta Object Language(QML) Quick Designer Qt Quick
    14. 14. QML = Powerful Declarative Language
    15. 15. Creating a Game in Qt Quick Angry Developer
    16. 16. <ul><li>Cutting Edge UI </li></ul><ul><li>JavaScript binding </li></ul><ul><li>Putting it Together </li></ul>Creating a Game in Qt Quick Three Parts
    17. 17. Demo: Angry Developer Playing Moving
    18. 18. Angry Developer: Missed Angry Missed
    19. 19. Angry Developer: Hit “Hurrah!” Happy Destroyed
    20. 20. QML Elements
    21. 21. State Change Playing Angry Happy Pig Moving Pig Destroyed
    22. 22. State Changes
    23. 23. Ball Animation Bouncing Ball Animation Throw Transition
    24. 24. Bouncing Ball animation
    25. 25. Throw Transition
    26. 26. QML Logic (2 Timers) Timers for Pig’s Movement Timers for Hit or Miss
    27. 27. Timer Pig’s Movement
    28. 28. Timer Hit or Miss
    29. 29. Step 3. Rich Mobile Apps JavaScript Expressions Import JavaScript Files RSS, XML, JSON, REST Multi Threaded JavaScript
    30. 30. JavaScript to build Mobile Apps QML JavaScript C++ is not Required Qt Container
    31. 31. JavaScript file: Clock.js
    32. 32. QML Binding
    33. 33. JavaScript to build Mobile Apps Putting it ALL Together In 5 Steps
    34. 34. Step1/5: Create New Application Create new Mobile Qt Application 1 Select Qt for PR1.3 <ul><li>Remove files </li></ul><ul><li>mainwindow.ui </li></ul><ul><li>mainwindow.h </li></ul><ul><li>mainwindow.cpp </li></ul>
    35. 35. 2/5 Add Qt Declarative QT += declarative In Project.pro file add 2 In our case add this to NativeQMLJS.pro
    36. 36. 3/5 Add Qt Declarative 3 In main.cpp, include QtDeclarative and add code
    37. 37. 4/5 Add Files Add QML file , Images and JavaScript File as resources * Make sure your JavaScript file name is lowercase
    38. 38. 5/5 Add the Binding Add the binding in QML file and call JavaScript import &quot;clock.js&quot; as MyClock … Text { id:txttime text: MyClock.gettime() }
    39. 39. Demo Angry Developer
    40. 40. Steps to Develop FAST on
    41. 41. Get Qt SDK with Qt Quick http://get.qt.nokia.com Download MeeGo http://meego.com/downloads Deploy using MADDE http://wiki.maemo.org/MADDE/QtCreator_integration_for_windows Questions Rajesh.Lal@nokia.com @rajeshlalnokia THANK YOU
    1. ¿Le ha llamado la atención una diapositiva en particular?

      Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

    ×