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.

1. DeveloperWorkshop
Hands-On: BuildingWeather
Application usingTizenWeb
Peradnya Dinata
Ib.putu@samsung.com
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

33. DeveloperWorkshop
Backup Slide