![Page 1: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/1.jpg)
HTML5 Applications Made
Easy on Tizen IVI
Brian Jones / Jimmy Huang
![Page 2: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/2.jpg)
2
Obstacles IVI Developers Face Today
• Lots of hardware variety.
• Multiple operating systems
• Different input devices
• Software development requires access to the specific hardware /
OS combination.
• Long development cycles.
![Page 3: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/3.jpg)
3
How Can HTML Help?
![Page 4: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/4.jpg)
4
HTML Application Benefits
• Hardware independent
• OS independent
• Software development requires a computer with a browser
• Short development cycles
![Page 5: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/5.jpg)
5
Why HTML5?
• Quick to port / Cross platform support Different vendors, image versions, hardware, and platform types can all run the
same app.
Apps can be run on other devices such as phones and tablets.
• Ease of development
No code compiling.
Fast prototyping and concept experimentation.
Tasks can be easily split among the team.
Low level tasks such as audio / video and user input are handled by the
browser.
![Page 6: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/6.jpg)
6
Why HTML5?
• Speed to market
Development can take weeks instead of months or even years.
Apps can easily be built in stages.
• Easy updates and bug fixes
Since there is only one version, it only has to be patched once.
Small file sizes mean it can be done over the air.
• Hook up to the cloud
Already web based so connecting to the cloud is simple.
![Page 7: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/7.jpg)
7
Why HTML5?
• Unified experience Apps can be deployed on other platform types such as phones and tablets. This gives
developers new and exciting opportunities for interaction between devices.
• License
Open standard and non-proprietary
• W3C
New APIs continue to be made, broadening the possibilities for web
applications.
![Page 8: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/8.jpg)
8
Who Wins? Everyone.
• Benefits for application developers
Application developers are no longer forced to write and maintain multiple
versions of their app. This saves time and money.
It broadens the number of potential users.
• Benefits for platform makers
A large ecosystem of apps that will run on their system.
Easier to attract application developers to your system.
![Page 9: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/9.jpg)
9
Tizen Web APIs
![Page 10: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/10.jpg)
10
Alarm API
• This API provides the functionality for setting and unsetting of alarms.
It also allows applications to retrieve alarm information.
• Each client application has its own individual alarm storage, that is,
applications cannot view (or edit) alarms set by other applications.
![Page 11: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/11.jpg)
11
Calendar API
• This API provides functionality to read, create, delete, and update
items in specific calendars.
![Page 12: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/12.jpg)
12
Call History API
• This API provides interfaces and methods for retrieving information
from the call history.
![Page 13: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/13.jpg)
13
Contact API
• This API is for managing Address Books.
• Contacts contain information, such as phone numbers, e-mail
addresses, etc.
![Page 14: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/14.jpg)
14
Time API
• The Time API provides information regarding date / time and time
zones.
• This API can be used to get date objects with full time zone support,
convert them between time zones, retrieve available time zones.
![Page 15: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/15.jpg)
15
Notification API
• Provides a way to notify user of events.
![Page 16: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/16.jpg)
16
Bluetooth API • This specification defines interfaces and methods to manage Bluetooth.
• Controls local Bluetooth device (on, off, etc)
• Sets visibility
• Discovers nearby Bluetooth devices (Device discovery).
• Pair, un-pair, and retrieve paired devices information.
• Registers a service (RFCOMM) on a local device, which can be consumed by
remote devices to exchange data.
![Page 17: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/17.jpg)
17
Application API
• This API provides a way to launch other applications and access
application management.
• Access current application's information and basic operations such as
exit or hide.
![Page 18: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/18.jpg)
18
Package API
• This API provides functionalities to install or uninstall packages, and
retrieve information about installed packages.
• It also provides a listener method so that an application is able to be
notified when there is a change on the installed packages.
![Page 19: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/19.jpg)
19
Messaging API
• This API provides interfaces and methods for managing SMS, MMS,
and email messages.
• Send, receive, search messages
• Manage messages: update, delete, and add.
• Subscribe to receive notifications of message storage modifications.
![Page 20: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/20.jpg)
20
Content API
• This API discovers and manages contents such as images, videos,
music, and the other that are available on the device.
• It supports filtered searches. The API also supports setting attributes
of specific contents.
![Page 21: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/21.jpg)
21
Message Port API
• This API provides the functionality for communicating with other
applications.
![Page 22: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/22.jpg)
22
Power API
• This API provides support for requesting power resource states.
• Allows you to check screen brightness and whether the CPU is
awake.
• Allows you to set screen brightness for your application, possibly
disabling dimming.
• Turn screen on or off.
• Subscribe to screen change update.
![Page 23: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/23.jpg)
23
System Info API
• This specification defines interfaces and methods that provide web
applications with access to various properties of a system. These
include items such as Battery, Display, Locale, Network, Device
orientation, etc.
• This API also the ability to subscribe for notification of changes to
selected values.
![Page 24: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/24.jpg)
24
Web UI Framework
![Page 25: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/25.jpg)
25
Web UI Framework
• The Web UI framework provides tools such as widgets, events,
effects, and animations, for web application development. Widgets
includes things like Button, Checkbox, Gallery, Popup, Progress Bar,
and so on.
• In the Tizen Web UI framework, the application page structure is
based on jQuery Mobile.
![Page 26: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/26.jpg)
26
Web UI Framework
The Web UI framework consists of the following services:
Web widgets
Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are
available.
Web themes
CSS themes and resources for Tizen widgets are available.
Loader
Configurations such as Web theme and internationalization set-up, can be loaded.
![Page 27: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/27.jpg)
27
Tizen SDK
![Page 28: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/28.jpg)
28
Tizen SDK Overview
The Tizen SDK includes the following for creating both native and web applications:
Tools
IDE for app development
Emulator (virtual machine)
Web simulator
Documentation
Complete API documentation
Sample apps
Developer tutorials
![Page 29: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/29.jpg)
29
Web IDE • Based on eclipse
• HTML/JS/CSS content creation
• Syntax highlighting/Syntax checking
• HTML/CSS previews
• JS Minifying/Beatifying
• Content Assist
• Hover
• Access API documentation from within the code
• Auto-completion
![Page 30: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/30.jpg)
30
Event Injector
• Emulate custom events
• Battery level
• Peripherals
• USB, headphone
• Sensors
• Accelerometer, Gyroscope,
• Proximity, light.
• Telephony
• SMS Messages, Calls
• Supports CLI
![Page 31: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/31.jpg)
31
Connection Explorer
• Manage connected devices
• File Explorer
• tree-view
• Transfer files
• send/receive by drag and drop
• File operations
• create/delete/rename
![Page 32: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/32.jpg)
32
UI Builder
• File New Tizen Web
Project Template using UI
Builder
• Based on UI Framework
• Drag and Drop
![Page 33: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/33.jpg)
33
Emulator • QEMU-based
• Multiple platforms (Linux/Windows/Mac)
• Multiple configurations (screen resolution & RAM
size)
• HW Acceleration (CPU/GPU)
• Event Injector (Integrated in IDE)
![Page 34: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/34.jpg)
34
Remote Inspector
• Javascript debugger based on Webkit’s web inspector
• Runs on Google Chrome
• Inspect styles
• DOM inspection
• Resources
• Debug JS
• Console Log
![Page 35: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/35.jpg)
35
Simulator • Based on Ripple-UI Framework
• Simulates Tizen Web APIs
• orientation/zooming
• system info
• Geolocation
• Sensor
• Communication
• Power management
• Network
• Notification
• Package and app
• Configurable Panels
![Page 36: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/36.jpg)
36
Tizen Application Development Process
![Page 37: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/37.jpg)
37
Creating a Tizen web app
![Page 38: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/38.jpg)
38
Setup
Setting up the environment
• Download the SDK and SDK image
• https://developer.tizen.org/downloads/tizen-sdk
• Ubuntu (32bit/64bit), Windows XP, Windows 7(32bit/64bit), Mac OSX
• Install Install Manager and SDK Image
• Run certificate generator
![Page 39: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/39.jpg)
39
New project
• File New Tizen Web Project Choose a template
![Page 40: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/40.jpg)
40
Existing Sample Application
• File New Tizen Web Project Sample application
![Page 41: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/41.jpg)
41
Project Structure
• Content
• index.html
• Javascript
• CSS
• Application icon
• config.xml
• Tizen-web-ui-fw
• Packaging and Signing
• .wgt extension
• W3C Web Widget specification
![Page 42: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/42.jpg)
42
Template index.html
main.js
![Page 43: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/43.jpg)
43
UI Builder
![Page 44: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/44.jpg)
44
Config.xml
![Page 45: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/45.jpg)
45
API Access
![Page 46: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/46.jpg)
46
Create a emulator image
![Page 47: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/47.jpg)
47
Running in Emulator
![Page 48: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/48.jpg)
48
Running in Simulator
![Page 49: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/49.jpg)
49
Manual Installation
• Download a Tizen IVI 2.0 liveusb image
• http://download.tizen.org/releases/milestone/2.0/
• Build and package web app (generate and sign wgt)
• Copy to image
• scp <path to .wgt file> [email protected]:/opt/home/root/
• Use wrt-installer to install to a device
• #ssh [email protected]
• wrt-installer –i myapp.wgt
• wrt-launcher -l
• wrt-client -l <app_id>
![Page 50: HTML5 Applications Made Easy on Tizen IVI · Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are available. Web themes CSS themes and resources for](https://reader033.vdocument.in/reader033/viewer/2022041721/5e4e72e8ae743b512b591fc5/html5/thumbnails/50.jpg)
50
Questions