Introduction to the Tizen SDK 2.0.0 Alpha - Taiho Choi (Samsung) - Korea Linux Forum 2012

1. Introduction to Tizen SDK 2.0.0 Alpha
Taiho Choi
Samsung Electronics

2. Contents
• Web technologies of Tizen
• Components of SDK 2.0.0 Alpha
• Hello world!
• Debugging apps
• Summary

3. 1
Web technologies on Tizen

4. Web technologies on Tizen
• Tizen utilizes web technologies for application compatibility
Smart Phones
Tablet PCs Net Books
HTML5 CSS3
In-Vehicle-Infotainment JavaScript Smart TVs
4/39

5. Supported web APIs
• Tizen follows many standard W3C APIs and provides a
powerful set of device specific APIs
Tizen specific Device API Web UI framework
Alarm Contact FileSystem Call Button Check Box List
Bluetooth Application LBS Geocoder Color Context Pop-up Option Header
Time Power Calendar Messaging Pop-up Header & Footer Handler
Media Content NFC System Information Image Slider Control bar Multimedia View
W3C API Supplementary API
Serve-Sent Events
Canvas Orientation Web Storage
Viewport Metatag
Video Audio Acceleration
Application Cache
WebGL Fullscreen
WebSocket Web SQL DB Web Worker File API
Media Query Typed Array
CORS Geolocation 2D Transforms
XMLHTTPRequest Animations 3D Transforms
5/39

6. 2
Component of Tizen SDK 2.0.0 Alpha

7. Tizen SDK
• Consists of
– IDE
– Web Simulator
– Emulator
– Event Injector
– UI Builder
– Documents
– Sample applications
– Remote Inspector
– Localization Wizard
– Project Wizard
– …
7/39

8. IDE
• Eclipse + additional plug-ins
Outline/
Project explorer
Event Injector
Editor area
Property/
Connection
HTML/
explorer Problems/ CSS Preview
Console/
Pages
8/39

9. Web Simulator
• Can simulate Tizen Web App.
– Using Configuration Panel, simulates various aspect of device
Configuration panel
9/39

10. Emulator
• Emulator
– Using Emulator Manager, you can configure certain device characteristics
– You can test your application before deploying to physical device
• Connection Explorer
– Shows connected devices and emulators
– Can explore the file system of the device
10/39

11. Event Injector
• Artificial events are generated
and transferred to emulator
– Device
– Location
– NFC
– Sensor
– Telephony
11/39

12. UI Builder
• UI layout code generation
• Easy programming model – Tizen Web UI Builder Project
12/39

13. Documents
• Documentation for development is provided
– Getting started with Tizen
– Programming guide & Tutorials
– API references
– Tizen platform programming
Help->Help Contents
13/39

14. Sample applications
• Speeds up the learning curve for a new developers
– 15 sample applications are provided to demonstrate the Tizen Web API
14/39

15. 3
Hello world!

16. Creating a project
• Create a new project
File -> New ->Tizen Web Project
• Select project template
Select project template
Write project name
16/39

17. Files in project
• Files created using Blank template
File Description
config.xml General information about icon, license, width, height,
and others
index.html App starting page
icon.png Application icon shown on menu
main.js Main JavaScript file
style.css CSS file to define consistent look and feel
• Files created using Tizen Web UI Builder template
File Description
page Set of files describes how to construct an individual
page
app.xml Manages page hierarchy, page transition, event
handler binding
tizen-ui- Framework files that define page base-class and start-
builder-fw up page
tizen-web-ui- Tizen Web UI Framework library
fw
17/39

18. config.xml - Feature
• To use restricted APIs, declare features
18/39

19. config.xml - Access
• Declare the URL to access external network resources
19/39

20. config.xml - Preferences
• Persistently stored name-value pair that is associated with the
application the first time the application is initiated
20/39

21. config.xml - Tizen
• Setting for Tizen schema extension, like ID or appservice
21/39

22. Creating Emulator
• Using Emulator Manager, you can create an emulator
– Click button in Connection Explorer
22/39

23. Creating Emulator
• Using Emulator Manager, you can create an emulator
– Click button in Connection Explorer
23/39

24. Creating Emulator
• Using Emulator Manager, you can create an emulator
– Click button in Connection Explorer
24/39

25. Running apps on emulator
Run -> Run As ->Tizen Web Application
25/39

26. Localization
• Tizen provides a tool for multi-lingual support
Project -> Localization -> Localization Wizard
26/39

27. Localization wizard
• Select files for localization
27/39

28. Localization wizard
• Select the locales
28/39

29. Localization wizard
• Associate files with specific locales
29/39

30. Localization
• Update the files on locales folder
30/39

31. 4
Debugging apps

32. Writing code
• “Contents Assist” suggests available functions and keywords
• “Jlint” automatically shows the syntax errors and warnings
32/39

33. Log messages
• Display messages in console view
– console.log("console.log");
– console.info("console.info");
– console.warn("console.warn");
– console.error("console.error");
– console.debug("console.debug");
33/39

34. Remote Inspector
• Remote Inspector supports JavaScript debugging with
Emulator
Run ->Debug As -> Tizen Web Application
34/39

35. Breakpoint & Watch Expression
• Opening a JavaScript File
• Adding a breakpoint
– Right Click on Line number -> select “Add Breakpoint”
• Adding a watch expressions
35/39

36. 5
Summary

37. Summary
• Tizen SDK supports various tools for Web app development
37/39

38. Tizen information & support
Main site : https://www.tizen.org Developer site : https://developer.tizen.org
Source site: https://source.tizen.org Issue-tracking site: https://bugs.tizen.org

39. Thank you!