The Art of
Tizen UI Theme
Technology
in Various Profiles
Daniel Juyung Seo
Samsung Electronics
July 23, 2014
Who Am I
 Daniel Juyung Seo
- a.k.a SeoZ
- Senior Engineer at Samsung Electronics
- juyung.seo@samsung.com
- @seojuyung
...
What is this talk about?
 Making frameworks and applications scalable in UI perspective.
 Enlightenment Foundation Libra...
Audience Introductions
 What is your expertise?
- Application Development
- Platform Development
- Design
- Marketing
Introduction
 Linux-based Open Source Platform
- A standard based open and flexible platform
- Linux Foundation Project
- Built from t...
 The OS of Everything
 Mobile, IVI, Wearable, TV, Camera, PC, …
Various Tizen Profiles
 NX300, NX300M, and etc.  Gear 2, Gear 2 Neo
Tizen Based Products – Camera and Smart Watch
 Test Devices
RD-PQ, RD-210
 2.2.1 SDK
 1.0.0 beta2 Wearable SDK
Tizen – Mobile/Wearable/TV
 2.3 Alpha SDK
- Mobile + ...
Scalability is Important
 Supporting different
resolutions, screen sizes, devices, and profiles.
Tizen Core
UI Framework
Applications
Web Framework
Core Framework
Kernel
Native Framework
Linux Kernel & Device Drivers
W3C/HTML5 Device API WRT S...
 Native Applications : C++
 Web Applications : HTML5 + CSS + JavaScript + jQuery
 Core Applications : C or C++
Platform...
 But wait, they have something in common
 The Core Framework!
 Core API + EFL
 Many applications are written in EFL on...
 EFL not ELF
EFL may not be an ELF... but it's as pretty as one. :)
NO! YES!
Does anyone know about EFL?
 Toolkit
A set of libraries that provide a wide range of functionality
http://www.enlightenment.org/
 Enlightenment Foun...
Core Framework and EFL
Applications
Web Framework
Core Framework
Kernel
Native Framework
Linux Kernel & Device Drivers
W3C...
 Performance
 Small memory footprint
 GUI, Logic separation
 Themeable
 Animations
 H/W acceleration
 Various back-...
EFL(Edje + Elm)
Bindings
Elementary
EthumbEdbusEezeEioEfreet Emotion
Ecore
Embryo
Eet
Eina
Edje
Evas
EFL Block Diagram
 A complex graphical design and layout library.
 A graphical user interface without writing a line of C code.
 Creates ...
 Separation of layout and logic
- a graphical part : GUI Layout binary (edj)
- a functionality : Executable logic binary ...
 EDC Script
collections { // list of groups.
group { // the list of parts and programs that compose a given edje object.
...
 Widget Set
 75 widgets
- Non-Containers - Bg, Button, Check, Entry, Label, List, Icon, Win, …
- Containers - Box, Confo...
< Bubble >
< Button >
< Calendar >
< Check >
< Toggle >
< Clock >
< Ctxpopup >
< Radio > < Frame >
< DaySelector >
< Slide...
 Elementary also uses edje for its layout
group { name: "elm/button/base/default";
images.image: "button_normal.png" COMP...
 Relative Positioning (1)
Part A
rel1
(x=0.0 y=0.0)
rel2
(x=1.0 y=0.3)
Part B
rel1
(x=0.0 y=0.3)
rel2
(x=1.0 y=1.0)
How t...
 Relative Positioning (2)
Bigger
Scree/n
/
Higher
Resolution
(y=0.1)
(y=0.9)
How to achieve Scalability? - Part 1
 Relative Positioning (2)
Bigger
Scree/n
/
Higher
Resolution
(y=0.1)
(y=0.9)
How to achieve Scalability? - Part 1
Fix
Hea...
 Scale Factor
Higher Resolution
How to achieve Scalability? - Part 2
 Scale Factor
Higher Resolution + Scale Up
Higher Resolution
How to achieve Scalability? - Part 2
 Using container widgets
- Box, Conformant, Grid, Layout, Panes, Scroller, Table, …
 Ex) Conformant → Naviframe → List
H...
 Border
< Original Background Image >
< Expand With Border >
< Expand Without Border >
How to achieve Scalability? - Part...
 Finger Size
How to achieve Scalability? - Part 5
 Elementary Configuration
- Configurations
Scale, finger size, engine, scroll, focus, profile, …
- You can change the con...
Demo
 Elementary Test
 Terminology
Demo
 Enventor
 Eflete
 Elm theme viewer
EFL Tools for a better Scalability
 Install Platform SDK  EFL Application Template
EFL Applications on Tizen SDK
 Tizen supports various profiles over a lot of device categories.
 EFL makes you write scalable GUI applications over va...
Questions?
Visit Samsung Booth for Tizen SDK Demo
ONE installer Develop App on IDE Run on Emulators
 Visit Samsung Booth and check T...
More Information
 Daniel Juyung Seo <juyung.seo@samsung.com>
- @seojuyung
- https://www.facebook.com/seojuyung
 https://...
Thank you
Upcoming SlideShare
Loading in …5
×

The Art of Tizen UI Theme Technology in Various Profiles (OSCON 2014)

1,197 views
996 views

Published on

This is presented at OSCON 2014 Conference.
http://www.oscon.com/oscon2014/public/schedule/detail/37626

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,197
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
19
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

The Art of Tizen UI Theme Technology in Various Profiles (OSCON 2014)

  1. 1. The Art of Tizen UI Theme Technology in Various Profiles Daniel Juyung Seo Samsung Electronics July 23, 2014
  2. 2. Who Am I  Daniel Juyung Seo - a.k.a SeoZ - Senior Engineer at Samsung Electronics - juyung.seo@samsung.com - @seojuyung  Tizen Core UIFW EFL Developer  Enlightenment/EFL Open Source Committer
  3. 3. What is this talk about?  Making frameworks and applications scalable in UI perspective.  Enlightenment Foundation Libraries  Slide: http://seoz.com/OSCON2014
  4. 4. Audience Introductions  What is your expertise? - Application Development - Platform Development - Design - Marketing
  5. 5. Introduction
  6. 6.  Linux-based Open Source Platform - A standard based open and flexible platform - Linux Foundation Project - Built from the ground up to address the needs of all stakeholders - Developed by a community of developers, under open source governance, and is open to all members who wish to participate. - Comes in multiple profiles to serve different industry requirements.
  7. 7.  The OS of Everything  Mobile, IVI, Wearable, TV, Camera, PC, … Various Tizen Profiles
  8. 8.  NX300, NX300M, and etc.  Gear 2, Gear 2 Neo Tizen Based Products – Camera and Smart Watch
  9. 9.  Test Devices RD-PQ, RD-210  2.2.1 SDK  1.0.0 beta2 Wearable SDK Tizen – Mobile/Wearable/TV  2.3 Alpha SDK - Mobile + Wearable Profiles
  10. 10. Scalability is Important  Supporting different resolutions, screen sizes, devices, and profiles.
  11. 11. Tizen Core UI Framework
  12. 12. Applications Web Framework Core Framework Kernel Native Framework Linux Kernel & Device Drivers W3C/HTML5 Device API WRT Social/Content Locations Etc. Web Applications Native Applications Core Applications App FW Graphics & UI Multimedia Web Messaging Location Security System Base Connectivity Telephony PIM Tizen Architecture
  13. 13.  Native Applications : C++  Web Applications : HTML5 + CSS + JavaScript + jQuery  Core Applications : C or C++ Platforms Areas Mobile Gear 2 NX300 Native O X X Web O O X Core O O O Tizen Application Development Model
  14. 14.  But wait, they have something in common  The Core Framework!  Core API + EFL  Many applications are written in EFL on the NX300 and Gear 2. The Core Framework
  15. 15.  EFL not ELF EFL may not be an ELF... but it's as pretty as one. :) NO! YES! Does anyone know about EFL?
  16. 16.  Toolkit A set of libraries that provide a wide range of functionality http://www.enlightenment.org/  Enlightenment Foundation Libraries - Created to support E17 development - Targeted at embedded since day 1 - Always focused on staying lean while providing fanciness - The heart of the graphics component of Tizen What is EFL?
  17. 17. Core Framework and EFL Applications Web Framework Core Framework Kernel Native Framework Linux Kernel & Device Drivers W3C/HTML5 Device API WRT Social/Content Locations Etc. Web Applications Native Applications Applications App FW Graphics & UI Multimedia Web Messaging Location Security System Base Connectivity Telephony PIM
  18. 18.  Performance  Small memory footprint  GUI, Logic separation  Themeable  Animations  H/W acceleration  Various back-end engine  Flexible  Scalable Why is EFL used on Tizen?
  19. 19. EFL(Edje + Elm)
  20. 20. Bindings Elementary EthumbEdbusEezeEioEfreet Emotion Ecore Embryo Eet Eina Edje Evas EFL Block Diagram
  21. 21.  A complex graphical design and layout library.  A graphical user interface without writing a line of C code.  Creates visual layouts from compiled EDC script - EDC is completely separate from application code - Can be changed at or during runtime  Layouts include - Images, Colors - Animations, Behaviors  Supports relative and absolute positioning. Edje
  22. 22.  Separation of layout and logic - a graphical part : GUI Layout binary (edj) - a functionality : Executable logic binary (C)  Utility - edje_cc : compile edc to edj - edje_decc : de-compile edj to edc .edc .edj .c executable edje_cc compile running runload Edje < Compile Time > < Run Time >
  23. 23.  EDC Script collections { // list of groups. group { // the list of parts and programs that compose a given edje object. images { } // list each image file that will be used in the edc. parts { part { // the most basic design elements of the group. // (ie. RECT, TEXT, IMAGE, SWALLOW, TEXTBLOCK, GROUP, BOX, TABLE, EXTERNAL) } } programs { program { // manipulates the different interface elements and serve as a bridge between // the application and interface. } } } } Edje
  24. 24.  Widget Set  75 widgets - Non-Containers - Bg, Button, Check, Entry, Label, List, Icon, Win, … - Containers - Box, Conformant, Grid, Layout, Panes, Scroller, Table, …  Fast, Finger friendly, Scalable, Themeable, … Elementary
  25. 25. < Bubble > < Button > < Calendar > < Check > < Toggle > < Clock > < Ctxpopup > < Radio > < Frame > < DaySelector > < Slider > < FlipSelector > < FileSelector > < Genlist > < Gengrid > < Spinner > < Map > < Panes > < Progressbar > Elementary
  26. 26.  Elementary also uses edje for its layout group { name: "elm/button/base/default"; images.image: "button_normal.png" COMP; images.image: "button_clicked.png" COMP; parts { part { name: "base"; mouse_events: 0; type: IMAGE description { state: "default" 0.0; image.normal: "button_normal.png"; rel1.relative: 0.0 0.0; rel2.relative: 1.0 1.0; image.border: 4 4 3 5; image.middle: SOLID; } description { state: "clicked" 0.0; inherit: "default" 0.0; image.normal: "button_clicked.png"; image.border: 5 5 4 6; } ... programs { program { signal: "mouse,down,1"; source: "event"; action: STATE_SET "clicked" 0.0; target: "base"; } ... Elementary
  27. 27.  Relative Positioning (1) Part A rel1 (x=0.0 y=0.0) rel2 (x=1.0 y=0.3) Part B rel1 (x=0.0 y=0.3) rel2 (x=1.0 y=1.0) How to achieve Scalability? - Part 1
  28. 28.  Relative Positioning (2) Bigger Scree/n / Higher Resolution (y=0.1) (y=0.9) How to achieve Scalability? - Part 1
  29. 29.  Relative Positioning (2) Bigger Scree/n / Higher Resolution (y=0.1) (y=0.9) How to achieve Scalability? - Part 1 Fix Header
  30. 30.  Scale Factor Higher Resolution How to achieve Scalability? - Part 2
  31. 31.  Scale Factor Higher Resolution + Scale Up Higher Resolution How to achieve Scalability? - Part 2
  32. 32.  Using container widgets - Box, Conformant, Grid, Layout, Panes, Scroller, Table, …  Ex) Conformant → Naviframe → List How to achieve Scalability? - Part 3
  33. 33.  Border < Original Background Image > < Expand With Border > < Expand Without Border > How to achieve Scalability? - Part 4
  34. 34.  Finger Size How to achieve Scalability? - Part 5
  35. 35.  Elementary Configuration - Configurations Scale, finger size, engine, scroll, focus, profile, … - You can change the configuration based on your own needs. - Profile: a set of the configurations default, standard, mobile, tv, wearable, … There are more!
  36. 36. Demo
  37. 37.  Elementary Test  Terminology Demo
  38. 38.  Enventor  Eflete  Elm theme viewer EFL Tools for a better Scalability
  39. 39.  Install Platform SDK  EFL Application Template EFL Applications on Tizen SDK
  40. 40.  Tizen supports various profiles over a lot of device categories.  EFL makes you write scalable GUI applications over various profiles with a good performance and small memory foot prints.  It's open. You can start it now. Summary
  41. 41. Questions?
  42. 42. Visit Samsung Booth for Tizen SDK Demo ONE installer Develop App on IDE Run on Emulators  Visit Samsung Booth and check Tizen SDK Demo at OSCON 2014!  Tizen SDK for multiple profiles
  43. 43. More Information  Daniel Juyung Seo <juyung.seo@samsung.com> - @seojuyung - https://www.facebook.com/seojuyung  https://tizen.org  http://enlightenment.org
  44. 44. Thank you

×