Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Build Cutting-edge Mobile Apps <br />Using QML & JavaScript<br />Rajesh Lal<br />MeeGo Team, Nokia Silicon Valley<br />
3 Steps for MeeGo Development<br />+<br />=<br />MeeGo App<br />Cutting-edge<br />Rich Feature<br />
Mobile Apps Total Revenue ($ Million) <br />6,770<br /> 29,500<br />(estimated)<br />4,250<br />Worldwide<br />http://www....
  What makes                       Exciting ?<br />Fully Open Source <br />Linux Foundation<br />Target Multiple devices <...
  MeeGo Development Environment<br /><ul><li> Qt Application Framework
 IDE – Qt Creator
Qt Quick
 Qt UI Designer
 Qemu Emulator
 Smartphone Simulator</li></ul>… and we have a device to test<br />Available Today<br />
   3 Steps to Develop FAST on MeeGo<br />+<br />=<br />Cutting-edge UI  <br />Angry Developer<br />Rich Mobile Apps<br />Q...
  Cutting-edge Graphics & Animation<br />Cutting Edge<br />Qt Quick<br />QML <br />Declarative Runtime<br />Quick Designer...
 QML = Powerful Declarative Language<br />
          Creating a Game<br />Angry Developer<br />
          Creating a Game using Qt Quick<br />Cutting Edge UI<br />1 QML file & images<br />JavaScript binding  <br />1 Ja...
 Game: Angry Developer <br />Moving<br />Playing<br />
 Angry Developer: Missed<br />Missed<br />Angry<br />
 Angry Developer: Hit “Hurrah!”<br />Destroyed<br />Happy<br />
 QML Elements<br />
 State Change<br />Pig Moving<br />Pig Destroyed<br />Playing<br />Angry<br />Happy<br />
 State Change<br />
 Ball Animation<br />Bouncing Ball Animation<br />Throw Transition<br />
          Bouncing Ball Animation<br />
          Throw Transition<br />
          QML Logic (2 Timers)<br />Pig’s Random Movement<br /> Hit or Miss<br />
          Timer Pig’s Movement<br />
          Timer Hit or Miss<br />
  Step 2. Rich Mobile Apps<br />JavaScript Expressions<br />Import JavaScript Files<br />RSS, XML, JSON, REST<br />Multi T...
 JavaScript to build Rich Features<br />Qt Container<br />JavaScript<br />QML<br />C++ is not Required<br />
            JavaScript file: Clock.js<br />
          QML Binding<br />
Putting the Game Together<br />In 5easy Steps<br />
          Step1/5: Create New Application<br />Create new Mobile Qt Application<br />1<br />Select  Qt for PR1.3<br />Remo...
mainwindow.h
  mainwindow.cpp</li></li></ul><li>            2/5 Add Qt Declarative<br />In Project.pro file add<br />2<br />QT += decla...
Upcoming SlideShare
Loading in …5
×

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

4,959 views

Published on

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.

Published in: Business, Technology

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

  1. 1. Build Cutting-edge Mobile Apps <br />Using QML & JavaScript<br />Rajesh Lal<br />MeeGo Team, Nokia Silicon Valley<br />
  2. 2. 3 Steps for MeeGo Development<br />+<br />=<br />MeeGo App<br />Cutting-edge<br />Rich Feature<br />
  3. 3. Mobile Apps Total Revenue ($ Million) <br />6,770<br /> 29,500<br />(estimated)<br />4,250<br />Worldwide<br />http://www.gartner.com/it/page.jsp?id=1282413<br />
  4. 4. What makes Exciting ?<br />Fully Open Source <br />Linux Foundation<br />Target Multiple devices <br /> Available Today<br />MeeGo V1.1 - Handsets<br />MeeGo V1.1 - Net books<br />MeeGo V1.1 - In-Vehicle Infotainment<br />… and SmartTV, IPTV-boxes, Tablets <br />
  5. 5. MeeGo Development Environment<br /><ul><li> Qt Application Framework
  6. 6. IDE – Qt Creator
  7. 7. Qt Quick
  8. 8. Qt UI Designer
  9. 9. Qemu Emulator
  10. 10. Smartphone Simulator</li></ul>… and we have a device to test<br />Available Today<br />
  11. 11. 3 Steps to Develop FAST on MeeGo<br />+<br />=<br />Cutting-edge UI <br />Angry Developer<br />Rich Mobile Apps<br />Qt Quick & QML <br />Game<br />JavaScript<br />
  12. 12. Cutting-edge Graphics & Animation<br />Cutting Edge<br />Qt Quick<br />QML <br />Declarative Runtime<br />Quick Designer<br />
  13. 13. QML = Powerful Declarative Language<br />
  14. 14. Creating a Game<br />Angry Developer<br />
  15. 15. Creating a Game using Qt Quick<br />Cutting Edge UI<br />1 QML file & images<br />JavaScript binding <br />1 JavaScript file<br />Putting it Together<br />
  16. 16. Game: Angry Developer <br />Moving<br />Playing<br />
  17. 17. Angry Developer: Missed<br />Missed<br />Angry<br />
  18. 18. Angry Developer: Hit “Hurrah!”<br />Destroyed<br />Happy<br />
  19. 19. QML Elements<br />
  20. 20. State Change<br />Pig Moving<br />Pig Destroyed<br />Playing<br />Angry<br />Happy<br />
  21. 21. State Change<br />
  22. 22. Ball Animation<br />Bouncing Ball Animation<br />Throw Transition<br />
  23. 23. Bouncing Ball Animation<br />
  24. 24. Throw Transition<br />
  25. 25. QML Logic (2 Timers)<br />Pig’s Random Movement<br /> Hit or Miss<br />
  26. 26. Timer Pig’s Movement<br />
  27. 27. Timer Hit or Miss<br />
  28. 28. Step 2. Rich Mobile Apps<br />JavaScript Expressions<br />Import JavaScript Files<br />RSS, XML, JSON, REST<br />Multi Threaded<br />JavaScript<br />
  29. 29. JavaScript to build Rich Features<br />Qt Container<br />JavaScript<br />QML<br />C++ is not Required<br />
  30. 30. JavaScript file: Clock.js<br />
  31. 31. QML Binding<br />
  32. 32. Putting the Game Together<br />In 5easy Steps<br />
  33. 33. Step1/5: Create New Application<br />Create new Mobile Qt Application<br />1<br />Select Qt for PR1.3<br />Remove files <br /><ul><li>mainwindow.ui
  34. 34. mainwindow.h
  35. 35. mainwindow.cpp</li></li></ul><li> 2/5 Add Qt Declarative<br />In Project.pro file add<br />2<br />QT += declarative<br />In our case add this to <br />NativeQMLJS.pro<br />
  36. 36. 3/5 Add Qt Declarative<br />3<br />In main.cpp, include QtDeclarative and add code<br />
  37. 37. 4/5 Add Files<br />QML file , <br />Images and <br />JavaScript File<br />as resources<br />Add <br />* Make sure your JavaScript file name is lowercase<br />
  38. 38. 5/5 Add the Binding<br />Add the binding in QML file and call JavaScript <br />import "clock.js" as MyClock<br />…<br />Text {<br /> id:txttime<br /> text: MyClock.gettime()<br />}<br />
  39. 39. Demo<br />Angry Developer<br />
  40. 40. 3 Steps for FAST development on <br />
  41. 41. Thank You<br />Download MeeGo<br />http://meego.com/downloads<br />Get Qt SDK with Qt Quick<br />http://get.qt.nokia.com<br />Know MADDE<br />http://wiki.maemo.org/MADDE<br />Questions <br />Rajesh.Lal@nokia.com @rajeshlalnokia <br />

×