Page Example

UI Components Sample Overview

Mobile native

The UI Components (Elementary) sample application demonstrates how to implement an interactive application GUI using basic components, such as a button, entry, and popup.

The following figure illustrates some of the screens of the UI Components.

Figure: UI Components screens

UI Components screens

The application opens with the Tizen UI main screen, which displays a list of UI components. To access UI component functionalities, click a list item.

Source Files

You can create and view the sample application project including the source files in the IDE.

File name Description
accessibility.c This file creates and initializes a view, which displays the Accessibility API usage scenarios. You can enter a particular component to view and manage it.
accessibility/screen_reader.c This file creates and initializes a view, which displays the Screen Reader-related accessibility usage scenario. You can enable or disable the Screen Reader and check its options.
accessibility/screen_reader/description.c This file creates and initializes a view, which displays the UI Description screen. You can view and test how the Screen Reader reads names and descriptions of different buttons.
accessibility/screen_reader/reading_order.c This file creates and initializes a view, which displays the UI Reading Order screen. You can view and test how the custom and default reading order works.
accessibility/screen_reader/custom_frame.c This file creates and initializes a view, which displays the Custom Frame screen. You can view and test the Screen Reader behavior on default and custom frames.
button.c
button.edc
This file creates and initializes a view, which displays the button components. You can view and test various button styles.

The file contains code for handling the user events related to buttons.

check.c
check.edc
This file creates and initializes a view, which displays the check button components. You can view and test various check button styles.

The file contains code for handling user events related to check buttons.

colorselector.c
colorselector.edc
This file creates and initializes a view, which displays the Colorselector screen. You can view and test the color selector.

The file contains code for handling user events related to the color selector and images.

ctxpopup.c
ctxpopup.edc
This file creates and initializes a view, which displays the Ctxpopup. You can view and test the ctxpopup usage.

The file contains code for handling user events related to key events and ctxpopup.

datetime.c
datetime.edc
This file creates and initializes a view, which displays the Datetime styles and picker. You can view and test changing the time and date with the picker.

The file contains code for handling user events related to the Datetime picker.

drawer.c This file creates and initializes a view, which displays a drawer implemented using the Panel component. You can press the left edge of the screen to enable the drawer.

The file contains code for handling user events related to the drawer.

entry.c
entry.edc
This file creates and initializes a view, which displays the entry components. You can view and test various entry styles.

The file contains code for setting entry style properties.

fastscroll.c This file creates and initializes a view, which displays the fastscroll implemented using the Index component. You can view and test the fastscroll usage.
gengrid.c This file creates and initializes a view, which displays the Gengrid components. You can view and test various grid styles.

The file contains code for handling user events related to grids, including changing the grid style using the menu key.

genlist.c This file creates and initializes a view, which displays the Genlist components. You can view and test various list styles, such as group index, 1 line, and multiline.
handler.c
handler.edc
This file creates and initializes a view, which displays a vertical or horizontal scroller. You can select the scroller from a list.

The file contains code for implementing scroller styles.

main.c This file creates and initializes a view, which displays the main UI component list.

The file contains code for constructing the Window, Conformant, Layout, and Naviframe, and event registrations related to the application life-cycle.

multibuttonentry.c
multibuttonentry.edc
This file creates and initializes a view, which displays a Multibuttonentry component.

The file contains code for handling user events related to the Multibuttonentry component, such as modifying sizes, states, and items.

nocontents.c This file creates and initializes a view, which displays no content.

The file contains code for creating views with no content.

pagecontrol.c This file creates and initializes a view, which has entry points for horizontal and horizontal looping using the Pagecontrol component.

The file contains code for scrolling pages.

pagecontrol_horizontal.c
pagecontrol.edc
This file creates and initializes a view, which displays the Pagecontrol component.

The file contains code for scrolling pages.

pagecontrol_horizontal_loop.c
pagecontrol.edc
This file creates and initializes a view, which displays the Pagecontrol component.

The file contains code for loop-scrolling pages.

popup.c This file creates and initializes a view, which displays the Popup component. You can view and test various pop-up styles.

The file contains code for handling user events related to pop-ups, such as opening and closing a pop-up, and setting pop-up styles.

progressbar.c
progressbar.edc
This file creates and initializes a view, which displays the Progressbar component. You can view and test progress bar usage.

The file contains code for handling user events related to progress bars, such as timing and deleting the progress bar.

radio.c
radio.edc
This file creates and initializes a view, which displays the Radio button component. You can view and test various radio button styles.

The file contains code for handling user events related to radio buttons.

slider.c This file creates and initializes a view, which displays the Slider component. You can view and test various slider styles.

The file contains code for setting slider styles.

toolbar.c This file creates and initializes a view, which has entry points for Tabbar and Navigationbar components. You can view and test tab and navigation list item styles.
toolbar_tab.c This file creates and initializes a view, which displays the Tabbar component.

The file contains code for setting tab bar styles using the Toolbar component.

toolbar_navigationbar.c This file creates and initializes a view, which displays the Navigationbar component.

The file contains code for setting navigation bar styles using the Toolbar component.