Embed Size (px)
DESCRIPTION
In this talk, Cheng will walk through version 2.0 of the Tizen SDK, the alpha version of which was released to developers in September; the web app development process, Tizen IDE and latest version of the SDK tools will be explained to give web developers an overview of Tizen platform. The second half of the talk will take a practical approach, focusing on how to port HTML 5 applications to Tizen. Topics covered will include tips and tricks for porting apps and how to make the most of Tizen’s extensive support for W3C/ HTML5 standards. Cheng will also discuss how the Tizen device APIs are used to ‘fill in the gaps’ in the functionality offered by the W3C APIs.
Citation preview
Tizen SDK and Web App DevelopmentCheng Luo
LinuxCon Europe 2012
Monday, 5 November 12
Agenda
• Tizen 2.0 alpha SDK
•Web app development
Monday, 5 November 12
Tizen 2.0 alpha SDK
• IDE - Eclipse based
• Emulator - qemu based
• Web based (Chrome) simulator
• UI Builder
• Event Injector
• Remote inspector /Firebug
• Documentations & Sample codes
Monday, 5 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 and etc.)
Monday, 5 November 12
Monday, 5 November 12
Install JDK on Ubuntu
• Tizen IDE is based on Oracle Java v7, not OpenJDK
•Oracle doesn’t allow re-distribute 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/flexiondotorg/oab-java6
Monday, 5 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://wiki.eclipse.org/ATF/Installing
☞: http://tronprog.blogspot.co.uk/2012/05/eclipse-internal-web-browser-in-kubuntu.html
Monday, 5 November 12
Tizen 2.0 alpha new features
auto-dividerMonday, 5 November 12
Tizen 2.0 alpha new features
Enhanced HTML5WebKit2 WRT
multi-processvideo subtitles video caption
screen orientation APIs
keygen details battery status
auto-dividerMonday, 5 November 12
Tizen 2.0 alpha new features
Enhanced HTML5WebKit2 WRT
multi-processvideo subtitles video caption
screen orientation APIs
Better IDE & SDKsmart installer snapshot-based
installationenhanced openGL ES
UI Builderkeygen details battery status WebGL acceleratedemulator
auto-dividerMonday, 5 November 12
Tizen 2.0 alpha new features
Enhanced HTML5WebKit2 WRT
multi-processvideo subtitles video caption
screen orientation APIs
Better IDE & SDKsmart installer snapshot-based
installationenhanced openGL ES
UI Builderkeygen details battery status
Web UI FWcontent selection shortcut scroll widget
context menu auto-dividerexpandable list virtual list
WebGL acceleratedemulator
auto-dividerMonday, 5 November 12
Tizen 2.0 alpha new features
Enhanced HTML5WebKit2 WRT
multi-processvideo subtitles video caption
screen orientation APIs
Better IDE & SDKsmart installer snapshot-based
installationenhanced openGL ES
UI Builderkeygen details battery status
Web UI FWcontent selection shortcut scroll widget
context menu auto-dividerexpandable list virtual list
WebGL acceleratedemulator
auto-divider
More Device APIsdownload APIs notification APIs
power control
Monday, 5 November 12
Web apps on Tizen
Monday, 5 November 12
Web Apps
Mobile site Hosted app Packaged appUI web page generic UI generic/native
Store search engine app stores app stores
Pros no need to installno memory footage
only add a manifest filelow maintenance/memory footage
offline launchingaccess to device s APIs
Cons security risklimited features require a server maintenance
Monday, 5 November 12
Mobile Web
<?xml&version="1.0"%encoding="UTF18"?>%
<widget&xmlns="http://www.w3.org/ns/widgets"%xmlns:tizen="http://tizen.org/ns/widgets"%version="2.0%Beta"%viewmodes="fullscreen"%id="http://yourdomain/FacebookApp">%%%<icon&src="icon.png"/>%%%<content&src="http://m.facebook.com"/>%%%<name>FacebookApp</name>&<access&origin&=&"*"/>%</widget>&
Monday, 5 November 12
Mobile Web
<?xml&version="1.0"%encoding="UTF18"?>%
<widget&xmlns="http://www.w3.org/ns/widgets"%xmlns:tizen="http://tizen.org/ns/widgets"%version="2.0%Beta"%viewmodes="fullscreen"%id="http://yourdomain/FacebookApp">%%%<icon&src="icon.png"/>%%%<content&src="http://m.facebook.com"/>%%%<name>FacebookApp</name>&<access&origin&=&"*"/>%</widget>&
EASY
Monday, 5 November 12
Other Web Apps
webOS WebWorks Tizen
Core enyo.kind, enyo.Animator, enyo.Signals, Core API
tizen, Application, SystemInfo, Notification, HTML5, CSS3
AJAX enyo.Aync, xhr, json, cookie jQuery.get, XMLHttpRquest jQuery.get
Touch events
Touch, ScrollMath, ScrollStrategy, Scoller jQuery touch events jQuery touch events,
Tizen events
UI onyx CSS jQueryMobile, Tizen Web UI
Monday, 5 November 12
Other Web Apps
webOS WebWorks Tizen
Core enyo.kind, enyo.Animator, enyo.Signals, Core API
tizen, Application, SystemInfo, Notification, HTML5, CSS3
AJAX enyo.Aync, xhr, json, cookie jQuery.get, XMLHttpRquest jQuery.get
Touch events
Touch, ScrollMath, ScrollStrategy, Scoller jQuery touch events jQuery touch events,
Tizen events
UI onyx CSS jQueryMobile, Tizen Web UI
CODE REWRITE
Monday, 5 November 12
HTML5
Monday, 5 November 12
HTML5GOOD LUCK
Monday, 5 November 12
Webkit-efl Rendering Flow
Javascriptcore
Web core
Evas Object(buffer)
Cairo Evas & Ecore
X Server
OpenGL ES/GL
web view
UI FW
Monday, 5 November 12
HTML5 compatibility test
Monday, 5 November 12
HTML5 compatibility test
NO.1
Monday, 5 November 12
Tizen Device API
Monday, 5 November 12
Tizen Device API
Alarm
Application
Bluetooth
Calendar
Call
Contact
Filesystem
Geocoder
LBS
Media Content
Messaging
Power
NFC
System Info
Time DownloadNotification
Monday, 5 November 12
Demo
Monday, 5 November 12
Monday, 5 November 12
Build your UI
• Tizen web UI framework
• jQuery Mobile
• CSS3 animation
Monday, 5 November 12
Tizen Web UI vs Native
vs.
Monday, 5 November 12
CSS3 animation - Flipboard
Monday, 5 November 12
CSS3 animation - Flipboard
Monday, 5 November 12
Porting web apps
Monday, 5 November 12
Case study: webOS Onyx
Monday, 5 November 12
Demo
Monday, 5 November 12
Monday, 5 November 12
Landscape
Case Study: BlackBerry Aura
Portrait
Monday, 5 November 12
After porting
Monday, 5 November 12
Screen Resolution
1024
600 17:10
720
1280 9:16
Playbook Tizen HD
Monday, 5 November 12
Device APIvar 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
Z
X
Playbook Tizen HD
Monday, 5 November 12
The last mile - Packaging
Monday, 5 November 12
