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.

1. Tizen SDK and Web App Development
Cheng Luo
LinuxCon Europe 2012
Monday, 5 November 12

2. Agenda
• Tizen 2.0 alpha SDK
• Web app development
Monday, 5 November 12

3. 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

4. Installing SDK
• The SDK supports Windows and Ubuntu
• The SDK Mac version is coming soon
• InstallationManager 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

5. Monday, 5 November 12

6. 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

7. 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, 5 November 12

8. Tizen 2.0 alpha new features
r Monday, 5 November 12

9. Tizen 2.0 alpha new features
Enhanced HTML5
WebKit2 WRT screen orientation
multi-process APIs
video subtitles video caption
keygen details battery status
r Monday, 5 November 12

10. 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
r Monday, 5 November 12

11. 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
r Monday, 5 November 12

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 notification APIs
context menu auto-divider
expandable list power control
virtual list
r Monday, 5 November 12

13. Web apps on Tizen
Monday, 5 November 12

14. 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 file
no need to install offline launching
Pros no memory footage
low maintenance/memory
access to device s APIs
footage
security risk
Cons limited features
require a server maintenance
Monday, 5 November 12

15. 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

16. Mobile Web
EA SY
<?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

17. Other Web Apps
webOS WebWorks Tizen
tizen, Application,
enyo.kind, enyo.Animator, SystemInfo,
Core Core API
enyo.Signals, Notification, 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, 5 November 12

18. Other Web Apps
RITE
REW
DE
CO
webOS WebWorks Tizen
tizen, Application,
enyo.kind, enyo.Animator, SystemInfo,
Core Core API
enyo.Signals, Notification, 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, 5 November 12

19. HTML5
Monday, 5 November 12

20. HTML5 CK
LU
OD
GO
Monday, 5 November 12

21. Webkit-efl Rendering Flow
web view Javascript
Web core
core
Evas Object
(buffer)
UI FW Cairo Evas & Ecore
X Server
OpenGL ES/GL
Monday, 5 November 12

22. HTML5 compatibility test
Monday, 5 November 12

23. HTML5 compatibility test
.1
NO
Monday, 5 November 12

24. Tizen Device API
Monday, 5 November 12

25. Tizen Device API
System Info
Alarm LBS
Bluetooth
Filesystem
Application Media Content
Call
NFC Geocoder
Calendar
Messaging
Contact
Power
Time Download
Notification
Monday, 5 November 12

26. Demo
Monday, 5 November 12

27. Monday, 5 November 12

28. Build your UI
• Tizen web UI framework
• jQuery Mobile
• CSS3 animation
Monday, 5 November 12

29. Tizen Web UI vs Native
vs.
Monday, 5 November 12

30. CSS3 animation - Flipboard
Monday, 5 November 12

31. CSS3 animation - Flipboard
Monday, 5 November 12

32. Porting web apps
Monday, 5 November 12

33. Case study: webOS Onyx
Monday, 5 November 12

34. Demo
Monday, 5 November 12

35. Monday, 5 November 12

36. Case Study: BlackBerry Aura
Portrait Landscape
Monday, 5 November 12

37. After porting
Monday, 5 November 12

38. Screen Resolution
720
1024
9:16
1280
17:10
600
Playbook Tizen HD
Monday, 5 November 12

39. 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
Z
Y
X
Playbook Tizen HD
Monday, 5 November 12

40. The last mile - Packaging
Monday, 5 November 12

41. thank you
@chengluo
c.luo@samsung.com
Monday, 5 November 12