220 lines
11 KiB
Plaintext
220 lines
11 KiB
Plaintext
~~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 ===
|
|
|
|
* [[/program_guide/containers/box|Box]]
|
|
* [[/program_guide/containers/conformant|Conformant]]
|
|
* [[/program_guide/containers/gengrid|Gengrid(Generic Grid)]]
|
|
* [[/program_guide/containers/genlist|Genlist(Generic List)]]
|
|
* [[/program_guide/containers/grid|Grid]]
|
|
* [[/program_guide/containers/layout|Layout]]
|
|
* [[/program_guide/containers/mapbuf|Mapbuf]]
|
|
* [[/program_guide/containers/naviframe|Naviframe]]
|
|
* [[/program_guide/containers/panes|Panes]]
|
|
* [[/program_guide/containers/scroller|Scroller]]
|
|
* [[/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.
|
|
|
|
* [[/program_guide/containers/box#Creating_a_Box|Creating a Box]]
|
|
* [[/program_guide/containers/box#Adding_Objects_to_the_Box|Adding Objects to the Box]]
|
|
* [[/program_guide/containers/box#Setting_the_Padding|Setting the Padding]]
|
|
* [[/program_guide/containers/box#Handling_Element_Size|Handling Element Size]]
|
|
* [[/program_guide/containers/box#Setting_the_Alignment|Setting the Alignment]]
|
|
* [[/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.
|
|
|
|
* [[/program_guide/containers/conformant#Creating_a_Conformant|Creating a Conformant]]
|
|
* [[/program_guide/containers/conformant#Adding_Content_to_the_Conformant|Adding Content to the Conformant]]
|
|
* [[/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 }}{{ :container_gengrid.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.
|
|
|
|
* [[/program_guide/containers/gengrid#Adding_a_Gengrid|Adding a Gengrid]]
|
|
* [[/program_guide/containers/gengrid#Gengrid_Items|Gengrid Items]]
|
|
* [[/program_guide/containers/gengrid#Creating_and_Deleting_Items|Creating and Deleting Items]]
|
|
* [[/program_guide/containers/gengrid#Managing_Items|Managing Items]]
|
|
* [[/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).
|
|
|
|
* [[/program_guide/containers/genlist#Genlist_Item_Style|Genlist Item Style]]
|
|
* [[/program_guide/containers/genlist#Adding_a_Genlist|Adding a Genlist]]
|
|
* [[/program_guide/containers/genlist#Creating_And_Deleting_Items|Creating And Deleting Items]]
|
|
* [[/program_guide/containers/genlist#Managing_Items|Managing Items]]
|
|
* [[/program_guide/containers/genlist#Selection|Selection]]
|
|
* [[/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.
|
|
|
|
* [[/program_guide/containers/grid#Creating_a_Grid|Creating a Grid]]
|
|
* [[/program_guide/containers/grid#Adding_Items_to_the_Grid|Adding Items to the Grid]]
|
|
* [[/program_guide/containers/grid#Changing_Position_and_Size|Changing Position and Size]]
|
|
* [[/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.
|
|
|
|
* [[/program_guide/containers/layout#Creating_a_Layout|Creating a Layout]]
|
|
* [[/program_guide/containers/layout#Adding_Objects_to_the_Layout|Adding Objects to the Layout]]
|
|
* [[/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.
|
|
|
|
* [[/program_guide/containers/mapbuf#Creating_a_Mapbuf|Creating a Mapbuf]]
|
|
* [[/program_guide/containers/mapbuf#Adding_Content_to_the_Mapbuf|Adding Content to the Mapbuf]]
|
|
* [[/program_guide/containers/mapbuf#Activating_the_Mapbuf|Activating the Mapbuf]]
|
|
* [[/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.
|
|
|
|
* [[/program_guide/containers/naviframe#Creating_a_Naviframe|Creating a Naviframe]]
|
|
* [[/program_guide/containers/naviframe#Adding_and_Deleting Views|Adding and Deleting Views]]
|
|
* [[/program_guide/containers/naviframe#Adding_Fixed_Content|Adding Fixed Content]]
|
|
* [[/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.
|
|
|
|
* [[/program_guide/containers/panes#Creating_Panes|Creating Panes]]
|
|
* [[/program_guide/containers/panes#Adding Content to the Panes|Adding Content to the Panes]]
|
|
* [[/program_guide/containers/panes#Setting_Panes_Options|Setting Panes Options]]
|
|
* [[/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.
|
|
|
|
* [[/program_guide/containers/scroller#Creating_a_Scroller|Creating a Scroller]]
|
|
* [[/program_guide/containers/scroller#Adding_Objects_to_the_Scroller|Adding Objects to the Scroller]]
|
|
* [[/program_guide/containers/scroller#Managing_the_Properties_of_the_Scroller|Managing the Properties of the Scroller]]
|
|
* [[/program_guide/containers/scroller#Signals|Signals]]
|
|
* [[/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).
|
|
|
|
* [[/program_guide/containers/table#Creating_a_Table|Creating a Table]]
|
|
* [[/program_guide/containers/table#Adding_Items_to_the_Table|Adding Items to the Table]]
|
|
* [[/program_guide/containers/table#Managing_the_Items|Managing the Items]]
|
|
* [[/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}}
|