[gnome-devel-docs/beginners: 5/12] GTK+ Python tutorial: page for grid
- From: Marta Maria Casetti <mmcasetti src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-devel-docs/beginners: 5/12] GTK+ Python tutorial: page for grid
- Date: Sat, 9 Mar 2013 21:46:55 +0000 (UTC)
commit 26c84ad89c17717c7d51c3f2109ea5d35c9a9f77
Author: Marta Maria Casetti <mmcasetti gmail com>
Date: Mon Mar 4 15:31:10 2013 +0000
GTK+ Python tutorial: page for grid
The page for grid is now OK - the exercises could be a bit more exciting.
beginners-docs/C/grid.py.page | 99 ++++++++++++++++++++++--------
beginners-docs/C/media/grid_example.png | Bin 0 -> 5110 bytes
beginners-docs/C/samples/grid.py | 10 +---
3 files changed, 73 insertions(+), 36 deletions(-)
---
diff --git a/beginners-docs/C/grid.py.page b/beginners-docs/C/grid.py.page
index 4eca655..606895c 100644
--- a/beginners-docs/C/grid.py.page
+++ b/beginners-docs/C/grid.py.page
@@ -3,12 +3,11 @@
xmlns:xi="http://www.w3.org/2001/XInclude"
type="guide" style="task"
id="grid.py">
+
<info>
<title type="text">Grid (Python)</title>
- <link type="guide" xref="beginner.py#layout"/>
- <link type="seealso" xref="label.py"/>
<link type="next" xref="separator.py"/>
- <revision version="0.2" date="2012-08-01" status="stub"/>
+ <revision version="0.3" date="2013-03-04" status="draft"/>
<credit type="author copyright">
<name>Tiffany Antopolski</name>
@@ -19,45 +18,91 @@
<credit type="author copyright">
<name>Marta Maria Casetti</name>
<email>mmcasetti gmail com</email>
- <years>2012</years>
+ <years>2012, 2013</years>
</credit>
<desc>Pack widgets in rows and columns</desc>
</info>
<title>Grid</title>
-
- <media type="image" mime="image/png" src="media/grid_simple.png"/>
- <p>Some labels in a grid.</p>
+
+ <synopsis><p>To pack more widgets inside the same windows we can use a grid.
+ </p></synopsis>
<links type="section" />
- <section id="code">
- <title>Code used to generate this example</title>
- <code mime="text/python" style="numbered"><xi:include href="samples/grid.py"
parse="text"><xi:fallback/></xi:include></code>
+ <section id="example">
+ <title>An example</title>
+
+ <p>you can pack three labels inside a grid, two on the first row and one in
+ the middle of the second row, with the following code:</p>
+
+ <code mime="text/python" style="numbered"><xi:include href="samples/grid.py"
parse="text"><xi:fallback/></xi:include></code>
+
+ <p>If you run the code, the result should be like the image below.</p>
+
+ <media type="image" mime="image/png" src="media/grid_example.png"/>
+
</section>
- <section id="methods">
- <title>Useful methods for a Grid widget</title>
+ <section id="in-depth">
+ <title>A more in-depth look</title>
- <list>
- <item><p>To attach a widget <code>child</code> in position <code>left, top</code> in a slot of given
<code>width, height</code> use <code>attach(child, top, left, width, height)</code>. If a widget
<code>sibling</code> is already in place, we can also use <code>attach_next_to(child, sibling, side, width,
height)</code>, where <code>side</code> is one of <code>Gtk.PositionType.LEFT, Gtk.PositionType.RIGHT,
Gtk.PositionType.TOP, Gtk.PositionType.BOTTOM</code>.</p></item>
- <item><p><code>insert_row(position)</code> and <code>insert_column(position)</code> do exactly what
they say; children which are attached at or below this position are moved one row down, and children which
span across this position are grown to span the new row. <code>insert_next_to(sibling, side)</code> inserts a
row or column at the specified position. The new row or column is placed next to <code>sibling</code>, on the
side determined by <code>side</code>; if side is <code>Gtk.PositionType.TOP</code> or
<code>Gtk.PositionType.BOTTOM</code>, a row is inserted, if side is <code>Gtk.PositionType.LEFT</code> or
<code>Gtk.PositionType.RIGHT</code>, a column is inserted.</p></item>
- <item><p><code>set_row_homogeneous(True)</code> and <code>set_column_homogeneous(True)</code> ensure
that (respectively) every row or every column has the same width or height.</p></item>
- <item><p><code>set_row_spacing(spacing)</code> and <code>set_column_spacing(spacing)</code> force a
spacing between (respectively) rows or columns. The value of <code>spacing</code> can be between
<code>0</code>, which is the default value, and <code>32767</code>.</p></item>
- </list>
+ <p>We create the grid inside the window (line 13), then we attach the widgets
+ to the grid (lines 16–18), and finally we attach the grid to the window
+ (line 20).</p>
+
+ <p>To attach a widget <code><var>child</var></code> in position
+ <code><var>left</var>, <var>top</var></code> in a slot of given
+ <code><var>width</var>, <var>height</var></code> use
+ <code>attach(<var>child</var>, <var>top</var>, <var>left</var>, <var>width</var>,
<var>height</var>)</code>.
+ If a widget <code><var>sibling</var></code> is already in place, we can also
+ use
+ <code>attach_next_to(<var>child</var>, <var>sibling</var>, <var>side</var>, <var>width</var>,
<var>height</var>)</code>,
+ where <code><var>side</var></code> is one of <code>Gtk.PositionType.LEFT</code>,
+ <code>Gtk.PositionType.RIGHT</code>, <code>Gtk.PositionType.TOP</code>,
<code>Gtk.PositionType.BOTTOM</code>.</p>
+
+ <p>The methods <code>set_row_spacing(<var>spacing</var>)</code> and
+ <code>set_column_spacing(<var>spacing</var>)</code> (used in line 14) force a
+ spacing between (respectively) rows or columns. The value of
+ <code><var>spacing</var></code> can be between <code>0</code>, which is the
+ default value, and <code>32767</code>.</p>
+
+ <p><code>set_row_homogeneous(True)</code> and
+ <code>set_column_homogeneous(True)</code> are used to ensure that every row or
+ every column (respectively) has the same width or height.</p>
+
+ <p><code>insert_row(<var>position</var>)</code> and
+ <code>insert_column(<var>position</var>)</code> ensure that children which are
+ attached at or below this position are moved one row down, and children which
+ span across this position are grown to span the new row. Analogously,
+ <code>insert_next_to(<var>sibling</var>, <var>side</var>)</code> inserts a row
+ or column at the specified position. The new row or column is placed next to
+ <code><var>sibling</var></code>, on the side determined by
+ <code><var>side</var></code>; if side is <code>Gtk.PositionType.TOP</code> or
+ <code>Gtk.PositionType.BOTTOM</code>, a row is inserted, if side is
+ <code>Gtk.PositionType.LEFT</code> or <code>Gtk.PositionType.RIGHT</code>,
+ a column is inserted.</p>
</section>
+ <section id="exercises">
+ <title>Exercises</title>
+
+ <p>Insert a column between the two labels in the first row.</p>
+
+ <p>Write another example on the model of the one you have seen above.</p>
+
+ </section>
+
<section id="references">
- <title>API References</title>
- <p>In this sample we used the following:</p>
- <list>
- <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkApplication.html">GtkApplication</link></p></item>
- <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkApplicationWindow.html">GtkApplicationWindow</link></p></item>
- <item><p><link href="http://developer.gnome.org/gtk3/unstable/GtkLabel.html">GtkLabel</link></p></item>
- <item><p><link href="http://developer.gnome.org/gtk3/unstable/GtkImage.html">GtkImage</link></p></item>
- <item><p><link href="http://developer.gnome.org/gtk3/unstable/GtkGrid.html">GtkGrid</link></p></item>
- </list>
+ <title>API References</title>
+ <p>In this sample we used the following:</p>
+ <list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkApplication.html">GtkApplication</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkApplicationWindow.html">GtkApplicationWindow</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/unstable/GtkLabel.html">GtkLabel</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/unstable/GtkGrid.html">GtkGrid</link></p></item>
+ </list>
</section>
</page>
diff --git a/beginners-docs/C/media/grid_example.png b/beginners-docs/C/media/grid_example.png
new file mode 100644
index 0000000..27f12f8
Binary files /dev/null and b/beginners-docs/C/media/grid_example.png differ
diff --git a/beginners-docs/C/samples/grid.py b/beginners-docs/C/samples/grid.py
index 70a7217..755a94d 100644
--- a/beginners-docs/C/samples/grid.py
+++ b/beginners-docs/C/samples/grid.py
@@ -4,27 +4,19 @@ import sys
class MyWindow(Gtk.ApplicationWindow):
def __init__(self, app):
Gtk.Window.__init__(self, title="Grid Example", application=app)
+ self.set_border_width(5)
- # three labels
label_top_left = Gtk.Label(label="This is Top Left")
label_top_right = Gtk.Label(label="This is Top Right")
label_bottom = Gtk.Label(label="This is Bottom")
- # a grid
grid = Gtk.Grid()
-
- # some space between the columns of the grid
grid.set_column_spacing(20)
- # in the grid:
- # attach the first label in the top left corner
grid.attach(label_top_left, 0, 0, 1, 1)
- # attach the second label
grid.attach(label_top_right, 1, 0, 1, 1)
- # attach the third label below the first label
grid.attach_next_to(label_bottom, label_top_left, Gtk.PositionType.BOTTOM, 2, 1)
- # add the grid to the window
self.add(grid)
class MyApplication(Gtk.Application):
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]