~~Title: Container Programming Guide~~ {{page>index}} ===== Container Programming Guide ===== Elementary is about displaying its widgets in a nice layout, for this purpose it provides a number of containers. === Table of Contents === * [[/develop/legacy/program_guide/containers/box|Box]] * [[/develop/legacy/program_guide/containers/conformant|Conformant]] * [[/develop/legacy/program_guide/containers/gengrid|Gengrid(Generic Grid)]] * [[/develop/legacy/program_guide/containers/genlist|Genlist(Generic List)]] * [[/develop/legacy/program_guide/containers/grid|Grid]] * [[/develop/legacy/program_guide/containers/layout|Layout]] * [[/develop/legacy/program_guide/containers/mapbuf|Mapbuf]] * [[/develop/legacy/program_guide/containers/naviframe|Naviframe]] * [[/develop/legacy/program_guide/containers/panes|Panes]] * [[/develop/legacy/program_guide/containers/scroller|Scroller]] * [[/develop/legacy/program_guide/containers/table|Table]] === Related Info === * [[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/containerslist.html|Container List API]] ---- ++++Box Container| {{ :container_box_tree.png }}{{ :container_box.png }} Most of the time, you want to display widgets on the screen in a specific order. In 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 just a linear method of arranging widgets horizontally or vertically. * [[/develop/legacy/program_guide/containers/box#Creating_a_Box|Creating a Box]] * [[/develop/legacy/program_guide/containers/box#Adding_Objects_to_the_Box|Adding Objects to the Box]] * [[/develop/legacy/program_guide/containers/box#Setting_the_Padding|Setting the Padding]] * [[/develop/legacy/program_guide/containers/box#Handling_Element_Size|Handling Element Size]] * [[/develop/legacy/program_guide/containers/box#Setting_the_Alignment|Setting the Alignment]] * [[/develop/legacy/program_guide/containers/box#Using_Size_Hints|Using Size Hints]] [[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Box.html|Box Container API]] ++++ ---- ++++Conformant Container| {{ :container_conformant_tree.png }}{{ :container_conformant.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. * [[/develop/legacy/program_guide/containers/conformant#Creating_a_Conformant|Creating a Conformant]] * [[/develop/legacy/program_guide/containers/conformant#Adding_Content_to_the_Conformant|Adding Content to the Conformant]] * [[/develop/legacy/program_guide/containers/conformant#Signals|Signals]] [[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Conformant.html|Conformant Container API]] ++++ ---- ++++Gengrid Container| {{ :container_gengrid_tree.png }} Gengrid widget is based on the same idea as the genlist. It aims at displaying objects on a grid layout and rendering only the visible ones. As for the genlist, callbacks are called at item creation or deletion. This widget inherits from the layout widget and implements the scroller interface. Thus scroller and layout functions can be used with this widget. A gengrid may display its items using horizontal or vertical layout. In the first layout, items are displayed in columns from top to bottom, starting a new column when the space for the current column is filled. In the second one, items are set in rows from left to right. * [[/develop/legacy/program_guide/containers/gengrid#Adding_a_Gengrid|Adding a Gengrid]] * [[/develop/legacy/program_guide/containers/gengrid#Gengrid_Items|Gengrid Items]] * [[/develop/legacy/program_guide/containers/gengrid#Creating_and_Deleting_Items|Creating and Deleting Items]] * [[/develop/legacy/program_guide/containers/gengrid#Managing_Items|Managing Items]] * [[/develop/legacy/program_guide/containers/gengrid#Using_Gengrid_Callbacks|Using Gengrid Callbacks]] [[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Gengrid.html|Gengrid Container API]] ++++ ---- ++++Genlist Container| {{ :container_genlist_tree.png }}{{ :container_genlist.png }} Genlist is a widget that displays a scrollable list of items. It allows a lot of entries while being fast and has a low memory footprint (only the visible items are allocated in the memory). * [[/develop/legacy/program_guide/containers/genlist#Genlist_Item_Style|Genlist Item Style]] * [[/develop/legacy/program_guide/containers/genlist#Adding_a_Genlist|Adding a Genlist]] * [[/develop/legacy/program_guide/containers/genlist#Creating_And_Deleting_Items|Creating And Deleting Items]] * [[/develop/legacy/program_guide/containers/genlist#Managing_Items|Managing Items]] * [[/develop/legacy/program_guide/containers/genlist#Selection|Selection]] * [[/develop/legacy/program_guide/containers/genlist#Using_Genlist_Callbacks|Using Genlist Callbacks]] [[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Genlist.html|Genlist Container API]] ++++ ---- ++++Grid Container| In a grid, objects are placed at specific positions along a fixed grid, where the position of each object is given as a percentage of the full width and height of the grid. By default, the size of the grid is 100 x 100 pixels. * [[/develop/legacy/program_guide/containers/grid#Creating_a_Grid|Creating a Grid]] * [[/develop/legacy/program_guide/containers/grid#Adding_Items_to_the_Grid|Adding Items to the Grid]] * [[/develop/legacy/program_guide/containers/grid#Changing_Position_and_Size|Changing Position and Size]] * [[/develop/legacy/program_guide/containers/grid#Clearing_the_Grid|Clearing the Grid]] [[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Grid.html|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 a lot of graphics widgets used in Elementary. An Edje design file describes how the elements of the UI are positioned and how they behave when interacted with. For more information about Edje, see the Edje guide. * [[/develop/legacy/program_guide/containers/layout#Creating_a_Layout|Creating a Layout]] * [[/develop/legacy/program_guide/containers/layout#Adding_Objects_to_the_Layout|Adding Objects to the Layout]] * [[/develop/legacy/program_guide/containers/layout#Using_Layout_Themes|Using Layout Themes]] [[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Layout.html|Layout Container API]] ++++ ---- ++++Mapbuf Container| {{ :container_mapbuf_tree.png }} A mapbuf widget is a container widget that uses an Evas map to hold a content object. This widget is used to improve the moving and resizing performance of complex widgets. The content object is treated as a single image by the Evas map. If you have a content object containing several child objects, frequently moving the mapbuf widget will be faster than frequently moving the content object. The mapbuf widget inherits all the functions of the container class. * [[/develop/legacy/program_guide/containers/mapbuf#Creating_a_Mapbuf|Creating a Mapbuf]] * [[/develop/legacy/program_guide/containers/mapbuf#Adding_Content_to_the_Mapbuf|Adding Content to the Mapbuf]] * [[/develop/legacy/program_guide/containers/mapbuf#Activating_the_Mapbuf|Activating the Mapbuf]] * [[/develop/legacy/program_guide/containers/mapbuf#Signals|Signals]] [[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Mapbuf.html|Mapbuf Container API]] ++++ ---- ++++Naviframe Container| {{ :container_naviframe_tree.png }} A naviframe widget consists of a stack of views. New views are pushed on top of previous ones, and 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. * [[/develop/legacy/program_guide/containers/naviframe#Creating_a_Naviframe|Creating a Naviframe]] * [[/develop/legacy/program_guide/containers/naviframe#Adding_and_Deleting Views|Adding and Deleting Views]] * [[/develop/legacy/program_guide/containers/naviframe#Adding_Fixed_Content|Adding Fixed Content]] * [[/develop/legacy/program_guide/containers/naviframe#Signals|]] [[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Naviframe.html|Naviframe Container API]] ++++ ---- ++++Panes Container| {{ :container_panes_tree.png }}{{ :container_panes.png }} A panes widget adds a draggable bar between two sections of content. The sections are resized when the bar is dragged. * [[/develop/legacy/program_guide/containers/panes#Creating_Panes|Creating Panes]] * [[/develop/legacy/program_guide/containers/panes#Adding Content to the Panes|Adding Content to the Panes]] * [[/develop/legacy/program_guide/containers/panes#Setting_Panes_Options|Setting Panes Options]] * [[/develop/legacy/program_guide/containers/panes#Signals|Signals]] [[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Panes.html|Panes Container API]] ++++ ---- ++++Scroller Container| {{ :container_scroller_tree.png }}{{ :container_scroller.png }} A scroller holds (and clips) a single object and allows you to scroll across it. 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 area than is contained in the viewport. 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. * [[/develop/legacy/program_guide/containers/scroller#Creating_a_Scroller|Creating a Scroller]] * [[/develop/legacy/program_guide/containers/scroller#Adding_Objects_to_the_Scroller|Adding Objects to the Scroller]] * [[/develop/legacy/program_guide/containers/scroller#Managing_the_Properties_of_the_Scroller|Managing the Properties of the Scroller]] * [[/develop/legacy/program_guide/containers/scroller#Signals|Signals]] * [[/develop/legacy/program_guide/containers/scroller#Example|Example]] [[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Scroller.html|Scroller Container API]] ++++ ---- ++++Table Container| {{ :container_table_tree.png }}{{ :container_table.png }} A table is like a box but with 2 dimensions. You have the same kind of APIs as with boxes. An item inside the table can span multiple columns and rows, and even overlap with other items (and it can then be raised or lowered accordingly to adjust stacking if there is overlap). * [[/develop/legacy/program_guide/containers/table#Creating_a_Table|Creating a Table]] * [[/develop/legacy/program_guide/containers/table#Adding_Items_to_the_Table|Adding Items to the Table]] * [[/develop/legacy/program_guide/containers/table#Managing_the_Items|Managing the Items]] * [[/develop/legacy/program_guide/containers/table#Clearing_the_Table|Clearing the Table]] [[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Table.html|Table Container API]] ++++ \\ ---- {{page>index}}