Wearable UI Components

EFL Elementary is a set of fast, finger-friendly, scalable, and themeable UI component libraries. A number of UI components, including both containers and non-containers (listed in this topic), are supported. Originally, Elementary was developed as part of the Window Manager development on desktop devices. In the wearable profile, Tizen created new UI styles for circular wearable devices with existing UI components, and optimized all of them for Tizen native applications.

This feature is supported in wearable applications only.

 

The UI components are wearable-friendly: for example, the circle datetime component extends the basic datetime component (elm_datetime) by visualizing the selected field, the circle genlist component provides a scrollbar with circular movement, and the circle progressbar, circle scroller, and circle slider components are all adjusted to the circular design.

The wearable UI components are designed to allow the user to interact with small touch screen-equipped wearable devices with rotary component parts. Therefore, when developing wearable applications, you can easily use them through the wearable-related infrastructure in company with full notification, and when reacting to touch and rotary events and the user finger size.

 

Table: Available UI components

Category Component name Description
Navigation elements Index The index component provides an index for quick access to another group of UI items.
Presentation views Win The win component is the root window component often used in an application. It allows you to create some content in it, and it is handled by the window manager.
Background The background component 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.
Genlist The genlist component displays a scrollable list of items. It can hold a lot of items while still being fast and memory-efficient (since only the visible items are allocated memory).
List The list component is a very simple list for managing a small number of items. If you need to manage a lot of items, use the genlist component instead.
Label The label component displays text with simple HTML-like markup.
Image The image component can load and display an image from a file or memory.
Icon The icon component inherits from the image component. It is used to display images in an icon context.
Progressbar The progressbar component can be used to display the progress status of a given job.
User input Button The button component is a simple push button. It is composed of a label icon and an icon object, and has an auto-repeat feature.
Check The check component toggles the Boolean value between true and false.
Radio The radio component can display 1 or more options, while the user can only select one of them. The UI component is composed of an indicator (selected or 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.
Entry The entry component is a box to which the user can enter text.
Slider The slider component is a draggable bar that is used to select a value from a range of values.
Datetime The datetime component can display and accept input for date and time values.
Assist views Popup The popup component shows a pop-up area that can contain a title area, a content area, and an action area.
Ctxpopup The ctxpopup component is a contextual popup that can show a list of items.
Transition Transit The transit component can apply several transition effects to an Evas object, such as translations and rotations.
Hardware acceleration GLView The GLView component can render OpenGL® in an Elementary object, hiding EvasGL complexity.
Miscellaneous Plug The plug component allows you to show an Evas object created by another process. It can be used anywhere like any other Elementary UI component.

The following UI components are designed for specific circular wearable devices which have rotary component parts. On a circular device, you can draw round UI components, such as a slider, progressbar, and scroller. Generally, wearable UI components provide compatibility between the rectangular and circular wearable devices. However, use circular UI components for circular wearable devices only, because they have a dependency with the round UX and rotary events. For more information on the compatibility of the UI components between rectangular and circular, see the Wearable Design guidelines.

Table: Available circular UI components

Component name Description
Circle Datetime The circle datetime extends the basic datetime component (elm_datetime) by visualizing the selected field.
Circle Genlist The circle genlist provides a scrollbar with circular movement. It can also use rotary events to move to the next or previous item.
Circle Object The circle object extends Elementary components in a form of circular design. Sometimes, a circle object merely provides additional UI features for the Elementary component, and sometimes it works as an independent component with its own UI and functionalities.

Circular components can usually be added with the eext_circle_object_[component_name]_add() function, which returns a circle object handle. Circular components are shown in a form of an arch with radius, line width, and color. These properties can be set with the eext_circle_object_item_XXX() functions. The circle object can also take a rotary event. Generally, a clockwise rotary event increases the value of the rotary event activated by the circle object, and a counter-clockwise rotary event decreases the value.

Circle Progressbar The circle progressbar shows the progress status of a given task with a circular design. It visualizes the progress status within a range.
Circle Scroller The circle scroller changes based on rotary events. It shows the whole scrollable area with a circular scroll bar.
Circle Slider The circle slider changes based on rotary events. The circle slider not only extends the UI feature of the basic slider component (elm_slider), but also replaces the functionalities of the elm_slider in a circular design.
Circle Surface The circle surface manages and renders circle objects. Multiple circle objects can be connected to one circle surface as candidates of an object to be rendered.
Rotary Selector The rotary selector shows multiple items around a selector, and can change pages through rotary events.
More Option The more option contains a cue button, which, when clicked, reveals a rotary selector view.
Circle Spinner The circle spinner shows a spinner value as a marker around the circular display.

Wearable Circular UI Component Styles

EFL can separate the UI and logic of each UI component, resulting in each component having a different style of look. To change the styles of UI components, use the elm_object_style_get() and elm_object_style_set() functions to get and apply the style for a specific UI component.

The following tables list the styles for each UI component, including the names of the available styles, and the name of the part in the EDC file where you can define the text or some other Evas_Object included in the UI component. The style list in the EFL upstream is more extensive, but only the styles in the following tables are actually supported by Tizen.

Table: Button styles

Style Sample Text part Swallow part
default default elm.text elm.swallow.content
bottom bottom elm.text elm.swallow.content
popup/circle popup/circle elm.text elm.swallow.content
popup/circle/left popup/circle/left - elm.swallow.content
popup/circle/right popup/circle/right - elm.swallow.content

Table: Check styles

Style Sample
default default
small small
on&off on_off

Table: Contextual popup (Ctxpopup) styles

Style Sample Notes
select_mode select_mode -
select_mode/top select_mode/top Pair this style with the select_mode/bottom style.
select_mode/bottom select_mode/bottom Pair this style with the select_mode/top style.

Table: Datetime styles

Style Sample
datepicker/circle datepicker/circle
timepicker/circle timepicker/circle

Table: Entry styles

Style Sample Text part Notes
default default elm.guide: for the guide text.

elm.text: for the main text.

The guide text is automatically erased when the main text is entered.

Table: Genlist styles

Style Sample Text part Swallow part
default default elm.text elm.swallow.icon: for the icon on the left.

elm.swallow.end: for the icon on the right.

title title elm.text -
group_index group_index elm.text -
1text 1text elm.text -
1text.1icon 1text.1icon elm.text elm.icon
1text.1icon.1 1text.1icon.1 elm.text elm.icon
1text.1icon.divider 1text.1icon.divider elm.text elm.icon: for the icon.

elm.divider: for the icon divider.

2text 2text elm.text: for the main text.

elm.text.1: for the sub text.

-
2text.1icon 2text.1icon.1 elm.text: for the main text.

elm.text.1: for the sub text.

elm.icon
2text.1icon.1 2text.1icon.1 elm.text: for the main text.

elm.text.1: for the sub text.

elm.icon
2text.1icon.divider 1text.1icon.divider elm.text: for the main text.

elm.text.1: for the sub text.

elm.icon: for the icon.

elm.divider: for the icon divider.

editfield editfield elm.text -
multiline multiline elm.text -

Table: Index styles

Style Sample
thumbnail thumbnail
circle circle

Table: Popup styles

Style Sample Text part Swallow part
circle circle - button1

button2

toast/circle toast/circle elm.text toast,icon

Table: Progressbar styles

Style Sample
process process
process/small process/small
process/popup/small process/popup/small

Table: Radio styles

Style Sample
default default

Table: Slider styles

Style Sample Swallow part
horizontal/default horizontal/default elm.swallow.icon

Wearable Rectangular UI Component Styles

EFL can separate the UI and logic of each UI component, resulting in each component having a different style of look. To change the styles of UI components, use the elm_object_style_get() and elm_object_style_set() functions to get and apply the style for a specific UI component.

The following tables list the styles for each UI component, including the names of the available styles, and the name of the part in the EDC file where you can define the text or some other Evas_Object included in the UI component. The style list in the EFL upstream is more extensive, but only the styles in the following tables are actually supported by Tizen. For more information, see Style, Theme, and EDC.

Table: Button styles

Style Sample Text part Swallow part Notes
default default elm.text elm.swallow.content -
green green elm.text elm.swallow.content -
orange orange elm.text elm.swallow.content -
red red elm.text elm.swallow.content -
nextdepth nextdepth - - -
naviframe/title_icon naviframe/title_icon - elm.swallow.content The icon can be set with the elm_object_part_content_set(btn, "icon", ic) function.

Table: Check styles

Style Sample
default default
on&off on_off

Table: Contextual popup (Ctxpopup) styles

Style Sample Notes
default default Use the elm_ctxpopup_item_append() function to add both text and an icon to the list.

Table: Datetime styles

Style Sample
datepicker_layout datepicker_layout
timepicker_layout timepicker_layout

Table: Entry styles

Style Sample Text part Notes
default default elm.guide: for the guide text.

elm.text: for the main text.

The guide text is automatically erased when the main text is entered.

Table: Genlist styles

Style Sample Text part Swallow part
default default elm.text elm.swallow.icon: for the icon on the left.

elm.swallow.end: for the icon on the right.

group_index group_index elm.text: for the main text.

elm.text.1: for the sub text.

elm.icon
1text 1text elm.text -
1text.1icon 1text.1icon elm.text elm.icon
2text 2text elm.text: for the main text.

elm.text.1: for the sub text.

-
2text.1 2text.1 elm.text: for the main text.

elm.text.1: for the sub text.

-
1text.1icon.divider 1text.1icon.divider elm.text elm.icon: for the icon.

elm.divider: for the icon divider.

1text.1icon.1 1text.1icon.1 elm.text elm.icon
2text.1icon.1 2text.1icon.1 elm.text: for the main text.

elm.text.1: for the sub text.

elm.icon
multiline/1text multiline/1text elm.text: for the multi-line text. -
multiline/2text multiline/2text elm.text: for the main text.

elm.text.1: for the multi-line sub text.

-

Table: Index styles

Style Sample
thumbnail thumbnail
tab tab

Table: Popup styles

Style Sample
default default
toast toast

Table: Progressbar styles

Style Sample
default default
pending_list pending_list
process process
process/groupindex process/groupindex

Table: Radio styles

Style Sample
default default

Table: Slider styles

Style Sample Swallow part
horizontal/default horizontal/default elm.swallow.icon
NoteExcept as noted, this content is licensed under LGPLv2.1+.