Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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...
Nächste SlideShare
Wird geladen in …5
×

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

6.749 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie, News & Politik

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

×