Mobile UI Components
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 (listed in this topic). Originally, 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.
This feature is supported in mobile applications only.
The UI components are mobile-friendly: for example, the naviframe container component supports multiple view management, the entry component supports various modes (such as password, single-line or multi-line, edit or no-edit), the index component supports quick access to another group of UI items, and the toolbar component shows a menu when an item is selected.
The mobile UI components are 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.
Table: Available UI components
| Category | Component name | Description |
|---|---|---|
| Navigation elements | Toolbar | The toolbar component 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. |
| Navigation elements | Index | The index component provides an index for quick access to another group of UI items. |
| Navigation elements | Segmentcontrol | The segmentcontrol component is a horizontal control made of multiple segment items, each segment item functioning similarly as a discrete 2-state button. |
| 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. |
| Presentation views | 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. |
| Presentation views | 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). |
| Presentation views | Gengrid | The gengrid component displays objects on a grid layout and renders only the visible objects. |
| Presentation views | Panel | The panel component is an animated object that can contain child objects. It can be expanded or collapsed by clicking the button on its edge. |
| Presentation views | 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. |
| Presentation views | Label | The label component displays text with simple HTML-like markup. |
| Presentation views | Image | The image component can load and display an image from a file or memory. |
| Presentation views | Icon | The icon component inherits from the image component. It is used to display images in an icon context. |
| Presentation views | Progressbar | The progressbar component can be used to display the progress status of a given job. |
| Presentation views | Photocam | The photocam component is designed to display high-resolution photos taken with a digital camera. It allows you to zoom photos, load photos quickly, and fit photos. It is optimized for JPEG images and has a low memory footprint. |
| 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. |
| User input | Check | The check component toggles the Boolean value between true and false. |
| User input | 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. |
| User input | Entry | The entry component is a box to which the user can enter text. |
| User input | Slider | The slider component is a draggable bar that is used to select a value from a range of values. |
| User input | Datetime | The datetime component can display and accept input for date and time values. |
| User input | Colorselector | The colorselector component provides a color selection solution to the user. It has different modes, each of them showing a different configuration of the color selection. |
| User input | Spinner | The spinner component enables the user to increase or decrease a numeric value by using arrow buttons. |
| User input | Flipselector | The flipselector component shows a set of text items one at a time. The user can flip the selector up or down to change the text on it. |
| User input | Calendar | The calendar component displays and manipulates month views. |
| Assist views | Popup | The popup component shows a pop-up area that can contain a title area, a content area, and an action area. |
| Assist views | Ctxpopup | The ctxpopup component is a contextual popup that can show a list of items. |
| Assist views | Notify | The notify component displays a container in a specific region of the parent object. It can receive some content, and it can be automatically hidden after a certain amount of time. |
| Assist views | Tooltip | The tooltip component is a smart object used to show tips or information about a parent object when the mouse hovers over the parent object. |
| Assist views | Hoversel | The hoversel component is a button that pops up a list of items. |
| Transition | Transit | The transit component can apply several transition effects to an Evas object, such as translations and rotations. |
| Assist views | Flip | The flip component can hold 2 Evas objects and let the user flip between these objects using a variety of predefined animations. |
| Hardware acceleration | GLView | The GLView component can render OpenGL® in an Elementary object, hiding EvasGL complexity. |
| Miscellaneous | Map | The map component can display a geographic map. The default map data is provided by the OpenStreetMap project. |
| 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. |
Note
Except as noted, this content is licensed under LGPLv2.1+.
Related Information
- Dependencies
- Tizen 2.4 and Higher for Mobile