際際滷

際際滷Share a Scribd company logo
Tizen SDK and Web App Development
                          Cheng Luo
                        LinuxCon Europe 2012




Monday, 5 November 12
Agenda

    Tizen              2.0 alpha SDK

    Web            app development




Monday, 5 November 12
Tizen 2.0 alpha SDK

      IDE - Eclipse based

      Emulator - qemu based

      Web based (Chrome) simulator

      UI Builder

      Event Injector

      Remote inspector /Firebug

      Documentations & Sample codes

Monday, 5 November 12
Installing SDK

    The          SDK supports Windows and Ubuntu

    The          SDK Mac version is coming soon

    InstallationManager supports the snapshot-based or SDK
       image-based installation

    Pay  attention to prerequisites, specially on Ubuntu (JDK, JRE,
       qemu, VTx support and etc.)



Monday, 5 November 12
Monday, 5 November 12
Install JDK on Ubuntu

    Tizen              IDE is based on Oracle Java v7, not OpenJDK

    Oracle              doesnt allow re-distribute Java packages, so...

    oab-java6             a good script for installing oracle-jdk, oracle-jre on
       Ubuntu

    still need some tweaks to install the latest JDK-7u9 with oab-
       java6


    : https://github.com/鍖exiondotorg/oab-java6
Monday, 5 November 12
Running IDE on Ubuntu

    Install            libwebkitgtk-1.0-0, if you get error such as:

       Exception in thread "main" org.eclipse.swt.SWTError: No more
       handles [Unknown Mozilla path (MOZILLA_FIVE_HOME not set)]


    Install            Ajax Tool Framework (ATF) if Event Injector is not shown




     : http://tronprog.blogspot.co.uk/2012/05/eclipse-internal-web-browser-in-kubuntu.html

          http://wiki.eclipse.org/ATF/Installing
Monday, 5 November 12
Tizen 2.0 alpha new features




r Monday, 5 November 12
Tizen 2.0 alpha new features

                          Enhanced HTML5
                    WebKit2 WRT           screen orientation
                      multi-process              APIs
                    video subtitles    video caption
                   keygen details     battery status




r Monday, 5 November 12
Tizen 2.0 alpha new features

                          Enhanced HTML5                       Better IDE & SDK
                    WebKit2 WRT           screen orientation
                                                                smart installer
                      multi-process              APIs                                 snapshot-based
                    video subtitles    video caption           enhanced openGL ES       installation

                   keygen details     battery status            UI Builder        WebGL accelerated
                                                                                     emulator




r Monday, 5 November 12
Tizen 2.0 alpha new features

                          Enhanced HTML5                         Better IDE & SDK
                    WebKit2 WRT           screen orientation
                                                                  smart installer
                      multi-process              APIs                                   snapshot-based
                    video subtitles    video caption             enhanced openGL ES       installation

                   keygen details     battery status              UI Builder        WebGL accelerated
                                                                                       emulator

                                Web UI FW
                 content selection      shortcut scroll widget
                      context menu auto-divider
                expandable list
                                  virtual list



r Monday, 5 November 12
Tizen 2.0 alpha new features

                          Enhanced HTML5                         Better IDE & SDK
                    WebKit2 WRT           screen orientation
                                                                  smart installer
                      multi-process              APIs                                   snapshot-based
                    video subtitles    video caption             enhanced openGL ES       installation

                   keygen details     battery status              UI Builder        WebGL accelerated
                                                                                       emulator

                                Web UI FW                             More Device APIs
                 content selection      shortcut scroll widget
                                                                   download APIs    noti鍖cation APIs
                      context menu auto-divider
                expandable list                                                power control
                                  virtual list



r Monday, 5 November 12
Web apps on Tizen




Monday, 5 November 12
Web Apps
                            Mobile site           Hosted app             Packaged app
      UI                web page             generic UI               generic/native

      Store             search engine        app stores               app stores

                                             only add a manifest 鍖le
                        no need to install                           of鍖ine launching
      Pros              no memory footage
                                             low maintenance/memory
                                                                     access to device s APIs
                                             footage

                        security risk
      Cons              limited features
                                             require a server         maintenance




Monday, 5 November 12
Mobile Web


      <?xml&version="1.0"%encoding="UTF18"?>%

      <widget&xmlns="http://www.w3.org/ns/widgets"%
      xmlns:tizen="http://tizen.org/ns/widgets"%version="2.0%Beta"%
      viewmodes="fullscreen"%id="http://yourdomain/FacebookApp">%%%
      <icon&src=/slideshow/linuxcon-europe-2012-tizen-mini-summit/15198982/"icon.png"/>%%%
      <content&src="http://m.facebook.com"/>%%%
      <name>FacebookApp</name>&
      <access&origin&=&"*"/>%
      </widget>&




Monday, 5 November 12
Mobile Web
                                                                      EA SY




      <?xml&version="1.0"%encoding="UTF18"?>%

      <widget&xmlns="http://www.w3.org/ns/widgets"%
      xmlns:tizen="http://tizen.org/ns/widgets"%version="2.0%Beta"%
      viewmodes="fullscreen"%id="http://yourdomain/FacebookApp">%%%
      <icon&src=/slideshow/linuxcon-europe-2012-tizen-mini-summit/15198982/"icon.png"/>%%%
      <content&src="http://m.facebook.com"/>%%%
      <name>FacebookApp</name>&
      <access&origin&=&"*"/>%
      </widget>&




Monday, 5 November 12
Other Web Apps

                        webOS                       WebWorks                   Tizen

                                                                               tizen, Application,
                        enyo.kind, enyo.Animator,                              SystemInfo,
    Core                                            Core API
                        enyo.Signals,                                          Noti鍖cation, HTML5,
                                                                               CSS3

    AJAX                enyo.Aync, xhr, json, cookie jQuery.get, XMLHttpRquest jQuery.get

    Touch               Touch, ScrollMath,                                     jQuery touch events,
                                                    jQuery touch events
    events              ScrollStrategy, Scoller                                Tizen events

                                                                               jQueryMobile, Tizen
    UI                  onyx                        CSS
                                                                               Web UI


Monday, 5 November 12
Other Web Apps
                                                                         RITE
                                                                      REW
                                                              DE
                                                           CO
                        webOS                       WebWorks                   Tizen

                                                                               tizen, Application,
                        enyo.kind, enyo.Animator,                              SystemInfo,
    Core                                            Core API
                        enyo.Signals,                                          Noti鍖cation, HTML5,
                                                                               CSS3

    AJAX                enyo.Aync, xhr, json, cookie jQuery.get, XMLHttpRquest jQuery.get

    Touch               Touch, ScrollMath,                                     jQuery touch events,
                                                    jQuery touch events
    events              ScrollStrategy, Scoller                                Tizen events

                                                                               jQueryMobile, Tizen
    UI                  onyx                        CSS
                                                                               Web UI


Monday, 5 November 12
HTML5




Monday, 5 November 12
HTML5    CK
                               LU
                            OD
                          GO




Monday, 5 November 12
Webkit-e鍖 Rendering Flow

                        web view            Javascript
                                                                    Web core
                                               core

                            Evas Object
                                 (buffer)




                         UI FW              Cairo               Evas & Ecore


                                                         X Server

                         OpenGL ES/GL



Monday, 5 November 12
HTML5 compatibility test




Monday, 5 November 12
HTML5 compatibility test



                                    .1
                                  NO




Monday, 5 November 12
Tizen Device API




Monday, 5 November 12
Tizen Device API
                                              System Info
                        Alarm                                 LBS
                                Bluetooth
                                                 Filesystem
                  Application                                 Media Content
                                    Call
                                               NFC     Geocoder
                         Calendar
                                                                    Messaging
                                           Contact
                        Power
                                                     Time     Download
                                Noti鍖cation

Monday, 5 November 12
Demo




Monday, 5 November 12
Monday, 5 November 12
Build your UI

    Tizen              web UI framework

    jQuery              Mobile

    CSS3               animation




Monday, 5 November 12
Tizen Web UI vs Native



                                 vs.




Monday, 5 November 12
CSS3 animation - Flipboard




Monday, 5 November 12
CSS3 animation - Flipboard




Monday, 5 November 12
Porting web apps




Monday, 5 November 12
Case study: webOS Onyx




Monday, 5 November 12
Demo




Monday, 5 November 12
Monday, 5 November 12
Case Study: BlackBerry Aura




                        Portrait   Landscape


Monday, 5 November 12
After porting




Monday, 5 November 12
Screen Resolution
                                             720




                        1024
                                                9:16
   1280

                             17:10
   600




                        Playbook             Tizen HD


Monday, 5 November 12
Device API
                   var	
 acc	
 =	
 new	
 Vector(0,0);
                   acc.x	
 =	
 event.accelerationIncludingGravity.x;
                   acc.y	
 =	
 event.accelerationIncludingGravity.y;
                   var	
 accAngle	
 =	
 Math.atan2(-足acc.x,	
 acc.y);	
 //angle	
 between	
 the	
 rope	
 and	
 x	
 axis



                                     Z

                   Y
                                                              X




                             Playbook                                                                 Tizen HD


Monday, 5 November 12
The last mile - Packaging




Monday, 5 November 12
thank you
                             @chengluo
                        c.luo@samsung.com




Monday, 5 November 12

More Related Content

LinuxCon Europe 2012 - Tizen Mini Summit

  • 1. Tizen SDK and Web App Development Cheng Luo LinuxCon Europe 2012 Monday, 5 November 12
  • 2. Agenda Tizen 2.0 alpha SDK Web app development Monday, 5 November 12
  • 3. Tizen 2.0 alpha SDK IDE - Eclipse based Emulator - qemu based Web based (Chrome) simulator UI Builder Event Injector Remote inspector /Firebug Documentations & Sample codes Monday, 5 November 12
  • 4. Installing SDK The SDK supports Windows and Ubuntu The SDK Mac version is coming soon InstallationManager supports the snapshot-based or SDK image-based installation Pay attention to prerequisites, specially on Ubuntu (JDK, JRE, qemu, VTx support and etc.) Monday, 5 November 12
  • 6. Install JDK on Ubuntu Tizen IDE is based on Oracle Java v7, not OpenJDK Oracle doesnt allow re-distribute Java packages, so... oab-java6 a good script for installing oracle-jdk, oracle-jre on Ubuntu still need some tweaks to install the latest JDK-7u9 with oab- java6 : https://github.com/鍖exiondotorg/oab-java6 Monday, 5 November 12
  • 7. Running IDE on Ubuntu Install libwebkitgtk-1.0-0, if you get error such as: Exception in thread "main" org.eclipse.swt.SWTError: No more handles [Unknown Mozilla path (MOZILLA_FIVE_HOME not set)] Install Ajax Tool Framework (ATF) if Event Injector is not shown : http://tronprog.blogspot.co.uk/2012/05/eclipse-internal-web-browser-in-kubuntu.html http://wiki.eclipse.org/ATF/Installing Monday, 5 November 12
  • 8. Tizen 2.0 alpha new features r Monday, 5 November 12
  • 9. Tizen 2.0 alpha new features Enhanced HTML5 WebKit2 WRT screen orientation multi-process APIs video subtitles video caption keygen details battery status r Monday, 5 November 12
  • 10. Tizen 2.0 alpha new features Enhanced HTML5 Better IDE & SDK WebKit2 WRT screen orientation smart installer multi-process APIs snapshot-based video subtitles video caption enhanced openGL ES installation keygen details battery status UI Builder WebGL accelerated emulator r Monday, 5 November 12
  • 11. Tizen 2.0 alpha new features Enhanced HTML5 Better IDE & SDK WebKit2 WRT screen orientation smart installer multi-process APIs snapshot-based video subtitles video caption enhanced openGL ES installation keygen details battery status UI Builder WebGL accelerated emulator Web UI FW content selection shortcut scroll widget context menu auto-divider expandable list virtual list r Monday, 5 November 12
  • 12. Tizen 2.0 alpha new features Enhanced HTML5 Better IDE & SDK WebKit2 WRT screen orientation smart installer multi-process APIs snapshot-based video subtitles video caption enhanced openGL ES installation keygen details battery status UI Builder WebGL accelerated emulator Web UI FW More Device APIs content selection shortcut scroll widget download APIs noti鍖cation APIs context menu auto-divider expandable list power control virtual list r Monday, 5 November 12
  • 13. Web apps on Tizen Monday, 5 November 12
  • 14. Web Apps Mobile site Hosted app Packaged app UI web page generic UI generic/native Store search engine app stores app stores only add a manifest 鍖le no need to install of鍖ine launching Pros no memory footage low maintenance/memory access to device s APIs footage security risk Cons limited features require a server maintenance Monday, 5 November 12
  • 15. Mobile Web <?xml&version="1.0"%encoding="UTF18"?>% <widget&xmlns="http://www.w3.org/ns/widgets"% xmlns:tizen="http://tizen.org/ns/widgets"%version="2.0%Beta"% viewmodes="fullscreen"%id="http://yourdomain/FacebookApp">%%% <icon&src=/slideshow/linuxcon-europe-2012-tizen-mini-summit/15198982/"icon.png"/>%%% <content&src="http://m.facebook.com"/>%%% <name>FacebookApp</name>& <access&origin&=&"*"/>% </widget>& Monday, 5 November 12
  • 16. Mobile Web EA SY <?xml&version="1.0"%encoding="UTF18"?>% <widget&xmlns="http://www.w3.org/ns/widgets"% xmlns:tizen="http://tizen.org/ns/widgets"%version="2.0%Beta"% viewmodes="fullscreen"%id="http://yourdomain/FacebookApp">%%% <icon&src=/slideshow/linuxcon-europe-2012-tizen-mini-summit/15198982/"icon.png"/>%%% <content&src="http://m.facebook.com"/>%%% <name>FacebookApp</name>& <access&origin&=&"*"/>% </widget>& Monday, 5 November 12
  • 17. Other Web Apps webOS WebWorks Tizen tizen, Application, enyo.kind, enyo.Animator, SystemInfo, Core Core API enyo.Signals, Noti鍖cation, HTML5, CSS3 AJAX enyo.Aync, xhr, json, cookie jQuery.get, XMLHttpRquest jQuery.get Touch Touch, ScrollMath, jQuery touch events, jQuery touch events events ScrollStrategy, Scoller Tizen events jQueryMobile, Tizen UI onyx CSS Web UI Monday, 5 November 12
  • 18. Other Web Apps RITE REW DE CO webOS WebWorks Tizen tizen, Application, enyo.kind, enyo.Animator, SystemInfo, Core Core API enyo.Signals, Noti鍖cation, HTML5, CSS3 AJAX enyo.Aync, xhr, json, cookie jQuery.get, XMLHttpRquest jQuery.get Touch Touch, ScrollMath, jQuery touch events, jQuery touch events events ScrollStrategy, Scoller Tizen events jQueryMobile, Tizen UI onyx CSS Web UI Monday, 5 November 12
  • 20. HTML5 CK LU OD GO Monday, 5 November 12
  • 21. Webkit-e鍖 Rendering Flow web view Javascript Web core core Evas Object (buffer) UI FW Cairo Evas & Ecore X Server OpenGL ES/GL Monday, 5 November 12
  • 23. HTML5 compatibility test .1 NO Monday, 5 November 12
  • 24. Tizen Device API Monday, 5 November 12
  • 25. Tizen Device API System Info Alarm LBS Bluetooth Filesystem Application Media Content Call NFC Geocoder Calendar Messaging Contact Power Time Download Noti鍖cation Monday, 5 November 12
  • 28. Build your UI Tizen web UI framework jQuery Mobile CSS3 animation Monday, 5 November 12
  • 29. Tizen Web UI vs Native vs. Monday, 5 November 12
  • 30. CSS3 animation - Flipboard Monday, 5 November 12
  • 31. CSS3 animation - Flipboard Monday, 5 November 12
  • 32. Porting web apps Monday, 5 November 12
  • 33. Case study: webOS Onyx Monday, 5 November 12
  • 36. Case Study: BlackBerry Aura Portrait Landscape Monday, 5 November 12
  • 37. After porting Monday, 5 November 12
  • 38. Screen Resolution 720 1024 9:16 1280 17:10 600 Playbook Tizen HD Monday, 5 November 12
  • 39. Device API var acc = new Vector(0,0); acc.x = event.accelerationIncludingGravity.x; acc.y = event.accelerationIncludingGravity.y; var accAngle = Math.atan2(-足acc.x, acc.y); //angle between the rope and x axis Z Y X Playbook Tizen HD Monday, 5 November 12
  • 40. The last mile - Packaging Monday, 5 November 12
  • 41. thank you @chengluo c.luo@samsung.com Monday, 5 November 12