61
Converting Your Web App to Tizen Cheng Luo

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

  • Upload
    others

  • View
    14

  • Download
    0

Embed Size (px)

Citation preview

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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

<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

<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

<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

<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

<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

<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

<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

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

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

.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

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

#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

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

/*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

• 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

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

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

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

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

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

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

• 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

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

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

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

Real cross platform experience for web apps is not here yet, but it will come

60 tizen.org60

Page 61: 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

Thank [email protected]

@chengluo@chengluo