Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1....
Transcript of Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1....
![Page 1: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/1.jpg)
Easily Port Web Apps to
Tizen & Develop with Tizen
Device APIs Qingqiu Li
Samsung
![Page 2: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/2.jpg)
2
Content
1. Tizen Web Application
2. Porting an HTML5 App to Tizen IDE
3. Tizen Web Device APIs
4. TAU Introduction
![Page 3: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/3.jpg)
Tizen Web Application
![Page 4: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/4.jpg)
4
Overview on web application
![Page 5: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/5.jpg)
5
HTML5 App & Tizen Web App (1/3)
Difference in file structure:
HTML5 App Tizen Web App
(with configure file)
![Page 6: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/6.jpg)
6
HTML5 App & Tizen Web App (2/3)
Configure File :
User Interface, modify the features, privileges, policy, and etc.
![Page 7: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/7.jpg)
7
HTML5 App & Tizen Web App (3/3)
Configure File :
Source Code, modify the features, privileges, policy, and etc.
![Page 8: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/8.jpg)
Porting an HTML5 App to
Tizen IDE
![Page 9: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/9.jpg)
9
Content
Common Porting Step:
1. Create a Web Project in SDK
2. Copy Web App to SDK Project
3. Modify configure file
4. Run project in Tizen Target
![Page 10: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/10.jpg)
10
Why to port HTML5 Apps to Tizen IDE?
Tizen Platform has more chance than other platform, and porting is so easy.
Tizen Platform support HTML5 technique very well.
HTML5 technique is common, can be used in different platform.
HTML5 Apps can do many things as well as native Apps.
![Page 11: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/11.jpg)
11
Create a Web Project in SDK (1/2)
1. Create a web project
New -> Project
![Page 12: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/12.jpg)
12
Create a Web Project in SDK (2/2)
2. Select a template, and input Project Name.
2.1 Mobile
2.2 Wearable
![Page 13: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/13.jpg)
13
Copy Web App to SDK Project (1/3)
1. A web app sample download from internet
![Page 14: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/14.jpg)
14
Copy Web App to SDK Project (2/3)
2. SDK Project Directory
Folder: css、js、images
File: config.xml、index.html
![Page 15: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/15.jpg)
15
Copy Web App to SDK Project (3/3)
3. Copy files
Same name folder: copy files directly
Otherwise: create new folder, and then copy files
![Page 16: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/16.jpg)
16
Modify configure file (1/3)
1. Configure privilege
Example: Network permission
![Page 17: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/17.jpg)
17
Modify configure file (2/3)
2. Configure Policy
Example: Network permission
![Page 18: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/18.jpg)
18
Modify configure file (3/3)
3. Configure source code
Example: Network permission
![Page 19: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/19.jpg)
19
Run project in Tizen Target (1/2)
1. Run in the Tizen target
Run As -> Tizen Web Application
![Page 20: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/20.jpg)
20
Run project in Tizen Target (2/2)
2. Launch app in target
![Page 21: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/21.jpg)
Tizen Web Device APIs
![Page 22: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/22.jpg)
22
Content
1. Overview
2. Privilege
3. Help content introduction
4. Use Bluetooth Device API
![Page 23: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/23.jpg)
23
Overview (1/2) Tizen Web Device APIs
1. Apps need access to device features outside of the HTML
2. Can access various device features via Web Device API
3. Apps to work like native apps with minimum porting effort
Storage
Index DB
Web API
Device API W3C Misc
Application
Communication
Content
Full Screen
Web GL
JSON
HTML 5
…
I/O
System
Graphics
Media
Device
CSS
Widget
Security
… …
Contacts
Settings
My Files
Gallery
Fitness
Web Apps
…
![Page 24: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/24.jpg)
24
Overview (2/2) Tizen Device APIs
Application
Content
Comm.
Social
System
Multimedia
I/O
Alarm
Application Etc.. File System
Message Port Etc.
Media Key
Sound
Content
Download
System Info
Sensor Etc..
Calendar, Call History
Account Etc..
Messaging
Push
![Page 25: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/25.jpg)
25
Privilege
Optional – defines the API access privilege
required by the Web App
<?xml version="1.0" encoding="UTF-8"?> <widget xmlns="http://www.w3.org/ns/widgets"
xmlns:tizen="http://tizen.org/ns/widgets" id="http://yourdomain/BtSample" version="2.2.0" viewmodes="maximized"> <tizen:application id="b9zxN75unx.BtSample" package="b9zxN75unx" required_version="2.2"/> <content src="index.html"/> <feature name="http://tizen.org/feature/screen.size.normal.720.1280"/> <icon src="icon.png"/> <name>BtSample</name> <tizen:privilege name="http://tizen.org/privilege/application.launch"/> <tizen:privilege name="http://tizen.org/privilege/content.read"/> <tizen:privilege name="http://tizen.org/privilege/content.write"/> <tizen:privilege name="http://tizen.org/privilege/filesystem.read"/> <tizen:setting screen-orientation="portrait" context-menu="disable"
background-support="disable" encryption="disable" install-location="auto"/>
</widget>
Device API specific privilege setting
All privileges are described @https://www.tizen.org/privilege
<tizen:privilege name="http://tizen.org/privilege/application.launch"/> <tizen:privilege name="http://tizen.org/privilege/content.read"/> <tizen:privilege name="http://tizen.org/privilege/content.write"/> <tizen:privilege name="http://tizen.org/privilege/filesystem.read"/>
![Page 26: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/26.jpg)
26
Help content introduction (1/2)
Help guide online: https://developer.tizen.org
![Page 27: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/27.jpg)
27
Help content introduction (2/2)
Help content on SDK
![Page 28: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/28.jpg)
28
Use Bluetooth Device API (1/6)
Search Bluetooth target & Connect it
![Page 29: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/29.jpg)
29
Use Bluetooth Device API (2/6)
Add Privilege
![Page 30: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/30.jpg)
30
Use Bluetooth Device API (3/6)
Use Application APIs to control App lifecycle
![Page 31: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/31.jpg)
31
Use Bluetooth Device API (4/6)
Add BT Adapter, Register Search Callback
![Page 32: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/32.jpg)
32
Use Bluetooth Device API (5/6)
Start to search targets
Click connect button to pair target
![Page 33: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/33.jpg)
33
A Bluetooth Sample (6/6)
Pair target & Show it
![Page 34: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/34.jpg)
TAU Introduction
![Page 35: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/35.jpg)
35
Content
1. Overview
2. Page Structure
3. TAU Components
![Page 36: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/36.jpg)
36
Overview (1/2)
Tizen Advanced UI framework
A collection of library providing TIZEN UI for web apps, consists of CSS
and Javascript
TAU
Page
TIZEN HTML5 APIs
BaseWidget
Button Popup …
JQM syntax wrapper
router
Web Application
util
DOM
selectors
deferred …
event
List
![Page 37: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/37.jpg)
37
Overview (2/2)
Tizen provides most HTML5 specs
TAU is optional to web apps Mainly for using Tizen look&feel UI controls
Typical header/content/footer style mobile/wearable/TV apps
Useful for the apps who wants to use Tizen UI
TAU
Web Application
TIZEN HTML5 APIs TIZEN Web APIs
Other JS libs
![Page 38: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/38.jpg)
38
Page Structure (1/4)
1. Header
best place to mark out to user
what page is currently opened,
it can contain buttons, menus and
toolbars (optional)
2. Content
where the main application
content resides, it has an
optional scroll bar
3. Footer
here you can put a status line or
buttons (optional)
![Page 39: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/39.jpg)
39
Page Structure (2/4)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<link rel="stylesheet" href="lib/tau/mobile/theme/default/tau.min.css">
<script src=“lib/tau/mobile/js/tau.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>MyApplication</h1>
</div>
<div data-role="content">
Hello world
<button id="closeBtn">Close</button>
</div>
</div>
</body>
</html>
![Page 40: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/40.jpg)
40
Page Structure (3/4)
- Back button
- Controlbar
- button
- various winset
: list, picker, slider etc.
- button
- segmentControl
- search bar
- option header
Header
Content
Footer
![Page 41: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/41.jpg)
41
Page Structure (4/4)
Change Page in TAU
1. Use <a href="#pageID">
<a href="#page2"><button>Move to Page2</button></a>
2. Use tau.changePage()
<button id="btn">Move to Page2</button>
<script>
var button=document.querySelector("#btn");
button.addEventListener("click", function() {
tau.changePage("#page2");
});
</script>
<div class="ui-page" id=“page2">
<div id="timer-up-total-time">00:00:00</div>
</div>
![Page 42: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/42.jpg)
42
TAU Components (1/4)
![Page 43: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/43.jpg)
43
TAU Components (2/4)
![Page 44: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/44.jpg)
44
TAU Components (3/4)
![Page 45: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/45.jpg)
45
TAU Components (4/4)
![Page 46: Easily Port Web Apps to Tizen & Develop with Tizen …...23 Overview (1/2) Tizen Web Device APIs 1. Apps need access to device features outside of the HTML 2. Can access various device](https://reader033.fdocuments.in/reader033/viewer/2022060216/5f0622e77e708231d41678fe/html5/thumbnails/46.jpg)
46
End
Thank You