SlideShare a Scribd company logo

Samsung Indonesia: Tizen Web Apps

Ryo Jin, profile picture
Ryo Jin

The document outlines a developer workshop focused on building a weather application using Tizen Web, covering prerequisites, an introduction to Tizen Web API and the TAU framework, and hands-on coding sessions that involve project structure and functionality like tab navigation, list views, web requests, geolocation, and local storage. It highlights the tools needed, such as Java SDK and Tizen SDK, as well as the usage of Tizen development toolkits like simulators and web inspectors for testing and debugging. The agenda includes open discussions for participants to explore various aspects of Tizen Web development.

Software
Related topics:
Mobile App Insights • Web Development
1 of 33
Downloaded 19 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
DeveloperWorkshop Hands-On: BuildingWeather Application usingTizenWeb Peradnya Dinata Ib.putu@samsung.com SamsungResearch and Development Institute Indonesia(SRIN) SlideURL: http://tinyurl.com/TizenWebWorkshop2016
DeveloperWorkshop Agenda • Pre-Requisites • Introduction – Why& Whenusing TizenWeb – TizenWebAPI – TAUFramework – TizenWebDevelopmentToolkit • Workshop Hands-on – ProjectStructure – ProjectManifest – CreatingTabNavigation – CreatingListView – WebRequest – GetGeolocationInformation – CreatingPopup&Toast – WebLocal Storage • OpenDiscussion  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
DeveloperWorkshop Pre-requisites • Java 8 SDK (forTizen IDE) • Tizen SDK 2.4 (LatestRevision) – https://developer.tizen.org/development/tools/download • In TizenUpdate Manager, PleaseInstall(in 2.4 Mobile): – Emulator – Web app. Development (CLI & IDE) – TAU (CLI & IDE) • Latest GoogleChrome (forTizen Simulator) • TizenWeather Project – Skeleton: http://tinyurl.com/TizenWeatherSkeleton – Complete: http://tinyurl.com/TizenWeatherComplete  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
DeveloperWorkshop Introduction Tizen Web Development  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
DeveloperWorkshop Why & When Using TizenWeb ? • Easyto code! • Can use many existing weblibraries (ex: AngularJS,JQuery, etc.) • Highcustomizable (via CSS& JS) • HighCompatibility (via Webkitas intermediate layer) • Apps that not compute intensive • Ifyou want to use your codein another platform (maybebyusingApache Cordova) • Ifyou don’t know how to code inC/C++ Why ? When?  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
DeveloperWorkshop TizenWeb API W3C HTML5 Tizen Device API Tizen Web API • W3C/HTML5API – API that supported by HTML5 compliance browser • Tizen Device API – API that only supported by Tizen Platform • DeveloperGuide – https://developer.tizen.org/ dev-guide/2.4/  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
DeveloperWorkshop TizenWeb API • Base • Account • Application Framework – Package, Application, etc. • Content • Messaging • Multimedia • Network – Bluetooth, NFC (if available) • Social – Contact, bookmark, etc. • System – Setting, sensor, power, etc. • DOM,Form,& Styles • Device • Graphics • Media • Communication – Web Socket API • Storage – Web Storage, File API • Security • UI • Performance – Web Worker • Location • Widget • Supplementary – WebGL Tizen DeviceAPI W3C/HTML5StandardAPI  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion For details: https://developer.tizen.org/development/getting-started/web-application/understanding-tizen-programming/tizen-apis
DeveloperWorkshop TAU Framework (TizenAdvancedUI Framework) • Like Bootstrap,TAUFrameworkprovides: – TizenUI components(ex:button,list, etc.) – Page routing – Event,Animation,and Effect – Compatibilitywith JQuery • Good References toAboutTAUFramework (2.4): – TAU Framework Practices • https://developer.tizen.org/dev- guide/2.4/org.tizen.ui.practices/html/web/tau/guides_tau_w.htm – TAU Framework Documentation • https://developer.tizen.org/dev- guide/2.4/org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.ht m  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
DeveloperWorkshop TAU Framework (TizenAdvancedUI Framework) UIComponents TizenVersion (Since) Button 2.0 Checkbox 2.4 ColoredList View 2.4 Drawer 2.3 Dropdown Menu 2.4 Expandable 2.4 FloatingActions 2.4 GridView 2.4 IndexScrollbar 2.4 ListView 2.0 Navigation 2.3 UIComponents TizenVersion (Since) Page Indicator 2.4 Panel Changer 2.4 Popup 2.0 Progress 2.0 Radio 2.4 SearchInput 2.4 SectionChanger 2.4 Slider 2.0 Tabs 2.4 TextEnveloper 2.4 TextInput 2.0 Toggle Switch 2.0  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion • Thereare 23 UI Components that supportedbyTAU 2.4 • Example ofTAUUI Component can be foundat: 1. NewTizenWeb Project 2. Click“Tizen OnlineExample” 3. Click“TizenTAU Component”
DeveloperWorkshop TAU Framework (TizenAdvancedUI Framework) Example of ListViewStyles Example of ButtonStyles  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
DeveloperWorkshop TizenWeb DevelopmentToolkits • Tizen Simulator (Run Mode) – Thefastestway torun/test yourTizenWeb code – NeedGoogleChrome™ torun simulator • Web Inspector (Debug Mode) – Inspect element, resource, or networkrequest/responseof yourTizen Web code.Thefeel is similar toGoogleChrome™Web Inspector. – Best fordebuggingJS code, showpayloadof response. • DynamicAnalyzer (Profile Mode) – InspectCPU usage, memory usage,GPU usage, Energy usage, etc. – Best forfindingbottleneck oroptimizingapps • In-Build Checker, Beautifier, and Minifier – ForHTML,CSS, andJS  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
DeveloperWorkshop TizenWeb DevelopmentToolkit Tizen Simulator Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
DeveloperWorkshop TizenWeb DevelopmentToolkit Web Inspector & Dynamic Analyzer Debugging Analyzing  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
DeveloperWorkshop Hands-onSession TizenWeatherApplication  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
DeveloperWorkshop TizenWeb Project Structure • /css – Dir.to placeCSS files • /js – Dir.to place JSfiles • /lib – Dir.to place JSLib files • /lib/tau – Dir.ofTAU (TizenAdvanced UI)Framework • /index.html – TizenWeb Main Page • /config.xml – TizenWeb Manifest  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
DeveloperWorkshop TizenWeb Project Manifest • Overview – GeneralInformation • Widget – SpecificInformation • Features – Declare required features • Privileges – Declare required API accesses • Policy – Declare required URL accesses • Localization • Preferences • Tizen – BuildParameter  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
DeveloperWorkshop TizenWeb Project Manifest • API Privileges Detail: – https://developer.tizen.org/development/getting- started/web-application/understanding-tizen- programming/security-and-api-privileges • TizenWeb Features Detail: – https://developer.tizen.org/development/getting- started/web-application/understanding-tizen- programming/application-filtering  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
DeveloperWorkshop CreatingTab Navigation UsingTab andSectionTAU UI Component Code: Inside <div id=“main”> in index.html Result  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
DeveloperWorkshop Add Event Listener whenChanging Tabs Code: Inside “$(document).ready(…)” in main.js Result  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
DeveloperWorkshop Creating List View  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion Code: Inside <div id=“sectionchanger”> in index.html
DeveloperWorkshop Web Request Part 1: Add Features & Privileges in Tizen Manifest Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion • Features – http://tizen.org/feature/network.wifi – http://tizen.org/feature/network.telephony • Privileges – http://tizen.org/privilege/internet
DeveloperWorkshop Web Request Part 2: Add Access Policy in Tizen Manifest • Allowweb application to access whitelisted URL. – Solvecross-originproblem • HowtoAddWhitelist ? 1. Open Config.xml(Tizen Manifest) 2. Click “Policy”tab 3. Click “Add”in accesssection • Toopentheaccessfor all networkURLs: – NetworkURL: “*” – Allowsubdomain:true  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
DeveloperWorkshop Web Request Part 3:Add Request of Current & Forecast Weather Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion Code: InsideClass WeatherAPI in main.js
DeveloperWorkshop Web Request Part 4:Trigger the request when changing tabs Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion Code: Inside “$(document).ready(…)” in main.js As DefaultGPSValue
DeveloperWorkshop GetGeolocationInformation Trigger the GeolocationAPI when apps started Code: Inside “$(document).ready(…)” in main.js TizenManifestSettings  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion • Features – http://tizen.org/feature/loca tion.gps • Privileges – http://tizen.org/privilege/lo cation Code: InsideClass GeolocationAPI in main.js
DeveloperWorkshop Providing FakeGeolocation TizenSimulator  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion Tizen Emulator
DeveloperWorkshop Creating Popup &Toast • Popup will be showing when user starting the app for the first time • Toast will be use as notification for clearing webStorage Code: Inside <div id=“main”> in index.html Info  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
DeveloperWorkshop Creating Popup &Toast Code: Inside “$(document).ready(…)” in Main.js Result  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion • Register popup andtoast
DeveloperWorkshop Web LocalStorage ImplementingWeb LocalStorage into Popup Code: Inside “$(document).ready(…)” in Main.js Result  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion • Addclickevent handling to remove localStorage • Add localStorageto save popup state(firsttime popup)
DeveloperWorkshop Project Result  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
DeveloperWorkshop Open Discussion  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
DeveloperWorkshop The End –ThankYou Completed source code of this workshop can bedownloadat: http://tinyurl.com/TizenWeatherComplete
DeveloperWorkshop Backup Slide

More Related Content

PDF
Samsung Indonesia: Tizen Native App
Ryo Jin
 
PPTX
Tizen Native Application Development with C/C++
Gilang Mentari Hamidy
 
PDF
Samsung Indonesia: Tizen Wearables
Ryo Jin
 
KEY
Appcelerator Titanium - Hybrid App-Development
h_marvin
 
PDF
Introduction to Appcelerator Titanium
Adam Paxton
 
PPTX
Tizen introduction & architecture
Yoonsoo Kim
 
PDF
Appcelerator Titanium Intro (2014)
Nicholas Jansma
 
PDF
Ionic in 30
Mike Hartington
 
Samsung Indonesia: Tizen Native App
Ryo Jin
 
Tizen Native Application Development with C/C++
Gilang Mentari Hamidy
 
Samsung Indonesia: Tizen Wearables
Ryo Jin
 
Appcelerator Titanium - Hybrid App-Development
h_marvin
 
Introduction to Appcelerator Titanium
Adam Paxton
 
Tizen introduction & architecture
Yoonsoo Kim
 
Appcelerator Titanium Intro (2014)
Nicholas Jansma
 
Ionic in 30
Mike Hartington
 

What's hot (20)

PPTX
NCDevCon 2017 - Cross Platform Mobile Apps
John M. Wargo
 
PDF
Ionic App Platform Overview
Ionic Framework
 
PDF
Move Desktop Apps to the Cloud - RollApp & Embarcadero webinar
Embarcadero Technologies
 
PDF
Building advanced Chats Bots and Voice Interactive Assistants - Stève Sfartz ...
Codemotion
 
PDF
Ionic event: March 2021
Ionic Framework
 
PDF
Xamarin v.Now
Craig Dunn
 
PPTX
Hassle-Free Continuous Integration with Real Device Testing
Bitbar
 
PDF
Hybrid App Development, Redefined
Ionic Framework
 
PDF
Mobile Development Options
Great Wide Open
 
PDF
New NeXt for Advanced Developers
Cisco DevNet
 
PDF
Capacitor 1.0 launch
Ionic Framework
 
PDF
Reimagining Cordova: Building Cross-Platform Web Apps with Capacitor
Ionic Framework
 
KEY
OSGi, Eclipse and API Tooling
Chris Aniszczyk
 
PDF
Ionic Native: Native-powered apps, without the hassle
Ionic Framework
 
PPTX
Getting started with Appcelerator Titanium
Techday7
 
PPTX
Embedding Messages and Video Calls in your apps
Cisco DevNet
 
PDF
The internet of things in now , see how golang is a part of this evolution
Yoni Davidson
 
PPTX
Crosswalk and the Intel XDK
Intel® Software
 
PPTX
Intel XDK in Brief
Camilo Corea
 
PPTX
Mobile Web Apps and the Intel® XDK
Intel® Software
 
NCDevCon 2017 - Cross Platform Mobile Apps
John M. Wargo
 
Ionic App Platform Overview
Ionic Framework
 
Move Desktop Apps to the Cloud - RollApp & Embarcadero webinar
Embarcadero Technologies
 
Building advanced Chats Bots and Voice Interactive Assistants - Stève Sfartz ...
Codemotion
 
Ionic event: March 2021
Ionic Framework
 
Xamarin v.Now
Craig Dunn
 
Hassle-Free Continuous Integration with Real Device Testing
Bitbar
 
Hybrid App Development, Redefined
Ionic Framework
 
Mobile Development Options
Great Wide Open
 
New NeXt for Advanced Developers
Cisco DevNet
 
Capacitor 1.0 launch
Ionic Framework
 
Reimagining Cordova: Building Cross-Platform Web Apps with Capacitor
Ionic Framework
 
OSGi, Eclipse and API Tooling
Chris Aniszczyk
 
Ionic Native: Native-powered apps, without the hassle
Ionic Framework
 
Getting started with Appcelerator Titanium
Techday7
 
Embedding Messages and Video Calls in your apps
Cisco DevNet
 
The internet of things in now , see how golang is a part of this evolution
Yoni Davidson
 
Crosswalk and the Intel XDK
Intel® Software
 
Intel XDK in Brief
Camilo Corea
 
Mobile Web Apps and the Intel® XDK
Intel® Software
 
Ad

Viewers also liked (15)

PDF
OpenMobile ACL bringing Android apps to TIZEN
Ryo Jin
 
PDF
Sharman 2015 PhD thesis
Murray Sharman
 
PPT
Latihan 1 tata
leehuanthoo
 
PDF
EPA CAA Email 9.4.03
Obama White House
 
PPT
Sdc11 feb14 class12
missjaqui
 
PPT
Composicion bidimensional (1)
joselizz
 
PPT
Wondrous Wise Words
OH TEIK BIN
 
PDF
Rhoades_logo_color
Mary Wilsbach Katz
 
PPT
Animation lesson 2
Ty171
 
PPT
นิป เอมรัฐ
guest6487de
 
PPTX
두피에좋은음식
준배 채
 
PPTX
The 50 Most Popular Hashtags on Instagram in 2014
ShortStack
 
PPTX
How to rock the stage! Dr James Whittake and Dr Michelle Dickinson
Michelle Dickinson
 
PDF
なぜ研究者の名寄せが必要か ～ 世界の動向と研究者リゾルバー ～
National Institute of Informatics
 
PDF
DAMA Webinar: Influencing with Data – Facts Don’t Matter Much!
DATAVERSITY
 
OpenMobile ACL bringing Android apps to TIZEN
Ryo Jin
 
Sharman 2015 PhD thesis
Murray Sharman
 
Latihan 1 tata
leehuanthoo
 
EPA CAA Email 9.4.03
Obama White House
 
Sdc11 feb14 class12
missjaqui
 
Composicion bidimensional (1)
joselizz
 
Wondrous Wise Words
OH TEIK BIN
 
Rhoades_logo_color
Mary Wilsbach Katz
 
Animation lesson 2
Ty171
 
นิป เอมรัฐ
guest6487de
 
두피에좋은음식
준배 채
 
The 50 Most Popular Hashtags on Instagram in 2014
ShortStack
 
How to rock the stage! Dr James Whittake and Dr Michelle Dickinson
Michelle Dickinson
 
なぜ研究者の名寄せが必要か ～ 世界の動向と研究者リゾルバー ～
National Institute of Informatics
 
DAMA Webinar: Influencing with Data – Facts Don’t Matter Much!
DATAVERSITY
 
Ad

Similar to Samsung Indonesia: Tizen Web Apps (20)

PPTX
ESPC 2016 - From SharePoint to Office 365 Development - The path to your new ...
Sébastien Levert
 
PPTX
SharePoint Fest Chicago - From SharePoint to Office 365 Development
Sébastien Levert
 
PPTX
Modeveast Appcelerator Presentation
Aaron Saunders
 
PDF
Tizen 2.0 overview
Naruto TAKAHASHI
 
PPTX
SharePoint Saturday Ottawa - From SharePoint to Office 365 Development
Sébastien Levert
 
PDF
Introduction to the Tizen SDK 2.0.0 Alpha - Taiho Choi (Samsung) - Korea Lin...
Ryo Jin
 
PPTX
SharePoint Fest Seattle 2019 - From SharePoint to Office 365 Development
Sébastien Levert
 
PPTX
SharePoint Fest DC 2019 - From SharePoint to Office 365 Development
Sébastien Levert
 
PPTX
SharePoint Fest Chicago 2018 - From SharePoint to Office 365 development
Sébastien Levert
 
PPTX
SharePoint Fest Chicago 2019 - From SharePoint to Office 365 Development
Sébastien Levert
 
PPTX
SPTechCon Austin 2019 - From SharePoint to Office 365 development
Sébastien Levert
 
PPTX
ECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClass
European Collaboration Summit
 
PPTX
#Techorama belgium 2018 vincent biret what's new with the #MicrosoftGraph
Vincent Biret
 
PPTX
Cross Site Collection Navigation
Thomas Daly
 
PPTX
Vincent biret azure functions and flow (ottawa)
Vincent Biret
 
PPTX
Vincent biret azure functions and flow (toronto)
Vincent Biret
 
PDF
Real World SharePoint Framework and Azure Services
Brian Culver
 
PPTX
aOS Canadian Tour - Ottawa - From SharePoint to Office 365 Development
Sébastien Levert
 
PPTX
aOS Canadian Tour - Toronto - From SharePoint to Office 365 Development
Sébastien Levert
 
PPTX
aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development
Sébastien Levert
 
ESPC 2016 - From SharePoint to Office 365 Development - The path to your new ...
Sébastien Levert
 
SharePoint Fest Chicago - From SharePoint to Office 365 Development
Sébastien Levert
 
Modeveast Appcelerator Presentation
Aaron Saunders
 
Tizen 2.0 overview
Naruto TAKAHASHI
 
SharePoint Saturday Ottawa - From SharePoint to Office 365 Development
Sébastien Levert
 
Introduction to the Tizen SDK 2.0.0 Alpha - Taiho Choi (Samsung) - Korea Lin...
Ryo Jin
 
SharePoint Fest Seattle 2019 - From SharePoint to Office 365 Development
Sébastien Levert
 
SharePoint Fest DC 2019 - From SharePoint to Office 365 Development
Sébastien Levert
 
SharePoint Fest Chicago 2018 - From SharePoint to Office 365 development
Sébastien Levert
 
SharePoint Fest Chicago 2019 - From SharePoint to Office 365 Development
Sébastien Levert
 
SPTechCon Austin 2019 - From SharePoint to Office 365 development
Sébastien Levert
 
ECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClass
European Collaboration Summit
 
#Techorama belgium 2018 vincent biret what's new with the #MicrosoftGraph
Vincent Biret
 
Cross Site Collection Navigation
Thomas Daly
 
Vincent biret azure functions and flow (ottawa)
Vincent Biret
 
Vincent biret azure functions and flow (toronto)
Vincent Biret
 
Real World SharePoint Framework and Azure Services
Brian Culver
 
aOS Canadian Tour - Ottawa - From SharePoint to Office 365 Development
Sébastien Levert
 
aOS Canadian Tour - Toronto - From SharePoint to Office 365 Development
Sébastien Levert
 
aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development
Sébastien Levert
 

More from Ryo Jin (20)

PDF
Why is EFL used on Tizen?
Ryo Jin
 
PDF
Samsung Z4 User Manual
Ryo Jin
 
PDF
Samsung ARTIK 050 (ARTIK ZERO) Modules Data Sheet
Ryo Jin
 
PDF
Introduction to Watch Face Development with Tizen Studio
Ryo Jin
 
PDF
Tizen 3.0's Window System Integration Layer of OpenGLES/EGL & Vulkan Driver
Ryo Jin
 
PDF
Panduan Penggunaan Perangkat Wearable Tizen
Ryo Jin
 
PDF
Cara Menggunakan Smartphone Tizen
Ryo Jin
 
PDF
Gear Fit2 Watchface Design Guide
Ryo Jin
 
PDF
Samsung Indonesia: Tizen Store
Ryo Jin
 
PDF
Samsung Indonesia: Tizen Platform Overview and IoT
Ryo Jin
 
PDF
Russian Tizen Project
Ryo Jin
 
PDF
Samsung SM-R360 Tizen User Manual
Ryo Jin
 
PDF
Tizen Micro Profile for IoT device
Ryo Jin
 
PDF
Panduan Dasar Pemrograman Tizen
Ryo Jin
 
PDF
The Story of Enlightenment, EFL, Tizen and Wayland
Ryo Jin
 
PDF
Tizen PASS
Ryo Jin
 
PDF
Tizen PASS
Ryo Jin
 
PDF
Samsung Gear UI Design Guidelines
Ryo Jin
 
PDF
Attack surface analysis of Tizen devices
Ryo Jin
 
PDF
Samsung DeepSort
Ryo Jin
 
Why is EFL used on Tizen?
Ryo Jin
 
Samsung Z4 User Manual
Ryo Jin
 
Samsung ARTIK 050 (ARTIK ZERO) Modules Data Sheet
Ryo Jin
 
Introduction to Watch Face Development with Tizen Studio
Ryo Jin
 
Tizen 3.0's Window System Integration Layer of OpenGLES/EGL & Vulkan Driver
Ryo Jin
 
Panduan Penggunaan Perangkat Wearable Tizen
Ryo Jin
 
Cara Menggunakan Smartphone Tizen
Ryo Jin
 
Gear Fit2 Watchface Design Guide
Ryo Jin
 
Samsung Indonesia: Tizen Store
Ryo Jin
 
Samsung Indonesia: Tizen Platform Overview and IoT
Ryo Jin
 
Russian Tizen Project
Ryo Jin
 
Samsung SM-R360 Tizen User Manual
Ryo Jin
 
Tizen Micro Profile for IoT device
Ryo Jin
 
Panduan Dasar Pemrograman Tizen
Ryo Jin
 
The Story of Enlightenment, EFL, Tizen and Wayland
Ryo Jin
 
Tizen PASS
Ryo Jin
 
Tizen PASS
Ryo Jin
 
Samsung Gear UI Design Guidelines
Ryo Jin
 
Attack surface analysis of Tizen devices
Ryo Jin
 
Samsung DeepSort
Ryo Jin
 

Recently uploaded (20)

PPTX
CRUISE TICKETING SYSTEM | CRUISE RESERVATION SOFTWARE
philipnathen82
 
PPTX
Odoo Consulting Services by CandidRoot Solutions
CandidRoot Solutions Private Limited
 
PDF
Build Multi-agent using Agent Development Kit
FadyIbrahim23
 
PPTX
Mastering-Cybersecurity-The-Crucial-Role-of-Antivirus-Support-Services.pptx
akkie9682
 
PDF
Become an Agentblazer Champion Challenge
Dele Amefo
 
PDF
The Future of Smart Factories Why Embedded Analytics Leads the Way
Varsha Nayak
 
PDF
Multi-factor Authentication (MFA) requirement for Microsoft 365 Admin Center_...
Q-Advise
 
PPTX
Safe Confined Space Entry Monitoring_ Singapore Experts.pptx
prasadexiga0
 
PDF
Community & News Update Q2 Meet Up 2025
VictoriaMetrics
 
PDF
Teaching Reproducibility and Embracing Variability: From Floating-Point Exper...
University of Rennes, INSA Rennes, Inria/IRISA, CNRS
 
PDF
How to Confidently Manage Project Budgets
OnePlan Solutions
 
PPTX
Benefits of DCCM for Genesys Contact Center
pointel ivr
 
PDF
Jenkins: An open-source automation server powering CI/CD Automation
SaikatBasu37
 
PDF
Micromaid: A simple Mermaid-like chart generator for Pharo
ESUG
 
PDF
Become an Agentblazer Champion Challenge Kickoff
Dele Amefo
 
PDF
ShowUs: Pharo Stream Deck (ESUG 2025, Gdansk)
ESUG
 
PPTX
What to Capture When It Breaks: 16 Artifacts That Reveal Root Causes
Tier1 app
 
PDF
How Creative Agencies Leverage Project Management Software.pdf
Orangescrum
 
PPTX
Presentation of Computer CLASS 2 .pptx
darshilchaudhary558
 
PPTX
AIRLINE PRICE API | FLIGHT API COST |
philipnathen82
 
CRUISE TICKETING SYSTEM | CRUISE RESERVATION SOFTWARE
philipnathen82
 
Odoo Consulting Services by CandidRoot Solutions
CandidRoot Solutions Private Limited
 
Build Multi-agent using Agent Development Kit
FadyIbrahim23
 
Mastering-Cybersecurity-The-Crucial-Role-of-Antivirus-Support-Services.pptx
akkie9682
 
Become an Agentblazer Champion Challenge
Dele Amefo
 
The Future of Smart Factories Why Embedded Analytics Leads the Way
Varsha Nayak
 
Multi-factor Authentication (MFA) requirement for Microsoft 365 Admin Center_...
Q-Advise
 
Safe Confined Space Entry Monitoring_ Singapore Experts.pptx
prasadexiga0
 
Community & News Update Q2 Meet Up 2025
VictoriaMetrics
 
Teaching Reproducibility and Embracing Variability: From Floating-Point Exper...
University of Rennes, INSA Rennes, Inria/IRISA, CNRS
 
How to Confidently Manage Project Budgets
OnePlan Solutions
 
Benefits of DCCM for Genesys Contact Center
pointel ivr
 
Jenkins: An open-source automation server powering CI/CD Automation
SaikatBasu37
 
Micromaid: A simple Mermaid-like chart generator for Pharo
ESUG
 
Become an Agentblazer Champion Challenge Kickoff
Dele Amefo
 
ShowUs: Pharo Stream Deck (ESUG 2025, Gdansk)
ESUG
 
What to Capture When It Breaks: 16 Artifacts That Reveal Root Causes
Tier1 app
 
How Creative Agencies Leverage Project Management Software.pdf
Orangescrum
 
Presentation of Computer CLASS 2 .pptx
darshilchaudhary558
 
AIRLINE PRICE API | FLIGHT API COST |
philipnathen82
 

Samsung Indonesia: Tizen Web Apps

  • 1. DeveloperWorkshop Hands-On: BuildingWeather Application usingTizenWeb Peradnya Dinata [email protected] SamsungResearch and Development Institute Indonesia(SRIN) SlideURL: http://tinyurl.com/TizenWebWorkshop2016
  • 2. DeveloperWorkshop Agenda • Pre-Requisites • Introduction – Why& Whenusing TizenWeb – TizenWebAPI – TAUFramework – TizenWebDevelopmentToolkit • Workshop Hands-on – ProjectStructure – ProjectManifest – CreatingTabNavigation – CreatingListView – WebRequest – GetGeolocationInformation – CreatingPopup&Toast – WebLocal Storage • OpenDiscussion  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
  • 3. DeveloperWorkshop Pre-requisites • Java 8 SDK (forTizen IDE) • Tizen SDK 2.4 (LatestRevision) – https://developer.tizen.org/development/tools/download • In TizenUpdate Manager, PleaseInstall(in 2.4 Mobile): – Emulator – Web app. Development (CLI & IDE) – TAU (CLI & IDE) • Latest GoogleChrome (forTizen Simulator) • TizenWeather Project – Skeleton: http://tinyurl.com/TizenWeatherSkeleton – Complete: http://tinyurl.com/TizenWeatherComplete  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
  • 4. DeveloperWorkshop Introduction Tizen Web Development  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
  • 5. DeveloperWorkshop Why & When Using TizenWeb ? • Easyto code! • Can use many existing weblibraries (ex: AngularJS,JQuery, etc.) • Highcustomizable (via CSS& JS) • HighCompatibility (via Webkitas intermediate layer) • Apps that not compute intensive • Ifyou want to use your codein another platform (maybebyusingApache Cordova) • Ifyou don’t know how to code inC/C++ Why ? When?  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
  • 6. DeveloperWorkshop TizenWeb API W3C HTML5 Tizen Device API Tizen Web API • W3C/HTML5API – API that supported by HTML5 compliance browser • Tizen Device API – API that only supported by Tizen Platform • DeveloperGuide – https://developer.tizen.org/ dev-guide/2.4/  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
  • 7. DeveloperWorkshop TizenWeb API • Base • Account • Application Framework – Package, Application, etc. • Content • Messaging • Multimedia • Network – Bluetooth, NFC (if available) • Social – Contact, bookmark, etc. • System – Setting, sensor, power, etc. • DOM,Form,& Styles • Device • Graphics • Media • Communication – Web Socket API • Storage – Web Storage, File API • Security • UI • Performance – Web Worker • Location • Widget • Supplementary – WebGL Tizen DeviceAPI W3C/HTML5StandardAPI  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion For details: https://developer.tizen.org/development/getting-started/web-application/understanding-tizen-programming/tizen-apis
  • 8. DeveloperWorkshop TAU Framework (TizenAdvancedUI Framework) • Like Bootstrap,TAUFrameworkprovides: – TizenUI components(ex:button,list, etc.) – Page routing – Event,Animation,and Effect – Compatibilitywith JQuery • Good References toAboutTAUFramework (2.4): – TAU Framework Practices • https://developer.tizen.org/dev- guide/2.4/org.tizen.ui.practices/html/web/tau/guides_tau_w.htm – TAU Framework Documentation • https://developer.tizen.org/dev- guide/2.4/org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.ht m  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
  • 9. DeveloperWorkshop TAU Framework (TizenAdvancedUI Framework) UIComponents TizenVersion (Since) Button 2.0 Checkbox 2.4 ColoredList View 2.4 Drawer 2.3 Dropdown Menu 2.4 Expandable 2.4 FloatingActions 2.4 GridView 2.4 IndexScrollbar 2.4 ListView 2.0 Navigation 2.3 UIComponents TizenVersion (Since) Page Indicator 2.4 Panel Changer 2.4 Popup 2.0 Progress 2.0 Radio 2.4 SearchInput 2.4 SectionChanger 2.4 Slider 2.0 Tabs 2.4 TextEnveloper 2.4 TextInput 2.0 Toggle Switch 2.0  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion • Thereare 23 UI Components that supportedbyTAU 2.4 • Example ofTAUUI Component can be foundat: 1. NewTizenWeb Project 2. Click“Tizen OnlineExample” 3. Click“TizenTAU Component”
  • 10. DeveloperWorkshop TAU Framework (TizenAdvancedUI Framework) Example of ListViewStyles Example of ButtonStyles  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
  • 11. DeveloperWorkshop TizenWeb DevelopmentToolkits • Tizen Simulator (Run Mode) – Thefastestway torun/test yourTizenWeb code – NeedGoogleChrome™ torun simulator • Web Inspector (Debug Mode) – Inspect element, resource, or networkrequest/responseof yourTizen Web code.Thefeel is similar toGoogleChrome™Web Inspector. – Best fordebuggingJS code, showpayloadof response. • DynamicAnalyzer (Profile Mode) – InspectCPU usage, memory usage,GPU usage, Energy usage, etc. – Best forfindingbottleneck oroptimizingapps • In-Build Checker, Beautifier, and Minifier – ForHTML,CSS, andJS  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
  • 12. DeveloperWorkshop TizenWeb DevelopmentToolkit Tizen Simulator Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
  • 13. DeveloperWorkshop TizenWeb DevelopmentToolkit Web Inspector & Dynamic Analyzer Debugging Analyzing  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
  • 14. DeveloperWorkshop Hands-onSession TizenWeatherApplication  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
  • 15. DeveloperWorkshop TizenWeb Project Structure • /css – Dir.to placeCSS files • /js – Dir.to place JSfiles • /lib – Dir.to place JSLib files • /lib/tau – Dir.ofTAU (TizenAdvanced UI)Framework • /index.html – TizenWeb Main Page • /config.xml – TizenWeb Manifest  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
  • 16. DeveloperWorkshop TizenWeb Project Manifest • Overview – GeneralInformation • Widget – SpecificInformation • Features – Declare required features • Privileges – Declare required API accesses • Policy – Declare required URL accesses • Localization • Preferences • Tizen – BuildParameter  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
  • 17. DeveloperWorkshop TizenWeb Project Manifest • API Privileges Detail: – https://developer.tizen.org/development/getting- started/web-application/understanding-tizen- programming/security-and-api-privileges • TizenWeb Features Detail: – https://developer.tizen.org/development/getting- started/web-application/understanding-tizen- programming/application-filtering  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
  • 18. DeveloperWorkshop CreatingTab Navigation UsingTab andSectionTAU UI Component Code: Inside <div id=“main”> in index.html Result  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
  • 19. DeveloperWorkshop Add Event Listener whenChanging Tabs Code: Inside “$(document).ready(…)” in main.js Result  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
  • 20. DeveloperWorkshop Creating List View  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion Code: Inside <div id=“sectionchanger”> in index.html
  • 21. DeveloperWorkshop Web Request Part 1: Add Features & Privileges in Tizen Manifest Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion • Features – http://tizen.org/feature/network.wifi – http://tizen.org/feature/network.telephony • Privileges – http://tizen.org/privilege/internet
  • 22. DeveloperWorkshop Web Request Part 2: Add Access Policy in Tizen Manifest • Allowweb application to access whitelisted URL. – Solvecross-originproblem • HowtoAddWhitelist ? 1. Open Config.xml(Tizen Manifest) 2. Click “Policy”tab 3. Click “Add”in accesssection • Toopentheaccessfor all networkURLs: – NetworkURL: “*” – Allowsubdomain:true  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
  • 23. DeveloperWorkshop Web Request Part 3:Add Request of Current & Forecast Weather Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion Code: InsideClass WeatherAPI in main.js
  • 24. DeveloperWorkshop Web Request Part 4:Trigger the request when changing tabs Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion Code: Inside “$(document).ready(…)” in main.js As DefaultGPSValue
  • 25. DeveloperWorkshop GetGeolocationInformation Trigger the GeolocationAPI when apps started Code: Inside “$(document).ready(…)” in main.js TizenManifestSettings  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion • Features – http://tizen.org/feature/loca tion.gps • Privileges – http://tizen.org/privilege/lo cation Code: InsideClass GeolocationAPI in main.js
  • 26. DeveloperWorkshop Providing FakeGeolocation TizenSimulator  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion Tizen Emulator
  • 27. DeveloperWorkshop Creating Popup &Toast • Popup will be showing when user starting the app for the first time • Toast will be use as notification for clearing webStorage Code: Inside <div id=“main”> in index.html Info  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
  • 28. DeveloperWorkshop Creating Popup &Toast Code: Inside “$(document).ready(…)” in Main.js Result  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion • Register popup andtoast
  • 29. DeveloperWorkshop Web LocalStorage ImplementingWeb LocalStorage into Popup Code: Inside “$(document).ready(…)” in Main.js Result  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion • Addclickevent handling to remove localStorage • Add localStorageto save popup state(firsttime popup)
  • 30. DeveloperWorkshop Project Result  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
  • 31. DeveloperWorkshop Open Discussion  Pre-Requisites  Introduction  Why & When using Tizen Web  TizenWeb API  TAUFramework  TizenWeb Development Toolkit  Workshop Hands-on  Project Structure  Project Manifest  CreatingTab Navigation  CreatingList View  Web Request  Get Geolocation Information  CreatingPopup & Toast  Web LocalStorage  Open Discussion
  • 32. DeveloperWorkshop The End –ThankYou Completed source code of this workshop can bedownloadat: http://tinyurl.com/TizenWeatherComplete