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....
Nächste SlideShare
Wird geladen in …5
×

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

5.273 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie

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

×