Download as PPS, PPTX
Uploaded byRaj Lal
QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @iRajLal
The document discusses developing mobile apps for MeeGo using Qt Quick and JavaScript. It outlines a 3 step process: 1) Set up a development environment with Qt Creator IDE and emulators. 2) Use Qt Quick's declarative runtime and JavaScript bindings for advanced graphics and animations. 3) Leverage JavaScript to build rich mobile apps by importing files, using expressions, and binding to QML. An example Angry Birds-style game app is demonstrated.
More Related Content
Similar to QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @iRajLal
QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @iRajLal
- 1. QML & JavaScripton MeeGo Rajesh Lal MeeGo Team, Nokia Silicon Valley FUN with
- 2. Tools Available Advanced Graphics & Animation Rich Mobile Apps 3 Steps for MeeGo Development ( with demo )
- 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. What is MeeGois a Linux-based open source mobile operating system Targeted to mobile devices & consumer electronics
- 5. What makes MeeGoExciting ? Fully Open Source Linux Foundation Target Multiple devices Smart phones, Tablets, Net books, In-Vehicle Infotainment (IVI) SmartTV, IPTV-boxes MeeGo V1.1 Available Today
- 6. 3 Steps toFAST MeeGo Development Tools Available Advanced Graphics & Animation Rich Mobile Apps TODAY Qt Quick & QML JavaScript
- 7. Step1: Development EnvironmentQt Application Framework IDE – Qt Creator Qt UI/GUI Designer Qemu Emulator Smartphone Simulator … and we have real device Available Today
- 8.
- 9. Integrated Development EnvironmentQt Creator
- 10. Qt Designer UIDesigner GUI Designer
- 11. Simulator Simulator Storage Network Location Contacts Sensors Gallery Camera {
- 12. … and theDevice N900 MeeGo
- 13. Step 2. AdvancedGraphics & Animations Declarative Runtime Qt Meta Object Language(QML) Quick Designer Qt Quick
- 14. QML = PowerfulDeclarative Language
- 15. Creating a Gamein Qt Quick Angry Developer
- 16. Cutting Edge UIJavaScript binding Putting it Together Creating a Game in Qt Quick Three Parts
- 17. Demo: Angry Developer Playing Moving
- 18. Angry Developer: MissedAngry Missed
- 19. Angry Developer: Hit“Hurrah!” Happy Destroyed
- 20.
- 21. State Change PlayingAngry Happy Pig Moving Pig Destroyed
- 22.
- 23. Ball Animation BouncingBall Animation Throw Transition
- 24.
- 25.
- 26. QML Logic (2Timers) Timer for Pig’s Movement Timer for Hit or Miss
- 27.
- 28. Timer Hit orMiss
- 29. Step 3. RichMobile Apps JavaScript Expressions Import JavaScript Files RSS, XML, JSON, REST Multi Threaded JavaScript
- 30. JavaScript to buildMobile Apps QML JavaScript C++ is not Required Qt Container
- 31.
- 32.
- 33. JavaScript to buildMobile Apps Putting it ALL Together In 5 Steps
- 34. Step1/5: Create NewApplication Create new Mobile Qt Application 1 Select Qt for PR1.3 Remove files mainwindow.ui mainwindow.h mainwindow.cpp
- 35. 2/5 Add QtDeclarative QT += declarative In Project.pro file add 2 In our case add this to NativeQMLJS.pro
- 36. 3/5 Add QtDeclarative 3 In main.cpp, include QtDeclarative and add code
- 37. 4/5 Add FilesAdd QML file , Images and JavaScript File as resources * Make sure your JavaScript file name is lowercase
- 38. 5/5 Add theBinding Add the binding in QML file and call JavaScript import "clock.js" as MyClock … Text { id:txttime text: MyClock.gettime() }
- 39.
- 40. Steps to DevelopFAST on
- 41. Get Qt SDKwith 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
Editor's Notes
- #2 SLIDE 1: There is a very REAL Mobile Apps Opportunity -------------------------------------------------------- 2010 - xyz Million $ -> 2013 - abc Million dollars 2010- Growth Distimo report
- #3 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
- #4 SLIDE 1: There is a very REAL Mobile Apps Opportunity -------------------------------------------------------- 2010 - xyz Million $ -> 2013 - abc Million dollars 2010- Growth Distimo report
- #5 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 ?
- #6 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'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 ?
- #7 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
- #8 SLIDE 5: GOAL 1: SDK (the IDE, debugger, simulator, everything) ------------------------------------------------------------------- The QT SDK needed to develop and the Device is available TODAY
- #9 SLIDE 5: GOAL 1: SDK (the IDE, debugger, simulator, everything) ------------------------------------------------------------------- The QT SDK needed to develop and the Device is available TODAY
- #10 SLIDE 5: GOAL 1: SDK (the IDE, debugger, simulator, everything) ------------------------------------------------------------------- The QT SDK needed to develop and the Device is available TODAY
- #11 SLIDE 5: GOAL 1: SDK (the IDE, debugger, simulator, everything) ------------------------------------------------------------------- The QT SDK needed to develop and the Device is available TODAY
- #12 SLIDE 5: GOAL 1: SDK (the IDE, debugger, simulator, everything) ------------------------------------------------------------------- The QT SDK needed to develop and the Device is available TODAY
- #13 SLIDE 5: GOAL 1: SDK (the IDE, debugger, simulator, everything) ------------------------------------------------------------------- The QT SDK needed to develop and the Device is available TODAY
- #14 SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
- #15 SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
- #16 SLIDE 8-12 : DEMO CLOCK ------------------------
- #17 SLIDE 8-12 : DEMO CLOCK ------------------------
- #18 SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
- #19 SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
- #20 SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
- #21 SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
- #22 SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
- #23 SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
- #24 SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
- #25 SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
- #26 SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
- #27 SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
- #28 SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
- #29 SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
- #30 SLIDE 6: GOAL 2: Qt Quick and QML ---------------------------------- QML language is truely Cutting Edge in terms of graphics and Animation capabilities
- #31 SLIDE 7: GOAL 3: JavaScript to build Mobile Apps ------------------------------------------------- The Logic for the Mobile Application can be developed in JavaScript
- #32 SLIDE 8-12 : DEMO CLOCK ------------------------
- #33 SLIDE 8-12 : DEMO CLOCK ------------------------
- #34 SLIDE 7: GOAL 3: JavaScript to build Mobile Apps ------------------------------------------------- The Logic for the Mobile Application can be developed in JavaScript
- #35 SLIDE 8-12 : DEMO CLOCK ------------------------
- #36 SLIDE 8-12 : DEMO CLOCK ------------------------
- #37 SLIDE 8-12 : DEMO CLOCK ------------------------
- #38 SLIDE 8-12 : DEMO CLOCK ------------------------
- #39 SLIDE 8-12 : DEMO CLOCK ------------------------
- #40 SLIDE 8-12 : DEMO CLOCK ------------------------
- #41 SLIDE 8-12 : DEMO CLOCK ------------------------