SlideShare ist ein Scribd-Unternehmen logo
1 von 3
Downloaden Sie, um offline zu lesen
Getting Started with Tizen TV Web Apps
This guide explains the basics of Tizen TV web apps.
NOTE: This guide assumes you have installed the Tizen-based Samsung TV SDK.
What is a Tizen TV Web App?
A Tizen TV Web App is an HTML5 based application designed for the Tizen TV environment. By using
standard technologies like HTML5, JavaScript, and CSS, developers can create rich experiences for the TV
platform.
The Tizen TV platform provides a JavaScript “web api” to provide TV features to the web applications.
HTML5’s video and audio tags provide the cornerstone of the multimedia functions.
Figure 1 Apps Are Based on HTML, JS, and CSS
Creating a Tizen TV Web App
The easiest way to create a new Tizen TV Web App is to use the Tizen-based Samsung TV SDK IDE.
Select File > New > Tizen Web Project. You can choose to create a project from the Templates or the
Sample projects.
How to Handle Remote Control Events
To add support for key events, use the document.addEventListener function to connect a function to the
keydown event:
//Initialize function
var init = function () {
// TODO:: Do your initialization job
console.log("init() called");
// add eventListener for tizenhwkey
document.addEventListener('tizenhwkey', function(e) {
if(e.keyName == "back")
tizen.application.getCurrentApplication().exit();
});
document.addEventListener('keydown', remoteControlEvent);
};
NOTE: Your event handling function can have any valid JavaScript function name. In this example, the
function is named remoteControlEvent.
Later in the code, implement the remoteControlEvent function:
function remoteControlEvent(e) {
console.log("Key Value : " + e.keyCode);
switch(e.keyCode){
case 1: //do something
case 2: // do something else
. . .
default:
break;
}
}
Testing Your Tizen TV Web App
To test your Tizen TV Web App, you can launch it in the Web Simulator. To launch the project, right-click
on it in the IDE and choose Run As > Tizen TV Web Simulator Application (Samsung TV)
Figure 2 Launching the Web Simulator
In the Web Simulator, you can test your app by using mouse, keyboard, or virtual Remote Control input.
You can also launch the Debugger tool:
Figure 3 The Debugger

Weitere ähnliche Inhalte

Was ist angesagt?

ApppiumDoc_version2015
ApppiumDoc_version2015ApppiumDoc_version2015
ApppiumDoc_version2015
Amit DEWAN
 
Android App Development 20150402
Android App Development 20150402Android App Development 20150402
Android App Development 20150402
Hideo Kadowaki
 
AppiumSetupConfigurationonWindows
AppiumSetupConfigurationonWindowsAppiumSetupConfigurationonWindows
AppiumSetupConfigurationonWindows
Lalit Ghule
 

Was ist angesagt? (20)

Publishing app to play store
Publishing app to play storePublishing app to play store
Publishing app to play store
 
Discover Meteor
Discover MeteorDiscover Meteor
Discover Meteor
 
Modern web app with REACT
Modern web app with REACTModern web app with REACT
Modern web app with REACT
 
Using bluetooth functionality with flutter
Using bluetooth functionality with flutterUsing bluetooth functionality with flutter
Using bluetooth functionality with flutter
 
Firebase play-games-services-unity
Firebase play-games-services-unityFirebase play-games-services-unity
Firebase play-games-services-unity
 
Deploying a MVC3 WebService in Windows Azure
Deploying a MVC3 WebService in Windows AzureDeploying a MVC3 WebService in Windows Azure
Deploying a MVC3 WebService in Windows Azure
 
Editing an app cloud 9
Editing an app   cloud 9Editing an app   cloud 9
Editing an app cloud 9
 
Google Glass Mirror API Setup
Google Glass Mirror API SetupGoogle Glass Mirror API Setup
Google Glass Mirror API Setup
 
Build apps for slack
Build apps for slackBuild apps for slack
Build apps for slack
 
Android App Development 20150604
Android App Development 20150604Android App Development 20150604
Android App Development 20150604
 
Magneto - Android Test Automation
Magneto - Android Test AutomationMagneto - Android Test Automation
Magneto - Android Test Automation
 
Magneto - taking Android UI testing to the next level - Ran Ben Aharon, Every...
Magneto - taking Android UI testing to the next level - Ran Ben Aharon, Every...Magneto - taking Android UI testing to the next level - Ran Ben Aharon, Every...
Magneto - taking Android UI testing to the next level - Ran Ben Aharon, Every...
 
Czech SharePoint Conference 2019 - 10 things you should do with your o365 dem...
Czech SharePoint Conference 2019 - 10 things you should do with your o365 dem...Czech SharePoint Conference 2019 - 10 things you should do with your o365 dem...
Czech SharePoint Conference 2019 - 10 things you should do with your o365 dem...
 
Mobile test automation in simple steps
Mobile test automation in simple stepsMobile test automation in simple steps
Mobile test automation in simple steps
 
Automation Zaman Now
Automation Zaman NowAutomation Zaman Now
Automation Zaman Now
 
Using Composer with WordPress - 2.0
Using Composer with WordPress - 2.0Using Composer with WordPress - 2.0
Using Composer with WordPress - 2.0
 
ApppiumDoc_version2015
ApppiumDoc_version2015ApppiumDoc_version2015
ApppiumDoc_version2015
 
Android App Development 20150402
Android App Development 20150402Android App Development 20150402
Android App Development 20150402
 
AppiumSetupConfigurationonWindows
AppiumSetupConfigurationonWindowsAppiumSetupConfigurationonWindows
AppiumSetupConfigurationonWindows
 
How to embed prezi in a blendspace tile
How to embed prezi in a blendspace tileHow to embed prezi in a blendspace tile
How to embed prezi in a blendspace tile
 

Ähnlich wie Getting Started with Tizen TV Web Apps

Tizen-based Samsung TV SDK Overview
Tizen-based Samsung TV SDK OverviewTizen-based Samsung TV SDK Overview
Tizen-based Samsung TV SDK Overview
Ryo Jin
 
Mobile Software Engineering Crash Course - C06 WindowsPhone
Mobile Software Engineering Crash Course - C06 WindowsPhoneMobile Software Engineering Crash Course - C06 WindowsPhone
Mobile Software Engineering Crash Course - C06 WindowsPhone
Mohammad Shaker
 

Ähnlich wie Getting Started with Tizen TV Web Apps (20)

Titanium Appcelerator - Beginners
Titanium Appcelerator - BeginnersTitanium Appcelerator - Beginners
Titanium Appcelerator - Beginners
 
How to build twitter bot using golang from scratch
How to build twitter bot using golang from scratchHow to build twitter bot using golang from scratch
How to build twitter bot using golang from scratch
 
Cómo tener analíticas en tu app y no volverte loco
Cómo tener analíticas en tu app y no volverte locoCómo tener analíticas en tu app y no volverte loco
Cómo tener analíticas en tu app y no volverte loco
 
Learning Svelte
Learning SvelteLearning Svelte
Learning Svelte
 
How to Use Twilio Video Plugin for Android with Flutter.pptx
How to Use Twilio Video Plugin for Android with Flutter.pptxHow to Use Twilio Video Plugin for Android with Flutter.pptx
How to Use Twilio Video Plugin for Android with Flutter.pptx
 
Simple setup for an Angular EventEmitter
Simple setup for an Angular EventEmitterSimple setup for an Angular EventEmitter
Simple setup for an Angular EventEmitter
 
SharePoint PowerShell for the Admin and Developer - A Venn Diagram Experience
SharePoint PowerShell for the Admin and Developer - A Venn Diagram ExperienceSharePoint PowerShell for the Admin and Developer - A Venn Diagram Experience
SharePoint PowerShell for the Admin and Developer - A Venn Diagram Experience
 
Google Web Toolkits
Google Web ToolkitsGoogle Web Toolkits
Google Web Toolkits
 
Asp.net tips
Asp.net tipsAsp.net tips
Asp.net tips
 
How to implement camera recording for USB webcam or IP camera in C#.NET
How to implement camera recording for USB webcam or IP camera in C#.NETHow to implement camera recording for USB webcam or IP camera in C#.NET
How to implement camera recording for USB webcam or IP camera in C#.NET
 
Tizen-based Samsung TV SDK Overview
Tizen-based Samsung TV SDK OverviewTizen-based Samsung TV SDK Overview
Tizen-based Samsung TV SDK Overview
 
Asynchronous Programming at Netflix
Asynchronous Programming at NetflixAsynchronous Programming at Netflix
Asynchronous Programming at Netflix
 
Sperimentazioni lezione6 from_designtoapplication copy
Sperimentazioni lezione6 from_designtoapplication copySperimentazioni lezione6 from_designtoapplication copy
Sperimentazioni lezione6 from_designtoapplication copy
 
How to Develop Slack Bot Using Golang.pdf
How to Develop Slack Bot Using Golang.pdfHow to Develop Slack Bot Using Golang.pdf
How to Develop Slack Bot Using Golang.pdf
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
[Ajou unib.] Tizen v2.4 z3 practice
[Ajou unib.] Tizen v2.4 z3 practice[Ajou unib.] Tizen v2.4 z3 practice
[Ajou unib.] Tizen v2.4 z3 practice
 
Mobile Software Engineering Crash Course - C06 WindowsPhone
Mobile Software Engineering Crash Course - C06 WindowsPhoneMobile Software Engineering Crash Course - C06 WindowsPhone
Mobile Software Engineering Crash Course - C06 WindowsPhone
 
TADHack 2015 webinar Oracle Comms & Optare
TADHack 2015 webinar Oracle Comms & OptareTADHack 2015 webinar Oracle Comms & Optare
TADHack 2015 webinar Oracle Comms & Optare
 
TADHack 2015 Webinar Oracle Comms & Optare
TADHack 2015 Webinar Oracle Comms & OptareTADHack 2015 Webinar Oracle Comms & Optare
TADHack 2015 Webinar Oracle Comms & Optare
 
Riacon swiz
Riacon swizRiacon swiz
Riacon swiz
 

Mehr von Ryo Jin

Mehr von Ryo Jin (20)

Why is EFL used on Tizen?
Why is EFL used on Tizen?Why is EFL used on Tizen?
Why is EFL used on Tizen?
 
Samsung Z4 User Manual
Samsung Z4 User ManualSamsung Z4 User Manual
Samsung Z4 User Manual
 
Samsung ARTIK 050 (ARTIK ZERO) Modules Data Sheet
Samsung ARTIK 050 (ARTIK ZERO) Modules Data SheetSamsung ARTIK 050 (ARTIK ZERO) Modules Data Sheet
Samsung ARTIK 050 (ARTIK ZERO) Modules Data Sheet
 
Introduction to Watch Face Development with Tizen Studio
Introduction to Watch Face Development with Tizen StudioIntroduction to Watch Face Development with Tizen Studio
Introduction to Watch Face Development with Tizen Studio
 
Tizen 3.0's Window System Integration Layer of OpenGLES/EGL & Vulkan Driver
Tizen 3.0's Window System Integration Layer of OpenGLES/EGL & Vulkan DriverTizen 3.0's Window System Integration Layer of OpenGLES/EGL & Vulkan Driver
Tizen 3.0's Window System Integration Layer of OpenGLES/EGL & Vulkan Driver
 
Panduan Penggunaan Perangkat Wearable Tizen
Panduan Penggunaan Perangkat Wearable TizenPanduan Penggunaan Perangkat Wearable Tizen
Panduan Penggunaan Perangkat Wearable Tizen
 
Cara Menggunakan Smartphone Tizen
Cara Menggunakan Smartphone TizenCara Menggunakan Smartphone Tizen
Cara Menggunakan Smartphone Tizen
 
Gear Fit2 Watchface Design Guide
Gear Fit2 Watchface Design GuideGear Fit2 Watchface Design Guide
Gear Fit2 Watchface Design Guide
 
Samsung Indonesia: Tizen Store
Samsung Indonesia: Tizen StoreSamsung Indonesia: Tizen Store
Samsung Indonesia: Tizen Store
 
Samsung Indonesia: Tizen Wearables
Samsung Indonesia: Tizen WearablesSamsung Indonesia: Tizen Wearables
Samsung Indonesia: Tizen Wearables
 
Samsung Indonesia: Tizen Web Apps
Samsung Indonesia: Tizen Web AppsSamsung Indonesia: Tizen Web Apps
Samsung Indonesia: Tizen Web Apps
 
Samsung Indonesia: Tizen Native App
Samsung Indonesia: Tizen Native AppSamsung Indonesia: Tizen Native App
Samsung Indonesia: Tizen Native App
 
Samsung Indonesia: Tizen Platform Overview and IoT
Samsung Indonesia: Tizen Platform Overview and IoTSamsung Indonesia: Tizen Platform Overview and IoT
Samsung Indonesia: Tizen Platform Overview and IoT
 
Russian Tizen Project
Russian Tizen ProjectRussian Tizen Project
Russian Tizen Project
 
Samsung SM-R360 Tizen User Manual
Samsung SM-R360 Tizen User ManualSamsung SM-R360 Tizen User Manual
Samsung SM-R360 Tizen User Manual
 
Tizen Micro Profile for IoT device
Tizen Micro Profile for IoT deviceTizen Micro Profile for IoT device
Tizen Micro Profile for IoT device
 
Panduan Dasar Pemrograman Tizen
Panduan Dasar Pemrograman TizenPanduan Dasar Pemrograman Tizen
Panduan Dasar Pemrograman Tizen
 
The Story of Enlightenment, EFL, Tizen and Wayland
The Story of Enlightenment, EFL, Tizen and WaylandThe Story of Enlightenment, EFL, Tizen and Wayland
The Story of Enlightenment, EFL, Tizen and Wayland
 
Tizen PASS
Tizen PASSTizen PASS
Tizen PASS
 
Tizen PASS
Tizen PASSTizen PASS
Tizen PASS
 

Kürzlich hochgeladen

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Kürzlich hochgeladen (20)

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 

Getting Started with Tizen TV Web Apps

  • 1. Getting Started with Tizen TV Web Apps This guide explains the basics of Tizen TV web apps. NOTE: This guide assumes you have installed the Tizen-based Samsung TV SDK. What is a Tizen TV Web App? A Tizen TV Web App is an HTML5 based application designed for the Tizen TV environment. By using standard technologies like HTML5, JavaScript, and CSS, developers can create rich experiences for the TV platform. The Tizen TV platform provides a JavaScript “web api” to provide TV features to the web applications. HTML5’s video and audio tags provide the cornerstone of the multimedia functions. Figure 1 Apps Are Based on HTML, JS, and CSS Creating a Tizen TV Web App The easiest way to create a new Tizen TV Web App is to use the Tizen-based Samsung TV SDK IDE. Select File > New > Tizen Web Project. You can choose to create a project from the Templates or the Sample projects.
  • 2. How to Handle Remote Control Events To add support for key events, use the document.addEventListener function to connect a function to the keydown event: //Initialize function var init = function () { // TODO:: Do your initialization job console.log("init() called"); // add eventListener for tizenhwkey document.addEventListener('tizenhwkey', function(e) { if(e.keyName == "back") tizen.application.getCurrentApplication().exit(); }); document.addEventListener('keydown', remoteControlEvent); }; NOTE: Your event handling function can have any valid JavaScript function name. In this example, the function is named remoteControlEvent. Later in the code, implement the remoteControlEvent function: function remoteControlEvent(e) { console.log("Key Value : " + e.keyCode); switch(e.keyCode){ case 1: //do something case 2: // do something else . . . default: break; } } Testing Your Tizen TV Web App To test your Tizen TV Web App, you can launch it in the Web Simulator. To launch the project, right-click on it in the IDE and choose Run As > Tizen TV Web Simulator Application (Samsung TV) Figure 2 Launching the Web Simulator
  • 3. In the Web Simulator, you can test your app by using mouse, keyboard, or virtual Remote Control input. You can also launch the Debugger tool: Figure 3 The Debugger