Overview of Tizen UI Development
This guide gives a brief description of UI structures and demonstrates
how you can develop and design native UI applications with tools.
This documentation has been created based on the mobile profile.
When talking about the development of Tizen native UI applications, you
cannot avoid EFL. Tizen platform uses EFL as a UI framework that
provides both a visual outlook for user applications and significant
EFL stands for Enlightenment Foundation Libraries. Enlightenment is a
project consisting of Enlightenment window manager, EFL libraries, and
various utilities and applications. Originally, Enlightenment was a
project to build a Window Manager for X11. However, it has grown much
since then. At the moment, it still produces the Window Manager, but it
has evolved to cover mobile, wearable, and TV UI needs (for example, for
Tizen projects) as well as the traditional desktop UI. Although Tizen
adopts EFL as the UI framework, the UI framework and EFL are not the
same thing. Since EFL is mainly a project for the Window Manager, in the
Tizen UI framework, its features are defined for mobile, wearable, and
Benefits of EFL
EFL provides streamlined graphic core libraries that you need to create
powerful applications. EFL has comparatively low memory requirements but
provides high performance, and supports a retained mode graphics system
and user-centric features, such as themes, 2D/3D effects, and
accessibility. In addition, EFL supports various resolutions with the
same layout, fast and small file systems, a variety of programming
language bindings, and separation of UI and logic. Even though the EFL
UI toolkit is used mainly for 2D-based Tizen native applications, it
also supports 2.5D and 3D effects and 3D objects.
An important aspect of EFL is efficiency, both in speed and size:
- The core EFL libraries, even with Elementary, are about half the
size of the equivalent “small stack” of GTK+ (used, for example, by
GNOME), and about one quarter the size of Qt. Of course, with these
kinds of numbers, you can always argue over what exactly constitutes
an equivalent measurement.
- EFL is low on actual memory usage at runtime, with memory footprints
a fraction the size of those in the GTK+ and Qt environments.
- EFL is fast, considering what it does. Some libraries claim to be
very fast - but then, it is easy to be fast when you only handle
simple and straightforward tasks. EFL is fast, while also tackling
the more complex rendering problems involving, for example, alpha
blending, interpolated scaling, and transforms with dithering.
Key Characteristics of EFL
The key characteristics of EFL explain why Tizen has adopted EFL as its
- Fast performance
- Small memory footprint
- Various back-end engine support
- UI and logic separation
- Themeable and scalable
- Language bindings and hardware acceleration
The following sections describe the most important features (fast
performance, and UI and logic separation) in more detail.
Fast Performance with the Retained-mode Rendering
The main reason Tizen uses EFL is its speed. EFL is highly optimized by
using a scene graph and retained-mode rendering, resulting in EFL being
fast even in software rendering.
A graphics system adopting the retained mode is basically responsible
for responding to all repaint requests for rendering the application
objects. Clients do not directly cause actual rendering, but objects are
redrawn when parts of them are updated. In other words, since EFL (Evas)
works with the retained mode, there is no need to command any drawing.
Figure: Retained-mode rendering
Separation of UI and Logic with Edje
EFL supports EDC files for the UI layout and theme:
- The EDC file can separate the UI layout (EDC) and logic by having
the layout description in a plain text file and the logic code in
the C or C++ source files.
- The EDC files support themes, which can be changed at runtime
without restarting the application.
- UI components are customizable so that each application can create
its own customized theme to overlay above the default theme, adding
customized versions of UI components to achieve a specific look
The following figure describes the behavior of the EDC files.
Figure: EDC file behavior
EFL Structure on Tizen
EFL is a collection of libraries that cover a range of functionality
from managing the application life-cycle to rendering graphical objects.
EFL libraries build on top of each other in layers, steadily becoming
higher-level, yet allowing access to lower levels. The higher up you go,
the less you have to do yourself. Elementary is at the top, but you
still access the layers below it for common tasks, as there is no need
for Elementary to wrap things that work perfectly well as-is.
To learn more about each library, go to Introduction.
This section only briefly describes the hierarchical structure of your
application on Tizen.
Figure: EFL structure
When you create a basic EFL application, you use the following main
libraries as a basis:
Elementary is the topmost library with which you create your
EFL application. It provides all the functions you need to create a
window, create simple and complex layouts, manage the life-cycle of
a view, and add UI components (a full set with, for example,
buttons, boxes, scrollers, and sliders).
EFL Core Library consists of several libraries that build on top of
each other in layers, steadily becoming higher-level, yet allowing
access to lower levels.
EFL Core Library provides the following main libraries:
- Edje library provides a powerful theme. You can use it to create
your own UI components and use them in your application. You can
also extend the default theme.
- Ecore library manages the main loop of your application. The
main loop is one of the most important concepts you need to know
to develop an application. The main loop is where events are
handled, and where you interact with the user through the
- Evas library is responsible for managing the drawing of
your content. All graphical objects that you create are
Evas objects. Evas handles the window state by filling the
canvas with objects and manipulating their states. In contrast
to other canvas libraries, such as Cairo, OpenGL®, and XRender,
Evas is not a drawing library but a scene graph library that
retains the state of all objects. Evas objects are created and
then manipulated until they are no longer needed, at which point
they are deleted. This allows you to work in the same terms that
a designer thinks in: it is a direct mapping, as opposed to
having to convert the concepts into drawing commands in the
right order, and calculate minimum drawing calls needed to get
the job done.
- Eina library is the basis of all the EFL libraries. Eina is a
toolbox that implements an API for data types in an
efficient way. It contains all the functions needed to create
lists and hashes, manage shared strings and open shared
libraries, and handle errors and memory pools.
UI Hierarchy Structure
To develop a UI application, you must understand the hierarchy structure
used in EFL.
To manage multiple views with EFL on Tizen applications, create a
naviframe object. The naviframe can contain multiple views, and is a
top-layer object which can help your application to manage and switch
views. If your application has only one view, you do not need the
The following figure illustrates the most popular view hierarchy for
managing multiple views.
Figure: View hierarchy for multiple views
Window is the bottommost UI component holding a canvas object
for drawing, and represents a block of memory that gets composited
to the screen.
Conformant shows the virtual keyboard, indicator, softkey, and
If you do not need those components, you do not need the
Naviframe is used in applications that show multiple views with
back and forth transitions between them.
If you want to manage only 1 view, there is no need to add
UI Container (such as grid, table, or box) helps to arrange
UI Component (such as button, background, icon, or image)
presents the UI layout.
If you want to make a structure for each situation (single and multiple
views), the following figure illustrates a possible structure.
Figure: UI hierarchy structure
Elementary UI Component Library
The EFL Elementary is a set of fast, finger-friendly, scalable, and
themeable UI component libraries. The number of supported UI components
is around 80, including both containers and non-containers. Originally,
the Elementary was developed as part of the Window Manager development
on Desktop devices. For the mobile profile, Tizen reused the proper UI
components and created new ones, and then enhanced and adjusted all of
them for Tizen native applications.
The UI components are mobile-friendly: for example, the naviframe
component supports view-management for multiple views, the entry
component supports many modes (such as password, single/multi-line, and
edit/no-edit), the index component supports quick access to another
group of UI items, and the toolbar component shows a menu when an item
The mobile UI components were designed to allow the user to interact
with touch screen-equipped mobile devices. Therefore, when developing
mobile applications, you can easily use them through the mobile-related
infrastructure in company with view management and when reacting to
touch events and the user finger size.
- Win is the root window component that is often used in
an application. It allows you to create some content in it, and it
is handled by the window manager.
- Conformant is a container component that accounts for the space
taken by the indicator, virtual keyboard, and softkey areas.
- Naviframe consists of a stack of views. New views are pushed on
top of previous ones, and only the topmost view is displayed.
- Popup shows a popup area that can contain a title area, a
content area, and an action area.
- Ctxpopup is a contextual popup that can show a list of items.
- Scroller holds (and clips) a single object and allows you to
scroll across it.
- Grid allows objects to be placed at specific positions along a
- Table is like a box but with 2 dimensions.
- Box is one of the simplest EFL container components. It allows
you to arrange the UI components in a specific order, horizontally
- Panes adds a draggable bar between 2 content sections. The
sections are resized when the bar is dragged.
- Panel is an animated object that can contain child objects. It
can be expanded or collapsed by clicking the button on its edge.
- List is a very simple list for managing a small number of items.
If you need to manage a lot of items, use the genlist
- Genlist displays a scrollable list of items. It can hold a lot
of items while still being fast and memory-efficient (only the
visible items are allocated memory).
- Toolbar is a scrollable list of items. It can also show a menu
when an item is selected. Only one item can be selected at a time.
- Multibuttonentry allows the user to enter text so that the text
is divided into chunks and managed as a set of buttons.
- Gengrid displays objects on a grid layout and renders only the
- Index gives you quick access to a group of other UI items.
- Flipselector is a set of text items and a selector that flips up
or down to change the currently-shown text item.
- Background can be used to set a solid background decoration to a
window or a container object. It works like an image, but has some
background-specific properties, such as setting it to a tiled,
centered, scaled, or stretched mode.
- Datetime can display and input date and time values.
- Image can load and display an image from a file or memory.
- Label displays text with simple HTML-like markup.
- Progressbar can be used to display the progress status of a
- Layout is a container component that takes a standard Edje
design file and wraps it very thinly in a UI component.
- Map displays a map, using the
- Calendar displays month views.
- Colorselector provides a color selector. It has different modes,
each of them showing a different color selection configuration.
- Entry is a box in which the user can enter text.
- Spinner enables the user to increase or decrease a numeric value
by using arrow buttons.
- Slider is a draggable bar that is used to select a value from a
range of values.
- Button is a simple push button. It is composed of a label icon
and an icon object, and has an auto-repeat feature.
- Check toggles a Boolean value between true and false.
- Radio can display 1 or more options, but the user can only
select one of them. The UI component is composed of an indicator
(selected/unselected), an optional icon, and an optional label. Even
though it is usually grouped with 2 or more other radio components,
it can also be used alone.