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...
Próximos SlideShares
Carregando em…5
×

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

4.865 visualizações

Publicada em

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.

Publicada em: Negócios, Tecnologia

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

×