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.703 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
3 comentários
5 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
4.703
No SlideShare
0
A partir de incorporações
0
Número de incorporações
877
Ações
Compartilhamentos
0
Downloads
62
Comentários
3
Gostaram
5
Incorporações 0
Nenhuma incorporação

Nenhuma nota no 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 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 $ -&gt; 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&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 ?
  • 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 $ -&gt; 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

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

    ×