Container Programming Guide

Elementary is designed to display widgets in an attractive layout. It has a number of containers for this very purpose.

Table of Contents

Container List API

Box Container

Container Box Tree

When coding, you will most probably want to display widgets onscreen in a specific order. In the Form Tutorial, for example, the user information is arranged vertically. This basic container is called a box. There is no theme for a box layout. It is simply a linear method for arranging widgets horizontally or vertically.

Box Container API

Conformant Container

Container Conformant Tree

A conformant is a container widget that accounts for the space taken by the indicator, virtual keyboard, and softkey windows. The content area of the conformant is resized and positioned based on the space available. When the virtual keyboard is displayed, the content area is not resized.

Conformant Container API

Gengrid Container

Containger Gengrid Treet

The Gengrid widget is based on the same concept as genlist. It aims to display objects in a grid, rendering only the visible ones. Callbacks are called upon item creation or deletion with genlist.

This widget is an offshoot of the layout widget and uses the scroller interface. This means you can use both scroller and layout functions with Gengrid.

A Gengrid may display items in a horizontal or vertical layout. For horizontal layouts, items are displayed in columns from top to bottom. New columns are created when all the space in the current column is filled. For vertical layouts, items are set in rows from left to right.

Gengrid Container API

Genlist Container

Container Genlist Tree

Genlist is a widget that displays a scrollable list of items. It can manage large numbers of entries efficiently and has a low footprint as only visible items are allocated in memory.

Genlist Container API

Grid Container

In a grid, each objects is placed at a specific fixed positions, which is expressed as a percentage of the full width and height of the grid. By default, grid size is 100 x 100 pixels.

Grid Container API

Layout Container

A layout is a container widget that takes a standard Edje design file and wraps it very thinly in a widget. Layouts are the basis of many graphics widgets used in Elementary.

An Edje design file describes how the elements of the User Interface (UI) are positioned and how they behave when you interact with them. For more information, see the Edje guide.

Layout Container API

Mapbuf Container

Container Mabuf Tree

A mapbuf widget is a container widget which uses an Evas map to hold a content object. This widget is used to improve the performance of complex widgets when moving and resizing .

The content object is treated as a single image by the Evas map. If you have a content object containing several child objects, moving the mapbuf widget will be faster than doing the same with the content object.

The mapbuf widget inherits all the functions of the container class.

Mapbuf Container API

Container Naviframe Tree

A naviframe widget consists of a stack of views. New views are pushed on top of previous ones. Only the top-most view on the stack is displayed. The previous views are not deleted. A previous view is displayed when the view on top of it is popped. Transitions can be animated on a push or a pop, depending on the theme applied to the widget.

Naviframe Container API

Panes Container

Container Panes Tree

A panes widget adds a draggable bar between two sections of content. The sections are resized when the bar is dragged.

Panes Container API

Scroller Container

Container Scroller Tree

A scroller holds (and clips) a single object. This means that the user can use a scroll bar or their finger to drag the viewable region across the object, moving through a much larger space than is contained in the viewing area. The scroller will always have a default minimum size that is not limited by its contents.

The scroller widget inherits all the functions of the Layout Container.

Scroller Container API

Table Container

Container Table Tree

A table is like a box in that it uses the same APIs but also has 2 dimensions. An item inside the table can span multiple columns and rows, and even overlap with other items. Tables can be raised or lowered accordingly to adjust stacking if there is any overlap.

Table Container API