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
Index.html file is generated automatically
19 tizen.org Mobile Web Page
config.xml
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
34 tizen.org Namespace - Tizen
35 tizen.org Feature - BlackBerry
36 tizen.org Feature - Tizen
37 tizen.org Access URL - BlackBerry
38 tizen.org Access URL - Tizen
39 tizen.org Settings - BlackBerry
40 tizen.org Settings - Tizen
41 tizen.org Screen Resolution
42 tizen.org User Experience 720
1024
9:16 1280 17:10 600
Playbook (WSVGA) Tizen (HD)
43 tizen.org Full Screen - PlayBook
.stage { width :1024px ; height :600px ; //... }
#main { width :1024px ; height :600px ; //... }
.daystate { width :1024px ; height :600px ; // ... }
44 tizen.org Full Screen - Tizen HD
.stage { width :1280px ; height :720px ; // ... }
#main { width :1280px ; height :720px ; // ... }
.daystate { width :1280px ; height :720px ; // ... }
45 tizen.org Screen Ratio - PlayBook
#city { position: absolute; bottom: 0; left: 0; width :1024px ; height :268px ; background-image: url('../img/city_day_OSVG.svg'); background-position: bottom; background-repeat: no-repeat; -webkit-backface-visibility: hidden; }
#cityshadow { background-image: url('../img/city_shadow.png'); background-repeat: no-repeat; width :817px ; height :104px ; position: absolute; top :501px ; left :119px ; z-index: 900; }
46 tizen.org Screen Ratio - Tizen HD
#city { position: absolute; bottom: 0; left: 0; width :1280px ; height :335px ; background-image: url('../img/city_day_OSVG.svg'); background-position: bottom; background-repeat: no-repeat; background-size :auto 100% ; -webkit -backface -visibility: hidden; }
#cityshadow { background-image: url('../img/city_shadow.png'); background-repeat: no-repeat; width :1280px ; height :130px ; position: absolute; top :600px ; left :0px ; z-index: 900; background-size :auto 100% ; }
47 tizen.org CSS3
/*CSS for Tizen HD device*/ @media screen and (orientation: landscape) and (min-width: 1280px){ .stage { width :1280px ; height :720px ; ... } ... }
/*CSS for BlackBerry PlayBook*/ @media screen and (max-width: 1024px){ .stage { width :1024px ; height :600px ; ... } ... }
48 tizen.org Device Orientation
• The original Aura web app is designed for the Playbook’s “portrait” mode • The physical logic of rope movement is implemented in this orientation
var acc = new Vector(0,0); acc.x = event.accelerationIncludingGravity.x; acc.y = event.accelerationIncludingGravity.y;
49 tizen.org PlayBook Implementation
z x y
50 tizen.org User Experience
Portrait Landscape Y X
θ θ X Y
var accAngle = Math.atan2(-acc.y, acc.x); var accAngle = Math.atan2(-acc.x, acc.y);
51 tizen.org Add Live Weather
52 tizen.org HTML5 - Geolocation
function getGeolocation() { if (navigator.geolocation) { try { watch = navigator.geolocation.watchPosition(currentLocationHandler, errorHandler);
} catch (e) { // TODO : handle exception } } else { document.getElementById( "coordinates" ).innerHTML = "not supported!" ; } }
function currentLocationHandler(pos) { document.getElementById( "coordinates" ).innerHTML = "Latitude: " + pos.coords.latitude + " Longtitute: " + pos.coords.longitude; }
53 tizen.org jQuery - get live weather
function RetrieveWeatherFromWeatherUnderground() { var jsoninfo = $.ajax({ url: 'http://api.wunderground.com/api/908e975d9f62b409/hourly10day/q/CA/San_Francisco.json' , type: 'GET' , dataType: 'jsonp', success: function (jsondata) {
$.each(jsondata.hourly_forecast, function myfunc(key, value) { ParseWeatherUndergroundData (value); }); }, error: function (request, error) { //handle error here }, complete: function (jsoninfo, status) { //handle request completed here } }); }
Remember to add the URL to access property of config.xml file
54 tizen.org Implement AJAX callback
function ParseWeatherUndergroundData(values) {
weatherForecast.dates[dayindex].weatherHour[hourindex].temperature = parseInt(values.temp.metric);
// convert the weather condition returned by WeatherUndeground into that used by Aura newCondition = ConvertWeatherCondition(values.condition); weatherForecast.dates[dayindex].weatherHour[hourindex].type = newCondition;
}
55 tizen.org Wrap up
• Web Application Landscape – Crowded – Different packaging formats
• Tizen Web Application – Rely on open standards (W3C, Khronos), not forking it – Rich APIs include both HTML5 and device specific APIs
• When porting HTML5 web apps – Configuration file, resolution and ratio – Ensure user experience for particular device
56 tizen.org Food for thought
57 tizen.org There is still a gap between native and web apps, but it’s getting smaller
58 tizen.org The browser cannot do everything for you, not because of the technology, but politics
59 tizen.org Real cross platform experience for web apps is not here yet, but it will come
60 tizen.org Thank You [email protected] @chengluo