Converting Your Web App to Tizen
Total Page:16
File Type:pdf, Size:1020Kb
Converting Your Web App to Tizen Cheng Luo Agenda • Web App Overview • Tizen Web App • Getting practical • Add live weather 2 tizen.org Web App Overview 3 tizen.org Web App Landscape Technologies Platforms Distribution Standards 4 tizen.org Packaging is an issue 5 tizen.org But it is hot source: Vision Mobile 6 tizen.org Tizen Web Application 7 tizen.org Cross Platform Webkit? There is no “WebKit on Mobile!” -@ppk 8 tizen.org Tizen EFL Webkit Web View Javascript Core WebCore Evas Object (buffer) UI FW Cairo Evas & Ecore X server OpenGL ES/EGL 9 tizen.org Other APIs Digital HTML5 Signature AppCache WAC Device Configuration Packaging W3C Events API Widget Parental Mode W3C APIs WARP Interface BONDI security Tizen Device Remote Hosted Configuration APIs document extension Web App Web UI FW Default behaviour 10 tizen.org W3C Packaging • W3C Widget Packaging .wgt 11 tizen.org W3C Packaging • W3C Widget Packaging .wgt 12 tizen.org W3C Packaging • W3C Widget Packaging .wgt 13 tizen.org Types of Web App 14 tizen.org Types of Web App Mobile Site /URL User Interface Generic UI Distribution Web Search Engine Pros No need to install/update No memory usage Cons Difficult to manage permissions 15 tizen.org Types of Web App Mobile Site /URL Hosted Style App User Interface Generic UI Generic UI (jQueryMobile) Distribution Web Search Engine Certain app stores Pros No need to install/update Only need manifest file No memory usage Less maintenance Less memory usage Cons Difficult to manage permissions Requires a hosting server 16 tizen.org Types of Web App Mobile Site /URL Hosted Style App Packaged Style App User Interface Generic UI Generic UI (jQueryMobile) Generic UI/Native UI Distribution Web Search Engine Certain app stores Certain app stores Pros No need to install/update Only need manifest file Offline launching No memory usage Less maintenance Faster launching Less memory usage Access to device APIs Cons Difficult to manage permissions Requires a hosting server Needs Maintenance 17 tizen.org Where is your app from? 18 tizen.org Mobile Web Page config.xml <? xml version ="1.0" encoding ="UTF-8" ?> <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 ="icon.png" /> <content src ="http://m.facebook.com" /> <name >FacebookApp </ name > <access origin = "*" /> </ widget > Index.html file is generated automatically 19 tizen.org Mobile Web Page config.xml <? xml version ="1.0" encoding ="UTF-8" ?> <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 ="icon.png" /> <content src ="http://m.facebook.com" /> <name >FacebookApp </ name > <access origin = "*" /> </ widget > Index.html file is generated automatically 20 tizen.org Other Platforms WebOS Enyo BlackBerry WebWorks Tizen Kernel log, lang, job, marcozie, animation, Core API tizen.Tizen, tizen.WebAPIError, Oop, Object, Component, Multicolumn layout (CSS3) UiComponent, Layout, Signal 21 tizen.org Other Platforms WebOS Enyo BlackBerry WebWorks Tizen Kernel log, lang, job, marcozie, animation, Core API tizen.Tizen, tizen.WebAPIError, Oop, Object, Component, Multicolumn layout (CSS3) UiComponent, Layout, Signal Ajax Async, json, cookie, xhr, Ajax jQuery (get, parseJSON), tizen.SuccessCallback, XMLHttpRequest, local.storage tizen.ErrorCallback, Web Workers, jQuery (get, parseJSON ), XHR L2(W3C), local.storage 22 tizen.org Other Platforms WebOS Enyo BlackBerry WebWorks Tizen Kernel log, lang, job, marcozie, animation, Core API tizen.Tizen, tizen.WebAPIError, Oop, Object, Component, Multicolumn layout (CSS3) UiComponent, Layout, Signal Ajax Async, json, cookie, xhr, Ajax jQuery (get, parseJSON), tizen.SuccessCallback, XMLHttpRequest, local.storage tizen.ErrorCallback, Web Workers, jQuery (get, parseJSON ), XHR L2(W3C), local.storage Touch dom, Control, platform, dispatcher, Events, HTML tizen.Application, Touch Events (W3C), preview, modal, gesture, drag 23 tizen.org Other Platforms WebOS Enyo BlackBerry WebWorks Tizen Kernel log, lang, job, marcozie, animation, Core API tizen.Tizen, tizen.WebAPIError, Oop, Object, Component, Multicolumn layout (CSS3) UiComponent, Layout, Signal Ajax Async, json, cookie, xhr, Ajax jQuery (get, parseJSON), tizen.SuccessCallback, XMLHttpRequest, local.storage tizen.ErrorCallback, Web Workers, jQuery (get, parseJSON ), XHR L2(W3C), local.storage Touch dom, Control, platform, dispatcher, Events, HTML tizen.Application, Touch Events (W3C), preview, modal, gesture, drag UI Touch, ScrollMath, ScrollStrategy, jQuery, Touch, Touch Events (W3C), jQuery TouchScrollStrategy, Scroller 24 tizen.org Other Platforms WebOS Enyo BlackBerry WebWorks Tizen Kernel log, lang, job, marcozie, animation, Core API tizen.Tizen, tizen.WebAPIError, Oop, Object, Component, Multicolumn layout (CSS3) UiComponent, Layout, Signal Ajax Async, json, cookie, xhr, Ajax jQuery (get, parseJSON), tizen.SuccessCallback, XMLHttpRequest, local.storage tizen.ErrorCallback, Web Workers, jQuery (get, parseJSON ), XHR L2(W3C), local.storage Touch dom, Control, platform, dispatcher, Events, HTML tizen.Application, Touch Events (W3C), preview, modal, gesture, drag UI Touch, ScrollMath, ScrollStrategy, jQuery, Touch, Touch Events (W3C), jQuery TouchScrollStrategy, Scroller UI Elements Animator, transform, Icon, Button, CSS APIs Animations(CSS3), Transitions(CSS3), IconButton, CheckBox, etc. jQueryMobile, tizen-web-ui-fw.js 25 tizen.org Other Platforms WebOS Enyo BlackBerry WebWorks Tizen Kernel log, lang, job, marcozie, animation, Core API tizen.Tizen, tizen.WebAPIError, Oop, Object, Component, Multicolumn layout (CSS3) UiComponent, Layout, Signal Ajax Async, json, cookie, xhr, Ajax jQuery (get, parseJSON), tizen.SuccessCallback, XMLHttpRequest, local.storage tizen.ErrorCallback, Web Workers, jQuery (get, parseJSON ), XHR L2(W3C), local.storage Touch dom, Control, platform, dispatcher, Events, HTML tizen.Application, Touch Events (W3C), preview, modal, gesture, drag UI Touch, ScrollMath, ScrollStrategy, jQuery, Touch, Touch Events (W3C), jQuery TouchScrollStrategy, Scroller UI Elements Animator, transform, Icon, Button, CSS APIs Animations(CSS3), Transitions(CSS3), IconButton, CheckBox, etc. jQueryMobile, tizen-web-ui-fw.js 26 tizen.org HTML5 + device APIs source: quirksmode.org 27 tizen.org HTML5 + device APIs source: quirksmode.org 28 tizen.org Getting practical 29 tizen.org Let’s Port Aura • Configuration file • Screen resolution • Get Live weather forecast 30 tizen.org Aura - playful weather forecast • Demo video 31 tizen.org After converting 32 tizen.org Configuration 33 tizen.org Namespace - BlackBerry <widget xmlns="http://www.w3.org/ns/widgets" xmlns:rim ="http://www.blackberry.com/ns/widgets" version="1.0.0" rim:headerrim:header="RIMrim:header="RIM-Widget:rim/widget">="RIM="RIM----Widget:rimWidget:rimWidget:rim/widget"/widget" >>> <name>Aura</name> <description>The Astonishing Weather App made with WebWorks.</description> <license>Copyright 2010-2011 Research In Motion Limited.</license> <feature id= "blackberry.app" version="1.0.0" /> <feature id= "blackberry.ui.dialog" required="true" version="1.0.0" /> <feature id= "blackberry.invoke " required="true" version="1.0.0" /> <feature id= "blackberry.system" required="true" version="1.0.0" /> <icon rim:hover="false" src="icon.png" /> <icon rim:hover="true" src="icon.png" /> <content src="index.html" /> <access uri="http://www.mydomain.com" subdomains="true"> <feature id="blackberry.app.event" required="true" version="1.0.0"/> </access> <rim:loadingScreen backgroundImage="img/SPLASH_screen.jpg" onLocalPageLoad="true" /> </ widget > 34 tizen.org Namespace - Tizen <widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen ="http://tizen.org/ns/widgets" version="2.0 Beta" viewmodesviewmodes="viewmodes="fullscreen"="="="fullscreenfullscreenfullscreen"" id="http://YourDomain.com/Aura">id="http://YourDomain.com/Aura"> <icon src="icon.png"/> <content src="index.html"/> <name>Aura</name> <author/> <license/> <feature name= "http://tizen.org/api/contact" required="true"/> <feature name= "http://tizen.org/api/geocoder" required="true"/> <feature name= "http://tizen.org/api/tizen" required="true"/> <access origin= "http://api.wunderground.com/" subdomains="true"/> <tizen:setting rotation-lock= "landscape" indicator-presence="disable" backbutton-presence="disable" /> </ widget > 35 tizen.org Feature - BlackBerry <widget xmlns="http://www.w3.org/ns/widgets" xmlns:rim ="http://www.blackberry.com/ns/widgets" version="1.0.0" rim:header="RIM-Widget:rim/widget"> <name>Aura</name> <description>The Astonishing Weather App made with WebWorks.</description> <license>Copyright 2010-2011 Research In Motion Limited.</license> <feature id= "blackberry.app" version="1.0.0" /> <feature id= "blackberry.ui.dialog""""blackberry.ui.dialog"blackberry.ui.dialogblackberry.ui.dialog"" required="true" version="1.0version="1.0.0"version="1.0..0"0" /> <feature id= """blackberry.invoke " required="true" version="1.0.0" /> <feature id= "blackberry.system""""blackberry.system"blackberry.systemblackberry.system"" required="true" version="1.0.0" /> <icon rim:hover="false" src="icon.png" /> <icon rim:hover="true" src="icon.png" /> <content src="index.html" /> <access uri="http://www.mydomain.com" subdomains="true"> <feature id="blackberry.app.event" required="true" version="1.0.0"/> </access> <rim:loadingScreen backgroundImage="img/SPLASH_screen.jpg"