SlideShare a Scribd company logo
1 of 51
Download to read offline
Fun with QML and JavaScript
         Mobile Apps for MeeGo




                                    Rajesh Lal
                 MeeGo Team, Nokia Silicon Valley
Fast Development on



         +                =
QML          JavaScript       Mobile Apps
Mobile Apps Download

          Paid
                 http://distimo.com
                 Free                 By 2013

                                      Total
                                      Revenue

                                      $29 billion+


                                         Source: Gartner
What is MeeGo


                   is a Linux-based open source
                          mobile operating system

 Targeted to mobile devices & consumer electronics
What makes                 Exciting ?


    Fully Open Source

     Linux Foundation
                                  Available Today
Target Multiple devices        MeeGo V1.1 - Handsets
                              MeeGo V1.1 - Net books
                          MeeGo V1.1 - In-Vehicle Infotainment

                          … and SmartTV, IPTV-boxes, Tablets
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
3 Steps to Develop FAST on MeeGo



                   +                   =
 Cutting-edge UI       Rich Features       Mobile Apps

Qt Quick & QML         JavaScript           Fast
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 MeeGo
ListView
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.
                                Edit
            API      Welcome
                                Data
2/4 Social Apps on MeeGo


              Login thread
 CallLogin
 (name,pwd)
                                                    Remote
                                             AJAX
                                Login
                JSON

 API Call                    Worker Script          Cloud
From QML
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 Mobility API

    JavaScript
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       Location API
  Multimedia     API includes audio and
                 video
  Service        Discovering and
  Framework      connecting to services
  Messaging      Messaging , email ,sms etc



                                              30
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
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
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       Transitions   JavaScript
    Text       Transform.       C++
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                JavaScript



            Create UI
              QML
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

More Related Content

What's hot

Gerrit Code Review: how to script a plugin with Scala and Groovy
Gerrit Code Review: how to script a plugin with Scala and GroovyGerrit Code Review: how to script a plugin with Scala and Groovy
Gerrit Code Review: how to script a plugin with Scala and GroovyLuca Milanesio
 
GitOps Toolkit (Cloud Native Nordics Tech Talk)
GitOps Toolkit (Cloud Native Nordics Tech Talk)GitOps Toolkit (Cloud Native Nordics Tech Talk)
GitOps Toolkit (Cloud Native Nordics Tech Talk)Weaveworks
 
Writing Commits for You, Your Friends, and Your Future Self
Writing Commits for You, Your Friends, and Your Future SelfWriting Commits for You, Your Friends, and Your Future Self
Writing Commits for You, Your Friends, and Your Future SelfAll Things Open
 
如何透過 Golang 與 Heroku 來一鍵部署 臉書機器人與 Line Bot
如何透過 Golang 與 Heroku 來一鍵部署 臉書機器人與 Line Bot如何透過 Golang 與 Heroku 來一鍵部署 臉書機器人與 Line Bot
如何透過 Golang 與 Heroku 來一鍵部署 臉書機器人與 Line BotEvan Lin
 
Kubernetes GitOps featuring GitHub, Kustomize and ArgoCD
Kubernetes GitOps featuring GitHub, Kustomize and ArgoCDKubernetes GitOps featuring GitHub, Kustomize and ArgoCD
Kubernetes GitOps featuring GitHub, Kustomize and ArgoCDSunnyvale
 
Introduction to Kubernetes with demo
Introduction to Kubernetes with demoIntroduction to Kubernetes with demo
Introduction to Kubernetes with demoOpsta
 
WTF is GitOps and Why You Should Care?
WTF is GitOps and Why You Should Care?WTF is GitOps and Why You Should Care?
WTF is GitOps and Why You Should Care?Weaveworks
 
ID Android TechTalk Series #6 : Google Service and Gradle - Anton Nurdin Tuha...
ID Android TechTalk Series #6 : Google Service and Gradle - Anton Nurdin Tuha...ID Android TechTalk Series #6 : Google Service and Gradle - Anton Nurdin Tuha...
ID Android TechTalk Series #6 : Google Service and Gradle - Anton Nurdin Tuha...Dicoding
 
Docs or it didn’t happen
Docs or it didn’t happenDocs or it didn’t happen
Docs or it didn’t happenAll Things Open
 
Mobile Backend Development with Ktor
Mobile Backend Development with KtorMobile Backend Development with Ktor
Mobile Backend Development with KtorSina Rezaei
 
Moving to microservices from idea to production - GitLabJP meetup
Moving to microservices  from idea to production - GitLabJP meetupMoving to microservices  from idea to production - GitLabJP meetup
Moving to microservices from idea to production - GitLabJP meetupGuenjun Yoo
 
Building our Component Library
Building our Component LibraryBuilding our Component Library
Building our Component LibraryClement Ho
 
Speed up Continuous Delivery with BigData Analytics
Speed up Continuous Delivery with BigData AnalyticsSpeed up Continuous Delivery with BigData Analytics
Speed up Continuous Delivery with BigData AnalyticsLuca Milanesio
 
Unify logz with fluentd
Unify logz with fluentdUnify logz with fluentd
Unify logz with fluentdSoluto
 
Microservices in Golang
Microservices in GolangMicroservices in Golang
Microservices in GolangMo'ath Qasim
 
Gerrit jenkins-big data-continuous-delivery
Gerrit jenkins-big data-continuous-deliveryGerrit jenkins-big data-continuous-delivery
Gerrit jenkins-big data-continuous-deliveryLuca Milanesio
 
Gitops: the kubernetes way
Gitops: the kubernetes wayGitops: the kubernetes way
Gitops: the kubernetes waysparkfabrik
 
Multiplatform Apps with Spring, Kotlin, and RSocket
Multiplatform Apps with Spring, Kotlin, and RSocketMultiplatform Apps with Spring, Kotlin, and RSocket
Multiplatform Apps with Spring, Kotlin, and RSocketVMware Tanzu
 

What's hot (20)

Gerrit Code Review: how to script a plugin with Scala and Groovy
Gerrit Code Review: how to script a plugin with Scala and GroovyGerrit Code Review: how to script a plugin with Scala and Groovy
Gerrit Code Review: how to script a plugin with Scala and Groovy
 
GitOps Toolkit (Cloud Native Nordics Tech Talk)
GitOps Toolkit (Cloud Native Nordics Tech Talk)GitOps Toolkit (Cloud Native Nordics Tech Talk)
GitOps Toolkit (Cloud Native Nordics Tech Talk)
 
Writing Commits for You, Your Friends, and Your Future Self
Writing Commits for You, Your Friends, and Your Future SelfWriting Commits for You, Your Friends, and Your Future Self
Writing Commits for You, Your Friends, and Your Future Self
 
如何透過 Golang 與 Heroku 來一鍵部署 臉書機器人與 Line Bot
如何透過 Golang 與 Heroku 來一鍵部署 臉書機器人與 Line Bot如何透過 Golang 與 Heroku 來一鍵部署 臉書機器人與 Line Bot
如何透過 Golang 與 Heroku 來一鍵部署 臉書機器人與 Line Bot
 
Kubernetes GitOps featuring GitHub, Kustomize and ArgoCD
Kubernetes GitOps featuring GitHub, Kustomize and ArgoCDKubernetes GitOps featuring GitHub, Kustomize and ArgoCD
Kubernetes GitOps featuring GitHub, Kustomize and ArgoCD
 
Introduction to Kubernetes with demo
Introduction to Kubernetes with demoIntroduction to Kubernetes with demo
Introduction to Kubernetes with demo
 
WTF is GitOps and Why You Should Care?
WTF is GitOps and Why You Should Care?WTF is GitOps and Why You Should Care?
WTF is GitOps and Why You Should Care?
 
ID Android TechTalk Series #6 : Google Service and Gradle - Anton Nurdin Tuha...
ID Android TechTalk Series #6 : Google Service and Gradle - Anton Nurdin Tuha...ID Android TechTalk Series #6 : Google Service and Gradle - Anton Nurdin Tuha...
ID Android TechTalk Series #6 : Google Service and Gradle - Anton Nurdin Tuha...
 
Docs or it didn’t happen
Docs or it didn’t happenDocs or it didn’t happen
Docs or it didn’t happen
 
Mobile Backend Development with Ktor
Mobile Backend Development with KtorMobile Backend Development with Ktor
Mobile Backend Development with Ktor
 
Moving to microservices from idea to production - GitLabJP meetup
Moving to microservices  from idea to production - GitLabJP meetupMoving to microservices  from idea to production - GitLabJP meetup
Moving to microservices from idea to production - GitLabJP meetup
 
Building our Component Library
Building our Component LibraryBuilding our Component Library
Building our Component Library
 
Speed up Continuous Delivery with BigData Analytics
Speed up Continuous Delivery with BigData AnalyticsSpeed up Continuous Delivery with BigData Analytics
Speed up Continuous Delivery with BigData Analytics
 
Unify logz with fluentd
Unify logz with fluentdUnify logz with fluentd
Unify logz with fluentd
 
Microservices in Golang
Microservices in GolangMicroservices in Golang
Microservices in Golang
 
Gerrit jenkins-big data-continuous-delivery
Gerrit jenkins-big data-continuous-deliveryGerrit jenkins-big data-continuous-delivery
Gerrit jenkins-big data-continuous-delivery
 
Deep dive into serverless on Google Cloud
Deep dive into serverless on Google CloudDeep dive into serverless on Google Cloud
Deep dive into serverless on Google Cloud
 
Gitops: the kubernetes way
Gitops: the kubernetes wayGitops: the kubernetes way
Gitops: the kubernetes way
 
Multiplatform Apps with Spring, Kotlin, and RSocket
Multiplatform Apps with Spring, Kotlin, and RSocketMultiplatform Apps with Spring, Kotlin, and RSocket
Multiplatform Apps with Spring, Kotlin, and RSocket
 
GitOps with Gitkube
GitOps with GitkubeGitOps with Gitkube
GitOps with Gitkube
 

Viewers also liked

Viewers also liked (8)

Intro to QML / Declarative UI
Intro to QML / Declarative UIIntro to QML / Declarative UI
Intro to QML / Declarative UI
 
QtQuick Day 4
QtQuick Day 4QtQuick Day 4
QtQuick Day 4
 
QML demo for makerpro (1)
QML demo for makerpro (1)QML demo for makerpro (1)
QML demo for makerpro (1)
 
Hello, QML
Hello, QMLHello, QML
Hello, QML
 
QtQuick Day 2
QtQuick Day 2QtQuick Day 2
QtQuick Day 2
 
QtQuick Day 3
QtQuick Day 3QtQuick Day 3
QtQuick Day 3
 
Qt Qml
Qt QmlQt Qml
Qt Qml
 
QtQuick Day 1
QtQuick Day 1QtQuick Day 1
QtQuick Day 1
 

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

Meego의 현재와 미래(2)
Meego의 현재와 미래(2)Meego의 현재와 미래(2)
Meego의 현재와 미래(2)mosaicnet
 
Introduction to Application Development in Python and Gtk+ / Hildon @ Maemo 5
Introduction to Application Development in Python and Gtk+ / Hildon @ Maemo 5Introduction to Application Development in Python and Gtk+ / Hildon @ Maemo 5
Introduction to Application Development in Python and Gtk+ / Hildon @ Maemo 5Amanda Lam
 
What's new and next for mobile development with .NET
What's new and next for mobile development with .NETWhat's new and next for mobile development with .NET
What's new and next for mobile development with .NETJames Montemagno
 
QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @...
QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @...QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @...
QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @...Raj Lal
 
MeeGo Architecture
MeeGo ArchitectureMeeGo Architecture
MeeGo ArchitectureHiroshi Doyu
 
Solving Enteprise Mobility Considerations with Telerik Mobile Platform
Solving Enteprise Mobility Considerations with Telerik Mobile PlatformSolving Enteprise Mobility Considerations with Telerik Mobile Platform
Solving Enteprise Mobility Considerations with Telerik Mobile PlatformLohith Goudagere Nagaraj
 
Build once deploy everywhere using the telerik platform
Build once deploy everywhere using the telerik platformBuild once deploy everywhere using the telerik platform
Build once deploy everywhere using the telerik platformAspenware
 
A Glimpse On MeeGo
A Glimpse On MeeGoA Glimpse On MeeGo
A Glimpse On MeeGoAmanda Lam
 
Mobile Services with Qt
Mobile Services with QtMobile Services with Qt
Mobile Services with QtEspen Riskedal
 
Basic power point presentation on the following info., for Whole F.docx
Basic power point presentation on the following info., for Whole F.docxBasic power point presentation on the following info., for Whole F.docx
Basic power point presentation on the following info., for Whole F.docxikirkton
 
Social App Development with Qt
Social App Development with QtSocial App Development with Qt
Social App Development with QtAndri Yadi
 
Geocortex technology update
Geocortex technology update  Geocortex technology update
Geocortex technology update Geodata AS
 
Microservices for the Masses with Spring Boot, JHipster, and OAuth - Utah JUG...
Microservices for the Masses with Spring Boot, JHipster, and OAuth - Utah JUG...Microservices for the Masses with Spring Boot, JHipster, and OAuth - Utah JUG...
Microservices for the Masses with Spring Boot, JHipster, and OAuth - Utah JUG...Matt Raible
 
Intro to Open source. Amit Bhayani
Intro to Open source. Amit BhayaniIntro to Open source. Amit Bhayani
Intro to Open source. Amit Bhayaniguest2a6108
 
Mozilla And Open Web
Mozilla And Open WebMozilla And Open Web
Mozilla And Open WebBrian King
 
Importance Of The Maemo Community Randall Arnold
Importance Of The Maemo Community Randall ArnoldImportance Of The Maemo Community Randall Arnold
Importance Of The Maemo Community Randall ArnoldAshley Walker
 

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

Meego의 현재와 미래(2)
Meego의 현재와 미래(2)Meego의 현재와 미래(2)
Meego의 현재와 미래(2)
 
Introduction to Application Development in Python and Gtk+ / Hildon @ Maemo 5
Introduction to Application Development in Python and Gtk+ / Hildon @ Maemo 5Introduction to Application Development in Python and Gtk+ / Hildon @ Maemo 5
Introduction to Application Development in Python and Gtk+ / Hildon @ Maemo 5
 
What's new and next for mobile development with .NET
What's new and next for mobile development with .NETWhat's new and next for mobile development with .NET
What's new and next for mobile development with .NET
 
QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @...
QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @...QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @...
QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @...
 
MeeGo Mobile OS
MeeGo Mobile OSMeeGo Mobile OS
MeeGo Mobile OS
 
MeeGo Architecture
MeeGo ArchitectureMeeGo Architecture
MeeGo Architecture
 
Solving Enteprise Mobility Considerations with Telerik Mobile Platform
Solving Enteprise Mobility Considerations with Telerik Mobile PlatformSolving Enteprise Mobility Considerations with Telerik Mobile Platform
Solving Enteprise Mobility Considerations with Telerik Mobile Platform
 
Micro Frontends
Micro FrontendsMicro Frontends
Micro Frontends
 
Build once deploy everywhere using the telerik platform
Build once deploy everywhere using the telerik platformBuild once deploy everywhere using the telerik platform
Build once deploy everywhere using the telerik platform
 
A Glimpse On MeeGo
A Glimpse On MeeGoA Glimpse On MeeGo
A Glimpse On MeeGo
 
Mobile Services with Qt
Mobile Services with QtMobile Services with Qt
Mobile Services with Qt
 
Basic power point presentation on the following info., for Whole F.docx
Basic power point presentation on the following info., for Whole F.docxBasic power point presentation on the following info., for Whole F.docx
Basic power point presentation on the following info., for Whole F.docx
 
Social App Development with Qt
Social App Development with QtSocial App Development with Qt
Social App Development with Qt
 
Geocortex technology update
Geocortex technology update  Geocortex technology update
Geocortex technology update
 
Microservices for the Masses with Spring Boot, JHipster, and OAuth - Utah JUG...
Microservices for the Masses with Spring Boot, JHipster, and OAuth - Utah JUG...Microservices for the Masses with Spring Boot, JHipster, and OAuth - Utah JUG...
Microservices for the Masses with Spring Boot, JHipster, and OAuth - Utah JUG...
 
Intro to Open source. Amit Bhayani
Intro to Open source. Amit BhayaniIntro to Open source. Amit Bhayani
Intro to Open source. Amit Bhayani
 
Mozilla And Open Web
Mozilla And Open WebMozilla And Open Web
Mozilla And Open Web
 
Importance Of The Maemo Community Randall Arnold
Importance Of The Maemo Community Randall ArnoldImportance Of The Maemo Community Randall Arnold
Importance Of The Maemo Community Randall Arnold
 
MeeGo presentation
MeeGo presentationMeeGo presentation
MeeGo presentation
 
Meego Mobile OS
Meego Mobile OSMeego Mobile OS
Meego Mobile OS
 

More from Raj Lal

Teamcalendar.AI presskit 1.0
Teamcalendar.AI presskit 1.0Teamcalendar.AI presskit 1.0
Teamcalendar.AI presskit 1.0Raj Lal
 
UX Workshop: How to design a product with great user experience
UX Workshop: How to design a product with great user experienceUX Workshop: How to design a product with great user experience
UX Workshop: How to design a product with great user experienceRaj Lal
 
Workshop Stanford University - 28th July 2018 on Website Optimization
Workshop Stanford University - 28th July 2018 on Website Optimization  Workshop Stanford University - 28th July 2018 on Website Optimization
Workshop Stanford University - 28th July 2018 on Website Optimization Raj Lal
 
The art and science of website optimization
The art and science of website optimizationThe art and science of website optimization
The art and science of website optimizationRaj Lal
 
UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...
UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...
UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...Raj Lal
 
Why Toastmasters - The story of a fisherman
Why Toastmasters - The story of a fishermanWhy Toastmasters - The story of a fisherman
Why Toastmasters - The story of a fishermanRaj Lal
 
Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...
Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...
Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...Raj Lal
 
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...Raj Lal
 
Designing Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLal
Designing Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLalDesigning Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLal
Designing Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLalRaj Lal
 
Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bendRaj Lal
 
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...Raj Lal
 
Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...
Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...
Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...Raj Lal
 
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...Raj Lal
 
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...Raj Lal
 
Developing Apps for Nokia Windows Phone VSLiv Conference May 15, 2012 @iRajLal
Developing Apps for Nokia Windows Phone  VSLiv Conference May 15, 2012 @iRajLalDeveloping Apps for Nokia Windows Phone  VSLiv Conference May 15, 2012 @iRajLal
Developing Apps for Nokia Windows Phone VSLiv Conference May 15, 2012 @iRajLalRaj Lal
 
Upgrade Your Website to HTML5 - VSLive Conference New York @iRajLal
Upgrade Your Website to HTML5 - VSLive Conference New York  @iRajLalUpgrade Your Website to HTML5 - VSLive Conference New York  @iRajLal
Upgrade Your Website to HTML5 - VSLive Conference New York @iRajLalRaj Lal
 
Fun with silverlight4 Table of Content @iRajLal
Fun with silverlight4 Table of Content @iRajLalFun with silverlight4 Table of Content @iRajLal
Fun with silverlight4 Table of Content @iRajLalRaj Lal
 
Honeycomb User Interface Design @iRajLal
Honeycomb User Interface Design @iRajLalHoneycomb User Interface Design @iRajLal
Honeycomb User Interface Design @iRajLalRaj Lal
 
Two thumbs User Interface @iRajLal
Two thumbs User Interface @iRajLalTwo thumbs User Interface @iRajLal
Two thumbs User Interface @iRajLalRaj Lal
 
10 Tips for Mobile Website Design - MeeGo Conference Dublin, Ireland 11/2010 ...
10 Tips for Mobile Website Design - MeeGo Conference Dublin, Ireland 11/2010 ...10 Tips for Mobile Website Design - MeeGo Conference Dublin, Ireland 11/2010 ...
10 Tips for Mobile Website Design - MeeGo Conference Dublin, Ireland 11/2010 ...Raj Lal
 

More from Raj Lal (20)

Teamcalendar.AI presskit 1.0
Teamcalendar.AI presskit 1.0Teamcalendar.AI presskit 1.0
Teamcalendar.AI presskit 1.0
 
UX Workshop: How to design a product with great user experience
UX Workshop: How to design a product with great user experienceUX Workshop: How to design a product with great user experience
UX Workshop: How to design a product with great user experience
 
Workshop Stanford University - 28th July 2018 on Website Optimization
Workshop Stanford University - 28th July 2018 on Website Optimization  Workshop Stanford University - 28th July 2018 on Website Optimization
Workshop Stanford University - 28th July 2018 on Website Optimization
 
The art and science of website optimization
The art and science of website optimizationThe art and science of website optimization
The art and science of website optimization
 
UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...
UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...
UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...
 
Why Toastmasters - The story of a fisherman
Why Toastmasters - The story of a fishermanWhy Toastmasters - The story of a fisherman
Why Toastmasters - The story of a fisherman
 
Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...
Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...
Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...
 
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...
 
Designing Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLal
Designing Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLalDesigning Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLal
Designing Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLal
 
Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bend
 
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
 
Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...
Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...
Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...
 
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...
 
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
 
Developing Apps for Nokia Windows Phone VSLiv Conference May 15, 2012 @iRajLal
Developing Apps for Nokia Windows Phone  VSLiv Conference May 15, 2012 @iRajLalDeveloping Apps for Nokia Windows Phone  VSLiv Conference May 15, 2012 @iRajLal
Developing Apps for Nokia Windows Phone VSLiv Conference May 15, 2012 @iRajLal
 
Upgrade Your Website to HTML5 - VSLive Conference New York @iRajLal
Upgrade Your Website to HTML5 - VSLive Conference New York  @iRajLalUpgrade Your Website to HTML5 - VSLive Conference New York  @iRajLal
Upgrade Your Website to HTML5 - VSLive Conference New York @iRajLal
 
Fun with silverlight4 Table of Content @iRajLal
Fun with silverlight4 Table of Content @iRajLalFun with silverlight4 Table of Content @iRajLal
Fun with silverlight4 Table of Content @iRajLal
 
Honeycomb User Interface Design @iRajLal
Honeycomb User Interface Design @iRajLalHoneycomb User Interface Design @iRajLal
Honeycomb User Interface Design @iRajLal
 
Two thumbs User Interface @iRajLal
Two thumbs User Interface @iRajLalTwo thumbs User Interface @iRajLal
Two thumbs User Interface @iRajLal
 
10 Tips for Mobile Website Design - MeeGo Conference Dublin, Ireland 11/2010 ...
10 Tips for Mobile Website Design - MeeGo Conference Dublin, Ireland 11/2010 ...10 Tips for Mobile Website Design - MeeGo Conference Dublin, Ireland 11/2010 ...
10 Tips for Mobile Website Design - MeeGo Conference Dublin, Ireland 11/2010 ...
 

Recently uploaded

Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 

Recently uploaded (20)

Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 

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

  • 1. Fun with QML and JavaScript Mobile Apps for MeeGo Rajesh Lal MeeGo Team, Nokia Silicon Valley
  • 2. Fast Development on + = QML JavaScript Mobile Apps
  • 3. Mobile Apps Download Paid http://distimo.com Free By 2013 Total Revenue $29 billion+ Source: Gartner
  • 4. What is MeeGo is a Linux-based open source mobile operating system Targeted to mobile devices & consumer electronics
  • 5. What makes Exciting ? Fully Open Source Linux Foundation Available Today Target Multiple devices MeeGo V1.1 - Handsets MeeGo V1.1 - Net books MeeGo V1.1 - In-Vehicle Infotainment … and SmartTV, IPTV-boxes, Tablets
  • 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. 3 Steps to Develop FAST on MeeGo + = Cutting-edge UI Rich Features Mobile Apps Qt Quick & QML JavaScript Fast
  • 8. 4 Mobile Apps for MeeGo Popularity Effort on MeeGo
  • 9. 1/4 News Apps on MeeGo CNN News
  • 10. 1/4 News Apps on MeeGo XML Display UI List/Grid Reader (Delegate) View
  • 11. 1/4 News Apps on MeeGo XML Reader http://rss.cnn.com/rss/magazines_fortune.rss
  • 12. 1/4 News Apps on MeeGo XML Reader
  • 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. 1/4 News Apps on MeeGo Delegate
  • 15. 1/4 News Apps on MeeGo ListView
  • 16. 1/4 News Apps on MeeGo ListView Grid View
  • 17. 1/4 News Apps on MeeGo Demo
  • 18. 2/4 Social Apps on MeeGo Access REST Auth. Edit API Welcome Data
  • 19. 2/4 Social Apps on MeeGo Login thread CallLogin (name,pwd) Remote AJAX Login JSON API Call Worker Script Cloud From QML
  • 20. 2/4 Social Apps on MeeGo 1. API Call 2. Login thread instance 3. Worker Script 4. Login.js with AJAX
  • 21. 2/4 Social Apps on MeeGo API Call
  • 22. 2/4 Social Apps on MeeGo Login Thread Instance
  • 23. 2/4 Social Apps on MeeGo ScriptLogin.QML (Actual Thread)
  • 24. 2/4 Social Apps on MeeGo Login.js with AJAX
  • 25. 3/4 Tools on MeeGo N900 Access Device Data
  • 26. 3/4 Tools on MeeGo Device Qt Mobility JavaScript Data API Binding
  • 27. 3/4 Tools on MeeGo JavaScript Expressions Import JavaScript Files Qt Mobility API JavaScript
  • 28. 3/4 Tools on MeeGo: Clock.js
  • 29. 3/4 Tools on MeeGo: QML Binding
  • 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. 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. 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. 3/4 Tools on MeeGo: Location Demo
  • 34. 4/4 Fun and Games on MeeGo Angry Developer
  • 35. 4/4 Fun and Games on MeeGo State Events Graphics Animation Binding
  • 36. 4/4 Fun and Games on MeeGo Graphics Animation Binding Elements State Property Shapes Transitions JavaScript Text Transform. C++
  • 37. 4/4 Fun and Games on MeeGo Playing Moving
  • 38. 4/4 Fun and Games on MeeGo Missed Angry
  • 39. 4/4 Fun and Games on MeeGo Destroyed Happy
  • 40. 4/4 Fun and Games: QML Elements
  • 41. 4/4 Fun and Games: State Change Playing Angry Happy Pig Moving Pig Destroyed
  • 42. 4/4 Fun and Games: State Change
  • 43. 4/4 Fun and Games: Ball Animation Bouncing Ball Animation Throw Transition
  • 44. 4/4 Fun and Games: Bouncing Ball
  • 45. 4/4 Fun and Games: Throw Transition
  • 46. 4/4 Fun and Games: Logic Timers Pig’s Random Movement Hit or Miss
  • 47. 4/4 Fun and Games: Pig Movement
  • 48. 4/4 Fun and Games: Hit or Miss
  • 49. 4/4 Fun and Games on MeeGo Demo Angry Developer
  • 50. 3 Steps for FAST development on Develop Download Logic Qt SDK JavaScript Create UI QML
  • 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