Fun with QML and JavaScript         Mobile Apps for MeeGo                                    Rajesh Lal                 Me...
Fast Development on         +                =QML          JavaScript       Mobile Apps
Mobile Apps Download          Paid                 http://distimo.com                 Free                 By 2013        ...
What is MeeGo                   is a Linux-based open source                          mobile operating system Targeted to ...
What makes                 Exciting ?    Fully Open Source     Linux Foundation                                  Available...
MeeGo Development Environment                   • Qt Application Framework                   • IDE – Qt Creator           ...
3 Steps to Develop FAST on MeeGo                   +                   = Cutting-edge UI       Rich Features       Mobile ...
4 Mobile Apps for MeeGo       Popularity                    Effort on MeeGo
1/4 News Apps on MeeGo            CNN News
1/4 News Apps on MeeGo         XML      Display UI   List/Grid        Reader    (Delegate)     View
1/4 News Apps on MeeGo XML Reader  http://rss.cnn.com/rss/magazines_fortune.rss
1/4 News Apps on MeeGo XML Reader
1/4 News Apps on MeeGo   Display UI (Delegate) Delegate is a component that creates an instance for each item in the model
1/4 News Apps on MeeGo Delegate
1/4 News Apps on MeeGoListView
1/4 News Apps on MeeGo      ListView     Grid View
1/4 News Apps on MeeGo Demo
2/4 Social Apps on MeeGo                               Access           REST       Auth.                                Ed...
2/4 Social Apps on MeeGo              Login thread CallLogin (name,pwd)                                                   ...
2/4 Social Apps on MeeGo     1.   API Call     2.   Login thread instance     3.   Worker Script     4.   Login.js with AJAX
2/4 Social Apps on MeeGo  API Call
2/4 Social Apps on MeeGo  Login Thread Instance
2/4 Social Apps on MeeGo  ScriptLogin.QML (Actual Thread)
2/4 Social Apps on MeeGo                           Login.js with AJAX
3/4 Tools on MeeGo         N900        Access Device Data
3/4 Tools on MeeGo          Device     Qt Mobility   JavaScript           Data         API         Binding
3/4 Tools on MeeGo                 JavaScript Expressions                 Import JavaScript Files                 Qt Mobil...
3/4 Tools on MeeGo: Clock.js
3/4 Tools on MeeGo: QML Binding
3/4 Tools on MeeGo: Qt Mobility  QML Plug-ins   Qt Mobility API  Gallery        Document Gallery API  Location       Locat...
3/4 Tools on MeeGo: Multimedia         import Qt 4.7         import QtMultimediaKit 1.1         ...           Audio {     ...
3/4 Tools on MeeGo: Location           import Qt 4.7           import QtMobility.location 1.1           Rectangle {       ...
3/4 Tools on MeeGo: Location Demo
4/4 Fun and Games on MeeGo            Angry Developer
4/4 Fun and Games on MeeGo                     State     Events        Graphics                   Animation   Binding
4/4 Fun and Games on MeeGo  Graphics     Animation      Binding  Elements       State       Property  Shapes       Transit...
4/4 Fun and Games on MeeGo   Playing                   Moving
4/4 Fun and Games on MeeGo                        Missed   Angry
4/4 Fun and Games on MeeGo                       Destroyed   Happy
4/4 Fun and Games: QML Elements
4/4 Fun and Games: State Change  Playing   Angry   Happy   Pig Moving   Pig Destroyed
4/4 Fun and Games: State Change
4/4 Fun and Games: Ball Animation  Bouncing Ball Animation   Throw Transition
4/4 Fun and Games: Bouncing Ball
4/4 Fun and Games: Throw Transition
4/4 Fun and Games: Logic Timers     Pig’s Random     Movement      Hit or Miss
4/4 Fun and Games: Pig Movement
4/4 Fun and Games: Hit or Miss
4/4 Fun and Games on MeeGo Demo       Angry Developer
3 Steps for FAST development on                         Develop Download                 Logic  Qt SDK                Java...
Thank You                    Download MeeGo                          http://meego.com/downloads            Get Qt SDK with...
Upcoming SlideShare
Loading in...5
×

Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal

5,423

Published on

Learn to develop News, Social, Tools and Fun & Game Apps 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: Technology, News & Politics
3 Comments
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
5,423
On Slideshare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
71
Comments
3
Likes
0
Embeds 0
No embeds

No notes for slide

Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel Kabuki, San Francisco @iRajLal

  1. 1. Fun with QML and JavaScript Mobile Apps for MeeGo Rajesh Lal MeeGo Team, Nokia Silicon Valley
  2. 2. Fast Development on + =QML JavaScript Mobile Apps
  3. 3. Mobile Apps Download Paid http://distimo.com Free By 2013 Total Revenue $29 billion+ Source: Gartner
  4. 4. What is MeeGo is a Linux-based open source mobile operating system Targeted to mobile devices & consumer electronics
  5. 5. What makes Exciting ? Fully Open Source Linux Foundation Available TodayTarget Multiple devices MeeGo V1.1 - Handsets MeeGo V1.1 - Net books MeeGo V1.1 - In-Vehicle Infotainment … and SmartTV, IPTV-boxes, Tablets
  6. 6. MeeGo Development Environment • Qt Application Framework • IDE – Qt Creator • Qt Quick & QML • Qt UI Designer • Qemu Emulator • Smartphone Simulator Available Today … and we have a device to test
  7. 7. 3 Steps to Develop FAST on MeeGo + = Cutting-edge UI Rich Features Mobile AppsQt Quick & QML JavaScript Fast
  8. 8. 4 Mobile Apps for MeeGo Popularity Effort on MeeGo
  9. 9. 1/4 News Apps on MeeGo CNN News
  10. 10. 1/4 News Apps on MeeGo XML Display UI List/Grid Reader (Delegate) View
  11. 11. 1/4 News Apps on MeeGo XML Reader http://rss.cnn.com/rss/magazines_fortune.rss
  12. 12. 1/4 News Apps on MeeGo XML Reader
  13. 13. 1/4 News Apps on MeeGo Display UI (Delegate) Delegate is a component that creates an instance for each item in the model
  14. 14. 1/4 News Apps on MeeGo Delegate
  15. 15. 1/4 News Apps on MeeGoListView
  16. 16. 1/4 News Apps on MeeGo ListView Grid View
  17. 17. 1/4 News Apps on MeeGo Demo
  18. 18. 2/4 Social Apps on MeeGo Access REST Auth. Edit API Welcome Data
  19. 19. 2/4 Social Apps on MeeGo Login thread CallLogin (name,pwd) Remote AJAX Login JSON API Call Worker Script CloudFrom QML
  20. 20. 2/4 Social Apps on MeeGo 1. API Call 2. Login thread instance 3. Worker Script 4. Login.js with AJAX
  21. 21. 2/4 Social Apps on MeeGo API Call
  22. 22. 2/4 Social Apps on MeeGo Login Thread Instance
  23. 23. 2/4 Social Apps on MeeGo ScriptLogin.QML (Actual Thread)
  24. 24. 2/4 Social Apps on MeeGo Login.js with AJAX
  25. 25. 3/4 Tools on MeeGo N900 Access Device Data
  26. 26. 3/4 Tools on MeeGo Device Qt Mobility JavaScript Data API Binding
  27. 27. 3/4 Tools on MeeGo JavaScript Expressions Import JavaScript Files Qt Mobility API JavaScript
  28. 28. 3/4 Tools on MeeGo: Clock.js
  29. 29. 3/4 Tools on MeeGo: QML Binding
  30. 30. 3/4 Tools on MeeGo: Qt Mobility QML Plug-ins Qt Mobility API Gallery Document Gallery API Location Location API Multimedia API includes audio and video Service Discovering and Framework connecting to services Messaging Messaging , email ,sms etc 30
  31. 31. 3/4 Tools on MeeGo: Multimedia import Qt 4.7 import QtMultimediaKit 1.1 ... Audio { id: myMedia source: “beethoven.wav" } MouseArea { id: playArea anchors.fill: parent onPressed: { myMedia.play() } } 31
  32. 32. 3/4 Tools on MeeGo: Location import Qt 4.7 import QtMobility.location 1.1 Rectangle { width: 500 height: 500 Map { id: myMap size.width: parent.width size.height: parent.height zoomLevel: 5 center: Coordinate { latitude: 101 longitude: 202 } } } 32
  33. 33. 3/4 Tools on MeeGo: Location Demo
  34. 34. 4/4 Fun and Games on MeeGo Angry Developer
  35. 35. 4/4 Fun and Games on MeeGo State Events Graphics Animation Binding
  36. 36. 4/4 Fun and Games on MeeGo Graphics Animation Binding Elements State Property Shapes Transitions JavaScript Text Transform. C++
  37. 37. 4/4 Fun and Games on MeeGo Playing Moving
  38. 38. 4/4 Fun and Games on MeeGo Missed Angry
  39. 39. 4/4 Fun and Games on MeeGo Destroyed Happy
  40. 40. 4/4 Fun and Games: QML Elements
  41. 41. 4/4 Fun and Games: State Change Playing Angry Happy Pig Moving Pig Destroyed
  42. 42. 4/4 Fun and Games: State Change
  43. 43. 4/4 Fun and Games: Ball Animation Bouncing Ball Animation Throw Transition
  44. 44. 4/4 Fun and Games: Bouncing Ball
  45. 45. 4/4 Fun and Games: Throw Transition
  46. 46. 4/4 Fun and Games: Logic Timers Pig’s Random Movement Hit or Miss
  47. 47. 4/4 Fun and Games: Pig Movement
  48. 48. 4/4 Fun and Games: Hit or Miss
  49. 49. 4/4 Fun and Games on MeeGo Demo Angry Developer
  50. 50. 3 Steps for FAST development on Develop Download Logic Qt SDK JavaScript Create UI QML
  51. 51. Thank You Download MeeGo http://meego.com/downloads Get Qt SDK with Qt Quick http://get.qt.nokia.com Know MADDE http://wiki.maemo.org/MADDE Questions Rajesh.Lal@nokia.com @rajeshlalnokia
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×