The Art of
Tizen UI Theme Technology
in Various Profiles
Daniel Juyung Seo
Samsung Electronics
2
Who Am I
● Daniel Juyung Seo
● Senior Engineer at Samsung Electronics
● juyung.seo@samsung.com
● a.k.a SeoZ
● Tizen Core...
3
What is this talk about?
● Making frameworks and applications scalable in UI perspective.
● Enlightenment Foundation Lib...
4
Audience Introductions
● What is your expertise?
● Application Development
● Platform Development
● Design
● Marketing
Introduction
6
Tizen – Mobile/Wearable
● 2.2.1 SDK
● Test Devices
● RD-PQ, RD-210
● 1.0.0 beta2 Wearable SDK
7
Tizen – Camera, Gear 2
● NX300, NX300M, and etc. ● Gear 2, Gear 2 Neo
8
Various Tizen Profiles
● Mobile, IVI, Wearable, TV, Camera, PC, …
● Scalability is important.
9
What is Scalability?
● Supporting different
● resolutions, screen sizes, devices, and profiles.
Tizen Core
UI Framework
11
Tizen Architecture
Applications
Web Framework
Core Framework
Kernel
Native Framework
Linux Kernel & Device Drivers
W3C/...
12
Tizen Application Development Model
● Web Applications : HTML5 + CSS + JavaScript + jQuery
● Native Applications : C++
...
13
Does anyone know about EFL?
● Many applications are written in EFL on NX300 and Gear 2.
● EFL not ELF
● EFL may not be ...
14
What is EFL?
● Toolkit
● A set of libraries that provide a wide range of functionality
● http://www.enlightenment.org/
...
15
Core Framework and EFL
Applications
Web Framework
Core Framework
Kernel
Native Framework
Linux Kernel & Device Drivers
...
16
Why is EFL used on Tizen?
● Performance
● Small memory footprint
● GUI, Logic separation
● Themeable
● Animations
● H/W...
EFL(Edje + Elm)
18
EFL Block Diagram
Bindings
Elementary
EthumbEdbusEezeEioEfreet Emotion
Ecore
Embryo
Eet
Eina
Edje
Evas
19
Edje
● A complex graphical design and layout library.
● A graphical user interface without writing a line of C code.
● ...
20
Edje
● Separation of layout and logic
● a graphical part : GUI Layout binary (edj)
● a functionality : Executable logic...
21
Edje
● EDC Script
collections { - list the groups.
group { - the list of parts and programs that compose a given edje o...
22
Elementary
● Widget Set
● 75 widgets
● Non-Containers - Bg, Button, Check, Entry, Label, List, Icon, Win, …
● Container...
23
Elementary
< Bubble >
< Button >
< Calendar >
< Check >
< Toggle >
< Clock >
< Ctxpopup >
< Radio > < Frame >
< DaySele...
24
Elementary
● Elementary also uses edje for its layout
group { name: "elm/button/base/default";
images.image: "button_no...
25
How to achieve Scalability?
● 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 ...
26
How to achieve Scalability?
● Relative Positioning (2)
Bigger
Screen
Size
(y=0.1)
(y=0.9)
Fix
Header
27
How to achieve Scalability?
● Scale Factor
Higher Resolution + Scale Up
Higher Resolution
28
How to achieve Scalability?
● Border
< Original Background Image >
< Expand With Border >
< Expand Without Border >
● F...
29
There is more!
● Elementary Configuration
● You can change the configuration based on
your own needs.
● Configurations
...
Demo
31
Demo
● Elementary Test
● Terminology
32
EFL Tools for a better Scalability
● Enventor
● Eflete
● Elm theme viewer
33
EFL Applications on Tizen SDK
● Install Platform SDK ● EFL Application Template
34
Summary
● Tizen supports various profiles over a lot of device categories.
● EFL makes you write scalable GUI applicati...
Questions?
The Art of Tizen UI Theme Technology in Various Profiles
Upcoming SlideShare
Loading in...5
×

The Art of Tizen UI Theme Technology in Various Profiles

2,041

Published on

Tizen is aimed at various profiles, not only mobile. The UI must be scalable and themeable to support these diverse profiles. This presentation will share the technology behind the scalable and themeable Tizen UI which is called EFL (Enlightenment Foundation Libraries). With some configuration, you can reuse the same UI elements in different sized devices easily, regardless of DPI. This will reduce development time tremendously to support multiple products and applications. A couple of devices are already being shipped based on this technology.
This presentation will show the technology behind the Tizen products by
using the Tizen and Tizen Wearable SDK with some fancy demos.

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

No Downloads
Views
Total Views
2,041
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
26
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

The Art of Tizen UI Theme Technology in Various Profiles

  1. 1. The Art of Tizen UI Theme Technology in Various Profiles Daniel Juyung Seo Samsung Electronics
  2. 2. 2 Who Am I ● Daniel Juyung Seo ● Senior Engineer at Samsung Electronics ● juyung.seo@samsung.com ● a.k.a SeoZ ● Tizen Core UIFW EFL Developer ● Enlightenment/EFL Open Source Committer
  3. 3. 3 What is this talk about? ● Making frameworks and applications scalable in UI perspective. ● Enlightenment Foundation Libraries
  4. 4. 4 Audience Introductions ● What is your expertise? ● Application Development ● Platform Development ● Design ● Marketing
  5. 5. Introduction
  6. 6. 6 Tizen – Mobile/Wearable ● 2.2.1 SDK ● Test Devices ● RD-PQ, RD-210 ● 1.0.0 beta2 Wearable SDK
  7. 7. 7 Tizen – Camera, Gear 2 ● NX300, NX300M, and etc. ● Gear 2, Gear 2 Neo
  8. 8. 8 Various Tizen Profiles ● Mobile, IVI, Wearable, TV, Camera, PC, … ● Scalability is important.
  9. 9. 9 What is Scalability? ● Supporting different ● resolutions, screen sizes, devices, and profiles.
  10. 10. Tizen Core UI Framework
  11. 11. 11 Tizen Architecture 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
  12. 12. 12 Tizen Application Development Model ● Web Applications : HTML5 + CSS + JavaScript + jQuery ● Native Applications : C++ ● Core Applications : C or C++ ● But wait, they have something in common ● The Core Framework! Platforms Areas Mobile Gear 2 NX300 Core O O O Web O O X Native O X X
  13. 13. 13 Does anyone know about EFL? ● Many applications are written in EFL on NX300 and Gear 2. ● EFL not ELF ● EFL may not be an ELF... but it's as pretty as one. :) NO! YES!
  14. 14. 14 What is EFL? ● 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 ● Also effective on desktops ● Always focused on staying lean while providing fanciness ● The heart of the graphics component of Tizen
  15. 15. 15 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
  16. 16. 16 Why is EFL used on Tizen? ● Performance ● Small memory footprint ● GUI, Logic separation ● Themeable ● Animations ● H/W acceleration ● Various back-end engine ● Flexible ● Scalable
  17. 17. EFL(Edje + Elm)
  18. 18. 18 EFL Block Diagram Bindings Elementary EthumbEdbusEezeEioEfreet Emotion Ecore Embryo Eet Eina Edje Evas
  19. 19. 19 Edje ● 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.
  20. 20. 20 Edje ● 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 < Compile Time > .edc .edj .c executable edje_cc compile < Run Time > running runload
  21. 21. 21 Edje ● EDC Script collections { - list the 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. } } } }
  22. 22. 22 Elementary ● 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, …
  23. 23. 23 Elementary < Bubble > < Button > < Calendar > < Check > < Toggle > < Clock > < Ctxpopup > < Radio > < Frame > < DaySelector > < Slider > < FlipSelector > < FileSelector > < Genlist > < Gengrid > < Spinner > < Map > < Panes > < Progressbar >
  24. 24. 24 Elementary ● 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"; } ...
  25. 25. 25 How to achieve Scalability? ● 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)
  26. 26. 26 How to achieve Scalability? ● Relative Positioning (2) Bigger Screen Size (y=0.1) (y=0.9) Fix Header
  27. 27. 27 How to achieve Scalability? ● Scale Factor Higher Resolution + Scale Up Higher Resolution
  28. 28. 28 How to achieve Scalability? ● Border < Original Background Image > < Expand With Border > < Expand Without Border > ● Finger Size
  29. 29. 29 There is more! ● Elementary Configuration ● You can change the configuration based on your own needs. ● Configurations ● Scale, finger size, engine, scroll, focus, profile, … ● Profile: a set of the configurations ● default, standard, mobile, tv, wearable, …
  30. 30. Demo
  31. 31. 31 Demo ● Elementary Test ● Terminology
  32. 32. 32 EFL Tools for a better Scalability ● Enventor ● Eflete ● Elm theme viewer
  33. 33. 33 EFL Applications on Tizen SDK ● Install Platform SDK ● EFL Application Template
  34. 34. 34 Summary ● 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.
  35. 35. Questions?
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×