cedric pushed a commit to branch master.

http://git.enlightenment.org/website/www-content.git/commit/?id=ebdecb2baf46744a273aa80259163b420251eb52

commit ebdecb2baf46744a273aa80259163b420251eb52
Author: Clément Bénier <clement.ben...@openwide.fr>
Date:   Wed Aug 19 11:22:41 2015 +0200

    Wiki pages containers_pg created: 1 main and 11 PG + 22 images + index
    
    Signed-off-by: Clément Bénier <clement.ben...@openwide.fr>
---
 media/container_box.png                            | Bin 0 -> 9139 bytes
 media/container_box_align.png                      | Bin 0 -> 89668 bytes
 media/container_box_tree.png                       | Bin 0 -> 2341 bytes
 media/container_conformant.png                     | Bin 0 -> 5037 bytes
 media/container_conformant_tree.png                | Bin 0 -> 6474 bytes
 media/container_gengrid_tree.png                   | Bin 0 -> 8420 bytes
 media/container_genlist.png                        | Bin 0 -> 6441 bytes
 media/container_genlist_multi.png                  | Bin 0 -> 21733 bytes
 media/container_genlist_tree.png                   | Bin 0 -> 8286 bytes
 media/container_genlist_treemode.png               | Bin 0 -> 40208 bytes
 media/container_grid_tree.png                      | Bin 0 -> 2171 bytes
 media/container_layout.png                         | Bin 0 -> 7475 bytes
 media/container_layout_tree.png                    | Bin 0 -> 3833 bytes
 media/container_mapbuf.png                         | Bin 0 -> 826 bytes
 media/container_mapbuf_tree.png                    | Bin 0 -> 4087 bytes
 media/container_naviframe_tree.png                 | Bin 0 -> 5144 bytes
 media/container_panes.png                          | Bin 0 -> 3925 bytes
 media/container_panes_tree.png                     | Bin 0 -> 4769 bytes
 media/container_scroller.png                       | Bin 0 -> 2169 bytes
 media/container_scroller_tree.png                  | Bin 0 -> 7838 bytes
 media/container_table.png                          | Bin 0 -> 232 bytes
 media/container_table_tree.png                     | Bin 0 -> 2384 bytes
 pages/docs.txt                                     |   1 +
 .../basic_application_structure_pg.txt             |   2 +-
 pages/program_guide/containers/box.txt             | 257 +++++++++++++++++++++
 pages/program_guide/containers/conformant.txt      |  54 +++++
 pages/program_guide/containers/gengrid.txt         | 124 ++++++++++
 pages/program_guide/containers/genlist.txt         | 218 +++++++++++++++++
 pages/program_guide/containers/grid.txt            |  71 ++++++
 pages/program_guide/containers/index.txt           |  14 ++
 pages/program_guide/containers/layout.txt          |  82 +++++++
 pages/program_guide/containers/mapbuf.txt          |  89 +++++++
 pages/program_guide/containers/naviframe.txt       | 109 +++++++++
 pages/program_guide/containers/panes.txt           |  70 ++++++
 pages/program_guide/containers/scroller.txt        | 200 ++++++++++++++++
 pages/program_guide/containers/table.txt           |  91 ++++++++
 pages/program_guide/containers_pg.txt              | 219 ++++++++++++++++++
 pages/program_guide/index.txt                      |   1 +
 pages/tutorial/menu/basic_ui.txt                   |   2 +-
 39 files changed, 1602 insertions(+), 2 deletions(-)

diff --git a/media/container_box.png b/media/container_box.png
new file mode 100644
index 0000000..8446f9a
Binary files /dev/null and b/media/container_box.png differ
diff --git a/media/container_box_align.png b/media/container_box_align.png
new file mode 100644
index 0000000..720016f
Binary files /dev/null and b/media/container_box_align.png differ
diff --git a/media/container_box_tree.png b/media/container_box_tree.png
new file mode 100644
index 0000000..63ae7b3
Binary files /dev/null and b/media/container_box_tree.png differ
diff --git a/media/container_conformant.png b/media/container_conformant.png
new file mode 100644
index 0000000..f4eb438
Binary files /dev/null and b/media/container_conformant.png differ
diff --git a/media/container_conformant_tree.png 
b/media/container_conformant_tree.png
new file mode 100644
index 0000000..cd6c1ab
Binary files /dev/null and b/media/container_conformant_tree.png differ
diff --git a/media/container_gengrid_tree.png b/media/container_gengrid_tree.png
new file mode 100644
index 0000000..fe01efb
Binary files /dev/null and b/media/container_gengrid_tree.png differ
diff --git a/media/container_genlist.png b/media/container_genlist.png
new file mode 100644
index 0000000..760185a
Binary files /dev/null and b/media/container_genlist.png differ
diff --git a/media/container_genlist_multi.png 
b/media/container_genlist_multi.png
new file mode 100644
index 0000000..613d1d5
Binary files /dev/null and b/media/container_genlist_multi.png differ
diff --git a/media/container_genlist_tree.png b/media/container_genlist_tree.png
new file mode 100644
index 0000000..8870413
Binary files /dev/null and b/media/container_genlist_tree.png differ
diff --git a/media/container_genlist_treemode.png 
b/media/container_genlist_treemode.png
new file mode 100644
index 0000000..7df661c
Binary files /dev/null and b/media/container_genlist_treemode.png differ
diff --git a/media/container_grid_tree.png b/media/container_grid_tree.png
new file mode 100644
index 0000000..d21257b
Binary files /dev/null and b/media/container_grid_tree.png differ
diff --git a/media/container_layout.png b/media/container_layout.png
new file mode 100644
index 0000000..1078c46
Binary files /dev/null and b/media/container_layout.png differ
diff --git a/media/container_layout_tree.png b/media/container_layout_tree.png
new file mode 100644
index 0000000..c3bbeee
Binary files /dev/null and b/media/container_layout_tree.png differ
diff --git a/media/container_mapbuf.png b/media/container_mapbuf.png
new file mode 100644
index 0000000..d948792
Binary files /dev/null and b/media/container_mapbuf.png differ
diff --git a/media/container_mapbuf_tree.png b/media/container_mapbuf_tree.png
new file mode 100644
index 0000000..64a63f6
Binary files /dev/null and b/media/container_mapbuf_tree.png differ
diff --git a/media/container_naviframe_tree.png 
b/media/container_naviframe_tree.png
new file mode 100644
index 0000000..c9496ff
Binary files /dev/null and b/media/container_naviframe_tree.png differ
diff --git a/media/container_panes.png b/media/container_panes.png
new file mode 100644
index 0000000..e6cc9da
Binary files /dev/null and b/media/container_panes.png differ
diff --git a/media/container_panes_tree.png b/media/container_panes_tree.png
new file mode 100644
index 0000000..1ce2efa
Binary files /dev/null and b/media/container_panes_tree.png differ
diff --git a/media/container_scroller.png b/media/container_scroller.png
new file mode 100644
index 0000000..5f5bacf
Binary files /dev/null and b/media/container_scroller.png differ
diff --git a/media/container_scroller_tree.png 
b/media/container_scroller_tree.png
new file mode 100644
index 0000000..b1f63aa
Binary files /dev/null and b/media/container_scroller_tree.png differ
diff --git a/media/container_table.png b/media/container_table.png
new file mode 100644
index 0000000..0f99a63
Binary files /dev/null and b/media/container_table.png differ
diff --git a/media/container_table_tree.png b/media/container_table_tree.png
new file mode 100644
index 0000000..7737bc2
Binary files /dev/null and b/media/container_table_tree.png differ
diff --git a/pages/docs.txt b/pages/docs.txt
index d35fd61..366c33d 100644
--- a/pages/docs.txt
+++ b/pages/docs.txt
@@ -57,6 +57,7 @@ Go check the current available version of EFL on each 
distro/platform:
 === Programming Guide ===
 
   * [[program_guide/basic_application_structure_pg|Basic Application structure 
PG]]
+  * [[program_guide/containers_pg|Containers PG]]
 
 ----
 
diff --git a/pages/program_guide/basic_application_structure_pg.txt 
b/pages/program_guide/basic_application_structure_pg.txt
index df82fc7..a505087 100644
--- a/pages/program_guide/basic_application_structure_pg.txt
+++ b/pages/program_guide/basic_application_structure_pg.txt
@@ -65,7 +65,7 @@ the content and where the Evas canvas is placed.
 There are three main groups of objects provided by Elementary:
 
     * [[/coming_soon|Widgets]]: These are the widgets with which you build 
your application UI.
-    * [[/coming_soon|Containers]]: These are the containers that hold the 
widgets.
+    * [[[[program_guide/containers_pg|Containers]]: These are the containers 
that hold the widgets.
     * Infrastructure: These are the modules that deal with Elementary as a 
whole.
 
 [[/docs/efl/start|EFL Hello World Tutorial]] shows you how to develop your 
first application with
diff --git a/pages/program_guide/containers/box.txt 
b/pages/program_guide/containers/box.txt
new file mode 100644
index 0000000..90c80fe
--- /dev/null
+++ b/pages/program_guide/containers/box.txt
@@ -0,0 +1,257 @@
+~~Title: Box Container PG~~
+{{page>index}}
+----
+===== 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.
+
+=== Table of Contents ===
+
+  * [[#Creating_a_Box|Creating a Box]]
+  * [[#Adding_Objects_to_the_Box|Adding Objects to the Box]]
+  * [[#Setting_the_Padding|Setting the Padding]]
+  * [[#Handling_Element_Size|Handling Element Size]]
+  * [[#Setting_the_Alignment|Setting the Alignment]]
+  * [[#Using_Size_Hints|Using Size Hints]]
+
+=== Related Info ===
+
+  * 
[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Box.html|Box
 Container API]]
+  * 
[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/box_example_01.html|A
 Basic Box Example]]
+  * 
[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/box_example_02.html|A
 Layout Transition Example]]
+
+==== Creating a Box ====
+
+By default, the box will start in the vertical orientation, placing its 
elements ordered
+from top to bottom.
+
+To create a new vertical box:
+
+<code c>
+Evas_Object *vbox = elm_box_add(parent);
+</code>
+
+By default, the ''elm_box_add()'' function creates a vertical box. If you want
+to create a horizontal box, use the  function:
+
+To change the orientation, use ''elm_box_horizontal_set()'' function. When
+horizontal is set, the order will go from left to right.
+
+<code c>
+Evas_Object *hbox = elm_box_add(parent);
+elm_box_horizontal_set(hbox, EINA_TRUE);
+</code>
+
+<note>
+A box is a non-graphical object. It adds no graphics to or around the objects
+it holds.
+</note>
+
+==== Addind Objects to the Box ====
+
+You can add any Evas object to the box. There are multiples ways to add an
+object to a box, 4 functions can be used:
+
+|''elm_box_pack_end()''|Add an object at the end of the pack list.\\ \\ Pack 
the object into the box, placing it last in the list of children objects. The 
actual position the object will get on screen depends on the layout used. If no 
custom layout is set, it will be at the bottom or right, depending if the box 
is vertical or horizontal, respectively.|
+|''elm_box_pack_start()''|Add an object to the beginning of the pack list. \\ 
\\ Pack object into the box, placing it first in the list of children objects. 
The actual position the object will get on screen depends on the layout used. 
If no custom layout is set, it will be at the top or left, depending if the box 
is vertical or horizontal, respectively.|
+|''elm_box_pack_before()''|Adds an object to the box before the indicated 
object.\\ \\ This will add the object to the box indicated before the object 
indicated with before. If before is not already in the box, results are 
undefined. Before means either to the left of the indicated object or above it 
depending on orientation.|
+|''elm_box_pack_after()''|Adds an object to the box after the indicated 
object. \\ \\ This will add the object to the box indicated after the object 
indicated with after. If after is not already in the box, results are 
undefined. After means either to the right of the indicated object or below it 
depending on orientation.|
+
+Below, an example shows how works these 4 functions. First, 2 button widgets
+are added to the box with ''elm_box_pack_end()'' then ''elm_box_pack_before()''
+function adds a button before the last added button and
+''elm_box_pack_start()'' adds a button at the top of the box list. Finally a
+button is added just after the top button in the box list with
+''elm_box_pach_after()'':
+
+<code c>
+Evas_Object *bt_end, *bt_start, *bt_before, *bt_after;
+int i;
+char tmp[16];
+//add 2 buttons
+for (i = 0; i < 2; i++)
+  {
+     snprintf(tmp, sizeof(tmp), "Button %d", i);
+     bt_end = elm_button_add(vbox);
+     elm_object_text_set(bt_end, tmp);
+     elm_box_pack_end(vbox, bt_end);
+     evas_object_show(bt_end);
+  }
+
+//add bt_before before bt_end(button 1)
+bt_before = elm_button_add(vbox);
+elm_object_text_set(bt_before, "Button Before");
+elm_box_pack_before(vbox, bt_before, bt_end);
+evas_object_show(bt_before);
+
+//add bt_start
+bt_start = elm_button_add(vbox);
+elm_object_text_set(bt_start, "Button Start");
+elm_box_pack_start(vbox, bt_start);
+evas_object_show(bt_start);
+
+//add bt_start
+bt_after = elm_button_add(vbox);
+elm_object_text_set(bt_after, "Button After");
+elm_box_pack_after(vbox, bt_after,bt_start);
+evas_object_show(bt_after);
+</code>
+
+==== Setting the Padding ====
+
+You can set the padding between the objects in a box by using the
+''elm_box_padding_set()'' function. The padding values are the number of
+pixels horizontally and vertically.
+
+<code c>
+elm_box_padding_set(vbox, 16, 6);
+</code>
+
+==== Handling Element Size ====
+
+You can add different-size elements to a container. For example, to add an
+image with a size of 128x128 pixels as the first element in a box, use the
+''elm_box_pack_start()'' function:
+
+<code c>
+Evas_Object *ic = elm_icon_add(vbox);
+elm_image_file_set(ic, "./c1.png", NULL);
+evas_object_size_hint_min_set(ic, 128, 128);
+evas_object_show(ic);
+elm_box_pack_start(vbox, ic);
+</code>
+
+We ask Evas to set the size hint for the icon object by using the
+''elm_object_size_hint_min_set()'' function. Evas will try to set the minimum 
size
+of this object accordingly.
+
+If you want to create a homogeneous box, where all objects have the same
+height or width, depending on the orientation of the box, use the
+''elm_box_homogeneous_set()'' function:
+
+<code c>
+elm_box_homogeneous_set(vbox, EINA_TRUE);
+</code>
+
+Elementary will set the height of the tallest object as the height of all
+objects, or the width of the widest element as the width of all objects.
+
+==== Setting the Alignment ====
+
+You can set the alignment of widgets inside a box using the
+''elm_box_align_set()'' function. The function takes two doubles values, a
+horizontal value and a vertical value, representing the percentage between 0
+and 1.0 of the alignment in the horizontal and vertical axes. When you add a
+widget with the ''elm_box_pack_end()'' or ''elm_box_pack_start()'' function,
+Elementary computes the global size of the box. If the global size is bigger
+than the size of the box's parent, the box will take up all the space occupied
+by the parent, and the size of the parent may be extended to hold the box. If
+the global size is smaller than the parent's size, the alignment values will
+set the position of the box inside the parent.
+
+{{ :container_box_align.png }}
+
+Here, we set an alignment of 0.8 vertically:
+
+<code c>
+elm_box_align_set(vbox, 0.0, 0.8);
+</code>
+
+<note>
+The alignment only takes effect in the opposite direction than the one defined
+with the ''elm_box_horizontal_set()'' function.
+</note>
+
+The ''elm_box_layout_transition()'' function provides the ability to animate
+the motion of the objects in a box when switching from one layout to another.
+
+==== Using Size Hints ====
+
+Size hints are a set of functions that can be used on any Evas object. You
+request Evas to take care of various properties, and Evas will honor these
+requests if it can. This is why they are called "hints". The size hint
+functions are:
+
+  * ''evas_object_size_hint_min_set()''
+  * ''evas_object_size_hint_max_set()''
+  * ''evas_object_size_hint_aspect_set()''
+  * ''evas_object_size_hint_align_set()''
+  * ''evas_object_size_hint_weight_set()''
+
+You can also use the respective get functions to get the current hint values.
+
+In case of the ''evas_object_size_hint_min_set()'' function, you ask Evas to
+respect the minimum size you define for the object. For example, to set the
+minimum size of an icon to 64x46 pixels:
+
+<code c>
+evas_object_size_hint_min_set(ic, 64, 64);
+</code>
+
+You can also set a maximum size for the same icon:
+
+<code c>
+evas_object_size_hint_max_set(ic, 128, 128);
+</code>
+
+When you resize the parent of the icon, if there are no constraints to the
+parent, the minimum size of the parent will be the minimum hint size of the
+icon. If you increase the parent size, the icon will grow larger until its
+maximum hint size is reached. After this point, the icon will not grow any
+larger and there will be empty space around the icon within the parent.
+
+When the aspect size hint is set, Evas tries to fix the dimensional
+proportions of the object. Here, the proportion of the icon is respected, and
+the width will be the same as the height:
+
+<code c>
+evas_object_size_hint_aspect_set(ic, EVAS_ASPECT_CONTROL_VERTICAL, 1,1);
+</code>
+
+Here, the width will be twice the height:
+
+<code c>
+evas_object_size_hint_aspect_set(ic, EVAS_ASPECT_CONTROL_VERTICAL, 2,1);
+</code>
+
+If we want to change the alignment of the icon relative to the parent, we can
+use the ''evas_object_size_hint_align()'' function. By default, the icon is
+centered, so it is aligned with a value of 0.5. You can change the alignment
+as follows:
+
+<code c>
+evas_object_size_hint_align_set(ic, EVAS_HINT_FILL, EVAS_HINT_FILL);
+</code>
+
+In the above case, the icon is aligned to the bottom left corner of the
+parent.
+
+We can also play with the size of the icon inside its container by using the
+weight size hint. By default, the weight is not set, so the size of the icon
+will be the minimum size. But if you set this value to 1, the icon will be
+expand as much as it can inside the container:
+
+<code c>
+evas_object_size_hint_weight_set(ic, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+</code>
+
+You can also use the alignment and weight hints together. Here, we want the
+icon to take up all the space in its parent:
+
+<code c>
+evas_object_size_hint_align_set(ic, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_size_hint_weight_set(ic, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+</code>
+
+\\
+//**__[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/box_example_01.html|A
 Basic Box Example]]__**//
+-
+//**__[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/box_example_02.html|A
 Layout Transition Example]]__**//
+\\
+----
+{{page>index}}
diff --git a/pages/program_guide/containers/conformant.txt 
b/pages/program_guide/containers/conformant.txt
new file mode 100644
index 0000000..80ca8e7
--- /dev/null
+++ b/pages/program_guide/containers/conformant.txt
@@ -0,0 +1,54 @@
+~~Title: Conformant Container PG~~
+{{page>index}}
+----
+===== 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.
+
+=== Table of Contents ===
+
+  * [[/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]]
+
+=== Related Info ===
+
+  * 
[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Conformant.html|Conformant
 Container API]]
+  * 
[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/conformant_example_02_8c-example.html|A
 Conformant container example]]
+
+==== Creating a Conformant ====
+
+To create a conformant, use the ''elm_conformant_add()'' function:
+
+<code c>
+Evas_Object *conformant = elm_conformant_add(parent);
+</code>
+
+==== Adding Content to the Conformant ====
+
+To add content to the conformant, use the ''elm_object_content_set()'' 
function:
+
+<code c>
+elm_object_content_set(conformant, main_view);
+</code>
+
+==== Signals ====
+
+To receive notifications about the state of the virtual keyboard and
+clipboard, listen to the following Evas signals:
+
+    * ''"virtualkeypad,state,on"'': The virtual keyboard has been switched on.
+    * ''"virtualkeypad,state,off"'': The virtual keyboard has been switched 
off.
+    * ''"virtualkeypad,size,changed"'': The virtual keyboard size has changed.
+    * ''"clipboard,state,on"'': The clipboard has been switched on.
+    * ''"clipboard,state,off"'': The clipboard has been switched off.
+
+//**__[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/conformant_example_02_8c-example.html|A
 Conformant container example]]__**//
+\\
+----
+{{page>index}}
diff --git a/pages/program_guide/containers/gengrid.txt 
b/pages/program_guide/containers/gengrid.txt
new file mode 100644
index 0000000..71d38e3
--- /dev/null
+++ b/pages/program_guide/containers/gengrid.txt
@@ -0,0 +1,124 @@
+~~Title: Gengrid Container PG~~
+{{page>index}}
+----
+===== Gengrid Container =====
+{{ :container_gengrid_tree.png }}{{ :container_gengrid.png }}
+
+Gengrid container 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 container 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.
+
+=== Table of Contents ===
+
+  * [[#Adding_a_Gengrid|Adding a Gengrid]]
+  * [[#Gengrid_Items|Gengrid Items]]
+  * [[#Creating_and_Deleting_Items|Creating and Deleting Items]]
+  * [[#Managing_Items|Managing Items]]
+  * [[#Using_Gengrid_Callbacks|Using Gengrid Callbacks]]
+
+=== Related Info ===
+
+  * 
[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Gengrid.html|Gengrid
 Widget API]]
+  * 
[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/gengrid_example.html|A
 Gengrid Example]]
+
+==== Adding a Gengrid ====
+
+To add a gengrid widget:
+
+<code c>
+Evas_Object *gengrid = elm_gengrid_add(parent);
+</code>
+
+==== Gengrid Items ====
+
+A gengrid item is composed of 0 or more texts, 0 or more contents and 0 or
+more boolean states. The number of the text and content depends on the theme
+used for gengrid items. For the default gengrid item theme, we
+have one text part ("elm.text"), two content parts ("elm.swallow.icon" and
+"elm.swallow.end") and no state parts.
+
+
+==== Creating and Deleting Items ====
+
+As with genlists, items are allocated and deleted on the go, while the user is
+scrolling the gengrid. Here we declare a ''Elm_Gengrid_Item_Class'' structure 
to
+inform the gengrid how to manage items.
+<code c>
+static Elm_Gengrid_Item_Class *gic = elm_gengrid_item_class_new();
+gic->item_style = "default";
+gic->func.text_get = _grid_label_get;
+gic->func.content_get = _grid_content_get;
+gic->func.state_get = _grid_state_get;
+gic->func.del = _grid_del;
+</code>
+
+The parameters of this structure will not be detailed here, because they are
+very similar to that of the genlist. Please refer to the
+[[/program_guide/containers/genlist|genlist widget
+page]]
+for more detailed information.
+
+==== Managing Items ====
+
+As with genlists, items can be added with the ''elm_gengrid_item_append()'',
+''elm_gengrid_item_prepend()'', ''elm_gengrid_item_insert_before()'' and
+''elm_gengrid_item_insert_after()'' functions. With the gengrid, there is no 
need
+to pass the "type" parameters. They can be cleared with the
+''elm_gengrid_clear()'' function.
+
+We can set the multiselection mode on.
+
+<code c>
+elm_gengrid_multi_select_set(gengrid, EINA_TRUE);
+</code>
+
+When this mode is on, selected items are retrieved with
+''elm_gengrid_selected_items_get()''. It returns a list of all the selected 
items.
+
+When the content of an item changes, we can call ''elm_gengrid_item_update()'' 
to
+ask the gengrid to update this item's content.
+
+We can also manually select or disable some items with
+''elm_gengrid_item_selected_set()'' and ''elm_object_item_disabled_set()''.
+
+==== Using Gengrid Callbacks ====
+
+The gengrid widget emits the following signals:
+
+  * ''"activated"'' - The user has double-clicked or pressed (enter | return | 
spacebar) on an item. The event_info parameter is the gengrid item that is 
activated.
+  * ''"clicked,double"'' - The user has double-clicked an item. The event_info 
parameter is the gengrid item that is double-clicked.
+  * ''"longpressed"'' - The item is pressed for a certain amount of time. By 
default it is one second.
+  * ''"selected"'' - The user has selected an item. The event_info parameter 
is the gengrid item that is selected.
+  * ''"unselected"'' - The user has unselected an item. The event_info 
parameter is the gengrid item that is unselected.
+  * ''"realized"'' - The item in the gengrid has its implementing Evas object 
instantiated, de facto. event_info is the gengrid item that is created. The 
object may be deleted at any time, so it is strongly advisable not to use the 
object pointer returned from elm_gengrid_item_object_get(), because it may 
point to freed objects.
+  * ''"unrealized"'' - The implementing Evas object for this item is deleted. 
event_info is the gengrid item that is deleted.
+  * ''"changed"'' - An item is added, removed, resized or moved and the 
gengrid is resized or has "horizontal" property changes.
+  * ''"scroll,anim,start"'' - Scrolling animation starts.
+  * ''"scroll,anim,stop"'' - Scrolling animation stops.
+  * ''"drag,start,up"'' - The item in the gengrid is dragged (not scrolled) up.
+  * ''"drag,start,down"'' - The item in the gengrid has dragged (not scrolled) 
down.
+  * ''"drag,start,left"'' - The item in the gengrid is dragged (not scrolled) 
left.
+  * ''"drag,start,right"'' - The item in the gengrid is dragged (not scrolled) 
right.
+  * ''"drag,stop"'' - The item in the gengrid stops being dragged.
+  * ''"drag"'' - The item in the gengrid is dragged.
+  * ''"scroll"'' - The content is scrolled (moved).
+  * ''"scroll,drag,start"'' - Dragging the content starts.
+  * ''"scroll,drag,stop"'' - Dragging the content stops.
+  * ''"edge,top"'' - The gengrid is scrolled to the top edge.
+  * ''"edge,bottom"'' - The gengrid is scrolled to the bottom edge.
+  * ''"edge,left"'' - The gengrid is scrolled to the left edge.
+  * ''"edge,right"'' - The gengrid is scrolled to the right edge.
+
+\\
+//**__[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/gengrid_example.html|A
 Gengrid Example]]__**//
+\\
+----
+{{page>index}}
diff --git a/pages/program_guide/containers/genlist.txt 
b/pages/program_guide/containers/genlist.txt
new file mode 100644
index 0000000..2c02b15
--- /dev/null
+++ b/pages/program_guide/containers/genlist.txt
@@ -0,0 +1,218 @@
+~~Title: Genlist Container PG~~
+{{page>index}}
+----
+===== Genlist Container =====
+{{ :container_genlist_tree.png }}{{ :container_genlist.png }}
+
+Genlist is a container 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).
+
+=== Table of Contents ===
+
+  * [[#Genlist_Item_Style|Genlist Item Style]]
+  * [[#Adding_a_Genlist|Adding a Genlist]]
+  * [[#Creating_And_Deleting_Items|Creating And Deleting Items]]
+  * [[#Managing_Items|Managing Items]]
+  * [[#Selection|Selection]]
+  * [[#Using_Genlist_Callbacks|Using Genlist Callbacks]]
+
+=== Related Info ===
+
+  * [[/tutorial/genlist_tutorial|Genlist Tutorial]]
+  * 
[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Genlist.html|Genlist
 Widget API]]
+  * 
[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/genlist_example.html|A
 Genlist Example]]
+
+==== Genlist Item Style ====
+
+An item can have 0 or more texts, 0 or more contents, and 0 or more boolean
+states. This is defined in the Edje item theme style. Genlist looks for data
+items named respectively "labels", "contents", and "states" in the Edje file.
+The "default" item style provides one text part ("elm.text"), two content
+parts ("elm.swalllow.icon" and "elm.swallow.end") and no state parts.
+
+The following item styles are available:
+
+  * default
+  * default_style - The text part is a textblock
+  * double_label
+  * icon_top_text_bottom
+  * group_index
+  * one_icon - Only 1 icon (left) (since 1.7)
+  * end_icon - Only 1 icon (at end/right) (since 1.7)
+  * no_icon - No icon (at end/right) (since 1.7)
+  * full - Only 1 icon, elm.swallow.content, which consumes whole area of 
genlist itemj (since 1.7)
+
+If one wants to use more icons and texts than are offered in theme, there are
+two solutions. One is to use 'full' style that has one big swallow part. You
+can swallow anything there. The other solution is to customize genlist item
+style in application side by using ''elm_theme_extension_add()'' and its own 
edc.
+
+==== Adding a Genlist ====
+
+Genlist widget is added with the ''elm_genlist_add()'' function.
+
+<code c>
+
+Evas_Object *genlist;
+genlist = elm_genlist_add(parent);
+</code>
+
+==== Creating And Deleting Items ====
+
+To save up memory, genlist allocates and deletes items on the go, while the
+user is scrolling the list. To enable that, the user creates and fills a
+''Elm_Genlist_Item_Class'' structure that informs the genlist widget which
+callbacks to call when an item is created or deleted.
+
+<code c>
+
+Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
+
+itc->item_style = "default";
+itc->decorate_item_style = NULL;
+itc->decorate_all_item_style = NULL;
+itc->func.text_get = _item_label_get;
+itc->func.content_get = _item_content_get;
+itc->func.state_get = _item_state_get;
+itc->func.del = _item_del;
+</code>
+
+The ''item_style'', ''decorate_item_style'', and ''decorate_all_item_style''
+attributes define the names of the item style, the decorate mode item style
+and the decorate all item style.
+
+The ''func'' structure contains pointers to functions that are called when an
+item is going to be created or deleted. All of them receive a data parameter
+that points to the same data passed to the ''elm_genlist_item_append()'' and
+related item creation functions, and an obj parameter that points to the
+genlist object itself.
+
+|''text_get''|This function receives a PART parameter that is the name string 
of one of the existing text parts in the Edje group implementing the item's 
theme. It has to return a string (duplicated with the ''strdup()'' function) 
corresponding to the PART parameter. The caller is in charge of freeing the 
string when done.|
+|''content_get''|The PART parameter is the name string of one of the existing 
swallow parts in the Edje group. When no content is desired it must return 
NULL, or otherwise, a valid object handle. The object is deleted by the genlist 
on its deletion or when the item is "unrealized".|
+|''state_get''|The PART parameter is the name string of one of the state parts 
in the Edje group implementing the item's theme. It returns EINA_FALSE for 
false/off or EINA_TRUE for true/on. The default is false. Genlists emit a 
signal to the PART parameter's theming Edje object with "elm,state,xxx,active" 
as "emission" and "elm" as "source" argument, when the state is true. xxx is 
the name of the (state) part.|
+|''del''|This function is called when the genlist item is deleted. It deletes 
any data that is allocated at the item creation.|
+
+==== Managing Items ====
+
+To add an item, several functions can be used. ''elm_genlist_item_append()''
+adds an item to the end of the list, or if there is a parent list, to the end
+of all the child items of the parent list. ''elm_genlist_item_prepend()'' is
+otherwise the same but adds to the beginning of the list or children lists.
+''elm_genlist_item_insert_before()'' inserts an item before the indicated item
+and ''elm_genlist_item_insert_after()'' inserts an item after the indicated
+item.
+
+The previous functions take a "type" parameter that can be one of the 
following.
+
+   * ''ELM_GENLIST_ITEM_NONE''
+   * ''ELM_GENLIST_ITEM_TREE''
+   * ''ELM_GENLIST_ITEM_GROUP''
+
+
+If ''ELM_GENLIST_ITEM_TREE'' is set, this item is displayed as being able to
+expand and have child items. If ''ELM_GENLIST_ITEM_GROUP'' is set, this item 
is a
+group index item that is displayed at the top until the next group appears.
+
+{{ :container_genlist_treemode.png }}
+
+The application clears the list with ''elm_genlist_clear()'', which deletes
+all the items in the list. ''elm_object_item_del()'' deletes a specific item.
+''elm_genlist_item_subitems_clear()'' clears all items that are children of
+the indicated parent item.
+
+To help inspect list items, move to the item at the top of the list with
+''elm_genlist_first_item_get()'', which returns the item pointer.
+''elm_genlist_last_item_get()'' moves to the item at the end of the list.
+''elm_genlist_item_next_get()'' and ''elm_genlist_item_prev_get()'' move to
+the next and previous items relative to the indicated item. Using these calls
+you can go through the entire item list or tree.
+
+<note>
+As a tree, the items are flattened on the list, so
+''elm_genlist_item_parent_get()'' gives you the name of the parent item (even 
to
+skip them if needed).
+</note>
+
+''elm_genlist_item_show()'' scrolls the scroller to show the desired item as 
visible.
+
+''elm_object_item_data_get()'' returns the data pointer set by the item 
creation functions.
+
+If an item changes (state, boolean, text or content change), use
+''elm_genlist_item_update()'' for the genlist to update the item. Genlist will
+re-realize the item and call the functions in the ''Elm_Genlist_Item_Class'' 
for
+it.
+
+==== Selection ====
+
+Items are manually selected or unselected with
+''elm_genlist_item_selected_set()'' or disabled with
+''elm_object_item_disabled_set()''. In case there is a tree or a group item,
+the ''elm_genlist_item_expanded_set()'' function is used to expand or contract
+the item.
+
+<note>
+Calling this function does not show or hide any child of an item (if it is a
+parent). You must manually delete and create them on the callbacks of the
+"expanded" or "contracted" signals.
+</note>
+
+By default, the genlist is in single-selection mode: only one item can be
+selected at a time. You can use ''elm_genlist_multi_select_set()'' to select
+multiple items. In single-selection mode, the
+''elm_genlist_selected_item_get()'' function can be called to retrieve the
+selected item. If several items are selected, the
+''elm_genlist_selected_items_get()'' returns a list of the current selected
+items.
+
+In the picture below, there is a genlist in multi-selection mode with two
+items selected (#4 and #5) and one item disabled (#2).
+
+{{ :container_genlist_multi.png }}
+
+==== Using Genlist Callbacks ====
+
+The genlist widget emits the following signals:
+
+   * ''"activated"'': The user has double-clicked or pressed (enter | return | 
spacebar) on an item. event_info in the callback function points at an object 
of the type Elm_Object_Item that contains the activated item.
+   * ''"clicked,double"'': The user has double-clicked an item. event_info in 
the callback function points at an object of the type Elm_Object_Item that 
contains the activated item.
+   * ''"selected"'': The user selects an item. event_info in the callback 
function points at an object of the type Elm_Object_Item that contains the 
activated item.
+   * ''"unselected"'': The user unselects an item. event_info in the callback 
function points at an object of type Elm_Object_Item that contains the 
activated item.
+   * ''"expanded"'': The item is to be expanded with 
''elm_genlist_item_expanded_set()''. This callback fills in the child items. 
event_info in the callback function points at an object of the type 
Elm_Object_Item that contains the activated item.
+   * ''"contracted"'': The item is to be contracted with 
''elm_genlist_item_expanded_set()''. This callback deletes the child items. 
event_info in the callback function points at an object of the type 
Elm_Object_Item that contains the activated item.
+   * ''"expand,request"'': The user wants to expand a tree branch item. The 
callback decides if the item can expand (if it has any children) and calls 
''elm_genlist_item_expanded_set()'' to set the state. event_info in the 
callback function points at an object of the type Elm_Object_Item that contains 
the activated item.
+   * ''"contract,request"'': The user wants to contract a tree branch item. 
The callback decides if the item can contract (if it has any children) and 
calls ''elm_genlist_item_expanded_set()'' to set the state. event_info in the 
callback function points at an object of the type Elm_Object_Item that contains 
the activated item.
+   * ''"realized"'': The item is created as a real evas object. event_info in 
the callback function points at an object of the type Elm_Object_Item, that 
contains the activated item.
+   * ''"unrealized"'': An item is going to be unrealized. Content objects 
provided are deleted and the item object is deleted or put into a floating 
cache. event_info in the callback function points at an object of the type 
Elm_Object_Item that contains the activated item.
+   * ''"drag,start,up"'': The item in the list is dragged (not scrolled) up. 
event_info in the callback function points at an object of the type 
Elm_Object_Item that contains the activated item.
+   * ''"drag,start,down"'': The item in the list is dragged (not scrolled) 
down. event_info in the callback function points at an object of the type 
Elm_Object_Item that contains the activated item.
+   * ''"drag,start,left"'': The item in the list is dragged (not scrolled) 
left. event_info in the callback function points at an object of the type 
Elm_Object_Item that contains the activated item.
+   * ''"drag,start,right"'': The item in the list is dragged (not scrolled) 
right. event_info in the callback function points at an object of the type 
Elm_Object_Item that contains the activated item.
+   * ''"drag,stop"'': The item in the list has stopped being dragged. 
event_info in the callback function points at an object of the type 
Elm_Object_Item that contains the activated item.
+   * ''"drag"'': The item in the list is being dragged. event_info in the 
callback function points at an object of the type Elm_Object_Item that contains 
the activated item.
+   * ''"longpressed"'': The item is pressed for a certain amount of time. The 
default specified time is one second. event_info in the callback function 
points at an object of the type Elm_Object_Item that contains the activated 
item.
+   * ''"scroll,anim,start"'': The scrolling animation is started. event_info 
is NULL.
+   * ''"scroll,anim,stop"'': The scrolling animation is stopped. event_info is 
NULL.
+   * ''"scroll,drag,start"'': Dragging the content is started. event_info is 
NULL.
+   * ''"scroll,drag,stop"'': Dragging the content is stopped. event_info is 
NULL.
+   * ''"edge,top"'': The genlist is scrolled to the top edge. event_info is 
NULL.
+   * ''"edge,bottom"'': The genlist is scrolled to the bottom edge. event_info 
is NULL.
+   * ''"edge,left"'': The genlist is scrolled to the left edge. event_info is 
NULL.
+   * ''"edge,right"'': The genlist is scrolled to the right edge. event_info 
is NULL.
+   * ''"multi,swipe,left"'': The genlist is multi-touch swiped left. 
event_info in the callback function points at an object of the type 
Elm_Object_Item that contains the activated item.
+   * ''"multi,swipe,right"'': The genlist is multi-touch swiped right. 
event_info in the callback function points at an object of the type 
Elm_Object_Item that contains the activated item.
+   * ''"multi,swipe,up"'': The genlist is multi-touch swiped up. event_info in 
the callback function points at an object of the type Elm_Object_Item that 
contains the activated item.
+   * ''"multi,swipe,down"'': The genlist is multi-touch swiped down. 
event_info in the callback function points at an object of the type 
Elm_Object_Item that contains the activated item.
+   * ''"multi,pinch,out"'': The genlist is multi-touch pinched out. event_info 
in the callback function points at an object of the type Elm_Object_Item that 
contains the activated item.
+   * ''"multi,pinch,in"'': The genlist is multi-touch pinched in. event_info 
in the callback function points at an object of the type Elm_Object_Item that 
contains the activated item.
+   * ''"swipe"'': The genlist is swiped. event_info in the callback function 
points at an object of the type Elm_Object_Item that contains the activated 
item.
+   * ''"moved"'': A genlist item is moved in the reorder mode. event_info in 
the callback function points at an object of the type Elm_Object_Item that 
contains the activated item.
+   * ''"moved,after"'': A genlist item is moved after another item in the 
reorder mode. To access the relative previous item, use 
''elm_genlist_item_prev_get()''. This signal is called along with the "moved" 
signal. event_info in the callback function points at an object of the type 
Elm_Object_Item that contains the activated item.
+   * ''"moved,before"'': A genlist item is moved before another item in the 
reorder mode. To access the relative previous item, use 
''elm_genlist_item_next_get()''. This signal is called along with the "moved" 
signal. event_info in the callback function points at an object of the type 
Elm_Object_Item that contains the activated item.
+   * ''"language,changed"'': The program's language is changed. event_info is 
NULL.
+   * ''"tree,effect,finished"'': A genlist tree effect is finished. event_info 
is NULL.
+
+\\
+//**__[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/genlist_example.html|A
 Genlist Example]]__**//
+\\
+----
+{{page>index}}
+
diff --git a/pages/program_guide/containers/grid.txt 
b/pages/program_guide/containers/grid.txt
new file mode 100644
index 0000000..fdfbbe8
--- /dev/null
+++ b/pages/program_guide/containers/grid.txt
@@ -0,0 +1,71 @@
+~~Title: Grid Container PG~~
+{{page>index}}
+----
+===== 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.
+
+=== Table of Contents ===
+
+  * [[#Creating_a_Grid|Creating a Grid]]
+  * [[#Adding_Items_to_the_Grid|Adding Items to the Grid]]
+  * [[#Changing_Position_and_Size|Changing Position and Size]]
+  * [[#Clearing_the_Grid|Clearing the Grid]]
+
+=== Relative Info ===
+
+  * 
[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Grid.html|Grid
 Container API]]
+
+==== Creating a Grid ====
+
+{{ :container_grid_tree.png }}{{ :container_grid.png }}
+
+To create a grid, use the ''elm_grid_add()'' function:
+
+<code c>
+Evas_Object *grid = elm_grid_add(parent);
+</code>
+
+==== Adding Items to the Grid ====
+
+To add an item to the grid, use the ''elm_grid_pack_set()'' function. Provide
+the X and Y coordinates, and the width and height in the grid as parameters.
+The following code adds 12 icons in a circle formation:
+
+<code c>
+for (i = 0; i < 12; i++)
+  {
+     ic = elm_icon_add(grid);
+     elm_image_file_set(ic, "c1.png", NULL);
+     evas_object_size_hint_min_set(ic, 128, 128);
+     evas_object_show(ic);
+     x = 40 * cos(2.0 * M_PI / 12 * i);
+     y = 40 * sin(2.0 * M_PI / 12 * i);
+     elm_grid_pack(grid, ic,  40 + x,  40 + y,  20 , 20);
+  }
+evas_object_show(grid);
+</code>
+
+==== Changing Position and Size ====
+
+To change the position of an item in the grid, use the ''elm_grid_pack_set()''
+function. The first parameter is the item you want to move, and the following
+parameters are the same as for the ''elm_grid_pack()'' function.
+
+To change the size of the grid, use the ''elm_grid_size_set()'' function. You
+can set the new width and height for the grid. The position and size of the
+items in the grid are changed accordingly.
+
+==== Clearing the Grid ====
+
+To clear the grid, use the ''elm_grid_clear()'' function. All items are
+removed from the grid. If you set the clear parameter, all the items are also
+deleted, with the ''evas_object_del()'' function called on each item.
+
+\\
+//**__A Grid container example__: **//{{
+:code_c/programming_guide/container/grid.c }}
+----
+{{page>index}}
diff --git a/pages/program_guide/containers/index.txt 
b/pages/program_guide/containers/index.txt
new file mode 100644
index 0000000..96c4037
--- /dev/null
+++ b/pages/program_guide/containers/index.txt
@@ -0,0 +1,14 @@
+++++Container Menu|
+[[/program_guide/containers_pg|Container Programming Guide]]:
+    * [[/program_guide/containers/box|Box]] 
(//[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Box.html|API]]//)
+    * [[/program_guide/containers/conformant|Conformant]] 
(//[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Conformant.html|API]]//)
+    * 
[[/program_guide/containers/gengrid|Gengrid]](//[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Gengrid.html|API]]//)
+    * 
[[/program_guide/containers/genlist|Genlist]](//[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Genlist.html|API]]//)
+    * [[/program_guide/containers/grid|Grid]] 
(//[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Grid.html|API]]//)
+    * [[/program_guide/containers/layout|Layout]] 
(//[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Layout.html|API]]//)
+    * [[/program_guide/containers/mapbuf|Mapbuf]] 
(//[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Mapbuf.html|API]]//)
+    * [[/program_guide/containers/naviframe|Naviframe]] 
(//[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Naviframe.html|API]]//)
+    * [[/program_guide/containers/panes|Panes]] 
(//[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Panes.html|API]]//)
+    * [[/program_guide/containers/scroller|Scroller]] 
(//[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Scroller.html|API]]//)
+    * [[/program_guide/containers/table|Table]] 
(//[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Table.html|API]]//)
+++++
diff --git a/pages/program_guide/containers/layout.txt 
b/pages/program_guide/containers/layout.txt
new file mode 100644
index 0000000..247c0d0
--- /dev/null
+++ b/pages/program_guide/containers/layout.txt
@@ -0,0 +1,82 @@
+~~Title: Layout Container PG~~
+{{page>index}}
+----
+===== Layout Container =====
+{{ :container_layout_tree.png }}{{ :container_layout.png }}
+
+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
+[[/coming_soon|Edje guide]].
+
+=== Table of Contents ===
+
+  * [[#Creating_a_Layout|Creating a Layout]]
+  * [[#Adding_Objects_to_the_Layout|Adding Objects to the Layout]]
+  * [[#Using_Layout_Themes|Using Layout Themes]]
+
+=== Related Info ===
+
+  * 
[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Layout.html|Layout
 Container API]]
+
+^Layout Examples^^^^
+|[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/layout_example_01.html|Content,
 Table and 
Box]]|[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/layout_example_02.html|Predefined
 
Layout]]|[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/layout_example_03.html|Signals
 and Size Changed ]]|[[https://build.enlightenment.org/job/nightly_elm_gc [...]
+
+==== Creating a Layout ====
+
+To create a new layout, use the ''elm_layout_add()'' function:
+
+<code c>
+Evas_Object *layout = elm_layout_add(parent);
+</code>
+
+
+==== Adding Objects to the Layout ====
+
+To add an Evas object to the layout:
+
+<code c>
+elm_object_part_content_set(ly, "elm.swallow.content", view);
+</code>
+
+''elm.swallow.content'' is the swallow part of the application layout, and with
+this call you integrate the view inside the swallow object of the layout.
+
+==== Using Layout Themes ====
+
+Layout container offers predefined themes that come with the default
+Elementary theme. These themes can be set with ''elm_layout_theme_set()'', and
+provide some basic functionality depending on the theme used.
+
+Most of them already send some signals, some already provide a toolbar or back
+and next buttons.
+
+These are the available predefined theme layouts. All of them have class =
+layout, group = application, and style = one of the following options:
+
+  * ''"toolbar-content"'' - for applications with a toolbar and main content 
area
+  * ''"toolbar-content-back"'' - for applications with a toolbar and main 
content (with a back button) and title areas
+  * ''"toolbar-content-back-next"'' - for applications with a toolbar and main 
content (with back and next buttons) and title areas
+  * ''"content-back"'' - for application with main content (with a back 
button) and title areas
+  * ''"content-back-next"'' - for applications with main content (with back 
and next buttons) and title areas
+  * ''"toolbar-vbox"'' - for applications with a toolbar and main content area 
as a vertical box
+  * ''"toolbar-table"'' - for applications with a toolbar and main content 
area as a table
+
+To set a theme:
+
+<code c>
+Evas_Object *ly;
+
+ly = elm_layout_add(parent);
+elm_layout_theme_set(ly, "layout", "application", "toolbar-content");
+</code>
+
+\\
+^Layout Examples^^^^
+|[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/layout_example_01.html|Content,
 Table and 
Box]]|[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/layout_example_02.html|Predefined
 
Layout]]|[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/layout_example_03.html|Signals
 and Size Changed ]]|[[https://build.enlightenment.org/job/nightly_elm_gc [...]
+
+----
+{{page>index}}
diff --git a/pages/program_guide/containers/mapbuf.txt 
b/pages/program_guide/containers/mapbuf.txt
new file mode 100644
index 0000000..966d2f8
--- /dev/null
+++ b/pages/program_guide/containers/mapbuf.txt
@@ -0,0 +1,89 @@
+~~Title: Mapbuf Container PG~~
+{{page>index}}
+----
+===== Mapbuf Container =====
+
+{{ :container_mapbuf_tree.png }}{{ :container_mapbuf.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.
+
+=== Table of Contents ===
+
+  * [[/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]]
+
+=== Related Info ===
+
+  * 
[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Mapbuf.html|Mapbuf
 Container API]]
+  * 
[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/mapbuf_example.html|A
 Mapbuf Example ]]
+
+==== Creating a Mapbuf ====
+
+To create a mapbuf widget, use the ''elm_mapbuf_add()'' function:
+
+<code c>
+Evas Object* mapbuf = elm_mapbuf_add(parent);
+</code>
+
+==== Adding Content to the Mapbuf ====
+
+To add content to the mapbuf widget, use the ''elm_object_content_set()'' 
function
+with the "default" part:
+
+<code c>
+elm_object_content_set(mapbuf, content);
+</code>
+
+<note>
+Calling ''elm_object_content_set(mapbuf, content)'' is equivalent to calling
+''elm_object_part_content_set(mapbuf, "default", content)''.
+</note>
+
+To activate smooth map rendering and alpha rendering for the mapbuf widget:
+
+<code c>
+elm_mapbuf_smooth_set(mapbuf, EINA_TRUE);
+elm_mapbuf_alpha_set(mapbuf, EINA_TRUE);
+</code>
+
+==== Activating the Mapbuf ====
+
+Finally, to use the mapbuf widget, you must activate it:
+
+<code c>
+elm_mapbuf_enabled_set (mapbuf, EINA_TRUE);
+</code>
+
+This enables the map that is set or disables it. On enable, the object
+geometry will be saved, and the new geometry will change (position and size)
+to reflect the map geometry set.
+
+Also, when enabled, alpha and smooth states will be used, so if the content
+isn't solid, alpha should be enabled, for example, otherwise a black rectangle
+will fill the content.
+
+When disabled, the stored map will be freed and geometry prior to enabling the
+map will be restored.
+
+It's disabled by default.
+
+==== Signals ====
+
+The mapbuf widget does not emit any signals and therefore does not provide any
+callbacks that you can register.
+
+\\
+//**__[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/mapbuf_example.html|A
 Mapbuf Example ]]__**//
+\\
+----
+{{page>index}}
diff --git a/pages/program_guide/containers/naviframe.txt 
b/pages/program_guide/containers/naviframe.txt
new file mode 100644
index 0000000..c489af0
--- /dev/null
+++ b/pages/program_guide/containers/naviframe.txt
@@ -0,0 +1,109 @@
+~~Title: Naviframe Container PG~~
+{{page>index}}
+----
+===== 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.
+
+=== Table of Contents ===
+
+  * [[/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|]]
+
+=== Related Info ===
+
+  * 
[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Naviframe.html|Naviframe
 Container API]]
+  * 
[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/naviframe_example_8c-example.html|A
 Naviframe  Example ]]
+
+==== Creating a Naviframe ====
+
+To create a naviframe, use the ''elm_naviframe_add()'' function:
+
+<code c>
+Evas_Object *nav = elm_naviframe_add(parent);;
+</code>
+
+==== Addind and Deleting Views ====
+
+The naviframe is a stack of views. A new view is always pushed to the top of
+the stack. The top-most view is deleted by popping it.
+
+To add a new view to the naviframe stack (and show it):
+
+<code c>
+Elm_Object_Item *nav_it = elm_naviframe_item_push(nav, title_label, 
prev_button, next_button, view, item_style);
+</code>
+
+^Parameters^^
+|''title_label''|The label in the title area. The name of the title label part 
is "elm.text.title"|
+|''prev_button''|The button to go to the previous item. If it is NULL, then 
naviframe will create a back button automatically. The name of the prev_btn 
part is "elm.swallow.prev_btn" |
+|''next_button''|The button to go to the next item. Or It could be just an 
extra function button. The name of the next_btn part is "elm.swallow.next_btn" |
+|''view''|The main content object. The name of content part is 
"elm.swallow.content" |
+|''item_style''|The current item style name. NULL would be default. |
+
+In fact, you can simply use ''elm_naviframe_item_push()'' with default
+parameters:
+
+<code c>
+Elm_Object_Item *nav_it = elm_naviframe_item_push(nav, NULL, NULL, NULL, view, 
NULL);
+</code>
+
+When you push a new view to the stack, you receive an ''Elm_Object_Item'' for 
the
+view. You can use this item to modify the view.
+
+The item pushed becomes one page of the naviframe, this item will be deleted
+when it is popped with ''elm_naviframe_item_pop()'':
+
+<code c>
+elm_naviframe_item_pop(nav);
+</code>
+
+==== Adding Fixed Content ====
+
+The naviframe can also display fixed content on top of the current (top-most)
+view. Use the ''elm_object_item_part_content_set()'' function to set this 
content.
+Use the following part names to specify the location of the content:
+
+  * ''"default"'' - The main content of the current page
+  * ''"icon"'' - An icon in the title area of the current page
+  * ''"prev_btn"'' - A button of the current page to go to the previous page
+  * ''"next_btn"'' - A button of the current page to go to the next page
+
+For example, to add a button to the naviframe:
+
+<code c>
+btn = elm_button_add(nav);
+elm_object_item_part_content_set(nav_it, "prev_btn", btn);
+</code>
+
+To set the title labels of the naviframe, use the
+''elm_object_item_part_text_set()'' function and specify one of the following
+label locations:
+
+  * ''"default"'': Sets the title label in the title area of the current view.
+  * ''"subtitle"'': Sets the subtitle label in the title area of the current 
view.
+
+==== Signals ====
+
+The naviframe emits the following signals:
+
+  * ''"transition,finished"'' - When the transition is finished in changing 
the item
+  * ''"title,transition,finished"'' - When the title area's transition is 
finished in changing the state of the title
+  * ''"title,clicked"'' - User clicked title area
+  * ''"focused"'' - When the naviframe has received focus. (since 1.8)
+  * ''"unfocused"'' - When the naviframe has lost focus. (since 1.8)
+  * ''"language,changed"'' - the program's language changed (since 1.9)
+
+\\
+//**__[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/naviframe_example_8c-example.html|A
 Naviframe  Example ]]__**//
+\\
+----
+{{page>index}}
diff --git a/pages/program_guide/containers/panes.txt 
b/pages/program_guide/containers/panes.txt
new file mode 100644
index 0000000..ac0655e
--- /dev/null
+++ b/pages/program_guide/containers/panes.txt
@@ -0,0 +1,70 @@
+~~Title: Panes Container PG~~
+{{page>index}}
+----
+===== 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.
+
+=== Table of Contents ===
+
+  * [[/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]]
+
+=== Related Info ===
+
+  * 
[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Panes.html|Panes
 Container API]]
+  * [[/tutorial/panes_tutorial|Panes Tutorial]]
+  * 
[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/panes_example.html|A
 Panes Example ]]
+
+==== Creating a Panes ====
+
+To create a panes widget, use the ''elm_panes_add()'' function:
+
+<code c>
+Evas_Object *panes = elm_panes_add(parent);
+</code>
+
+==== Adding Content to the Panes ====
+
+To add content to the panes, use the ''elm_object_part_content_set()'' 
function.
+The following code adds an object to the left pane:
+
+<code c>
+elm_object_part_content_set(panes, "left", obj);
+</code>
+
+Here, the Default content parts of the panes widget that you can use are:
+
+  * ''"left"'' - A leftside content of the panes
+  * ''"right"'' - A rightside content of the panes
+  * ''"top"'' - A top content of the vertical panes
+  * ''"bottom"'' - A bottom content of the vertical panes
+
+If panes are displayed vertically, left content will be displayed on top.
+
+==== Setting Panes Options ====
+
+To set the orientation of the panes, use the ''elm_panes_horizontal_set()''
+function.
+
+To set the size of the panes, use the ''elm_panes_content_left_size_set()'' and
+''elm_panes_content_right_size_set()'' functions.
+
+==== Signals ====
+
+The panes widget emits the following signals:
+
+  * ''"press"'': The panes widget has been pressed (but the press has not been 
released yet).
+  * ''"unpress"'': The press has been released.
+  * ''"clicked"'': The panes widget has been clicked.
+  * ''"clicked,double"'': The panes widget has been double-clicked.
+
+\\
+//**__[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/panes_example.html|A
 Panes Example ]]__**//
+\\
+----
+{{page>index}}
diff --git a/pages/program_guide/containers/scroller.txt 
b/pages/program_guide/containers/scroller.txt
new file mode 100644
index 0000000..8d96a2d
--- /dev/null
+++ b/pages/program_guide/containers/scroller.txt
@@ -0,0 +1,200 @@
+~~Title: Scroller Container PG~~
+{{page>index}}
+----
+===== 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
+[[/program_guide/container/layout|Layout Container]].
+
+=== Table of Contents ===
+
+  * [[/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]]
+
+=== Related Info ===
+
+  * 
[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Scroller.html|Scroller
 Container API]]
+  * 
[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_scroller.html|A
 Scroller Example]]
+
+===== Creating a Scroller =====
+
+To create a scroller, use the ''elm_scroller_add()'' function:
+
+<code c>
+Evas_Object *scroller = elm_scroller_add(parent);
+</code>
+
+==== Adding Objects to the Scoller ====
+
+To add an object to the scroller, use the ''elm_object_content_set()'' 
function:
+
+<code c>
+Evas_Object *image;
+
+image = elm_image_add(parent);
+elm_image_file_set(image, "image.png", NULL);
+evas_object_show(image);
+evas_object_size_hint_min_set(image, 2560, 1600);
+elm_object_content_set(scroller, image);
+</code>
+
+In the above code, we set a minimum size of 2560 x 1600 pixels for the image.
+The scroller is smaller than the image, so you can scroll across the image.
+
+If you want to be informed when the user begins scrolling the image, use the
+following code:
+
+<code c>
+evas_object_smart_callback_add(scroller, "scroll,drag,start",
+_scroll_start_cb, NULL);
+
+// Callback function for the "animate,begin" signal.
+// This callback is called when the user begins scrolling the image.
+void _scroll_start_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   printf("Scroll starts\n");
+}
+</code>
+
+==== Managing the Properties of the Scroll ====
+
+When scrolling content, the scroller may "bounce" when reaching the edge of
+the content. This is a visual way of indicating that there is no more content
+to scroll in that direction. Bounce is enabled by default for both axes. To
+enable or disable the bounce for either or both axes, use the
+elm_scroller_bounce_set() function. The following code disables the bounce for
+the horizontal axis and enables it for the vertical axis:
+
+<code c>
+elm_scroller_bounce_set(scroller, EINA_FALSE, EINA_TRUE);
+</code>
+
+The scroller can limit the scrolling to "pages". In this case, the scrolling
+occurs in page-sized chunks of content rather than in a purely continuous
+fashion, with the scroller displaying a single "page" at a time. This feature
+sets the size of the page relative to the viewport of the scroller. A size of
+1.0 equals 1 viewport (horizontally or vertically). A size of 0.0 disables
+paging for that axis. These settings are mutually exclusive with page size
+(see the ''elm_scroller_page_size_set()'' function). A size of 0.5 equals half 
a
+viewport. Usable size values are normally between 0.0 and 1.0, including 1.0.
+If you only want a single axis to scroll in pages, use 0.0 for the other axis.
+
+==== Signals ====
+
+The scroller emits the following signals, which you can catch in your
+application:
+
+  * ''"edge,left"'' - the left edge of the content has been reached
+  * ''"edge,right"'' - the right edge of the content has been reached
+  * ''"edge,top"'' - the top edge of the content has been reached
+  * ''"edge,bottom"'' - the bottom edge of the content has been reached
+  * ''"scroll"'' - the content has been scrolled (moved)
+  * ''"scroll,left"'' - the content has been scrolled (moved) leftwards
+  * ''"scroll,right"'' - the content has been scrolled (moved) rightwards
+  * ''"scroll,up"'' - the content has been scrolled (moved) upwards
+  * ''"scroll,down"'' - the content has been scrolled (moved) downwards
+  * ''"scroll,anim,start"'' - scrolling animation has started
+  * ''"scroll,anim,stop"'' - scrolling animation has stopped
+  * ''"scroll,drag,start"'' - dragging the contents around has started
+  * ''"scroll,drag,stop"'' - dragging the contents around has stopped
+  * ''"vbar,drag"'' - the vertical scroll bar has been dragged
+  * ''"vbar,press"'' - the vertical scroll bar has been pressed
+  * ''"vbar,unpress"'' - the vertical scroll bar has been unpressed
+  * ''"hbar,drag"'' - the horizontal scroll bar has been dragged
+  * ''"hbar,press"'' - the horizontal scroll bar has been pressed
+  * ''"hbar,unpress"'' - the horizontal scroll bar has been unpressed
+  * ''"scroll,page,changed"'' - the visible page has changed
+  * ''"focused"'' - When the scroller has received focus. (since 1.8)
+  * ''"unfocused"'' - When the scroller has lost focus. (since 1.8)
+
+
+==== Example ====
+
+A good example of the scroller is a picture slideshow: we add images to the
+scroller and limit the scrolling to pages (one picture at a time). In the
+following code, we disable the scroll bars for both axes, limit the scrolling
+to pages by using the ''elm_scroller_page_scroll_limit_set()'' function, and 
lock
+the scrolling on the Y axis by using the ''elm_object_scroll_lock_y_set()''
+function:
+
+<code c>
+elm_scroller_policy_set(scroller, ELM_SCROLLER_POLICY_OFF, 
ELM_SCROLLER_POLICY_OFF);
+elm_scroller_page_scroll_limit_set(scroller, 1, 0);
+elm_object_scroll_lock_y_set(scroller, EINA_TRUE);
+</code>
+
+We create a horizontal box, which will contain all the images, and which
+itself will be contained by the scroller:
+
+<code c>
+box = elm_box_add(scroller);
+elm_box_horizontal_set(box, EINA_TRUE);
+elm_object_content_set(scroller, box);
+evas_object_show(box);
+</code>
+
+We then create all the images and add them to the horizontal box:
+
+<code c>
+img = elm_image_add(scroller);
+snprintf(buf, sizeof(buf), IMAGE_DIR"/%d.jpg", i);
+elm_image_file_set(img, buf, NULL);
+evas_object_show(img);
+pages = eina_list_append(pages, img);
+elm_box_pack_end(box, img);
+</code>
+
+We store references to the images in an ''eina_list'' for easy retrieval later.
+
+Finally, we display the first page of the scroller:
+
+<code c>
+elm_scroller_page_show(scroller, 0, 0);
+</code>
+
+The size of the scroller depends on the size of the parent. When the parent
+changes, for example when the window is resized or rotated, the scroller is
+also resized. Since we need to be informed when the scroller is resized, we
+add a callback on the ''EVAS_CALLBACK_RESIZE'' event for the scroller:
+
+<code c>
+evas_object_event_callback_add(scroller, EVAS_CALLBACK_RESIZE, 
_scroller_resize_cb, NULL);
+</code>
+
+The callback retrieves the new size of the scroller by using the
+''evas_object_geometry_get()'' function on the object pointer. The pointer is
+relative to the object that has been resized, which in our case is the
+scroller itself. We can then iterate through the images of the scroller and
+set the minimum size to fit the scroller size:
+
+<code c>
+EINA_LIST_FOREACH(images, l, page)
+{
+   evas_object_size_hint_min_set(page, w, h);
+}
+</code>
+
+Finally, we set the page size of the scroller to match the scroller size and
+display the first page:
+
+<code c>
+elm_scroller_page_size_set(obj, w, h);
+elm_scroller_page_show(obj, 0, 0);
+</code>
+
+\\
+[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_scroller.html|A
 Scroller Example]]
+\\
+----
+{{page>index}}
diff --git a/pages/program_guide/containers/table.txt 
b/pages/program_guide/containers/table.txt
new file mode 100644
index 0000000..3d00db8
--- /dev/null
+++ b/pages/program_guide/containers/table.txt
@@ -0,0 +1,91 @@
+~~Title: Table Container PG~~
+{{page>index}}
+----
+===== 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).
+
+=== Table of Contents ===
+
+  * [[/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]]
+
+=== Related Info ===
+
+  * 
[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Table.html|Table
 Container API]]
+
+^Table Examples^^
+|//**__[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_table_01.html|A
 First Table Example ]]__**//| 
//**__[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_table_02.html|A
 Second Table Example ]]__**//|
+
+===== Creating a Table =====
+
+To create a table, use the ''elm_table_add()'' function:
+
+<code c>
+Evas_Object *table = elm_table_add(parent);
+</code>
+
+==== Adding Items to the Table ====
+
+Items are added to the table with the ''elm_table_pack()'' function. This 
function
+takes as parameters the table, the item to add to the table, and the position
+where to add the item: column, row, and the size of the item in number of rows
+and columns (colspan and rowspan). If we want to create an icon that takes 3
+columns and rows and a button that only takes 1 row and column, the code will
+look like this:
+
+<code c>
+ic = elm_icon_add(table);
+elm_image_file_set(ic, "icon.png", NULL);
+evas_object_show(ic);
+elm_table_pack(table, ic, 0, 0, 3, 3);
+
+btn = elm_button_add(table);
+elm_object_text_set(btn, "Click me i'm famous");
+evas_object_show(btn);
+elm_table_pack(table, btn, 3, 1, 1, 1);
+evas_object_show(table);
+</code>
+
+==== Managing the Items ====
+
+If you want to change the position of the item after adding it, use the
+''elm_table_pack_set()'' function. This function takes as parameters the item
+whose position to change, the new column, the new row, and the size of the
+item in number of rows and columns (colspan and rowspan).
+
+To add padding around the item, use the ''elm_table_padding_set()'' function. 
The
+second parameter is the padding between columns, and the third parameter is
+the padding between rows:
+
+<code c>
+elm_table_padding_set(table, 10, 10);
+</code>
+
+To change the alignment and size of an item, use the ''evas_object_size_hint''
+parameters. They are used in the same way as with boxes. You can set the same
+size and weight to each item by using the homogeneous parameter:
+
+<code c>
+elm_table_homogeneous_set(table, EINA_TRUE);
+</code>
+
+==== Clearing the Table ====
+
+To clear the table, use the ''elm_table_clear()'' function. If the clear
+parameter is ''EINA_TRUE'', the table items are deleted. The
+''evas_object_del()'' function will be called on each item.
+
+
+\\
+|//**__[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_table_01.html|A
 First Table Example ]]__**//| 
//**__[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_table_02.html|A
 Second Table Example ]]__**//|
+
+----
+{{page>index}}
diff --git a/pages/program_guide/containers_pg.txt 
b/pages/program_guide/containers_pg.txt
new file mode 100644
index 0000000..100ec7f
--- /dev/null
+++ b/pages/program_guide/containers_pg.txt
@@ -0,0 +1,219 @@
+~~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}}
diff --git a/pages/program_guide/index.txt b/pages/program_guide/index.txt
index 7851b4b..21c1ac7 100644
--- a/pages/program_guide/index.txt
+++ b/pages/program_guide/index.txt
@@ -1,3 +1,4 @@
 ++++Programming Guide Menu|
   * [[program_guide/basic_application_structure_pg|Basic Application structure 
PG]]
+  * [[program_guide/containers_pg|Container PG]]
 ++++
diff --git a/pages/tutorial/menu/basic_ui.txt b/pages/tutorial/menu/basic_ui.txt
index 0a35e08..b1bdc1e 100644
--- a/pages/tutorial/menu/basic_ui.txt
+++ b/pages/tutorial/menu/basic_ui.txt
@@ -7,7 +7,7 @@ The view container ''view/main'' is structured like this:
 {{ :view_main.png?direct |View main}}
 
 The naviframe contains and manages the boxes. For more information, see the
-[[/coming_soon|Container programming guide]]. This widget handle views. In
+[[/program_guide/containers_pg|Container programming guide]]. This widget 
handle views. In
 this example each view is contained in a box and the box is contained in the
 naviframe.
 

-- 


Reply via email to