the art of tizen ui theme technology in various...
TRANSCRIPT
![Page 1: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/1.jpg)
The Art ofTizen UI Theme Technology
in Various Profiles
Daniel Juyung SeoSamsung Electronics
![Page 2: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/2.jpg)
2
Who Am I
● Daniel Juyung Seo● Senior Engineer at Samsung Electronics
● a.k.a SeoZ
● Tizen Core UIFW EFL Developer
● Enlightenment/EFL Open Source Committer
![Page 3: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/3.jpg)
3
What is this talk about?
● Making frameworks and applications scalable in UI perspective.
● Enlightenment Foundation Libraries
![Page 4: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/4.jpg)
4
Audience Introductions
● What is your expertise?● Application Development
● Platform Development
● Design
● Marketing
![Page 5: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/5.jpg)
Introduction
![Page 6: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/6.jpg)
6
Tizen – Mobile/Wearable
● 2.2.1 SDK● Test Devices
● RD-PQ, RD-210
● 1.0.0 beta2 Wearable SDK
![Page 7: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/7.jpg)
7
Tizen – Camera, Gear 2
● NX300, NX300M, and etc. ● Gear 2, Gear 2 Neo
![Page 8: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/8.jpg)
8
Various Tizen Profiles
● Mobile, IVI, Wearable, TV, Camera, PC, …
● Scalability is important.
![Page 9: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/9.jpg)
9
What is Scalability?
● Supporting different● resolutions, screen sizes, devices, and profiles.
![Page 10: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/10.jpg)
Tizen CoreUI Framework
![Page 11: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/11.jpg)
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
![Page 12: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/12.jpg)
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● Core Framework!
Platforms \ Areas Mobile Gear 2 NX300
Core O O ONative O X XWeb O O X
![Page 13: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/13.jpg)
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!
![Page 14: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/14.jpg)
14
What is EFL?
● Toolkit● A set of libraries which provides a wide range of functionalities● 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
![Page 15: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/15.jpg)
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
![Page 16: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/16.jpg)
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
![Page 17: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/17.jpg)
EFL(Edje + Elm)
![Page 18: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/18.jpg)
18
EFL Block Diagram
Bindings
Elementary
EthumbEdbusEezeEioEfreet Emotion
Ecore
EmbryoEet
Eina
Edje
Evas
![Page 19: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/19.jpg)
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, absolute positioning.
![Page 20: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/20.jpg)
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
![Page 21: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/21.jpg)
21
Edje
● EDC Scriptcollections { - 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.
}
}
}
}
![Page 22: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/22.jpg)
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, …
![Page 23: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/23.jpg)
23
Elementary
< Bubble >
< Button >
< Calendar >
< Check >
< Toggle >
< Clock >
< Ctxpopup >
< Radio > < Frame >
< DaySelector >
< Slider >
< FlipSelector >< FileSelector > < Genlist >
< Gengrid >
< Spinner >
< Map > < Panes >
< Progressbar >
![Page 24: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/24.jpg)
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";
}
...
![Page 25: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/25.jpg)
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)
![Page 26: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/26.jpg)
26
How to achieve Scalability?
● Relative Positioning (2)
BiggerScreenSize
(y=0.1)
(y=0.9)
FixTopParts
![Page 27: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/27.jpg)
27
How to achieve Scalability?
● Scale Factor
Higher Resolution + Scale Up
Higher Resolution
![Page 28: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/28.jpg)
28
How to achieve Scalability?
● Border
< Original Background Image >
< Expand With Border >
< Expand Without Border >
● Finger Size
![Page 29: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/29.jpg)
29
There is more!
● Elementary Configuration● You can change the configuration based on
your your needs.
● Configurations● Scale, finger size, engine, scroll, focus, profile, …
● Profile: a set of the configurations● default, standard, mobile, tv, wearable, …
![Page 30: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/30.jpg)
Demo
![Page 31: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/31.jpg)
31
Demo
● Elementary Test
● Terminology
![Page 32: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/32.jpg)
32
EFL Tools for a better Scalability
● Enventor
● Eflete
● Elm theme viewer
![Page 33: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/33.jpg)
33
EFL Applications on Tizen SDK
● Install Platform SDK ● EFL Application Template
![Page 34: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/34.jpg)
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.
![Page 35: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/35.jpg)
Questions?
![Page 36: The Art of Tizen UI Theme Technology in Various Profilesdownload.tizen.org/misc/media/conference2014/... · 2 Who Am I Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com](https://reader033.vdocuments.site/reader033/viewer/2022060304/5f08edfb7e708231d42468fc/html5/thumbnails/36.jpg)