This document discusses how to create scalable user interfaces for applications on Tizen, an open source platform. It focuses on the Enlightenment Foundation Libraries (EFL), which provide a widget toolkit and are used as the graphics component in Tizen's core framework. EFL uses Edje for layouts and Elementary for widgets. Edje allows creating visual designs separately from application code via EDC scripts. Elementary provides over 75 reusable widgets. The document explains how EFL achieves scalability through relative positioning, scale factors, container widgets, flexible images, and configurable profiles. It demonstrates EFL tools and how to create EFL applications for Tizen.

1. The Art of
Tizen UI Theme
Technology
in Various Profiles
Daniel Juyung Seo
Samsung Electronics
July 23, 2014

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. What is this talk about?
 Making frameworks and applications scalable in UI perspective.
 Enlightenment Foundation Libraries
 Slide: http://seoz.com/OSCON2014

4. Audience Introductions
 What is your expertise?
- Application Development
- Platform Development
- Design
- Marketing

5. Introduction

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.  The OS of Everything
 Mobile, IVI, Wearable, TV, Camera, PC, …
Various Tizen Profiles

8.  NX300, NX300M, and etc.  Gear 2, Gear 2 Neo
Tizen Based Products – Camera and Smart Watch

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. Scalability is Important
 Supporting different
resolutions, screen sizes, devices, and profiles.

11. Tizen Core
UI Framework

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.  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.  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.  EFL not ELF
EFL may not be an ELF... but it's as pretty as one. :)
NO! YES!
Does anyone know about EFL?

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. 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.  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. EFL(Edje + Elm)

20. Bindings
Elementary
EthumbEdbusEezeEioEfreet Emotion
Ecore
Embryo
Eet
Eina
Edje
Evas
EFL Block Diagram

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.  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.  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.  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. < Bubble >
< Button >
< Calendar >
< Check >
< Toggle >
< Clock >
< Ctxpopup >
< Radio > < Frame >
< DaySelector >
< Slider >
< FlipSelector >
< FileSelector > < Genlist >
< Gengrid >
< Spinner >
< Map >
< Panes >
< Progressbar >
Elementary

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.  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.  Relative Positioning (2)
Bigger
Scree/n
/
Higher
Resolution
(y=0.1)
(y=0.9)
How to achieve Scalability? - Part 1

29.  Relative Positioning (2)
Bigger
Scree/n
/
Higher
Resolution
(y=0.1)
(y=0.9)
How to achieve Scalability? - Part 1
Fix
Header

30.  Scale Factor
Higher Resolution
How to achieve Scalability? - Part 2

31.  Scale Factor
Higher Resolution + Scale Up
Higher Resolution
How to achieve Scalability? - Part 2

32.  Using container widgets
- Box, Conformant, Grid, Layout, Panes, Scroller, Table, …
 Ex) Conformant → Naviframe → List
How to achieve Scalability? - Part 3

33.  Border
< Original Background Image >
< Expand With Border >
< Expand Without Border >
How to achieve Scalability? - Part 4

34.  Finger Size
How to achieve Scalability? - Part 5

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

37.  Elementary Test
 Terminology
Demo

38.  Enventor
 Eflete
 Elm theme viewer
EFL Tools for a better Scalability

39.  Install Platform SDK  EFL Application Template
EFL Applications on Tizen SDK

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. Questions?

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. More Information
 Daniel Juyung Seo <juyung.seo@samsung.com>
- @seojuyung
- https://www.facebook.com/seojuyung
 https://tizen.org
 http://enlightenment.org

44. Thank you