--- ~~Title: Container Programming Guide~~ ~~NOCACHE~~ --- # 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 ## * [Box](/develop/legacy/program_guide/containers/box) * [Conformant](/develop/legacy/program_guide/containers/conformant) * [Gengrid (Generic Grid)](/develop/legacy/program_guide/containers/gengrid) * [Genlist (Generic List)](/develop/legacy/program_guide/containers/genlist) * [Grid](/develop/legacy/program_guide/containers/grid) * [Layout](/develop/legacy/program_guide/containers/layout) * [Mabuf](/develop/legacy/program_guide/containers/mapbuf) * [Naviframe](/develop/legacy/program_guide/containers/naviframe) * [Panes](/develop/legacy/program_guide/containers/panes) * [Scroller](/develop/legacy/program_guide/containers/scroller) * [Table](/develop/legacy/program_guide/containers/table) ## Related Info ## [Container List API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/containerslist.html) ---- ## Box Container ## ![Container Box Tree](/_media/container_box_tree.png) 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. * [Creating a Box](/develop/legacy/program_guide/containers/box#Creating_a_Box) * [Adding Objects to a box](/develop/legacy/program_guide/containers/box#Adding_Objects_to_the_Box) * [Setting the Padding](/develop/legacy/program_guide/containers/box#Setting_the_Padding) * [Handling Element Size](/develop/legacy/program_guide/containers/box#Handling_Element_Size) * [Setting the Alignment](/develop/legacy/program_guide/containers/box#Setting_the_Alignment) * [Using Size Hints](/develop/legacy/program_guide/containers/box#Using_Size_Hints) [Box Container API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Box.html) ## Conformant Container ## ![Container Conformant Tree](/_media/container_conformant_tree.png) 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. * [Creating a Conformant](/develop/legacy/program_guide/containers/conformant#Creating_a_Conformant) * [Adding Content to the Conformant](/develop/legacy/program_guide/containers/conformant#Adding_Content_to_the_Conformant) * [Signals](/develop/legacy/program_guide/containers/conformant) [Conformant Container API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Conformant.html) ## Gengrid Container ## ![Containger Gengrid Treet](/_media/container_gengrid_tree.png) 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. * [Adding a Gengrid](/develop/legacy/program_guide/containers/gengrid#Adding_a_Gengrid) * [Gengrid Items](/develop/legacy/program_guide/containers/gengrid#Gengrid_Items) * [Creating and Deleting Items](/develop/legacy/program_guide/containers/gengrid#Creating_and_Deleting_Items) * [Managing Items](/develop/legacy/program_guide/containers/gengrid#Managing_Items) * [Using Gengrid Callbacks](/develop/legacy/program_guide/containers/gengrid#Using_Gengrid_Callbacks) [Gengrid Container API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Gengrid.html) ## Genlist Container ## ![Container Genlist Tree](/_media/container_genlist_tree.png) 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 Item Style](/develop/legacy/program_guide/containers/genlist#Genlist_Item_Style) * [Adding a Genlist](/develop/legacy/program_guide/containers/genlist#Adding_a_Genlist) * [Creating and Deleting Items](/develop/legacy/program_guide/containers/genlist#Creating_And_Deleting_Items) * [Managing Items](/develop/legacy/program_guide/containers/genlist#Managing_Items) * [Selection](/develop/legacy/program_guide/containers/genlist#Selection) * [Using Genlist Callbacks](/develop/legacy/program_guide/containers/genlist#Using_Genlist_Callbacks) [Genlist Container API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Genlist.html) ## 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. * [Creating a Grid](/develop/legacy/program_guide/containers/grid#Creating_a_Grid) * [Adding Items to the Grid](/develop/legacy/program_guide/containers/grid#Adding_Items_to_the_Grid) * [Changing Position and Size](/develop/legacy/program_guide/containers/grid#Changing_Position_and_Size) * [Clearing the Grid](/develop/legacy/program_guide/containers/grid#Clearing_the_Grid) [Grid Container API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Grid.html) ## 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.](/auto/edje_main.html) * [Creating a Layout](/develop/legacy/program_guide/containers/layout#Creating_a_Layout) * [Adding Objects to the Layout](/develop/legacy/program_guide/containers/layout#Adding_Objects_to_the_Layout) * [Using Layout Themes](/develop/legacy/program_guide/containers/layout#Using_Layout_Themes) [Layout Container API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Layout.html) ## Mapbuf Container ## ![Container Mabuf Tree](/_media/container_mapbuf_tree.png) 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. * [Creating a Mapbuf](/develop/legacy/program_guide/containers/mapbuf#Creating_a_Mapbuf) * [Adding Content to the Mapbuf](/develop/legacy/program_guide/containers/mapbuf#Adding_Content_to_the_Mapbuf) * [Activating the Mapbuf](/develop/legacy/program_guide/containers/mapbuf#Activating_the_Mapbuf) * [Signals](/develop/legacy/program_guide/containers/mapbuf#Signals) [Mapbuf Container API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Mapbuf.html) ## Naviframe Container ## ![Container Naviframe Tree](/_media/container_naviframe_tree.png) 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. * [Creating a Naviframe](/develop/legacy/program_guide/containers/naviframe#Creating_a_Naviframe) * [Adding and Deleting Views](/develop/legacy/program_guide/containers/naviframe#Adding_and_Deleting_Views) * [Adding Fixed Content](/develop/legacy/program_guide/containers/naviframe#Adding_Fixed_Content) * [Signals](/develop/legacy/program_guide/containers/naviframe#Signals) [Naviframe Container API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Naviframe.html) ## Panes Container ## ![Container Panes Tree](/_media/container_panes.png) A panes widget adds a draggable bar between two sections of content. The sections are resized when the bar is dragged. * [Creating Panes](/develop/legacy/program_guide/containers/panes#Creating_Panes) * [Adding Content to the Panes](/develop/legacy/program_guide/containers/panes#Adding_Content_to_the_Panes) * [Setting Panes Options](/develop/legacy/program_guide/containers/panes#Setting_Panes_Options) * [Signals](/develop/legacy/program_guide/containers/panes#Signals) [Panes Container API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Panes.html) ## Scroller Container ## ![Container Scroller Tree](/_media/container_scroller.png) 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. * [Creating a Scroller](/develop/legacy/program_guide/containers/scroller#Creating_a_Scroller) * [Adding Objects to the Scroller](/develop/legacy/program_guide/containers/scroller#Adding_Objects_to_the_Scroller) * [Managing the Properties of the Scroller](/develop/legacy/program_guide/containers/scroller#Managing_the_Properties_of_the_Scroller) * [Signals](/develop/legacy/program_guide/containers/scroller) * [Example](/develop/legacy/program_guide/containers/scroller#Example) [Scroller Container API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Scroller.html) ## Table Container ## ![Container Table Tree](/_media/container_table.png) 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. * [Creating a Table](/develop/legacy/program_guide/containers/table#Creating_a_Table) * [Adding Items to the Table](/develop/legacy/program_guide/containers/table#Adding_Items_to_the_Table) * [Managing the Items](/develop/legacy/program_guide/containers/table#Managing_the_Items) * [Clearing the Table](/develop/legacy/program_guide/containers/table#Clearing_the_Table) [Table Container API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Table.html)