Tizen SDK & App Development Sungkyunkwan University

Contents Tizen SDK Native/Web application Installing Tizen SDK Introduction to SDK Native/Web application Sample applications & Web coding Application Development [Native/Web] Hello Tizen [Web] HTML5 Features (web page link, multimedia support) [Native] To do list

Installing Tizen SDK for Windows

Installing Tizen SDK (Windows) Tizen IDE & SDK image download https://developer.tizen.org/development/tools/download?langswitch=en Tizen SDK Contents IDE(Integrated Development Environment) Eclipse IDE based Tizen-specific development tool add-on Emulator Toolchain Sample code Documentation Tizen SDK Install instruction https://developer.tizen.org/development/tools/download/installing-sdk?langredirect=1 Tizen 2.3 Release Notes https://developer.tizen.org/development/tools/download/release-notes/tizen-sdk/2.3-rev3-jul-6-2015

Installing Tizen SDK (Windows) System Requirements OS Ubuntu® 12.04 or 12.10 (32- or 64-bit) Microsoft Windows® XP (32-bit) Service Pack 2 or later, Microsoft Windows® 7 (32- or 64-bit) Apple Mac OS® X 10.7 Lion (64-bit), or Apple Mac OS® X 10.8 Mountain Lion (64-bit) Dual core 2GHz CPU 2GB RAM memory 6GB storage Local Administrative Privileges JRE(Java Runtime Environment) v6 http://www.oracle.com/technetwork/java/javase/downloads/index.html List of available graphic cards and webcams https://developer.tizen.org/development/tools/download/installing-sdk/prerequisites?langswitch=en

Installing Tizen SDK (Windows) Installation Using networks Using the SDK install manager, download necessary data through the network SDK image installation Install SDK using full SDK image(including all necessary data) through the SDK install manager Versions of SDK Tizen 2.3 SDK Application development tool for Tizen based smartphone Tizen SDK for Wearable 1.0.0 Application development tool for Samsung galaxy gear http://developer.samsung.com/samsung-gear

Installing Tizen SDK (Windows) Download specific version of install manager and SDK image according to development environment

Installing Tizen SDK (Windows) Steps of SDK installation

Installing Tizen SDK (Windows) You can designate the path of package and pre-downloaded image in advanced option

Installing Tizen SDK (Windows) Intel HAXM(Hardware Accelerated Execution Manager) Hardware emulation engine using ‘Intel virtualization technology(VT)’ Support fast emulation with Tizen x86 emulator image and SDK

Installing Tizen SDK (Windows) Complete installation and run Tizen IDE Starts > Tizen SDK > Tizen IDE

Installing Tizen SDK (Windows) Set the path of working directory and run Tizen SDK

Installing Tizen SDK (Windows) Main screen

Installing Tizen SDK (Windows) Execute simulator Run  Run As  Tizen Web Simulator Application Available to change html page and composition of device-like screen using several panels

Installing Tizen SDK (Windows) Emulator Execute simulator Run  Run As  Tizen Web Application or, execute Emulator Manager in Connection Explorer Emulator Manager Environment setup Target Emulator Emulator screen & FS Explore

Installing Tizen SDK (Windows) Event Injector Generate Events in Tizen emulator Telephony, Sensor, NFC, Location etc.

Installing Tizen SDK for Linux

Installing Tizen SDK (Linux) System requirements Ubuntu® 12.04 or 12.10 (32- or 64-bit) Dual core with 2 GHz CPU Minimum 2GB RAM Memory Minimum 6 GB free disk space Install upper version of Oracle ® Java* v6 Install Oracle® Java 7

Installing Tizen SDK (Linux) Install necessary packages Install manager download

Installing Tizen SDK (Linux) Change mode to execute the install manager $chmod +x tizen-sdk_2.3.63_ubuntu-64.bin Install manager execution ./tizen-sdk_2.3.63_ubuntu-64.bin

Installing Tizen SDK (Linux) Using Install manager

Installing Tizen SDK (Linux) Run Tizen IDE

Installing Tizen SDK (Linux) Select working directory

Installing Tizen SDK (Linux) Emulator manager

Installing Tizen SDK (Linux) Need for signing to run application

Installing Tizen SDK (Linux) Signing a package

Installing Tizen SDK (Linux) Problem Error in executing simulator Solution Setup Chrome browser path WindowProperencesTizen SDKWebChrome

Installing Tizen SDK (Linux) Setup Chrome browser path --no-first-run --activate-on-launch --no-default-browser-check --allow-file-access-from-files --disable-web-security --disable-translate --proxy-auto-detect --proxy-bypass-list=127.0.0.1

Installing Tizen SDK (Linux) Simulator layout

Installing Tizen SDK (Linux) Problem Unable to use OpenJDK Solution Reference: JAVA installation Ubuntu help site: https://help.ubuntu.com/community/Java

Introduction to Tizen SDK

What is Tizen SDK? Tools for Tizen app development 2012 SAMSUNG Electronics Co.

Tizen IDE components

Event injector Sensors Location Telephony NFC Device Accelerometer Gyroscope Geomagnetic Proximity Light Motion Location Manual/Map/Log file Telephony Call/SMS (from/to event injector) NFC NDEF (NFC Data Exchange Format) message NFC Tag P2P Device Battery level Earjack USB RSSI (Received Signal Strength Indication)

Web App Simulator Based chrome browser No packaging/installation process to target (real device or emulator) Run web app without target for the purpose of quick/instant test

Emulator Emulation of physical target (currently, phone-like) QEMU Virtual board + Event Injector + Emulator manager (configuration) Better performance and portability Not all devices are emulated due to performance & portability OpenGL, Audio/Video codec acceleration Configurable virtual HW

Execution with HW VT acceleration High performance with HW VT support Inter VT-x or AMD-V Special kernel driver needed KVM in Linux and HAXM in Windows

Menu of Emulator Hardware keyboard, screen shot, SDB, rotate, scale Multi touch Ctrl + mouse click

Smart Development Bridge Command tools for emulator/device management Supply basic commands for application development file transfer, remote shell command, port forwarding for a debugger, and viewing, filtering, and controlling device log output Installation SDB tool in “tizen-sdk/tools/sdb” To use the sdb commands, be in the sdb directory Or add the sdb location toe the environment path variable Learn more Command Description sdb push <local> <remote> Copy a file or directory recursively to the device's data file. Content that is generally considered suitable for children three years of age and older. sdb pull <remote> [<local>] Copy a file or directory recursively from the device's data file. sdb shell Run a remote shell interactively by dropping into a remote shell on an Emulator or device instance.

UI builder Design user interface for both web and native applications Web UI builder Native UI builder

Packaging an application Application Package Manager One of the core modules of Tizen application framework Responsible for installing, uninstalling, and updating packages, and storing their information Retrieve information related to the packages that are installed on the device Applications in the same package follow the same installation life-cycle and it is handled by the application package manager The root of the Tizen native package is the path of the ZIP archive and it contains reserved folders

Packaging a web application Widget package includes all the support files that are needed by the widget Widget is a complete standalone Web application without any additional external resources or network connectivity

Packaging a web application Package format and file extension File format: ZIP archive file format File extension: .wgt Directory hierarchy /bin /<Package ID> Symbolic link to Web runtime /opt /data /config.xml Configuration data /usr /icon.png /apps Default icon {png|gif|ico|svg} /res /wgt /<Package ID> /index.html Default start file {html|htm|svg|xhtml|xht} /css CSS source files /js JavaScript files

Packaging a native application UI and service applications can be packaged together Only one UI application, while one or more service applications

Packaging a native application Package format and file extension File format: ZIP archive file format File extension: .tpk Directory hierarchy /opt /<Executable Name1> /usr /bin /<Executable Name2> App executable binary /<Executable Name3> /apps /data App private data /<Package ID> /lib App libraries /data /res App resources /res /shared /trusted App shared resources

Packaging a hybrid application Package format and file extension File format: ZIP archive file format File extension: .wgt Directory hierarchy /<Package ID> /opt /bin /<Executable Name1> /data /<Executable Name2> /usr /icon.png /info /manifest.xml /apps /lib /wgt /index.html /<Package ID> Web project root /res /css Native resources or web content /data /shared /res /trusted

Sample Applications & Web Coding

Sample Application Types Provided in New project wizard Native applications Normal App / UI App / UIFW Web applications Hybrid / Web

Sample Applications Native App Web App

Web Application Templates Basic Tizen Basic Application Tizen Web UI Framework Web application based on Tizen Web UI Framework Tizen Web UI Builder Use a Tizen Builder Project to create Tizen Web application using Tizen Builder jQuery Mobile Web application based on jQuery Mobile

Native Application Templates Library The template for developing a shared library or static library (*.a) Service Application The empty template for developing service application UI Application The empty template project for developing UI Application UI Builder Application Support Tizen native UI builder

How to write code 1. Web references http://www.w3schools.com/ Refer to grammar of HTML/CSS, JavaScript, XML, JSON, jQueryMobile Tryit Editor for test code results

How to write code 2. IDE content assist or Jlint Content assist; suggest available function or keyword Jlint; automatically shows the syntax error and warning

How to write code 3. Using sample application provided by Tizen IDE Refer to sample code already implemented

HTML5 Features

Descriptions Functions Requirements TODO Make a Tizen web application with Multimedia playing (refer to HTML5 sample code) Connect web page with URL Requirements Header, Footer, Button page link, listview, tizen video module TODO Display recently-visited 5 webpage history with listview Connect media UI control with javascript function

Main page <div>; define division or section of HTML Add Header <h1> to <h6>; header tag Add listview to connect to a new page <ul>; Define unordered list <li>; Define list item Connect each pages with href attribute

Webpage and Log Layout Create a page to be linked to the first list item Header; Page name Footer; Link to previous page Add a text type of <input> to get URL input Add buttons to manage history Add a listview to print history

Webpage and Log Functions “Go to URL” button save an element of <key, value> to localStorage “Clear” button clear localStorage updateList() Append recently saved list item in localStorage

Webpage Results Connect internet and show history (MRU 5 log)

Multimedia layout Screen UI Define <video> with connecting src Add play control button Footer; Go back

Multimedia functions initialize()

Multimedia Results Link to video file to be played

openAPI

Descriptions Requirement Todo Web application which can get a selection query and display the result Use Open API sample file Todo Write query and print result

Start from new project Create project FileNewTizen Web ProjectTizenjQuery Mobile

Query and Display Layout Add buttons for keyword input and search Add listview to print search result