converting your web app to tizen templated...
TRANSCRIPT
![Page 1: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/1.jpg)
Converting Your Web App to Tizen
Cheng Luo
![Page 2: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/2.jpg)
Agenda
• Web App Overview
• Tizen Web App
• Getting practical
• Add live weather
2 tizen.org2
• Add live weather
![Page 3: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/3.jpg)
Web App Overview
3 tizen.org3
Web App Overview
![Page 4: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/4.jpg)
Web App Landscape
PlatformsTechnologies
4 tizen.org4
Distribution Standards
![Page 5: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/5.jpg)
Packaging is an issue
5 tizen.org5
![Page 6: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/6.jpg)
But it is hot
6 tizen.org6
source: Vision Mobile
![Page 7: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/7.jpg)
Tizen Web Application
7 tizen.org7
Tizen Web Application
![Page 8: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/8.jpg)
Cross Platform Webkit?
There is no “WebKit on Mobile!”
8 tizen.org
-@ppk
8
![Page 9: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/9.jpg)
Web View
Tizen EFL Webkit
WebCore Javascript
Core
Evas Object
(buffer)
9
UI FW
tizen.org9
X server
Evas & EcoreCairo
OpenGL ES/EGL
![Page 10: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/10.jpg)
Other APIs
WAC Device
API
Parental Mode
Configuration Packaging W3C Events
HTML5
AppCache
Digital
Signature
WARPWidget
InterfaceW3C APIs
10 tizen.org10
BONDI
security
Tizen Device
APIs
Web App
Default behaviourWeb UI FW
Configuration
extensionRemote Hosted
document
Interface
![Page 11: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/11.jpg)
W3C Packaging
• W3C Widget Packaging .wgt
11 tizen.org11
![Page 12: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/12.jpg)
W3C Packaging
• W3C Widget Packaging .wgt
12 tizen.org12
![Page 13: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/13.jpg)
W3C Packaging
• W3C Widget Packaging .wgt
13 tizen.org13
![Page 14: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/14.jpg)
Types of Web App
14 tizen.org14
![Page 15: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/15.jpg)
Types of Web App
Mobile Site /URL
User Interface Generic UI
Distribution Web Search Engine
15 tizen.org15
Pros No need to install/update
No memory usage
Cons Difficult to manage permissions
![Page 16: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/16.jpg)
Types of Web App
Mobile Site /URL Hosted Style App
User Interface Generic UI Generic UI (jQueryMobile)
Distribution Web Search Engine Certain app stores
16 tizen.org16
Pros No need to install/update
No memory usage
Only need manifest file
Less maintenance
Less memory usage
Cons Difficult to manage permissions Requires a hosting server
![Page 17: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/17.jpg)
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
17 tizen.org17
Pros No need to install/update
No memory usage
Only need manifest file
Less maintenance
Less memory usage
Offline launching
Faster launching
Access to device APIs
Cons Difficult to manage permissions Requires a hosting server Needs Maintenance
![Page 18: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/18.jpg)
Where is your app from?
18 tizen.org
Where is your app from?
18
![Page 19: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/19.jpg)
Mobile Web Page
config.xml
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
19 tizen.org19
<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>
<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
![Page 20: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/20.jpg)
Mobile Web Page
config.xml
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
20 tizen.org20
<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>
<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
![Page 21: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/21.jpg)
Other Platforms
WebOS Enyo BlackBerry WebWorks Tizen
Kernel log, lang, job, marcozie, animation,
Oop, Object, Component,
UiComponent, Layout, Signal
Core API tizen.Tizen, tizen.WebAPIError,
Multicolumn layout (CSS3)
21 tizen.org21
![Page 22: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/22.jpg)
Other Platforms
WebOS Enyo BlackBerry WebWorks Tizen
Kernel log, lang, job, marcozie, animation,
Oop, Object, Component,
UiComponent, Layout, Signal
Core API tizen.Tizen, tizen.WebAPIError,
Multicolumn layout (CSS3)
Ajax Async, json, cookie, xhr, Ajax jQuery (get, parseJSON),
XMLHttpRequest, local.storage
tizen.SuccessCallback,
tizen.ErrorCallback, Web Workers,
jQuery(get, parseJSON), XHR
22 tizen.org22
jQuery(get, parseJSON), XHR
L2(W3C), local.storage
![Page 23: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/23.jpg)
Other Platforms
WebOS Enyo BlackBerry WebWorks Tizen
Kernel log, lang, job, marcozie, animation,
Oop, Object, Component,
UiComponent, Layout, Signal
Core API tizen.Tizen, tizen.WebAPIError,
Multicolumn layout (CSS3)
Ajax Async, json, cookie, xhr, Ajax jQuery (get, parseJSON),
XMLHttpRequest, local.storage
tizen.SuccessCallback,
tizen.ErrorCallback, Web Workers,
jQuery(get, parseJSON), XHR
23 tizen.org23
jQuery(get, parseJSON), XHR
L2(W3C), local.storage
Touch dom, Control, platform, dispatcher,
preview, modal, gesture, drag
Events, HTML tizen.Application, Touch Events (W3C),
![Page 24: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/24.jpg)
Other Platforms
WebOS Enyo BlackBerry WebWorks Tizen
Kernel log, lang, job, marcozie, animation,
Oop, Object, Component,
UiComponent, Layout, Signal
Core API tizen.Tizen, tizen.WebAPIError,
Multicolumn layout (CSS3)
Ajax Async, json, cookie, xhr, Ajax jQuery (get, parseJSON),
XMLHttpRequest, local.storage
tizen.SuccessCallback,
tizen.ErrorCallback, Web Workers,
jQuery(get, parseJSON), XHR
24 tizen.org24
jQuery(get, parseJSON), XHR
L2(W3C), local.storage
Touch dom, Control, platform, dispatcher,
preview, modal, gesture, drag
Events, HTML tizen.Application, Touch Events (W3C),
UI Touch, ScrollMath, ScrollStrategy,
TouchScrollStrategy, Scroller
jQuery, Touch, Touch Events (W3C), jQuery
![Page 25: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/25.jpg)
Other Platforms
WebOS Enyo BlackBerry WebWorks Tizen
Kernel log, lang, job, marcozie, animation,
Oop, Object, Component,
UiComponent, Layout, Signal
Core API tizen.Tizen, tizen.WebAPIError,
Multicolumn layout (CSS3)
Ajax Async, json, cookie, xhr, Ajax jQuery (get, parseJSON),
XMLHttpRequest, local.storage
tizen.SuccessCallback,
tizen.ErrorCallback, Web Workers,
jQuery(get, parseJSON), XHR
25 tizen.org25
jQuery(get, parseJSON), XHR
L2(W3C), local.storage
Touch dom, Control, platform, dispatcher,
preview, modal, gesture, drag
Events, HTML tizen.Application, Touch Events (W3C),
UI Touch, ScrollMath, ScrollStrategy,
TouchScrollStrategy, Scroller
jQuery, Touch, Touch Events (W3C), jQuery
UI Elements Animator, transform, Icon, Button,
IconButton, CheckBox, etc.
CSS APIs Animations(CSS3), Transitions(CSS3),
jQueryMobile, tizen-web-ui-fw.js
![Page 26: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/26.jpg)
Other Platforms
WebOS Enyo BlackBerry WebWorks Tizen
Kernel log, lang, job, marcozie, animation,
Oop, Object, Component,
UiComponent, Layout, Signal
Core API tizen.Tizen, tizen.WebAPIError,
Multicolumn layout (CSS3)
Ajax Async, json, cookie, xhr, Ajax jQuery (get, parseJSON),
XMLHttpRequest, local.storage
tizen.SuccessCallback,
tizen.ErrorCallback, Web Workers,
jQuery(get, parseJSON), XHR
26 tizen.org26
jQuery(get, parseJSON), XHR
L2(W3C), local.storage
Touch dom, Control, platform, dispatcher,
preview, modal, gesture, drag
Events, HTML tizen.Application, Touch Events (W3C),
UI Touch, ScrollMath, ScrollStrategy,
TouchScrollStrategy, Scroller
jQuery, Touch, Touch Events (W3C), jQuery
UI Elements Animator, transform, Icon, Button,
IconButton, CheckBox, etc.
CSS APIs Animations(CSS3), Transitions(CSS3),
jQueryMobile, tizen-web-ui-fw.js
![Page 27: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/27.jpg)
HTML5 + device APIs
27 tizen.org27
source: quirksmode.org
![Page 28: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/28.jpg)
HTML5 + device APIs
28 tizen.org28
source: quirksmode.org
![Page 29: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/29.jpg)
Getting practical
29 tizen.org29
Getting practical
![Page 30: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/30.jpg)
Let’s Port Aura
• Configuration file
• Screen resolution
• Get Live weather forecast
30 tizen.org30
![Page 31: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/31.jpg)
Aura - playful weather forecast
• Demo video
31 tizen.org31
![Page 32: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/32.jpg)
After converting
32 tizen.org32
![Page 33: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/33.jpg)
Configuration
33 tizen.org33
![Page 34: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/34.jpg)
<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" />
Namespace - BlackBerry
xmlns:rim="http://www.blackberry.com/ns/widgets" version="1.0.0" ="http://www.blackberry.com/ns/widgets" version="1.0.0" ="http://www.blackberry.com/ns/widgets" version="1.0.0" ="http://www.blackberry.com/ns/widgets" version="1.0.0"
rim:headerrim:headerrim:headerrim:header="RIM="RIM="RIM="RIM----Widget:rimWidget:rimWidget:rimWidget:rim/widget"/widget"/widget"/widget">>>>
34 tizen.org
<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
![Page 35: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/35.jpg)
<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"/>
Namespace - Tizen
xmlns:tizen="http://tizen.org/ns/widgets" version="2.0 Beta" ="http://tizen.org/ns/widgets" version="2.0 Beta" ="http://tizen.org/ns/widgets" version="2.0 Beta" ="http://tizen.org/ns/widgets" version="2.0 Beta"
viewmodesviewmodesviewmodesviewmodes="="="="fullscreenfullscreenfullscreenfullscreen" id="http://YourDomain.com/Aura"> " id="http://YourDomain.com/Aura"> " id="http://YourDomain.com/Aura"> " id="http://YourDomain.com/Aura">
35 tizen.org
<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
![Page 36: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/36.jpg)
<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 - BlackBerry
<feature id="blackberry.app" version="1.0.0" /> "blackberry.app" version="1.0.0" /> "blackberry.app" version="1.0.0" /> "blackberry.app" version="1.0.0" />
<feature id=""""blackberry.ui.dialogblackberry.ui.dialogblackberry.ui.dialogblackberry.ui.dialog" required="true" version="1.0.0" /> " required="true" version="1.0.0" /> " required="true" version="1.0.0" /> " required="true" version="1.0.0" />
<feature id=""""blackberry.invokeblackberry.invokeblackberry.invokeblackberry.invoke" required="true" version="1.0.0" /> " required="true" version="1.0.0" /> " required="true" version="1.0.0" /> " required="true" version="1.0.0" />
36 tizen.org
<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>
36
<feature id=""""blackberry.invokeblackberry.invokeblackberry.invokeblackberry.invoke" required="true" version="1.0.0" /> " required="true" version="1.0.0" /> " required="true" version="1.0.0" /> " required="true" version="1.0.0" />
<feature id=""""blackberry.systemblackberry.systemblackberry.systemblackberry.system" required="true" version="1.0.0" /> " required="true" version="1.0.0" /> " required="true" version="1.0.0" /> " required="true" version="1.0.0" />
![Page 37: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/37.jpg)
<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 - Tizen
<feature name="http://tizen.org/api/contact" required="true"/>"http://tizen.org/api/contact" required="true"/>"http://tizen.org/api/contact" required="true"/>"http://tizen.org/api/contact" required="true"/>
37 tizen.org
<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>
37
<feature name="http://tizen.org/api/contact" required="true"/>"http://tizen.org/api/contact" required="true"/>"http://tizen.org/api/contact" required="true"/>"http://tizen.org/api/contact" required="true"/>
<feature name="http://tizen.org/api/geocoder" required="true"/>"http://tizen.org/api/geocoder" required="true"/>"http://tizen.org/api/geocoder" required="true"/>"http://tizen.org/api/geocoder" required="true"/>
<feature name="http://tizen.org/api/tizen" required="true"/>"http://tizen.org/api/tizen" required="true"/>"http://tizen.org/api/tizen" required="true"/>"http://tizen.org/api/tizen" required="true"/>
![Page 38: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/38.jpg)
<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" />
Access URL - BlackBerry
38 tizen.org
<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
<access uri="http://www.mydomain.com" subdomains="true">
<feature id="blackberry.app.event" required="true" version="1.0.0"/>
</access>
![Page 39: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/39.jpg)
<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"/>
Access URL - Tizen
39 tizen.org
<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>
39
<access origin="http://api.wunderground.com/" "http://api.wunderground.com/" "http://api.wunderground.com/" "http://api.wunderground.com/" subdomainssubdomainssubdomainssubdomains="true"/>="true"/>="true"/>="true"/>
![Page 40: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/40.jpg)
<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" />
Settings - BlackBerry
40 tizen.org
<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>
40
<rim:loadingScreen backgroundImage=""""imgimgimgimg/SPLASH_screen.jpg" /SPLASH_screen.jpg" /SPLASH_screen.jpg" /SPLASH_screen.jpg" onLocalPageLoadonLocalPageLoadonLocalPageLoadonLocalPageLoad="true" />="true" />="true" />="true" />
![Page 41: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/41.jpg)
<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"/>
Settings - Tizen
41 tizen.org
<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>
41
<tizen:setting indicatorindicatorindicatorindicator----presence="disable" presence="disable" presence="disable" presence="disable" backbuttonbackbuttonbackbuttonbackbutton----presence="disable" />presence="disable" />presence="disable" />presence="disable" />
![Page 42: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/42.jpg)
Screen Resolution
42 tizen.org42
![Page 43: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/43.jpg)
1024
720
12809:16
17:10
User Experience
43 tizen.org
60017:10
Playbook (WSVGA)
Tizen (HD)
43
![Page 44: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/44.jpg)
.stage {
width:1024px;
height:600px;
//...
}
#main {
width:1024px;
height:600px;
Full Screen - PlayBook
44 tizen.org
height:600px;
//...
}
.daystate {
width:1024px;
height:600px;
// ...
}
44
![Page 45: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/45.jpg)
Full Screen - Tizen HD
.stage {
width:1280px;
height:720px;
// ...
}
#main {
width:1280px;
height:720px;
45 tizen.org
height:720px;
// ...
}
.daystate {
width:1280px;
height:720px;
// ...
}
45
![Page 46: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/46.jpg)
#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;
}
Screen Ratio - PlayBook
46 tizen.org
}
#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
![Page 47: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/47.jpg)
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;
47 tizen.org
-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
![Page 48: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/48.jpg)
/*CSS for Tizen HD device*/
@media screen and (orientation: landscape) and (min-width: 1280px){
.stage {
width:1280px;
height:720px;
...
}
...
}
CSS3
48 tizen.org
/*CSS for BlackBerry PlayBook*/
@media screen and (max-width: 1024px){
.stage {
width:1024px;
height:600px;
...
}
...
}
48
![Page 49: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/49.jpg)
• The original Aura web app is designed for the Playbook’s “portrait” mode
• The physical logic of rope movement is implemented in this orientation
Device Orientation
49 tizen.org
var acc = new Vector(0,0);
acc.x = event.accelerationIncludingGravity.x;
acc.y = event.accelerationIncludingGravity.y;
49
![Page 50: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/50.jpg)
PlayBook Implementation
z
yx
50 tizen.org50
![Page 51: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/51.jpg)
Y X
Portrait Landscape
User Experience
51 tizen.org
θ
X Y
θ
var accAngle = Math.atan2(-acc.y, acc.x); var accAngle = Math.atan2(-acc.x, acc.y);
51
![Page 52: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/52.jpg)
Add Live Weather
52 tizen.org
Add Live Weather
52
![Page 53: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/53.jpg)
function getGeolocation() {
if(navigator.geolocation)
{
try {
watch = navigator.geolocation.watchPosition(currentLocationHandler, errorHandler);
} catch (e) {
// TODO: handle exception
}
}
else {
function getGeolocation() {
if(navigator.geolocation)
{
try {
watch = navigator.geolocation.watchPosition(currentLocationHandler, errorHandler);
} catch (e) {
// TODO: handle exception
}
}
else {
HTML5 - Geolocation
53 tizen.org
else {
document.getElementById("coordinates").innerHTML = "not supported!";
}
}
else {
document.getElementById("coordinates").innerHTML = "not supported!";
}
}
function currentLocationHandler(pos) {
document.getElementById("coordinates").innerHTML = "Latitude: " + pos.coords.latitude + " Longtitute: " +
pos.coords.longitude;
}
function currentLocationHandler(pos) {
document.getElementById("coordinates").innerHTML = "Latitude: " + pos.coords.latitude + " Longtitute: " +
pos.coords.longitude;
}
53
![Page 54: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/54.jpg)
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);
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);
jQuery - get live weather
54 tizen.org
ParseWeatherUndergroundData(value);
});
},
error: function (request, error)
{ //handle error here },
complete: function(jsoninfo, status)
{ //handle request completed here }
});
}
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
![Page 55: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/55.jpg)
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;
}
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;
}
Implement AJAX callback
55 tizen.org
}}
55
![Page 56: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/56.jpg)
• Web Application Landscape– Crowded
– Different packaging formats
• Tizen Web Application
Wrap up
56 tizen.org
• 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
![Page 57: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/57.jpg)
Food for thought
57 tizen.org57
![Page 58: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/58.jpg)
There is still a gap between native and
web apps, but it’s getting smaller
58 tizen.org58
![Page 59: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/59.jpg)
The browser cannot do everything for you, not because of the technology, but politics
59 tizen.org59
politics
![Page 60: Converting your web app to Tizen templated v6download.tizen.org/.../ballroom-a/...converting_your_web_app_to_tize… · API Parental Mode Configuration Packaging W3C Events HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece1ba03f5a86785f0000fe/html5/thumbnails/60.jpg)
Real cross platform experience for web apps is not here yet, but it will come
60 tizen.org60