Convert Your Web App to Tizen
8 likes7,009 views
The document discusses converting a weather web app called Aura to the Tizen platform. It provides examples of how to modify the configuration file, including changing the namespace, specifying required features and device APIs, defining access to external URLs, and settings like screen orientation. Code snippets demonstrate these changes between the BlackBerry and Tizen configuration formats. The goal is to allow the Aura app to take advantage of Tizen capabilities while porting over its core functionality.
![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](https://image.slidesharecdn.com/2012-05-091415-1455-convertingyourwebapptotizen-121114181929-phpapp01/85/Convert-Your-Web-App-to-Tizen-55-320.jpg)
Convert Your Web App to Tizen
- 1. Converting Your Web App to Tizen Cheng Luo
- 2. Agenda • Web App Overview • Tizen Web App • Getting practical • Add live weather 2 tizen.org
- 3. Web App Overview 3 tizen.org
- 4. Web App Landscape Technologies Platforms Distribution Standards 4 tizen.org
- 5. Packaging is an issue 5 tizen.org
- 6. But it is hot source: Vision Mobile 6 tizen.org
- 7. Tizen Web Application 7 tizen.org
- 8. Cross Platform Webkit? There is no “WebKit on Mobile!” -@ppk 8 tizen.org
- 9. Tizen EFL Webkit Web View Javascript Core WebCore Evas Object (buffer) UI FW Cairo Evas & Ecore X server OpenGL ES/EGL 9 tizen.org
- 10. Other APIs Digital HTML5 Signature AppCache WAC Device Configuration Packaging W3C Events API Widget Parental Mode WARP Interface W3C APIs BONDI security Tizen Device Remote Hosted Configuration APIs document extension Web App Default behaviour Web UI FW 10 tizen.org
- 11. W3C Packaging • W3C Widget Packaging .wgt 11 tizen.org
- 12. W3C Packaging • W3C Widget Packaging .wgt 12 tizen.org
- 13. W3C Packaging • W3C Widget Packaging .wgt 13 tizen.org
- 14. Types of Web App 14 tizen.org
- 15. 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
- 16. 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
- 17. 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
- 18. Where is your app from? 18 tizen.org
- 19. 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
- 20. 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
- 21. 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
- 22. 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
- 23. 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
- 24. 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
- 25. 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
- 26. 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
- 27. HTML5 + device APIs source: quirksmode.org 27 tizen.org
- 28. HTML5 + device APIs source: quirksmode.org 28 tizen.org
- 29. Getting practical 29 tizen.org
- 30. Let’s Port Aura • Configuration file • Screen resolution • Get Live weather forecast 30 tizen.org
- 31. Aura - playful weather forecast • Demo video 31 tizen.org
- 32. After converting 32 tizen.org
- 33. Configuration 33 tizen.org
- 34. Namespace - BlackBerry <widget xmlns="http://www.w3.org/ns/widgets" xmlns:rim="http://www.blackberry.com/ns/widgets" version="1.0.0" ="http://www.blackberry.com/ns/widgets" rim:header="RIM-Widget:rim/widget"> rim:header="RIM-Widget:rim/widget"> rim:header="RIM-Widget: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" 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
- 35. Namespace - Tizen <widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" version="2.0 Beta" ="http://tizen.org/ns/widgets" viewmodes="fullscreen" viewmodes="fullscreen" viewmodes="fullscreen" id="http://YourDomain.com/Aura"> ="fullscreen <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
- 36. 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" /> "blackberry.app" <feature id="blackberry.ui.dialog" required="true" version="1.0.0" /> "blackberry.ui.dialog" id="blackberry.ui.dialog" <feature id="blackberry.invoke" required="true" version="1.0.0" /> "blackberry.invoke" id="blackberry.invoke" <feature id="blackberry.system" required="true" version="1.0.0" /> "blackberry.system" id="blackberry.system" <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> 36 tizen.org
- 37. Feature - Tizen <widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" version="2.0 Beta" viewmodes="fullscreen" 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"/> "http://tizen.org/api/contact" <feature name="http://tizen.org/api/geocoder" required="true"/> "http://tizen.org/api/geocoder" <feature name="http://tizen.org/api/tizen" required="true"/> "http://tizen.org/api/tizen" <access origin="http://api.wunderground.com/" subdomains="true"/> <tizen:setting rotation-lock="landscape" indicator-presence="disable" backbutton-presence="disable" /> </widget> 37 tizen.org
- 38. Access URL - 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" 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> 38 tizen.org
- 39. Access URL - Tizen <widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" version="2.0 Beta" viewmodes="fullscreen" 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"/> "http://api.wunderground.com/" subdomains="true"/> <access origin="http://api.wunderground.com/" subdomains="true"/> <tizen:setting rotation-lock="landscape" indicator-presence="disable" backbutton-presence="disable" /> </widget> 39 tizen.org
- 40. Settings - 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" 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> backgroundImage="img/SPLASH_screen.jpg" onLocalPageLoad="true" "img/SPLASH_screen.jpg" <rim:loadingScreen backgroundImage="img/SPLASH_screen.jpg" onLocalPageLoad="true" /> </widget> 40 tizen.org
- 41. Settings - Tizen <widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" version="2.0 Beta" viewmodes="fullscreen" 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" /> indicator- backbutton- indicator-presence="disable" backbutton-presence="disable" /> </widget> 41 tizen.org
- 42. Screen Resolution 42 tizen.org
- 43. User Experience 720 1024 9:16 1280 17:10 600 Playbook (WSVGA) Tizen (HD) 43 tizen.org
- 44. Full Screen - PlayBook .stage { width:1024px; height:600px; //... } #main { width:1024px; height:600px; //... } .daystate { width:1024px; height:600px; // ... } 44 tizen.org
- 45. Full Screen - Tizen HD .stage { width:1280px; height:720px; // ... } #main { width:1280px; height:720px; // ... } .daystate { width:1280px; height:720px; // ... } 45 tizen.org
- 46. 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
- 47. 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
- 48. 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
- 49. 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
- 50. PlayBook Implementation z x y 50 tizen.org
- 51. 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
- 52. Add Live Weather 52 tizen.org
- 53. 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
- 54. 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
- 55. 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
- 56. 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
- 57. Food for thought 57 tizen.org
- 58. There is still a gap between native and web apps, but it’s getting smaller 58 tizen.org
- 59. The browser cannot do everything for you, not because of the technology, but politics 59 tizen.org
- 60. Real cross platform experience for web apps is not here yet, but it will come 60 tizen.org
- 61. Thank You c.luo@samsung.com @chengluo