Tizen SDK and Web App Development

Cheng Luo LinuxCon Europe 2012

Monday, 12 November 12 Agenda

• Tizen 2.0 alpha SDK

• Web app development

Monday, 12 November 12 Tizen 2.0 alpha SDK

• IDE - Eclipse based

• Emulator - qemu based

• Web based (Chrome) simulator

• UI Builder

• Event Injector

• Remote inspector /Firebug

• Documentation & Sample code

Monday, 12 November 12 Installing SDK

• The SDK supports Windows and Ubuntu

• The SDK Mac version is coming soon

• Installation Manager supports the snapshot-based or SDK image-based installation

• Pay attention to prerequisites, specially on Ubuntu (JDK, JRE, qemu, VTx support etc.)

Monday, 12 November 12 Monday, 12 November 12 Install JDK on Ubuntu

• Tizen IDE is based on Oracle Java v7, not OpenJDK

• Oracle doesn’t allow re-distribution of Java packages, so...

• oab-java6 a good script for installing oracle-jdk, oracle-jre on Ubuntu

• still need some tweaks to install the latest JDK-7u9 with oab- java6☞

☞: https://github.com/ﬂexiondotorg/oab-java6

Monday, 12 November 12 Running IDE on Ubuntu

• Install libwebkitgtk-1.0-0, if you get error such as☞:

Exception in thread "main" org.eclipse.swt.SWTError: No more handles [Unknown Mozilla path (MOZILLA_FIVE_HOME not set)]

• Install Ajax Tool Framework (ATF) if Event Injector is not shown☞

☞: http://tronprog.blogspot.co.uk/2012/05/eclipse-internal-web-browser-in-kubuntu.html

http://wiki.eclipse.org/ATF/Installing

Monday, 12 November 12 Tizen 2.0 alpha new features

auto-dividerMonday, 12 November 12 Tizen 2.0 alpha new features

Enhanced HTML5 WebKit2 WRT screen orientation multi-process APIs video subtitles video caption

keygen details battery status

auto-dividerMonday, 12 November 12 Tizen 2.0 alpha new features

Enhanced HTML5 Better IDE & SDK WebKit2 WRT screen orientation smart installer multi-process APIs snapshot-based video subtitles video caption enhanced openGL ES installation

keygen details battery status UI Builder WebGL accelerated emulator

auto-dividerMonday, 12 November 12 Tizen 2.0 alpha new features

Enhanced HTML5 Better IDE & SDK WebKit2 WRT screen orientation smart installer multi-process APIs snapshot-based video subtitles video caption enhanced openGL ES installation

keygen details battery status UI Builder WebGL accelerated emulator Web UI FW

content selection shortcut scroll widget context menu auto-divider expandable list virtual list

auto-dividerMonday, 12 November 12 Tizen 2.0 alpha new features

Enhanced HTML5 Better IDE & SDK WebKit2 WRT screen orientation smart installer multi-process APIs snapshot-based video subtitles video caption enhanced openGL ES installation

keygen details battery status UI Builder WebGL accelerated emulator

Web UI FW More Device APIs content selection shortcut scroll widget download APIs notiﬁcation APIs context menu auto-divider expandable list power control virtual list

auto-dividerMonday, 12 November 12 Web apps on Tizen

Monday, 12 November 12 Web Apps

Mobile site Hosted app Packaged app UI web page generic UI generic/native Store search engine app stores app stores

only add a manifest ﬁle no need to install ofﬂine launching low maintenance/memory Pros low memory footprint access to device s APIs footprint

security risk require a server maintenance Cons limited features

Monday, 12 November 12 Mobile Web

%%% %%% %%% FacebookApp& % &

Monday, 12 November 12 Mobile Web EASY

%%% %%% %%% FacebookApp& % &

Monday, 12 November 12 Other Web Apps

webOS WebWorks Tizen

tizen, Application, enyo.kind, enyo.Animator, SystemInfo, Core Core API enyo.Signals, Notiﬁcation, HTML5, CSS3

AJAX enyo.Aync, xhr, json, cookie jQuery.get, XMLHttpRquest jQuery.get

Touch Touch, ScrollMath, jQuery touch events, jQuery touch events events ScrollStrategy, Scoller Tizen events

jQueryMobile, Tizen UI onyx CSS Web UI

Monday, 12 November 12 Other Web Apps

CODE REWRITE webOS WebWorks Tizen

tizen, Application, enyo.kind, enyo.Animator, SystemInfo, Core Core API enyo.Signals, Notiﬁcation, HTML5, CSS3

AJAX enyo.Aync, xhr, json, cookie jQuery.get, XMLHttpRquest jQuery.get

Touch Touch, ScrollMath, jQuery touch events, jQuery touch events events ScrollStrategy, Scoller Tizen events

jQueryMobile, Tizen UI onyx CSS Web UI

Monday, 12 November 12 HTML5

GOOD LUCK

Monday, 12 November 12 Webkit-eﬂ Rendering Flow

web view Javascript Web core core

Evas Object (buffer)

UI FW Cairo Evas & Ecore

X Server

OpenGL ES/GL

Monday, 12 November 12 HTML5 compatibility test

NO.1

Monday, 12 November 12 Tizen Device API

System Info Alarm LBS Bluetooth Filesystem Application Media Content Call NFC Geocoder Calendar Messaging Contact Power Time Download Notiﬁcation

Monday, 12 November 12 Demo

Monday, 12 November 12 Monday, 12 November 12 Build your UI

• Tizen web UI framework

• jQuery Mobile

• CSS3 animation

Monday, 12 November 12 Tizen Web UI vs Native

vs.

Monday, 12 November 12 CSS3 animation - Flipboard

Monday, 12 November 12 Porting web apps

Monday, 12 November 12 Case study: webOS Onyx

Monday, 12 November 12 Demo

Monday, 12 November 12 Monday, 12 November 12 Case Study: BlackBerry Aura

Portrait Landscape

Monday, 12 November 12 After porting

Monday, 12 November 12 Screen Resolution

720

1024 9:16 1280

17:10 600

Playbook Tizen HD

Monday, 12 November 12 Device API

var acc = new Vector(0,0); acc.x = event.accelerationIncludingGravity.x; acc.y = event.accelerationIncludingGravity.y; var accAngle = Math.atan2(-acc.x, acc.y); //angle between the rope and x axis

Y X

Playbook Tizen HD

Monday, 12 November 12 The last mile - Packaging

Monday, 12 November 12 thank you

@chengluo [email protected]

Monday, 12 November 12