Introduction to Tizen SDK Alpha. Taiho Choi Samsung Electronics

Transcription

1 Introduction to Tizen SDK Alpha Taiho Choi Samsung Electronics

2 Contents Web technologies of Tizen Components of SDK 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 In-Vehicle-Infotainment HTML5 CSS3 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 Alarm Contact FileSystem Call Bluetooth Application LBS Geocoder Time Power Calendar Messaging Button Color Pop-up Web UI framework Check Box List Context Pop-up Option Header Header & Footer Handler Media Content NFC System Information Image Slider Control bar Multimedia View W3C API Serve-Sent Events Canvas Orientation Web Storage Video Audio Acceleration Application Cache WebSocket Web SQL DB Web Worker File API Media Query CORS Geolocation 2D Transforms XMLHTTPRequest Animations 3D Transforms Supplementary API Viewport Metatag WebGL Fullscreen Typed Array 5/39

6 2 Component of Tizen SDK 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 Project explorer Editor area Outline/ Event Injector Connection explorer Problems/ Console/ Pages Property/ HTML/ CSS Preview 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 Select project template File -> New ->Tizen Web Project Select project template Write project name 16/39

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

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 : Developer site : Source site: Issue-tracking site:

39 Thank you!