[gnome-devel-docs/beginners: 1/12] New directory for beginners tutorials
- From: Marta Maria Casetti <mmcasetti src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-devel-docs/beginners: 1/12] New directory for beginners tutorials
- Date: Sat, 9 Mar 2013 21:46:35 +0000 (UTC)
commit c809d8ad4b35681a3e73df50367f76ac18e149f2
Author: Marta Maria Casetti <mmcasetti gmail com>
Date: Mon Mar 4 07:43:15 2013 +0000
New directory for beginners tutorials
New directory for beginners tutorials, to be written starting from the
platform-demos examples and GTK+ tutorials.
I have also renamed the pages beginner.<language>.page as gtk-beginner.
<language>.page - except for python, where the starting point of the tutorial
was tutorial.py.page. The latter page has been rewritten, dividing the tutorial
into sections that can be browsed more easily.
I have started rewriting the GTK+ tutorial for Python. window.py.page is
complete; the pages for GtkApplicationWindow and image are in progress. The
rest is to be done.
beginners-docs/C/02_welcome_to_the_grid.js.page | 279 ++++++++++++++
beginners-docs/C/03_getting_the_signal.js.page | 376 ++++++++++++++++++
beginners-docs/C/GtkApplicationWindow.c.page | 33 ++
beginners-docs/C/GtkApplicationWindow.js.page | 33 ++
beginners-docs/C/GtkApplicationWindow.py.page | 73 ++++
beginners-docs/C/GtkApplicationWindow.vala.page | 33 ++
beginners-docs/C/about-dialog.vala.page | 21 +
beginners-docs/C/aboutdialog.c.page | 40 ++
beginners-docs/C/aboutdialog.js.page | 34 ++
beginners-docs/C/aboutdialog.py.page | 51 +++
beginners-docs/C/aboutdialog.vala.page | 42 ++
beginners-docs/C/audio-player.vala.page | 20 +
beginners-docs/C/beginner.py.page | 66 ++++
beginners-docs/C/bug-filing.page | 46 +++
beginners-docs/C/button.c.page | 38 ++
beginners-docs/C/button.js.page | 34 ++
beginners-docs/C/button.py.page | 58 +++
beginners-docs/C/button.vala.page | 32 ++
beginners-docs/C/buttonbox.py.page | 55 +++
beginners-docs/C/c.page | 32 ++
beginners-docs/C/checkbutton.c.page | 31 ++
beginners-docs/C/checkbutton.js.page | 142 +++++++
beginners-docs/C/checkbutton.py.page | 50 +++
beginners-docs/C/checkbutton.vala.page | 31 ++
beginners-docs/C/colorbutton.py.page | 47 +++
beginners-docs/C/colorbutton.vala.page | 34 ++
beginners-docs/C/combobox.js.page | 247 ++++++++++++
beginners-docs/C/combobox.py.page | 51 +++
beginners-docs/C/combobox.vala.page | 34 ++
beginners-docs/C/combobox_multicolumn.py.page | 51 +++
beginners-docs/C/comboboxtext.js.page | 186 +++++++++
beginners-docs/C/cpp.page | 31 ++
beginners-docs/C/dialog.c.page | 38 ++
beginners-docs/C/dialog.js.page | 33 ++
beginners-docs/C/dialog.py.page | 54 +++
beginners-docs/C/dialog.vala.page | 37 ++
beginners-docs/C/documentation.page | 27 ++
beginners-docs/C/entry.c.page | 35 ++
beginners-docs/C/entry.js.page | 34 ++
beginners-docs/C/entry.py.page | 66 ++++
beginners-docs/C/entry.vala.page | 31 ++
beginners-docs/C/error-handling.vala.page | 19 +
beginners-docs/C/exercises/menubar.vala.exercises | 4 +
beginners-docs/C/filechooserdialog.py.page | 83 ++++
beginners-docs/C/filechooserdialog.vala.page | 45 +++
beginners-docs/C/fontchooserwidget.py.page | 49 +++
beginners-docs/C/getting-ready.page | 71 ++++
beginners-docs/C/gmenu.c.page | 34 ++
beginners-docs/C/gmenu.js.page | 32 ++
beginners-docs/C/gmenu.py.page | 85 ++++
beginners-docs/C/gmenu.vala.page | 48 +++
beginners-docs/C/grid.c.page | 37 ++
beginners-docs/C/grid.js.page | 39 ++
beginners-docs/C/grid.py.page | 63 +++
beginners-docs/C/grid.vala.page | 33 ++
beginners-docs/C/grid_with_entry.js.page | 66 ++++
beginners-docs/C/gtk-beginner.c.page | 105 +++++
beginners-docs/C/gtk-beginner.js.page | 90 +++++
beginners-docs/C/gtk-beginner.py.page | 176 +++++++++
beginners-docs/C/gtk-beginner.vala.page | 94 +++++
beginners-docs/C/hello-world.vala.page | 22 +
beginners-docs/C/helloWorld.js.page | 182 +++++++++
beginners-docs/C/hellognome.js.page | 196 ++++++++++
beginners-docs/C/help.vala.page | 20 +
beginners-docs/C/image.c.page | 36 ++
beginners-docs/C/image.js.page | 35 ++
beginners-docs/C/image.py.page | 119 ++++++
beginners-docs/C/image.vala.page | 35 ++
beginners-docs/C/index.page | 47 +++
beginners-docs/C/js.page | 37 ++
beginners-docs/C/label.c.page | 40 ++
beginners-docs/C/label.js.page | 33 ++
beginners-docs/C/label.py.page | 93 +++++
beginners-docs/C/label.vala.page | 34 ++
beginners-docs/C/license.page | 63 +++
beginners-docs/C/linkbutton.c.page | 35 ++
beginners-docs/C/linkbutton.js.page | 33 ++
beginners-docs/C/linkbutton.py.page | 50 +++
beginners-docs/C/linkbutton.vala.page | 31 ++
beginners-docs/C/media/02_jsgrid_01.png | Bin 0 -> 41051 bytes
beginners-docs/C/media/02_jsgrid_02.png | Bin 0 -> 40900 bytes
beginners-docs/C/media/02_jsgrid_03.png | Bin 0 -> 42873 bytes
beginners-docs/C/media/02_jsgrid_04.png | Bin 0 -> 42557 bytes
beginners-docs/C/media/02_jsgrid_05.png | Bin 0 -> 42805 bytes
beginners-docs/C/media/02_jsgrid_06.png | Bin 0 -> 43001 bytes
beginners-docs/C/media/02_jsgrid_07.png | Bin 0 -> 42629 bytes
beginners-docs/C/media/02_jsgrid_08.png | Bin 0 -> 41917 bytes
beginners-docs/C/media/03_jssignal_01.png | Bin 0 -> 9260 bytes
beginners-docs/C/media/03_jssignal_02.png | Bin 0 -> 11742 bytes
beginners-docs/C/media/03_jssignal_03.png | Bin 0 -> 13416 bytes
beginners-docs/C/media/03_jssignal_04.png | Bin 0 -> 8932 bytes
beginners-docs/C/media/aboutdialog_GMenu.png | Bin 0 -> 15084 bytes
beginners-docs/C/media/button.png | Bin 0 -> 5789 bytes
beginners-docs/C/media/buttonbox_calculator.png | Bin 0 -> 10002 bytes
beginners-docs/C/media/checkbutton.png | Bin 0 -> 6085 bytes
beginners-docs/C/media/colorbutton.png | Bin 0 -> 3866 bytes
beginners-docs/C/media/combobox.png | Bin 0 -> 11983 bytes
beginners-docs/C/media/combobox_multicolumn.png | Bin 0 -> 7387 bytes
beginners-docs/C/media/dialog.png | Bin 0 -> 3533 bytes
beginners-docs/C/media/entry.png | Bin 0 -> 4450 bytes
beginners-docs/C/media/fedora.png | Bin 0 -> 5996 bytes
beginners-docs/C/media/filechooserdialog_menu.png | Bin 0 -> 547357 bytes
beginners-docs/C/media/filechooserdialog_save.png | Bin 0 -> 59759 bytes
beginners-docs/C/media/fontchooserwidget.png | Bin 0 -> 44176 bytes
beginners-docs/C/media/gediteditor.png | Bin 0 -> 34835 bytes
beginners-docs/C/media/geditview.png | Bin 0 -> 36381 bytes
beginners-docs/C/media/glade_select_toolbar.png | Bin 0 -> 6380 bytes
beginners-docs/C/media/glade_toolbar_common.png | Bin 0 -> 25373 bytes
beginners-docs/C/media/glade_toolbar_edit.png | Bin 0 -> 43253 bytes
beginners-docs/C/media/glade_toolbar_editor.png | Bin 0 -> 64592 bytes
beginners-docs/C/media/glade_toolbar_general.png | Bin 0 -> 19685 bytes
beginners-docs/C/media/glade_ui.png | Bin 0 -> 47789 bytes
beginners-docs/C/media/glade_visible_no.png | Bin 0 -> 47639 bytes
beginners-docs/C/media/gmenu.c.png | Bin 0 -> 21338 bytes
beginners-docs/C/media/gmenu.js.png | Bin 0 -> 20730 bytes
beginners-docs/C/media/gmenu.py.png | Bin 0 -> 29950 bytes
beginners-docs/C/media/gmenu.vala.png | Bin 0 -> 20672 bytes
beginners-docs/C/media/gnome-devtools.catalog | 17 +
beginners-docs/C/media/gnome-image.png | Bin 0 -> 33988 bytes
beginners-docs/C/media/grid.png | Bin 0 -> 5964 bytes
beginners-docs/C/media/grid_simple.png | Bin 0 -> 3809 bytes
beginners-docs/C/media/grid_with_entry.png | Bin 0 -> 10420 bytes
beginners-docs/C/media/guitar-tuner-glade.png | Bin 0 -> 4481 bytes
beginners-docs/C/media/guitar-tuner-pipeline.png | Bin 0 -> 11717 bytes
beginners-docs/C/media/guitar-tuner-pipeline.svg | 239 ++++++++++++
beginners-docs/C/media/guitar-tuner.png | Bin 0 -> 10344 bytes
beginners-docs/C/media/hello-world-label.png | Bin 0 -> 5857 bytes
beginners-docs/C/media/helloWorld.png | Bin 0 -> 4817 bytes
beginners-docs/C/media/hellognomewebapp.png | Bin 0 -> 8950 bytes
beginners-docs/C/media/image-viewer.png | Bin 0 -> 56153 bytes
beginners-docs/C/media/image.png | Bin 0 -> 39988 bytes
beginners-docs/C/media/label.png | Bin 0 -> 5557 bytes
beginners-docs/C/media/linkbutton.png | Bin 0 -> 4296 bytes
beginners-docs/C/media/magic-mirror.png | Bin 0 -> 336569 bytes
beginners-docs/C/media/menubar.png | Bin 0 -> 6009 bytes
beginners-docs/C/media/menubar_choices.png | Bin 0 -> 16509 bytes
beginners-docs/C/media/menubutton.png | Bin 0 -> 13213 bytes
beginners-docs/C/media/message-board.ogv | Bin 0 -> 347904 bytes
beginners-docs/C/media/messagedialog.png | Bin 0 -> 8108 bytes
beginners-docs/C/media/opensuse.png | Bin 0 -> 7776 bytes
beginners-docs/C/media/paned.png | Bin 0 -> 63597 bytes
beginners-docs/C/media/photo-wall-focused.png | Bin 0 -> 904201 bytes
beginners-docs/C/media/photo-wall.png | Bin 0 -> 1062772 bytes
beginners-docs/C/media/progressbar.ogv | Bin 0 -> 35084 bytes
beginners-docs/C/media/progressbar_fill.ogv | Bin 0 -> 19513 bytes
beginners-docs/C/media/radiobutton.png | Bin 0 -> 6854 bytes
beginners-docs/C/media/radiobuttontravel.png | Bin 0 -> 19390 bytes
beginners-docs/C/media/record-collection.png | Bin 0 -> 19992 bytes
beginners-docs/C/media/scale.png | Bin 0 -> 8341 bytes
beginners-docs/C/media/scale2.png | Bin 0 -> 7897 bytes
beginners-docs/C/media/scalepenguins.png | Bin 0 -> 9302 bytes
beginners-docs/C/media/scrolledwindow.png | Bin 0 -> 28978 bytes
beginners-docs/C/media/separator.png | Bin 0 -> 6198 bytes
beginners-docs/C/media/spinbutton.png | Bin 0 -> 5222 bytes
beginners-docs/C/media/spinbuttonkittens.png | Bin 0 -> 8964 bytes
beginners-docs/C/media/spinner.png | Bin 0 -> 9282 bytes
beginners-docs/C/media/statusbar.png | Bin 0 -> 8642 bytes
beginners-docs/C/media/statusbar2.png | Bin 0 -> 8498 bytes
beginners-docs/C/media/statusbar3.png | Bin 0 -> 6033 bytes
beginners-docs/C/media/switch_off.png | Bin 0 -> 3005 bytes
beginners-docs/C/media/switch_on.png | Bin 0 -> 5450 bytes
beginners-docs/C/media/switchanimals.png | Bin 0 -> 400231 bytes
beginners-docs/C/media/textview.png | Bin 0 -> 15364 bytes
beginners-docs/C/media/textviewpenguinchat.png | Bin 0 -> 13307 bytes
beginners-docs/C/media/togglebutton.png | Bin 0 -> 14667 bytes
beginners-docs/C/media/toolbar.png | Bin 0 -> 6664 bytes
beginners-docs/C/media/tooltip.png | Bin 0 -> 176834 bytes
.../C/media/treeview_advanced_liststore.png | Bin 0 -> 16193 bytes
.../C/media/treeview_cellrenderertoggle.png | Bin 0 -> 12737 bytes
.../C/media/treeview_simple_liststore.png | Bin 0 -> 21063 bytes
.../C/media/treeview_simple_liststore_penguins.png | Bin 0 -> 22753 bytes
beginners-docs/C/media/treeview_treestore.png | Bin 0 -> 10568 bytes
beginners-docs/C/media/ubuntu.png | Bin 0 -> 5725 bytes
beginners-docs/C/media/weatherAppJs.png | Bin 0 -> 18008 bytes
beginners-docs/C/media/widget_drawing.png | Bin 0 -> 10656 bytes
beginners-docs/C/media/window.png | Bin 0 -> 4502 bytes
beginners-docs/C/menubar.c.page | 42 ++
beginners-docs/C/menubar.py.page | 189 +++++++++
beginners-docs/C/menubar.vala.page | 200 ++++++++++
beginners-docs/C/menubutton.js.page | 34 ++
beginners-docs/C/menubutton.py.page | 58 +++
beginners-docs/C/menubutton.vala.page | 34 ++
beginners-docs/C/menus.vala.page | 20 +
beginners-docs/C/message-board.c.page | 406 ++++++++++++++++++++
beginners-docs/C/messagedialog.c.page | 44 +++
beginners-docs/C/messagedialog.js.page | 200 ++++++++++
beginners-docs/C/messagedialog.py.page | 67 ++++
beginners-docs/C/messagedialog.vala.page | 36 ++
beginners-docs/C/model-view-controller.py.page | 195 ++++++++++
beginners-docs/C/paned.py.page | 46 +++
beginners-docs/C/part-1.vala.page | 121 ++++++
beginners-docs/C/part-2.vala.page | 22 +
beginners-docs/C/part-3.vala.page | 22 +
beginners-docs/C/part-4.vala.page | 22 +
beginners-docs/C/part-5.vala.page | 22 +
beginners-docs/C/part-6.vala.page | 21 +
beginners-docs/C/photo-wall.c.page | 403 +++++++++++++++++++
beginners-docs/C/progressbar.c.page | 37 ++
beginners-docs/C/progressbar.js.page | 43 ++
beginners-docs/C/progressbar.py.page | 61 +++
beginners-docs/C/progressbar.vala.page | 32 ++
beginners-docs/C/properties.py.page | 55 +++
beginners-docs/C/py.page | 31 ++
beginners-docs/C/radiobutton.c.page | 40 ++
beginners-docs/C/radiobutton.js.page | 283 ++++++++++++++
beginners-docs/C/radiobutton.py.page | 53 +++
beginners-docs/C/radiobutton.vala.page | 34 ++
beginners-docs/C/record-collection.js.page | 299 ++++++++++++++
beginners-docs/C/response-type.page | 64 +++
beginners-docs/C/samples/02_welcome_to_the_grid.js | 86 ++++
.../C/samples/03_getting_the_signal_01.js | 86 ++++
.../C/samples/03_getting_the_signal_02.js | 109 ++++++
.../C/samples/03_getting_the_signal_03.js | 110 ++++++
.../C/samples/03_getting_the_signal_04.js | 97 +++++
beginners-docs/C/samples/GtkApplicationWindow.c | 25 ++
beginners-docs/C/samples/GtkApplicationWindow.js | 49 +++
beginners-docs/C/samples/GtkApplicationWindow.py | 34 ++
beginners-docs/C/samples/GtkApplicationWindow.vala | 15 +
beginners-docs/C/samples/aboutdialog.c | 166 ++++++++
beginners-docs/C/samples/aboutdialog.js | 102 +++++
beginners-docs/C/samples/aboutdialog.py | 80 ++++
beginners-docs/C/samples/aboutdialog.vala | 65 ++++
beginners-docs/C/samples/button.c | 63 +++
beginners-docs/C/samples/button.js | 63 +++
beginners-docs/C/samples/button.py | 37 ++
beginners-docs/C/samples/button.vala | 42 ++
beginners-docs/C/samples/buttonbox.py | 142 +++++++
beginners-docs/C/samples/checkbutton.c | 46 +++
beginners-docs/C/samples/checkbutton.js | 76 ++++
beginners-docs/C/samples/checkbutton.py | 47 +++
beginners-docs/C/samples/checkbutton.vala | 52 +++
beginners-docs/C/samples/colorbutton.py | 52 +++
beginners-docs/C/samples/colorbutton.vala | 39 ++
beginners-docs/C/samples/combobox.js | 136 +++++++
beginners-docs/C/samples/combobox.py | 60 +++
beginners-docs/C/samples/combobox.vala | 79 ++++
beginners-docs/C/samples/combobox_multicolumn.py | 71 ++++
beginners-docs/C/samples/comboboxtext.js | 104 +++++
beginners-docs/C/samples/dialog.c | 100 +++++
beginners-docs/C/samples/dialog.js | 87 +++++
beginners-docs/C/samples/dialog.py | 58 +++
beginners-docs/C/samples/dialog.vala | 77 ++++
beginners-docs/C/samples/entry.c | 59 +++
beginners-docs/C/samples/entry.js | 86 ++++
beginners-docs/C/samples/entry.py | 39 ++
beginners-docs/C/samples/entry.vala | 51 +++
beginners-docs/C/samples/filechooserdialog.py | 209 ++++++++++
beginners-docs/C/samples/filechooserdialog.ui | 31 ++
beginners-docs/C/samples/filechooserdialog.vala | 196 ++++++++++
beginners-docs/C/samples/fontchooserwidget.py | 39 ++
beginners-docs/C/samples/fruitbat.png | Bin 0 -> 122141 bytes
beginners-docs/C/samples/future.vala | 48 +++
beginners-docs/C/samples/gentoopenguin.png | Bin 0 -> 82475 bytes
beginners-docs/C/samples/gmenu.c | 67 ++++
beginners-docs/C/samples/gmenu.js | 89 +++++
beginners-docs/C/samples/gmenu.py | 62 +++
beginners-docs/C/samples/gmenu.vala | 60 +++
beginners-docs/C/samples/gnome-image.png | Bin 0 -> 33988 bytes
beginners-docs/C/samples/grid.c | 68 ++++
beginners-docs/C/samples/grid.js | 72 ++++
beginners-docs/C/samples/grid.py | 40 ++
beginners-docs/C/samples/grid.vala | 40 ++
beginners-docs/C/samples/hello-in-C/Makefile.am | 10 +
beginners-docs/C/samples/hello-in-C/autogen.sh | 18 +
beginners-docs/C/samples/hello-in-C/configure.ac | 9 +
beginners-docs/C/samples/hello-in-C/hello-world.c | 34 ++
.../C/samples/hello-in-C/hello-world.desktop.in | 11 +
.../C/samples/hello-in-python/Makefile.am | 11 +
beginners-docs/C/samples/hello-in-python/README | 36 ++
.../C/samples/hello-in-python/autogen.sh | 18 +
.../C/samples/hello-in-python/configure.ac | 5 +
.../samples/hello-in-python/hello-world.desktop.in | 11 +
.../C/samples/hello-in-python/hello-world.py | 30 ++
beginners-docs/C/samples/hello-in-vala/Makefile.am | 11 +
beginners-docs/C/samples/hello-in-vala/autogen.sh | 18 +
.../C/samples/hello-in-vala/configure.ac | 9 +
.../C/samples/hello-in-vala/hello-world.desktop.in | 11 +
.../C/samples/hello-in-vala/hello-world.vala | 14 +
beginners-docs/C/samples/helloWorld.js | 42 ++
beginners-docs/C/samples/helloWorld/Makefile.am | 11 +
beginners-docs/C/samples/helloWorld/README | 36 ++
beginners-docs/C/samples/helloWorld/autogen.sh | 18 +
beginners-docs/C/samples/helloWorld/configure.ac | 5 +
beginners-docs/C/samples/helloWorld/helloWorld | 42 ++
.../C/samples/helloWorld/helloWorld.desktop.in | 11 +
beginners-docs/C/samples/hellognome.html | 28 ++
beginners-docs/C/samples/hellognome.js | 59 +++
beginners-docs/C/samples/image.c | 37 ++
beginners-docs/C/samples/image.js | 60 +++
beginners-docs/C/samples/image.py | 31 ++
beginners-docs/C/samples/image.vala | 24 ++
beginners-docs/C/samples/label.c | 43 ++
beginners-docs/C/samples/label.js | 60 +++
beginners-docs/C/samples/label.py | 30 ++
beginners-docs/C/samples/label.vala | 25 ++
beginners-docs/C/samples/linkbutton.c | 35 ++
beginners-docs/C/samples/linkbutton.js | 55 +++
beginners-docs/C/samples/linkbutton.py | 31 ++
beginners-docs/C/samples/linkbutton.vala | 21 +
beginners-docs/C/samples/menubar.c | 312 +++++++++++++++
beginners-docs/C/samples/menubar.py | 159 ++++++++
beginners-docs/C/samples/menubar.ui | 103 +++++
beginners-docs/C/samples/menubar.vala | 99 +++++
beginners-docs/C/samples/menubar_basis.py | 35 ++
beginners-docs/C/samples/menubar_basis.ui | 17 +
beginners-docs/C/samples/menubar_basis.vala | 33 ++
beginners-docs/C/samples/menubutton.js | 106 +++++
beginners-docs/C/samples/menubutton.py | 72 ++++
beginners-docs/C/samples/menubutton.vala | 65 ++++
beginners-docs/C/samples/messagedialog.c | 170 ++++++++
beginners-docs/C/samples/messagedialog.js | 122 ++++++
beginners-docs/C/samples/messagedialog.py | 80 ++++
beginners-docs/C/samples/messagedialog.vala | 71 ++++
beginners-docs/C/samples/muteswan.png | Bin 0 -> 93018 bytes
beginners-docs/C/samples/paned.py | 40 ++
beginners-docs/C/samples/progressbar.c | 69 ++++
beginners-docs/C/samples/progressbar.js | 81 ++++
beginners-docs/C/samples/progressbar.py | 56 +++
beginners-docs/C/samples/progressbar.vala | 36 ++
beginners-docs/C/samples/radiobutton.c | 97 +++++
beginners-docs/C/samples/radiobutton.js | 188 +++++++++
beginners-docs/C/samples/radiobutton.py | 70 ++++
beginners-docs/C/samples/radiobutton.vala | 63 +++
beginners-docs/C/samples/redfox.png | Bin 0 -> 128263 bytes
beginners-docs/C/samples/scale.c | 156 ++++++++
beginners-docs/C/samples/scale.js | 128 ++++++
beginners-docs/C/samples/scale.py | 71 ++++
beginners-docs/C/samples/scale.vala | 52 +++
beginners-docs/C/samples/scrolledwindow.c | 57 +++
beginners-docs/C/samples/scrolledwindow.py | 38 ++
beginners-docs/C/samples/scrolledwindow.vala | 23 ++
beginners-docs/C/samples/separator.py | 44 +++
beginners-docs/C/samples/spinbutton.c | 94 +++++
beginners-docs/C/samples/spinbutton.js | 113 ++++++
beginners-docs/C/samples/spinbutton.py | 53 +++
beginners-docs/C/samples/spinbutton.vala | 35 ++
beginners-docs/C/samples/spinner.c | 88 +++++
beginners-docs/C/samples/spinner.js | 80 ++++
beginners-docs/C/samples/spinner.py | 50 +++
beginners-docs/C/samples/spinner.vala | 51 +++
beginners-docs/C/samples/statusbar.c | 101 +++++
beginners-docs/C/samples/statusbar.js | 150 +++++++
beginners-docs/C/samples/statusbar.py | 68 ++++
beginners-docs/C/samples/statusbar.vala | 62 +++
beginners-docs/C/samples/switch.c | 77 ++++
beginners-docs/C/samples/switch.js | 179 +++++++++
beginners-docs/C/samples/switch.py | 56 +++
beginners-docs/C/samples/switch.vala | 46 +++
beginners-docs/C/samples/textview.c | 71 ++++
beginners-docs/C/samples/textview.js | 154 ++++++++
beginners-docs/C/samples/textview.py | 41 ++
beginners-docs/C/samples/textview.vala | 33 ++
beginners-docs/C/samples/togglebutton.c | 78 ++++
beginners-docs/C/samples/togglebutton.js | 82 ++++
beginners-docs/C/samples/togglebutton.py | 56 +++
beginners-docs/C/samples/togglebutton.vala | 55 +++
beginners-docs/C/samples/toolbar.c | 222 +++++++++++
beginners-docs/C/samples/toolbar.js | 171 ++++++++
beginners-docs/C/samples/toolbar.py | 132 +++++++
beginners-docs/C/samples/toolbar.vala | 132 +++++++
beginners-docs/C/samples/toolbar_builder.py | 100 +++++
beginners-docs/C/samples/toolbar_builder.ui | 94 +++++
beginners-docs/C/samples/toolbar_builder.vala | 103 +++++
beginners-docs/C/samples/tooltip.py | 120 ++++++
.../C/samples/treeview_advanced_liststore.py | 129 +++++++
.../C/samples/treeview_cellrenderertoggle.py | 101 +++++
.../C/samples/treeview_simple_liststore.js | 151 ++++++++
.../C/samples/treeview_simple_liststore.py | 79 ++++
.../C/samples/treeview_simple_liststore.vala | 125 ++++++
beginners-docs/C/samples/treeview_treestore.py | 59 +++
beginners-docs/C/samples/tux.png | Bin 0 -> 21644 bytes
beginners-docs/C/samples/widget_drawing.py | 83 ++++
beginners-docs/C/samples/window.c | 28 ++
beginners-docs/C/samples/window.js | 42 ++
beginners-docs/C/samples/window.py | 20 +
beginners-docs/C/samples/window.vala | 37 ++
beginners-docs/C/scale.c.page | 40 ++
beginners-docs/C/scale.js.page | 217 +++++++++++
beginners-docs/C/scale.py.page | 61 +++
beginners-docs/C/scale.vala.page | 36 ++
beginners-docs/C/scrolledwindow.c.page | 38 ++
beginners-docs/C/scrolledwindow.py.page | 49 +++
beginners-docs/C/scrolledwindow.vala.page | 33 ++
beginners-docs/C/separator.py.page | 45 +++
beginners-docs/C/set-up-gedit.js.page | 46 +++
beginners-docs/C/signals-callbacks.py.page | 51 +++
beginners-docs/C/signals-callbacks.vala.page | 20 +
beginners-docs/C/spinbutton.c.page | 41 ++
beginners-docs/C/spinbutton.js.page | 208 ++++++++++
beginners-docs/C/spinbutton.py.page | 52 +++
beginners-docs/C/spinbutton.vala.page | 33 ++
beginners-docs/C/spinner.c.page | 37 ++
beginners-docs/C/spinner.js.page | 34 ++
beginners-docs/C/spinner.py.page | 45 +++
beginners-docs/C/spinner.vala.page | 33 ++
beginners-docs/C/statusbar.c.page | 41 ++
beginners-docs/C/statusbar.js.page | 230 +++++++++++
beginners-docs/C/statusbar.py.page | 56 +++
beginners-docs/C/statusbar.vala.page | 34 ++
beginners-docs/C/strings.py.page | 117 ++++++
beginners-docs/C/switch.c.page | 38 ++
beginners-docs/C/switch.js.page | 275 +++++++++++++
beginners-docs/C/switch.py.page | 49 +++
beginners-docs/C/switch.vala.page | 37 ++
beginners-docs/C/textview.c.page | 42 ++
beginners-docs/C/textview.js.page | 260 +++++++++++++
beginners-docs/C/textview.py.page | 102 +++++
beginners-docs/C/textview.vala.page | 40 ++
beginners-docs/C/togglebutton.c.page | 41 ++
beginners-docs/C/togglebutton.js.page | 161 ++++++++
beginners-docs/C/togglebutton.py.page | 48 +++
beginners-docs/C/togglebutton.vala.page | 34 ++
beginners-docs/C/toolbar.c.page | 37 ++
beginners-docs/C/toolbar.js.page | 36 ++
beginners-docs/C/toolbar.py.page | 63 +++
beginners-docs/C/toolbar.vala.page | 38 ++
beginners-docs/C/toolbar_builder.py.page | 203 ++++++++++
beginners-docs/C/toolbar_builder.vala.page | 155 ++++++++
beginners-docs/C/toolbars.vala.page | 20 +
beginners-docs/C/tooltip.py.page | 63 +++
beginners-docs/C/translate.page | 39 ++
beginners-docs/C/treeview.c.page | 29 ++
beginners-docs/C/treeview.js.page | 28 ++
beginners-docs/C/treeview.py.page | 28 ++
beginners-docs/C/treeview.vala.page | 29 ++
.../C/treeview_advanced_liststore.py.page | 51 +++
.../C/treeview_cellrenderertoggle.py.page | 51 +++
beginners-docs/C/treeview_simple_liststore.js.page | 286 ++++++++++++++
beginners-docs/C/treeview_simple_liststore.py.page | 53 +++
.../C/treeview_simple_liststore.vala.page | 35 ++
beginners-docs/C/treeview_treestore.py.page | 50 +++
beginners-docs/C/vala.page | 32 ++
beginners-docs/C/weatherApp.js.page | 56 +++
beginners-docs/C/weatherAppMain.js.page | 235 +++++++++++
beginners-docs/C/weatherAutotools.js.page | 151 ++++++++
beginners-docs/C/weatherGeonames.js.page | 154 ++++++++
beginners-docs/C/widget.c.page | 31 ++
beginners-docs/C/widget.js.page | 30 ++
beginners-docs/C/widget.py.page | 31 ++
beginners-docs/C/widget.vala.page | 30 ++
beginners-docs/C/widget_drawing.py.page | 42 ++
beginners-docs/C/window.c.page | 36 ++
beginners-docs/C/window.js.page | 42 ++
beginners-docs/C/window.py.page | 75 ++++
beginners-docs/C/window.vala.page | 48 +++
445 files changed, 24688 insertions(+), 0 deletions(-)
---
diff --git a/beginners-docs/C/02_welcome_to_the_grid.js.page b/beginners-docs/C/02_welcome_to_the_grid.js.page
new file mode 100644
index 0000000..216f167
--- /dev/null
+++ b/beginners-docs/C/02_welcome_to_the_grid.js.page
@@ -0,0 +1,279 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="topic" style="task"
+ id="02_welcome_to_the_grid.js">
+ <info>
+ <link type="guide" xref="beginner.js#tutorials" />
+ <link type="seealso" xref="grid.js" />
+ <link type="seealso" xref="image.js" />
+ <link type="seealso" xref="label.js" />
+ <revision version="0.1" date="2012-07-28" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Taryn Fox</name>
+ <email>jewelfox fursona net</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Learn how to lay out UI components, like Images and Labels.</desc>
+ </info>
+
+ <title>2. Welcome to the Grid</title>
+ <synopsis>
+ <p>This tutorial will show you how to create basic widgets, or parts of the GNOME user interface, like
Images and Labels. You'll then learn how to arrange them all in a Grid, which lets you put widgets exactly
where you want them.</p>
+ <note style="warning"><p>Have you taken <link xref="hellognome.js">the first tutorial in this
series</link> already? You'll want to do so before continuing.</p></note>
+ </synopsis>
+
+ <links type="section" />
+
+ <section id="native">
+ <title>Going native</title>
+
+ <p>In the last tutorial, we created what was basically a GNOME window frame for a web app. All the
GNOME-specific code we needed to learn revolved around putting the WebView -- the widget containing our
application -- into an ApplicationWindow, and telling it to display. The application itself was written in
HTML and JavaScript, just like most pages on the web.</p>
+ <p>This time, we're going to use only native GNOME widgets. A widget is just a thing, like a checkbox or
picture, and GNOME has a wide variety of them to choose from. We call them "native" widgets to distinguish
them from things like the button and header in the web app we wrote. Because instead of using web code, these
are going to be 100 percent GNOME, using GTK+.</p>
+ <note style="tip"><p>GTK+ stands for "GIMP Toolkit". It's like a toolbox of widgets that you can reach
into, while building your applications. It was originally written for <link href="http://www.gimp.org/";>the
GIMP</link>, which is a free software image editor.</p></note>
+ </section>
+
+ <section id="setup">
+ <title>Setting up our application</title>
+
+ <p>Before we dig out any widgets from the GTK+ toolbox, we first need to write the basic boilerplate
code that our application requires.</p>
+ <code mime="application/javascript"><![CDATA[
+#!/usr/bin/gjs
+
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+]]></code>
+ <p>This part always goes at the start of your code. Depending on what you'll be doing with it, you may
want to declare more imports here. What we're writing today is pretty basic, so these are all we need; Gtk
for the widgets, and Lang so we can use Lang.bind to connect our application's activate and startup signals
to the requisite functions.</p>
+ <p>Speaking of which:</p>
+ <code mime="application/javascript"><![CDATA[
+const WelcomeToTheGrid = new Lang.Class({
+ Name: 'Welcome to the Grid',
+
+ // Create the application itself
+ _init: function() {
+ this.application = new Gtk.Application();
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents windows when active
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function() {
+ this._buildUI ();
+ },
+]]></code>
+ <p>This is the start of the application itself, and the _init function which creates it. It tells
_buildUI to create an ApplicationWindow, which we're going to call _window, and it tells our window to
present itself whenever needed.</p>
+ <p>This part, again, is pretty much copy-and-paste, but you always want to give your application a
unique name.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Build the application's UI
+ _buildUI: function() {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ border_width: 10,
+ title: "Welcome to the Grid"});
+]]></code>
+ <p>Finally, we start off the _buildUI function by creating a new ApplicationWindow. We specify that it
goes with this application, that it should appear in the center of the screen, and that there should be at
least 10 pixels between the outside edge and any widgets inside of it. We also give it a title, which will
appear at the top of the window.</p>
+ </section>
+
+ <section id="toolbox">
+ <title>Reaching into the GTK+ toolbox</title>
+ <p>What widgets should we use? Well, let's say we want to write an application that looks like this:</p>
+
+ <media type="image" mime="image/png" src="media/02_jsgrid_01.png"/>
+
+ <p>We're going to need, at the very least, a picture and a text label to go with it. Let's start with
the picture:</p>
+ <code mime="application/javascript"><![CDATA[
+ // Create an image
+ this._image = new Gtk.Image ({ file: "gnome-image.png" });
+]]></code>
+
+ <p>You can download the image file used in this example <link
href="https://live.gnome.org/TarynFox?action=AttachFile&do=get&target=gnome-image.png";>here</link>.
Be sure to put it in the same directory as the code you're writing.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Create a label
+ this._label = new Gtk.Label ({ label: "Welcome to GNOME, too!" });
+]]></code>
+ <p>That code adds in the label beneath. You can see how we create widgets, here; each one is a part of
Gtk, and we can give it properties that customize how it behaves. In this case, we set the Image's file
property to be the filename of the picture we want, and the Label's label property to be the sentence that we
want beneath the picture.</p>
+ <note style="tip"><p>Yes, it sounds redundant for a Label to have a label property, but it's not. Other
widgets that contain text have a label property, so it's <em>consistent</em> for the Label widget to have one
too.</p></note>
+ <p>We can't just add these widgets to our window in order, though, the same way HTML elements appear in
the order you write them. That's because an ApplicationWindow can only contain one widget.</p>
+ <p>How do we get around that? By making that one widget a container widget, which can hold more than one
widget and organize them inside it. Behold: The Grid.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Create the Grid
+ this._grid = new Gtk.Grid ();
+]]></code>
+
+ <p>We're not giving it any properties yet. Those will come later, as we learn how to use the Grid's
powers. First, let's attach the Image and Label we made to our Grid.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Attach the image and label to the grid
+ this._grid.attach (this._image, 0, 0, 1, 1);
+ this._grid.attach (this._label, 0, 1, 1, 1);
+]]></code>
+
+ <p>This code looks awfully complicated, but it's not. Here's what those numbers mean:</p>
+ <list type="numbered">
+ <item><p>The <em>first</em> number is what left-to-right position to put things in, starting from 0.
Any widget that uses a 0 here goes all the way to the left.</p></item>
+ <item><p>The <em>second</em> number is what top-to-botton position to put a given widget in, starting
from 0. The Label goes beneath the Image, so we give the Image a 0 and the Label a 1 here.</p></item>
+ <item><p>The <em>third</em> and <em>fourth</em> numbers are how many columns and rows a widget should
take up. We'll see how these work in a minute.</p></item>
+ </list>
+
+ <code mime="application/javascript"><![CDATA[
+ // Add the grid to the window
+ this._window.add (this._grid);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ }
+
+});
+
+// Run the application
+let app = new WelcomeToTheGrid ();
+app.application.run (ARGV);
+]]></code>
+ <p>Now that we've created the Grid and attached all our widgets to it, we add it to the window and tell
the window to show itself, as the last part of the _buildUI function. As always, to finish up we create a new
instance of the application's class and tell it to run.</p>
+ <p>Save your application as welcome_to_the_grid.js. Then, to run your application just open a terminal,
go to the directory where your application is at, and type</p>
+ <screen> <output style="prompt">$ </output>gjs welcome_to_the_grid.js </screen>
+
+ <media type="image" mime="image/png" src="media/02_jsgrid_02.png"/>
+
+ <p>There we go! But wait. That doesn't look right. Why is the Label crammed up next to the Image like
that? That doesn't look as nice, and it makes it harder to read. What can we do about this?</p>
+ </section>
+
+ <section id="tweaking">
+ <title>Tweaking the Grid</title>
+
+ <p>One thing we can do, is we can give the Label a margin_top property when we create it. This works
sort of like setting a margin for an HTML element using inline CSS styling.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Create a label
+ this._label = new Gtk.Label ({
+ label: "Welcome to GNOME, too!",
+ margin_top: 20 });
+]]></code>
+
+ <p>Of course, if we do that then if we replace the Label with something else -- or add in another widget
-- then we have to repeat the margin_top on it too. Otherwise we end up with something like this:</p>
+ <media type="image" mime="image/png" src="media/02_jsgrid_03.png"/>
+
+ <p>We could give the Image a margin_bottom property, but that won't work when the new Label is in a
separate column. So how about we try this instead:</p>
+ <code mime="application/javascript"><![CDATA[
+ // Create the Grid
+ this._grid = new Gtk.Grid ({
+ row_spacing: 20 });
+]]></code>
+
+ <p>That makes it so that there are always 20 pixels of space in between each horizontal row.</p>
+ <note style="tip"><p>Yes, you can also set the column_spacing property on a Grid, or the margin_left and
margin_right properties on any widget. Try them out, if you like!</p></note>
+ </section>
+
+ <section id="adding">
+ <title>Adding more widgets</title>
+
+ <p>If we did want to add a second Label, how would we do it so that it actually looked like it belonged
there? One way is to center the Image on top, so that it's above both Labels instead of just the one on the
left. That's where those other numbers in the Grid's attach method come in:</p>
+ <code mime="application/javascript"><![CDATA[
+ // Create a second label
+ this._labelTwo = new Gtk.Label ({
+ label: "The cake is a pie." });
+
+ // Attach the image and labels to the grid
+ this._grid.attach (this._image, 0, 0, 2, 1);
+ this._grid.attach (this._label, 0, 1, 1, 1);
+ this._grid.attach (this._labelTwo, 1, 1, 1, 1);
+]]></code>
+
+ <p>After we create the second Label, we attach it to the Grid to the right of the first Label. Remember,
the first two numbers count columns and rows from left to right and top to bottom, starting with 0. So if the
first Label is in column 0 and row 1, we can put the second in column 1 and row 1 to put it to the right of
the first Label.</p>
+ <p>Note the number 2 in the attach statement for the Image. That's what does the trick here. That number
is how many columns the Image spans, remember? So when we put it together, we get something like this:</p>
+ <media type="image" mime="image/png" src="media/02_jsgrid_04.png"/>
+
+ <p>There are two things you should take note of, here.</p>
+ <list>
+ <item><p>Setting the Image to span two columns doesn't stretch the picture itself horizontally.
Instead, it stretches the invisible box taken up by the Image widget to fill both columns, then places the
Image in the center of that box.</p></item>
+ <item><p>Even though we've set the Grid's row_spacing and the ApplicationWindow's border_width
properties, we haven't yet set anything that puts a border in between the two Labels. They were separate
earlier when the Image was in only one column, but now that it spans both GNOME doesn't see a reason to keep
them apart.</p></item>
+ </list>
+
+ <p>There are at least three ways we can get around that last one. First, we can set a margin_left or
margin_right on one of the Labels:</p>
+ <media type="image" mime="image/png" src="media/02_jsgrid_05.png"/>
+
+ <p>Second, we can set the Grid's column_homogenous property to true.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Create the Grid
+ this._grid = new Gtk.Grid ({
+ column_homogeneous: true,
+ row_spacing: 20 });
+]]></code>
+
+ <p>That makes it look something like this:</p>
+ <media type="image" mime="image/png" src="media/02_jsgrid_06.png"/>
+
+ <p>And third, we can set the Grid's column_spacing property, the same way we set its row_spacing.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Create the Grid
+ this._grid = new Gtk.Grid ({
+ column_spacing: 20,
+ row_spacing: 20 });
+]]></code>
+ <p>That makes it look like this:</p>
+ <media type="image" mime="image/png" src="media/02_jsgrid_07.png"/>
+ </section>
+
+ <section id="stock">
+ <title>Using stock images</title>
+
+ <p>GNOME has a lot of stock images on hand already, that we can use if we don't feel like creating our
own or if we want a universally-recognized icon. Here's how we create a stock image, compared to how we
create a normal one:</p>
+ <code mime="application/javascript"><![CDATA[
+ // Create an image
+ this._image = new Gtk.Image ({ file: "gnome-image.png" });
+
+ // Create a second image using a stock icon
+ this._icon = new Gtk.Image ({ stock: 'gtk-about' });
+]]></code>
+ <p>After that, we attach it to the Grid to the left of the first Label. (We aren't using the second one
for this example.)</p>
+ <code mime="application/javascript"><![CDATA[
+ // Attach the images and label to the grid
+ this._grid.attach (this._image, 0, 0, 2, 1);
+ this._grid.attach (this._icon, 0, 1, 1, 1);
+ this._grid.attach (this._label, 1, 1, 1, 1);
+]]></code>
+ <p>That gives us this, when we run it:</p>
+ <media type="image" mime="image/png" src="media/02_jsgrid_08.png"/>
+
+ <p>That's what the stock "About" icon looks like. You can see a list of all the stock items starting
with gtk-about in <link
href="http://developer.gnome.org/gtk/2.24/gtk-Stock-Items.html#GTK-STOCK-ABOUT:CAPS";>GNOME's developer
documentation</link>. It was written for C programmers, but you don't need to know C to use it; just look at
the part in quotation marks, like "gtk-about", and copy that part to use the icon next to it.</p>
+ <note style="tip"><p>We put single quotes around 'gtk-about' here because, unlike text strings that have
double quotes around them, that part will never need to be translated into another language. In fact, if it
<em>were</em> translated it'd break the icon, because its name is still "gtk-about" no matter which language
you speak.</p></note>
+ </section>
+
+
+ <section id="next">
+ <title>What's next?</title>
+ <p>Before we go on to the next tutorial, let's try something a little different:</p>
+ <code mime="application/javascript"><![CDATA[
+ // Create a button
+ this._button = new Gtk.Button ({
+ label: "Welcome to GNOME, too!"});
+
+ // Attach the images and button to the grid
+ this._grid.attach (this._image, 0, 0, 2, 1);
+ this._grid.attach (this._icon, 0, 1, 1, 1);
+ this._grid.attach (this._button, 1, 1, 1, 1);
+]]></code>
+
+ <p>That's right, we turned the Label into a Button just by changing the name! If you run the application
and click on it, though, you'll find that it doesn't do anything. How do we make our Button do something?
That's what we'll find out, in <link xref="getting_the_signal.js">our next tutorial</link>.</p>
+ <p>If you like, feel free to spend some time experimenting with Grids, Labels, and Images, including
stock images.</p>
+ <note style="tip"><p>One trick you can use to make more complex layouts is to nest Grids inside of each
other. This lets you group together related widgets, and rearrange them easily. Take a look at the <link
xref="radiobutton.js">RadioButton</link> code sample if you'd like to see how this is done.</p></note>
+ </section>
+
+ <section id="complete">
+ <title>Complete code sample</title>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/02_welcome_to_the_grid.js"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+</page>
diff --git a/beginners-docs/C/03_getting_the_signal.js.page b/beginners-docs/C/03_getting_the_signal.js.page
new file mode 100644
index 0000000..eff84e8
--- /dev/null
+++ b/beginners-docs/C/03_getting_the_signal.js.page
@@ -0,0 +1,376 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="topic" style="task"
+ id="03_getting_the_signal.js">
+ <info>
+ <link type="guide" xref="beginner.js#tutorials" />
+ <link type="seealso" xref="button.js" />
+ <link type="seealso" xref="entry.js" />
+ <link type="seealso" xref="radiobutton.js" />
+ <link type="seealso" xref="switch.js" />
+ <revision version="0.1" date="2012-08-12" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Taryn Fox</name>
+ <email>jewelfox fursona net</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Create Buttons and other widgets that do things when you click on them.</desc>
+ </info>
+
+ <title>3. Getting the Signal</title>
+ <synopsis>
+ <p>In the last tutorial, we learned how to create widgets like Labels, Images, and Buttons. Here, we'll
learn how to make Buttons and other input widgets actually do things, by writing functions which handle the
signals they send when they are clicked on or interacted with.</p>
+ </synopsis>
+
+ <links type="section" />
+
+ <section id="application">
+ <title>A basic application</title>
+ <p>In GNOME, widgets that you can interact with, like Buttons and Switches, send out signals when they
are clicked on or activated. A Button, for instance, sends out the "clicked" signal when somebody clicks on
it. When this happens, GNOME looks for the part in your code that says what to do.</p>
+ <p>How do we write that code? By connecting that Button's "clicked" signal to a callback function, which
is a function you write just to handle that signal. So whenever it gives off that signal, the function
connected to that signal is run.</p>
+ <p>Here is an extremely basic example:</p>
+
+ <media type="image" mime="image/png" src="media/03_jssignal_01.png"/>
+
+ <p>This ApplicationWindow has a Button and a Label inside it, arranged in a Grid. Whenever the Button is
clicked, a variable that holds the number of cookies is increased by 1, and the Label that shows how many
cookies there are is updated.</p>
+ <note style="tip"><p>The cookies in this example are not the same as the cookies that you get from
websites, which store your login information and may keep track of which sites you've visited. They're just
imaginary treats. You may bake some real ones if you like.</p></note>
+ <p>Here is the basic, boilerplate code that goes at the start of the application, before we start
creating the window and widgets. Besides the application having a unique name, the biggest change from the
usual boilerplate is that we create a global variable right near the beginning, to hold the number of
cookies.</p>
+ <code mime="application/javascript"><![CDATA[
+#!/usr/bin/gjs
+
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+// We start out with 0 cookies
+var cookies = 0;
+
+const GettingTheSignal = new Lang.Class({
+ Name: 'Getting the Signal',
+
+ // Create the application itself
+ _init: function() {
+ this.application = new Gtk.Application();
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents window when active
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function() {
+ this._buildUI ();
+ },
+]]></code>
+ <p>Take a look at the part that uses our application's connect method and Lang.bind, to connect its
activate and startup signals to the functions that present the window and build the UI. We're going to do the
same thing with our Button when we get to it, except that we're going to connect its "clicked" signal
instead.</p>
+ </section>
+
+ <section id="button">
+ <title>Click the button</title>
+
+ <p>As usual, we'll put all the code to create our Button and other widgets inside the _buildUI function,
which is called when the application starts up.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Build the application's UI
+ _buildUI: function() {
+]]></code>
+
+ <p>First, we create the window itself:</p>
+ <code mime="application/javascript"><![CDATA[
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ default_height: 200,
+ default_width: 400,
+ title: "Click the button to get a cookie!"});
+]]></code>
+ <p>Note that we've set its default_height and default_width properties. These let us control how tall
and wide the ApplicationWindow will be, in pixels.</p>
+ <p>Next, we'll create the Label that shows us the number of cookies. We can use the cookies variable as
part of the Label's label property.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Create the label
+ this._cookieLabel = new Gtk.Label ({
+ label: "Number of cookies: " + cookies });
+]]></code>
+
+ <p>Now we'll create the Button. We set its label property to show the text that we want on the Button,
and we connect its "clicked" signal to a function called _getACookie, which we'll write after we're done
building our application's UI.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Create the cookie button
+ this._cookieButton = new Gtk.Button ({ label: "Get a cookie" });
+
+ // Connect the cookie button to the function that handles clicking it
+ this._cookieButton.connect ('clicked', Lang.bind (this, this._getACookie));
+]]></code>
+ <p>Finally, we create a Grid, attach the Label and Button to it, add it to the window and tell the
window to show itself and its contents. That's all we need inside the _buildUI function, so we close it with
a bracket, as well as a comma that tells GNOME to go on to the next function. Note that even though we wrote
the code for the Label first, we can still attach it to the Grid in a way that will put it on the bottom.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Create a grid to arrange everything inside
+ this._grid = new Gtk.Grid ({
+ halign: Gtk.Align.CENTER,
+ valign: Gtk.Align.CENTER,
+ row_spacing: 20 });
+
+ // Put everything inside the grid
+ this._grid.attach (this._cookieButton, 0, 0, 1, 1);
+ this._grid.attach (this._cookieLabel, 0, 1, 1, 1);
+
+ // Add the grid to the window
+ this._window.add (this._grid);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+
+ },
+]]></code>
+ <p>Now, we write the _getACookie function. Whenever our Button sends out its "clicked" signal, the code
in this function will run. In this case, all it does is increase the number of cookies by 1, and update the
Label to show the new number of cookies. We do this using the Label's set_label method.</p>
+ <note style="tip"><p>Many widgets have the same properties and methods. Both Labels and Buttons, for
instance, have a label property that says what text is inside them, and get_label and set_label methods that
let you check what that text is and change it, respectively. So if you learn how one widget works, you'll
also know how others like it work.</p></note>
+ <code mime="application/javascript"><![CDATA[
+ _getACookie: function() {
+
+ // Increase the number of cookies by 1 and update the label
+ cookies++;
+ this._cookieLabel.set_label ("Number of cookies: " + cookies);
+
+ }
+
+});
+]]></code>
+
+ <p>Finally, we run the application, using the same kind of code as in our last tutorial.</p>
+ <code mime="application/javascript"><![CDATA[
+// Run the application
+let app = new GettingTheSignal ();
+app.application.run (ARGV);
+]]></code>
+ </section>
+
+ <section id="switch">
+ <title>Flip the switch</title>
+ <p>Buttons aren't the only input widgets in our GTK+ toolbox. We can also use switches, like the one in
this example. Switches don't have a label property, so we have to create a separate Label that says what it
does to go next to it.</p>
+
+ <media type="image" mime="image/png" src="media/03_jssignal_02.png"/>
+
+ <p>A Switch has two positions, Off and On. When a Switch is turned on, its text and background color
change, so you can tell which position it's in.</p>
+
+ <media type="image" mime="image/png" src="media/03_jssignal_02b.png"/>
+
+ <p>You may have seen Switches like these in GNOME's accessibility menu, which let you turn features like
large text and the on-screen keyboard on and off. In this case, the Switch controls our imaginary cookie
dispenser. If the Switch is turned on, you can get cookies by clicking the "Get a cookie" Button. If it's
turned off, clicking the Button won't do anything.</p>
+ <note style="tip"><p>You can get to the accessibility menu by clicking on the outline of a human, near
your name in the upper-right corner of the screen.</p></note>
+ <p>Here's how we create the Switch:</p>
+ <code mime="application/javascript"><![CDATA[
+ // Create the switch that controls whether or not you can win
+ this._cookieSwitch = new Gtk.Switch ();
+]]></code>
+
+ <p>We don't actually need to connect the Switch to anything. All we need to do is write an if statement
in our _getACookie function, to check to see if the Switch is turned on. If we wanted to make something
happen as soon as you flip the Switch, though, we would connect its notify::active signal, like so:</p>
+ <code mime="application/javascript"><![CDATA[
+ // Connect the switch to the function that handles it
+ this._cookieSwitch.connect ('notify::active', Lang.bind (this, this._cookieDispenser));
+]]></code>
+
+ <p>A Switch is set to the off position by default. If we wanted the Switch to start out turned on, we
would set the value of its active property to true when we create it.</p>
+ <code mime="application/javascript"><![CDATA[
+ this._cookieSwitch = new Gtk.Switch ({ active: true });
+]]></code>
+
+ <p>Let's just create it normally, though, and then create the Label that goes with it. We want the
Switch and the Label to be kept right next to each other, so we'll create a Grid just for them, then put that
Grid in our larger Grid that holds all the widgets inside it. Here's what the code looks like to create all
that:</p>
+ <code mime="application/javascript"><![CDATA[
+ // Create the switch that controls whether or not you can win
+ this._cookieSwitch = new Gtk.Switch ();
+
+ // Create the label to go with the switch
+ this._switchLabel = new Gtk.Label ({
+ label: "Cookie dispenser" });
+
+ // Create a grid for the switch and its label
+ this._switchGrid = new Gtk.Grid ({
+ halign: Gtk.Align.CENTER,
+ valign: Gtk.Align.CENTER });
+
+ // Put the switch and its label inside that grid
+ this._switchGrid.attach (this._switchLabel, 0, 0, 1, 1);
+ this._switchGrid.attach (this._cookieSwitch, 1, 0, 1, 1);
+]]></code>
+
+ <p>And now we arrange everything in the larger Grid like so.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Put everything inside the grid
+ this._grid.attach (this._cookieButton, 0, 0, 1, 1);
+ this._grid.attach (this._switchGrid, 0, 1, 1, 1);
+ this._grid.attach (this._cookieLabel, 0, 2, 1, 1);
+]]></code>
+
+ <p>Now we change the _getACookie function so that it checks to see if the cookie dispenser is turned on.
We do that by using the Switch's get_active method. It returns true if the Switch is turned on, and false if
the Switch is turned off.</p>
+ <note style="tip"><p>When a method is used in an if statement like this, the code inside the if
statement is executed if the method returns true.</p></note>
+ <code mime="application/javascript"><![CDATA[
+ _getACookie: function() {
+
+ // Is the cookie dispenser turned on?
+ if (this._cookieSwitch.get_active()) {
+
+ // Increase the number of cookies by 1 and update the label
+ cookies++;
+ this._cookieLabel.set_label ("Number of cookies: " + cookies);
+
+ }
+
+ }
+]]></code>
+
+ </section>
+
+ <section id="radio">
+ <title>Tuning the radio</title>
+
+ <p>Another type of input widget we can use is called the RadioButton. You create them in groups, and
then only one RadioButton in a group can be selected at a time. They're called RadioButtons because they work
like the channel preset button in old-style car radios. The radio could only be tuned to one station at a
time, so whenever you pressed one button in, another would pop back out.</p>
+
+ <media type="image" mime="image/png" src="media/03_jssignal_03.png"/>
+
+ <p>First off, let's change our ApplicationWindow's name and increase its border_width property, so that
our widgets aren't packed in too tightly. The border_width is the number of pixels between any widget and the
edge of the window.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ default_height: 200,
+ default_width: 400,
+ border_width: 20,
+ title: "Choose the one that says 'cookie'!"});
+]]></code>
+
+ <p>After that, we create the RadioButtons. Remember how they're created in groups? The way we do that,
is we set each new RadioButton's group property to the name of another RadioButton.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Create the radio buttons
+ this._cookieButton = new Gtk.RadioButton ({ label: "Cookie" });
+ this._notCookieOne = new Gtk.RadioButton ({ label: "Not cookie",
+ group: this._cookieButton });
+ this._notCookieTwo = new Gtk.RadioButton ({ label: "Not cookie",
+ group: this._cookieButton });
+]]></code>
+
+ <p>Next, we create a Grid for the RadioButtons. Remember, we don't have to arrange things in Grids in
the same order that we create them in.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Arrange the radio buttons in their own grid
+ this._radioGrid = new Gtk.Grid ();
+ this._radioGrid.attach (this._notCookieOne, 0, 0, 1, 1);
+ this._radioGrid.attach (this._cookieButton, 0, 1, 1, 1);
+ this._radioGrid.attach (this._notCookieTwo, 0, 2, 1, 1);
+]]></code>
+
+ <p>Normally, the RadioButton that's selected by default is the one that's the name of the group. We want
the first "Not cookie" button to be selected by default, though, so we use its set_active method.</p>
+ <note style="tip"><p>We could also set its active property to true when we create it.</p></note>
+ <code mime="application/javascript"><![CDATA[
+ // Set the button that will be at the top to be active by default
+ this._notCookieOne.set_active (true);
+]]></code>
+
+ <p>Now we arrange everything in our main Grid like usual ...</p>
+ <code mime="application/javascript"><![CDATA[
+ // Put everything inside the grid
+ this._grid.attach (this._radioGrid, 0, 0, 1, 1);
+ this._grid.attach (this._cookieButton, 0, 1, 1, 1);
+ this._grid.attach (this._cookieLabel, 0, 2, 1, 1);
+]]></code>
+
+ <p>And then we change our _getACookie function to test to see if the cookie button is the one that's
selected.</p>
+ <code mime="application/javascript"><![CDATA[
+ _getACookie: function() {
+
+ // Did you select "cookie" instead of "not cookie"?
+ if (this._cookieButton.get_active()) {
+
+ // Increase the number of cookies by 1 and update the label
+ cookies++;
+ this._cookieLabel.set_label ("Number of cookies: " + cookies);
+
+ }
+
+ }
+]]></code>
+
+ </section>
+
+ <section id="spell">
+ <title>Can you spell "cookie"?</title>
+
+ <p>The last input widget we're going to cover is the Entry widget, which is used for single-line text
entry.</p>
+ <note style="tip"><p>If you need to be able to enter in a whole paragraph or more, like if you are
building a text editor, you'll want to look at the much more customizable <link
xref="textview.js">TextView</link> widget.</p></note>
+ <media type="image" mime="image/png" src="media/03_jssignal_04.png"/>
+
+ <p>After we change the window's name, we create the Entry widget.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Create the text entry field
+ this._spellCookie = new Gtk.Entry ();
+]]></code>
+
+ <p>Next, we arrange everything in the Grid ... </p>
+ <code mime="application/javascript"><![CDATA[
+ // Put everything inside the grid
+ this._grid.attach (this._spellCookie, 0, 0, 1, 1);
+ this._grid.attach (this._cookieButton, 0, 1, 1, 1);
+ this._grid.attach (this._cookieLabel, 0, 2, 1, 1);
+]]></code>
+
+ <p>And now we modify _getACookie's if statement again, using the Entry's get_text method to retrieve the
text that you entered into it and see if you spelled "cookie" right. We don't care whether you capitalize
"cookie" or not, so we use JavaScript's built-in toLowerCase method to change the Entry's text to all lower
case inside the if statement.</p>
+ <note style="tip"><p>An Entry widget doesn't have a label property, which is a set text string that the
user can't change. (You can't normally change the label on a Button, for instance.) Instead, it has a text
property, which changes to match what the user types in.</p></note>
+ <code mime="application/javascript"><![CDATA[
+ _getACookie: function() {
+
+ // Did you spell "cookie" correctly?
+ if ((this._spellCookie.get_text()).toLowerCase() == "cookie") {
+
+ // Increase the number of cookies by 1 and update the label
+ cookies++;
+ this._cookieLabel.set_label ("Number of cookies: " + cookies);
+
+ }
+
+ }
+]]></code>
+
+ </section>
+
+ <section id="whats_next">
+ <title>What's next?</title>
+ <p><link xref="04_popup_dialog_boxes.js">Click here</link> to go on to the next tutorial. Or keep
reading, if you'd like to see the complete code for each version of our cookie maker application.</p>
+ <note style="tip"><p>The main JavaScript tutorials page has <link xref="beginner.js#buttons">more
detailed code samples</link> for each input widget, including several not covered here.</p></note>
+
+ </section>
+
+ <section id="complete">
+ <title>Complete code samples</title>
+
+ <links type="section" />
+
+ <section id="buttonsample">
+ <title>Code sample with Button</title>
+ <media type="image" mime="image/png" src="media/03_jssignal_01.png"/>
+ <code mime="application/javascript" style="numbered"><xi:include
href="samples/03_getting_the_signal_01.js" parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="switchsample">
+ <title>Code sample with Switch</title>
+ <media type="image" mime="image/png" src="media/03_jssignal_02.png"/>
+ <code mime="application/javascript" style="numbered"><xi:include
href="samples/03_getting_the_signal_02.js" parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="radiobuttonsample">
+ <title>Code sample with RadioButton</title>
+ <media type="image" mime="image/png" src="media/03_jssignal_03.png"/>
+ <code mime="application/javascript" style="numbered"><xi:include
href="samples/03_getting_the_signal_03.js" parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="entrysample">
+ <title>Code sample with Entry</title>
+ <media type="image" mime="image/png" src="media/03_jssignal_04.png"/>
+ <code mime="application/javascript" style="numbered"><xi:include
href="samples/03_getting_the_signal_04.js" parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ </section>
+
+</page>
diff --git a/beginners-docs/C/GtkApplicationWindow.c.page b/beginners-docs/C/GtkApplicationWindow.c.page
new file mode 100644
index 0000000..ce5768c
--- /dev/null
+++ b/beginners-docs/C/GtkApplicationWindow.c.page
@@ -0,0 +1,33 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="GtkApplicationWindow.c">
+ <info>
+ <title type="text">ApplicationWindow (C)</title>
+ <link type="guide" xref="beginner.c#windows"/>
+ <revision version="0.1" date="2012-04-28" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A toplevel window which can contain other widgets, and support GMenu</desc>
+ </info>
+
+ <title>ApplicationWindow</title>
+ <media type="image" mime="image/png" src="media/window.png"/>
+ <p>A minimal GtkApplication with a GtkApplicationWindow</p>
+
+<code mime="text/x-csrc" style="numbered"><xi:include href="samples/GtkApplicationWindow.c"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/3.4/GtkApplication.html";>GtkApplication</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/3.4/GtkApplicationWindow.html";>GtkApplicationWindow</link></p></item>
+
+</list>
+</page>
diff --git a/beginners-docs/C/GtkApplicationWindow.js.page b/beginners-docs/C/GtkApplicationWindow.js.page
new file mode 100644
index 0000000..c28934e
--- /dev/null
+++ b/beginners-docs/C/GtkApplicationWindow.js.page
@@ -0,0 +1,33 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="GtkApplicationWindow.js">
+ <info>
+ <title type="text">ApplicationWindow (JavaScript)</title>
+ <link type="guide" xref="beginner.js#windows"/>
+ <revision version="0.1" date="2012-04-07" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>GtkWindow subclass with GtkApplication support</desc>
+ </info>
+
+ <title>ApplicationWindow</title>
+ <media type="image" mime="image/png" src="media/window.png"/>
+ <p>A simple GtkApplicationWindow which can support Menus.</p>
+
+<code mime="application/javascript" style="numbered">
+<xi:include href="samples/GtkApplicationWindow.js" parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/GtkApplicationWindow.py.page b/beginners-docs/C/GtkApplicationWindow.py.page
new file mode 100644
index 0000000..ad324a0
--- /dev/null
+++ b/beginners-docs/C/GtkApplicationWindow.py.page
@@ -0,0 +1,73 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="topic"
+ id="GtkApplicationWindow.py">
+
+ <info>
+ <title type="text">GtkApplicationWindow (Python)</title>
+ <link type="seealso" xref="properties.py"/>
+ <link type="next" xref="image.py"/>
+ <revision version="0.3" date="2013-03-03" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012, 2013</years>
+ </credit>
+
+ <desc>A window with GtkApplication support</desc>
+ </info>
+
+ <title>GtkApplicationWindow</title>
+
+ <synopsis><p>We see a more complex way to create a window. The class we use,
+ GtkApplicationWindow, is integrated with the class that is used to write
+ applications, that is GtkApplication. A GtkApplicationWindow is also the
+ simplest window that can support a <link xref="gmenu.py"/>.</p></synopsis>
+
+ <links type="section" />
+
+ <section id="example">
+ <title>An example</title>
+
+ <p>Here is an example of what you can do to construct a window with
+ GtkApplicationWindow.</p>
+
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/GtkApplicationWindow.py"
parse="text"><xi:fallback/></xi:include></code>
+
+ <p>If you run this code, a window like the one below should appear on your
+ screen.</p>
+
+ <media type="image" mime="image/png" src="media/window.png"/>
+
+ </section>
+
+ <section id="in-depth">
+ <title>A more in-depth look</title>
+
+ <p></p>
+
+ </section>
+
+ <section id="exercises">
+ <title>Exercises</title>
+
+ </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>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/GtkApplicationWindow.vala.page b/beginners-docs/C/GtkApplicationWindow.vala.page
new file mode 100644
index 0000000..7320658
--- /dev/null
+++ b/beginners-docs/C/GtkApplicationWindow.vala.page
@@ -0,0 +1,33 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="GtkApplicationWindow.vala">
+ <info>
+ <title type="text">ApplicationWindow (Vala)</title>
+ <link type="guide" xref="beginner.vala#windows"/>
+ <revision version="0.1" date="2012-04-07" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>GtkWindow subclass with GtkApplication support</desc>
+ </info>
+
+ <title>ApplicationWindow</title>
+ <media type="image" mime="image/png" src="media/window.png"/>
+ <p>The simplest GtkApplication Window which can support Menus.</p>
+
+<code mime="text/x-csharp" style="numbered">
+<xi:include href="samples/GtkApplicationWindow.vala" parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.Application.html.content.tpl";>Gtk.Application</link></p></item>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.ApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/about-dialog.vala.page b/beginners-docs/C/about-dialog.vala.page
new file mode 100644
index 0000000..3a9b1b4
--- /dev/null
+++ b/beginners-docs/C/about-dialog.vala.page
@@ -0,0 +1,21 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="about-dialog.vala">
+ <info>
+ <link type="guide" xref="beginner.vala#tutorials"/>
+ <revision version="0.1" date="2012-02-20" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc></desc>
+ </info>
+
+ <title>vi. AboutDialog</title>
+ <p></p>
+
+</page>
diff --git a/beginners-docs/C/aboutdialog.c.page b/beginners-docs/C/aboutdialog.c.page
new file mode 100644
index 0000000..3fe828d
--- /dev/null
+++ b/beginners-docs/C/aboutdialog.c.page
@@ -0,0 +1,40 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="aboutdialog.c">
+ <info>
+ <title type="text">AboutDialog (C)</title>
+ <link type="guide" xref="beginner.c#windows"/>
+ <link type="seealso" xref="dialog.c"/>
+ <link type="seealso" xref="messagedialog.c"/>
+ <revision version="0.2" date="2012-08-07" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Monica Kochofar</name>
+ <email>monicakochofar gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Display information about an application</desc>
+ </info>
+
+ <title>AboutDialog</title>
+
+ <media type="image" mime="image/png" src="media/aboutdialog_GMenu.png"/>
+ <p>An AboutDialog example using Gtk.ApplicationWindow and Menu</p>
+ <note><p><em style="bold">You need to be running Gtk3.4 or later for this to work</em></p></note>
+
+ <code mime="text/x-csrc" style="numbered">
+<xi:include href="samples/aboutdialog.c" parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/3.4/GtkApplication.html";>GtkApplication</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/3.4/GtkWindow.html";>GtkWindow</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkAboutDialog.html";>GtkAboutDialog</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gio/stable/GMenu.html";>GMenu</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gio/stable/GActionMap.html";>GActionMap</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/aboutdialog.js.page b/beginners-docs/C/aboutdialog.js.page
new file mode 100644
index 0000000..501d2b7
--- /dev/null
+++ b/beginners-docs/C/aboutdialog.js.page
@@ -0,0 +1,34 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="aboutdialog.js">
+ <info>
+ <title type="text">AboutDialog (JavaScript)</title>
+ <link type="guide" xref="beginner.js#windows"/>
+ <revision version="0.1" date="2012-05-30" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Taryn Fox</name>
+ <email>jewelfox fursona net</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Display information about an application</desc>
+ </info>
+
+ <title>AboutDialog</title>
+ <media type="image" mime="image/png" src="media/aboutdialog_GMenu.png"/>
+ <p>A modal dialog window which shows information about an application and its creators. This one is
triggered by clicking "About" in the application's menu, which is normally a good place to put it.</p>
+
+<code mime="application/javascript" style="numbered"><xi:include href="samples/aboutdialog.js"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="http://developer.gnome.org/gio/unstable/GMenu.html";>GMenu</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gio/stable/GSimpleAction.html";>GSimpleAction</link></p></item>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.AboutDialog.html";>Gtk.AboutDialog</link></p></item>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/aboutdialog.py.page b/beginners-docs/C/aboutdialog.py.page
new file mode 100644
index 0000000..0e94b07
--- /dev/null
+++ b/beginners-docs/C/aboutdialog.py.page
@@ -0,0 +1,51 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="aboutdialog.py">
+ <info>
+ <title type="text">AboutDialog (Python)</title>
+ <link type="guide" xref="beginner.py#windows"/>
+ <link type="next" xref="messagedialog.py"/>
+ <revision version="0.1" date="2012-06-11" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A window that displays information about an application</desc>
+ </info>
+
+ <title>AboutDialog</title>
+ <media type="image" mime="image/png" src="media/aboutdialog_GMenu.png"/>
+ <p>An AboutDialog example using Gtk.ApplicationWindow and Menu (the "about" is displayed if "About" in the
menu is selected).</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/aboutdialog.py"
parse="text"><xi:fallback/></xi:include></code>
+
+ </section>
+
+ <section id="methods">
+ <title>Useful methods for an AboutDialog widget</title>
+ <p>In line 15 the signal <code>"activate"</code> is connected to the callback function
<code>about_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback
function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.</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/GtkAboutDialog.html";>GtkAboutDialog</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/gio/stable/GMenu.html";>GMenu</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkApplication.html";>GtkApplication</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/aboutdialog.vala.page b/beginners-docs/C/aboutdialog.vala.page
new file mode 100644
index 0000000..914ae5b
--- /dev/null
+++ b/beginners-docs/C/aboutdialog.vala.page
@@ -0,0 +1,42 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="aboutdialog.vala">
+ <info>
+ <title type="text">AboutDialog (Vala)</title>
+ <link type="guide" xref="beginner.vala#windows"/>
+ <link type="seealso" xref="button.vala"/>
+ <link type="seealso" xref="linkbutton.vala"/>
+ <revision version="0.1" date="2012-04-07" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Ryan Lortie</name>
+ <email>desrt desrt ca</email>
+ <years>2012</years>
+ </credit>
+
+ <credit type="author">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ </credit>
+
+
+ <desc>Display information about an application</desc>
+ </info>
+
+ <title>AboutDialog</title>
+ <media type="image" mime="image/png" src="media/aboutdialog_GMenu.png"/>
+ <p>An AboutDialog example using Gtk.ApplicationWindow and Menu</p>
+ <note><p><em style="bold">You need to be running Gtk3.4 or later for this to work</em></p></note>
+
+<code mime="text/x-csharp" style="numbered"><xi:include href="samples/aboutdialog.vala"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.Application.html";>Gtk.Application</link></p></item>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.ApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.Window.set_default_size.html";>set_default_size</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/audio-player.vala.page b/beginners-docs/C/audio-player.vala.page
new file mode 100644
index 0000000..7083602
--- /dev/null
+++ b/beginners-docs/C/audio-player.vala.page
@@ -0,0 +1,20 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="audio-player.vala">
+
+ <info>
+ <link type="guide" xref="vala#examples"/>
+
+ <desc>Coming soon...</desc>
+
+ <revision pkgversion="0.1" version="0.1" date="2010-12-05" status="stub"/>
+ <credit type="author">
+ <name>GNOME Documentation Project</name>
+ <email>gnome-doc-list gnome org</email>
+ </credit>
+ </info>
+
+<title>Audio player</title>
+
+</page>
diff --git a/beginners-docs/C/beginner.py.page b/beginners-docs/C/beginner.py.page
new file mode 100644
index 0000000..cc3e5bd
--- /dev/null
+++ b/beginners-docs/C/beginner.py.page
@@ -0,0 +1,66 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:e="http://projectmallard.org/experimental/";
+ type="guide" style="task"
+ id="beginner.py">
+
+<info>
+ <title type="text">GTK+ widgets sample code (Python)</title>
+ <link type="guide" xref="py#code-samples"/>
+ <revision version="0.1" date="2012-07-31" status="draft"/>
+
+ <desc>A guide to GUI programming using GTK+, including code samples and practice exercises.</desc>
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ </credit>
+ <credit type="editor">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2013</years>
+ </credit>
+</info>
+
+<title>GTK+ widgets sample code</title>
+<synopsis>
+<p>If you are a beginner and you would like a tutorial to guide you step by step in an exploration of what
you can do with GTK+ 3, you should go to the <link xref="tutorial.py" /> page. If you are looking for a
specific widget, you can find it in the sections below.</p>
+</synopsis>
+
+<links type="section"/>
+
+ <section id="windows" style="2column"><title>Windows</title>
+ </section>
+ <section id="display-widgets" style="2column"><title>Display widgets</title>
+ </section>
+ <section id="buttons" style="2column"><title>Buttons and toggles</title>
+ </section>
+ <section id="entry" style="2column"><title>Numeric and text data entry</title>
+ </section>
+ <section id="multiline" style="2column"><title>Multiline text editor</title>
+ </section>
+ <section id="menu-combo-toolbar" style="2column"><title>Menu, combo box and toolbar widgets</title>
+ </section>
+ <section id="treeview" style="2column"><title>TreeView widget</title>
+ </section>
+ <section id="selectors" style="2column"><title>Selectors</title>
+ <section id="file-selectors" style="2column"><title>File selectors</title>
+ </section>
+ <section id="font-selectors" style="2column"><title>Font selectors</title>
+ </section>
+ <section id="color-selectors" style="2column"><title>Color Selectors</title>
+ </section>
+ </section>
+ <section id="layout" style="2column"><title>Layout containers</title>
+ </section>
+ <section id="ornaments" style="2column"><title>Ornaments</title>
+ </section>
+ <section id="scrolling" style="2column"><title>Scrolling</title>
+ </section>
+ <section id="misc" style="2column"><title>Miscellaneous</title>
+ </section>
+
+<section id="theory">
+<title>Theory pages</title>
+</section>
+
+</page>
diff --git a/beginners-docs/C/bug-filing.page b/beginners-docs/C/bug-filing.page
new file mode 100644
index 0000000..b1c981c
--- /dev/null
+++ b/beginners-docs/C/bug-filing.page
@@ -0,0 +1,46 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="bug-filing">
+
+ <info>
+ <link type="guide" xref="index#get-involved"/>
+ <revision pkgversion="3.4" version="0.1" date="2012-02-06" status="candidate"/>
+ <credit type="editor copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski com</email>
+ <years>2011</years>
+ </credit>
+ <license>
+ <p>Creative Commons Share Alike 3.0</p>
+ </license>
+ </info>
+
+<title>Help make <app>GNOME Developer Tutorials</app> better</title>
+
+<section id="bug-report">
+<title>Report a bug or suggest an improvement</title>
+<p>
+ <app>GNOME Developer Tutorials</app> are maintained by a volunteer community. You are welcome to
participate. If you notice a problem you can file a <em>bug report</em>. To file a bug, go to <link href =
"https://bugzilla.gnome.org/"/>.
+ </p>
+ <p>
+ This is a bug tracking system where users and developers can file details about bugs, crashes and request
enhancements.
+ </p>
+ <p>
+ To participate you need an account which will give you the ability to gain access, file bugs, and make
comments. Also, you need to register so you can receive updates by e-mail about the status of your bug. If
you don't already have an account, just click on the <gui>New Account</gui> link to create one.
+ </p>
+ <p>
+ Once you have an account, log in, click on <guiseq><gui>File a
Bug</gui><gui>All</gui><gui>gnome-devel-docs</gui></guiseq>.
+ Before reporting a bug, please read the <link href =
"https://bugzilla.gnome.org/page.cgi?id=bug-writing.html";>bug writing guidelines</link>, and please <link
href="https://bugzilla.gnome.org/browse.cgi?product=gnome-games";>browse</link> for the bug to see if it
already exists.
+ </p>
+ <p>
+ To file your bug, choose the component <gui>platform-demos</gui> in the <gui>Component</gui> menu.
+ </p>
+ <p>
+ If you are requesting a new feature, choose <gui>enhancement</gui> in the <gui>Severity</gui> menu.
+ Fill in the Summary and Description sections and click <gui>Commit</gui>.
+ </p>
+ <p>
+ Your report will be given an ID number, and its status will be updated as it is being dealt with.
Thanks for helping make <app>GNOME Developer Tutorials</app> better!
+ </p>
+</section>
+</page>
diff --git a/beginners-docs/C/button.c.page b/beginners-docs/C/button.c.page
new file mode 100644
index 0000000..8d5d1d2
--- /dev/null
+++ b/beginners-docs/C/button.c.page
@@ -0,0 +1,38 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="button.c">
+ <info>
+ <title type="text">Button (C)</title>
+ <link type="guide" xref="beginner.c#buttons"/>
+ <link type="seealso" xref="dialog.c"/>
+ <link type="seealso" xref="grid.c"/>
+ <revision version="0.2" date="2012-06-22" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Monica Kochofar</name>
+ <email>monicakochofar gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A button widget which emits a signal when clicked</desc>
+ </info>
+
+ <title>Button</title>
+
+ <media type="image" mime="image/png" src="media/button.png"/>
+ <p>A button widget connected to a callback function that reverses its label when clicked.</p>
+
+ <code mime="text/x-csrc" style="numbered">
+<xi:include href="samples/button.c" parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/3.4/GtkApplication.html";>GtkApplication</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/3.4/GtkWindow.html";>GtkWindow</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkButton.html";>GtkButton</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/glib/stable/glib-Unicode-Manipulation.html#g-utf8-strreverse";>Unicode
Manipulation</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/button.js.page b/beginners-docs/C/button.js.page
new file mode 100644
index 0000000..d920ff9
--- /dev/null
+++ b/beginners-docs/C/button.js.page
@@ -0,0 +1,34 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="button.js">
+ <info>
+ <title type="text">Button (JavaScript)</title>
+ <link type="guide" xref="beginner.js#buttons"/>
+ <revision version="0.1" date="2012-04-19" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Taryn Fox</name>
+ <email>jewelfox fursona net</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A button which can be connected to other widgets</desc>
+ </info>
+
+ <title>Button</title>
+ <media type="image" mime="image/png" src="media/button.png"/>
+ <p>A button widget that changes its label when you click it.</p>
+
+<code mime="application/javascript" style="numbered"><xi:include href="samples/button.js"
parse="text"><xi:fallback/></xi:include></code>
+
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Button.html";>Gtk.Button</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/button.py.page b/beginners-docs/C/button.py.page
new file mode 100644
index 0000000..4309d3f
--- /dev/null
+++ b/beginners-docs/C/button.py.page
@@ -0,0 +1,58 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="button.py">
+ <info>
+ <title type="text">Button (Python)</title>
+ <link type="guide" xref="beginner.py#buttons"/>
+ <link type="seealso" xref="signals-callbacks.py"/>
+ <link type="next" xref="linkbutton.py"/>
+ <revision version="0.2" date="2012-05-05" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A button widget which emits a signal when clicked</desc>
+ </info>
+
+ <title>Button</title>
+
+ <media type="image" mime="image/png" src="media/button.png"/>
+ <p>A button widget connected to a simple callback function.</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/button.py"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="methods">
+ <title>Useful methods for a Button widget</title>
+ <p>In line 16 the <code>"clicked"</code> signal from the button is connected to the callback function
<code>do_clicked()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback
function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.</p>
+ <list>
+ <item><p><code>set_relief(Gtk.ReliefStyle.NONE)</code> sets to none the relief style of the edges of
the Gtk.Button - as opposed to <code>Gtk.ReliefStyle.NORMAL</code>.</p></item>
+ <item><p>If the label of the button is a <link
href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items.html";>stock icon</link>,
<code>set_use_stock(True)</code> sets the label as the name of the corresponding stock icon.</p></item>
+ <item><p>To set an image (e.g. a stock image) for the button <code>button</code>:</p>
+ <code>
+image = Gtk.Image()
+image.set_from_stock(Gtk.STOCK_ABOUT, Gtk.IconSize.BUTTON)
+button.set_image(image)</code>
+ <p>You should not set a label for the button after this, otherwise it will show the label and not the
image.</p></item>
+ <item><p>If we use <code>set_focus_on_click(False)</code> the button will not grab focus when it is
clicked by the mouse. This could be useful in places like toolbars, so that the keyboard focus is not removed
from the main area of the application.</p></item>
+ </list>
+ </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/GtkButton.html";>GtkButton</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkWindow.html";>GtkWindow</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/button.vala.page b/beginners-docs/C/button.vala.page
new file mode 100644
index 0000000..d3773f2
--- /dev/null
+++ b/beginners-docs/C/button.vala.page
@@ -0,0 +1,32 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="button.vala">
+ <info>
+ <title type="text">Button (Vala)</title>
+ <link type="guide" xref="beginner.vala#buttons"/>
+ <link type="seealso" xref="GtkApplicationWindow.vala"/>
+ <revision version="0.1" date="2012-02-21" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A button widget which emits a signal when clicked</desc>
+ </info>
+
+ <title>Button widget</title>
+
+ <media type="image" mime="image/png" src="media/button.png"/>
+ <p>A button widget connected to a simple callback function.</p>
+
+<code mime="text/x-csharp" style="numbered">
+<xi:include href="samples/button.vala" parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+ <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Button.html";>Gtk.Button</link>
+</p>
+</page>
diff --git a/beginners-docs/C/buttonbox.py.page b/beginners-docs/C/buttonbox.py.page
new file mode 100644
index 0000000..74b1074
--- /dev/null
+++ b/beginners-docs/C/buttonbox.py.page
@@ -0,0 +1,55 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="buttonbox.py">
+ <info>
+ <title type="text">ButtonBox (Python)</title>
+ <link type="guide" xref="beginner.py#layout"/>
+ <link type="seealso" xref="button.py"/>
+ <link type="next" xref="statusbar.py"/>
+ <revision version="0.2" date="2012-08-01" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A container for arranging buttons</desc>
+ </info>
+
+ <title>ButtonBox</title>
+
+ <media type="image" mime="image/png" src="media/buttonbox_calculator.png"/>
+ <p>A calculator - the buttons are enclosed in horizontal ButtonBoxes.</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+ <code mime="text/python" style="numbered"><xi:include href="samples/buttonbox.py"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="methods">
+ <title>Uselful methods for a ButtonBox widget</title>
+ <list>
+ <item><p>The layout of the ButtonBox are set with <code>set_layout(layout)</code>, where
<code>layout</code> can be <code>Gtk.ButtonBoxStyle.SPREAD</code> (buttons are evenly spread across the box),
<code>Gtk.ButtonBoxStyle.EDGE</code> (buttons are placed at the edges of the box),
<code>Gtk.ButtonBoxStyle.START</code> (buttons are grouped towards the start of the box),
<code>Gtk.ButtonBoxStyle.END</code> (buttons are grouped towards the end of the box),
<code>Gtk.ButtonBoxStyle.CENTER</code> (buttons are centered in the box).</p></item>
+ <item><p><code>set_child_secondary(button, is_secondary)</code> sets whether <code>button</code>
should appear in a secondary group of children. A typical use of a secondary child is the help button in a
dialog. This group appears after the other children if the style is <code>START</code>, <code>SPREAD</code>
or <code>EDGE</code>, and before the other children if the style is <code>END</code>. If the style is
<code>START</code> or <code>END</code>, then the secondary children are aligned at the other end of the
button box from the main children. For the other styles, they appear immediately next to the main
children.</p></item>
+ <item><p><code>set_child_non_homogeneous(button, is_non_homogeneous)</code> sets whether the child is
exempted from homogeous sizing. Default value is <code>False</code>.</p></item>
+ <item><p><code>set_spacing(spacing)</code> sets the spacing, in pixels, between the buttons of the
box.</p></item>
+ </list>
+ </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/stable/GtkButtonBox.html";>GtkButtonBox</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkBox.html";>GtkBox</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkButton.html";>GtkButton</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkEntry.html";>GtkEntry</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkGrid.html";>GtkGrid</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/c.page b/beginners-docs/C/c.page
new file mode 100644
index 0000000..3098368
--- /dev/null
+++ b/beginners-docs/C/c.page
@@ -0,0 +1,32 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:ui="http://projectmallard.org/experimental/ui/";
+ type="guide"
+ id="c">
+<info>
+ <title type='link'>C</title>
+ <link type="guide" xref="index#languages"/>
+ <revision version="3.4" date="2012-04-28" status="stub"/>
+ <credit type="editor">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ </credit>
+ <credit type="editor">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2013</years>
+ </credit>
+</info>
+
+<title>Tutorials in C</title>
+
+<links type="section" />
+
+<section id="libraries">
+<title>Introduction to libraries</title>
+</section>
+
+<section id="10minutes">
+<title>10 minutes tutorials</title>
+</section>
+
+</page>
diff --git a/beginners-docs/C/checkbutton.c.page b/beginners-docs/C/checkbutton.c.page
new file mode 100644
index 0000000..75a0b4e
--- /dev/null
+++ b/beginners-docs/C/checkbutton.c.page
@@ -0,0 +1,31 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="checkbutton.c">
+ <info>
+ <title type="text">CheckButton (C)</title>
+ <link type="guide" xref="beginner.c#buttons"/>
+ <revision version="0.1" date="2012-05-31" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antpoolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Create widgets with a discrete ToggleButton</desc>
+ </info>
+
+ <title>CheckButton</title>
+ <media type="image" mime="image/png" src="media/checkbutton.png"/>
+ <p>This CheckButton toggles the title.</p>
+
+<code mime="text/x-csrc" style="numbered"><xi:include href="samples/checkbutton.c"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/3.2/GtkCheckButton.html";>GtkCheckButton</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/checkbutton.js.page b/beginners-docs/C/checkbutton.js.page
new file mode 100644
index 0000000..9d89531
--- /dev/null
+++ b/beginners-docs/C/checkbutton.js.page
@@ -0,0 +1,142 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="checkbutton.js">
+ <info>
+ <title type="text">CheckButton (JavaScript)</title>
+ <link type="guide" xref="beginner.js#buttons"/>
+ <revision version="0.1" date="2012-06-12" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Taryn Fox</name>
+ <email>jewelfox fursona net</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A box which can be checked or unchecked</desc>
+ </info>
+
+ <title>CheckButton</title>
+ <media type="image" mime="image/png" src="media/checkbutton.png"/>
+ <p>This application has a CheckButton. Whether the box is checked dictates whether the window's title bar
shows anything.</p>
+ <p>A CheckButton sends the "toggled" signal when it's checked or unchecked. While it's checked, the
"active" property is true. While it's not, "active" tests as false.</p>
+ <links type="section" />
+
+ <section id="imports">
+ <title>Libraries to import</title>
+ <code mime="application/javascript"><![CDATA[
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+]]></code>
+ <p>These are the libraries we need to import for this application to run. Remember that the line which
tells GNOME that we're using Gjs always needs to go at the start.</p>
+ </section>
+
+ <section id="applicationwindow">
+ <title>Creating the application window</title>
+ <code mime="application/javascript"><![CDATA[
+const CheckButtonExample = new Lang.Class({
+ Name: 'CheckButton Example',
+
+ // Create the application itself
+ _init: function() {
+ this.application = new Gtk.Application({
+ application_id: 'org.example.jscheckbutton',
+ flags: Gio.ApplicationFlags.FLAGS_NONE
+ });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents window when active
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function() {
+ this._buildUI ();
+ },
+]]></code>
+ <p>All the code for this sample goes in the CheckButtonExample class. The above code creates a <link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link> for our
widgets and window to go in.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Build the application's UI
+ _buildUI: function() {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ default_height: 100,
+ default_width: 300,
+ border_width: 10,
+ title: "CheckButton Example"});
+]]></code>
+ <p>The _buildUI function is where we put all the code to create the application's user interface. The
first step is creating a new <link href="GtkApplicationWindow.js.page">Gtk.ApplicationWindow</link> to put
all our widgets into.</p>
+ </section>
+
+ <section id="button">
+ <title>Creating the checkbutton</title>
+ <code mime="application/javascript"><![CDATA[
+ // Create the check button
+ this._button = new Gtk.CheckButton ({label: "Show Title"});
+ this._window.add (this._button);
+
+ // Have the check button be checked by default
+ this._button.set_active (true);
+
+ // Connect the button to a function that does something when it's toggled
+ this._button.connect ("toggled", Lang.bind (this, this._toggledCB));
+]]></code>
+ <p>This code creates the checkbutton itself. The label next to the checkbutton is created by giving the
checkbutton the "label" property and assigning a string value to it. Since this checkbutton toggles whether
the window title is on or off, and the window title will be on to start with, we want the box to be checked
by default. Whenever the user checks or unchecks the box, we call the _toggledCB function.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+]]></code>
+ <p>This code finishes up creating the UI, by telling the window to show itself and all child widgets
(which is just the checkbutton in this case).</p>
+ </section>
+
+ <section id="function">
+ <title>Function which handles the checkbutton's toggling</title>
+ <code mime="application/javascript"><![CDATA[
+ _toggledCB: function () {
+
+ // Make the window title appear or disappear when the checkbox is toggled
+ if (this._button.get_active() == true)
+ this._window.set_title ("CheckButton Example");
+ else
+ this._window.set_title ("");
+
+ }
+
+});
+]]></code>
+ <p>If the checkbutton is toggled from on to off, we want the window title to disappear. If it's toggled
from off to on, we want it to reappear. We can tell which way it was toggled by testing to see whether it's
active (checked) or not afterwards. A simple if / else statement which calls the checkbutton's get_active()
method will work for this.</p>
+ <code mime="application/javascript"><![CDATA[
+// Run the application
+let app = new CheckButtonExample ();
+app.application.run (ARGV);
+]]></code>
+ <p>Finally, we create a new instance of the finished CheckButtonExample class, and set the application
running.</p>
+ </section>
+
+ <section id="complete">
+ <title>Complete code sample</title>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/checkbutton.js"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="in-depth">
+ <title>In-depth documentation</title>
+<list>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.CheckButton.html";>Gtk.CheckButton</link></p></item>
+</list>
+ </section>
+</page>
diff --git a/beginners-docs/C/checkbutton.py.page b/beginners-docs/C/checkbutton.py.page
new file mode 100644
index 0000000..8f2cf88
--- /dev/null
+++ b/beginners-docs/C/checkbutton.py.page
@@ -0,0 +1,50 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="checkbutton.py">
+ <info>
+ <title type="text">CheckButton (Python)</title>
+ <link type="guide" xref="beginner.py#buttons"/>
+ <link type="next" xref="togglebutton.py"/>
+ <revision version="0.1" date="2012-05-09" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A toggle button in a window</desc>
+ </info>
+
+ <title>CheckButton</title>
+ <media type="image" mime="image/png" src="media/checkbutton.png"/>
+ <p>This CheckButton toggles the title.</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/checkbutton.py"
parse="text"><xi:fallback/></xi:include></code>
+
+ </section>
+
+ <section id="methods">
+ <title>Useful methods for a CheckButton widget</title>
+ <p>In line 17 the <code>"toggled"</code> signal is connected to the callback function
<code>toggled_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback
function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.</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/GtkToggleButton.html";>GtkToggleButton</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkCheckButton.html";>GtkCheckButton</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/checkbutton.vala.page b/beginners-docs/C/checkbutton.vala.page
new file mode 100644
index 0000000..5232ef6
--- /dev/null
+++ b/beginners-docs/C/checkbutton.vala.page
@@ -0,0 +1,31 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="checkbutton.vala">
+ <info>
+ <title type="text">CheckButton (Vala)</title>
+ <link type="guide" xref="beginner.vala#buttons"/>
+ <revision version="0.1" date="2012-05-09" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Create widgets with a disrete toggle button</desc>
+ </info>
+
+ <title>CheckButton</title>
+ <media type="image" mime="image/png" src="media/checkbutton.png"/>
+ <p>This CheckButton toggles the title.</p>
+
+<code mime="text/x-csharp" style="numbered"><xi:include href="samples/checkbutton.vala"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.CheckButton.html";>Gtk.CheckButton</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/colorbutton.py.page b/beginners-docs/C/colorbutton.py.page
new file mode 100644
index 0000000..2bbbe6a
--- /dev/null
+++ b/beginners-docs/C/colorbutton.py.page
@@ -0,0 +1,47 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="colorbutton.py">
+ <info>
+ <title type="text">ColorButton (Python)</title>
+ <link type="guide" xref="beginner.py#color-selectors"/>
+ <link type="next" xref="fontchooserwidget.py"/>
+ <revision version="0.1" date="2012-06-03" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A button to launch a color selection dialog</desc>
+ </info>
+
+ <title>ColorButton</title>
+ <media type="image" mime="image/png" src="media/colorbutton.png"/>
+ <p>This ColorButton launches a color selection dialog and prints in the terminal the RGB values of the
color selected.</p>
+
+ <links type="sections" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/colorbutton.py"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="methods">
+ <title>Useful methods for a ColorButton widget</title>
+ <p><code>set_color(color)</code>, where the <code>color</code> is defined as in the example, sets the
color of the ColorButton, which by default is black. <code>get_color()</code> returns the color.</p>
+ <p>In line 23 the <code>"color-set"</code> signal is connected to the callback function
<code>on_color_chosen()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback
function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.</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/GtkColorButton.html";>GtkColorButton</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkColorChooser.html";>GtkColorChooser</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gdk3/stable/gdk3-RGBA-Colors.html";>RGBA
Colors</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/colorbutton.vala.page b/beginners-docs/C/colorbutton.vala.page
new file mode 100644
index 0000000..b1c1a83
--- /dev/null
+++ b/beginners-docs/C/colorbutton.vala.page
@@ -0,0 +1,34 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="colorbutton.vala">
+ <info>
+ <title type="text">ColorButton (Vala)</title>
+ <link type="guide" xref="beginner.vala#color-selectors"/>
+ <link type="seealso" xref="grid.vala"/>
+ <link type="seealso" xref="label.vala"/>
+ <revision version="0.1" date="2012-06-07" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A button to launch a color selection dialog</desc>
+ </info>
+
+ <title>ColorButton</title>
+ <media type="image" mime="image/png" src="media/colorbutton.png"/>
+ <p>RGB values of the selected color are shown in the label.</p>
+
+<code mime="text/x-csharp" style="numbered"><xi:include href="samples/colorbutton.vala"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="http://valadoc.org/gtk+-3.0/Gtk.ColorButton.html";>Gtk.ColorButton</link></p></item>
+ <item><p><link href="http://valadoc.org/gdk-3.0/Gdk.RGBA.html";>Gdk.RGBA</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/combobox.js.page b/beginners-docs/C/combobox.js.page
new file mode 100644
index 0000000..42bd7f1
--- /dev/null
+++ b/beginners-docs/C/combobox.js.page
@@ -0,0 +1,247 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="combobox.js">
+ <info>
+ <title type="text">ComboBox (JavaScript)</title>
+ <link type="guide" xref="beginner.js#menu-combo-toolbar"/>
+ <link type="seealso" xref="GtkApplicationWindow.js" />
+ <link type="seealso" xref="comboboxtext.js" />
+ <link type="seealso" xref="messagedialog.js" />
+ <link type="seealso" xref="treeview_simple_liststore.js" />
+ <revision version="0.1" date="2012-07-09" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Taryn Fox</name>
+ <email>jewelfox fursona net</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A customizable drop-down menu</desc>
+ </info>
+
+ <title>ComboBox</title>
+ <media type="image" mime="image/png" src="media/combobox_multicolumn.png"/>
+ <p>A ComboBox is an extremely customizable drop-down menu. It holds the equivalent of a <link
xref="treeview_simple_liststore.js">TreeView</link> widget that appears when you click on it, complete with a
ListStore (basically a spreadsheet) that says what's in the rows and columns. In this example, our ListStore
has the name of each option in one column, and the name of a stock icon in the other, which the ComboBox then
turns into an icon for each option.</p>
+ <p>You select a whole horizontal row at a time, so the icons aren't treated as separate options. They and
the text beside them make up each option you can click on.</p>
+ <note style="tip"><p>Working with a ListStore can be time-consuming. If you just want a simple text-only
drop-down menu, take a look at the <link xref="comboboxtext.js">ComboBoxText</link>. It doesn't take as much
time to set up, and is easier to work with.</p></note>
+ <links type="section" />
+
+ <section id="imports">
+ <title>Libraries to import</title>
+ <code mime="application/javascript"><![CDATA[
+#!/usr/bin/gjs
+
+const GObject = imports.gi.GObject;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+]]></code>
+ <p>These are the libraries we need to import for this application to run. Remember that the line which
tells GNOME that we're using Gjs always needs to go at the start.</p>
+ </section>
+
+ <section id="applicationwindow">
+ <title>Creating the application window</title>
+ <code mime="application/javascript"><![CDATA[
+const ComboBoxExample = new Lang.Class ({
+ Name: 'ComboBox Example',
+
+ // Create the application itself
+ _init: function () {
+ this.application = new Gtk.Application ({
+ application_id: 'org.example.jscombobox'});
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents windows when active
+ _onActivate: function () {
+ this._window.present ();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function () {
+ this._buildUI ();
+ },
+]]></code>
+ <p>All the code for this sample goes in the ComboBoxExample class. The above code creates a <link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link> for our
widgets and window to go in.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Build the application's UI
+ _buildUI: function () {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow ({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ title: "Welcome to GNOME",
+ default_width: 200,
+ border_width: 10 });
+]]></code>
+ <p>The _buildUI function is where we put all the code to create the application's user interface. The
first step is creating a new <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link> to put all our
widgets into.</p>
+ </section>
+
+ <section id="liststore">
+ <title>Creating the ListStore</title>
+ <code mime="application/javascript"><![CDATA[
+ // Create the liststore to put our options in
+ this._listStore = new Gtk.ListStore();
+ this._listStore.set_column_types ([
+ GObject.TYPE_STRING,
+ GObject.TYPE_STRING]);
+]]></code>
+ <p>This ListStore works like the one used in the <link
xref="treeview_simple_liststore.js">TreeView</link> example. We're giving it two columns, both strings,
because one of them will contain the names of <link
href="http://developer.gnome.org/gtk/2.24/gtk-Stock-Items.html#GTK-STOCK-ABOUT:CAPS";>stock Gtk
icons</link>.</p>
+ <p>If we'd wanted to use our own icons that weren't already built in to GNOME, we'd have needed to use
the <file>gtk.gdk.Pixbuf</file> type instead. Here are a few other types you can use:</p>
+ <list>
+ <item><p><file>GObject.TYPE_BOOLEAN</file> -- True or false</p></item>
+ <item><p><file>GObject.TYPE_FLOAT</file> -- A floating point number (one with a decimal
point)</p></item>
+ <item><p><file>GObject.TYPE_STRING</file> -- A string of letters and numbers</p></item>
+ </list>
+ <note style="tip"><p>You need to put the line <file>const GObject = imports.gi.GObject;</file> at the
start of your application's code, like we did in this example, if you want to be able to use GObject
types.</p></note>
+
+ <code mime="application/javascript"><![CDATA[
+ // This array holds our list of options and their icons
+ let options = [{ name: "Select" },
+ { name: "New", icon: Gtk.STOCK_NEW },
+ { name: "Open", icon: Gtk.STOCK_OPEN },
+ { name: "Save", icon: Gtk.STOCK_SAVE }];
+
+ // Put the options in the liststore
+ for (let i = 0; i < options.length; i++ ) {
+ let option = options[i];
+ let iter = this._listStore.append();
+ this._listStore.set (iter, [0], [option.name]);
+ if ('icon' in option)
+ this._listStore.set (iter, [1], [option.icon]);
+ }
+]]></code>
+ <p>Here we create an array of the text options and their corresponding icons, then put them into the
ListStore in much the same way we would for a <link xref="treeview_simple_liststore.js">TreeView's</link>
ListStore. We only want to put an icon in if there's actually an icon in the options array, so we make sure
to check for that first.</p>
+ <note style="tip"><p>"Select" isn't really an option so much as an invitation to click on our ComboBox,
so it doesn't need an icon.</p></note>
+ </section>
+
+ <section id="combobox">
+ <title>Creating the ComboBox</title>
+ <code mime="application/javascript"><![CDATA[
+ // Create the combobox
+ this._comboBox = new Gtk.ComboBox({
+ model: this._listStore});
+]]></code>
+ <p>Each ComboBox has an underlying "model" it takes all its options from. You can use a TreeStore if you
want to have a ComboBox with branching options. In this case, we're just using the ListStore we already
created.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Create some cellrenderers for the items in each column
+ let rendererPixbuf = new Gtk.CellRendererPixbuf();
+ let rendererText = new Gtk.CellRendererText();
+
+ // Pack the renderers into the combobox in the order we want to see
+ this._comboBox.pack_start (rendererPixbuf, false);
+ this._comboBox.pack_start (rendererText, false);
+
+ // Set the renderers to use the information from our liststore
+ this._comboBox.add_attribute (rendererText, "text", 0);
+ this._comboBox.add_attribute (rendererPixbuf, "stock_id", 1);
+]]></code>
+ <p>This part, again, works much like creating CellRenderers and packing them into the columns of a <link
xref="treeview_simple_liststore.js">TreeView</link>. The biggest difference is that we don't need to create
the ComboBox's columns as separate objects. We just pack the CellRenderers into it in the order we want them
to show up, then tell them to pull information from the ListStore (and what type of information we want them
to expect).</p>
+ <p>We use a CellRendererText to show the text, and a CellRendererPixbuf to show the icons. We can store
the names of the icons' stock types as strings, but when we display them we need a CellRenderer that's
designed for pictures.</p>
+ <note style="tip"><p>Just like with a TreeView, the "model" (in this case a ListStore) and the "view"
(in this case our ComboBox) are separate. Because of that, we can do things like have the columns in one
order in the ListStore, and then pack the CellRenderers that correspond to those columns into the ComboBox in
a different order. We can even create a TreeView or other widget that shows the information in the ListStore
in a different way, without it affecting our ComboBox.</p></note>
+
+ <code mime="application/javascript"><![CDATA[
+ // Set the first row in the combobox to be active on startup
+ this._comboBox.set_active (0);
+
+ // Connect the combobox's 'changed' signal to our callback function
+ this._comboBox.connect ('changed', Lang.bind (this, this._onComboChanged));
+]]></code>
+ <p>We want the "Select" text to be the part people see at first, that gets them to click on the
ComboBox. So we set it to be the active entry. We also connect the ComboBox's <file>changed</file> signal to
a callback function, so that any time someone clicks on a new option something happens. In this case, we're
just going to show a popup with a little haiku.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Add the combobox to the window
+ this._window.add (this._comboBox);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+]]></code>
+ <p>Finally, we add the ComboBox to the window, and tell the window to show itself and everything inside
it.</p>
+ </section>
+
+ <section id="function">
+ <title>Function which handles your selection</title>
+ <code mime="application/javascript"><![CDATA[
+ _selected: function () {
+
+ // The silly pseudohaiku that we'll use for our messagedialog
+ let haiku = ["",
+ "You ask for the new\nwith no thought for the aged\nlike fallen leaves trod.",
+ "Like a simple clam\nrevealing a lustrous pearl\nit opens for you.",
+ "A moment in time\na memory on the breeze\nthese things can't be saved."];
+]]></code>
+ <p>We're going to create a pop-up <link xref="messagedialog.js">MessageDialog</link>, which shows you a
silly haiku based on which distro you select. First, we create the array of haiku to use. Since the first
string in our ComboBox is just the "Select" message, we make the first string in our array blank.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Which combobox item is active?
+ let activeItem = this._comboBox.get_active();
+
+ // No messagedialog if you choose "Select"
+ if (activeItem != 0) {
+ this._popUp = new Gtk.MessageDialog ({
+ transient_for: this._window,
+ modal: true,
+ buttons: Gtk.ButtonsType.OK,
+ message_type: Gtk.MessageType.INFO,
+ text: haiku[activeItem]});
+
+ // Connect the OK button to a handler function
+ this._popUp.connect ('response', Lang.bind (this, this._onDialogResponse));
+
+ // Show the messagedialog
+ this._popUp.show();
+ }
+
+ },
+]]></code>
+ <p>Before showing a MessageDialog, we first test to make sure you didn't choose the "Select" message.
After that, we set its text to be the haiku in the array that corresponds to the active entry in our
ComboBoxText. We do that using the <file>get_active</file> method, which returns the number ID of your
selection.</p>
+ <note style="tip"><p>Other methods you can use include <file>get_active_id</file>, which returns the
text ID assigned by <file>append</file>, and <file>get_active_text</file>, which returns the full text of the
string you selected.</p></note>
+ <p>After we create the MessageDialog, we connect its response signal to the _onDialogResponse function,
then tell it to show itself.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ _onDialogResponse: function () {
+
+ this._popUp.destroy ();
+
+ }
+
+});
+]]></code>
+ <p>Since the only button the MessageDialog has is an OK button, we don't need to test its response_id to
see which button was clicked. All we do here is destroy the popup.</p>
+
+ <code mime="application/javascript"><![CDATA[
+// Run the application
+let app = new ComboBoxExample ();
+app.application.run (ARGV);
+]]></code>
+ <p>Finally, we create a new instance of the finished ComboBoxExample class, and set the application
running.</p>
+ </section>
+
+ <section id="complete">
+ <title>Complete code sample</title>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/combobox.js"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="in-depth">
+ <title>In-depth documentation</title>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.CellRendererPixbuf.html";>Gtk.CellRendererPixbuf</link></p></item>
+ <item><p><link
href="www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.CellRendererText.html">Gtk.CellRendererText</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.ComboBox.html";>Gtk.ComboBox</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.ListStore.html";>Gtk.ListStore</link></p></item>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.MessageDialog.html";>Gtk.MessageDialog</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TreeIter.html";>Gtk.TreeIter</link></p></item>
+</list>
+ </section>
+</page>
diff --git a/beginners-docs/C/combobox.py.page b/beginners-docs/C/combobox.py.page
new file mode 100644
index 0000000..a961c0f
--- /dev/null
+++ b/beginners-docs/C/combobox.py.page
@@ -0,0 +1,51 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="combobox.py">
+ <info>
+ <title type="text">ComboBox (Python)</title>
+ <link type="guide" xref="beginner.py#menu-combo-toolbar"/>
+ <link type="seealso" xref="model-view-controller.py"/>
+ <link type="next" xref="treeview_simple_liststore.py"/>
+ <revision version="0.1" date="2012-06-02" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A widget used to choose from a list of items</desc>
+ </info>
+
+ <title>ComboBox (one column)</title>
+ <media type="image" mime="image/png" src="media/combobox.png"/>
+ <p>This ComboBox prints to the terminal your selection when you change it.</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/combobox.py"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="methods">
+ <title>Useful methods for a ComboBox widget</title>
+ <p>The ComboBox widget is designed around a <em>Model/View/Controller</em> design: the <em>Model</em>
stores the data; the <em>View</em> gets change notifications and displays the content of the model; the
<em>Controller</em>, finally, changes the state of the model and notifies the view of these changes. For more
information and for a list of useful methods for ComboBox see <link xref="model-view-controller.py" />.</p>
+ <p>In line 35 the <code>"changed"</code> signal is connected to the callback function
<code>on_changed()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback
function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.</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/GtkComboBox.html";>GtkComboBox</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkListStore.html";>GtkListStore</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkCellRendererText.html";>GtkCellRendererText</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkCellLayout.html";>GtkCellLayout</link></p></item>
+ <item><p><link href="http://git.gnome.org/browse/pygobject/tree/gi/overrides/Gtk.py";>pygobject -
Python bindings for GObject Introspection</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/combobox.vala.page b/beginners-docs/C/combobox.vala.page
new file mode 100644
index 0000000..bef36b5
--- /dev/null
+++ b/beginners-docs/C/combobox.vala.page
@@ -0,0 +1,34 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="combobox.vala">
+ <info>
+ <title type="text">ComboBox (Vala)</title>
+ <link type="guide" xref="beginner.vala#menu-combo-toolbar"/>
+ <revision version="0.1" date="2012-05-07" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A widget used to choose from a list of items</desc>
+ </info>
+
+ <title>ComboBox</title>
+ <media type="image" mime="image/png" src="media/combobox.png"/>
+ <p>This ComboBox prints to the terminal when you change your selection.</p>
+
+<code mime="text/x-csharp" style="numbered"><xi:include href="samples/combobox.vala"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.ListStore.html";>Gtk.ListStore</link></p></item>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.ComboBox.html";>Gtk.ComboBox</link></p></item>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.CellRendererText.html";>Gtk.CellRendererText</link></p></item>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.CellLayout.set_attributes.html";>set_attributes</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/combobox_multicolumn.py.page b/beginners-docs/C/combobox_multicolumn.py.page
new file mode 100644
index 0000000..1ee5bc5
--- /dev/null
+++ b/beginners-docs/C/combobox_multicolumn.py.page
@@ -0,0 +1,51 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="combobox_multicolumn.py">
+ <info>
+ <title type="text">ComboBox (Python)</title>
+ <link type="guide" xref="beginner.py#menu-combo-toolbar"/>
+ <link type="next" xref="treeview_advanced_liststore.py"/>
+ <revision version="0.1" date="2012-06-03" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A widget used to choose from a list of items</desc>
+ </info>
+
+ <title>ComboBox (two columns)</title>
+ <media type="image" mime="image/png" src="media/combobox_multicolumn.png"/>
+ <p>This ComboBox prints to the terminal your selection when you change it.</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/combobox_multicolumn.py"
parse="text"><xi:fallback/></xi:include></code>
+
+ </section>
+
+ <section id="methods">
+ <title>Useful methods for a ComboBox widget</title>
+ <p>The ComboBox widget is designed around a <em>Model/View/Controller</em> design: the <em>Model</em>
stores the data; the <em>View</em> gets change notifications and displays the content of the model; the
<em>Controller</em>, finally, changes the state of the model and notifies the view of these changes. For more
information and for a list of useful methods for ComboBox see <link xref="model-view-controller.py" />.</p>
+ <p>In line 45 the <code>"changed"</code> signal is connected to the callback function
<code>on_changed()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback
function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.</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/GtkComboBox.html";>GtkComboBox</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkListStore.html";>GtkListStore</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkCellRendererText.html";>GtkCellRendererText</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkCellRendererPixbuf.html";>GtkCellRendererPixbuf</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items.html";>Stock
Items</link></p></item>
+ <item><p><link href="http://git.gnome.org/browse/pygobject/tree/gi/overrides/Gtk.py";>pygobject -
Python bindings for GObject Introspection</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/comboboxtext.js.page b/beginners-docs/C/comboboxtext.js.page
new file mode 100644
index 0000000..224aae7
--- /dev/null
+++ b/beginners-docs/C/comboboxtext.js.page
@@ -0,0 +1,186 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="comboboxtext.js">
+ <info>
+ <title type="text">ComboBoxText (JavaScript)</title>
+ <link type="guide" xref="beginner.js#menu-combo-toolbar"/>
+ <link type="seealso" xref="GtkApplicationWindow.js" />
+ <link type="seealso" xref="messagedialog.js" />
+ <revision version="0.1" date="2012-07-06" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Taryn Fox</name>
+ <email>jewelfox fursona net</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A text-only drop-down menu</desc>
+ </info>
+
+ <title>ComboBoxText</title>
+ <media type="image" mime="image/png" src="media/combobox.png"/>
+ <p>A ComboBox is a drop-down menu. The difference between a <link xref="combobox.js">ComboBox</link> and a
ComboBoxText is that a ComboBoxText just has basic text options, while a full ComboBox uses a ListStore or
TreeStore (which are basically spreadsheets) to show things like branching options, or pictures to go
alongside each choice.</p>
+ <note><p>Unless you need the added features of a full ComboBox, or are comfortable working with ListStores
and TreeStores, you may find it a lot simpler to use a ComboBoxText whenever possible.</p></note>
+ <links type="section" />
+
+ <section id="imports">
+ <title>Libraries to import</title>
+ <code mime="application/javascript"><![CDATA[
+#!/usr/bin/gjs
+
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+]]></code>
+ <p>These are the libraries we need to import for this application to run. Remember that the line which
tells GNOME that we're using Gjs always needs to go at the start.</p>
+ </section>
+
+ <section id="applicationwindow">
+ <title>Creating the application window</title>
+ <code mime="application/javascript"><![CDATA[
+const ComboBoxTextExample = new Lang.Class ({
+ Name: 'ComboBoxText Example',
+
+ // Create the application itself
+ _init: function () {
+ this.application = new Gtk.Application ({
+ application_id: 'org.example.jscomboboxtext'});
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents windows when active
+ _onActivate: function () {
+ this._window.present ();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function () {
+ this._buildUI ();
+ },
+]]></code>
+ <p>All the code for this sample goes in the MessageDialogExample class. The above code creates a <link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link> for our
widgets and window to go in.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Build the application's UI
+ _buildUI: function () {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow ({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ title: "Welcome to GNOME",
+ default_width: 200,
+ border_width: 10 });
+]]></code>
+ <p>The _buildUI function is where we put all the code to create the application's user interface. The
first step is creating a new <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link> to put all our
widgets into.</p>
+ </section>
+
+ <section id="comboboxtext">
+ <title>Creating the ComboBoxText</title>
+ <code mime="application/javascript"><![CDATA[
+ // Create the combobox
+ this._comboBoxText = new Gtk.ComboBoxText();
+
+ // Populate the combobox
+ let distros = ["Select distribution", "Fedora", "Mint", "Suse"];
+ for (let i = 0; i < distros.length; i++)
+ this._comboBoxText.append_text (distros[i]);
+ this._comboBoxText.set_active (0);
+
+ // Connect the combobox's 'changed' signal to our callback function
+ this._comboBoxText.connect ('changed', Lang.bind (this, this._onComboChanged));
+]]></code>
+ <p>After we create the ComboBoxText, we use its <file>append_text</file> method to add text strings to
it. Like the entries in an array, they each have a number for an ID, starting with 0. To make things simpler,
you can actually create an array for your ComboBoxText entries, then use a for loop to append them in order,
like we did here.</p>
+ <p>After we populate the ComboBoxText, we set its first entry to be active, so that we'll see the
"Select distribution" line before we click on it. Then we connect its <file>changed</file> signal to the
_onComboChanged function, so that it's called whenever you make a new selection from the drop-down menu.</p>
+ <note><p>If you'd like to add an entry to a ComboBoxText, you can use the <file>insert_text</file>
method. And if you'd rather use a text string as an ID for each entry than rely on numbers alone, you can use
the <file>append</file> and <file>insert</file> methods. See the links at the bottom of this tutorial for the
details of how to use them.</p></note>
+
+ <code mime="application/javascript"><![CDATA[
+ // Add the combobox to the window
+ this._window.add (this._comboBoxText);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+]]></code>
+ <p>Finally, we add the ComboBoxText to the window, and tell the window to show itself and the widget
inside it.</p>
+ </section>
+
+ <section id="function">
+ <title>Function which handles your selection</title>
+ <code mime="application/javascript"><![CDATA[
+ _onComboChanged: function () {
+
+ // The responses we'll use for our messagedialog
+ let responses = ["",
+ "Fedora is a community distro sponsored by Red Hat.",
+ "Mint is a popular distro based on Ubuntu.",
+ "SUSE is a name shared by two separate distros."];
+]]></code>
+ <p>We're going to create a pop-up <link xref="messagedialog.js">MessageDialog</link>, which shows you a
message based on which distro you select. First, we create the array of responses to use. Since the first
string in our ComboBoxText is just the "Select distribution" message, we make the first string in our array
blank.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Which combobox item is active?
+ let activeItem = this._comboBoxText.get_active();
+
+ // No messagedialog if you chose "Select distribution"
+ if (activeItem != 0) {
+ this._popUp = new Gtk.MessageDialog ({
+ transient_for: this._window,
+ modal: true,
+ buttons: Gtk.ButtonsType.OK,
+ message_type: Gtk.MessageType.INFO,
+ text: responses[activeItem]});
+
+ // Connect the OK button to a handler function
+ this._popUp.connect ('response', Lang.bind (this, this._onDialogResponse));
+
+ // Show the messagedialog
+ this._popUp.show();
+ }
+
+ },
+]]></code>
+ <p>Before showing a MessageDialog, we first test to make sure you didn't choose the "Select
distribution" message. After that, we set its text to be the entry in the array that corresponds to the
active entry in our ComboBoxText. We do that using the <file>get_active</file> method, which returns the
number ID of your selection.</p>
+ <note><p>Other methods you can use include <file>get_active_id,</file> which returns the text ID
assigned by <file>append,</file> and <file>get_active_text,</file> which returns the full text of the string
you selected.</p></note>
+ <p>After we create the MessageDialog, we connect its response signal to the _onDialogResponse function,
then tell it to show itself.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ _onDialogResponse: function () {
+
+ this._popUp.destroy ();
+
+ }
+
+});
+]]></code>
+ <p>Since the only button the MessageDialog has is an OK button, we don't need to test its response_id to
see which button was clicked. All we do here is destroy the popup.</p>
+
+ <code mime="application/javascript"><![CDATA[
+// Run the application
+let app = new ComboBoxTextExample ();
+app.application.run (ARGV);
+]]></code>
+ <p>Finally, we create a new instance of the finished ComboBoxTextExample class, and set the application
running.</p>
+ </section>
+
+ <section id="complete">
+ <title>Complete code sample</title>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/comboboxtext.js"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="in-depth">
+ <title>In-depth documentation</title>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.ComboBoxText.html";>Gtk.ComboBoxText</link></p></item>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.MessageDialog.html";>Gtk.MessageDialog</link></p></item>
+</list>
+ </section>
+</page>
diff --git a/beginners-docs/C/cpp.page b/beginners-docs/C/cpp.page
new file mode 100644
index 0000000..6da5369
--- /dev/null
+++ b/beginners-docs/C/cpp.page
@@ -0,0 +1,31 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:ui="http://projectmallard.org/experimental/ui/";
+ type="guide"
+ id="cpp">
+<info>
+ <title type='link'>C++</title>
+ <link type="guide" xref="index#languages"/>
+ <revision version="3.4" date="2012-04-28" status="stub"/>
+ <credit type="editor">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ </credit>
+ <credit type="editor">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2013</years>
+ </credit>
+</info>
+
+<title>Tutorials in C++</title>
+
+<links type="section" />
+
+<section id="10minutes">
+<title>10 minutes tutorials</title>
+
+
+</section>
+
+
+</page>
diff --git a/beginners-docs/C/dialog.c.page b/beginners-docs/C/dialog.c.page
new file mode 100644
index 0000000..b3e5c2e
--- /dev/null
+++ b/beginners-docs/C/dialog.c.page
@@ -0,0 +1,38 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="dialog.c">
+ <info>
+ <title type="text">Dialog (C)</title>
+ <link type="guide" xref="beginner.c#windows"/>
+ <link type="seealso" xref="label.c"/>
+ <link type="seealso" xref="button.c"/>
+ <revision version="0.1" date="2012-06-14" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Monica Kochofar</name>
+ <email>monicakochofar gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A popup window</desc>
+ </info>
+
+ <title>Dialog</title>
+
+ <media type="image" mime="image/png" src="media/dialog.png"/>
+ <p>A dialog window that pops up when a button is pressed.</p>
+
+ <code mime="text/x-csrc" style="numbered">
+<xi:include href="samples/dialog.c" parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/3.4/GtkApplication.html";>GtkApplication</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/3.4/GtkWindow.html";>GtkWindow</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkDialog.html";>GtkDialog</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkLabel.html";>GtkLabel</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/dialog.js.page b/beginners-docs/C/dialog.js.page
new file mode 100644
index 0000000..1850e89
--- /dev/null
+++ b/beginners-docs/C/dialog.js.page
@@ -0,0 +1,33 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="dialog.js">
+ <info>
+ <title type="text">Dialog (JavaScript)</title>
+ <link type="guide" xref="beginner.js#windows"/>
+ <revision version="0.1" date="2012-05-29" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Taryn Fox</name>
+ <email>jewelfox fursona net</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A popup window</desc>
+ </info>
+
+ <title>Dialog</title>
+ <media type="image" mime="image/png" src="media/dialog.png"/>
+ <p>A customizable popup window, which has a content area and an action area. This example dialog's content
area contains a short message, and its action area contains a button which dismisses the dialog.</p>
+
+<code mime="application/javascript" style="numbered"><xi:include href="samples/dialog.js"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Dialog.html";>Gtk.Dialog</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/dialog.py.page b/beginners-docs/C/dialog.py.page
new file mode 100644
index 0000000..75e3625
--- /dev/null
+++ b/beginners-docs/C/dialog.py.page
@@ -0,0 +1,54 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="dialog.py">
+ <info>
+ <title type="text">Dialog (Python)</title>
+ <link type="guide" xref="beginner.py#windows"/>
+ <link type="seealso" xref="signals-callbacks.py"/>
+ <link type="next" xref="aboutdialog.py" />
+ <revision version="0.1" date="2012-06-11" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A popup window</desc>
+ </info>
+
+ <title>Dialog</title>
+ <media type="image" mime="image/png" src="media/dialog.png"/>
+ <p>A dialog with the response signal connected to a callback function.</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/dialog.py"
parse="text"><xi:fallback/></xi:include></code>
+
+ </section>
+
+ <section id="methods">
+ <title>Useful methods for a Dialog widget</title>
+ <p>In line 16 the signal <code>"clicked"</code> is connected to the callback function
<code>on_button_click()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback
function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.</p>
+ <list>
+ <item><p>Instead of <code>set_modal(True)</code> we could have <code>set_modal(False)</code> followed by
<code>set_destroy_with_parent(True)</code> that would destroy the dialog window if the main window is
closed.</p></item>
+ <item><p><code>add_button(button_text="The Answer", response_id=42)</code>, where <code>42</code> is any
integer, is an alternative to <code>add_button(button_text="text",
response_id=Gtk.ResponseType.RESPONSE)</code>, where <code>RESPONSE</code> could be one of <code>OK, CANCEL,
CLOSE, YES, NO, APPLY, HELP</code>, which in turn correspond to the integers <code>-5, -6,...,
-11</code>.</p></item>
+ </list>
+ </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/GtkDialog.html";>GtkDialog</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/unstable/GtkWindow.html";>GtkWindow</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/dialog.vala.page b/beginners-docs/C/dialog.vala.page
new file mode 100644
index 0000000..6baf2d5
--- /dev/null
+++ b/beginners-docs/C/dialog.vala.page
@@ -0,0 +1,37 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="dialog.vala">
+ <info>
+ <title type="text">Dialog (Vala)</title>
+ <link type="guide" xref="beginner.vala#windows"/>
+ <revision version="0.1" date="2012-04-07" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A popup window</desc>
+ </info>
+
+ <title>Dialog</title>
+ <media type="image" mime="image/png" src="media/dialog.png"/>
+ <p>A dialog with the response signal hooked up to a callback function.</p>
+
+ <code mime="text/x-csharp" style="numbered">
+<xi:include href="samples/dialog.vala" parse="text"><xi:fallback/></xi:include></code>
+
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.Dialog.html";>Gtk.Dialog</link></p></item>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.Dialog.Dialog.with_buttons.html";>Gtk.Dialog.with_buttons</link></p></item>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.Label.html";>Gtk.Label</link></p></item>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.Dialog.get_content_area.html";>get_content_area</link></p></item>
+ <item><p><link xref="response-type"/></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/documentation.page b/beginners-docs/C/documentation.page
new file mode 100644
index 0000000..44067e4
--- /dev/null
+++ b/beginners-docs/C/documentation.page
@@ -0,0 +1,27 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="develop">
+
+ <info>
+ <link type="guide" xref="index#get-involved"/>
+
+ <revision pkgversion="3.4" version="0.1" date="2012-02-06" status="candidate"/>
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2011</years>
+ </credit>
+ <license>
+ <p>Creative Commons Share Alike 3.0</p>
+ </license>
+ </info>
+
+<title>Help develop</title>
+ <p>
+ The <app>GNOME Developer Tutorials</app> are developed and maintained by a volunteer community. You are
welcome to participate.
+ </p>
+ <p>
+ If you would like to <link href="https://live.gnome.org/DocumentationProject/Tasks/DeveloperDocs";>help
develop <app>GNOME Developer Tutorials</app></link>, you can get in touch with the developers using <link
href="https://cbe005.chat.mibbit.com/?url=irc%3A%2F%2Firc.gnome.org%2Fdocs";>irc</link>, or via our <link
href="http://mail.gnome.org/mailman/listinfo/gnome-doc-devel-list";>mailing list</link>.
+ </p>
+
+</page>
diff --git a/beginners-docs/C/entry.c.page b/beginners-docs/C/entry.c.page
new file mode 100644
index 0000000..5fb77bd
--- /dev/null
+++ b/beginners-docs/C/entry.c.page
@@ -0,0 +1,35 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="entry.c">
+ <info>
+ <title type="text">Entry (C)</title>
+ <link type="guide" xref="beginner.c#entry"/>
+ <revision version="0.1" date="2012-06-14" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Monica Kochofar</name>
+ <email>monicakochofar gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A single line text entry field</desc>
+ </info>
+
+ <title>Entry</title>
+
+ <media type="image" mime="image/png" src="media/entry.png"/>
+ <p>This application greets you in the terminal.</p>
+
+ <code mime="text/x-csrc" style="numbered">
+<xi:include href="samples/entry.c" parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/3.4/GtkApplication.html";>GtkApplication</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/3.4/GtkWindow.html";>GtkWindow</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkEntry.html";>GtkEntry</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/entry.js.page b/beginners-docs/C/entry.js.page
new file mode 100644
index 0000000..7dbd4db
--- /dev/null
+++ b/beginners-docs/C/entry.js.page
@@ -0,0 +1,34 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="entry.js">
+ <info>
+ <title type="text">Entry (JavaScript)</title>
+ <link type="guide" xref="beginner.js#entry"/>
+ <revision version="0.1" date="2012-06-03" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Taryn Fox</name>
+ <email>jewelfox fursona net</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A single-line text entry field</desc>
+ </info>
+
+ <title>Entry</title>
+ <media type="image" mime="image/png" src="media/entry.png"/>
+ <p>This application greets you by name through a pop-up window.</p>
+
+<code mime="application/javascript" style="numbered"><xi:include href="samples/entry.js"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Entry.html";>Gtk.Entry</link></p></item>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.MessageDialog.html";>Gtk.MessageDialog</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/entry.py.page b/beginners-docs/C/entry.py.page
new file mode 100644
index 0000000..8b00825
--- /dev/null
+++ b/beginners-docs/C/entry.py.page
@@ -0,0 +1,66 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="entry.py">
+ <info>
+ <title type="text">Entry (Python)</title>
+ <link type="guide" xref="beginner.py#entry"/>
+ <link type="seealso" xref="strings.py" />
+ <link type="next" xref="scale.py" />
+ <revision version="0.2" date="2012-06-23" status="draft"/>
+
+ <credit type="author copyright editor">
+ <name>Marta Maria Casetti</name>
+ <email></email>
+ <years>2012</years>
+ </credit>
+
+ <credit type="author copyright">
+ <name>Sebastian Pölsterl</name>
+ <email>sebp k-d-w org</email>
+ <years>2011</years>
+ </credit>
+ <desc>A single line text entry field</desc>
+ </info>
+
+ <title>Entry</title>
+ <media type="image" mime="image/png" src="media/entry.png"/>
+ <p>This application greets you in the terminal with the name you provide.</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/entry.py"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="methods">
+ <title>Useful methods for an Entry widget</title>
+ <p>In line 14 the signal <code>"activate"</code> is connected to the callback function
<code>cb_activate()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback
function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation. Some of the
signals that a Gtk.Entry widget can emit are: <code>"activate"</code> (emitted when the user activates the
Entry key); <code>"backspace"</code> (emitted when the user activates the Backspace or Shift-Backspace keys);
<code>"copy-clipboard"</code> (Ctrl-c and Ctrl-Insert); <code>"paste-clipboard"</code> (Ctrl-v and
Shift-Insert); <code>"delete-from-cursor"</code> (Delete, for deleting a character; Ctrl-Delete, for deleting
a word); <code>"icon-press"</code> (emitted when the user clicks an activable icon);
<code>"icon-release"</code> (emitted on the button release from a mouse click over an activable icon);
<code>"insert-at-cursor"</code> (emitted when the user initiates the inserti
on of a fixed string at the cursor); <code>"move-cursor"</code> (emitted when the user initiates a cursor
movement); <code>"populate-popup"</code> (emitted before showing the context menu of the entry; it can be
used to add items to it).</p>
+ <list>
+ <item><p><code>get_buffer()</code> and <code>set_buffer(buffer)</code>, where <code>buffer</code> is a
Gtk.EntryBuffer object, can be used to get and set the buffer for the entry.</p></item>
+ <item><p><code>get_text()</code> and <code>set_text("some text")</code> can be used to get and set the
content for the entry.</p></item>
+ <item><p><code>get_text_length()</code> is self-explanatory.</p></item>
+ <item><p><code>get_text_area()</code> gets the area where the entry's text is drawn.</p></item>
+ <item><p>If we set <code>set_visibility(False)</code> the characters in the entry are displayed as the
invisible char. This is the best available in the current font, but it can be changed with
<code>set_invisible_char(ch)</code>, where <code>ch</code> is a Unicode charcater. The latter method is
reversed by <code>unset_invisbile_char()</code>.</p></item>
+ <item><p><code>set_max_length(int)</code>, where <code>int</code> is an integer, truncates every entry
longer than <code>int</code> to have the desired maximum length.</p></item>
+ <item><p>By default, if you press the Entry key the Gtk.Entry emits the signal
<code>"activate"</code>. If you would like to activate the default widget for the window (set using
<code>set_default(widget)</code> on the window), then use <code>set_activates_default(True)</code>.</p></item>
+ <item><p>To set a frame around the entry: <code>set_has_frame(True)</code>.</p></item>
+ <item><p><code>set_placeholder_text("some text")</code> sets the text to be displayed in the entry
when it is empty and unfocused.</p></item>
+ <item><p><code>set_overwrite_mode(True)</code> and <code>set_overwrite_mode(False)</code> are
self-explanatory.</p></item>
+ <item><p>If we have <code>set_editable(False)</code> the user cannot edit the text in the
widget.</p></item>
+ <item><p><code>set_completion(completion)</code>, where <code>completion</code> is a <link
href="http://developer.gnome.org/gtk3/unstable/GtkEntryCompletion.html";><code>Gtk.EntryCompletion</code></link>,
sets completion - or disables it if <code>completion</code> is <code>None</code>.</p></item>
+ <item><p>An Entry widget can display progress or activity information behind the text. We use
<code>set_progress_fraction(fraction)</code>, where <code>fraction</code> is a <code>float</code> between
<code>0.0</code> and <code>1.0</code> inclusive, to fill in the given fraction of the bar. We use
<code>set_progress_pulse_step()</code> to set the fraction of total entry width to move the progress bouncing
block for each call to <code>progress_pulse()</code>. The latter method indicates that some progress is made,
and causes the progress indicator of the entry to enter "activity mode", where a block bounces back and
forth. Each call to <code>progress_pulse()</code> causes the block to move by a little bit (the amount of
movement per pulse is determined, as said before, by <code>set_progress_pulse_step()</code>).</p></item>
+ <item><p>An Entry widget can also show icons. These icons can be activatable by clicking, can be set
up as drag source and can have tooltips. To add an icon, use <code>set_icon_from_stock(icon_position,
stock_id)</code>, or one of <code>set_icon_from_pixbuf(icon_position, pixbuf)</code>,
<code>set_icon_from_icon_name(icon_position, icon_name)</code>, where <code>icon_position</code> is one of
<code>Gtk.EntryIconPosition.PRIMARY</code> (to set the icon at the beginning of the entry)
<code>Gtk.EntryIconPosition.SECONDARY</code> (to set the icon at the end of the entry). To set a tooltip on
an icon, use <code>set_icon_tooltip_text("tooltip text")</code> or <code>set_icon_tooltip_markup("tooltip
text in Pango markup language")</code>.</p></item>
+ </list>
+ </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/GtkEntry.html";>GtkEntry</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/entry.vala.page b/beginners-docs/C/entry.vala.page
new file mode 100644
index 0000000..c0d8e94
--- /dev/null
+++ b/beginners-docs/C/entry.vala.page
@@ -0,0 +1,31 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="entry.vala">
+ <info>
+ <title type="text">Entry (Vala)</title>
+ <link type="guide" xref="beginner.vala#entry"/>
+ <revision version="0.1" date="2012-05-03" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A single line text entry field</desc>
+ </info>
+
+ <title>Entry</title>
+ <media type="image" mime="image/png" src="media/entry.png"/>
+ <p>This application greets you in the terminal.</p>
+
+<code mime="text/x-csharp" style="numbered"><xi:include href="samples/entry.vala"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.Entry.html";>Gtk.Entry</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/error-handling.vala.page b/beginners-docs/C/error-handling.vala.page
new file mode 100644
index 0000000..89098c8
--- /dev/null
+++ b/beginners-docs/C/error-handling.vala.page
@@ -0,0 +1,19 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="error-handling.vala.page">
+ <info>
+ <revision version="0.1" date="2012-02-20" status="stub"/>
+ <link type="guide" xref="beginner.vala#tutorials"/>
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc></desc>
+ </info>
+
+ <title>v. Error handling</title>
+
+</page>
diff --git a/beginners-docs/C/exercises/menubar.vala.exercises
b/beginners-docs/C/exercises/menubar.vala.exercises
new file mode 100644
index 0000000..b8691db
--- /dev/null
+++ b/beginners-docs/C/exercises/menubar.vala.exercises
@@ -0,0 +1,4 @@
+<list type="numbered" xmlns="http://projectmallard.org/1.0/";>
+ <item><p>Add an <gui>About</gui> dialog to the <gui>Help</gui> menu.</p></item>
+ <item><p>Redo the application menu (GMenu) example using an XML UI file and Gtk.Builder.</p></item>
+</list>
diff --git a/beginners-docs/C/filechooserdialog.py.page b/beginners-docs/C/filechooserdialog.py.page
new file mode 100644
index 0000000..3df1919
--- /dev/null
+++ b/beginners-docs/C/filechooserdialog.py.page
@@ -0,0 +1,83 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="filechooserdialog.py">
+ <info>
+ <title type="text">FileChooserDialog (Python)</title>
+ <link type="guide" xref="beginner.py#file-selectors"/>
+ <link type="seealso" xref="gmenu.py"/>
+ <link type="seealso" xref="toolbar_builder.py"/>
+ <link type="seealso" xref="textview.py"/>
+ <link type="next" xref="combobox.py"/>
+ <revision version="0.1" date="2012-08-14" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A dialog suitable for "Open" and "Save" commands</desc>
+ </info>
+
+ <title>FileChooserDialog</title>
+ <media type="image" mime="image/png" src="media/filechooserdialog_save.png"/>
+ <p>This FileChooserDialog saves a text document, which can be opened or written from scratch in a TextView
(see below).</p>
+ <media type="image" mime="image/png" src="media/filechooserdialog_menu.png"/>
+ <p>It is also possible to call a FileChooserDialog to open a new document.</p>
+
+ <links type="sections" />
+
+ <section id="overview">
+ <title>Steps to recreate the example</title>
+ <steps>
+ <item><p>Create a file .ui to describe an app-menu with items "New", "Open", "Save", "Save as", and
"Quit". This can be done with Glade or in a text editor. See <link xref="#xml" /></p></item>
+ <item><p>Create a Python program for a Gtk.TextView with a Gtk.Buffer <code>self.buffer</code>, and a
<code>self.file</code> which will be a Gio.File and we set initially as <code>None</code>.</p></item>
+ <item><p>In this program, create also the actions corresponding to the items in the app-menu, connect
them to callback functions, and import the menu in the <code>do_startup()</code> method with a
Gtk.Builder.</p></item>
+ <item><p>"New" and "Quit" actions and callback functions are quite straightforward, see <link
xref="#code" />. See <link xref="signals-callbacks.py"/> for a more detailed explanation of signals and
callback functions.</p></item>
+ <item><p>"Open" callback should create and open a Gtk.FileChooserDialog for "Open", connected with
another callback function for each of the two "Open" and "Cancel" buttons of the FileChooserDialog.</p></item>
+ <item><p>"Save as" works basically as "Open", but the callback function of the "Save" button depends on
a more complex method <code>save_to_file()</code>.</p></item>
+ <item><p>"Save" can be reduced to the case where the file is <code>None</code>, that is the case where
<code>self.file</code> is a new file, which in turn is the case "Save as"; and to the case where the file is
not <code>None</code>, which in turn is reduced to <code>save_to_file()</code>.</p></item>
+ <item><p>Finally, the method <code>save_to_file()</code>: see <link xref="#code" />, lines 146 -
175.</p></item>
+ </steps>
+ </section>
+
+ <section id="xml">
+ <title>XML file which creates the app-menu</title>
+ <code mime="application/xml" style="numbered"><xi:include href="samples/filechooserdialog.ui"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/filechooserdialog.py"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="methods">
+ <title>Useful methods for a FileChooserDialog</title>
+ <p>Note that the action of the FileChooserDialog can be one of the following:
<code>Gtk.FileChooserAction.OPEN</code> (the file chooser will only let the user pick an existing file)
<code>Gtk.FileChooserAction.SAVE</code> (the file chooser will let the user pick an existing file, or type in
a new filename), <code>Gtk.FileChooserAction.SELECT_FOLDER</code> (the file chooser will let the user pick an
existing folder), <code>Gtk.FileChooserAction.CREATE_FOLDER</code> (the file chooser will let the user name
an existing or new folder).</p>
+ <p>Besides the methods used in the <link xref="#code" />, we have:</p>
+ <list>
+ <item><p><code>set_show_hidden(True)</code> is used to display hidden files and folders.</p></item>
+ <item><p><code>set_select_multiple(True)</code> sets that multiple files can be selected. This is only
relevant if the mode is <code>Gtk.FileChooserAction.OPEN</code> or
<code>Gtk.FileChooserAction.SELECT_FOLDER</code>.</p></item>
+ <item><p>In a "Save as" dialog, <code>set_current_name(current_name)</code> sets
<code>current_name</code> in the file selector, as if entered by the user; <code>current_name</code> can be
something like <em>Untitled.txt</em>. This method should not be used except in a "Save as" dialog.</p></item>
+ <item><p>The default current folder is "recent items". To set another folder use
<code>set_current_folder_uri(uri)</code>; but note you should use this method and cause the file chooser to
show a specific folder only when you are doing a "Save as" command and you already have a file saved
somewhere.</p></item>
+ </list>
+ </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/stable/GtkFileChooserDialog.html";>GtkFileChooserDialog</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkFileChooser.html";>GtkFileChooser</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkWindow.html";>GtkWindow</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkTextView.html";>GtkTextView</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkTextBuffer.html";>GtkTextBuffer</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkScrolledWindow.html";>GtkScrolledWindow</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gio/stable/GFile.html";>GFile</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gio/stable/GSimpleAction.html";>GSimpleAction</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkBuilder.html";>GtkBuilder</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/filechooserdialog.vala.page b/beginners-docs/C/filechooserdialog.vala.page
new file mode 100644
index 0000000..1444272
--- /dev/null
+++ b/beginners-docs/C/filechooserdialog.vala.page
@@ -0,0 +1,45 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="filechooserdialog.vala">
+ <info>
+ <title type="text">FileChooserDialog (Vala)</title>
+ <link type="guide" xref="beginner.vala#file-selectors"/>
+ <link type="seealso" xref="textview.vala"/>
+ <link type="seealso" xref="menubar.vala"/>
+ <link type="seealso" xref="scrolledwindow.vala"/>
+ <revision version="0.1" date="2012-07-01" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A dialog suitable for "Open" and "Save" commands.</desc>
+ </info>
+
+ <title>FileChooserDialog</title>
+ <links type="sections"/>
+ <section id="overview"><title>Overview of the example</title>
+ <p>This example demonstrates how the FileChooserDialog can be used. It is incorporated into a very simple
text editor application. All the <link xref="menubar.vala#win-app">actions</link>, including the "open",
"save" and "save-as" commands can be found in the <link xref="gmenu.vala">app-menu</link>. Here, the
app-menu is created using an XML UI file, which is then imported into the application using Gtk.Builder.</p>
+ </section>
+ <section id="xml"><title>XML UI file which creates the app-menu</title>
+<code mime="application/xml" style="numbered"><xi:include href="samples/filechooserdialog.ui"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+ <section id="vala-code"><title>Vala Code</title>
+ <code mime="text/x-csharp" style="numbered"><xi:include href="samples/filechooserdialog.vala"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+ <section id="api"><title>Relevant API documentation</title>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="http://valadoc.org/gtk+-3.0/Gtk.FileChooser.html";>FileChooser</link></p></item>
+ <item><p><link
href="http://valadoc.org/gtk+-3.0/Gtk.FileChooserDialog.html";>FileChooserDialog</link></p></item>
+ <item><p><link href="http://valadoc.org/gtk+-3.0/Gtk.Builder.html";>Gtk.Builder</link></p></item>
+ <item><p><link href="http://valadoc.org/gio-2.0/GLib.ActionEntry.html";>GLib.ActionEntry</link></p></item>
+</list>
+</section>
+</page>
diff --git a/beginners-docs/C/fontchooserwidget.py.page b/beginners-docs/C/fontchooserwidget.py.page
new file mode 100644
index 0000000..f8f501c
--- /dev/null
+++ b/beginners-docs/C/fontchooserwidget.py.page
@@ -0,0 +1,49 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="fontchooserwidget.py">
+ <info>
+ <title type="text">FontChooserWidget (Python)</title>
+ <link type="guide" xref="beginner.py#font-selectors"/>
+ <link type="seealso" xref="signals-callbacks.py"/>
+ <link type="next" xref="filechooserdialog.py"/>
+ <revision version="0.2" date="2012-05-05" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A widget to choose a font</desc>
+ </info>
+
+ <title>FontChooserWidget</title>
+
+ <media type="image" mime="image/png" src="media/fontchooserwidget.png"/>
+ <p>A FontChooserWidget with a callback function.</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/fontchooserwidget.py"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+ <section id="methods">
+ <title>Useful methods for a FontChooserWidget</title>
+ <p>In line 16 the <code>"notify::font"</code> signal from the widget is connected to the callback
function <code>font_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback
function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.</p>
+ <list>
+ <item><p>To set the font which is initially selected, use <code>set_font(font)</code> (where
<code>font</code> is the font name) or <code>set_font_desc(font)</code> (where <code>font</code> is the
PangoFontDescription).</p></item>
+ <item><p>To get the selected font use <code>get_font()</code> or
<code>get_font_desc()</code>.</p></item>
+ <item><p>To change the text which is shown in the preview area, use <code>set_preview_text()</code>.
</p></item>
+ </list>
+ </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/GtkFontChooserWidget.html";>GtkFontChooserWidget</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/getting-ready.page b/beginners-docs/C/getting-ready.page
new file mode 100644
index 0000000..1aab11f
--- /dev/null
+++ b/beginners-docs/C/getting-ready.page
@@ -0,0 +1,71 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="getting-ready">
+
+ <info>
+ <title type="link">Install GNOME development tools</title>
+ <link type="guide" xref="index#start"/>
+ <revision pkgversion="0.1" version="0.1" date="2011-03-21" status="review"/>
+ <credit type="author">
+ <name>GNOME Documentation Project</name>
+ <email>gnome-doc-list gnome org</email>
+ </credit>
+ </info>
+
+<title>Getting ready for GNOME development</title>
+
+<section id="install">
+<title>Install the required tools</title>
+<p>Before you can start coding you will have to install the required tools for
+GNOME development on your computer. This shouldn't take you more than ten
+minutes.</p>
+
+<section id="auto">
+<title>Automatic installation</title>
+<p>On an up-to-date distribution you should be able to simply install the required packages by clicking
+on <link href="media/gnome-devtools.catalog">Install now</link>.</p>
+</section>
+
+<section id="manual">
+<title>Manual installation</title>
+<p>If you prefer manual installation you can find the instructions for the various distributions in the
+<link href="http://live.gnome.org/DeveloperTools/Installation";>GNOME wiki</link>.
+Click on the image to go directly to the installation page for your distribution:
+</p>
+<list>
+ <item><p>
+ <link href="http://live.gnome.org/DeveloperTools/Installation/Ubuntu";>
+ <media type="image" mime="image/png" src="media/ubuntu.png">Ubuntu</media>
+ </link></p>
+ </item>
+ <item><p>
+ <link href="http://live.gnome.org/DeveloperTools/Installation/Fedora";>
+ <media type="image" mime="image/png" src="media/fedora.png">Fedora</media>
+ </link></p>
+ </item>
+ <item><p>
+ <link href="http://live.gnome.org/DeveloperTools/Installation/OpenSuSE";>
+ <media type="image" mime="image/png" src="media/opensuse.png">OpenSuSE</media>
+ </link></p>
+ </item>
+ <item><p><link href="http://live.gnome.org/DeveloperTools/Installation";>Others</link></p></item>
+</list>
+</section>
+
+</section>
+
+<section id="required">
+<title>Required versions</title>
+<p>The guides assume that you have at least the following versions of the tools
+installed:</p>
+<list>
+ <item><p>Anjuta - 3.0</p></item>
+ <item><p>Devhelp - 3.0</p></item>
+ <item><p>Glade - 3.10</p></item>
+</list>
+<p>Of course, any newer version will also work. Now, we wish you a lot of fun
+with the <link xref="index">Demos</link>.</p>
+</section>
+
+
+</page>
diff --git a/beginners-docs/C/gmenu.c.page b/beginners-docs/C/gmenu.c.page
new file mode 100644
index 0000000..856afe2
--- /dev/null
+++ b/beginners-docs/C/gmenu.c.page
@@ -0,0 +1,34 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="gmenu.c">
+ <info>
+ <title type="text">GMenu (C)</title>
+ <link type="guide" xref="beginner.c#menu-combo-toolbar"/>
+ <revision version="0.1" date="2012-04-28" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A simple implementation of GMenuModel</desc>
+ </info>
+
+ <title>GMenu</title>
+ <media type="image" mime="image/png" src="media/gmenu.c.png"/>
+ <p>A GtkApplication with a simple GMenu and SimpleActions</p>
+ <note><p><em style="bold">You need to be running Gtk3.4 or later for this to work</em></p></note>
+
+<code mime="text/x-vala" style="numbered">
+<xi:include href="samples/gmenu.c" parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="http://developer.gnome.org/gio/unstable/GMenu.html";>GMenu</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gio/stable/GSimpleAction.html";>GSimpleAction</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/gmenu.js.page b/beginners-docs/C/gmenu.js.page
new file mode 100644
index 0000000..9cba380
--- /dev/null
+++ b/beginners-docs/C/gmenu.js.page
@@ -0,0 +1,32 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="gmenu.js">
+ <info>
+ <title type="text">GMenu (JavaScript)</title>
+ <link type="guide" xref="beginner.js#menu-combo-toolbar"/>
+ <revision version="0.1" date="2012-04-07" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A simple implementation of GMenuModel</desc>
+ </info>
+
+ <title>GMenu</title>
+ <media type="image" mime="image/png" src="media/gmenu.js.png"/>
+ <p>A GtkApplication with a simple GMenu and SimpleActions</p>
+
+ <code mime="application/javascript" style="numbered"><xi:include href="samples/gmenu.js"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="http://developer.gnome.org/gio/unstable/GMenu.html";>GMenu</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gio/stable/GSimpleAction.html";>GSimpleAction</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/gmenu.py.page b/beginners-docs/C/gmenu.py.page
new file mode 100644
index 0000000..3ffb857
--- /dev/null
+++ b/beginners-docs/C/gmenu.py.page
@@ -0,0 +1,85 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="gmenu.py">
+ <info>
+ <title type="text">GMenu (Python)</title>
+ <link type="guide" xref="beginner.py#menu-combo-toolbar"/>
+ <link type="seealso" xref="signals-callbacks.py" />
+ <link type="next" xref="menubutton.py"/>
+ <revision version="0.1" date="2012-04-28" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A simple implementation of GMenu</desc>
+ </info>
+
+ <title>GMenu</title>
+ <media type="image" mime="image/png" src="media/gmenu.py.png"/>
+ <p>A GtkApplication with a simple GMenu and SimpleActions</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+ <code mime="text/x-python" style="numbered">
+ <xi:include href="samples/gmenu.py" parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="methods">
+ <title>Useful methods for a GSimpleAction and a GMenu</title>
+
+ <p>In line 33 the signal <code>"activate"</code> from the action <code>new_action</code> (not the menu!)
is connected to the callback function <code>new_cb()</code> using
<code><var>action</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link
xref="signals-callbacks.py"/> for a more detailed explanation.</p>
+
+ <p>Useful methods for a GSimpleAction:</p>
+ <list>
+ <item><p>To create a new action that is <em>stateless</em>, that is, an action that do not retain or
depend on a state given by the action itself, use</p>
+ <code>
+action = Gio.SimpleAction.new("name", parameter_type)</code>
+ <p>where <code>"name"</code> is the name of the action and <code>parameter_type</code> is the type of
the parameters that the action receives when being activated. This can be <code>None</code>, or
<code>GLib.VariantType.new('s')</code> if the parameter is of type <code>str</code>, or instead of
<code>'s'</code> a character as described <link
href="http://developer.gnome.org/glib/unstable/glib-GVariantType.html";>here</link>. To create a new
<em>stateful</em> (i.e. not stateless) action, use</p>
+ <code>
+action = Gio.SimpleAction.new_stateful("name", parameter_type, initial_state)</code>
+ <p>where <code>initial_state</code> is defined as a GVariant - for instance
<code>Glib.Variant.new_string('start')</code>; for a list of possiblities see <link
href="http://developer.gnome.org/glib/unstable/glib-GVariant.html";>here</link>.</p></item>
+ <item><p><code>set_enabled(True)</code> sets the action as enabled; an action must be enabled in
order to be activated or in order to have its state changed from outside callers. This should only be called
by the implementor of the action. Users of the action should not attempt to modify its enabled
flag.</p></item>
+ <item><p><code>set_state(state)</code>, where <code>state</code> is a GVariant, sets the state of the
action, updating the 'state' property to the given value. This should only be called by the implementor of
the action; users of the action should instead call <code>change_state(state)</code> (where
<code>state</code> is as above) to request the change.</p></item>
+ </list>
+
+ <p>Useful methods for a GMenu:</p>
+ <list>
+ <item><p>To insert an item in the menu in position <code>position</code>, use <code>insert(position,
label, detailed_action)</code>, where <code>label</code> is the label that will appear in the menu and
<code>detailed_action</code> is a string composed of the name of the action to which we prepend the prefix
<code>app.</code>. A more detailed discussion of this can be found in <link xref="menubar.py#win-app" />.</p>
+ <p>To append or prepend an item in the menu use respectively <code>append(label,
detailed_action)</code> and <code>prepend(label, detailed_action)</code>.</p></item>
+ <item><p>Another way of adding items to the menu is to create them as <code>GMenuItem</code>s and use
<code>insert_item(position, item)</code>, <code>append_item(item)</code>, or <code>prepend_item(item)</code>;
so for instance we might have:</p>
+ <code>
+about = Gio.MenuItem.new("About", "app.about")
+menu.append_item(about)</code>
+ </item>
+ <item><p>We can also add a whole subsection in a menu using <code>insert_section(position, label,
section)</code>, <code>append_section(label, section)</code>, or <code>prepend_section(label,
section)</code>, where <code>label</code> is the title of the subsection.</p></item>
+ <item><p>To add a submenu that will expand and collapse, use <code>insert_submenu(position, label,
section)</code>, <code>append_submenu(label, section)</code>, or <code>prepend_submenu(label,
section)</code>, where <code>label</code> is the title of the subsection.</p></item>
+ <item><p>To remove an item from the menu, use <code>remove(postion)</code>.</p></item>
+ <item><p>To set a label for the menu, use <code>set_label(label)</code>.</p></item>
+ </list>
+
+ </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/gio/unstable/GMenu.html";>GMenu</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gio/stable/GSimpleAction.html";>GSimpleAction</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/glib/unstable/glib-GVariantType.html";>GVariantType</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/glib/unstable/glib-GVariant.html";>GVariant</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/gmenu.vala.page b/beginners-docs/C/gmenu.vala.page
new file mode 100644
index 0000000..cffed91
--- /dev/null
+++ b/beginners-docs/C/gmenu.vala.page
@@ -0,0 +1,48 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="gmenu.vala">
+ <info>
+ <title type="text">GMenu (Vala)</title>
+ <link type="guide" xref="beginner.vala#menu-combo-toolbar"/>
+ <link type="seealso" xref="aboutdialog.vala"/>
+ <revision version="0.1" date="2012-04-07" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Ryan Lortie</name>
+ <email>desrt desrt ca</email>
+ <years>2012</years>
+ </credit>
+
+ <credit type="author">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ </credit>
+
+ <desc>A simple implementation of GMenuModel</desc>
+ </info>
+
+ <title>GMenu</title>
+ <media type="image" mime="image/png" height="200" src="media/gmenu.vala.png"/>
+ <note style="important">
+ <p><em style="strong">You need to be running GTK+-3.4 or later for this to work</em></p>
+ </note>
+ <note style="bug">
+ <p>This program will not compile with the quit action connected until <link
href="https://bugzilla.gnome.org/show_bug.cgi?id=674090";>Bug #674090</link> is fixed. Therefore, the
problematic line has been commented out.</p>
+ </note>
+ <p>A GtkApplication with a simple GMenu and SimpleActions</p>
+
+<code mime="text/x-csharp" style="numbered"><xi:include href="samples/gmenu.vala"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.Application.html";>Gtk.Application</link></p></item>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.ApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+ <item><p><link href="http://www.valadoc.org/gio-2.0/GLib.Menu.Menu.html";>Menu</link></p></item>
+ <item><p><link href="http://www.valadoc.org/gio-2.0/GLib.Menu.append.html";>append</link></p></item>
+ <item><p><link href="http://www.valadoc.org/gio-2.0/GLib.SimpleAction.html";>SimpleAction</link></p></item>
+ <item><p><link
href="http://www.valadoc.org/gio-2.0/GLib.ActionMap.add_action.html";>add_action</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/grid.c.page b/beginners-docs/C/grid.c.page
new file mode 100644
index 0000000..5df961e
--- /dev/null
+++ b/beginners-docs/C/grid.c.page
@@ -0,0 +1,37 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="grid.c">
+ <info>
+ <title type="text">Grid (C)</title>
+ <link type="guide" xref="beginner.c#layout"/>
+ <revision version="0.1" date="2012-06-04" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Monica Kochofar</name>
+ <email>monicakochofar gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Pack widgets in rows and columns</desc>
+ </info>
+
+ <title>Grid</title>
+
+ <media type="image" mime="image/png" src="media/grid.png"/>
+ <p>A button widget connected to a progress bar.</p>
+
+ <code mime="text/x-csrc" style="numbered">
+<xi:include href="samples/grid.c" parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/3.4/GtkApplication.html";>GtkApplication</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/3.4/GtkWindow.html";>GtkWindow</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkProgressBar.html";>GtkProgressBar</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkButton.html";>GtkButton</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkGrid.html";>GtkGrid</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/grid.js.page b/beginners-docs/C/grid.js.page
new file mode 100644
index 0000000..1fa78b0
--- /dev/null
+++ b/beginners-docs/C/grid.js.page
@@ -0,0 +1,39 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="grid.js">
+ <info>
+ <title type="text">Grid (JavaScript)</title>
+ <link type="guide" xref="beginner.js#layout"/>
+ <revision version="0.1" date="2012-05-26" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Susanna Huhtanen</name>
+ <email>ihmis suski gmail com</email>
+ <years>2012</years>
+ </credit>
+ <credit type="editor">
+ <name>Taryn Fox</name>
+ <email>jewelfox fursona net</email>
+ </credit>
+
+ <desc>Pack widgets in rows and columns</desc>
+ </info>
+
+ <title>Grid</title>
+ <media type="image" mime="image/png" src="media/grid.png"/>
+ <p>A button widget connected to a progress bar, inside of a grid which handles the layout.</p>
+
+<code mime="application/javascript" style="numbered"><xi:include href="samples/grid.js"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Button.html";>Gtk.Button</link></p></item>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Grid.html";>Gtk.Grid</link></p></item>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.ProgressBar.html";>Gtk.ProgressBar</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/grid.py.page b/beginners-docs/C/grid.py.page
new file mode 100644
index 0000000..4eca655
--- /dev/null
+++ b/beginners-docs/C/grid.py.page
@@ -0,0 +1,63 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ 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"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</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>
+
+ <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>
+
+ <section id="methods">
+ <title>Useful methods for a Grid widget</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>
+
+ </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>
+ </section>
+</page>
diff --git a/beginners-docs/C/grid.vala.page b/beginners-docs/C/grid.vala.page
new file mode 100644
index 0000000..95b3cac
--- /dev/null
+++ b/beginners-docs/C/grid.vala.page
@@ -0,0 +1,33 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="grid.vala">
+ <info>
+ <title type="text">Grid (Vala)</title>
+ <link type="guide" xref="beginner.vala#layout"/>
+ <link type="seealso" xref="button.vala"/>
+ <link type="seealso" xref="progressbar.vala"/>
+ <revision version="0.1" date="2012-05-04" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Pack widgets in rows and columns</desc>
+ </info>
+
+ <title>Grid widget</title>
+ <media type="image" mime="image/png" src="media/grid.png"/>
+ <p>A button widget connected to a progress bar.</p>
+
+<code mime="text/x-csharp" style="numbered"><xi:include href="samples/grid.vala"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.Grid.html";>Gtk.Grid</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/grid_with_entry.js.page b/beginners-docs/C/grid_with_entry.js.page
new file mode 100644
index 0000000..b04f5e8
--- /dev/null
+++ b/beginners-docs/C/grid_with_entry.js.page
@@ -0,0 +1,66 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ type="guide" style="task"
+ id="entry.js">
+ <info>
+ <title type="text">Entry (JavaScript)</title>
+ <link type="guide" xref="beginner.js#entry"/>
+ <revision version="0.1" date="2012-02-19" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Susanna Huhtanen</name>
+ <email>ihmis suski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>How to make an entry widget and connect its contents to a label</desc>
+ </info>
+
+ <title>Entry</title>
+
+ <media type="image" mime="image/png" src="media/grid_with_entry.png"/>
+ <p>This an entry widget. An entry widget is a container that you can type in to. </p>
+
+ <code mime="application/javascript" style="numbered"><![CDATA[
+#!/usr/bin/gjs
+Gtk = imports.gi.Gtk;
+Gtk.init(null, 0);
+
+myW = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL});
+myW.title = "Entry";
+myW.connect("destroy", function(){Gtk.main_quit()});
+grid = new Gtk.Grid();
+myW.add(grid);
+
+//create the entry widget
+var entry = new Gtk.Entry();
+entry.set_placeholder_text("Write something here");
+entry.set_width_chars(50);
+//create the first label
+var label = new Gtk.Label({label: "Entry widget: "});
+//create the button for connecting
+var connectionbutton = new Gtk.Button({label: "Click to update label"});
+//create the label for updating the entrys information
+this.resultlabel = new Gtk.Label({
+ label: "Entry contents go here after the click"
+});
+//create a connection between the button and the result label
+connectionbutton.connect("clicked", function(widget, event) {
+ //getting the text from the entry widget and updating the label
+ var whatWasTyped = entry.get_text();
+ this.resultlabel.set_text(whatWasTyped);
+});
+
+grid.attach(label, 1, 1, 1, 1);
+grid.attach_next_to(entry,label,1,1,1);
+grid.attach_next_to(connectionbutton,label,3,1,1);
+grid.attach_next_to(resultlabel,entry,3,1,1);myW.show_all();
+Gtk.main();]]></code>
+<p>In this sample we use the following widgets:
+<link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Window.html";>Gtk.Window</link>,
+<link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Grid.html";>Gtk.Grid</link>,
+<link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Entry.html";>Gtk.Entry</link>,
+<link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Label.html";>Gtk.Label</link>,
+<link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Button.html";>Gtk.Button</link>.</p>
+
+</page>
diff --git a/beginners-docs/C/gtk-beginner.c.page b/beginners-docs/C/gtk-beginner.c.page
new file mode 100644
index 0000000..7b7280c
--- /dev/null
+++ b/beginners-docs/C/gtk-beginner.c.page
@@ -0,0 +1,105 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:e="http://projectmallard.org/experimental/";
+ type="guide" style="task"
+ id="beginner.c">
+
+<info>
+ <title type="text">GTK+ Tutorial for beginners (C)</title>
+ <link type="guide" xref="c#libraries"/>
+ <revision version="0.1" date="2012-02-19" status="stub"/>
+
+ <desc>A beginner's guide to GUI programming using GTK+, including code samples and practice
exercises.</desc>
+ <credit type="author copyright">
+ <name></name>
+ <email></email>
+ <years></years>
+ </credit>
+ <credit type="editor">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2013</years>
+ </credit>
+</info>
+
+<title>GTK+ Tutorial for beginners</title>
+<synopsis>
+ <p>Although these tutorials are designed for beginners, we can't cover all the basics. Before attempting
to follow these tutorials, you are expected to be familiar with the following concepts:</p>
+<list type="numbered">
+ <item><p>Object oriented programming</p></item>
+ <item><p>The C programming language</p></item>
+</list>
+
+
+<p>By following these tutorials you will learn the basics of GUI programming using GTK+.</p>
+</synopsis>
+
+<section id="tutorials">
+<title>Tutorials</title>
+</section>
+
+<section id="samples">
+<title>Code samples</title>
+ <p>
+ To run the code samples:
+ </p>
+ <steps>
+ <item><p>Copy and paste the code into <var>filename</var>.c</p></item>
+ <item><p>In the terminal type:</p>
+ <screen>gcc <var>filename</var>.c `pkg-config --cflags --libs gtk+-3.0` -o <var>filename</var>
+</screen>
+ <screen>./<var>filename</var></screen>
+ </item>
+ </steps>
+ <note>
+ <p>
+ For more information about compiling GTK+ programs see <link
href="http://developer.gnome.org/gtk3/3.4/gtk-compiling.html";>Compiling GTK+ Applications on UNIX</link>.
+ </p>
+ </note>
+ <p>You can also use the Vala compiler to compile these samples:</p>
+ <steps>
+ <item><p>In the terminal type:</p>
+ <screen>valac --pkg gtk+-3.0 <var>filename</var>.c</screen>
+ </item>
+ <item><p>To run:</p>
+ <screen>./<var>filename</var></screen>
+ </item>
+ </steps>
+ <section id="windows" style="2column"><title>Windows</title>
+ <p></p>
+ </section>
+ <section id="display-widgets" style="2column"><title>Display widgets</title>
+ </section>
+ <section id="buttons" style="2column"><title>Buttons and toggles</title>
+ </section>
+ <section id="entry" style="2column"><title>Numeric and text data entry</title>
+ </section>
+ <section id="multiline" style="2column"><title>Multiline text editor</title>
+ </section>
+ <section id="menu-combo-toolbar" style="2column"><title>Menu, combo box and toolbar widgets</title>
+ </section>
+ <section id="treeview" style="2column"><title>TreeView widget</title>
+ </section>
+ <section id="selectors"><title>Selectors</title>
+ <section id="file-selectors" style="2column"><title>File selectors</title>
+ </section>
+ <section id="font-selectors" style="2column"><title>Font selectors</title>
+ </section>
+ <section id="color-selectors" style="2column"><title>Color Selectors</title>
+ </section>
+ </section>
+ <section id="layout" style="2column"><title>Layout containers</title>
+ </section>
+ <section id="ornaments" style="2column"><title>Ornaments</title>
+ </section>
+ <section id="scrolling" style="2column"><title>Scrolling</title>
+ </section>
+ <section id="misc" style="2column"><title>Miscellaneous</title>
+ </section>
+</section>
+
+<section id="exercises">
+<title>Exercises</title>
+</section>
+
+</page>
diff --git a/beginners-docs/C/gtk-beginner.js.page b/beginners-docs/C/gtk-beginner.js.page
new file mode 100644
index 0000000..d2d6f1d
--- /dev/null
+++ b/beginners-docs/C/gtk-beginner.js.page
@@ -0,0 +1,90 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ type="guide" style="task"
+ id="beginner.js">
+ <info>
+ <title type="text">GTK+ Tutorial for beginners (JavaScript)</title>
+ <link type="guide" xref="js#libraries"/>
+ <revision version="0.2" date="2012-06-10" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Susanna Huhtanen</name>
+ <email>ihmis suski gmail com</email>
+ <years>2012</years>
+ </credit>
+ <credit type="editor">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2013</years>
+ </credit>
+
+ <desc>A beginner's guide to writing GNOME applications in JavaScript, including code samples and
practice exercises.</desc>
+ </info>
+
+ <title>GTK+ Tutorial for beginners</title>
+<synopsis>
+ <p>JavaScript is one of the most popular programming languages on the web. It's not just for the web,
though. If you have even a basic understanding of JavaScript, you can write full-fledged applications for
GNOME. <link href="https://live.gnome.org/GnomeDocuments";>GNOME Documents</link> is written in JavaScript,
and so is <link href="https://live.gnome.org/GnomeShell/Tour";>GNOME Shell</link>, the most basic part of
GNOME.</p>
+ <note style="tip"><p>GNOME Shell is what you see when you click on "Activities" in the top-left corner of
your screen. It also controls the clock and the rest of the top panel. Besides showing how you to write GNOME
applications, these tutorials will also show you how to use JavaScript to write GNOME Shell extensions, which
give it new features or change the way it does things.</p></note>
+</synopsis>
+
+<section id="getting-started">
+<title>Getting Started</title>
+ <p>These tutorials are designed for people who already know how to write in JavaScript, and who have GNOME
installed on their computers already, but who are new to developing GNOME applications. If you don't already
know JavaScript, or if you need help getting GNOME set up, take a look at these resources first:</p>
+<steps>
+ <item><p><link href="http://eloquentjavascript.net/contents.html";>Eloquent JavaScript</link> is a free,
Creative Commons-licensed book, which explains the basics of JavaScript programming. Since you won't be
writing JavaScript for the web, you only need to read up to chapter 10 or so.</p></item>
+ <item><p><link href="http://www.gnome.org/getting-gnome/";>Download GNOME</link> as part of a distribution,
like Fedora, openSUSE, or Ubuntu. Each distribution has its own instructions for how to get GNOME.</p></item>
+ <item><p><link xref="set-up-gedit.js">Set up gedit</link> for writing applications. GNOME's text editor,
gedit, is sometimes just called "text editor".</p></item>
+</steps>
+</section>
+
+
+<section id="tutorials">
+<title>Tutorials</title>
+</section>
+
+<section id="samples">
+<title>Code samples</title>
+ <p>These samples show how to use widgets in your GNOME applications. Each one demonstrates a complete
application which showcases the featured widget. At the end of each sample, you will find links to more
detailed reference material.</p>
+ <p>To run the code samples:</p>
+ <steps>
+ <item><p>Copy and paste the code into <var>filename</var>.js</p></item>
+ <item><p>In the terminal, type:</p>
+ <screen>gjs <var>filename</var>.js</screen></item>
+ </steps>
+
+ <section id="windows" style="2column"><title>Windows</title>
+ </section>
+ <section id="display-widgets" style="2column"><title>Display widgets</title>
+ </section>
+ <section id="buttons" style="2column"><title>Buttons and toggles</title>
+ </section>
+ <section id="entry" style="2column"><title>Numeric and text data entry</title>
+ </section>
+ <section id="multiline" style="2column"><title>Multiline text editor</title>
+ </section>
+ <section id="menu-combo-toolbar" style="2column"><title>Menu, combo box and toolbar widgets</title>
+ </section>
+ <section id="treeview" style="2column"><title>TreeView widget</title>
+ </section>
+ <section id="selectors"><title>Selectors</title>
+ <section id="file-selectors"><title>File selectors</title>
+ </section>
+ <section id="font-selectors"><title>Font selectors</title>
+ </section>
+ <section id="color-selectors"><title>Color Selectors</title>
+ </section>
+ </section>
+ <section id="layout" style="2column"><title>Layout containers</title>
+ </section>
+ <section id="ornaments" style="2column"><title>Ornaments</title>
+ </section>
+ <section id="scrolling" style="2column"><title>Scrolling</title>
+ </section>
+ <section id="miscellaneous" style="2column"><title>Miscellaneous</title>
+ </section>
+</section>
+
+<section id="exercises">
+<title>Exercises</title>
+</section>
+</page>
diff --git a/beginners-docs/C/gtk-beginner.py.page b/beginners-docs/C/gtk-beginner.py.page
new file mode 100644
index 0000000..0b2cd3b
--- /dev/null
+++ b/beginners-docs/C/gtk-beginner.py.page
@@ -0,0 +1,176 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:e="http://projectmallard.org/experimental/";
+ type="guide" style="task"
+ id="gtk-beginner.py">
+
+<info>
+ <title type="text">GTK+ Tutorial for beginners (Python)</title>
+ <link type="guide" xref="py#libraries"/>
+ <revision pkgversion="3.8" date="2013-02-25" status="draft"/>
+
+ <desc>A tutorial for beginners who want to learn how to program GUIs using
+ GTK+ in Python.</desc>
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012 2013</years>
+ </credit>
+ <credit type="editor author">
+ <name>Jim Campbell</name>
+ <email>jwcampbell gmail com</email>
+ <years>2013</years>
+ </credit>
+</info>
+
+<title>GTK+ Tutorial for beginners</title>
+
+<synopsis>
+ <p>This tutorial will teach you the basics of GUI programming using GTK+ in
+ Python. It will walk you through increasingly complex examples and programming
+ theory, but you can also feel free to just go directly to the section that is
+ most helpful to you.</p>
+
+ <p>If you have never programmed before, or are not familiar with the concepts
+ of object oriented programming, you may need to learn a few basics first. The
+ book <link href="http://learnpythonthehardway.org/book/";>Learn Python the Hard
+ Way</link> or <link href="http://docs.python.org/tutorial/index.html";>The
+ Python Tutorial</link> may be a better place for you to start. Once you master
+ the basics, be sure to come back and check out these tutorials.</p>
+</synopsis>
+
+<links type="section" />
+
+<note type="tip">
+<title>To run the code samples</title>
+
+ <p>To run the code samples in the tutorial:</p>
+ <steps>
+ <item><p>Type or copy and paste the code into a file, and save the file with
+ a name like <var>filename</var>.py</p></item>
+ <item><p>To execute the code, type in the terminal:</p>
+ <screen>python <var>filename</var>.py</screen>
+ </item>
+ </steps>
+ <p>After executing the code, you will either see the widget on your screen, or
+ (if you have mistyped some of the code) you will see an error message that
+ will help you identify the problem.</p>
+</note>
+
+<section id="windows">
+ <title>Basic windows</title>
+ <steps>
+ <item><p><link xref="window.py"/></p></item>
+ <item><p><link xref="GtkApplicationWindow.py"/></p></item>
+ </steps>
+</section>
+<section id="images-and-labels">
+ <title>Images and labels</title>
+ <steps>
+ <item><p><link xref="image.py" /></p></item>
+ <item><p><link xref="strings.py" /></p></item>
+ <item><p><link xref="label.py" /></p></item>
+ </steps>
+</section>
+<section id="properties">
+ <title>Introduction to properties</title>
+ <steps>
+ <item><p><link xref="properties.py" /></p></item>
+ </steps>
+</section>
+<section id="grid">
+ <title>Grid, separator and scrolling</title>
+ <steps>
+ <item><p><link xref="grid.py" /></p></item>
+ <item><p><link xref="separator.py" /></p></item>
+ <item><p><link xref="scrolledwindow.py" /></p></item>
+ <item><p><link xref="paned.py" /></p></item>
+ </steps>
+</section>
+<section id="buttons">
+ <title>Signals, callbacks and buttons</title>
+ <steps>
+ <item><p><link xref="signals-callbacks.py" /></p></item>
+ <item><p><link xref="button.py" /></p></item>
+ <item><p><link xref="linkbutton.py" /></p></item>
+ <item><p><link xref="checkbutton.py" /></p></item>
+ <item><p><link xref="togglebutton.py" /></p></item>
+ <item><p><link xref="switch.py" /></p></item>
+ <item><p><link xref="radiobutton.py" /></p></item>
+ <item><p><link xref="buttonbox.py" /></p></item>
+ </steps>
+</section>
+<section id="other-display">
+ <title>Other display widgets</title>
+ <steps>
+ <item><p><link xref="statusbar.py" /></p></item>
+ <item><p><link xref="spinner.py" /></p></item>
+ <item><p><link xref="progressbar.py" /></p></item>
+ </steps>
+</section>
+<section id="entry">
+ <title>Entry widgets</title>
+ <steps>
+ <item><p><link xref="spinbutton.py" /></p></item>
+ <item><p><link xref="entry.py" /></p></item>
+ <item><p><link xref="scale.py" /></p></item>
+ </steps>
+</section>
+<section id="textview">
+ <title>A widget to write and display text</title>
+ <steps>
+ <item><p><link xref="textview.py" /></p></item>
+ </steps>
+</section>
+<section id="dialogs">
+ <title>Dialogs</title>
+ <steps>
+ <item><p><link xref="dialog.py" /></p></item>
+ <item><p><link xref="aboutdialog.py" /></p></item>
+ <item><p><link xref="messagedialog.py" /></p></item>
+ </steps>
+</section>
+<section id="menus">
+ <title>Menus, Toolbars and Tooltips (also: using Glade and GtkBuilder)</title>
+ <steps>
+ <item><p><link xref="gmenu.py" /></p></item>
+ <item><p><link xref="menubutton.py" /></p></item>
+ <item><p><link xref="toolbar.py" /></p></item>
+ <item><p><link xref="tooltip.py" /></p></item>
+ <item><p><link xref="toolbar_builder.py" /></p></item>
+ <item><p><link xref="menubar.py" /></p></item>
+ </steps>
+</section>
+<section id="selectors">
+ <title>Selectors</title>
+ <steps>
+ <item><p><link xref="colorbutton.py" /></p></item>
+ <item><p><link xref="fontchooserwidget.py" /></p></item>
+ <item><p><link xref="filechooserdialog.py" /></p></item>
+ </steps>
+</section>
+<section id="mvc">
+ <title>TreeViews and ComboBoxes (using the M/V/C design)</title>
+ <steps>
+ <item><p><link xref="combobox.py" /></p></item>
+ <item><p><link xref="treeview_simple_liststore.py" /></p></item>
+ <item><p><link xref="treeview_treestore.py" /></p></item>
+ <item><p><link xref="model-view-controller.py" /></p></item>
+ <item><p><link xref="combobox_multicolumn.py" /></p></item>
+ <item><p><link xref="treeview_advanced_liststore.py" /></p></item>
+ <item><p><link xref="treeview_cellrenderertoggle.py" /></p></item>
+ </steps>
+</section>
+<section id="custom">
+ <title>Custom widget</title>
+ <steps>
+ <item><p><link xref="widget_drawing.py" /></p></item>
+ </steps>
+</section>
+
+</page>
diff --git a/beginners-docs/C/gtk-beginner.vala.page b/beginners-docs/C/gtk-beginner.vala.page
new file mode 100644
index 0000000..f7185f1
--- /dev/null
+++ b/beginners-docs/C/gtk-beginner.vala.page
@@ -0,0 +1,94 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:e="http://projectmallard.org/experimental/";
+ type="guide" style="task"
+ id="beginner.vala">
+
+<info>
+ <title type="text">GTK+ Tutorial for beginners (Vala)</title>
+ <link type="guide" xref="vala#libraries"/>
+ <revision version="0.1" date="2012-02-19" status="stub"/>
+
+ <desc>A beginner's guide to GUI programming using GTK+, including code samples and practice
exercises.</desc>
+ <credit type="author">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ </credit>
+ <credit type="editor">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasettii gmail com</email>
+ <years>2013</years>
+ </credit>
+</info>
+
+<title>GTK+ Tutorial for beginners</title>
+<synopsis>
+ <p>Although these tutorials are designed for beginners, we can't cover all the basics. Before attempting
to follow these tutorials, you are expected to be familiar with the following concepts:</p>
+<list type="numbered">
+ <item><p>Object oriented programming</p></item>
+ <item><p>The Vala programming language:</p>
+ <list>
+ <item><p><link href="https://live.gnome.org/Vala/Tutorial";>The Vala Tutorial</link></p></item>
+ <item><p><link href="https://live.gnome.org/Vala/Documentation#Sample_Code";>Sample Vala
code</link></p></item>
+ </list>
+ </item>
+</list>
+
+<p>By following these tutorials you will learn the basics of GUI programming using GTK+.</p>
+</synopsis>
+
+<section id="tutorials">
+<title>Tutorials</title>
+</section>
+
+<section id="samples">
+<title>Code samples</title>
+ <p>
+ To run the code samples:
+ </p>
+ <steps>
+ <item><p>Copy and paste the code into <var>filename</var>.vala</p></item>
+ <item><p>In the terminal type:</p>
+ <screen>valac --pkg gtk+-3.0 <var>filename</var>.vala</screen>
+ <screen>./<var>filename</var></screen>
+ </item>
+ </steps>
+
+ <section id="windows" style="2column"><title>Windows</title>
+ <p></p>
+ </section>
+ <section id="display-widgets" style="2column"><title>Display widgets</title>
+ </section>
+ <section id="buttons" style="2column"><title>Buttons and toggles</title>
+ </section>
+ <section id="entry" style="2column"><title>Numeric and text data entry</title>
+ </section>
+ <section id="multiline" style="2column"><title>Multiline text editor</title>
+ </section>
+ <section id="menu-combo-toolbar" style="2column"><title>Menu, combo box and toolbar widgets</title>
+ </section>
+ <section id="treeview"><title>TreeView widget</title>
+ </section>
+ <section id="selectors"><title>Selectors</title>
+ <section id="file-selectors"><title>File selectors</title>
+ </section>
+ <section id="font-selectors"><title>Font selectors</title>
+ </section>
+ <section id="color-selectors"><title>Color Selectors</title>
+ </section>
+ </section>
+ <section id="layout"><title>Layout containers</title>
+ </section>
+ <section id="ornaments"><title>Ornaments</title>
+ </section>
+ <section id="scrolling"><title>Scrolling</title>
+ </section>
+ <section id="misc"><title>Miscellaneous</title>
+ </section>
+</section>
+
+<section id="exercises">
+<title>Exercises</title>
+</section>
+
+</page>
diff --git a/beginners-docs/C/hello-world.vala.page b/beginners-docs/C/hello-world.vala.page
new file mode 100644
index 0000000..2e3362f
--- /dev/null
+++ b/beginners-docs/C/hello-world.vala.page
@@ -0,0 +1,22 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ type="guide" style="task"
+ id="hello-world.vala">
+
+ <info>
+ <link type="guide" xref="beginner.vala#tutorials"/>
+ <revision version="0.1" date="2012-02-20" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc></desc>
+ </info>
+
+ <title>i. Hello World</title>
+
+
+</page>
diff --git a/beginners-docs/C/helloWorld.js.page b/beginners-docs/C/helloWorld.js.page
new file mode 100644
index 0000000..6c93a4d
--- /dev/null
+++ b/beginners-docs/C/helloWorld.js.page
@@ -0,0 +1,182 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="helloWorld.js">
+
+ <info>
+ <title type="text">Hello World (JavaScript)</title>
+ <link type="guide" xref="beginner.js#tutorials" group="#first"/>
+
+ <revision version="0.1" date="2012-02-19" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Susanna Huhtanen</name>
+ <email>ihmis suski gmail com</email>
+ <years>2012</years>
+ </credit>
+ <credit type="editor">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ </credit>
+
+ <desc>A basic "hello, world" application</desc>
+ </info>
+
+ <title>Hello World</title>
+ <media type="image" mime="image/png" style="floatend" src="media/helloWorld.png"/>
+ <synopsis>
+ <p>This tutorial will demonstrate how to:</p>
+ <list style="numbered">
+ <item><p>create a small "Hello, World" application using JavaScript and GTK+</p></item>
+ <item><p>make the <file>.desktop</file> file</p></item>
+ <item><p>how to set up the build system</p></item>
+ </list>
+ </synopsis>
+
+
+
+ <links type="section" />
+
+ <section id="HelloWorld"><title>Create the HelloWorld program</title>
+
+ <links type="section" />
+
+ <section id="script"><title>Script for running the application</title>
+ <p>This needs to be the first line of your script:</p>
+ <code mime="application/javascript"><![CDATA[#!/usr/bin/gjs]]></code>
+ <p>It tells the script to use <link href="https://live.gnome.org/Gjs/";>Gjs</link>. Gjs is a JavaScript
binding for GNOME.</p>
+ </section>
+
+
+ <section id="imports"><title>Libraries to import</title>
+ <code mime="application/javascript"><![CDATA[const Lang = imports.lang;
+const Gtk = imports.gi.Gtk;]]></code>
+ <p>In order for our script to work with GNOME, we need to import GNOME libraries via GObject
Introspection. Here we import the language bindings and GTK+, the library which contains the graphical
widgets used to make GNOME applications. </p>
+ </section>
+
+ <section id="mainwindow"><title>Creating the main window for the application</title>
+ <code mime="application/javascript"><![CDATA[const Application = new Lang.Class({
+ //A Class requires an explicit Name parameter. This is the Class Name.
+ Name: 'Application',
+
+ //create the application
+ _init: function() {
+ this.application = new Gtk.Application();
+
+ //connect to 'activate' and 'startup' signals to handlers.
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ //create the UI
+ _buildUI: function() {
+ this._window = new Gtk.ApplicationWindow({ application: this.application,
+ title: "Hello World!" });
+ },
+
+ //handler for 'activate' signal
+ _onActivate: function() {
+ //show the window and all child widgets
+ this._window.show_all();
+ },
+
+ //handler for 'startup' signal
+ _onStartup: function() {
+ this._buildUI();
+ }
+});
+]]></code>
+
+ <p>GtkApplication initializes GTK+. It also connects the <gui>x</gui> button that's automatically
generated along with the window to the "destroy" signal.</p>
+ <p>We can start building our first window. We do this by creating a variable called <var>_window</var>
and assigning it a new Gtk.ApplicationWindow.</p>
+ <p>We give the window a property called <var>title</var>. The title can be any string you want it to be.
To be on the safe side, it's best to stick to UTF-8 encoding.</p>
+ <p>Now we have a window which has a title and a working "close" button. Let's add the actual "Hello
World" text.</p>
+ </section>
+
+ <section id="label"><title>Label for the window</title>
+ <code mime="application/javascript"><![CDATA[// Add a label widget to your window
+this.label = new Gtk.Label({ label: "Hello World" });
+this._window.add(this.label);
+this._window.set_default_size(200, 200);]]></code>
+
+ <p>A text label is one of the GTK+ widgets we can use, on account of having imported the GTK+ library.
To use it, we create a new variable called label, and assign it a new Gtk.Label. Then we give it properties
inside the curly braces {}. In this case, we're setting the text that the label will hold. Finally, we create
and run the application:</p>
+
+ <code mime="application/javascript"><![CDATA[//run the application
+let app = new Application();
+app.application.run(ARGV);]]></code>
+
+ <p>Gtk.ApplicationWindow can only hold one widget at a time. To construct more elaborate programs you
need to create a holder widget like Gtk.Grid inside the window, and then add all the other widgets to it.</p>
+ </section>
+
+
+ <section id="js"><title>helloWorld.js</title>
+ <p>The complete file:</p>
+ <code mime="application/javascript" style="numbered"><xi:include href="samples/helloWorld.js"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="terminal"><title>Running the application from terminal</title>
+ <p>To run this application, first save it as helloWorld.js. Then open Terminal, go to the folder where
your application is stored and run:</p>
+ <screen><output style="prompt">$ </output><input>gjs helloWorld.js</input></screen>
+ </section>
+ </section>
+
+
+
+ <section id="desktop.in"><title>The <file>.desktop.in</file> file</title>
+ <p>Running applications from the Terminal is useful at the beginning of the application making
process. To have fully working <link href=
"http://library.gnome.org/admin/system-admin-guide/stable/mimetypes-9.html.en";>application integration</link>
in GNOME 3 requires a desktop launcher. For this you need to create a <file>.desktop</file> file. The
<file>.desktop</file> file describes the application name, the used icon and various integration bits. A
deeper insight into the <file>.desktop</file> file can be found <link href=
"http://developer.gnome.org/desktop-entry-spec/";>here</link>. The <file>.desktop.in</file> file will create
the <file>.desktop</file>.</p>
+
+ <note>
+ <p>Before continuing, resave <file>helloWorld.js</file> as <file>helloWorld</file>. Then run this in
the command line:</p>
+ <screen><output style="prompt">$ </output><input>chmod +x helloWorld</input></screen>
+ </note>
+
+ <p>The example shows you the minimum requirements for a <code>.desktop.in</code> file.</p>
+ <code mime="text/desktop" style="numbered"><xi:include href="samples/helloWorld/helloWorld.desktop.in"
parse="text"><xi:fallback/></xi:include></code>
+
+ <p>Now let's go through some parts of the <code>.desktop.in</code> file.</p>
+ <terms>
+ <item><title>Name</title><p>The application name.</p></item>
+ <item><title>Comment</title><p>A short description of the application.</p></item>
+ <item><title>Exec</title><p>Specifies a command to execute when you choose the application from the
menu. In this example exec just tells where to find the <file>helloWorld</file> file and the file takes care
of the rest.</p></item>
+ <item><title>Terminal</title><p>Specifies whether the command in the Exec key runs in a terminal
window.</p></item>
+ </terms>
+
+ <p>To put your application into the appropriate category, you need to add the necessary categories to
the Categories line. More information on the different categories can be found in the <link href =
"http://standards.freedesktop.org/menu-spec/latest/apa.html";>menu specification</link>.</p>
+ <p>In this example we use an existing icon. For a custom icon you need to have a .svg file of your icon,
stored in <file>/usr/share/icons/hicolor/scalable/apps</file>. Write the name of your icon file to the
.desktop.in file, on line 7. More information on icons in: <link
href="http://library.gnome.org/admin/system-admin-guide/stable/themes-11.html.en";> Installing Icons for
Themes </link>, <link href="https://live.gnome.org/GnomeGoals/AppIcon";>Installing Icons for Themes</link> and
<link href="http://freedesktop.org/wiki/Specifications/icon-theme-spec";>on freedesktop.org:
Specifications/icon-theme-spec</link>.</p>
+ </section>
+
+ <section id="autotools"><title>The build system</title>
+ <p>To make your application truly a part of the GNOME 3 system you need to install it with the help of
autotools. The autotools build will install all the necessary files to all the right places. </p>
+ <p>For this you need to have the following files:</p>
+ <links type="section"/>
+
+ <section id="autogen"><title>autogen.sh</title>
+ <code mime="application/x-shellscript" style="numbered"><xi:include
href="samples/helloWorld/autogen.sh" parse="text"><xi:fallback/></xi:include></code>
+
+ <p>After the <file>autogen.sh</file> file is ready and saved, run:</p>
+ <screen><output style="prompt">$ </output><input>chmod +x autogen.sh</input></screen>
+ </section>
+
+
+ <section id="makefile"><title>Makefile.am</title>
+ <code mime="application/x-shellscript" style="numbered"><xi:include
href="samples/helloWorld/Makefile.am" parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+
+ <section id="configure"><title>configure.ac</title>
+ <code mime="application/x-shellscript" style="numbered"><xi:include
href="samples/helloWorld/configure.ac" parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+
+ <section id="readme"><title>README</title>
+ <p>Information users should read first. This file can be blank.</p>
+
+ <p>When you have the <file>helloWorld</file>, <file>helloWorld.desktop.in</file>,
<file>Makefile.am</file>, <file>configure.ac</file> and <file>autogen.sh</file> files with correct
information and rights, the <file>README</file> file can include the following instructions:</p>
+ <code mime="text/readme" style="numbered"><xi:include href="samples/helloWorld/README"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <!-- TODO: How to make a custom icon with autotools -->
+
+ </section>
+</page>
diff --git a/beginners-docs/C/hellognome.js.page b/beginners-docs/C/hellognome.js.page
new file mode 100644
index 0000000..5992553
--- /dev/null
+++ b/beginners-docs/C/hellognome.js.page
@@ -0,0 +1,196 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="topic" style="task"
+ id="hellognome.js">
+ <info>
+ <link type="guide" xref="beginner.js#tutorials" />
+ <revision version="0.1" date="2012-07-17" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Taryn Fox</name>
+ <email>jewelfox fursona net</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Your first GNOME application!</desc>
+ </info>
+
+ <title>1. Hello, GNOME!</title>
+ <synopsis>
+ <p>This tutorial will show you how to write your first GNOME application in JavaScript. You will use
JavaScript to write for GNOME the same way you would for the web. Afterwards, you will learn how to use
"native" widgets, to write applications that look and feel like other GNOME apps.</p>
+ <note style="warning"><p>Have you gotten GNOME installed on your computer, and <link
xref="set-up-gedit.js">gedit</link> set up to write code with? You'll want to do these things
first.</p></note>
+ </synopsis>
+
+ <links type="section" />
+
+ <section id="webapp">
+ <title>Let's start with a web page</title>
+
+ <p>Here's some basic HTML, CSS, and JavaScript code. Does this look familiar?</p>
+ <code mime="application/javascript" style="numbered"><![CDATA[
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Hello, GNOME!</title>
+
+ <!-- Use JavaScript to show a greeting when someone clicks the button -->
+ <script type="application/javascript">
+ function greeting () {
+ document.getElementById ("greeting").innerHTML = ("O hai!");
+ }
+ </script>
+
+ <!-- Very basic CSS style using the GNOME font -->
+ <style type="text/css">
+ body {
+ font-face: Cantarell, sans-serif;
+ text-align: center; }
+ </style>
+
+ </head>
+ <body>
+ <br /> <br />
+ <button type="button" onclick="greeting()">Hello, GNOME!</button>
+
+ <!-- Empty H1 element gets filled in when the button is clicked -->
+ <h1 id="greeting"></h1>
+ </body>
+</html>
+]]></code>
+
+ <p>Let's save this as <file>hellognome.html</file>, and see what it looks like when we run it!</p>
+
+ <media type="image" mime="image/png" src="media/hellognomewebapp.png"/>
+
+ <p>You <em>can</em> run the above code by opening <file>hellognome.html</file> in a web browser. But
here, we're going to create a GNOME application that runs our web app inside of it, just like you see in the
screenshot. You'll be able to resize and maximize the window, and click the X in the corner to close it, just
like you'd expect from any other GNOME app. The difference is that this one will run our web code inside of
it.</p>
+ <p>The best part? We're going to continue to use JavaScript, to write all the parts that make our app
work with GNOME. Let's look at the code, and see how it's done!</p>
+ </section>
+
+ <section id="window">
+ <title>Creating a GNOME window to frame our web app</title>
+
+ <p>First, we need to tell GNOME that this is a JavaScript application, which uses gjs. Gjs is GNOME's
way of turning your JavaScript code into instructions it understands, so this line always has to go at the
start of your applications.</p>
+ <code mime="application/javascript"><![CDATA[
+#!/usr/bin/gjs
+]]></code>
+ <p>After that, we need to tell GNOME which libraries we want to import.</p>
+ <code mime="application/javascript"><![CDATA[
+const GLib = imports.gi.GLib;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+const Webkit = imports.gi.WebKit;
+]]></code>
+ <p>Just like how add-on libraries like jQuery let us do extra things with JavaScript, each of these
libraries gives us new capabilities for our GNOME apps:</p>
+ <steps>
+ <item><p><file>Gtk</file> and <file>Lang</file> are basic parts of any GNOME application, which let
you create windows and widgets and tie them together.</p></item>
+ <item><p><file>GLib</file> is a helper library, which lets us do things like tell GNOME where the
<file>hellognome.html</file> file we created is.</p></item>
+ <item><p>And <file>Webkit</file> is a web rendering engine, which we'll use to basically create a
browser window to open our HTML file with.</p></item>
+ </steps>
+
+ <p>Now we create the application itself:</p>
+ <code mime="application/javascript"><![CDATA[
+const HelloGNOME = new Lang.Class ({
+ Name: 'Hello GNOME',
+]]></code>
+ <p>This will look familiar to you if you've worked with object-oriented JavaScript before. That's right;
our whole application is a class called HelloGNOME. And as you can see, we've given it a property that says
what its name is.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Create the application itself
+ _init: function () {
+ this.application = new Gtk.Application ();
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents windows when active
+ _onActivate: function () {
+ this._window.present ();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function () {
+ this._buildUI ();
+ },
+]]></code>
+ <p>Here's some code you will more or less copy-and-paste for every JavaScript application you build. It
creates a new Application, and then binds its activate and startup signals to functions that make the window
show itself and build its user interface, respectively.</p>
+ <p>What does that mean? Well, everything in a GNOME application sends out a signal when something
important happens. A button might send out the clicked signal when you click on it, for instance. Our job is
to connect the signals to functions which handle them, and make the things that we want to have happen occur.
We do this using each object's connect method, which takes two arguments: The signal we want to handle, and
the Lang.bind function, which we have to use to tell connect which function we want to have handle the
signal.</p>
+ <p>In this case, we want _onActivate to handle the activate signal, and _onStartup to handle the startup
signal. _onActivate just tells the window to present itself; so basically, whenever you
<keyseq><key>Alt</key> <key>Tab</key></keyseq> to the application it appears, like you would expect it to.
_onStartup calls _buildUI, which is the function that creates our user interface and is the next part that we
will look at.</p>
+ <note style="tip"><p>When you copy and paste the above code for your own applications, be sure to change
the name to a unique one each time.</p></note>
+ </section>
+
+ <section id="ui">
+ <title>Designing our window's UI</title>
+ <p>In the _buildUI function, we're going to tell GNOME about our window and the things inside it, one at
a time. After that, we're going to connect everything together and put it all on display.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Build the application's UI
+ _buildUI: function () {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow ({
+ application: this.application,
+ title: "Welcome to GNOME",
+ default_height: 200,
+ default_width: 400,
+ window_position: Gtk.WindowPosition.CENTER });
+]]></code>
+
+ <p>The first object we create is an ApplicationWindow. It needs a title to go in the title bar, and its
application property needs to be the application that we created, above. Beyond that, there are various ways
of customizing how it looks, which the <link xref="GtkApplicationWindow.js">ApplicationWindow</link>
reference page will go into more detail about. As you can see here, we gave it a default height and width
(measured in pixels), and told GNOME we want our window to appear in the center of the screen.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Create a webview to show the web app
+ this._webView = new Webkit.WebView ();
+
+ // Put the web app into the webview
+ this._webView.load_uri (GLib.filename_to_uri (GLib.get_current_dir() +
+ "/hellognome.html", null));
+]]></code>
+ <p>Remember how we imported Webkit right at the start? Here we're creating a new instance of a Webkit
class called a WebView, which is more or less a browser window you can put inside of your app. After that, we
then give it the URI that we want it to load when the application starts up.</p>
+ <p>We <em>could</em> just give it a web URI, like <link href="http://gnome.org";>http://gnome.org</link>.
Instead, here we use a couple of GLib helper functions to tell the WebView where our
<file>hellognome.html</file> file is. GLib.get_current_dir returns the directory that our app's running in,
and GLib.filename_to_uri turns our file's path and filename into a URI that the WebView's load_uri function
understands. (filename_to_uri's second parameter should be null unless you know what it's used for and have a
reason for changing it.)</p>
+ <code mime="application/javascript"><![CDATA[
+ // Put the webview into the window
+ this._window.add (this._webView);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+
+});
+]]></code>
+ <p>Each window can hold one, and only one, widget. Normally, we'd use a container widget like a <link
xref="grid.js">Grid</link> to put multiple widgets into, then use the window's add function to add the Grid
to it. Here, we just need the WebView, so that's all we add to the window. After that, as the last part of
the _buildUI function that creates our window, we tell the window to show itself and its contents.</p>
+ <code mime="application/javascript"><![CDATA[
+// Run the application
+let app = new HelloGNOME ();
+app.application.run (ARGV);
+]]></code>
+ <p>Finally, we create a new instance of our HelloGNOME class, and tell GNOME to run it.</p>
+ </section>
+
+ <section id="run">
+ <title>Running your GNOME application</title>
+
+ <p>Now that we've created our first GNOME application, it's time to test it out! You don't need to
compile your app or install any special software for this; GNOME has gjs built in, to let it run GNOME Shell.
Just save <file>hellognome.html</file> and our actual application, <file>hellognome.js</file>, to a directory
you can get to with the terminal. (They usually open onto your home directory, the one that's called by your
username.) After that, open a terminal, go there, and type:</p>
+ <screen> <output style="prompt">$ </output>gjs hellognome.js </screen>
+ <p>You should see more or less the same screenshot as before, with a button that you can click to make a
short message appear.</p>
+
+ <note style="tip">
+ <p>You can use the terminal command</p>
+ <screen> <output style="prompt">$ </output>cd <var>(directory name)</var> </screen>
+ <p>to navigate between directories inside the Terminal, in order to get to where you saved the
files. There is also an extension for Nautilus, GNOME's file manager, which lets you right-click anywhere
inside it to open a terminal window right there. Check the app you use to install new software (like
Add/Remove Programs or the Software Center) for it.</p>
+ </note>
+ </section>
+
+ <section id="whatsnext">
+ <title>What's next?</title>
+
+ <p><link xref="02_welcome_to_the_grid.js">Continue on to the next tutorial</link> to learn how to build
"native" GNOME applications that look and feel like the others, instead of a webview with HTML code inside.
Or take a look at some <link xref="beginner.js#samples">code samples</link>, if you'd like to see example
code for each Gtk widget.</p>
+ <p>Finally, if you want to just build GNOME applications using JavaScript libraries designed for the
web, you can basically stop here and go do that! Take a look at the <link
xref="scrolledwindow.js">ScrolledWindow</link> code sample if you'd like to see how to make a WebView widget
that can scroll to show parts of a larger web page, and check out <link xref="beginner.js#tutorials">the
later tutorials</link> if you'd like to see how to create a .desktop file for your application, which will
let it appear in your desktop's Activities menu with all your other apps.</p>
+ </section>
+
+ <section id="complete">
+ <title>Complete code sample</title>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/hellognome.js"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+</page>
diff --git a/beginners-docs/C/help.vala.page b/beginners-docs/C/help.vala.page
new file mode 100644
index 0000000..37670ff
--- /dev/null
+++ b/beginners-docs/C/help.vala.page
@@ -0,0 +1,20 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="help.vala">
+ <info>
+ <link type="guide" xref="beginner.vala#tutorials" />
+ <revision version="0.1" date="2012-02-20" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc></desc>
+ </info>
+
+ <title>vii. Connecting the Help</title>
+
+</page>
diff --git a/beginners-docs/C/image.c.page b/beginners-docs/C/image.c.page
new file mode 100644
index 0000000..1c5c508
--- /dev/null
+++ b/beginners-docs/C/image.c.page
@@ -0,0 +1,36 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="image.c">
+ <info>
+ <title type="text">Image (C)</title>
+ <link type="guide" xref="beginner.c#display-widgets"/>
+ <revision version="0.1" date="2012-05-23" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Monica Kochofar</name>
+ <email>monicakochofar gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A widget displaying an image</desc>
+ </info>
+
+ <title>Image</title>
+ <media type="image" mime="image/png" src="media/image.png"/>
+ <p>This GtkApplication displays an image file from the current directory.</p>
+ <note><p>
+ If the image file isn't loaded successfully, the image will contain a "broken image" icon. The
<file>filename.png</file> needs to be in the current directory for this code to work. Use your favorite
picture!
+ </p></note>
+
+<code mime="text/x-csrc" style="numbered"><xi:include href="samples/image.c"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/3.4/GtkApplication.html";>GtkApplication</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkWindow.html";>GtkWindow</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkImage.html";>GtkImage</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/image.js.page b/beginners-docs/C/image.js.page
new file mode 100644
index 0000000..280ffca
--- /dev/null
+++ b/beginners-docs/C/image.js.page
@@ -0,0 +1,35 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="image.js">
+ <info>
+ <title type="text">Image (JavaScript)</title>
+ <link type="guide" xref="beginner.js#display-widgets"/>
+ <revision version="0.1" date="2012-05-24" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Taryn Fox</name>
+ <email>jewelfox fursona net</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A widget displaying an image</desc>
+ </info>
+
+ <title>Image</title>
+ <media type="image" mime="image/png" src="media/image.png"/>
+ <p>This GtkApplication displays an image file from the current directory.</p>
+ <note><p>
+ If the image file isn't loaded successfully, the image will contain a "broken image" icon. The
<file>filename.png</file> needs to be in the current directory for this code to work. Use your favorite
picture!
+ </p></note>
+
+<code mime="application/javascript" style="numbered"><xi:include href="samples/image.js"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Image.html";>Gtk.Image</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/image.py.page b/beginners-docs/C/image.py.page
new file mode 100644
index 0000000..5801caa
--- /dev/null
+++ b/beginners-docs/C/image.py.page
@@ -0,0 +1,119 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="topic"
+ id="image.py">
+
+ <info>
+ <title type="text">Image (Python)</title>
+ <link type="seealso" xref="properties.py"/>
+ <link type="next" xref="strings.py"/>
+ <revision version="0.3" date="2013-03-04" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012, 2013</years>
+ </credit>
+
+ <desc>A widget displaying an image</desc>
+ </info>
+
+ <title>Image</title>
+
+ <synopsis><p>Once we have a window, we can add an image inside it.</p></synopsis>
+
+ <links type="section" />
+
+ <section id="example">
+ <title>An example</title>
+
+ <p>An example of code for a window with an image in it.</p>
+
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/image.py"
parse="text"><xi:fallback/></xi:include></code>
+
+ <p>If you run this code, something like the image below should appear on your
+ screen.</p>
+
+ <media type="image" mime="image/png" src="media/image.png"/>
+
+ <p>If the image file is not loaded successfully (for instance if
+ <file>gnome-image.png</file> is not in the current directory), the window will
+ contain a "broken image" icon.</p>
+
+ </section>
+
+ <section id="in-depth">
+ <title>A more in-depth look</title>
+
+
+ <p>Another way to obtain what we have in the example is to create the image as an instance of another
class and add it to the instance of <code>MyWindow</code> in the <code>do_activate(self)</code> method:</p>
+ <code mime="text/x-python">
+# a class to create a window
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="Welcome to GNOME", application=app)
+ self.set_default_size(300, 300)
+
+# a class to create an image
+class MyImage(Gtk.Image):
+ def __init__(self):
+ Gtk.Image.__init__(self)
+ self.set_from_file("gnome-image.png")
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ # create an instance of MyWindow
+ win = MyWindow(self)
+ # create an instance of MyImage and add it to the window
+ win.add(MyImage())
+ # show the window and everything on it
+ win.show_all()</code>
+ </section>
+
+ <section id="methods">
+ <title>Useful methods for an Image widget</title>
+
+ <list>
+ <item><p>To set a stock icon as image, you can use <code>set_from_stock(stock_id, size)</code> where
<code>stock_id</code> is a stock icon such as <code>Gtk.STOCK_ABOUT</code> (more can be found at <link
href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items";>Stock Items</link>, with the caveat that
they should be modified as above) and <code>size</code> is a stock icon size to be chosen from
<code>Gtk.IconSize.INVALID, Gtk.IconSize.MENU, Gtk.IconSize.SMALL_TOOLBAR, Gtk.IconSize.LARGE_TOOLBAR,
Gtk.IconSize.BUTTON, Gtk.IconSize.DND, Gtk.IconSize.DIALOG</code>.</p></item>
+ <item><p>You can also use <code>set_from_icon_name(icon_name, size)</code>, where <code>icon_name</code>
is a stock icon name such as <code>"gtk-about"</code> (more can be found as above) and <code>size</code> is
as above.</p></item>
+ <item><p>To load an image over a network use <code>set_from_pixbuf(pixbuf)</code>, where
<code>pixbuf</code> is a <link
href="http://developer.gnome.org/gdk-pixbuf/unstable//index.html";>GdkPixbuf</link>.</p>
+ <code mime="text/python">
+from gi.repository import Gtk
+from gi.repository import GdkPixbuf
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ # create a window
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="Welcome to GNOME", application=app)
+ self.set_default_size(300, 300)
+
+ # create a pixbuf from file filename="gnome-image.png", with width=32
+ # and height=64 amd boolean preserve_aspect_ratio=False.
+ pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_scale("gnome-image.png", 64, 128, False)
+
+ # create an image
+ image = Gtk.Image()
+ # set the content of the image as the pixbuf
+ image.set_from_pixbuf(pixbuf)
+ # add the image to the window
+ self.add(image)</code>
+ <p>If <code>preserve_aspect_ratio=True</code> we can use <code>new_from_file_at_size(filename, width,
height)</code>. If <code>width</code> or <code>height</code> is <code>-1</code>, it is not constrained.</p>
+ <p>For loading from an input stream, see <code>new_from_stream()</code> and
<code>new_from_stream_at_scale()</code> in the documentation</p>
+ </item>
+ </list>
+ </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/GtkImage.html";>GtkImage</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/unstable/GtkWindow.html";>GtkWindow</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/image.vala.page b/beginners-docs/C/image.vala.page
new file mode 100644
index 0000000..e86d624
--- /dev/null
+++ b/beginners-docs/C/image.vala.page
@@ -0,0 +1,35 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="image.vala">
+ <info>
+ <title type="text">Image (Vala)</title>
+ <link type="guide" xref="beginner.vala#display-widgets"/>
+ <revision version="0.1" date="2012-05-03" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A widget displaying an image</desc>
+ </info>
+
+ <title>Image</title>
+ <media type="image" mime="image/png" src="media/image.png"/>
+ <p>This GtkApplication displays an image file from the current directory.</p>
+ <note><p>
+ If the image file isn't loaded successfully, the image will contain a "broken image" icon. The
<file>filename.png</file> needs to be in the current directory for this code to work. Use your favorite
picture!
+ </p></note>
+<code mime="text/x-csharp" style="numbered"><xi:include href="samples/image.vala"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.Application.html";>GtkApplication</link></p></item>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.ApplicationWindow.html";>GtkApplicationWindow</link></p></item>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.Image.html";>GtkImage</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/index.page b/beginners-docs/C/index.page
new file mode 100644
index 0000000..c898696
--- /dev/null
+++ b/beginners-docs/C/index.page
@@ -0,0 +1,47 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:ui="http://projectmallard.org/experimental/ui/";
+ type="guide"
+ id="index">
+<info>
+ <title type="link">GNOME Tutorials for beginners</title>
+ <credit type="author">
+ <name>GNOME Documentation Team</name>
+ <email>gnome-doc-list gnome org</email>
+ <years>2010, 2011</years>
+ </credit>
+ <credit type="author">
+ <name>Shaun McCance</name>
+ <email>shaunm gnome org</email>
+ <years>2010</years>
+ </credit>
+ <credit type="author">
+ <name>Johannes Schmid</name>
+ <email>jhs gnome org</email>
+ <years>2011</years>
+ </credit>
+ <credit type="editor">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ </credit>
+ <credit type="editor">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2013</years>
+ </credit>
+</info>
+
+<title>GNOME Tutorials for beginners</title>
+
+ <section id="start">
+ <title>How to set up your development environment</title>
+ </section>
+
+ <section id="languages" style="2column">
+ <title>Tutorials</title>
+ </section>
+
+ <section id="get-involved" style="2column">
+ <title>Get Involved</title>
+ </section>
+
+</page>
diff --git a/beginners-docs/C/js.page b/beginners-docs/C/js.page
new file mode 100644
index 0000000..fd657b0
--- /dev/null
+++ b/beginners-docs/C/js.page
@@ -0,0 +1,37 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:ui="http://projectmallard.org/experimental/ui/";
+ type="guide"
+ id="js">
+
+<info>
+ <title type='link'>JavaScript</title>
+ <link type="guide" xref="index#languages" group="#first"/>
+ <revision version="3.4" date="2012-04-28" status="stub"/>
+ <credit type="editor">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ </credit>
+ <credit type="editor">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2013</years>
+ </credit>
+ <credit type="editor">
+ <name>Ekaterina Gerasimova</name>
+ <email>kittykat3756 gmail com</email>
+ </credit>
+</info>
+
+<title>Tutorials in JavaScript</title>
+
+<links type="sections"/>
+
+<section id="libraries">
+<title>Introduction to libraries</title>
+</section>
+
+<section id="10minutes">
+<title>10 minutes tutorials</title>
+</section>
+
+</page>
diff --git a/beginners-docs/C/label.c.page b/beginners-docs/C/label.c.page
new file mode 100644
index 0000000..fe9f917
--- /dev/null
+++ b/beginners-docs/C/label.c.page
@@ -0,0 +1,40 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="label.c">
+ <info>
+ <title type="text">Label (C)</title>
+ <link type="guide" xref="beginner.c#display-widgets"/>
+ <link type="seealso" xref="switch.c"/>
+ <revision version="0.2" date="2012-06-22" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Monica Kochofar</name>
+ <email>monicakochofar gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A widget which displays text</desc>
+ </info>
+
+ <title>Label</title>
+<table>
+ <tr>
+ <td>
+ <media type="image" mime="image/png" src="media/label.png"/>
+ <p>A simple label</p>
+ </td>
+ </tr>
+</table>
+
+<code mime="text/x-csrc" style="numbered"><xi:include href="samples/label.c"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/3.4/GtkApplication.html";>GtkApplication</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkWindow.html";>GtkWindow</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/3.4/GtkLabel.html";>GtkLabel</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/label.js.page b/beginners-docs/C/label.js.page
new file mode 100644
index 0000000..008059f
--- /dev/null
+++ b/beginners-docs/C/label.js.page
@@ -0,0 +1,33 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="label.js">
+ <info>
+ <title type="text">Label (JavaScript)</title>
+ <link type="guide" xref="beginner.js#display-widgets"/>
+ <revision version="0.1" date="2012-05-24" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Taryn Fox</name>
+ <email>jewelfox fursona net</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A label which can contain text</desc>
+ </info>
+
+ <title>Label</title>
+ <media type="image" mime="image/png" src="media/label.png"/>
+ <p>A label displaying a friendly message.</p>
+
+<code mime="application/javascript" style="numbered"><xi:include href="samples/label.js"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Label.html";>Gtk.Label</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/label.py.page b/beginners-docs/C/label.py.page
new file mode 100644
index 0000000..85f0233
--- /dev/null
+++ b/beginners-docs/C/label.py.page
@@ -0,0 +1,93 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="label.py">
+ <info>
+ <title type="text">Label (Python)</title>
+ <link type="guide" xref="beginner.py#display-widgets"/>
+ <link type="seealso" xref="properties.py" />
+ <link type="seealso" xref="strings.py" />
+ <link type="next" xref="properties.py" />
+ <revision version="0.2" date="2012-06-18" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+ <credit type="author">
+ <name>Sebastian Pölsterl</name>
+ <email>sebp k-d-w org</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A widget that displays a small to medium amount of text</desc>
+ </info>
+
+ <title>Label</title>
+ <media type="image" mime="image/png" src="media/label.png"/>
+ <p>A simple label</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/label.py"
parse="text"><xi:fallback/></xi:include></code>
+
+ <p>Another way to obtain what we have in the example is to create the label as an instance of another
class and add it to the instance of <code>MyWindow</code> in the <code>do_activate(self)</code> method:</p>
+ <code mime="text/x-python">
+# a class to define a window
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="Welcome to GNOME", application=app)
+ self.set_default_size(200, 100)
+
+# a class to define a label
+class MyLabel(Gtk.Label):
+ def __init__(self):
+ Gtk.Label.__init__(self)
+ self.set_text("Hello GNOME!")
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ # create an instance of MyWindow
+ win = MyWindow(self)
+ # create an instance of MyLabel
+ label = MyLabel()
+ # and add it to the window
+ win.add(label)
+ # show the window and everything on it
+ win.show_all()</code>
+
+ </section>
+
+ <section id="methods">
+ <title>Useful methods for a Label widget</title>
+ <p>An explanation of how to deal with strings in GTK+ can be found in <link xref="strings.py" />.</p>
+ <list>
+ <item><p><code>set_line_wrap(True)</code> breaks lines if the text of the label exceeds the size of the
widget.</p></item>
+ <item><p><code>set_justify(Gtk.Justification.LEFT)</code> (or <code>Gtk.Justification.RIGHT,
Gtk.Justification.CENTER, Gtk.Justification.FILL</code>) sets the alignment of the lines in the text of the
label relative to each other. The method has no effect on a single-line label.</p></item>
+ <item><p>For decorated text we can use <code>set_markup("text")</code>, where <code>"text"</code> is a
text in the <link href="http://developer.gnome.org/pango/stable/PangoMarkupFormat.html";>Pango Markup
Language</link>. An example:</p>
+ <code mime="text/x-python"><![CDATA[
+label.set_markup("Text can be <small>small</small>, <big>big</big>, "
+ "<b>bold</b>, <i>italic</i> and even point to somewhere "
+ "in the <a href=\"http://www.gtk.org\"; "
+ "title=\"Click to find out more\">internets</a>.")]]></code>
+ </item>
+ </list>
+ </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/GtkLabel.html";>GtkLabel</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/unstable/GtkWindow.html";>GtkWindow</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/label.vala.page b/beginners-docs/C/label.vala.page
new file mode 100644
index 0000000..d06b278
--- /dev/null
+++ b/beginners-docs/C/label.vala.page
@@ -0,0 +1,34 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="label.vala">
+ <info>
+ <title type="text">Label (Vala)</title>
+ <link type="guide" xref="beginner.vala#display-widgets"/>
+ <revision version="0.1" date="2012-04-28" status="review"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A widget which displays text</desc>
+ </info>
+
+ <title>Label</title>
+ <media type="image" mime="image/png" src="media/label.png"/>
+ <p>A simple label</p>
+
+<code mime="text/x-csharp" style="numbered">
+<xi:include href="samples/label.vala" parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.Application.html.content.tpl";>Gtk.Application</link></p></item>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.ApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.Label.html";>Gtk.Label</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/license.page b/beginners-docs/C/license.page
new file mode 100644
index 0000000..a50e3c1
--- /dev/null
+++ b/beginners-docs/C/license.page
@@ -0,0 +1,63 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="license">
+
+ <info>
+ <link type="seealso" xref="index"/>
+ <revision pkgversion="3.4" version="0.1" date="2012-03-08" status="final"/>
+ <desc>Legal information.</desc>
+ </info>
+
+ <title>License</title>
+ <p>
+ <!--
+ Translators: try to use the same translation as the one provided by the CreativeCommons website.
+ If there is no translation for your language, consider providing one to CreativeCommons.
+ -->
+ This work is distributed under a CreativeCommons Attribution-Share Alike
+ 3.0 Unported license.
+ </p>
+ <p>
+ You are free:
+ </p>
+ <terms>
+ <item>
+ <title><em>To share</em></title>
+ <p>To copy, distribute and transmit the work.</p>
+ </item>
+ <item>
+ <title><em>To remix</em></title>
+ <p>To adapt the work.</p>
+ </item>
+ </terms>
+ <p>
+ Under the following conditions:
+ </p>
+ <terms>
+ <item>
+ <title><em>Attribution</em></title>
+ <p>
+ You must attribute the work in the manner specified by the author or
+ licensor (but not in any way that suggests that they endorse you or
+ your use of the work).
+ </p>
+ </item>
+ <item>
+ <title><em>Share Alike</em></title>
+ <p>
+ If you alter, transform, or build upon this work, you may distribute the
+ resulting work only under the same, similar or a compatible license.
+ </p>
+ </item>
+ </terms>
+ <p>
+ <!-- Translators: there are no official localized versions of the legal code, only the deed is
localized. -->
+ For the full text of the license, see the
+ <link href="http://creativecommons.org/licenses/by-sa/3.0/legalcode";>CreativeCommons website</link>,
+ or read the full <link href="http://creativecommons.org/licenses/by-sa/3.0/";>Commons Deed</link>.
+ </p>
+
+<note style="important"><p>
+As a special exception, the copyright holders give you permission to
+copy, modify, and distribute the example code contained in this documentation under the terms of your
choosing, without restriction.</p></note>
+</page>
diff --git a/beginners-docs/C/linkbutton.c.page b/beginners-docs/C/linkbutton.c.page
new file mode 100644
index 0000000..c1ca193
--- /dev/null
+++ b/beginners-docs/C/linkbutton.c.page
@@ -0,0 +1,35 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="linkbutton.c">
+ <info>
+ <title type="text">LinkButton (C)</title>
+ <link type="guide" xref="beginner.c#buttons"/>
+ <revision version="0.1" date="2012-05-31" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Monica Kochofar</name>
+ <email>monicakochofar gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Create buttons bound to a URL</desc>
+ </info>
+
+ <title>LinkButton</title>
+
+ <media type="image" mime="image/png" src="media/linkbutton.png"/>
+ <p>This button links to the GNOME live webpage.</p>
+
+ <code mime="text/x-csrc" style="numbered">
+<xi:include href="samples/linkbutton.c" parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/3.4/GtkApplication.html";>GtkApplication</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/3.4/GtkWindow.html";>GtkWindow</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkLinkButton.html";>GtkLinkButton</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/linkbutton.js.page b/beginners-docs/C/linkbutton.js.page
new file mode 100644
index 0000000..c6c921d
--- /dev/null
+++ b/beginners-docs/C/linkbutton.js.page
@@ -0,0 +1,33 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="linkbutton.js">
+ <info>
+ <title type="text">LinkButton (JavaScript)</title>
+ <link type="guide" xref="beginner.js#buttons"/>
+ <revision version="0.1" date="2012-05-29" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Taryn Fox</name>
+ <email>jewelfox fursona net</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A button that links to a web page</desc>
+ </info>
+
+ <title>LinkButton</title>
+ <media type="image" mime="image/png" src="media/linkbutton.png"/>
+ <p>A button that links to live.gnome.org.</p>
+
+<code mime="application/javascript" style="numbered"><xi:include href="samples/linkbutton.js"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.LinkButton.html";>Gtk.LinkButton</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/linkbutton.py.page b/beginners-docs/C/linkbutton.py.page
new file mode 100644
index 0000000..72e5481
--- /dev/null
+++ b/beginners-docs/C/linkbutton.py.page
@@ -0,0 +1,50 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="linkbutton.py">
+ <info>
+ <title type="text">LinkButton (Python)</title>
+ <link type="guide" xref="beginner.py#buttons"/>
+ <link type="next" xref="checkbutton.py"/>
+ <revision version="0.1" date="2012-05-23" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A button bound to an URL</desc>
+ </info>
+
+ <title>LinkButton</title>
+
+ <media type="image" mime="image/png" src="media/linkbutton.png"/>
+ <p>A button that links to a web page.</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/linkbutton.py"
parse="text"><xi:fallback/></xi:include></code>
+
+ </section>
+ <section id="methods">
+ <title>Useful methods for a LinkButton widget</title>
+ <list>
+ <item><p><code>get_visited()</code> returns the 'visited' state (<code>True</code> or
<code>False</code>) of the URI where the LinkButton points. The button becomes visited when it is
clicked.</p></item>
+ <item><p><code>set_visited(True)</code> sets the 'visited' state of the URI where the LinkButton
points as <code>True</code> (analogously for <code>False</code>).</p></item>
+ <item><p>Each time the button is clicked, the signal <code>"activate-link"</code> is emitted. For an
explanation of signals and callback functions, see <link xref="signals-callbacks.py" />.</p></item>
+ </list>
+ </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/GtkWindow.html";>GtkWindow</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkLinkButton.html";>GtkLinkButton</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/linkbutton.vala.page b/beginners-docs/C/linkbutton.vala.page
new file mode 100644
index 0000000..39fb3aa
--- /dev/null
+++ b/beginners-docs/C/linkbutton.vala.page
@@ -0,0 +1,31 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="linkbutton.vala">
+ <info>
+ <title type="text">LinkButton (Vala)</title>
+ <link type="guide" xref="beginner.vala#buttons"/>
+ <revision version="0.1" date="2012-06-06" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Create buttons bound to a URL</desc>
+ </info>
+
+ <title>LinkButton</title>
+ <media type="image" mime="image/png" src="media/linkbutton.png"/>
+ <p>This button links to GNOME live.</p>
+
+<code mime="text/x-csharp" style="numbered"><xi:include href="samples/linkbutton.vala"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.LinkButton.html";>Gtk.LinkButton</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/media/02_jsgrid_01.png b/beginners-docs/C/media/02_jsgrid_01.png
new file mode 100644
index 0000000..59c1ced
Binary files /dev/null and b/beginners-docs/C/media/02_jsgrid_01.png differ
diff --git a/beginners-docs/C/media/02_jsgrid_02.png b/beginners-docs/C/media/02_jsgrid_02.png
new file mode 100644
index 0000000..f284660
Binary files /dev/null and b/beginners-docs/C/media/02_jsgrid_02.png differ
diff --git a/beginners-docs/C/media/02_jsgrid_03.png b/beginners-docs/C/media/02_jsgrid_03.png
new file mode 100644
index 0000000..7043cb2
Binary files /dev/null and b/beginners-docs/C/media/02_jsgrid_03.png differ
diff --git a/beginners-docs/C/media/02_jsgrid_04.png b/beginners-docs/C/media/02_jsgrid_04.png
new file mode 100644
index 0000000..c73becc
Binary files /dev/null and b/beginners-docs/C/media/02_jsgrid_04.png differ
diff --git a/beginners-docs/C/media/02_jsgrid_05.png b/beginners-docs/C/media/02_jsgrid_05.png
new file mode 100644
index 0000000..872db2e
Binary files /dev/null and b/beginners-docs/C/media/02_jsgrid_05.png differ
diff --git a/beginners-docs/C/media/02_jsgrid_06.png b/beginners-docs/C/media/02_jsgrid_06.png
new file mode 100644
index 0000000..af866fe
Binary files /dev/null and b/beginners-docs/C/media/02_jsgrid_06.png differ
diff --git a/beginners-docs/C/media/02_jsgrid_07.png b/beginners-docs/C/media/02_jsgrid_07.png
new file mode 100644
index 0000000..2cdd9e3
Binary files /dev/null and b/beginners-docs/C/media/02_jsgrid_07.png differ
diff --git a/beginners-docs/C/media/02_jsgrid_08.png b/beginners-docs/C/media/02_jsgrid_08.png
new file mode 100644
index 0000000..113927a
Binary files /dev/null and b/beginners-docs/C/media/02_jsgrid_08.png differ
diff --git a/beginners-docs/C/media/03_jssignal_01.png b/beginners-docs/C/media/03_jssignal_01.png
new file mode 100644
index 0000000..9a4f822
Binary files /dev/null and b/beginners-docs/C/media/03_jssignal_01.png differ
diff --git a/beginners-docs/C/media/03_jssignal_02.png b/beginners-docs/C/media/03_jssignal_02.png
new file mode 100644
index 0000000..7519a1c
Binary files /dev/null and b/beginners-docs/C/media/03_jssignal_02.png differ
diff --git a/beginners-docs/C/media/03_jssignal_03.png b/beginners-docs/C/media/03_jssignal_03.png
new file mode 100644
index 0000000..7ea494f
Binary files /dev/null and b/beginners-docs/C/media/03_jssignal_03.png differ
diff --git a/beginners-docs/C/media/03_jssignal_04.png b/beginners-docs/C/media/03_jssignal_04.png
new file mode 100644
index 0000000..74b1635
Binary files /dev/null and b/beginners-docs/C/media/03_jssignal_04.png differ
diff --git a/beginners-docs/C/media/aboutdialog_GMenu.png b/beginners-docs/C/media/aboutdialog_GMenu.png
new file mode 100644
index 0000000..3089d50
Binary files /dev/null and b/beginners-docs/C/media/aboutdialog_GMenu.png differ
diff --git a/beginners-docs/C/media/button.png b/beginners-docs/C/media/button.png
new file mode 100644
index 0000000..d40396a
Binary files /dev/null and b/beginners-docs/C/media/button.png differ
diff --git a/beginners-docs/C/media/buttonbox_calculator.png b/beginners-docs/C/media/buttonbox_calculator.png
new file mode 100644
index 0000000..a82e7a5
Binary files /dev/null and b/beginners-docs/C/media/buttonbox_calculator.png differ
diff --git a/beginners-docs/C/media/checkbutton.png b/beginners-docs/C/media/checkbutton.png
new file mode 100644
index 0000000..b565131
Binary files /dev/null and b/beginners-docs/C/media/checkbutton.png differ
diff --git a/beginners-docs/C/media/colorbutton.png b/beginners-docs/C/media/colorbutton.png
new file mode 100644
index 0000000..427c28a
Binary files /dev/null and b/beginners-docs/C/media/colorbutton.png differ
diff --git a/beginners-docs/C/media/combobox.png b/beginners-docs/C/media/combobox.png
new file mode 100644
index 0000000..ecb3c67
Binary files /dev/null and b/beginners-docs/C/media/combobox.png differ
diff --git a/beginners-docs/C/media/combobox_multicolumn.png b/beginners-docs/C/media/combobox_multicolumn.png
new file mode 100644
index 0000000..7529311
Binary files /dev/null and b/beginners-docs/C/media/combobox_multicolumn.png differ
diff --git a/beginners-docs/C/media/dialog.png b/beginners-docs/C/media/dialog.png
new file mode 100644
index 0000000..1b957cf
Binary files /dev/null and b/beginners-docs/C/media/dialog.png differ
diff --git a/beginners-docs/C/media/entry.png b/beginners-docs/C/media/entry.png
new file mode 100644
index 0000000..7e111c3
Binary files /dev/null and b/beginners-docs/C/media/entry.png differ
diff --git a/beginners-docs/C/media/fedora.png b/beginners-docs/C/media/fedora.png
new file mode 100644
index 0000000..15b8f44
Binary files /dev/null and b/beginners-docs/C/media/fedora.png differ
diff --git a/beginners-docs/C/media/filechooserdialog_menu.png
b/beginners-docs/C/media/filechooserdialog_menu.png
new file mode 100644
index 0000000..735697b
Binary files /dev/null and b/beginners-docs/C/media/filechooserdialog_menu.png differ
diff --git a/beginners-docs/C/media/filechooserdialog_save.png
b/beginners-docs/C/media/filechooserdialog_save.png
new file mode 100644
index 0000000..801f69c
Binary files /dev/null and b/beginners-docs/C/media/filechooserdialog_save.png differ
diff --git a/beginners-docs/C/media/fontchooserwidget.png b/beginners-docs/C/media/fontchooserwidget.png
new file mode 100644
index 0000000..9747f08
Binary files /dev/null and b/beginners-docs/C/media/fontchooserwidget.png differ
diff --git a/beginners-docs/C/media/gediteditor.png b/beginners-docs/C/media/gediteditor.png
new file mode 100644
index 0000000..cb1d8e4
Binary files /dev/null and b/beginners-docs/C/media/gediteditor.png differ
diff --git a/beginners-docs/C/media/geditview.png b/beginners-docs/C/media/geditview.png
new file mode 100644
index 0000000..5a5cf78
Binary files /dev/null and b/beginners-docs/C/media/geditview.png differ
diff --git a/beginners-docs/C/media/glade_select_toolbar.png b/beginners-docs/C/media/glade_select_toolbar.png
new file mode 100644
index 0000000..13c7e4a
Binary files /dev/null and b/beginners-docs/C/media/glade_select_toolbar.png differ
diff --git a/beginners-docs/C/media/glade_toolbar_common.png b/beginners-docs/C/media/glade_toolbar_common.png
new file mode 100644
index 0000000..0eb64ad
Binary files /dev/null and b/beginners-docs/C/media/glade_toolbar_common.png differ
diff --git a/beginners-docs/C/media/glade_toolbar_edit.png b/beginners-docs/C/media/glade_toolbar_edit.png
new file mode 100644
index 0000000..9f3b50c
Binary files /dev/null and b/beginners-docs/C/media/glade_toolbar_edit.png differ
diff --git a/beginners-docs/C/media/glade_toolbar_editor.png b/beginners-docs/C/media/glade_toolbar_editor.png
new file mode 100644
index 0000000..88d14da
Binary files /dev/null and b/beginners-docs/C/media/glade_toolbar_editor.png differ
diff --git a/beginners-docs/C/media/glade_toolbar_general.png
b/beginners-docs/C/media/glade_toolbar_general.png
new file mode 100644
index 0000000..1359fc9
Binary files /dev/null and b/beginners-docs/C/media/glade_toolbar_general.png differ
diff --git a/beginners-docs/C/media/glade_ui.png b/beginners-docs/C/media/glade_ui.png
new file mode 100644
index 0000000..bbb327f
Binary files /dev/null and b/beginners-docs/C/media/glade_ui.png differ
diff --git a/beginners-docs/C/media/glade_visible_no.png b/beginners-docs/C/media/glade_visible_no.png
new file mode 100644
index 0000000..ae5f69b
Binary files /dev/null and b/beginners-docs/C/media/glade_visible_no.png differ
diff --git a/beginners-docs/C/media/gmenu.c.png b/beginners-docs/C/media/gmenu.c.png
new file mode 100644
index 0000000..bf5b2f5
Binary files /dev/null and b/beginners-docs/C/media/gmenu.c.png differ
diff --git a/beginners-docs/C/media/gmenu.js.png b/beginners-docs/C/media/gmenu.js.png
new file mode 100644
index 0000000..fa5d96e
Binary files /dev/null and b/beginners-docs/C/media/gmenu.js.png differ
diff --git a/beginners-docs/C/media/gmenu.py.png b/beginners-docs/C/media/gmenu.py.png
new file mode 100644
index 0000000..e905c94
Binary files /dev/null and b/beginners-docs/C/media/gmenu.py.png differ
diff --git a/beginners-docs/C/media/gmenu.vala.png b/beginners-docs/C/media/gmenu.vala.png
new file mode 100644
index 0000000..f93e559
Binary files /dev/null and b/beginners-docs/C/media/gmenu.vala.png differ
diff --git a/beginners-docs/C/media/gnome-devtools.catalog b/beginners-docs/C/media/gnome-devtools.catalog
new file mode 100644
index 0000000..37d1b7b
--- /dev/null
+++ b/beginners-docs/C/media/gnome-devtools.catalog
@@ -0,0 +1,17 @@
+[PackageKit Catalog]
+
+# Fedora 15
+## Tools
+InstallPackages(fedora;15)=anjuta;glade3;devhelp;
+## Special GStreamer stuff
+InstallPackages(fedora;15)=gstreamer-plugins-bad-free;gstreamer-plugins-bad-free-extras;
+## C
+InstallPackages(fedora;15)=gtk3-devel;gstreamer-devel;clutter-devel;webkitgtk3-devel;libgda-devel;gcc-c++;gtkmm30-devel;gstreamermm-devel;cluttermm-devel;webkitgtk3-devel;libgdamm-devel;gtkmm30-doc;gstreamermm-doc
+# FIXME: cluttermm-doc libgdamm-doc
+## Python
+InstallPackages(fedora;15)=python;pygobject
+## Vala
+InstallPackages(fedora;15)=vala;vala-devel;vala-tools;vala-doc
+##JavaScript
+InstallPackages(fedora;15)=gjs;gjs-devel
+
diff --git a/beginners-docs/C/media/gnome-image.png b/beginners-docs/C/media/gnome-image.png
new file mode 100644
index 0000000..0064fe6
Binary files /dev/null and b/beginners-docs/C/media/gnome-image.png differ
diff --git a/beginners-docs/C/media/grid.png b/beginners-docs/C/media/grid.png
new file mode 100644
index 0000000..03d087e
Binary files /dev/null and b/beginners-docs/C/media/grid.png differ
diff --git a/beginners-docs/C/media/grid_simple.png b/beginners-docs/C/media/grid_simple.png
new file mode 100644
index 0000000..22fd8bc
Binary files /dev/null and b/beginners-docs/C/media/grid_simple.png differ
diff --git a/beginners-docs/C/media/grid_with_entry.png b/beginners-docs/C/media/grid_with_entry.png
new file mode 100644
index 0000000..51699b5
Binary files /dev/null and b/beginners-docs/C/media/grid_with_entry.png differ
diff --git a/beginners-docs/C/media/guitar-tuner-glade.png b/beginners-docs/C/media/guitar-tuner-glade.png
new file mode 100644
index 0000000..7a4ce58
Binary files /dev/null and b/beginners-docs/C/media/guitar-tuner-glade.png differ
diff --git a/beginners-docs/C/media/guitar-tuner-pipeline.png
b/beginners-docs/C/media/guitar-tuner-pipeline.png
new file mode 100644
index 0000000..98125f1
Binary files /dev/null and b/beginners-docs/C/media/guitar-tuner-pipeline.png differ
diff --git a/beginners-docs/C/media/guitar-tuner-pipeline.svg
b/beginners-docs/C/media/guitar-tuner-pipeline.svg
new file mode 100644
index 0000000..5b8dea8
--- /dev/null
+++ b/beginners-docs/C/media/guitar-tuner-pipeline.svg
@@ -0,0 +1,239 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/";
+ xmlns:cc="http://creativecommons.org/ns#";
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+ xmlns:svg="http://www.w3.org/2000/svg";
+ xmlns="http://www.w3.org/2000/svg";
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+ width="457.31638"
+ height="147.82884"
+ id="svg2"
+ version="1.1"
+ inkscape:version="0.48.0 r9654"
+ sodipodi:docname="guitar-tuner-pipeline.svg"
+ inkscape:export-filename="/home/phil/gnome-devel-docs/demos/C/media/guitar-tuner-pipeline.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90">
+ <defs
+ id="defs4">
+ <marker
+ inkscape:stockid="Arrow2Send"
+ orient="auto"
+ refY="0"
+ refX="0"
+ id="Arrow2Send"
+ style="overflow:visible">
+ <path
+ id="path3998"
+ style="font-size:12px;fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round"
+ d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609
-1.7354408,5.6174519 -6e-7,8.035443 z"
+ transform="matrix(-0.3,0,0,-0.3,0.69,0)"
+ inkscape:connector-curvature="0" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Mend"
+ orient="auto"
+ refY="0"
+ refX="0"
+ id="Arrow1Mend"
+ style="overflow:visible">
+ <path
+ id="path3974"
+ d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;marker-start:none"
+ transform="matrix(-0.4,0,0,-0.4,-4,0)"
+ inkscape:connector-curvature="0" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Lend"
+ orient="auto"
+ refY="0"
+ refX="0"
+ id="Arrow1Lend"
+ style="overflow:visible">
+ <path
+ id="path3968"
+ d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;marker-start:none"
+ transform="matrix(-0.8,0,0,-0.8,-10,0)"
+ inkscape:connector-curvature="0" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mend"
+ orient="auto"
+ refY="0"
+ refX="0"
+ id="Arrow2Mend"
+ style="overflow:visible">
+ <path
+ id="path3992"
+ style="font-size:12px;fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round"
+ d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609
-1.7354408,5.6174519 -6e-7,8.035443 z"
+ transform="scale(-0.6,-0.6)"
+ inkscape:connector-curvature="0" />
+ </marker>
+ </defs>
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="1.4"
+ inkscape:cx="246.47784"
+ inkscape:cy="156.1594"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ showgrid="false"
+ fit-margin-left="10"
+ fit-margin-top="5"
+ fit-margin-right="10"
+ fit-margin-bottom="10"
+ inkscape:window-width="1308"
+ inkscape:window-height="744"
+ inkscape:window-x="58"
+ inkscape:window-y="-5"
+ inkscape:window-maximized="1" />
+ <metadata
+ id="metadata7">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1"
+ transform="translate(-30.984684,-244.48723)">
+ <rect
+
style="fill:#ffffff;fill-opacity:1;stroke:#323232;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+ id="rect3756-24-6"
+ width="434.31638"
+ height="129.82884"
+ x="42.484684"
+ y="252.98723" />
+ <text
+ xml:space="preserve"
+
style="font-size:28px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Bitstream
Vera Sans"
+ x="113.13709"
+ y="343.74017"
+ id="text3762"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan3764"
+ x="113.13709"
+ y="343.74017" /></text>
+ <g
+ id="g3938"
+ transform="translate(-8,10.091797)">
+ <rect
+ y="294.94971"
+ x="60.306026"
+ height="66.069878"
+ width="137.62717"
+ id="rect3756"
+
style="fill:#b9d3f7;fill-opacity:1;stroke:#07417f;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
/>
+ <text
+ sodipodi:linespacing="125%"
+ id="text3758"
+ y="316.48636"
+ x="66.73098"
+
style="font-size:28px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Bitstream
Vera Sans"
+ xml:space="preserve"><tspan
+ style="font-size:20px"
+ y="316.48636"
+ x="66.73098"
+ id="tspan3760"
+ sodipodi:role="line">audiotestsrc</tspan></text>
+ <rect
+ y="325.11401"
+ x="152.93028"
+ height="25.072104"
+ width="44.926483"
+ id="rect3756-2"
+
style="fill:#cecece;fill-opacity:1;stroke:#07417f;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
/>
+ <text
+ sodipodi:linespacing="125%"
+ id="text3784"
+ y="341.3631"
+ x="164.62877"
+
style="font-size:28px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Bitstream
Vera Sans"
+ xml:space="preserve"><tspan
+ style="font-size:14px"
+ y="341.3631"
+ x="164.62877"
+ id="tspan3786"
+ sodipodi:role="line">src</tspan></text>
+ </g>
+ <g
+ id="g3954"
+ transform="translate(0,2)">
+ <rect
+ y="303.0415"
+ x="311.19888"
+ height="66.069878"
+ width="155.62135"
+ id="rect3756-24"
+
style="fill:#b9d3f7;fill-opacity:1;stroke:#07417f;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
/>
+ <text
+ sodipodi:linespacing="125%"
+ id="text3758-9"
+ y="324.57816"
+ x="317.6828"
+
style="font-size:28px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Bitstream
Vera Sans"
+ xml:space="preserve"><tspan
+ style="font-size:20px"
+ y="324.57816"
+ x="317.6828"
+ id="tspan3760-0"
+ sodipodi:role="line">autoaudiosink</tspan></text>
+ <rect
+ y="333.20581"
+ x="311.19888"
+ height="25.072104"
+ width="44.926483"
+ id="rect3756-2-1"
+
style="fill:#cecece;fill-opacity:1;stroke:#07417f;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
/>
+ <text
+ sodipodi:linespacing="125%"
+ id="text3784-4"
+ y="350.16916"
+ x="319.5806"
+
style="font-size:28px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Bitstream
Vera Sans"
+ xml:space="preserve"><tspan
+ style="font-size:14px"
+ y="350.16916"
+ x="319.5806"
+ id="tspan3786-4"
+ sodipodi:role="line">sink</tspan></text>
+ </g>
+ <text
+ xml:space="preserve"
+
style="font-size:28px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Bitstream
Vera Sans"
+ x="49.466797"
+ y="281.96109"
+ id="text3758-2"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan3760-4"
+ x="49.466797"
+ y="281.96109"
+ style="font-size:28px">pipeline</tspan></text>
+ <path
+
style="fill:none;stroke:#000000;stroke-width:3.92622638;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-mid:none;marker-end:url(#Arrow2Send)"
+ d="m 196.33908,346.50504 105.68458,0"
+ id="path3946"
+ inkscape:connector-curvature="0" />
+ </g>
+</svg>
diff --git a/beginners-docs/C/media/guitar-tuner.png b/beginners-docs/C/media/guitar-tuner.png
new file mode 100644
index 0000000..aeabd8e
Binary files /dev/null and b/beginners-docs/C/media/guitar-tuner.png differ
diff --git a/beginners-docs/C/media/hello-world-label.png b/beginners-docs/C/media/hello-world-label.png
new file mode 100644
index 0000000..b08b8c6
Binary files /dev/null and b/beginners-docs/C/media/hello-world-label.png differ
diff --git a/beginners-docs/C/media/helloWorld.png b/beginners-docs/C/media/helloWorld.png
new file mode 100644
index 0000000..08805ac
Binary files /dev/null and b/beginners-docs/C/media/helloWorld.png differ
diff --git a/beginners-docs/C/media/hellognomewebapp.png b/beginners-docs/C/media/hellognomewebapp.png
new file mode 100644
index 0000000..17f45b7
Binary files /dev/null and b/beginners-docs/C/media/hellognomewebapp.png differ
diff --git a/beginners-docs/C/media/image-viewer.png b/beginners-docs/C/media/image-viewer.png
new file mode 100644
index 0000000..dd57cca
Binary files /dev/null and b/beginners-docs/C/media/image-viewer.png differ
diff --git a/beginners-docs/C/media/image.png b/beginners-docs/C/media/image.png
new file mode 100644
index 0000000..254763a
Binary files /dev/null and b/beginners-docs/C/media/image.png differ
diff --git a/beginners-docs/C/media/label.png b/beginners-docs/C/media/label.png
new file mode 100644
index 0000000..64814b6
Binary files /dev/null and b/beginners-docs/C/media/label.png differ
diff --git a/beginners-docs/C/media/linkbutton.png b/beginners-docs/C/media/linkbutton.png
new file mode 100644
index 0000000..373800c
Binary files /dev/null and b/beginners-docs/C/media/linkbutton.png differ
diff --git a/beginners-docs/C/media/magic-mirror.png b/beginners-docs/C/media/magic-mirror.png
new file mode 100644
index 0000000..874784b
Binary files /dev/null and b/beginners-docs/C/media/magic-mirror.png differ
diff --git a/beginners-docs/C/media/menubar.png b/beginners-docs/C/media/menubar.png
new file mode 100644
index 0000000..4b94bad
Binary files /dev/null and b/beginners-docs/C/media/menubar.png differ
diff --git a/beginners-docs/C/media/menubar_choices.png b/beginners-docs/C/media/menubar_choices.png
new file mode 100644
index 0000000..9606136
Binary files /dev/null and b/beginners-docs/C/media/menubar_choices.png differ
diff --git a/beginners-docs/C/media/menubutton.png b/beginners-docs/C/media/menubutton.png
new file mode 100644
index 0000000..b9fb607
Binary files /dev/null and b/beginners-docs/C/media/menubutton.png differ
diff --git a/beginners-docs/C/media/message-board.ogv b/beginners-docs/C/media/message-board.ogv
new file mode 100644
index 0000000..c78a279
Binary files /dev/null and b/beginners-docs/C/media/message-board.ogv differ
diff --git a/beginners-docs/C/media/messagedialog.png b/beginners-docs/C/media/messagedialog.png
new file mode 100644
index 0000000..e077bce
Binary files /dev/null and b/beginners-docs/C/media/messagedialog.png differ
diff --git a/beginners-docs/C/media/opensuse.png b/beginners-docs/C/media/opensuse.png
new file mode 100644
index 0000000..ba1289e
Binary files /dev/null and b/beginners-docs/C/media/opensuse.png differ
diff --git a/beginners-docs/C/media/paned.png b/beginners-docs/C/media/paned.png
new file mode 100644
index 0000000..642de83
Binary files /dev/null and b/beginners-docs/C/media/paned.png differ
diff --git a/beginners-docs/C/media/photo-wall-focused.png b/beginners-docs/C/media/photo-wall-focused.png
new file mode 100644
index 0000000..a0806bb
Binary files /dev/null and b/beginners-docs/C/media/photo-wall-focused.png differ
diff --git a/beginners-docs/C/media/photo-wall.png b/beginners-docs/C/media/photo-wall.png
new file mode 100644
index 0000000..b1380c8
Binary files /dev/null and b/beginners-docs/C/media/photo-wall.png differ
diff --git a/beginners-docs/C/media/progressbar.ogv b/beginners-docs/C/media/progressbar.ogv
new file mode 100644
index 0000000..6a25eb4
Binary files /dev/null and b/beginners-docs/C/media/progressbar.ogv differ
diff --git a/beginners-docs/C/media/progressbar_fill.ogv b/beginners-docs/C/media/progressbar_fill.ogv
new file mode 100644
index 0000000..df53494
Binary files /dev/null and b/beginners-docs/C/media/progressbar_fill.ogv differ
diff --git a/beginners-docs/C/media/radiobutton.png b/beginners-docs/C/media/radiobutton.png
new file mode 100644
index 0000000..916cd74
Binary files /dev/null and b/beginners-docs/C/media/radiobutton.png differ
diff --git a/beginners-docs/C/media/radiobuttontravel.png b/beginners-docs/C/media/radiobuttontravel.png
new file mode 100644
index 0000000..9a2a688
Binary files /dev/null and b/beginners-docs/C/media/radiobuttontravel.png differ
diff --git a/beginners-docs/C/media/record-collection.png b/beginners-docs/C/media/record-collection.png
new file mode 100644
index 0000000..1a78188
Binary files /dev/null and b/beginners-docs/C/media/record-collection.png differ
diff --git a/beginners-docs/C/media/scale.png b/beginners-docs/C/media/scale.png
new file mode 100644
index 0000000..c440c15
Binary files /dev/null and b/beginners-docs/C/media/scale.png differ
diff --git a/beginners-docs/C/media/scale2.png b/beginners-docs/C/media/scale2.png
new file mode 100644
index 0000000..9aefcce
Binary files /dev/null and b/beginners-docs/C/media/scale2.png differ
diff --git a/beginners-docs/C/media/scalepenguins.png b/beginners-docs/C/media/scalepenguins.png
new file mode 100644
index 0000000..ef1a12e
Binary files /dev/null and b/beginners-docs/C/media/scalepenguins.png differ
diff --git a/beginners-docs/C/media/scrolledwindow.png b/beginners-docs/C/media/scrolledwindow.png
new file mode 100644
index 0000000..149bd0d
Binary files /dev/null and b/beginners-docs/C/media/scrolledwindow.png differ
diff --git a/beginners-docs/C/media/separator.png b/beginners-docs/C/media/separator.png
new file mode 100644
index 0000000..ebefc4e
Binary files /dev/null and b/beginners-docs/C/media/separator.png differ
diff --git a/beginners-docs/C/media/spinbutton.png b/beginners-docs/C/media/spinbutton.png
new file mode 100644
index 0000000..514c530
Binary files /dev/null and b/beginners-docs/C/media/spinbutton.png differ
diff --git a/beginners-docs/C/media/spinbuttonkittens.png b/beginners-docs/C/media/spinbuttonkittens.png
new file mode 100644
index 0000000..8549953
Binary files /dev/null and b/beginners-docs/C/media/spinbuttonkittens.png differ
diff --git a/beginners-docs/C/media/spinner.png b/beginners-docs/C/media/spinner.png
new file mode 100644
index 0000000..26cde9c
Binary files /dev/null and b/beginners-docs/C/media/spinner.png differ
diff --git a/beginners-docs/C/media/statusbar.png b/beginners-docs/C/media/statusbar.png
new file mode 100644
index 0000000..338adc5
Binary files /dev/null and b/beginners-docs/C/media/statusbar.png differ
diff --git a/beginners-docs/C/media/statusbar2.png b/beginners-docs/C/media/statusbar2.png
new file mode 100644
index 0000000..06c9def
Binary files /dev/null and b/beginners-docs/C/media/statusbar2.png differ
diff --git a/beginners-docs/C/media/statusbar3.png b/beginners-docs/C/media/statusbar3.png
new file mode 100644
index 0000000..a08cba8
Binary files /dev/null and b/beginners-docs/C/media/statusbar3.png differ
diff --git a/beginners-docs/C/media/switch_off.png b/beginners-docs/C/media/switch_off.png
new file mode 100644
index 0000000..087c654
Binary files /dev/null and b/beginners-docs/C/media/switch_off.png differ
diff --git a/beginners-docs/C/media/switch_on.png b/beginners-docs/C/media/switch_on.png
new file mode 100644
index 0000000..8e7cff8
Binary files /dev/null and b/beginners-docs/C/media/switch_on.png differ
diff --git a/beginners-docs/C/media/switchanimals.png b/beginners-docs/C/media/switchanimals.png
new file mode 100644
index 0000000..486a278
Binary files /dev/null and b/beginners-docs/C/media/switchanimals.png differ
diff --git a/beginners-docs/C/media/textview.png b/beginners-docs/C/media/textview.png
new file mode 100644
index 0000000..6f8b2b0
Binary files /dev/null and b/beginners-docs/C/media/textview.png differ
diff --git a/beginners-docs/C/media/textviewpenguinchat.png b/beginners-docs/C/media/textviewpenguinchat.png
new file mode 100644
index 0000000..50c1cf4
Binary files /dev/null and b/beginners-docs/C/media/textviewpenguinchat.png differ
diff --git a/beginners-docs/C/media/togglebutton.png b/beginners-docs/C/media/togglebutton.png
new file mode 100644
index 0000000..9258e23
Binary files /dev/null and b/beginners-docs/C/media/togglebutton.png differ
diff --git a/beginners-docs/C/media/toolbar.png b/beginners-docs/C/media/toolbar.png
new file mode 100644
index 0000000..d931d21
Binary files /dev/null and b/beginners-docs/C/media/toolbar.png differ
diff --git a/beginners-docs/C/media/tooltip.png b/beginners-docs/C/media/tooltip.png
new file mode 100644
index 0000000..a25944d
Binary files /dev/null and b/beginners-docs/C/media/tooltip.png differ
diff --git a/beginners-docs/C/media/treeview_advanced_liststore.png
b/beginners-docs/C/media/treeview_advanced_liststore.png
new file mode 100644
index 0000000..2150d13
Binary files /dev/null and b/beginners-docs/C/media/treeview_advanced_liststore.png differ
diff --git a/beginners-docs/C/media/treeview_cellrenderertoggle.png
b/beginners-docs/C/media/treeview_cellrenderertoggle.png
new file mode 100644
index 0000000..64a510a
Binary files /dev/null and b/beginners-docs/C/media/treeview_cellrenderertoggle.png differ
diff --git a/beginners-docs/C/media/treeview_simple_liststore.png
b/beginners-docs/C/media/treeview_simple_liststore.png
new file mode 100644
index 0000000..7e99cc6
Binary files /dev/null and b/beginners-docs/C/media/treeview_simple_liststore.png differ
diff --git a/beginners-docs/C/media/treeview_simple_liststore_penguins.png
b/beginners-docs/C/media/treeview_simple_liststore_penguins.png
new file mode 100644
index 0000000..20144f8
Binary files /dev/null and b/beginners-docs/C/media/treeview_simple_liststore_penguins.png differ
diff --git a/beginners-docs/C/media/treeview_treestore.png b/beginners-docs/C/media/treeview_treestore.png
new file mode 100644
index 0000000..055b9d0
Binary files /dev/null and b/beginners-docs/C/media/treeview_treestore.png differ
diff --git a/beginners-docs/C/media/ubuntu.png b/beginners-docs/C/media/ubuntu.png
new file mode 100644
index 0000000..52d9636
Binary files /dev/null and b/beginners-docs/C/media/ubuntu.png differ
diff --git a/beginners-docs/C/media/weatherAppJs.png b/beginners-docs/C/media/weatherAppJs.png
new file mode 100644
index 0000000..ea038d1
Binary files /dev/null and b/beginners-docs/C/media/weatherAppJs.png differ
diff --git a/beginners-docs/C/media/widget_drawing.png b/beginners-docs/C/media/widget_drawing.png
new file mode 100644
index 0000000..38cdc66
Binary files /dev/null and b/beginners-docs/C/media/widget_drawing.png differ
diff --git a/beginners-docs/C/media/window.png b/beginners-docs/C/media/window.png
new file mode 100644
index 0000000..5f490ce
Binary files /dev/null and b/beginners-docs/C/media/window.png differ
diff --git a/beginners-docs/C/menubar.c.page b/beginners-docs/C/menubar.c.page
new file mode 100644
index 0000000..d409548
--- /dev/null
+++ b/beginners-docs/C/menubar.c.page
@@ -0,0 +1,42 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="menubar.c">
+ <info>
+ <title type="text">MenuBar (C)</title>
+ <link type="guide" xref="beginner.c#menu-combo-toolbar"/>
+ <link type="seealso" xref="aboutdialog.c"/>
+ <link type="seealso" xref="gmenu.c"/>
+ <revision version="0.2" date="2012-08-19" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Monica Kochofar</name>
+ <email>monicakochofar gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A widget which holds GtkMenuItem widgets</desc>
+ </info>
+
+ <title>MenuBar</title>
+
+ <media type="image" mime="image/png" src="media/menubar.png"/>
+ <p>A MenuBar created using XML and GtkBuilder.</p>
+<note><p>
+ For a more in-depth look at this sample, please do not hesitate to check out the <link
xref="menubar.vala">Vala MenuBar</link> and/or
+<link xref="menubar.py">Python MenuBar</link> tutorials.
+ </p></note>
+ <code mime="text/x-csrc" style="numbered">
+<xi:include href="samples/menubar.c" parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkApplication.html";>GtkApplication</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkWindow.html";>GtkWindow</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gio/stable/GSimpleAction.html";>GSimpleAction</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk/stable/GtkAboutDialog.html";>GtkAboutDialog</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/glib/stable/glib-GVariantType.html";>GtkVariantType</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/menubar.py.page b/beginners-docs/C/menubar.py.page
new file mode 100644
index 0000000..e308466
--- /dev/null
+++ b/beginners-docs/C/menubar.py.page
@@ -0,0 +1,189 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="menubar.py">
+ <info>
+ <title type="text">MenuBar (Python)</title>
+ <link type="guide" xref="beginner.py#menu-combo-toolbar"/>
+ <link type="seealso" xref="gmenu.py"/>
+ <link type="next" xref="colorbutton.py"/>
+ <revision version="0.1" date="2012-08-01" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+ <credit type="author coyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A widget which holds GtkMenuItem widgets</desc>
+ </info>
+
+ <title>MenuBar created using XML and GtkBuilder</title>
+ <media type="image" mime="image/png" src="media/menubar.png"/>
+ <p>A MenuBar created using XML and GtkBuilder.</p>
+
+ <links type="section"/>
+
+ <section id="xml"> <title>Create a MenuBar using XML</title>
+ <p>To create the menubar using XML:</p>
+ <steps>
+ <item><p>Create <file>menubar.ui</file> using your favorite text editor.</p></item>
+ <item><p>Enter the following line at the top of the file:</p>
+ <code mime="application/xml"><![CDATA[
+<?xml version="1.0"? encoding="UTF-8"?>]]></code>
+ </item>
+ <item><p>We want to create the interface which will contain our menubar and its submenus. Our menubar
will contain <gui>File</gui>, <gui>Edit</gui>, <gui>Choices</gui> and <gui>Help</gui> submenus. We add the
following XML code to the file:</p>
+ <code mime="application/xml"><xi:include href="samples/menubar_basis.ui"
parse="text"><xi:fallback/></xi:include></code>
+ </item>
+ <item><p>Now we will create the .py file and use GtkBuilder to import the <file>menubar.ui</file> we
just created.</p></item>
+ </steps>
+ </section>
+
+ <section id="basis"> <title>Add the MenuBar to the window using GtkBuilder</title>
+<code mime="text/x-python"><xi:include href="samples/menubar_basis.py"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+Now run the python application. It should look like the picture at the top of this page.</p>
+</section>
+
+<section id="xml2"> <title>Add items to the menus</title>
+<p>We start off by adding 2 menuitems to the <gui>File</gui> menu: <gui>New</gui> and <gui>Quit</gui>. We
do this by adding a <code>section</code> to the the <code>File</code> submenu with these items. The
<file>menubar.ui</file> should look like this (lines 6 to 13 inclusive comprise the newly added section):</p>
+
+ <listing>
+ <title>menubar.ui</title>
+ <code mime="application/xml" style="numbered"><![CDATA[
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+ <menu id="menubar">
+ <submenu>
+ <attribute name="label">File</attribute>
+ <section>
+ <item>
+ <attribute name="label">New</attribute>
+ </item>
+ <item>
+ <attribute name ="label">Quit</attribute>
+ </item>
+ </section>
+ </submenu>
+ <submenu>
+ <attribute name="label">Edit</attribute>
+ </submenu>
+ <submenu>
+ <attribute name="label">Choices</attribute>
+ </submenu>
+ <submenu>
+ <attribute name="label">Help</attribute>
+ </submenu>
+ </menu>
+</interface>]]></code>
+</listing>
+
+ <p>Following this pattern, you can now add a <code>Copy</code> and a <code>Paste</code> item to the
<code>Edit</code> submenu, and an <code>About</code> item to the <code>Help</code> submenu.</p>
+
+ </section>
+
+ <section id="actions">
+ <title>Setup actions</title>
+
+ <p>We now create the actions for "New" and "Quit" connected to a callback function in the Python file;
for instance we create "new" as:</p>
+ <code mime="text/x-python">
+new_action = Gio.SimpleAction.new("new", None)
+new_action.connect("activate", self.new_callback)</code>
+
+ <p>And we create the callback function of "new" as</p>
+ <code mime="text/x-python">
+def new_callback(self, action, parameter):
+ print "You clicked \"New\""</code>
+
+ <p>Now, in the XML file, we connect the menu items to the actions in the XML file by adding the "action"
attribute:</p>
+ <code mime="text/x-python"><![CDATA[
+<item>
+ <attribute name="label">New</attribute>
+ <attribute name="action">app.new</attribute>
+</item>]]></code>
+
+ <p>Note that for an action that is relative to the application, we use the prefix <code>app.</code>; for
actions that are relative to the window we use the prefix <code>win.</code>.</p>
+
+ <p>Finally, in the Python file, we add the action to the application or to the window - so for instance
<code>app.new</code> will be added to the application in the method <code>do_startup(self)</code> as</p>
+ <code mime="text/x-python">
+self.add_action(new_action)</code>
+
+ <p>See <link xref="signals-callbacks.py"/> for a more detailed explanation of signals and callbacks.</p>
+
+ </section>
+
+ <section id="win-app"><title>Actions: Application or Window?</title>
+ <p>Above, we created the "new" and "open" actions as part of the MyApplication class. Actions which
control the application itself, such as "quit" should be created similarly.</p>
+
+ <p>Some actions, such as "copy" and "paste" deal with the window, not the application. Window actions
should be created as part of the window class.</p>
+
+ <p>The complete example files contain both application actions and window actions. The window actions
are the ones usually included in the <link xref="gmenu.py">application menu</link> also. It is not good
practice to include window actions in the applcation menu. For demonstration purposes, the complete example
files which follow include XML in the UI file which creates the application menu which includes a "New" and
"Open" item, and these are hooked up to the same actions as the menubar items of the same name.</p>
+ </section>
+
+ <section id="choices">
+ <title>Choices submenu and items with state</title>
+ <media type="image" mime="image/png" src="media/menubar_choices.png"/>
+ <p>Lines 30 to 80 inclusive of the <link xref="menubar.py#xml-code" /> demonstrate the XML code used to
create the UI for <gui>Choices</gui> menu.</p>
+
+ <p>The actions created so far are <em>stateless</em>, that is they do not retain or depend on a state
given by the action itself. The actions we need to create for the Choices submenu, on the other hand, are
<em>stateful</em>. An example of creation of a stateful action is:</p>
+ <code mime="text/x-python">
+shape_action = Gio.SimpleAction.new_stateful("shape", GLib.VariantType.new('s'),
GLib.Variant.new_string('line'))</code>
+
+ <p>where the variables of the method are: name, parameter type (in this case, a string - see <link
href="http://developer.gnome.org/glib/unstable/glib-GVariantType.html";>here</link> for a complete list of
character meanings), initial state (in this case, 'line' - in case of a <code>True</code> boolean value it
should be <code>Glib.Variant.new_boolean(True)</code>, and so on, see <link
href="http://developer.gnome.org/glib/unstable/glib-GVariant.html";>here</link> for a complete list)</p>
+
+ <p>After creating the stateful SimpleAction we connect it to the callback function and we add it to the
window (or the application, if it is the case), as before:</p>
+
+ <code mime="text/x-python">
+shape_action.connect("activate", self.shape_callback)
+self.add_action(shape_action)</code>
+
+ </section>
+
+ <section id="xml-code">
+ <title>Complete XML UI file for this example</title>
+ <code mime="application/xml" style="numbered"><xi:include href="samples/menubar.ui"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="python-code">
+ <title>Complete Python file for this example</title>
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/menubar.py"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="mnemonics-and-accelerators"><title>Mnemonics and Accelerators</title>
+ <p>Labels may contain mnemonics. Mnemonics are underlined characters in the label, used for keyboard
navigation. Mnemonics are created by placing an underscore before the mnemonic character. For example
"_File" instead of just "File" in the menubar.ui label attribute.</p>
+ <p>The mnemonics are visible when you press the <key>Alt</key> key. Pressing
<keyseq><key>Alt</key><key>F</key></keyseq> will open the <gui>File</gui> menu.</p>
+
+ <p>Accelerators can be explicitly added in the UI definitions. For example, it is common to be able to
quit an application by pressing <keyseq><key>Ctrl</key><key>Q</key></keyseq> or to save a file by pressing
<keyseq><key>Ctrl</key><key>S</key></keyseq>. To add an accelerator to the UI definition, you simply need
add an "accel" attribute to the item.</p>
+<p><code mime="application/xml"><![CDATA[<attribute name="accel"><Primary>q</attribute>]]></code> will
create the <keyseq><key>Ctrl</key><key>Q</key></keyseq> sequence when added to the <code>Quit</code> label
item. Here, "Primary" refers to the <key>Ctrl</key> key on a PC or the <key>⌘</key> key on a Mac.</p>
+
+ <code mime="application/xml"><![CDATA[
+<item>
+ <attribute name="label">_Quit</attribute>
+ <attribute name="action">app.quit</attribute>
+ <attribute name="accel"><Primary>q</attribute>
+</item>]]></code>
+ </section>
+
+ <section id="translatable"><title>Translatable strings</title>
+ <p>
+ Since GNOME applications are being translated into <link href="http://l10n.gnome.org/languages/";>many
languages</link>, it is important that the strings in your application are translable. To make a label
translatable, simple set <code>translatable="yes"</code>:
+ </p>
+
+ <code mime="application/xml"><![CDATA[<attribute name="label"
translatable="yes">Quit</attribute>]]></code>
+
+ </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/gio/unstable/GSimpleAction.html";>GSimpleAction</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkBuilder.html";>GtkBuilder</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/menubar.vala.page b/beginners-docs/C/menubar.vala.page
new file mode 100644
index 0000000..a23b4d6
--- /dev/null
+++ b/beginners-docs/C/menubar.vala.page
@@ -0,0 +1,200 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="menubar.vala">
+ <info>
+ <title type="text">MenuBar (Vala)</title>
+ <link type="guide" xref="beginner.vala#menu-combo-toolbar"/>
+ <link type="seealso" xref="aboutdialog.vala"/>
+ <link type="seealso" xref="gmenu.vala"/>
+ <revision version="0.1" date="2012-05-25" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A widget which holds GtkMenuItem widgets</desc>
+ </info>
+
+ <title>MenuBar</title>
+ <media type="image" mime="image/png" src="media/menubar.png"/>
+ <p>A MenuBar created using XML and GtkBuilder.</p>
+
+ <links type="section"/>
+
+ <section id="xml"> <title>Create a MenuBar using XML</title>
+ <p>To create the menubar using XML:</p>
+ <steps>
+ <item><p>Create <file>menubar.ui</file> using your favorite text editor.</p></item>
+ <item><p>Enter the following line at the top of the file:</p>
+ <code mime="application/xml"><![CDATA[
+<?xml version="1.0"? encoding="UTF-8"?>]]></code>
+ </item>
+ <item><p>We want to create the interface which will contain our menubar and its submenus. Our menubar
will contain <gui>File</gui>, <gui>Edit</gui>, <gui>Choices</gui> and <gui>Help</gui> submenus. We add the
following XML code to the file:</p>
+ <code mime="application/xml"><xi:include href="samples/menubar_basis.ui"
parse="text"><xi:fallback/></xi:include></code>
+ </item>
+ <item><p>Now we will create the .vala file and use GtkBuilder to import the <file>menubar.ui</file> we
just created.</p></item>
+ </steps>
+ </section>
+ <section id="basis"> <title>Add the MenuBar to the window using GtkBuilder</title>
+<code mime="text/x-csharp"><xi:include href="samples/menubar_basis.vala"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+Now, compile the vala file, and run it. The application should look like the picture at the top of this
page.</p>
+</section>
+
+
+
+<section id="xml2"> <title>Add items to the menus</title>
+<p>We start off by adding 2 menuitems to the <gui>File</gui> menu: <gui>New</gui> and <gui>Quit</gui>. We
do this by adding a <code>section</code> to the the <code>File</code> submenu with these items. The
<file>menubar.ui</file> should look like this (lines 6 to 13 inclusive comprise the newly added section):</p>
+ <code mime="application/xml" style="numbered"><![CDATA[
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+ <menu id="menubar">
+ <submenu>
+ <attribute name="label">File</attribute>
+ <section>
+ <item>
+ <attribute name="label">New</attribute>
+ </item>
+ <item>
+ <attribute name ="label">Quit</attribute>
+ </item>
+ </section>
+ </submenu>
+ <submenu>
+ <attribute name="label">Edit</attribute>
+ </submenu>
+ <submenu>
+ <attribute name="label">Choices</attribute>
+ </submenu>
+ <submenu>
+ <attribute name="label">Help</attribute>
+ </submenu>
+ </menu>
+</interface>]]></code>
+
+<p>Following this pattern, you can now add a <code>Copy</code> and a <code>Paste</code> item to the
<code>Edit</code> submenu, and an <code>About</code> item to the <code>Help</code> submenu. We will hold off
on adding items to the <link xref="menubar.vala#choices">Choices submenu</link> until further in the
tutorial.</p>
+
+<note style="tip"><p>
+ You do not need to recompile the vala program if you only made changes to the UI file. Just run your
previously compiled application, and the UI changes will be reflected.
+</p></note>
+</section>
+
+<section id="actions"><title>Setup actions</title>
+<p>This is a three step process.</p>
+<steps>
+ <item><p>First we create the ActionEntry array in the MyApplication class.
+ An ActionEntry consists of: </p>
+ <list>
+ <item><p>the "action name" (mandatory)</p></item>
+ <item><p>the callback function to connect to the "activate" signal of the action (if
applicable)</p></item>
+ <item><p>the type of the parameter that must be passed to the activate function for the action (if
applicable)</p></item>
+ <item><p>the initial state for this action (if applicable)</p></item>
+ <item><p>the callback to connect to "change-state" signal (if applicable)</p></item>
+ </list>
+ <code mime="text/x-csharp">
+const ActionEntry[] actions = {
+ { "new", new_cb }, // {"action name", callback_function}
+ { "quit", quit_cb }
+};</code>
+
+ </item>
+ <item><p>Second, we create the callback functions the actions are connected to.</p>
+ <code mime="text/x-csharp">
+void new_cb (SimpleAction action, Variant? parameter) {
+ print ("You clicked \"New\"\n");
+ //new MyWindow (this).show ();
+}
+
+void quit_cb (SimpleAction action, Variant? parameter) {
+ print ("You clicked \"Quit\"\n");
+ //this.quit (); **Bug #674090**
+}</code>
+ </item>
+ <item><p>And lastly, we connect the menu items to the actions in the XML file by adding the "action"
attribute:</p>
+ <code mime="application/xml"><![CDATA[
+<item>
+ <attribute name="label">New</attribute>
+ <attribute name="action">app.new</attribute>
+</item>
+<item>
+ <attribute name="label">Quit</attribute>
+ <attribute name="action">app.quit</attribute>
+</item>]]></code>
+ </item>
+</steps>
+</section>
+
+
+<section id="choices"><title>Choices submenu and items with state</title>
+ <media type="image" mime="image/png" src="media/menubar_choices.png"/>
+ <p>Lines 30 to 80 inclusive of the <link xref="menubar.vala#xml-code" /> demonstrate
+ the XML code used to create the UI for <gui>Choices</gui> menu.</p>
+</section>
+
+<section id="win-app"><title>Actions: Application or Window?</title>
+ <p>Above, we created the "new" and "open" actions as part of the MyApplication class.
+ Actions which control the application itself, such as "quit" should be created similarly.</p>
+
+ <p>Some actions, such as "copy" and "paste" deal with the window, not the application.
+ Window actions should be created as part of the window class.</p>
+
+ <p>
+ The complete example files contain both application actions and
+ window applications. The window actions are the ones usually included in the <link
xref="gmenu.vala">application menu</link> also. It is not good practice to include window actions in the
applcation menu. For demonstration purposes, the complete example files which follow include XML in the UI
file which creates the application menu which includes a "New" and "Open" item, and these are hooked up to
the same actions as the menubar items of the same name.
+ </p>
+
+
+</section>
+
+ <section id="xml-code"><title>Complete XML UI file for this example</title>
+<code mime="application/xml" style="numbered"><xi:include href="samples/menubar.ui"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+ <section id="vala-code"><title>Complete Vala file for this example</title>
+<code mime="text/x-csharp" style="numbered"><xi:include href="samples/menubar.vala"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="mnemonics"><title>Mnemonics</title>
+ <p>Labels may contain mnemonics. Mnemonics are underlined characters in the label, used for keyboard
navigation. Mnemonics are created by placing an underscore before the mnemonic character. For example
"_File" instead of just "File" in the menubar.ui label attribute.</p>
+ <p>The mnemonics are visible when you press the <key>Alt</key> key. Pressing
<keyseq><key>Alt</key><key>F</key></keyseq> will open the <gui>File</gui> menu.
+ </p>
+ </section>
+
+ <section id="accelerators"><title>Accelerators</title>
+ <p>Accelerators can be explicitly added in the UI definitions. For example, it is common to be able to
quit an application by pressing <keyseq><key>Ctrl</key><key>Q</key></keyseq> or to save a file by pressing
<keyseq><key>Ctrl</key><key>S</key></keyseq>. To add an accelerator to the UI definition, you simply need
add an "accel" attribute to the item.</p>
+<p><code mime="application/xml"><![CDATA[<attribute name="accel"><Primary>q</attribute>]]></code> will
create the <keyseq><key>Ctrl</key><key>Q</key></keyseq> sequence when added to the <code>Quit</code> label
item. Here, "Primary" refers to the <key>Ctrl</key> key on a PC or the <key>⌘</key> key on a Mac.</p>
+
+ <code mime="application/xml"><![CDATA[
+<item>
+ <attribute name="label">_Quit</attribute>
+ <attribute name="action">app.quit</attribute>
+ <attribute name="accel"><Primary>q</attribute>
+</item>]]></code>
+ </section>
+
+ <section id="translatable"><title>Translatable strings</title>
+ <p>
+ Since GNOME applications are being translated into <link href="http://l10n.gnome.org/languages/";>many
languages</link>, it is important that the strings in your application are translable. To make a label
translatable, simple set <code>translatable="yes"</code>:
+ </p>
+ <p>
+ <code mime="application/xml"><![CDATA[<attribute name="label"
translatable="yes">Quit</attribute>]]></code>
+ </p>
+ </section>
+ <section id="documentation"><title>Relevant API documentation</title>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="http://valadoc.org/gio-2.0/GLib.ActionEntry.html";>Glib.ActionEntry</link></p></item>
+ <item><p><link href="http://valadoc.org/gio-2.0/Gtk.Builder.html";>Gtk.Builder</link></p></item>
+</list>
+</section>
+
+
+<section id="exercises"><title>Exercises</title>
+ <xi:include href="exercises/menubar.vala.exercises"><xi:fallback/></xi:include>
+</section>
+</page>
diff --git a/beginners-docs/C/menubutton.js.page b/beginners-docs/C/menubutton.js.page
new file mode 100644
index 0000000..54df979
--- /dev/null
+++ b/beginners-docs/C/menubutton.js.page
@@ -0,0 +1,34 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="menubutton.js">
+ <info>
+ <title type="text">MenuButton (JavaScript)</title>
+ <link type="guide" xref="beginner.js#buttons"/>
+ <revision version="0.1" date="2012-07-18" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Anna Zacchi</name>
+ <email>azzurroverde gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A widget that shows a menu when clicked on</desc>
+ </info>
+
+ <title>MenuButton</title>
+ <media type="image" mime="image/png" src="media/menubutton.png"/>
+ <p>The GtkMenuButton widget is used to display a menu when clicked on. This menu can be provided either as
a GtkMenu, or an abstract GMenuModel.
+
+The GtkMenuButton widget can hold any valid child widget. That is, it can hold almost any other standard
GtkWidget. The most commonly used child is the provided GtkArrow.</p>
+
+<note><p>You need to be running GNOME 3.6 for the MenuButton to work.</p></note>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/menubutton.js"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/3.5/gtk3-GtkMenuButton.html";>MenuButton</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/menubutton.py.page b/beginners-docs/C/menubutton.py.page
new file mode 100644
index 0000000..15a5031
--- /dev/null
+++ b/beginners-docs/C/menubutton.py.page
@@ -0,0 +1,58 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="menubutton.py">
+ <info>
+ <title type="text">MenuButton</title>
+ <link type="guide" xref="beginner.py#buttons"/>
+ <link type="next" xref="toolbar.py"/>
+ <revision version="0.1" date="2012-08-19" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A widget that shows a menu when clicked on</desc>
+ </info>
+
+ <title>MenuButton</title>
+ <media type="image" mime="image/png" src="media/menubutton.png"/>
+ <p>The GtkMenuButton widget is used to display a menu when clicked on. This menu can be provided either as
a GtkMenu, or an abstract GMenuModel. The GtkMenuButton widget can hold any valid child widget. That is, it
can hold almost any other standard GtkWidget. The most commonly used child is the provided GtkArrow.</p>
+
+ <note><p>You need to be running GNOME 3.6 for the MenuButton to work.</p></note>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+ <code mime="text/x-csharp" style="numbered"><xi:include href="samples/menubutton.py"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="methods">
+ <title>Useful methods for a MenuButton widget</title>
+ <p>In line 33 the signal <code>"activate"</code> from the action <code>about_action</code> is
connected to the callback function <code>about_callback()</code> using
<code><var>action</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link
xref="signals-callbacks.py"/> for a more detailed explanation.</p>
+
+ <p>The positioning of the menu is determined by the "direction" property of the menu button and the
"halign" or "valign" properties of the menu. For example, when the direction is
<code>Gtk.ArrowType.DOWN</code> (other option: <code>UP</code>) and the horizontal alignment is
<code>Gtk.Align.START</code> (other options: <code>CENTER</code> and <code>END</code>), the menu will be
positioned below the button, with the starting edge (depending on the text direction) of the menu aligned
with the starting edge of the button. If there is not enough space below the button, the menu is popped up
above the button instead. If the alignment would move part of the menu offscreen, it is 'pushed in'.</p>
+
+ <p>In the case of vertical alignment, the possible ArrowType directions are <code>LEFT</code> and
<code>RIGHT</code> and the vertical alignment is again <code>START</code>, <code>CENTER</code> or
<code>END</code>.</p>
+
+ <p><code>set_align_widget(alignment)</code> and <code>set_direction(direction)</code> can be used to set
these properties.</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/GtkMenuButton.html";>MenuButton</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/menubutton.vala.page b/beginners-docs/C/menubutton.vala.page
new file mode 100644
index 0000000..d3af245
--- /dev/null
+++ b/beginners-docs/C/menubutton.vala.page
@@ -0,0 +1,34 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="menubutton.vala">
+ <info>
+ <title type="text">MenuButton (Vala)</title>
+ <link type="guide" xref="beginner.vala#buttons"/>
+ <revision version="0.1" date="2012-07-18" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A widget that shows a menu when clicked on</desc>
+ </info>
+
+ <title>MenuButton</title>
+ <media type="image" mime="image/png" src="media/menubutton.png"/>
+ <p>The GtkMenuButton widget is used to display a menu when clicked on. This menu can be provided either as
a GtkMenu, or an abstract GMenuModel.
+
+The GtkMenuButton widget can hold any valid child widget. That is, it can hold almost any other standard
GtkWidget. The most commonly used child is the provided GtkArrow.</p>
+
+<note><p>You need to be running GNOME 3.6 for the MenuButton to work.</p></note>
+<code mime="text/x-csharp" style="numbered"><xi:include href="samples/menubutton.vala"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/3.5/gtk3-GtkMenuButton.html";>MenuButton</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/menus.vala.page b/beginners-docs/C/menus.vala.page
new file mode 100644
index 0000000..cd12653
--- /dev/null
+++ b/beginners-docs/C/menus.vala.page
@@ -0,0 +1,20 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="menus.vala">
+ <info>
+ <link type="guide" xref="beginner.vala#tutorials"/>
+ <revision version="0.1" date="2012-02-20" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc></desc>
+ </info>
+
+ <title>iii. Menus</title>
+
+</page>
diff --git a/beginners-docs/C/message-board.c.page b/beginners-docs/C/message-board.c.page
new file mode 100644
index 0000000..0a72ea5
--- /dev/null
+++ b/beginners-docs/C/message-board.c.page
@@ -0,0 +1,406 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="message-board.c">
+
+ <info>
+ <title type="text">Message board (C)</title>
+ <link type="guide" xref="c#examples"/>
+
+ <desc>A simple program using WebKitGTK+ and the DOM.</desc>
+
+ <revision pkgversion="0.1" version="0.1" date="2010-12-06" status="draft"/>
+ <credit type="author copyright">
+ <name>Shaun McCance</name>
+ <email>shaunm gnome org</email>
+ <years>2010</years>
+ </credit>
+ <credit type="editor">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2013</years>
+ </credit>
+ </info>
+
+<title>Message board</title>
+
+<synopsis>
+ <p>In this tutorial, you will learn:</p>
+ <list style="compact">
+ <item><p>How to display a web page with WebKit.</p></item>
+ <item><p>How to manipulate the contents of a web page using WebKit's DOM
+ functions.</p></item>
+ </list>
+ <p>This tutorial assumes you are familiar with the C programming language
+ and have a basic understanding of GTK+, including how to create and place
+ widgets and how to connect callback functions to signals. See <link
+ xref="image-viewer.c"/> to learn the basics of GTK+.</p>
+</synopsis>
+
+<media type="video" mime="video/ogg" src="media/message-board.ogv"/>
+
+<links type="section"/>
+
+<section id="create">
+ <title>Create a project in Anjuta</title>
+
+ <p>The GNOME platform includes WebKitGTK+, built on top of the powerful
+ WebKit HTML framework. WebKit is used throughout GNOME, not just to view
+ web pages on the Internet, but also to create rich user interfaces that
+ can be easily styled with CSS.</p>
+
+ <p>In this tutorial, you will create a simple message board using WebKit.
+ The message board will allow you to enter some text and have it added to a
+ list of messages in HTML. Before you begin, you need to set up a project in
+ Anjuta.</p>
+
+ <steps>
+ <item><p>In Anjuta, click <guiseq><gui>File</gui><gui>New</gui>
+ <gui>Project</gui></guiseq> to open the new project assistant.</p></item>
+ <item><p>Select <gui>GTK+ (simple)</gui> on the <gui>C</gui> tab,
+ and click <gui>Continue</gui>.</p></item>
+ <item><p>Fill out your details on the <gui>Basic information</gui> page.
+ Use <input>message-board</input> for the project name.
+ Click <gui>Continue</gui>.</p></item>
+ <item><p>Disable the <gui>Use GtkBuilder for user interface</gui> option as
+ this tutorial builds the user-interface manually.</p>
+ </item>
+ <item><p>You need to tell Anjuta you're using WebKitGTK+ on this project.
+ On the <gui>Project options</gui> page, select <gui>Configure external
+ packages</gui>. Click <gui>Continue</gui>. On the <gui>Configure external
+ packages</gui> page, check <gui>webkitgtk-3.0</gui>.</p></item>
+ </steps>
+
+ <p>After you finish the new project assistant, open the file
+ <file>src/main.c</file> from either the <gui>Project</gui> or the
+ <gui>File</gui> tab. Anjuta will have filled this in with some basic
+ GTK+ code from its templates. Since you are creating a WebKit project,
+ you first need to include the WebKit headers. After the line that
+ includes <code>gtk/gtk.h</code>, add the following line:</p>
+
+ <code>#include <webkit/webkit.h></code>
+
+ <p>Verify that everything works by building what you have so far.
+ Click <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> or
+ just press <keyseq><key>Shift</key><key>F7</key></keyseq>. The first
+ time you build, you will be asked for some configure options. Just
+ accept the defaults and click <gui>Execute</gui>.</p>
+
+ <p>You should now be able to run the program. Click <guiseq>
+ <gui>Run</gui><gui>Execute</gui></guiseq> or just press <key>F3</key>.
+ You should see an empty window appear.</p>
+</section>
+
+<section id="webview">
+ <title>Lay out your window and web view</title>
+
+ <p>Now that you can show a window, it's time to start working with WebKit.
+ For this tutorial, you'll create a text entry and a web view and pack
+ them both into a window. Find the function <code>create_window</code> and
+ replace it with the following:</p>
+
+<code style="numbered" mime="text/C"><![CDATA[
+static GtkWidget*
+create_window (void)
+{
+ GtkWidget *window, *box, *scroll, *view, *entry;
+
+ window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
+ gtk_window_set_default_size (GTK_WINDOW (window), 400, 400);
+ gtk_window_set_title (GTK_WINDOW (window), "Message Board");
+ g_signal_connect (window, "delete-event", G_CALLBACK (gtk_main_quit), NULL);
+
+ box = gtk_box_new (GTK_ORIENTATION_VERTICAL, 6);
+ gtk_container_set_border_width (GTK_CONTAINER (box), 6);
+ gtk_container_add (GTK_CONTAINER (window), box);
+
+ entry = gtk_entry_new ();
+ gtk_box_pack_start (GTK_BOX (box), entry, FALSE, FALSE, 0);
+
+ scroll = gtk_scrolled_window_new (NULL, NULL);
+ g_object_set (scroll, "shadow-type", GTK_SHADOW_IN, NULL);
+ gtk_box_pack_start (GTK_BOX (box), scroll, TRUE, TRUE, 0);
+
+ view = webkit_web_view_new ();
+ gtk_container_add (GTK_CONTAINER (scroll), view);
+ webkit_web_view_load_string (WEBKIT_WEB_VIEW (view),
+ "<html><body></body></html>",
+ "text/html",
+ "UTF-8",
+ NULL);
+
+ gtk_widget_show_all (GTK_WIDGET (box));
+ return window;
+}
+]]></code>
+
+ <p>You first create a <code>GtkWindow</code> object and set its title and
+ default size. You also connect the <code>gtk_main_quit</code> function to the
+ <code>delete-event</code> signal. The <code>delete-event</code> signal is
+ emitted when the window is closed. The <code>gtk_main_quit</code> function is
+ part of GTK, and it quits the application.</p>
+
+ <p>You then create a vertical box and add it to the window. A window can only
+ hold a single child widget, so you need to use a box to add multiple widgets.
+ The second argument to <code>gtk_box_new</code> sets the amount of padding
+ (in pixels) between each child, and the next line puts a six-pixel border
+ around the entire thing.</p>
+
+ <p>You next create a <code>GtkEntry</code> object and pack it into the box.
+ The third and fourth arguments to <code>gtk_box_pack_start</code> specify that
+ the entry shouldn't take up any extra space the box has available. The fourth
+ argument is the amount of padding you want around the entry. In this case,
+ you set the padding to zero, because you're allowing the box to handle all
+ the padding.</p>
+
+ <p>Before you add a web view, you have to create a scrolled window to put it
+ inside of. The scrolled window will place scrollbars on the right and bottom
+ when necessary, and prevent your web view from filling your entire screen.
+ This time, you pass <code>TRUE</code> and <code>TRUE</code> to
+ <code>gtk_box_pack_start</code> to allow the scrolled window (and thus, the
+ web view) to use any extra space available in the box.</p>
+
+ <p>Finally, you create a <code>WebKitWebView</code> and add it to the scrolled
+ window. Then load a very basic HTML page into the web view by calling
+ <code>webkit_web_view_load_string</code> with the following arguments:</p>
+
+ <terms>
+ <item>
+ <title><code>WEBKIT_WEB_VIEW (view)</code></title>
+ <p>The view itself. Because <code>view</code> is typed as a
+ <code>GtkWidget*</code>, you have to use <code>WEBKIT_WEB_VIEW</code>
+ to safely cast the object.</p>
+ </item>
+ <item>
+ <title><code>"<html><body></body></html>"</code></title>
+ <p>The simplest HTML file you could possibly write.</p>
+ </item>
+ <item>
+ <title><code>"text/html"</code></title>
+ <p>The MIME type of the content you provided. In this case, you're
+ using plain HTML.</p>
+ </item>
+ <item>
+ <title><code>"UTF-8"</code></title>
+ <p>The character encoding of the content you provided. Although you only
+ used ASCII characters, it's a good idea to specify UTF-8. UTF-8 is used
+ as the default encoding throughout the GNOME platform.</p>
+ </item>
+ <item>
+ <title><code>NULL</code></title>
+ <p>The base URI. You don't need it in this simple example, but you might
+ want to provide a <sys>file:</sys> URI if you add images or other features
+ where you want to use relative URI references.</p>
+ </item>
+ </terms>
+
+ <note style="sidebar">
+ <p>Every time you add a widget, you have to call <code>gtk_widget_show</code>
+ on it for it to be visible. If you call <code>gtk_widget_show_all</code> on
+ a container widget like a <code>GtkBox</code>, GTK+ will automatically show
+ all the widgets inside the container, to any depth. Sometimes you don't
+ want to call <code>gtk_widget_show_all</code>, such as when you want to
+ dynamically hide and show some widgets in response to events.</p>
+ </note>
+
+ <p>Finally, you have to call <code>gtk_widget_show_all</code> on the box.
+ Otherwise, none of the widgets you created will be visible. (The window is
+ shown in the <code>main</code> function with <code>gtk_widget_show</code>.)</p>
+
+ <p>Build and run the message board again. You should see a window with a text
+ entry and a web view. It doesn't do anything yet because the text entry and
+ the web view don't know anything about each other.</p>
+</section>
+
+<section id="signals">
+ <title>Hook up signals</title>
+
+ <p>Now you want to make the message board actually <em>do</em> something
+ when you enter text into the text entry. To do this, connect a callback
+ function to the <code>activate</code> signal of <code>entry</code>. GTK+
+ emits the <code>activate</code> signal whenever the user presses
+ <key>Enter</key> in the entry. Add the following into <code>create_window</code>,
+ anywhere after both <code>entry</code> and <code>view</code> have been defined:</p>
+
+<code><![CDATA[
+g_signal_connect (entry, "activate", G_CALLBACK (entry_activate_cb), view);
+]]></code>
+
+ <p>You then have to actually define <code>entry_activate_cb</code>. Define
+ it as follows, anywhere above <code>create_window</code>:</p>
+
+<code style="numbered"><![CDATA[
+static void
+entry_activate_cb (GtkEntry *entry, WebKitWebView *view)
+{
+ WebKitDOMDocument *document;
+ WebKitDOMElement *body, *div;
+
+ document = webkit_web_view_get_dom_document (view);
+ body = webkit_dom_document_query_selector (document, "body", NULL);
+ div = webkit_dom_document_create_element (document, "div", NULL);
+ webkit_dom_node_set_text_content (WEBKIT_DOM_NODE (div),
+ gtk_entry_get_text (entry),
+ NULL);
+ webkit_dom_node_append_child (WEBKIT_DOM_NODE (body),
+ WEBKIT_DOM_NODE (div),
+ NULL);
+ gtk_entry_set_text (entry, "");
+}
+]]></code>
+
+ <p>The first thing you do is get a <code>WebKitDOMDocument</code> object
+ that represents the HTML document displayed in <code>view</code>. The DOM
+ classes and methods in WebKit allow you to inspect and manipulate the HTML
+ document, and work very similarly to the DOM APIs you might already know
+ from JavaScript.</p>
+
+ <p>Once you have the document, you want to get the <code>body</code> element
+ so that you can add <code>div</code> elements to it. The
+ <code>webkit_dom_document_query_selector</code> function lets you find an
+ element in the document using CSS selectors. This keeps you from having to
+ write tedious loops to traverse the document.</p>
+
+ <comment>
+ <cite>shaunm</cite>
+ <p>FIXME: Is this true? Does query_selector take CSS, CSSish, or what?</p>
+ </comment>
+
+ <p>Next, you create a new <code>div</code> element to hold the message. Every
+ element you create has to be attached to a document, so the function to create
+ an element takes the <code>WebKitDOMDocument</code> as its first arguments.
+ You then set the text content of the element to the contents of the text entry.
+ Because <code>gtk_entry_get_text</code> returns a <code>const gchar*</code>,
+ you don't have to free the result.</p>
+
+ <comment>
+ <cite>shaunm</cite>
+ <p>Not passing the GError**, but we should give it a quick mention and
+ link to somewhere that explains how GError-handling works.</p>
+ </comment>
+
+ <p>Finally, you append the new <code>div</code> element to the body and
+ clear out the text entry so you can type something new. Build and run the
+ program again and test it for yourself.</p>
+</section>
+
+
+<section id="css">
+ <title>Make it look better with CSS</title>
+
+ <p>At this point, your program is completely functional, but not very pretty.
+ You can style the message display with CSS, just like you can with any other
+ HTML page. There are many ways you could attach some CSS to the page: You
+ could add it in the initial HTML document. You could inline it in the
+ <code>style</code> attribute of the <code>div</code> elements. You could
+ even programmatically construct it using the DOM APIs.</p>
+
+ <p>In this tutorial, you'll attach the CSS using the <code>user-stylesheet-uri</code>
+ property of the <code>WebKitWebSetting</code> object attached to your web view.
+ In a more complete application, you would want to save and load your HTML file.
+ Keeping the style information outside the actual HTML means that you can change
+ the styling completely within your application, without having to change users'
+ files. You would normally just install a file along with your application, but
+ just to keep everything in one file for this demo, we'll use a trick called a
+ data URI. First, define the CSS as a static string near the top of your file.</p>
+
+<code><![CDATA[
+static const guchar CSS[] =
+"body { margin: 0; padding: 0; }\n"
+"div { "
+" -webkit-border-radius: 2px;"
+" background: -webkit-gradient(linear, 0% 100%, 0% 0%,"
+" from(#f1f1f1), to(white));"
+" border: solid 1px #c6c6c6;"
+" -webkit-box-shadow: 0px 0px 2px #c6c6c6;"
+" margin: 12px; padding: 6px;"
+"}";
+]]></code>
+
+ <p>All you have in this example are <code>div</code> elements inside a
+ <code>body</code> element. If you created more complicated HTML, you could
+ use whatever CSS is necessary. In fact, if you're comfortable with CSS, you
+ should trying changing this to something you like better.</p>
+
+ <p>To apply the CSS, you set the <code>user-stylesheet-uri</code> in the
+ <code>create_window</code> function, anywhere after <code>view</code> has
+ already been defined.</p>
+
+ <comment><cite>shaunm</cite><p>g_base64_encode has bad args</p></comment>
+
+<code><![CDATA[
+tmp = g_base64_encode (CSS, strlen((gchar *) CSS));
+css = g_strconcat ("data:text/css;charset=utf-8;base64,",
+ tmp, NULL);
+g_object_set (webkit_web_view_get_settings (WEBKIT_WEB_VIEW (view)),
+ "user-stylesheet-uri", css, NULL);
+g_free (css);
+g_free (tmp);
+]]></code>
+
+ <p>Also, make sure to add variable declarations for <code>tmp</code>
+ and <code>css</code> to the top of <code>create_window</code>.</p>
+
+<code>
+gchar *tmp, *css;
+</code>
+
+ <p>A data URI starts with <sys>data:</sys> and some information about
+ the content type and how the data is encoded. The actual data follows after
+ a comma, in this case encoded in Base64. Unlike other URI schemes like
+ <sys>http:</sys>, <sys>ftp:</sys>, and <sys>file:</sys>, the <sys>data:</sys>
+ URI scheme doesn't specify where to find a file to load. Rather, it gives
+ the entire contents of the file.</p>
+
+ <p>The code above first encodes your CSS definitions in Base64, then
+ combines that with a fixed string to create a data URI. The
+ <code>g_strconcat</code> function can take any number of string arguments
+ and concatenate them all together, so you have to pass <code>NULL</code>
+ as the final argument so it knows when to stop. And don't forget to free
+ those temporary strings after you set the stylesheet property.</p>
+
+ <p>Build and run the program again. It should now work exactly the same
+ as at the end of the last section, except the messages will be nicely
+ styled with a border and a subtle background gradient.</p>
+</section>
+
+<section id="more">
+ <title>Learn more</title>
+
+ <p>This tutorial showed you how to create a basic application using GTK+
+ and WebKit, including showing a document and manipulating its contents.
+ To create a real application, you probably want to do a little bit more.
+ Try adding features on your own. Here are a few ideas:</p>
+
+ <list>
+ <item><p>If you're comfortable with CSS, try changing the style of the
+ message display. CSS is easy to get started with, but increasingly more
+ powerful. There is a wealth of CSS tutorials on the Internet, and just
+ about everything you can do on the web, you can do in this
+ application.</p></item>
+
+ <item><p>Right now, you lose all your messages whenever you close the
+ message board. Try saving the HTML contents after each post, and loading
+ the saved file (if it exists) on startup.</p>
+ <comment>
+ <cite>shaunm</cite><p>Link to method to get HTML from DOM and to
+ GIO APIs.</p>
+ </comment></item>
+
+ <item><p>If you keep your messages around for a long time, you'll start
+ wondering when you posted them. Add a timestamp to each message when it's
+ posted. You'll probably want to create some additional child <code>div</code>
+ elements with different classes that you can style in the CSS.</p>
+ <comment><cite>shaunm</cite><p>Link to strftime or something</p></comment>
+ </item>
+
+ <item><p>This program keeps messages around forever. Think about ways
+ you could allow the user to delete messages. Perhaps you want messages
+ to disappear automatically after they're too old, or after there are a
+ certain number of messages before them. Or you could add a link in each
+ message to delete it. You could even override the context menu when you
+ right-click on a message. These features involve exploring WebKit's DOM
+ API more.</p></item>
+ </list>
+</section>
+</page>
diff --git a/beginners-docs/C/messagedialog.c.page b/beginners-docs/C/messagedialog.c.page
new file mode 100644
index 0000000..40fb571
--- /dev/null
+++ b/beginners-docs/C/messagedialog.c.page
@@ -0,0 +1,44 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="messagedialog.c">
+ <info>
+ <title type="text">MessageDialog (C)</title>
+ <link type="guide" xref="beginner.c#windows"/>
+ <link type="seealso" xref="dialog.c"/>
+ <revision version="0.2" date="2012-08-07" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Monica Kochofar</name>
+ <email>monicakochofar gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A message window</desc>
+ </info>
+
+ <title>MessageDialog</title>
+
+ <media type="image" mime="image/png" src="media/messagedialog.png"/>
+ <p>A modal message dialog which can cause the world to explode.</p>
+ <note><p>
+ To test out the application once it has started running, you can click on the "Message Dialog" tab that
appears in the top menubar of the screen.
+ </p></note>
+
+ <code mime="text/x-csrc" style="numbered">
+<xi:include href="samples/messagedialog.c" parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/3.4/GtkApplication.html";>GtkApplication</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gio/stable/GApplication.html";>GApplication</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/3.4/GtkWindow.html";>GtkWindow</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkMessageDialog.html";>GtkMessageDialog</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gio/stable/GSimpleAction.html#g-simple-action-new";>GSimpleAction</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gio/stable/GActionMap.html";>GActionMap</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gio/stable/GMenu.html";>GMenu</link></p></item>
+
+</list>
+</page>
diff --git a/beginners-docs/C/messagedialog.js.page b/beginners-docs/C/messagedialog.js.page
new file mode 100644
index 0000000..602016f
--- /dev/null
+++ b/beginners-docs/C/messagedialog.js.page
@@ -0,0 +1,200 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="messagedialog.js">
+ <info>
+ <title type="text">MessageDialog (JavaScript)</title>
+ <link type="guide" xref="beginner.js#windows"/>
+ <link type="seealso" xref="GtkApplicationWindow.js" />
+ <link type="seealso" xref="gmenu.js" />
+ <link type="seealso" xref="label.js" />
+ <revision version="0.2" date="2012-06-25" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Taryn Fox</name>
+ <email>jewelfox fursona net</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A popup message attached to a window</desc>
+ </info>
+
+ <title>MessageDialog</title>
+ <media type="image" mime="image/png" src="media/messagedialog.png"/>
+ <p>A MessageDialog is a modal message dialog, which means a popup that you have to respond to before you
get back to what you were doing in the window that it's attached to. This one can cause the world to explode
(or at least it says that it can). To make the popup appear when you run this sample, click on "Message"
inside of its application menu -- that's the menu that appears when you click on an application's name in the
upper-left screen corner, next to Activities.</p>
+ <note><p>The difference between a MessageDialog and a <link xref="dialog.js">Dialog</link> is that a
Dialog can contain whatever widgets and content you want to put in it, whereas a MessageDialog is just a
convenient way to make popups appear with a basic message and buttons.</p></note>
+ <links type="section" />
+
+ <section id="imports">
+ <title>Libraries to import</title>
+ <code mime="application/javascript"><![CDATA[
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+]]></code>
+ <p>These are the libraries we need to import for this application to run. Remember that the line which
tells GNOME that we're using Gjs always needs to go at the start.</p>
+ </section>
+
+ <section id="applicationwindow">
+ <title>Creating the application window</title>
+ <code mime="application/javascript"><![CDATA[
+const MessageDialogExample = new Lang.Class ({
+ Name: 'MessageDialog Example',
+
+ // Create the application itself
+ _init: function () {
+ this.application = new Gtk.Application ({
+ application_id: 'org.example.jsmessagedialog',
+ flags: Gio.ApplicationFlags.FLAGS_NONE });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents windows when active
+ _onActivate: function () {
+ this._window.present ();
+ },
+
+ // Callback function for 'startup' signal initializes menus and builds the UI
+ _onStartup: function () {
+ this._initMenus();
+ this._buildUI ();
+ },
+]]></code>
+ <p>All the code for this sample goes in the MessageDialogExample class. The above code creates a <link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link> for our
widgets and window to go in.</p>
+ <note><p>Before we call _buildUI to create the window and the widgets inside it, we need to call
_initMenus, which tells GNOME to create the menu. We can put the actual code for _initMenus after the code
for _buildUI, since it doesn't matter what order we put them in so long as _initMenus is called first in
_onStartup.</p></note>
+ <code mime="application/javascript"><![CDATA[
+ // Build the application's UI
+ _buildUI: function () {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow ({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ title: "Gtk.MessageDialog Example",
+ default_height: 200,
+ default_width: 400 });
+]]></code>
+ <p>The _buildUI function is where we put all the code to create the application's user interface. The
first step is creating a new <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link> to put all our
widgets into.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Create a silly warning message and add it to the window
+ this.warningLabel = new Gtk.Label ({
+ label: "This application goes boom! (Not really.)"});
+ this._window.add (this.warningLabel);
+]]></code>
+ <p>For this example, all that we have in the window the popup comes out of is a silly warning <link
xref="label.js">Label</link>.</p>
+ </section>
+
+ <section id="menu">
+ <title>Creating the application's menu</title>
+ <code mime="application/javascript"><![CDATA[
+ // Build the application menu, including the button that calls the dialog
+ _initMenus: function() {
+ let menu = new Gio.Menu();
+ menu.append("Message",'app.message');
+ menu.append("Quit",'app.quit');
+ this.application.set_app_menu(menu);
+
+ // This pops up a MessageDialog when "Message" is clicked in the menu
+ let messageAction = new Gio.SimpleAction ({ name: 'message' });
+ messageAction.connect('activate', Lang.bind(this,
+ function() {
+ this._showMessageDialog();
+ }));
+ this.application.add_action(messageAction);
+
+ // This closes the window when "Quit" is clicked in the menu
+ let quitAction = new Gio.SimpleAction ({ name: 'quit' });
+ quitAction.connect('activate', Lang.bind(this,
+ function() {
+ this._window.destroy();
+ }));
+ this.application.add_action(quitAction);
+ },
+]]></code>
+ <p>Here, we build the <link xref="gmenu.js">GMenu</link> where we'll be putting the "Message" button
which triggers the popup MessageDialog. The GMenu is the menu that appears when you click the application's
name in the upper-left corner of the screen, next to the Activities menu. Our menu only has two options in
it: Message, and Quit.</p>
+ </section>
+
+ <section id="messagedialog">
+ <title>Creating the MessageDialog</title>
+ <code mime="application/javascript"><![CDATA[
+ _showMessageDialog: function () {
+
+ // Create a modal MessageDialog whose parent is the window
+ this._messageDialog = new Gtk.MessageDialog ({
+ transient_for: this._window,
+ modal: true,
+ buttons: Gtk.ButtonsType.OK_CANCEL,
+ message_type: Gtk.MessageType.WARNING,
+ text: "This action will cause the universe to stop existing." });
+
+ this._messageDialog.connect ('response', Lang.bind(this, this._response_cb));
+ this._messageDialog.show();
+ },
+]]></code>
+ <p>To make our MessageDialog a popup attached to the main window, we set its modal property to true and
set it to be "transient_for" _window. After that, we can set what kind of buttons it has and what kind of
message it is (which determines what icon appears next to the message), and write out the text inside it,
before connecting its "response" signal to the callback function which handles it.</p>
+ <note><p>Here are some resources for making your own MessageDialogs:</p>
+ <list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkMessageDialog.html#GtkButtonsType";>List of button
types</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkMessageDialog.html#GtkMessageType";>List of message
types</link></p></item>
+ </list>
+ </note>
+
+ <code mime="application/javascript"><![CDATA[
+ // Callback function (aka signal handler) for the response signal
+ _response_cb: function (messagedialog, response_id) {
+
+ // A simple switch that changes the main window's label
+ switch (response_id) {
+ case Gtk.ResponseType.OK:
+ this.warningLabel.set_label ("*BOOM*\n");
+ break;
+ case Gtk.ResponseType.CANCEL:
+ this.warningLabel.set_label ("Good choice!\n");
+ break;
+ case Gtk.ResponseType.DELETE_EVENT:
+ this.warningLabel.set_label ("Dialog closed or cancelled.\n");
+ break;
+ }
+
+ this._messageDialog.destroy();
+
+ }
+
+});
+]]></code>
+ <p>This function takes two parameters, the MessageDialog and its response_id, both of which are
automatically supplied (you don't have to manually pass them to it for it to work). Here we use a simple
switch to change the "warning label"'s text, depending on which option you select. The DELETE_EVENT occurs if
you press Escape to cancel the MessageDialog, instead of clicking OK or Cancel. Whatever you select, the
popup is destroyed afterwards.</p>
+
+ <code mime="application/javascript"><![CDATA[
+// Run the application
+let app = new MessageDialogExample ();
+app.application.run (ARGV);
+]]></code>
+ <p>Finally, we create a new instance of the finished MessageDialogExample class, and set the application
running.</p>
+ </section>
+
+ <section id="complete">
+ <title>Complete code sample</title>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/messagedialog.js"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="in-depth">
+ <title>In-depth documentation</title>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="http://developer.gnome.org/gio/unstable/GMenu.html";>GMenu</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gio/stable/GSimpleAction.html";>GSimpleAction</link></p></item>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.MessageDialog.html";>Gtk.MessageDialog</link></p></item>
+</list>
+ </section>
+</page>
diff --git a/beginners-docs/C/messagedialog.py.page b/beginners-docs/C/messagedialog.py.page
new file mode 100644
index 0000000..7a4b682
--- /dev/null
+++ b/beginners-docs/C/messagedialog.py.page
@@ -0,0 +1,67 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="messagedialog.py">
+ <info>
+ <title type="text">MessageDialog (Python)</title>
+ <link type="guide" xref="beginner.py#windows"/>
+ <link type="next" xref="gmenu.py"/>
+ <revision version="0.1" date="2012-06-11" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A message window</desc>
+ </info>
+
+ <title>MessageDialog</title>
+ <media type="image" mime="image/png" src="media/messagedialog.png"/>
+ <p>A message dialog which prints messages on the terminal, depending on your choices.</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/messagedialog.py"
parse="text"><xi:fallback/></xi:include></code>
+
+ </section>
+
+ <section id="methods">
+ <title>Useful methods for a MessageDialog widget</title>
+ <p>In line 18 the signal <code>"activate"</code> is connected to the callback function
<code>message_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback
function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.</p>
+ <list>
+ <item><p>In the constructor of MessageDialog we could set flags as
<code>Gtk.DialogFlags.DESTROY_WITH_PARENT</code> (to destroy the messagedialog window when its parent window
is destroyed) or as <code>Gtk.DialogFlags.MODAL</code> (no interaction with other windows of the
application).</p></item>
+ <item><p>In the constructor of MessageDialog we could set type as any of <code>Gtk.MessageType.INFO,
Gtk.MessageType.WARNING, Gtk.MessageType.QUESTION, Gtk.MessageType.ERROR, Gtk.MessageType.OTHER</code>
depending on what type of message we want.</p></item>
+ <item><p>In the constructor of MessageDialog we could set buttons as any of <code>Gtk.ButtonsType.NONE,
Gtk.ButtonsType.OK, Gtk.ButtonsType.CLOSE, Gtk.ButtonsType.CANCEL, Gtk.ButtonsType.YES_NO,
Gtk.ButtonsType.OK_CANCEL</code>, or any button using <code>add_button()</code> as in Gtk.Dialog.</p></item>
+ <item><p>We could substitute the default image of the MessageDialog with another image using</p>
+ <code mime="text/x-python">
+image = Gtk.Image()
+image.set_from_stock(Gtk.STOCK_CAPS_LOCK_WARNING, Gtk.IconSize.DIALOG)
+image.show()
+messagedialog.set_image(image)</code>
+ <p>where <code>Gtk.STOCK_CAPS_LOCK_WARNING</code> is any image from <link
href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items.html";>Stock Items</link>. We could also set
any image as in the Image widget, as <code>image.set_from_file("filename.png")</code>.</p></item>
+ <item><p><code>format_secondary_text("some secondary message")</code> sets a secondary message. The
primary text becomes bold.</p></item>
+ </list>
+ </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/GtkMessageDialog.html";>GtkMessageDialog</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/unstable/GtkDialog.html";>GtkDialog</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/unstable/GtkWindow.html";>GtkWindow</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gio/stable/GSimpleAction.html";>GSimpleAction</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gio/unstable/GActionMap.html";>GActionMap</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gio/stable/GMenu.html";>GMenu</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkApplication.html";>GtkApplication</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/messagedialog.vala.page b/beginners-docs/C/messagedialog.vala.page
new file mode 100644
index 0000000..1730685
--- /dev/null
+++ b/beginners-docs/C/messagedialog.vala.page
@@ -0,0 +1,36 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="messagedialog.vala">
+ <info>
+ <title type="text">MessageDialog (Vala)</title>
+ <link type="guide" xref="beginner.vala#windows"/>
+ <revision version="0.1" date="2012-04-07" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A message window</desc>
+ </info>
+
+ <title>MessageDialog</title>
+ <media type="image" mime="image/png" src="media/messagedialog.png"/>
+ <p>A modal message dialog which can cause the world to explode.</p>
+
+<code mime="text/x-csharp" style="numbered">
+<xi:include href="samples/messagedialog.vala" parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.ResponseType.html";>Gtk.ResponseType</link></p></item>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.MessageDialog.html";>Gtk.MessageDialog</link></p></item>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.DialogFlags.html";>Gtk.DialogFlags</link></p></item>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.MessageType.html";>Gtk.MessageType</link></p></item>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.ButtonsType.html";>Gtk.ButtonsType</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/model-view-controller.py.page b/beginners-docs/C/model-view-controller.py.page
new file mode 100644
index 0000000..35c08c6
--- /dev/null
+++ b/beginners-docs/C/model-view-controller.py.page
@@ -0,0 +1,195 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:e="http://projectmallard.org/experimental/";
+ type="guide" style="task"
+ id="model-view-controller.py">
+
+<info>
+ <title type="text">The Model/View/Controller design (Python)</title>
+ <link type="guide" xref="beginner.py#theory"/>
+ <link type="next" xref="combobox_multicolumn.py"/>
+ <revision version="0.1" date="2012-06-30" status="stub"/>
+
+ <desc>The Model/View/Controller design</desc>
+ <credit type="author copyright">
+ <name>Sebastian Pölsterl</name>
+ <email>sebp k-d-w org</email>
+ <years>2011</years>
+ </credit>
+ <credit type="author copyright editor">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+</info>
+
+<title>The Model/View/Controller design</title>
+
+<links type="section" />
+
+<section id="overview">
+<title>Overview</title>
+
+<p>Both the <link xref="treeview_simple_liststore.py">TreeView</link> and the <link
xref="combobox.py">ComboBox</link> widgets are built on the <em>Model/View/Controller</em> design. The
<em>Model</em> (an implementation of <code>Gtk.TreeModel</code>, usually <code>Gtk.TreeStore</code> or
<code>Gtk.ListStore</code>) stores the data; the <em>View</em> (e.g. <code>Gtk.TreeView</code>,
<code>Gtk.ComboBox</code>, or <code>Gtk.ComboBoxText</code>) gets change notifications and displays the
content of the model. The <em>Controller</em>, finally, changes the state of the model (via some methods in
the model's implementation - such as <code>append()</code> or <code>remove()</code>) and notifies the view of
these changes (via signals like <code>"changed"</code>).</p>
+
+</section>
+
+<section id="model">
+<title>The Model</title>
+
+<p>The main difference between the two main implementations of <code>Gtk.TreeModel</code> is that
<code>Gtk.ListStore</code> contains simple rows of data without children, whereas <code>Gtk.TreeStore</code>
also contains rows of data, but each row may have child rows (which in turn can have child rows, and so
on).</p>
+
+<p>The data in the Model can be retrieved or modified using the tree iter and column index, or
<code>Gtk.TreeIter</code>, or <code>Gtk.TreePath</code>.</p>
+
+<p>As with Python's built-in list object you can use <code>len()</code> to get the number of rows and use
slices to retrieve or set values. Otherwise, the method <code>append()</code> returns a
<code>Gtk.TreeIter</code> instance, which points to the location of the newly inserted row. You can also
retrieve a <code>Gtk.TreeIter</code> by calling <code>get_iter()</code>.</p>
+
+<p>As <code>Gtk.ListStore</code> contains only one level, i.e. nodes do not have any child nodes, a path is
essentially the index of the row you want to access. In the case of <code>Gtk.TreeStore</code>, a path is a
list of indexes or a string. The string form is a list of numbers separated by a colon. Each number refers to
the offset at that level. Thus, the path <code>"0"</code> refers to the root node and the path
<code>"2:4"</code> refers to the fifth child of the third node.</p>
+
+<p>Useful methods for a <code>Gtk.TreeModel</code>:</p>
+<list>
+ <item><p><code>get_iter(path)</code> returns a <code>Gtk.TreeIter</code> instance pointing to
<code>path</code>. This is expected to be a colon-separated list of numbers, or a tuple. For example, the
string <code>"10:4:0"</code> is equivalent to the tuple <code>(10, 4, 0)</code>, as both would create a path
of depth 3 pointing to the 11th child of the root node, the 5th child of that 11th child, and the 1st child
of that 5th child.</p></item>
+ <item><p><code>iter_next(treeiter)</code> returns a <code>Gtk.TreeIter</code> instance pointing the node
following treeiter at the current level or <code>None</code> if there is no next iter.</p></item>
+ <item><p><code>iter_has_child(treeiter)</code> returns <code>True</code> if <code>treeiter</code> has
children, <code>False</code> otherwise.</p></item>
+ <item><p><code>iter_children(treeiter)</code> returns a <code>Gtk.TreeIter</code> instance pointing to the
first child of <code>treeiter</code> or <code>None</code> if <code>treeiter</code> has no children.</p></item>
+ <item><p><code>get_iter_first()</code> returns a <code>Gtk.TreeIter</code> instance pointing to the first
iterator in the tree (the one at the path <code>"0"</code>) or <code>None</code> if the tree is
empty.</p></item>
+</list>
+
+<p>Useful methods for a <code>Gtk.ListStore</code>:</p>
+<list>
+ <item><p><code>append(row)</code> appends a new row to this list store, where <code>row</code> can be a
list of values for each column; <code>row</code> can also be omitted or <code>None</code>, and in that case
an empty row will be appended. The method returns a <code>Gtk.TreeIter</code> pointing to the appended
row.</p></item>
+ <item><p><code>remove(iter)</code> removes <code>iter</code> from the <code>Gtk.ListStore</code>, and
returns <code>True</code> if the iter is valid, and <code>False</code> if the iter is not. After being
removed, <code>iter</code> is set to be the next valid row.</p></item>
+</list>
+
+<p>Useful methods for a <code>Gtk.TreeStore</code>:</p>
+<list>
+ <item><p><code>append(parent, row)</code> appends a new row to this tree store; <code>parent</code> must
be a valid Gtk.TreeIter. If parent is not <code>None</code>, then it will append the new row after the last
child of parent, otherwise it will append a row to the top level; <code>row</code> can be a list of values
for each column, or it can be omitted or <code>None</code>; in this latter case an empty row will be
appended. The method returns a <code>Gtk.TreeIter</code> pointing to the appended row.</p></item>
+ <item><p><code>remove(iter)</code> removes <code>iter</code> from the <code>Gtk.ListStore</code>, and
returns <code>True</code> if the iter is valid, and <code>False</code> if the iter is not. After being
removed, <code>iter</code> is set to be the next valid row.</p></item>
+</list>
+
+</section>
+
+<section id="treeview">
+<title>The View: the TreeView case</title>
+
+<p>A Treeview shows the structure of children and parent items as a tree. See for instance <link
xref="treeview_treestore.py">this example</link>.</p>
+
+<p>The <code>Gtk.TreeViewColumn</code> is used to organize the vertical columns.</p>
+
+<p>Useful methods for a <code>Gtk.TreeView</code>:</p>
+<list>
+ <item><p><code>set_model(model)</code> sets the model for this tree view. If this tree view already has a
model set, it will remove it before setting the new model. If model is <code>None</code>, then it will unset
the old model.</p></item>
+ <item><p><code>get_model()</code> returns the model this tree view is based on, <code>None</code> if the
model is unset.</p></item>
+ <item><p><code>append_column(column)</code> appends <code>column</code> to the list of columns.</p></item>
+ <item><p><code>get_selection()</code> gets the <code>Gtk.TreeSelection</code> associated with this tree
view.</p></item>
+</list>
+
+<p>Useful methods for a <code>Gtk.TreeViewColumn</code>:</p>
+<list>
+ <item><p><code>add_attribute(renderer, attribute, value)</code> adds an attribute mapping to this column.
<code>attribute</code> is the parameter on <code>renderer</code> to be set from the
<code>value</code></p></item>
+ <item><p><code>pack_start(renderer, expand)</code> packs <code>renderer</code> into the beginning of this
column. If <code>expand</code> is <code>False</code>, then <code>renderer</code> is allocated no more space
than it needs. Any unused space is divided evenly between cells for which expand is
<code>True</code>.</p></item>
+ <item><p><code>pack_end(renderer, expand)</code> adds <code>renderer</code> to end of this column. If
<code>expand</code> is <code>False</code>, then <code>renderer</code> is allocated no more space than it
needs. Any unused space is divided evenly between cells for which <code>expand</code> is
<code>True</code>.</p></item>
+ <item><p><code>set_sort_column_id(sort_column_id)</code> sets the column of the model by which this column
(of the view) should be sorted. This also makes the column header clickable.</p></item>
+ <item><p><code>set_sort_indicator(setting)</code> sets whether a little arrow is displayed in the column
header; <code>setting</code> can either be <code>True</code> (indicator is shown) or
<code>False</code>.</p></item>
+ <item><p><code>set_sort_order(order)</code> changes the order by which the column is sorted;
<code>order</code> can either be <code>Gtk.SortType.ASCENDING</code> or
<code>Gtk.SortType.DESCENDING</code>.</p></item>
+</list>
+
+</section>
+
+<section id="combobox">
+<title>The View: the ComboBox case</title>
+
+<p>A <code>Gtk.ComboBox</code> allows for the selection of an item from a dropdown menu, see for instance
<link xref="combobox.py">this example</link>. For a list of textual choices, one can also use the simpler
<code>Gtk.ComboBoxText</code>. Both <code>Gtk.ComboBox</code> and <code>Gtk.ComboBoxText</code> can contain
an entry.</p>
+
+<p>Useful methods for a <code>Gtk.ComboBox</code>:</p>
+<list>
+ <item><p>The static method <code>new_with_entry()</code> creates a new empty <code>Gtk.ComboBox</code>
with an entry; the static method <code>new_with_model(model)</code> creates a new one with the model
initialized to <code>model</code>; and the static method <code>new_with_model_and_entry(model)</code> is a
combination of the two.</p></item>
+ <item><p><code>get_active_iter()</code> returns a <code>Gtk.TreeIter</code> pointing to the current active
item. If no active item exists, <code>None</code> is returned.</p></item>
+ <item><p><code>set_model(model)</code> sets the model used by this combo box to be <code>model</code>, and
it will unset a previously set model (if there is any). If <code>model</code> is <code>None</code>, then it
will unset the model. Note that this function does not clear the cell renderers.</p></item>
+ <item><p><code>set_entry_text_column(text_column)</code> sets the model column which this combo box should
use to get strings from to be <code>text_column</code>. The column <code>text_column</code> in the model of
this combo box must be of type <code>str</code> (this is only relevant if this combo box has been created
with the “has-entry” property set to True).</p></item>
+ <item><p><code>set_wrap_width(width)</code> sets the wrap width of this combo box to be
<code>width</code>. The wrap width is basically the preferred number of columns when you want the popup to be
layed out in a grid.</p></item>
+</list>
+
+<p>Useful methods for a <code>Gtk.ComboBoxText</code>:</p>
+<list>
+ <item><p>The static method <code>new_with_entry()</code> creates a new empty <code>Gtk.ComboBoxText</code>
with an entry.</p></item>
+ <item><p><code>append_text(text)</code> appends <code>text</code> to the list of strings stored in this
combo box.</p></item>
+ <item><p><code>get_active_text()</code> returns the currently active string in this combo box, or
<code>None</code> if none is selected. If this combo box contains an entry, this function will return its
contents (which will not necessarily be an item from the list).</p></item>
+</list>
+
+</section>
+
+<section id="cellrenderer">
+<title>The View: the Cellrenderers</title>
+
+<p>The View makes use of <code>Gtk.CellRenderer</code>s of various types to draw the data.</p>
+
+<p>Implementations of <code>Gtk.CellRenderer</code> and useful methods:</p>
+<list>
+ <item><p><code>Gtk.CellRendererText</code> - renders text in a cell</p></item>
+ <item><p><code>Gtk.CellRendererToggle</code> - renders a toggle or radio button in a cell. Useful
methods:</p>
+ <list>
+ <item><p><code>set_active(setting)</code> - activates or deactivates a cell renderer</p></item>
+ <item><p><code>get_active()</code> - returns whether the cell renderer is active</p></item>
+ <item><p><code>set_radio(radio)</code> - if radio is <code>True</code>, the cell renderer renders a
radio toggle (i.e. a toggle in a group of mutually-exclusive toggles); if <code>False</code>, it renders a
check toggle (a standalone boolean option)</p></item>
+ <item><p><code>get_radio()</code> - returns whether we are rendering radio toggles rather than
checkboxes.</p></item>
+ </list>
+ </item>
+ <item><p><code>Gtk.CellRendererPixbuf</code> - renders an image in a cell</p></item>
+ <item><p><code>Gtk.CellRendererCombo</code> - renders text in a cell; but while
<code>Gtk.CellRendererText</code> offers a simple entry to edit the text, <code>Gtk.CellRendererCombo</code>
offers a <code>Gtk.ComboBox</code> widget to edit the text. It can be used with and without an associated
Gtk.Entry widget, depending on the value of the “has-entry” property.</p></item>
+ <item><p><code>Gtk.CellRendererProgress</code> - renders a numeric value as a progress bar in a cell; it
can display a text on top of the progress bar</p></item>
+ <item><p><code>Gtk.CellRendererSpinner</code> - renders a spinning animation in a cell</p></item>
+ <item><p><code>Gtk.CellRendererSpin</code> - renders a spin button in a cell</p></item>
+ <item><p><code>Gtk.CellRendererAccel</code> - renders a keyboard accelerator in a cell</p></item>
+</list>
+
+</section>
+
+<section id="selection">
+<title>The Controller: the Selection</title>
+
+<p>Most applications will need to not only deal with displaying data, but also receiving input events from
users. To do this, simply get a reference to a selection object and connect to the <code>"changed"</code>
signal.</p>
+
+<code mime="text/x-python">
+select = tree.get_selection()
+select.connect("changed", on_tree_selection_changed)
+</code>
+
+<p>Then to retrieve data for the row selected:</p>
+
+<code mime="text/x-python">
+def on_tree_selection_changed(selection):
+ model, treeiter = selection.get_selected()
+ if treeiter != None:
+ print "You selected", model[treeiter][0]
+</code>
+
+<p>Useful methods for a <code>Gtk.TreeSelection</code>:</p>
+
+<list>
+ <item><p><code>set_mode(type)</code> sets the type of selection, where type is one of</p>
+ <list>
+ <item><p><code>Gtk.SelectionMode.NONE</code> - no selection is possible</p></item>
+ <item><p><code>Gtk.SelectionMode.SINGLE</code> - zero or one element may be selected</p></item>
+ <item><p><code>Gtk.SelectionMode.BROWSE</code> - exactly one element is selected. In some circumstances,
such as initially or during a search operation, it’s possible for no element to be selected. What is really
enforced is that the user can’t deselect a currently selected element except by selecting another
element.</p></item>
+ <item><p><code>Gtk.SelectionMode.MULTIPLE</code> -any number of elements may be selected. Clicks toggle
the state of an item. The Ctrl key may be used to enlarge the selection, and Shift key to select between the
focus and the child pointed to. Some widgets may also allow Click-drag to select a range of
elements.</p></item>
+ </list>
+ </item>
+ <item><p><code>get_selected()</code> returns a tuple <code>(model, treeiter)</code>, where
<code>model</code> is the current model and <code>treeiter</code> a <code>Gtk.TreeIter</code> pointing to the
currently selected row, or None if no rows are selected. The method does not work if the selection mode is
set to <code>Gtk.SelectionMode.MULTIPLE</code>; in that case, use <code>get_selected_rows()</code> instead,
which Returns a list of <code>Gtk.TreePath</code> instances of all selected rows.</p></item>
+</list>
+
+</section>
+
+<section id="references">
+<title>References</title>
+
+<list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkTreeModel.html";>GtkTreeModel</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkTreeView.html";>GtkTreeView</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkTreeViewColumn.html";>GtkTreeViewColumn</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkComboBox.html";>GtkComboBox</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkCellRenderer.html";>GtkCellRenderer</link></p></item>
+</list>
+
+</section>
+
+</page>
diff --git a/beginners-docs/C/paned.py.page b/beginners-docs/C/paned.py.page
new file mode 100644
index 0000000..03c348b
--- /dev/null
+++ b/beginners-docs/C/paned.py.page
@@ -0,0 +1,46 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="paned.py">
+ <info>
+ <title type="text">Paned (Python)</title>
+ <link type="guide" xref="beginner.py#layout"/>
+ <link type="next" xref="signals-callbacks.py"/>
+ <revision version="0.1" date="2012-08-15" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A widget with two adjustable panes</desc>
+ </info>
+
+ <title>Paned</title>
+ <media type="image" mime="image/png" src="media/paned.png"/>
+ <p>Two images in two adjustable panes, horizontally aligned.</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/paned.py"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="methods">
+ <title>Useful methods for a Paned widget</title>
+ <p>To have two vertically aligned panes, use <code>Gtk.Orientation.VERTICAL</code> instead of
<code>Gtk.Orientation.HORIZONTAL</code>. The method <code>add1(widget1)</code> will add the
<code>widget1</code> to the top pane, and <code>add2(widget2)</code> will add the <code>widget2</code> to the
bottom pane.</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/stable/GtkPaned.html";>GtkPaned</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/gtk3-Standard-Enumerations.html#GtkOrientation";>Standard
Enumerations</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/unstable/GtkImage.html";>GtkImage</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/part-1.vala.page b/beginners-docs/C/part-1.vala.page
new file mode 100644
index 0000000..a85edfc
--- /dev/null
+++ b/beginners-docs/C/part-1.vala.page
@@ -0,0 +1,121 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="part-1.vala">
+ <info>
+ <link type="guide" xref="hello-world.vala"/>
+ <link type="next" xref="part-2.vala"/>
+ <title type="link" role="series">
+ Your first GTK+ application
+ </title>
+ <revision version="0.1" date="2012-02-20" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>An intro to Anjuta's interface builder</desc>
+ </info>
+
+ <title>Part 1: Your first GTK+ application</title>
+ <links type="series" style="floatend"/>
+
+<synopsis>
+ <p>This tutorial is a brief introduction to Anjuta's interface builder.</p>
+ <p>In this tutorial you will create a very simple application.</p>
+ <p>You'll need an installed copy of <app>Anjuta</app> to be able to follow this tutorial.</p>
+</synopsis>
+
+<media type="image" mime="image/png" src="media/hello-world-label.png" width="300"/>
+
+<section id="anjuta">
+ <title>Create a project in Anjuta</title>
+ <p>Anjuta will create all of the files you need to build and run your application.
+ It's also a very useful tool for keeping everything together.</p>
+ <steps>
+ <item>
+ <p>Start <app>Anjuta</app> and click <gui>Create a new project</gui> or
<guiseq><gui>File</gui><gui>New</gui><gui>Project</gui></guiseq> to open the project wizard.</p>
+ </item>
+ <item>
+ <p>Choose <gui>GTK+ (Simple)</gui> from the <gui>Vala</gui> tab, click <gui>Forward</gui>, and fill
out your details on the next few pages.
+ Use <file>hello-world</file> as the project name and directory. Click <gui>Continue</gui>.</p>
+ </item>
+ <item>
+ <p>Click <gui>Apply</gui> and the project will be created for you.</p>
+ </item>
+ </steps>
+
+<p>From the <gui>Project</gui> or <gui>Files</gui> tab, open <file>src/hello_world.vala</file> by
double-clicking on it. You should see some code:</p>
+
+ <listing>
+ <title>src/hello_world.vala</title>
+ <code mime="text/x-csharp"><![CDATA[
+using GLib;
+using Gtk;
+
+public class Main : Object
+{
+ const string UI_FILE = "src/hello_world.ui";
+
+ public Main ()
+ {
+ try
+ {
+ var builder = new Builder ();
+ builder.add_from_file (UI_FILE);
+ builder.connect_signals (this);
+
+ var window = builder.get_object ("window") as Window;
+ window.show_all ();
+ }
+ catch (Error e) {
+ stderr.printf ("Could not load UI: %s\n", e.message);
+ }
+ }
+
+ public void on_destroy (Widget window)
+ {
+ Gtk.main_quit();
+ }
+
+ static int main (string[] args)
+ {
+ Gtk.init (ref args);
+ var app = new Main ();
+
+ Gtk.main ();
+
+ return 0;
+ }
+}]]></code>
+ </listing>
+
+</section>
+
+<section id="build">
+ <title>Build the code for the first time</title>
+ <p>The code loads an (empty) window from the user interface description file and displays it.</p>
+
+ <list>
+ <item>
+ <p>The two <code>using</code> lines import namespaces so we don't have to name them explicitly.</p>
+ </item>
+ <item>
+ <p>The constructor of the <code>Main</code> class creates a new window by opening a GtkBuilder file
(<file>src/hello_world.ui</file>, defined a few lines above), connecting its signals and then displaying it
in a window. This GtkBuilder file contains a description of a user interface and all of its elements. You can
use Anjuta's editor to design GtkBuilder user interfaces.</p>
+ <note>
+ <p>Connecting signals is how you define what happens when you push a button, or when some other event
happens. Here, the <code>on_destroy</code> function is called (and quits the app) when you close the
window.</p>
+ </note>
+ </item>
+ <item>
+ <p>The static <code>main</code> function is run by default when you start a Vala application. It calls a
few functions which create the Main class, set up and then run the application. The <code>Gtk.main</code>
function starts the GTK main loop, which runs the user interface and starts listening for events (like clicks
and key presses).</p>
+ </item>
+ </list>
+
+ <p>This code is ready to be used, so you can compile it by clicking <guiseq><gui>Build</gui><gui>Build
Project</gui></guiseq> (or press <keyseq><key>Shift</key><key>F7</key></keyseq>). When you do this, a dialog
will appear. Change the <gui>Configuration</gui> to <gui>Default</gui> and then click <gui>Execute</gui> to
configure the build directory. You only need to do this once, for the first build.</p>
+
+
+</section>
+
+</page>
diff --git a/beginners-docs/C/part-2.vala.page b/beginners-docs/C/part-2.vala.page
new file mode 100644
index 0000000..36ce231
--- /dev/null
+++ b/beginners-docs/C/part-2.vala.page
@@ -0,0 +1,22 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="part-2.vala">
+ <info>
+ <link type="guide" xref="hello-world.vala"/>
+ <link type="next" xref="part-3.vala"/>
+ <revision version="0.1" date="2012-02-20" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc></desc>
+ </info>
+
+ <title>Part 2:</title>
+ <links type="series" style="floatright"/>
+
+</page>
diff --git a/beginners-docs/C/part-3.vala.page b/beginners-docs/C/part-3.vala.page
new file mode 100644
index 0000000..ae00c40
--- /dev/null
+++ b/beginners-docs/C/part-3.vala.page
@@ -0,0 +1,22 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="part-3.vala">
+ <info>
+ <link type="guide" xref="hello-world.vala"/>
+ <link type="next" xref="part-4.vala"/>
+ <revision version="0.1" date="2012-02-20" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc></desc>
+ </info>
+
+ <title>Part 3:</title>
+ <links type="series" style="floatright"/>
+
+</page>
diff --git a/beginners-docs/C/part-4.vala.page b/beginners-docs/C/part-4.vala.page
new file mode 100644
index 0000000..c447ac4
--- /dev/null
+++ b/beginners-docs/C/part-4.vala.page
@@ -0,0 +1,22 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="part-4.vala">
+ <info>
+ <link type="guide" xref="hello-world.vala"/>
+ <link type="next" xref="part-5.vala"/>
+ <revision version="0.1" date="2012-02-20" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc></desc>
+ </info>
+
+ <title>Part 4:</title>
+ <links type="series" style="floatright"/>
+
+</page>
diff --git a/beginners-docs/C/part-5.vala.page b/beginners-docs/C/part-5.vala.page
new file mode 100644
index 0000000..c7d74c2
--- /dev/null
+++ b/beginners-docs/C/part-5.vala.page
@@ -0,0 +1,22 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="part-5.vala">
+ <info>
+ <link type="guide" xref="hello-world.vala"/>
+ <link type="next" xref="part-6.vala"/>
+ <revision version="0.1" date="2012-02-20" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc></desc>
+ </info>
+
+ <title>Part 5:</title>
+ <links type="series" style="floatright"/>
+
+</page>
diff --git a/beginners-docs/C/part-6.vala.page b/beginners-docs/C/part-6.vala.page
new file mode 100644
index 0000000..f67f229
--- /dev/null
+++ b/beginners-docs/C/part-6.vala.page
@@ -0,0 +1,21 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="part-6.vala">
+ <info>
+ <link type="guide" xref="hello-world.vala"/>
+ <revision version="0.1" date="2012-02-20" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc></desc>
+ </info>
+
+ <title>Part 6:</title>
+ <links type="series" style="floatright"/>
+
+</page>
diff --git a/beginners-docs/C/photo-wall.c.page b/beginners-docs/C/photo-wall.c.page
new file mode 100644
index 0000000..c3e92f4
--- /dev/null
+++ b/beginners-docs/C/photo-wall.c.page
@@ -0,0 +1,403 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="photo-wall.c">
+ <info>
+ <title type="text">Photo wall (C)</title>
+ <link type="guide" xref="c#examples"/>
+
+ <desc>A Clutter image viewer</desc>
+
+ <revision pkgversion="0.1" version="0.1" date="2011-03-22" status="review"/>
+ <credit type="author">
+ <name>Chris Kühl</name>
+ <email>chrisk openismus com</email>
+ </credit>
+ <credit type="author">
+ <name>Johannes Schmid</name>
+ <email>jhs gnome org</email>
+ </credit>
+ <credit type="editor">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2013</years>
+ </credit>
+ </info>
+
+<title>Photo wall</title>
+
+<synopsis>
+ <p>For this example we will build a simple image viewer using Clutter. You will learn:</p>
+ <list>
+ <item><p>How to size and position <code>ClutterActor</code>s </p></item>
+ <item><p>How to place an image in a <code>ClutterActor</code> </p></item>
+ <item><p>How to do simple transitions using Clutter's animation framework</p></item>
+ <item><p>How to make <code>ClutterActor</code>s respond to mouse events</p></item>
+ <item><p>How to get file names from a directory</p></item>
+ </list>
+</synopsis>
+
+<section id="intro">
+ <title>Introduction</title>
+ <p>
+ Clutter is a library for creating dynamic user interfaces using OpenGL for hardware acceleration. This
example demonstates a small, but central, part of the Clutter library to create a simple but attractive image
viewing program.
+ </p>
+ <p>
+ To help us reach our goal we will be utilising a few other common pieces of GLib as well. Most
importantly, we'll use one <code>GPtrArray</code>, a dynamic aray of pointers, to hold the file path names.
We will also use <code>GDir</code>, a utility for working with directories, to access our image directory and
gather file paths.
+ </p>
+</section>
+
+<section id="anjuta">
+ <title>Create a project in Anjuta</title>
+ <p>Before you start coding, you'll need to set up a new project in Anjuta. This will create all of the
files you need to build and run the code later on. It's also useful for keeping everything together.</p>
+ <steps>
+ <item>
+ <p>Start Anjuta and click <guiseq><gui>File</gui><gui>New</gui><gui>Project</gui></guiseq> to open the
project wizard.</p>
+ </item>
+ <item>
+ <p>Choose <gui>GTK+ (simple)</gui> from the <gui>C</gui> tab, click <gui>Continue</gui>, and fill out
your details on the next few pages. Use <file>photo-wall</file> as project name and directory.</p>
+ </item>
+ <item>
+ <p>Make sure that <gui>Use GtkBuilder for user interface</gui> is disabled as we will
+ create the UI manually in this tutorial. Check the <link xref="guitar-tuner.c">Guitar-Tuner</link>
+ tutorial using the interface builder.</p>
+ </item>
+ <item>
+ <p>Enable <gui>Configure external packages</gui>. On the next page, select
+ <em>clutter-1.0</em> from the list to include the Clutter library in your project.</p>
+ </item>
+ <item>
+ <p>Click <gui>Apply</gui> and the project will be created for you. Open <file>src/main.c</file> from the
<gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:</p>
+ <code mime="text/x-csrc"><![CDATA[
+#include <config.h>
+#include <gtk/gtk.h>]]></code>
+ </item>
+ </steps>
+</section>
+
+<section id="look">
+ <title>A look at Photo Wall</title>
+ <p>
+ Our image viewer presents the user with a wall of images.
+ </p>
+ <media type="image" mime="image/png" src="media/photo-wall.png"/>
+ <p>When an image is clicked, it is animated to fill the viewing area. When the image having focus is
clicked it is returned to its original position using an animation with the same duration of 500 milliseconds.
+ </p>
+ <media type="image" mime="image/png" src="media/photo-wall-focused.png"/>
+</section>
+
+<section id="setup">
+ <title>Initial setup</title>
+ <p>
+ The following code segment contains many of the defines and variables we will be using in the following
sections. Use this as a reference for later sections. Copy this code to the beginning of
<file>src/main.c</file>:
+ </p>
+<code mime="text/x-csrc" style="numbered"><![CDATA[
+#include <gdk-pixbuf/gdk-pixbuf.h>
+#include <clutter/clutter.h>
+
+#define STAGE_WIDTH 800
+#define STAGE_HEIGHT 600
+
+#define THUMBNAIL_SIZE 200
+#define ROW_COUNT (STAGE_HEIGHT / THUMBNAIL_SIZE)
+#define COL_COUNT (STAGE_WIDTH / THUMBNAIL_SIZE)
+#define THUMBNAIL_COUNT (ROW_COUNT * COL_COUNT)
+
+#define ANIMATION_DURATION_MS 500
+
+#define IMAGE_DIR_PATH "./berlin_images/"
+
+static GPtrArray *img_paths;
+
+static ClutterPoint unfocused_pos;
+]]>
+</code>
+</section>
+
+<section id="code">
+ <title>Jumping into the code</title>
+ <p>We will start by taking a look at the <code>main()</code> function as a whole. Then we'll discuss the
other code sections in detail.
+ Change the <file>src/main.c</file> to contain this <code>main()</code> function. You can delete the
+ <code>create_window()</code> function as we don't need it in this example.</p>
+ <code mime="text/x-csrc" style="numbered"><![CDATA[
+int
+main(int argc, char *argv[])
+{
+ ClutterColor stage_color = { 16, 16, 16, 255 };
+ ClutterActor *stage = NULL;
+
+ if (clutter_init (&argc, &argv) != CLUTTER_INIT_SUCCESS)
+ return 1;
+
+ stage = clutter_stage_new();
+ clutter_actor_set_size(stage, STAGE_WIDTH, STAGE_HEIGHT);
+ clutter_actor_set_background_color(stage, &stage_color);
+ clutter_stage_set_title(CLUTTER_STAGE (stage), "Photo Wall");
+ g_signal_connect(stage, "destroy", G_CALLBACK(clutter_main_quit), NULL);
+
+ load_image_path_names();
+
+ guint row = 0;
+ guint col = 0;
+ for(row=0; row < ROW_COUNT; ++row)
+ {
+ for(col=0; col < COL_COUNT; ++col)
+ {
+ const char *img_path = g_ptr_array_index(img_paths, (row * COL_COUNT) + col);
+ GdkPixbuf *pixbuf = gdk_pixbuf_new_from_file_at_size(img_path, STAGE_HEIGHT, STAGE_HEIGHT, NULL);
+ ClutterContent *image = clutter_image_new ();
+ ClutterActor *actor = clutter_actor_new ();
+
+ if (pixbuf != NULL)
+ {
+ clutter_image_set_data(CLUTTER_IMAGE(image),
+ gdk_pixbuf_get_pixels(pixbuf),
+ gdk_pixbuf_get_has_alpha(pixbuf)
+ ? COGL_PIXEL_FORMAT_RGBA_8888
+ : COGL_PIXEL_FORMAT_RGB_888,
+ gdk_pixbuf_get_width(pixbuf),
+ gdk_pixbuf_get_height(pixbuf),
+ gdk_pixbuf_get_rowstride(pixbuf),
+ NULL);
+ }
+
+ clutter_actor_set_content(actor, image);
+ g_object_unref(image);
+ g_object_unref(pixbuf);
+
+ initialize_actor(actor, row, col);
+ clutter_actor_add_child(stage, actor);
+ }
+ }
+
+ /* Show the stage. */
+ clutter_actor_show(stage);
+
+ /* Start the clutter main loop. */
+ clutter_main();
+
+ g_ptr_array_unref(img_paths);
+
+ return 0;
+}]]></code>
+ <list>
+ <item><p>Line 4: <code>ClutterColor</code> is defined by setting the red, green, blue and transparency
(alpha) values. The values range from 0-255. For transparency a value of 255 is opaque.</p></item>
+ <item><p>Line 7: You must initialize Clutter. If you forget to do this, you will get very strange
errors. Be warned.</p></item>
+ <item><p>Lines 10‒14: Here we create a new <code>ClutterStage</code> . We then set the size using
the defines from the previous section and the address of the <code>ClutterColor</code> we just defined.</p>
+ <note><p>A <code>ClutterStage</code> is the top-level <code>ClutterActor</code> onto which other
<code>ClutterActor</code>s are placed.</p></note>
+</item>
+ <item><p>Line 16: Here we call our function for getting the image file paths. We'll look at this in a
bit.</p></item>
+ <item><p>Lines 18‒49: This is where we set up the <code>ClutterActor</code>s, load the images and
place them into their spot in the image wall. We will look at this in detail in the next section.</p></item>
+ <item><p>Line 52: Show the stage and <em>all its children</em>, meaning our images.</p></item>
+ <item><p>Line 55: Start the Clutter main loop.</p></item>
+ </list>
+</section>
+
+<section id="actors">
+ <title>Setting up our image actors</title>
+ <note><p>In Clutter, an actor is the most basic visual element. Basically, everything you see is an
actor.</p></note>
+<p>
+In this section, we are going to take a closer look at the loop used for setting up the
<code>ClutterActor</code>s that will display our images.
+</p>
+ <code mime="text/x-csrc" style="numbered"><![CDATA[
+guint row = 0;
+guint col = 0;
+for(row=0; row < ROW_COUNT; ++row)
+{
+ for(col=0; col < COL_COUNT; ++col)
+ {
+ const char *img_path = g_ptr_array_index(img_paths, (row * COL_COUNT) + col);
+ GdkPixbuf *pixbuf = gdk_pixbuf_new_from_file_at_size(img_path, STAGE_HEIGHT, STAGE_HEIGHT, NULL);
+ ClutterContent *image = clutter_image_new ();
+ ClutterActor *actor = clutter_actor_new ();
+
+ if (pixbuf != NULL)
+ {
+ clutter_image_set_data(CLUTTER_IMAGE(image),
+ gdk_pixbuf_get_pixels(pixbuf),
+ gdk_pixbuf_get_has_alpha(pixbuf)
+ ? COGL_PIXEL_FORMAT_RGBA_8888
+ : COGL_PIXEL_FORMAT_RGB_888,
+ gdk_pixbuf_get_width(pixbuf),
+ gdk_pixbuf_get_height(pixbuf),
+ gdk_pixbuf_get_rowstride(pixbuf),
+ NULL);
+ }
+
+ clutter_actor_set_content(actor, image);
+ g_object_unref(image);
+ g_object_unref(pixbuf);
+
+ initialize_actor(actor, row, col);
+ clutter_actor_add_child(stage, actor);
+ }
+}
+]]>
+</code>
+<list>
+ <item><p>Line 7: Here we want to get the path at the <var>n</var>th location in the <code>GPtrArray</code>
that is holding our image path names. The <var>n</var>th position is calculated based on <code>row</code> and
<code>col</code>.</p>
+ </item>
+ <item><p>Line 8‒23: This is where we actually create the <code>ClutterActor</code> and place the
image into the actor. The first argument is the path which we access through our <code>GSList</code> node.
The second argument is for error reporting but we are ignoring that to keep things short.</p>
+ </item>
+ <item><p>Line 47: This adds the <code>ClutterActor</code> to the stage, which is a container. It also
assumes ownership of the <code>ClutterActor</code> which is something you'll want to look into as you get
deeper into GNOME development. See the <link
href="http://library.gnome.org/devel/gobject/stable/gobject-memory.html";><code>GObject</code>
documentation</link> for the gory details.</p>
+ </item>
+</list>
+</section>
+
+<section id="load">
+ <title>Loading the images</title>
+ <p>Let's take a short break from Clutter to see how we can get the file names from our image directory.</p>
+ <code mime="text/x-csrc" style="numbered"><![CDATA[
+static void
+load_image_path_names()
+{
+ /* Ensure we can access the directory. */
+ GError *error = NULL;
+ GDir *dir = g_dir_open(IMAGE_DIR_PATH, 0, &error);
+ if(error)
+ {
+ g_warning("g_dir_open() failed with error: %s\n", error->message);
+ g_clear_error(&error);
+ return;
+ }
+
+ img_paths = g_ptr_array_new_with_free_func (g_free);
+
+ const gchar *filename = g_dir_read_name(dir);
+ while(filename)
+ {
+ if(g_str_has_suffix(filename, ".jpg") || g_str_has_suffix(filename, ".png"))
+ {
+ gchar *path = g_build_filename(IMAGE_DIR_PATH, filename, NULL);
+ g_ptr_array_add (img_paths, path);
+ }
+ filename = g_dir_read_name(dir);
+ }
+}]]></code>
+ <list>
+ <item><p>Lines 5 and 12: This opens our directory or, if an error occured, returns after printing an
error message.</p></item>
+ <item><p>Lines 16‒25: The first line gets another file name from the <code>GDir</code> we opened
earlier. If there was an image file (which we check by looking at its extension, ".png" or ".jpg") in the
directory we proceed to prepend the image directory path to the filename and prepend that to the list we set
up earlier. Lastly we attempt to get the next path name and reenter the loop if another file was
found.</p></item>
+ </list>
+</section>
+
+<section id="actors2">
+ <title>Set up the actors</title>
+ <p>
+ We now take a look at the sizing and positioning of <code>ClutterActor</code>s and also readying the
<code>ClutterActor</code> for user interaction.
+ </p>
+ <code mime="text/x-csrc" style="numbered"><![CDATA[
+/* This function handles setting up and placing the rectangles. */
+static void
+initialize_actor(ClutterActor *actor, guint row, guint col)
+{
+ clutter_actor_set_size(actor, THUMBNAIL_SIZE, THUMBNAIL_SIZE);
+ clutter_actor_set_position(actor, col * THUMBNAIL_SIZE, row * THUMBNAIL_SIZE);
+ clutter_actor_set_reactive(actor, TRUE);
+
+ g_signal_connect(actor,
+ "button-press-event",
+ G_CALLBACK(actor_clicked_cb),
+ NULL);
+}]]></code>
+ <list>
+ <item>
+ <p>Line 7: Setting an actor reactive means that it reacts to events, such as
<code>button-press-event</code> in our case. For Photo Wall, all <code>ClutterActor</code>s in the wall
should initially be reactive.</p>
+ </item>
+ <item>
+ <p>Line 9‒12: Now we connect the <code>button-press-event</code> to the
<code>actor_clicked_cb</code> callback which we will look at next.</p>
+ </item>
+ </list>
+ <p>At this point we've got a wall of images that are ready to be viewed.</p>
+</section>
+
+<section id="click">
+ <title>Reacting to the clicks</title>
+ <p>
+
+ </p>
+ <code mime="text/x-csrc" style="numbered"><![CDATA[
+static gboolean
+actor_clicked_cb(ClutterActor *actor,
+ ClutterEvent *event,
+ gpointer user_data)
+{
+ /* Flag to keep track of our state. */
+ static gboolean is_focused = FALSE;
+ ClutterActorIter iter;
+ ClutterActor *child;
+
+ /* Reset the focus state on all the images */
+ clutter_actor_iter_init (&iter, clutter_actor_get_parent(actor));
+ while (clutter_actor_iter_next(&iter, &child))
+ clutter_actor_set_reactive(child, is_focused);
+
+ clutter_actor_save_easing_state(actor);
+ clutter_actor_set_easing_duration(actor, ANIMATION_DURATION_MS);
+
+ if(is_focused)
+ {
+ /* Restore the old location and size. */
+ clutter_actor_set_position(actor, unfocused_pos.x, unfocused_pos.y);
+ clutter_actor_set_size(actor, THUMBNAIL_SIZE, THUMBNAIL_SIZE);
+ }
+ else
+ {
+ /* Save the current location before animating. */
+ clutter_actor_get_position(actor, &unfocused_pos.x, &unfocused_pos.y);
+ /* Only the currently focused image should receive events. */
+ clutter_actor_set_reactive(actor, TRUE);
+
+ /* Put the focused image on top. */
+ clutter_actor_set_child_above_sibling(clutter_actor_get_parent(actor), actor, NULL);
+
+ clutter_actor_set_position(actor, (STAGE_WIDTH - STAGE_HEIGHT) / 2.0, 0);
+ clutter_actor_set_size(actor, STAGE_HEIGHT, STAGE_HEIGHT);
+ }
+
+ clutter_actor_restore_easing_state(actor);
+
+ /* Toggle our flag. */
+ is_focused = !is_focused;
+
+ return TRUE;
+}]]></code>
+ <list>
+ <item><p>Lines 1‒4: We have to make sure our callback function matches the signature required for
the <code>button_clicked_event</code> signal. For our example, we will only use the first argument, the
<code>ClutterActor</code> that is actually clicked.</p>
+<note>
+ <p>A few words on the arguments we are not using in this example. The <code>ClutterEvent</code> is
different depending on what event is being handled. For example, a key event produces a
<code>ClutterKeyEvent</code> from which you can get the key being pressed among other information. For mouse
click events you get a <code>ClutterButtonEvent</code> from which you can get the <code>x</code> and
<code>y</code> values. See the Clutter documentation for other <code>ClutterEvent</code> types.</p>
+ <p>
+ The <code>user_data</code> is what one uses to pass data into the function. A pointer to any data type
can be passed in. If you need multiple data to be passed into the callback, you can place the data into a
struct and pass its address in.
+ </p>
+</note></item>
+ <item><p>Line 7: We set up a static flag to track which state we are in: wall mode or focus mode. We
start out in wall mode so no image has focus. Thus, we set the flag to <code>FALSE</code>
initially.</p></item>
+ <item><p>Line 12‒14: These set the image actors to receive events if they are foxused.</p></item>
+ <item><p>Line 16‒17: Here we set the animation duration and save the current state.</p></item>
+ <item><p>Lines 21‒23: Reaching this code means that one image currently has focus and we want to
return to wall mode. Setting a position on a <code>ClutterActor</code> begins an animation with the duration
that we set in line 17.</p>
+ </item>
+ <item><p>Line 24: Reaching this line of code means we are currently in the wall state and are about to
give a <code>ClutterActor</code> focus. Here we save the starting position so that we can return to it
later.</p></item>
+ <item><p>Line 25: Setting the <code>ClutterActor</code>'s <code>reactive</code> property to
<code>TRUE</code> makes this <code>ClutterActor</code> react to events. In this focused state the only
<code>ClutterActor</code> that we want to receive events will be the <code>ClutterActor</code> being viewed.
Clicking on the <code>ClutterActor</code> will return it to its starting position. </p></item>
+ <item><p>Lines 27‒36: This is where we save the current position of the image, set it to receive
events and then make it appear above the other images and start animating it to fill the stage.</p></item>
+ <item><p>Line 39: Here we restore the easing state to what was set before we changed it in line
16.</p></item>
+ <item><p>Line 42: Here we toggle the <code>is_focused</code> flag to the current state.</p></item>
+<item><p>As mentioned previously, the <code>ClutterActor</code>s with higher <code>depth</code> values
receive events but can allow <code>ClutterActor</code>s below them to also receive events. Returning
<code>TRUE</code> will stop events from being passed down, while <code>FALSE</code> will pass events down.</p>
+ <note>
+ <p>Remember, however, that to receive events the <code>ClutterActor</code>s must be set
<code>reactive</code>.</p>
+ </note>
+</item>
+ </list>
+</section>
+
+<section id="run">
+ <title>Build and run the application</title>
+ <p>All of the code should now be ready to go.
+ All you need now is some pictures to load. By default, the pictures are loaded from a
<file>berlin_images</file> directory. If you want, you can change the <code>#define IMAGE_DIR_PATH</code>
line near the top to refer to your photo directory, or create a <file>berlin_images</file> directory by
clicking <guiseq><gui>Project</gui><gui>New Directory...</gui></guiseq> and creating a
<file>berlin_images</file> directory as a subdirectory of the <file>photo-wall</file> directory. Make sure to
put at least twelve images in the directory! <!--You can download the example images <link
href="photo-wall/berlin_images/">here</link> (<link href="photo-wall/CREDITS">credits</link>).--></p>
+ <p>When you have done that, click <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> to build
everything again, then <guiseq><gui>Run</gui><gui>Execute</gui></guiseq> to start the application.</p>
+ <p>If you haven't already done so, choose the <file>Debug/src/photo-wall</file> application in the dialog
that appears. Finally, hit <gui>Run</gui> and enjoy!</p>
+</section>
+
+<section id="impl">
+ <title>Reference Implementation</title>
+ <p>If you run into problems with the tutorial, compare your code with this <link
href="photo-wall/photo-wall.c">reference code</link>.</p>
+</section>
+
+</page>
diff --git a/beginners-docs/C/progressbar.c.page b/beginners-docs/C/progressbar.c.page
new file mode 100644
index 0000000..79cfe86
--- /dev/null
+++ b/beginners-docs/C/progressbar.c.page
@@ -0,0 +1,37 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="progressbar.c">
+ <info>
+ <title type="text">ProgressBar (C)</title>
+ <link type="guide" xref="beginner.c#display-widgets"/>
+ <link type="seealso" xref="spinner.c"/>
+ <revision version="0.1" date="2012-06-16" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Monica Kochofar</name>
+ <email>monicakochofar gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A widget which indicates progress visually</desc>
+ </info>
+
+ <title>ProgressBar</title>
+
+ <media type="video" mime="application/ogv" src="media/progressbar_fill.ogv" />
+ <p>This ProgressBar "fills in" by a fraction of the bar until it is full.</p>
+
+ <code mime="text/x-csrc" style="numbered">
+<xi:include href="samples/progressbar.c" parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/3.4/GtkApplication.html";>GtkApplication</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/3.4/GtkWindow.html";>GtkWindow</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkProgressBar.html";>GtkProgressBar</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/glib/stable/glib-The-Main-Event-Loop.html#g-timeout-add";>G_Timeout</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/progressbar.js.page b/beginners-docs/C/progressbar.js.page
new file mode 100644
index 0000000..bd13bc2
--- /dev/null
+++ b/beginners-docs/C/progressbar.js.page
@@ -0,0 +1,43 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="progressbar.js">
+ <info>
+ <title type="text">ProgressBar (JavaScript)</title>
+ <link type="guide" xref="beginner.js#display-widgets"/>
+ <revision version="0.1" date="2012-06-01" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Taryn Fox</name>
+ <email>jewelfox fursona net</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A bar which animates to indicate progress</desc>
+ </info>
+
+ <title>ProgressBar</title>
+ <media type="video" mime="application/ogv" src="media/progressbar.ogv">
+ <tt:tt xmlns:tt="http://www.w3.org/ns/ttml";>
+ <tt:body>
+ <tt:div begin="0s" end="6s">
+ <tt:p>
+ Pressing any key stops and starts this ProgressBar.
+ </tt:p>
+ </tt:div>
+ </tt:body>
+ </tt:tt>
+ </media>
+ <p>This ProgressBar is stopped and started by pressing any key.</p>
+
+<code mime="application/javascript" style="numbered"><xi:include href="samples/progressbar.js"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/GLib.html";>GLib</link></p></item>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.ProgressBar.html";>Gtk.ProgressBar</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/progressbar.py.page b/beginners-docs/C/progressbar.py.page
new file mode 100644
index 0000000..7d4abb9
--- /dev/null
+++ b/beginners-docs/C/progressbar.py.page
@@ -0,0 +1,61 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="progressbar.py">
+ <info>
+ <title type="text">ProgressBar (Python)</title>
+ <link type="guide" xref="beginner.py#display-widgets"/>
+ <link type="next" xref="spinbutton.py" />
+ <revision version="0.2" date="2012-06-12" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A widget which indicates progress visually.</desc>
+ </info>
+
+ <title>ProgressBar</title>
+ <media type="video" mime="application/ogv" src="media/progressbar.ogv">
+ <tt:tt xmlns:tt="http://www.w3.org/ns/ttml";>
+ <tt:body>
+ <tt:div begin="0s" end="6s">
+ <tt:p>
+ Pressing any key stops and starts this ProgressBar.
+ </tt:p>
+ </tt:div>
+ </tt:body>
+ </tt:tt>
+ </media>
+ <p>This ProgressBar is stopped and started by pressing any key.</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/progressbar.py"
parse="text"><xi:fallback/></xi:include></code>
+
+ </section>
+
+ <section id="methods">
+ <title>Useful methods for a ProgressBar widget</title>
+ <list>
+ <item><p>Instead of <code>pulse()</code>, that makes the bar go back and forth, if we want the
ProgressBar to "fill in" a fraction (a <code>float</code> between <code>0.0</code> and <code>1.0</code>
included) of the bar that has been completed, use <code>set_fraction(fraction)</code>.</p></item>
+ <item><p>To set a text and show it (superimposed over the bar) use
<code>set_text(<var>"text"</var>)</code> and <code>set_show_text(True)</code>. If a text is not set and
<code>set_show_text(True)</code> the text will be the percentage of the work that has been
completed.</p></item>
+ </list>
+ </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/GtkProgressBar.html";>GtkProgressBar</link></p></item>
+ <item><p><link href="http://developer.gnome.org/glib/stable/glib-The-Main-Event-Loop.html";>GLib - The
Main Event Loop</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gdk/stable/gdk-Keyboard-Handling";>Gdk - Key
Values</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/progressbar.vala.page b/beginners-docs/C/progressbar.vala.page
new file mode 100644
index 0000000..0e8a797
--- /dev/null
+++ b/beginners-docs/C/progressbar.vala.page
@@ -0,0 +1,32 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="progressbar.vala">
+ <info>
+ <title type="text">ProgressBar (Vala)</title>
+ <link type="guide" xref="beginner.vala#display-widgets"/>
+ <revision version="0.1" date="2012-05-08" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A widget which indicates progress visually</desc>
+ </info>
+
+ <title>ProgressBar</title>
+ <media type="video" mime="application/ogv" src="media/progressbar_fill.ogv" />
+ <p>This ProgressBar "fills in" by a fraction of the bar until it is full.</p>
+
+<code mime="text/x-csharp" style="numbered"><xi:include href="samples/progressbar.vala"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.ProgressBar.html";>Gtk.ProgressBar</link></p></item>
+ <item><p><link href="http://www.valadoc.org/glib-2.0/GLib.Timeout.html";>GLib.Timeout</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/properties.py.page b/beginners-docs/C/properties.py.page
new file mode 100644
index 0000000..412e351
--- /dev/null
+++ b/beginners-docs/C/properties.py.page
@@ -0,0 +1,55 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:e="http://projectmallard.org/experimental/";
+ type="guide" style="task"
+ id="properties.py">
+
+<info>
+ <title type="text">Properties (Python)</title>
+ <link type="guide" xref="beginner.py#theory"/>
+ <link type="next" xref="grid.py"/>
+ <revision version="0.1" date="2012-06-24" status="draft"/>
+
+ <desc>An explanation of properties, getters and setters.</desc>
+ <credit type="author copyright">
+ <name>Sebastian Pölsterl</name>
+ <email>sebp k-d-w org</email>
+ <years>2011</years>
+ </credit>
+ <credit type="editor">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+</info>
+
+<title>Properties</title>
+
+<links type="section" />
+
+<section id="overview">
+<title>Overview</title>
+
+<p><em>Properties</em> describe the configuration and state of widgets, and each widget has its own
particular set of properties. For example, a widget such as a button or a label has the property
<code>label</code> which contains the text of the widget. You can specify the name and value of any number of
properties as keyword arguments when creating an instance of a widget: for example, to create a label with
the text “Hello World”, an angle of 25 degrees, and aligned to the right, you can use:</p>
+<code>
+label = Gtk.Label(label="Hello World", angle=25, halign=Gtk.Align.END)</code>
+
+<p>which is equivalent to using:</p>
+<code>
+label = Gtk.Label()
+label.set_label("Hello World")
+label.set_angle(25)
+label.set_halign(Gtk.Align.END)</code>
+
+<p>Once you have created such a label, you can get the text of the label with
<code>label.get_label()</code>, and analogously for the other properties.</p>
+
+<p>Instead of using getters and setters you can also get and set the properties with
<code>get_property(<var>"prop-name"</var>)</code> and <code>set_property(<var>"prop-name"</var>,
<var>value</var>)</code>, respectively.</p>
+
+</section>
+<section id="references">
+<title>References</title>
+
+<p><link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/basics.html";>Basics -
Properties</link> in Python GTK+ 3 Tutorial</p>
+</section>
+
+</page>
diff --git a/beginners-docs/C/py.page b/beginners-docs/C/py.page
new file mode 100644
index 0000000..f72bc76
--- /dev/null
+++ b/beginners-docs/C/py.page
@@ -0,0 +1,31 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:ui="http://projectmallard.org/experimental/ui/";
+ type="guide"
+ id="py">
+<info>
+ <title type='link'>Python</title>
+ <link type="guide" xref="index#languages"/>
+ <credit type="editor">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ </credit>
+ <credit type="editor">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2013</years>
+ </credit>
+</info>
+
+<title>Tutorial for beginners</title>
+
+<links type="section" />
+
+<section id="libraries">
+<title>Introduction to libraries</title>
+</section>
+
+<section id="10minutes">
+<title>10 minutes tutorials</title>
+</section>
+
+</page>
diff --git a/beginners-docs/C/radiobutton.c.page b/beginners-docs/C/radiobutton.c.page
new file mode 100644
index 0000000..bbb96b6
--- /dev/null
+++ b/beginners-docs/C/radiobutton.c.page
@@ -0,0 +1,40 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="radiobutton.c">
+ <info>
+ <title type="text">RadioButton (C)</title>
+ <link type="guide" xref="beginner.c#buttons"/>
+ <link type="seealso" xref="togglebutton.c"/>
+ <link type="seealso" xref="grid.c"/>
+ <revision version="0.2" date="2012-06-22" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Monica Kochofar</name>
+ <email>monicakochofar gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A choice from multiple checkbuttons</desc>
+ </info>
+
+ <title>RadioButton</title>
+
+ <media type="image" mime="image/png" src="media/radiobutton.png"/>
+ <p>These radiobuttons report their activity in the terminal.</p>
+
+ <code mime="text/x-csrc" style="numbered">
+<xi:include href="samples/radiobutton.c" parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/3.4/GtkApplication.html";>GtkApplication</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/3.4/GtkWindow.html";>GtkWindow</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkLabel.html";>GtkLabel</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkGrid.html";>GtkGrid</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkSwitch.html";>GtkSwitch</link></p></item>
+
+</list>
+</page>
diff --git a/beginners-docs/C/radiobutton.js.page b/beginners-docs/C/radiobutton.js.page
new file mode 100644
index 0000000..aa20304
--- /dev/null
+++ b/beginners-docs/C/radiobutton.js.page
@@ -0,0 +1,283 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="radiobutton.js">
+ <info>
+ <title type="text">RadioButton (JavaScript)</title>
+ <link type="guide" xref="beginner.js#buttons"/>
+ <revision version="0.1" date="2012-06-15" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Taryn Fox</name>
+ <email>jewelfox fursona net</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Only one can be selected at a time</desc>
+ </info>
+
+ <title>RadioButton</title>
+ <media type="image" mime="image/png" src="media/radiobuttontravel.png"/>
+ <p>RadioButtons are named after old-style car radios, which had buttons for switching between channel
presets. Because the radio could only be tuned to one station at a time, only one button could be pressed in
at a time; if you pressed a new one, the one that was already pressed in would pop back out. That's how these
buttons work, too.</p>
+ <p>Each RadioButton needs a text label and a group. Only one button in a group can be selected at a time.
You don't name each group; you just set new RadioButtons to be part of the same group as an existing one. If
you create a new one outside of a group, it automatically creates a new group for it to be part of.</p>
+ <links type="section" />
+
+ <section id="imports">
+ <title>Libraries to import</title>
+ <code mime="application/javascript"><![CDATA[
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+]]></code>
+ <p>These are the libraries we need to import for this application to run. Remember that the line which
tells GNOME that we're using Gjs always needs to go at the start.</p>
+ </section>
+
+ <section id="applicationwindow">
+ <title>Creating the application window</title>
+ <code mime="application/javascript"><![CDATA[
+const RadioButtonExample = new Lang.Class({
+ Name: 'RadioButton Example',
+
+ // Create the application itself
+ _init: function() {
+ this.application = new Gtk.Application({
+ application_id: 'org.example.jsradiobutton',
+ flags: Gio.ApplicationFlags.FLAGS_NONE
+ });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents window when active
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function() {
+ this._buildUI ();
+ },
+]]></code>
+ <p>All the code for this sample goes in the RadioButtonExample class. The above code creates a <link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link> for our
widgets and window to go in.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Build the application's UI
+ _buildUI: function() {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ border_width: 20,
+ title: "Travel Planning"});
+]]></code>
+ <p>The _buildUI function is where we put all the code to create the application's user interface. The
first step is creating a new <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link> to put all our
widgets into.</p>
+ </section>
+
+ <section id="button">
+ <title>Creating the radiobuttons</title>
+ <code mime="application/javascript"><![CDATA[
+ // Create a label for the first group of buttons
+ this._placeLabel = new Gtk.Label ({label: "Where would you like to travel to?"});
+]]></code>
+
+ <p>We use a <link xref="label.js">Gtk.Label</link> to set each group of RadioButtons apart. Nothing will
stop you from putting RadioButtons from all different groups wherever you want, so if you want people to know
which ones go together you need to organize things accordingly.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Create three radio buttons three different ways
+ this._place1 = new Gtk.RadioButton ({label: "The Beach"});
+
+ this._place2 = Gtk.RadioButton.new_from_widget (this._place1);
+ this._place2.set_label ("The Moon");
+
+ this._place3 = Gtk.RadioButton.new_with_label_from_widget (this._place1, "Antarctica");
+ // this._place3.set_active (true);
+]]></code>
+
+ <p>Here are three different ways to create RadioButtons. The first is the usual way, where we create a
new Gtk.RadioButton and assign its properties at the same time. The second and third use functions which
automatically handle some of the properties; new_from_widget takes a single argument, the RadioButton that
you want to put this new one in the same group as. Meanwhile, new_with_label_from_widget takes that and the
RadioButton's label at the same time.</p>
+ <p>The first RadioButton in a group is the one that's selected by default. Try uncommenting the last
line in this sample code to see how you can set a different one to be the default selection.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Create a label for the second group of buttons
+ this._thingLabel = new Gtk.Label ({label: "And what would you like to bring?" });
+
+ // Create three more radio buttons
+ this._thing1 = new Gtk.RadioButton ({label: "Penguins" });
+ this._thing2 = new Gtk.RadioButton ({label: "Sunscreen", group: this._thing1 });
+ this._thing3 = new Gtk.RadioButton ({label: "A spacesuit", group: this._thing1 });
+]]></code>
+ <p>Here we create the label for the second group of buttons, and then create them all the same way.</p>
+ </section>
+
+ <section id="ui">
+ <title>Creating the rest of the user interface</title>
+
+ <code mime="application/javascript"><![CDATA[
+ // Create a stock OK button
+ this._okButton = new Gtk.Button ({
+ label: 'gtk-ok',
+ use_stock: 'true',
+ halign: Gtk.Align.END });
+
+ // Connect the button to the function which handles clicking it
+ this._okButton.connect ('clicked', Lang.bind (this, this._okClicked));
+]]></code>
+ <p>This code creates a <link xref="button.js">Gtk.Button</link> and binds it to a function which will
show people a silly message when they click OK, depending on which RadioButtons were selected.</p>
+ <p>To make sure the button's "OK" label shows up properly in every language that GNOME is translated
into, remember to use one of Gtk's <link
href="http://developer.gnome.org/gtk/2.24/gtk-Stock-Items.html";>stock button types</link>.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Create a grid to put the "place" items in
+ this._places = new Gtk.Grid ();
+
+ // Attach the "place" items to the grid
+ this._places.attach (this._placeLabel, 0, 0, 1, 1);
+ this._places.attach (this._place1, 0, 1, 1, 1);
+ this._places.attach (this._place2, 0, 2, 1, 1);
+ this._places.attach (this._place3, 0, 3, 1, 1);
+
+ // Create a grid to put the "thing" items in
+ this._things = new Gtk.Grid ({ margin_top: 50 });
+
+ // Attach the "thing" items to the grid
+ this._things.attach (this._thingLabel, 0, 0, 1, 1);
+ this._things.attach (this._thing1, 0, 1, 1, 1);
+ this._things.attach (this._thing2, 0, 2, 1, 1);
+ this._things.attach (this._thing3, 0, 3, 1, 1);
+
+ // Create a grid to put everything in
+ this._grid = new Gtk.Grid ({
+ halign: Gtk.Align.CENTER,
+ valign: Gtk.Align.CENTER,
+ margin_left: 40,
+ margin_right: 50 });
+
+ // Attach everything to the grid
+ this._grid.attach (this._places, 0, 0, 1, 1);
+ this._grid.attach (this._things, 0, 1, 1, 1);
+ this._grid.attach (this._okButton, 0, 2, 1, 1);
+
+ // Add the grid to the window
+ this._window.add (this._grid);
+]]></code>
+ <p>We use a separate <link xref="grid.js">Gtk.Grid</link> to organize each group of radio buttons. This
way we can change the layout with less fuss later on. The second Grid has a margin on top, to visually
separate the two sets of choices.</p>
+ <p>After we've organized them, we put them into a third, master Grid, along with the OK button. Then we
attach that to the window.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+]]></code>
+
+ <p>Finally, we tell the window and everything inside it to become visible when the application is
run.</p>
+
+ </section>
+
+ <section id="function">
+ <title>Function which handles your selection</title>
+ <code mime="application/javascript"><![CDATA[
+ _okClicked: function () {
+
+ // Create a popup that shows a silly message
+ this._travel = new Gtk.MessageDialog ({
+ transient_for: this._window,
+ modal: true,
+ message_type: Gtk.MessageType.OTHER,
+ buttons: Gtk.ButtonsType.OK,
+ text: this._messageText() });
+
+ // Show the popup
+ this._travel.show();
+
+ // Bind the OK button to the function that closes the popup
+ this._travel.connect ("response", Lang.bind (this, this._clearTravelPopUp));
+
+ },
+]]></code>
+ <p>When you click OK, a <link xref="messagedialog.js">Gtk.MessageDialog</link> appears. This function
creates and displays the popup window, then binds its OK button to a function that closes it. What text
appears in the popup depends on the _messageText() function, which returns a different value depending on
which set of options you chose.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ _messageText: function() {
+
+ // Create a silly message for the popup depending on what you selected
+ var stringMessage = "";
+
+ if (this._place1.get_active()) {
+
+ if (this._thing1.get_active())
+ stringMessage = "Penguins love the beach, too!";
+
+ else if (this._thing2.get_active())
+ stringMessage = "Make sure to put on that sunscreen!";
+
+ else stringMessage = "Are you going to the beach in space?";
+
+ }
+
+ else if (this._place2.get_active()) {
+
+ if (this._thing1.get_active())
+ stringMessage = "The penguins will take over the moon!";
+
+ else if (this._thing2.get_active())
+ stringMessage = "A lack of sunscreen will be the least of your problems!";
+
+ else stringMessage = "You'll probably want a spaceship, too!";
+ }
+
+ else if (this._place3.get_active()) {
+
+ if (this._thing1.get_active())
+ stringMessage = "The penguins will be happy to be back home!";
+
+ else if (this._thing2.get_active())
+ stringMessage = "Antarctic sunbathing may be hazardous to your health!";
+
+ else stringMessage = "Try bringing a parka instead!";
+ }
+
+ return stringMessage;
+
+ },
+]]></code>
+ <p>The get_active() method is how we can tell which RadioButton's pressed in. This function returns a
different silly message depending on which set of buttons was pressed. Its return value is used as the
MessageDialog's text property.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ _clearTravelPopUp: function () {
+
+ this._travel.destroy();
+
+ }
+
+});
+]]></code>
+ <p>This function is called when the MessageDialog's OK button is pressed. It simply makes the popup go
away.</p>
+
+ <code mime="application/javascript"><![CDATA[
+// Run the application
+let app = new RadioButtonExample ();
+app.application.run (ARGV);
+]]></code>
+ <p>Finally, we create a new instance of the finished RadioButtonExample class, and set the application
running.</p>
+ </section>
+
+ <section id="complete">
+ <title>Complete code sample</title>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/radiobutton.js"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="in-depth">
+ <title>In-depth documentation</title>
+<list>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Button.html";>Gtk.Button</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Grid.html";>Gtk.Grid</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Label.html";>Gtk.Label</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.RadioButton.html";>Gtk.RadioButton</link></p></item>
+</list>
+ </section>
+</page>
diff --git a/beginners-docs/C/radiobutton.py.page b/beginners-docs/C/radiobutton.py.page
new file mode 100644
index 0000000..a2ac977
--- /dev/null
+++ b/beginners-docs/C/radiobutton.py.page
@@ -0,0 +1,53 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="radiobutton.py">
+ <info>
+ <title type="text">RadioButton (Python)</title>
+ <link type="guide" xref="beginner.py#buttons"/>
+ <link type="seealso" xref="grid.py"/>
+ <link type="next" xref="buttonbox.py"/>
+ <revision version="0.1" date="2012-05-09" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Mutually exclusive buttons.</desc>
+ </info>
+
+ <title>RadioButton</title>
+ <media type="image" mime="image/png" src="media/radiobutton.png"/>
+ <p>Three RadioButtons. You can see in the terminal if they are turned off or on.</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/radiobutton.py"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="methods">
+ <title>Useful methods for a RadioButton widget</title>
+ <p>In line 16 the signal <code>"toggled"</code> is connected to the callback function
<code>toggled_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback
function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.</p>
+
+ <p>As seen in <link xref="properties.py"/>, instead of <code>button1 = Gtk.RadioButton(label="Button
1")</code> we could create the button and label it with</p>
+ <code>
+button1 = Gtk.RadioButton()
+button1.set_label("Button 1").</code>
+ <p>Yet another way to create a new RadioButton with a label is <code>button1 =
Gtk.RadioButton.new_with_label(None, "Button 1")</code> (the first arguement is the group of the
radiobuttons, which we can get with <code>get_group()</code>, the second argument is the label).</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/GtkWindow.html";>GtkWindow</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/unstable/GtkGrid.html";>GtkGrid</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkRadioButton.html";>GtkRadioButton</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/radiobutton.vala.page b/beginners-docs/C/radiobutton.vala.page
new file mode 100644
index 0000000..6a3ee71
--- /dev/null
+++ b/beginners-docs/C/radiobutton.vala.page
@@ -0,0 +1,34 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="radiobutton.vala">
+ <info>
+ <title type="text">RadioButton (Vala)</title>
+ <link type="guide" xref="beginner.vala#buttons"/>
+ <link type="seealso" xref="togglebutton.vala"/>
+ <link type="seealso" xref="grid.vala"/>
+
+ <revision version="0.1" date="2012-05-09" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A choice from multiple CheckButtons.</desc>
+ </info>
+
+ <title>RadioButton</title>
+ <media type="image" mime="image/png" src="media/radiobutton.png"/>
+ <p>These RadioButtons report their activity in the terminal.</p>
+
+<code mime="text/x-csharp" style="numbered"><xi:include href="samples/radiobutton.vala"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.RadioButton.html";>Gtk.RadioButton</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/record-collection.js.page b/beginners-docs/C/record-collection.js.page
new file mode 100644
index 0000000..43cdb9b
--- /dev/null
+++ b/beginners-docs/C/record-collection.js.page
@@ -0,0 +1,299 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="record-collection.js">
+
+ <info>
+ <title type="text">Record collection (JavaScript)</title>
+ <link type="guide" xref="js#examples"/>
+
+ <desc>Create a small database application for ordering your music collection</desc>
+
+ <revision pkgversion="0.1" version="0.1" date="2011-02-22" status="review"/>
+ <credit type="author">
+ <name>GNOME Documentation Project</name>
+ <email>gnome-doc-list gnome org</email>
+ </credit>
+ <credit type="author">
+ <name>Johannes Schmid</name>
+ <email>jhs gnome org</email>
+ </credit>
+ <credit type="editor">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasettii gmail com</email>
+ <years>2013</years>
+ </credit>
+ </info>
+
+<title>Record collection</title>
+
+<synopsis>
+ <p>In this tutorial, you will learn:</p>
+ <list>
+ <item><p>How to connect to a database using libgda</p></item>
+ <item><p>How to insert and browse records in a database table</p></item>
+ </list>
+</synopsis>
+
+<section id="intro">
+ <title>Introduction</title>
+ <p>
+ This demo uses the Javascript language. We are going to demonstrate how to connect and use a database
from a GTK program, by using the GDA (GNOME Data Access) library. Thus you also need this library installed.
+ </p>
+ <p>
+ GNOME Data Access (GDA) is library whose purpose is to provide universal access to different kinds and
types of data sources. This goes from traditional relational database systems, to any imaginable kind of data
source such as a mail server, a LDAP directory, etc. For more information, and for a full API and
documentation, visit the <link href="http://library.gnome.org/devel/libgda/stable/";>GDA website</link>.
+ </p>
+ <p>
+ Although a big part of the code is related to user interface (GUI), we are going to focus our tutorial
on the database parts (we might mention other parts we think are relevant though). To know more about
Javascript programs in GNOME, see the <link xref="image-viewer.js">Image Viewer program</link> tutorial.
+ </p>
+</section>
+
+<section id="anjuta">
+ <title>Create a project in Anjuta</title>
+ <p>Before you start coding, you'll need to set up a new project in Anjuta. This will create all of the
files you need to build and run the code later on. It's also useful for keeping everything together.</p>
+ <steps>
+ <item>
+ <p>Start Anjuta and click <guiseq><gui>File</gui><gui>New</gui><gui>Project</gui></guiseq> to open the
project wizard.</p>
+ </item>
+ <item>
+ <p>Choose <gui>Generic Javascript</gui> from the <gui>JS</gui> tab, click <gui>Forward</gui>, and
fill-out your details on the next few pages. Use <file>record-collection</file> as project name and
directory.</p>
+ </item>
+ <item>
+ <p>Click <gui>Finished</gui> and the project will be created for you. Open <file>src/main.js</file> from
the <gui>Project</gui> or <gui>File</gui> tabs. It contains very basic example code.</p>
+ </item>
+ </steps>
+</section>
+
+<section id="structure">
+ <title>Program Structure</title>
+ <media type="image" mime="image/png" src="media/record-collection.png"/>
+ <p>This demo is a simple GTK application (with a single window) capable of inserting records into a
database table as well as browsing all records of the table. The table has two fields: <code>id</code>, an
integer, and <code>name</code>, a varchar. The first section (on the top) of the application allows you to
insert a record into the table. The last section (bottom) allows you to see all the records of that table.
Its content is refreshed every time a new record is inserted and on the application startup.
+ </p>
+</section>
+
+<section id="start">
+ <title>Starting the fun</title>
+ <p>Let's start by examining the skeleton of the program:</p>
+ <code mime="application/javascript" style="numbered"><![CDATA[
+const GLib = imports.gi.GLib;
+const Gtk = imports.gi.Gtk;
+const Gda = imports.gi.Gda;
+const Lang = imports.lang;
+
+function Demo () {
+ this._init ();
+}
+
+Demo.prototype = {
+
+ _init: function () {
+ this.setupWindow ();
+ this.setupDatabase ();
+ this.selectData ();
+ }
+}
+
+Gtk.init (0, null);
+
+var demo = new Demo ();
+
+Gtk.main ();]]></code>
+ <list>
+ <item><p>Lines 1‒4: Initial imports. Pay special attention to line 3, which tells Javascript to
import the GDA library, our focus in this tutorial.</p></item>
+ <item><p>Lines 6‒17: Define our <code>Demo</code> class. Pay special attention to lines
13‒15, where we call 3 methods which will do the whole job. They will be detailed below.</p></item>
+ <item><p>Lines 19‒23: Start the application.</p></item>
+ </list>
+</section>
+
+<section id="design">
+ <title>Designing the application</title>
+ <p>Let's take a look at the <code>setupWindow</code> method. It is responsible for creating the User
Interface (UI). As UI is not our focus, we will explain only the relevant parts.</p>
+ <code mime="application/javascript" style="numbered"><![CDATA[
+ setupWindow: function () {
+ this.window = new Gtk.Window ({title: "Data Access Demo", height_request: 350});
+ this.window.connect ("delete-event", function () {
+ Gtk.main_quit();
+ return true;
+ });
+
+ // main box
+ var main_box = new Gtk.Box ({orientation: Gtk.Orientation.VERTICAL, spacing: 5});
+ this.window.add (main_box);
+
+ // first label
+ var info1 = new Gtk.Label ({label: "<b>Insert a record</b>", xalign: 0, use_markup: true});
+ main_box.pack_start (info1, false, false, 5);
+
+ // "insert a record" horizontal box
+ var insert_box = new Gtk.Box ({orientation: Gtk.Orientation.HORIZONTAL, spacing: 5});
+ main_box.pack_start (insert_box, false, false, 5);
+
+ // ID field
+ insert_box.pack_start (new Gtk.Label ({label: "ID:"}), false, false, 5);
+ this.id_entry = new Gtk.Entry ();
+ insert_box.pack_start (this.id_entry, false, false, 5);
+
+ // Name field
+ insert_box.pack_start (new Gtk.Label ({label: "Name:"}), false, false, 5);
+ this.name_entry = new Gtk.Entry ({activates_default: true});
+ insert_box.pack_start (this.name_entry, true, true, 5);
+
+ // Insert button
+ var insert_button = new Gtk.Button ({label: "Insert", can_default: true});
+ insert_button.connect ("clicked", Lang.bind (this, this._insertClicked));
+ insert_box.pack_start (insert_button, false, false, 5);
+ insert_button.grab_default ();
+
+ // Browse textview
+ var info2 = new Gtk.Label ({label: "<b>Browse the table</b>", xalign: 0, use_markup: true});
+ main_box.pack_start (info2, false, false, 5);
+ this.text = new Gtk.TextView ({editable: false});
+ var sw = new Gtk.ScrolledWindow ({shadow_type:Gtk.ShadowType.IN});
+ sw.add (this.text);
+ main_box.pack_start (sw, true, true, 5);
+
+ this.count_label = new Gtk.Label ({label: "", xalign: 0, use_markup: true});
+ main_box.pack_start (this.count_label, false, false, 0);
+
+ this.window.show_all ();
+ },]]></code>
+ <list>
+ <item><p>Lines 22 and 27: Create the 2 entries (for the two fields) in which users will type something
to get inserted in the database.</p></item>
+ <item><p>Lines 31‒34: Create the Insert button. We connect its <code>clicked</code> signal to the
<code>_insertClicked</code> private method of the class. This method is detailed below.</p></item>
+ <item><p>Line 39: Create the widget (<code>TextView</code>) where we will show the contents of the
table.</p></item>
+ <item><p>Line 44: Create the label where we will show the number of records in the table. Initially it's
empty, it will be updated later.</p></item>
+ </list>
+</section>
+
+<section id="connect">
+ <title>Connecting to and initializing the database</title>
+ <p>
+ The code which makes the connection to the database is in the <code>setupDatabase</code> method below:
+ </p>
+ <code mime="application/javascript" style="numbered"><![CDATA[
+ setupDatabase: function () {
+ this.connection = new Gda.Connection ({provider: Gda.Config.get_provider("SQLite"),
+ cnc_string:"DB_DIR=" + GLib.get_home_dir () +
";DB_NAME=gnome_demo"});
+ this.connection.open ();
+
+ try {
+ var dm = Gda.execute_select_command (this.connection, "select * from demo");
+ } catch (e) {
+ Gda.execute_non_select_command (this.connection, "create table demo (id integer, name varchar(100))");
+ }
+ },]]></code>
+ <list>
+ <item>
+ <p>Lines 2‒3: Create the GDA's <code>Connection</code> object. We must supply to its
constructor some properties:</p>
+ <list>
+ <item>
+ <p><code>provider</code>: One of GDA's supported providers. GDA supports SQLite, MySQL,
PostgreSQL, Oracle and many others. For demo purposes we will use a SQLite database, as it comes installed by
default in most distributions and it is simple to use (it just uses a file as a database).</p>
+ </item>
+ <item>
+ <p><code>cnc_string</code>: The connection string. It may change from provider to provider. The
syntax for SQLite is: <code>DB_DIR=<var>PATH</var>;DB_NAME=<var>FILENAME</var></code>. In this demo we are
accessing a database called gnome_demo in the user home dir (note the call to GLib's
<code>get_home_dir</code> function).</p>
+ </item>
+ </list>
+ <note>
+ <p>If the provider is not supported by GDA, or if the connection string is missing some element,
line 2 will raise an exception. So, in real life we should handle it with JavaScript's statement
<code>try</code>...<code>catch</code>.</p>
+ </note>
+ </item>
+
+ <item><p>Line 4: Open the connection. In the SQLite provider, if the database does not exist, it will be
created in this step.</p></item>
+ <item>
+ <p>Lines 6‒10: Try to do a simple select to check if the table exists (line 7). If it does not
exist (because the database was just created), this command will raise an exception, which is handled by the
<code>try</code>...<code>catch</code> block. If it is the case, we run the create table statement (line
9).</p>
+ <p>In order to run the SQL commands above we are using global GDA functions,
<code>execute_select_command</code> and <code>execute_non_select_command</code>. They are simple to use, and
just require two arguments: The <code>Connection</code> object and the SQL command to be parsed.</p>
+ </item>
+ </list>
+
+ <p>At this point we have the database set up, and are ready to use it.</p>
+</section>
+
+<section id="select">
+ <title>Selecting</title>
+ <p>
+ After connecting to the database, our demo's constructor calls the <code>selectData</code> method. It
is responsible for getting all the records in the table and showing them on the <code>TextView</code> widget.
Let's take a look at it:
+ </p>
+ <code mime="application/javascript" style="numbered"><![CDATA[
+ selectData: function () {
+ var dm = Gda.execute_select_command (this.connection, "select * from demo order by 1, 2");
+ var iter = dm.create_iter ();
+
+ var text = "";
+
+ while (iter.move_next ()) {
+ var id_field = Gda.value_stringify (iter.get_value_at (0));
+ var name_field = Gda.value_stringify (iter.get_value_at (1));
+
+ text += id_field + "\t=>\t" + name_field + '\n';
+ }
+
+ this.text.buffer.text = text;
+ this.count_label.label = "<i>" + dm.get_n_rows () + " record(s)</i>";
+ },]]></code>
+ <list>
+ <item><p>Line 2: The <code>SELECT</code> command. We are using the global GDA's function
<code>execute_select_command</code> for that. It returns a <code>DataModel</code> object, which is later used
to retrieve the rows.</p></item>
+ <item><p>Line 3: Create an <code>Iter</code> object, which is used to iterate over the
<code>DataModel</code>'s records.</p></item>
+ <item><p>Line 7: Loop through all the records, fetching them with the help of the <code>Iter</code>
object. At this point, the <code>iter</code> variable contains the actual, retrieved data. Its
<code>move_next</code> method returns <code>false</code> when it reaches the last record.</p></item>
+ <item>
+ <p>Lines 8‒9: We do two things in each line:</p>
+ <list>
+ <item><p>Use <code>Iter</code>'s method <code>get_value_at</code>, which requires only one argument:
the column number to retrieve, starting at 0. As our <code>SELECT</code> command returns only two columns, we
are retrieving columns 0 and 1.</p></item>
+ <item><p>The method <code>get_value_at</code> returns the field in GLib's <code>GValue</code>
format. A simple way to convert this format to a string is by using GDA's global function
<code>value_stringify</code>. That's what we are doing here, and we store the results in the variables
<code>id_field</code> and <code>name_field</code>.</p></item>
+ </list>
+ </item>
+ <item><p>Line 11: Concatenate the two fields to make one text line, separated by <code>"=>"</code>, and
store it in the <code>text</code> variable.</p></item>
+ <item><p>Line 14: After the loop is finished, we have all the records formatted in the <code>text</code>
variable. In this line we just set the contents of the <code>TextView</code> with that variable.</p></item>
+ <item><p>Line 15: Display the number of records in the table, making use of the <code>DataModel</code>'s
<code>get_n_rows</code> method.</p></item>
+ </list>
+</section>
+
+<section id="insert">
+ <title>Inserting</title>
+ <p>
+ OK, we know how to connect to a database and how to select rows from a table. Now it's time to do an
<code>INSERT</code> on the table. Do you remember above, in the method <code>setupWindow</code> we connected
the <gui>Insert</gui> button's <code>clicked</code> signal to the method <code>_insertClicked</code>? Let's
see the implementation of this method.
+ </p>
+ <code mime="application/javascript" style="numbered"><![CDATA[
+ _insertClicked: function () {
+ if (!this._validateFields ())
+ return;
+
+ // Gda.execute_non_select_command (this.connection,
+ // "insert into demo values ('" + this.id_entry.text + "', '" + this.name_entry.text + "')");
+
+ var b = new Gda.SqlBuilder ({stmt_type:Gda.SqlStatementType.INSERT});
+ b.set_table ("demo");
+ b.add_field_value_as_gvalue ("id", this.id_entry.text);
+ b.add_field_value_as_gvalue ("name", this.name_entry.text);
+ var stmt = b.get_statement ();
+ this.connection.statement_execute_non_select (stmt, null);
+
+ this._clearFields ();
+ this.selectData ();
+ },]]></code>
+ <p>
+ We have learned how to use GDA's convenience functions <code>execute_select_command</code> and
<code>execute_non_select_command</code> to quickly execute SQL commands on the database. GDA allows one to
build a SQL statement indirectly, by using its <code>SqlBuilder</code> object. What are the benefits of this?
GDA will generate the SQL statement dynamically, and it will be valid for the connection provider used (it
will use the same SQL dialect the provider uses). Let's study the code:
+ </p>
+ <list>
+ <item><p>Lines 2‒3: Check if the user filled all the fields. The code for the private method
<code>_validateFields</code> is really simple and you can read it in the full demo source code.</p></item>
+ <item><p>Line 5: The faster way of doing the <code>INSERT</code>. It's commented out as we want to show
how to use the <code>SqlBuilder</code> object to build a SQL statement portable across databases.</p></item>
+ <item><p>Line 7: Create the <code>SqlBuilder</code> object. We must pass the type of statement we are
going to build. It can be <code>SELECT</code>, <code>UPDATE</code>, <code>INSERT</code> or
<code>DELETE</code>.</p></item>
+ <item><p>Line 8: Set the name of the table on which the built statement will operate (it will generate
<code>INSERT INTO demo</code>)</p></item>
+ <item><p>Lines 9‒10: Set the fields and its values that will be part of the statement. The first
argument is the field name (as in the table). The second one is the value for that field.</p></item>
+ <item><p>Line 11: Get the dynamically generated <code>Statement</code> object, which represents a SQL
statement.</p></item>
+ <item><p>Line 12: Finally, execute the SQL statement (<code>INSERT</code>).</p></item>
+ <item><p>Line 14: Clear the id and name fields on the screen. The code for the private method
<code>_clearFields</code> is really simple and you can read it in the full demo source code.</p></item>
+ <item><p>Line 15: Refresh the view on the screen by doing another <code>SELECT</code>.</p></item>
+ </list>
+ <note><p>You can also make use of parameters while building the statement. By using the
<code>SqlBuilder</code> objects and parameters you are less subject to attacks like SQL injection. Check the
<link href="http://library.gnome.org/devel/libgda/stable/";>GDA documentation</link> for more information
about parameters.</p></note>
+</section>
+
+<section id="run">
+ <title>Run the application</title>
+ <p>All of the code you need should now be in place, so try running the code. You now have a database for
your record collection!</p>
+</section>
+
+<section id="impl">
+ <title>Reference Implementation</title>
+ <p>If you run into problems with the tutorial, compare your code with this <link
href="record-collection/record-collection.js">reference code</link>.</p>
+</section>
+</page>
diff --git a/beginners-docs/C/response-type.page b/beginners-docs/C/response-type.page
new file mode 100644
index 0000000..e1930f7
--- /dev/null
+++ b/beginners-docs/C/response-type.page
@@ -0,0 +1,64 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="response-type">
+ <info>
+ <revision version="0.1" date="2012-04-10" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc></desc>
+ </info>
+
+ <title>enum ResponseType</title>
+
+ <terms>
+ <item>
+ <title>ResponseType.NONE = -1</title>
+ <p>Returned if an action widget has no response id, or if the dialog gets programmatically hidden or
destroyed</p>
+ </item>
+ <item>
+ <title>ResponseType.REJECT = -2</title>
+ <p>Generic response id, not used by GTK+ dialogs</p>
+ </item>
+ <item>
+ <title>ResponseType.ACCEPT = -3</title>
+ <p>Generic response id, not used by GTK+ dialogs</p>
+ </item>
+ <item>
+ <title>ResponseType.DELETE_EVENT = -4</title>
+ <p>Returned if the dialog is deleted</p>
+ </item>
+ <item>
+ <title>ResponseType.OK = -5</title>
+ <p>Returned by OK buttons in GTK+ dialogs</p>
+ </item>
+ <item>
+ <title>ResponseType.CANCEL = -6</title>
+ <p>Returned by Cancel buttons in GTK+ dialogs</p>
+ </item>
+ <item>
+ <title>ResponseType.CLOSE = -7</title>
+ <p>Returned by Close buttons in GTK+ dialogs</p>
+ </item>
+ <item>
+ <title>ResponseType.YES = -8</title>
+ <p>Returned by Yes buttons in GTK+ dialogs</p>
+ </item>
+ <item>
+ <title>ResponseType.NO = -9</title>
+ <p>Returned by No buttons in GTK+ dialogs</p>
+ </item>
+ <item>
+ <title>ResponseType.APPLY = -10</title>
+ <p>Returned by Apply buttons in GTK+ dialogs</p>
+ </item>
+ <item>
+ <title>ResponseType.HELP = -11</title>
+ <p>Returned by Help buttons in GTK+ dialogs</p>
+ </item>
+</terms>
+</page>
diff --git a/beginners-docs/C/samples/02_welcome_to_the_grid.js
b/beginners-docs/C/samples/02_welcome_to_the_grid.js
new file mode 100644
index 0000000..6d9bd73
--- /dev/null
+++ b/beginners-docs/C/samples/02_welcome_to_the_grid.js
@@ -0,0 +1,86 @@
+#!/usr/bin/gjs
+
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const WelcomeToTheGrid = new Lang.Class({
+ Name: 'Welcome to the Grid',
+
+ // Create the application itself
+ _init: function() {
+ this.application = new Gtk.Application();
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents windows when active
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function() {
+ this._buildUI ();
+ },
+
+
+
+ // Build the application's UI
+ _buildUI: function() {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ border_width: 10,
+ title: "Welcome to the Grid"});
+
+ // Create the Grid
+ this._grid = new Gtk.Grid ({
+ // column_homogeneous: true,
+ // column_spacing: 20,
+ row_spacing: 20 });
+
+ // Create an image
+ this._image = new Gtk.Image ({ file: "gnome-image.png" });
+
+ // Create a second image using a stock icon
+ this._icon = new Gtk.Image ({ stock: 'gtk-about' });
+
+ // Create a label
+ this._label = new Gtk.Label ({
+ label: "Welcome to GNOME, too!",
+ /* margin_top: 20 */ });
+
+ /* Create a second label
+ this._labelTwo = new Gtk.Label ({
+ label: "The cake is a pie." }); */
+
+ /* Create a button
+ this._button = new Gtk.Button ({
+ label: "Welcome to GNOME, too!"}); */
+
+ // Attach the images and button to the grid
+ this._grid.attach (this._image, 0, 0, 2, 1);
+ this._grid.attach (this._icon, 0, 1, 1, 1);
+ this._grid.attach (this._label, 1, 1, 1, 1);
+
+ // this._grid.attach (this._label, 0, 1, 1, 1);
+ // this._grid.attach (this._labelTwo, 1, 1, 1, 1);
+
+ // this._grid.attach (this._button, 1, 1, 1, 1);
+
+ // Add the grid to the window
+ this._window.add (this._grid);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ }
+
+});
+
+// Run the application
+let app = new WelcomeToTheGrid ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/03_getting_the_signal_01.js
b/beginners-docs/C/samples/03_getting_the_signal_01.js
new file mode 100644
index 0000000..98684ac
--- /dev/null
+++ b/beginners-docs/C/samples/03_getting_the_signal_01.js
@@ -0,0 +1,86 @@
+#!/usr/bin/gjs
+
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+// We start out with 0 cookies
+var cookies = 0;
+
+const GettingTheSignal = new Lang.Class({
+ Name: 'Getting the Signal',
+
+ // Create the application itself
+ _init: function() {
+ this.application = new Gtk.Application();
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents window when active
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function() {
+ this._buildUI ();
+ },
+
+
+
+ // Build the application's UI
+ _buildUI: function() {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ default_height: 200,
+ default_width: 400,
+ title: "Click the button to get a cookie!"});
+
+ // Create the label
+ this._cookieLabel = new Gtk.Label ({
+ label: "Number of cookies: " + cookies });
+
+ // Create the cookie button
+ this._cookieButton = new Gtk.Button ({ label: "Get a cookie" });
+
+ // Connect the cookie button to the function that handles clicking it
+ this._cookieButton.connect ('clicked', Lang.bind (this, this._getACookie));
+
+ // Create a grid to arrange everything inside
+ this._grid = new Gtk.Grid ({
+ halign: Gtk.Align.CENTER,
+ valign: Gtk.Align.CENTER,
+ row_spacing: 20 });
+
+ // Put everything inside the grid
+ this._grid.attach (this._cookieButton, 0, 0, 1, 1);
+ this._grid.attach (this._cookieLabel, 0, 1, 1, 1);
+
+ // Add the grid to the window
+ this._window.add (this._grid);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+
+ },
+
+
+
+ _getACookie: function() {
+
+ // Increase the number of cookies by 1 and update the label
+ cookies++;
+ this._cookieLabel.set_label ("Number of cookies: " + cookies);
+
+ }
+
+});
+
+// Run the application
+let app = new GettingTheSignal ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/03_getting_the_signal_02.js
b/beginners-docs/C/samples/03_getting_the_signal_02.js
new file mode 100644
index 0000000..8dbb3eb
--- /dev/null
+++ b/beginners-docs/C/samples/03_getting_the_signal_02.js
@@ -0,0 +1,109 @@
+#!/usr/bin/gjs
+
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+// We start out with 0 cookies
+var cookies = 0;
+
+const GettingTheSignal = new Lang.Class({
+ Name: 'Getting the Signal',
+
+ // Create the application itself
+ _init: function() {
+ this.application = new Gtk.Application();
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents window when active
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function() {
+ this._buildUI ();
+ },
+
+
+
+ // Build the application's UI
+ _buildUI: function() {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ default_height: 200,
+ default_width: 400,
+ title: "Click the button to get a cookie!"});
+
+ // Create the label
+ this._cookieLabel = new Gtk.Label ({
+ label: "Number of cookies: " + cookies });
+
+ // Create the cookie button
+ this._cookieButton = new Gtk.Button ({
+ label: "Get a cookie" });
+
+ // Connect the cookie button to the function that handles clicking it
+ this._cookieButton.connect ('clicked', Lang.bind (this, this._getACookie));
+
+ // Create the switch that controls whether or not you can win
+ this._cookieSwitch = new Gtk.Switch ();
+
+ // Create the label to go with the switch
+ this._switchLabel = new Gtk.Label ({
+ label: "Cookie dispenser" });
+
+ // Create a grid for the switch and its label
+ this._switchGrid = new Gtk.Grid ({
+ halign: Gtk.Align.CENTER,
+ valign: Gtk.Align.CENTER });
+
+ // Put the switch and its label inside that grid
+ this._switchGrid.attach (this._switchLabel, 0, 0, 1, 1);
+ this._switchGrid.attach (this._cookieSwitch, 1, 0, 1, 1);
+
+ // Create a grid to arrange everything else inside
+ this._grid = new Gtk.Grid ({
+ halign: Gtk.Align.CENTER,
+ valign: Gtk.Align.CENTER,
+ row_spacing: 20 });
+
+ // Put everything inside the grid
+ this._grid.attach (this._cookieButton, 0, 0, 1, 1);
+ this._grid.attach (this._switchGrid, 0, 1, 1, 1);
+ this._grid.attach (this._cookieLabel, 0, 2, 1, 1);
+
+ // Add the grid to the window
+ this._window.add (this._grid);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+
+ },
+
+
+
+ _getACookie: function() {
+
+ // Is the cookie dispenser turned on?
+ if (this._cookieSwitch.get_active()) {
+
+ // Increase the number of cookies by 1 and update the label
+ cookies++;
+ this._cookieLabel.set_label ("Number of cookies: " + cookies);
+
+ }
+
+ }
+
+});
+
+// Run the application
+let app = new GettingTheSignal ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/03_getting_the_signal_03.js
b/beginners-docs/C/samples/03_getting_the_signal_03.js
new file mode 100644
index 0000000..5cb903e
--- /dev/null
+++ b/beginners-docs/C/samples/03_getting_the_signal_03.js
@@ -0,0 +1,110 @@
+#!/usr/bin/gjs
+
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+// We start out with 0 cookies
+var cookies = 0;
+
+const GettingTheSignal = new Lang.Class({
+ Name: 'Getting the Signal',
+
+ // Create the application itself
+ _init: function() {
+ this.application = new Gtk.Application();
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents window when active
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function() {
+ this._buildUI ();
+ },
+
+
+
+ // Build the application's UI
+ _buildUI: function() {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ default_height: 200,
+ default_width: 400,
+ border_width: 20,
+ title: "Choose the one that says 'cookie'!"});
+
+ // Create the radio buttons
+ this._cookieButton = new Gtk.RadioButton ({ label: "Cookie" });
+ this._notCookieOne = new Gtk.RadioButton ({ label: "Not cookie",
+ group: this._cookieButton });
+ this._notCookieTwo = new Gtk.RadioButton ({ label: "Not cookie",
+ group: this._cookieButton });
+
+ // Arrange the radio buttons in their own grid
+ this._radioGrid = new Gtk.Grid ();
+ this._radioGrid.attach (this._notCookieOne, 0, 0, 1, 1);
+ this._radioGrid.attach (this._cookieButton, 0, 1, 1, 1);
+ this._radioGrid.attach (this._notCookieTwo, 0, 2, 1, 1);
+
+ // Set the button that will be at the top to be active by default
+ this._notCookieOne.set_active (true);
+
+ // Create the cookie button
+ this._cookieButton = new Gtk.Button ({
+ label: "Get a cookie" });
+
+ // Connect the cookie button to the function that handles clicking it
+ this._cookieButton.connect ('clicked', Lang.bind (this, this._getACookie));
+
+ // Create the label
+ this._cookieLabel = new Gtk.Label ({
+ label: "Number of cookies: " + cookies });
+
+ // Create a grid to arrange everything inside
+ this._grid = new Gtk.Grid ({
+ halign: Gtk.Align.CENTER,
+ valign: Gtk.Align.CENTER,
+ row_spacing: 20 });
+
+ // Put everything inside the grid
+ this._grid.attach (this._radioGrid, 0, 0, 1, 1);
+ this._grid.attach (this._cookieButton, 0, 1, 1, 1);
+ this._grid.attach (this._cookieLabel, 0, 2, 1, 1);
+
+ // Add the grid to the window
+ this._window.add (this._grid);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+
+ },
+
+
+
+ _getACookie: function() {
+
+ // Did you select "cookie" instead of "not cookie"?
+ if (this._cookieButton.get_active()) {
+
+ // Increase the number of cookies by 1 and update the label
+ cookies++;
+ this._cookieLabel.set_label ("Number of cookies: " + cookies);
+
+ }
+
+ }
+
+});
+
+// Run the application
+let app = new GettingTheSignal ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/03_getting_the_signal_04.js
b/beginners-docs/C/samples/03_getting_the_signal_04.js
new file mode 100644
index 0000000..52169d7
--- /dev/null
+++ b/beginners-docs/C/samples/03_getting_the_signal_04.js
@@ -0,0 +1,97 @@
+#!/usr/bin/gjs
+
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+// We start out with 0 cookies
+var cookies = 0;
+
+const GettingTheSignal = new Lang.Class({
+ Name: 'Getting the Signal',
+
+ // Create the application itself
+ _init: function() {
+ this.application = new Gtk.Application();
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents window when active
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function() {
+ this._buildUI ();
+ },
+
+
+
+ // Build the application's UI
+ _buildUI: function() {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ default_height: 200,
+ default_width: 400,
+ border_width: 20,
+ title: "Spell 'cookie' to get a cookie!"});
+
+ // Create the text entry field
+ this._spellCookie = new Gtk.Entry ();
+
+ // Create the cookie button
+ this._cookieButton = new Gtk.Button ({
+ label: "Get a cookie" });
+
+ // Connect the cookie button to the function that handles clicking it
+ this._cookieButton.connect ('clicked', Lang.bind (this, this._getACookie));
+
+ // Create the label
+ this._cookieLabel = new Gtk.Label ({
+ label: "Number of cookies: " + cookies });
+
+ // Create a grid to arrange everything inside
+ this._grid = new Gtk.Grid ({
+ halign: Gtk.Align.CENTER,
+ valign: Gtk.Align.CENTER,
+ row_spacing: 20 });
+
+ // Put everything inside the grid
+ this._grid.attach (this._spellCookie, 0, 0, 1, 1);
+ this._grid.attach (this._cookieButton, 0, 1, 1, 1);
+ this._grid.attach (this._cookieLabel, 0, 2, 1, 1);
+
+ // Add the grid to the window
+ this._window.add (this._grid);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+
+ },
+
+
+
+ _getACookie: function() {
+
+ // Did you spell "cookie" correctly?
+ if ((this._spellCookie.get_text()).toLowerCase() == "cookie") {
+
+ // Increase the number of cookies by 1 and update the label
+ cookies++;
+ this._cookieLabel.set_label ("Number of cookies: " + cookies);
+
+ }
+
+ }
+
+});
+
+// Run the application
+let app = new GettingTheSignal ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/GtkApplicationWindow.c b/beginners-docs/C/samples/GtkApplicationWindow.c
new file mode 100644
index 0000000..d4247b6
--- /dev/null
+++ b/beginners-docs/C/samples/GtkApplicationWindow.c
@@ -0,0 +1,25 @@
+#include <gtk/gtk.h>
+
+static void
+activate (GtkApplication *app,
+ gpointer user_data)
+{
+ GtkWidget *window;
+
+ window = gtk_application_window_new (app);
+ gtk_window_set_title (GTK_WINDOW (window), "Hello GNOME");
+ gtk_widget_show_all (window);
+}
+
+int
+main (int argc, char **argv)
+{
+ GtkApplication *app;
+ int status;
+
+ app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
+ g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
+ status = g_application_run (G_APPLICATION (app), argc, argv);
+ g_object_unref (app);
+ return status;
+}
diff --git a/beginners-docs/C/samples/GtkApplicationWindow.js
b/beginners-docs/C/samples/GtkApplicationWindow.js
new file mode 100644
index 0000000..10c797a
--- /dev/null
+++ b/beginners-docs/C/samples/GtkApplicationWindow.js
@@ -0,0 +1,49 @@
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const GLib = imports.gi.GLib;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const Application = new Lang.Class ({
+ Name: 'Application',
+
+ //create the application
+ _init: function () {
+ this.application = new Gtk.Application ({
+ application_id: 'org.example.myapp',
+ flags: Gio.ApplicationFlags.FLAGS_NONE
+ });
+
+ //connect to 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ //create the UI (in this case it's just the ApplicationWindow
+ _buildUI: function () {
+ this._window = new Gtk.ApplicationWindow ({ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ title: "Welcome to GNOME" });
+
+ //uncommenting the line below will change the window size
+ //this._window.set_default_size(600, 400);
+
+ //show the window and all child widgets (none in this case)
+ this._window.show_all();
+ },
+
+ //callback function for 'activate' signal
+ _onActivate: function () {
+ this._window.present ();
+ },
+
+ //callback function for 'startup' signal
+ _onStartup: function () {
+ this._buildUI ();
+ }
+});
+
+//run the application
+let app = new Application ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/GtkApplicationWindow.py
b/beginners-docs/C/samples/GtkApplicationWindow.py
new file mode 100644
index 0000000..0611158
--- /dev/null
+++ b/beginners-docs/C/samples/GtkApplicationWindow.py
@@ -0,0 +1,34 @@
+from gi.repository import Gtk
+import sys
+
+# a Gtk ApplicationWindow
+class MyWindow(Gtk.ApplicationWindow):
+ # constructor: the window belongs to the application app
+ def __init__(self, app):
+ Gtk.Window.__init__(self, application=app)
+ # set the title of the window
+ self.set_title("Welcome to GNOME")
+
+class MyApplication(Gtk.Application):
+ # constructor of the Gtk Application
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ # create and activate a MyWindow, with self (the MyApplication) as
+ # application app the window belongs to.
+ def do_activate(self):
+ win = MyWindow(self)
+ # show the window and all its content
+ # note that this line could also go in the constructor of MyWindow
+ win.show_all()
+
+ # start up the application
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+# create the application
+app = MyApplication()
+# run the application, which returns the value exit_status
+exit_status = app.run(sys.argv)
+# terminate the program using exit_status
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/GtkApplicationWindow.vala
b/beginners-docs/C/samples/GtkApplicationWindow.vala
new file mode 100644
index 0000000..7ca2a63
--- /dev/null
+++ b/beginners-docs/C/samples/GtkApplicationWindow.vala
@@ -0,0 +1,15 @@
+/* This is the application. */
+public class MyApplication : Gtk.Application {
+ /* Override the 'activate' signal of GLib.Application. */
+ protected override void activate () {
+ /* Create the window of this application and show it. */
+ var window = new Gtk.ApplicationWindow (this);
+ window.title = "Welcome to GNOME";
+ window.show ();
+ }
+}
+
+/* main creates and runs the application. */
+public int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/aboutdialog.c b/beginners-docs/C/samples/aboutdialog.c
new file mode 100644
index 0000000..656a4f0
--- /dev/null
+++ b/beginners-docs/C/samples/aboutdialog.c
@@ -0,0 +1,166 @@
+#include <gtk/gtk.h>
+
+
+
+/* Callback function in which reacts to the "response" signal from the user in
+ * the message dialog window.
+ * This function is used to destroy the dialog window.
+ */
+static void
+on_close (GtkDialog *dialog,
+ gint response_id,
+ gpointer user_data)
+{
+ /*This will cause the dialog to be destroyed*/
+ gtk_widget_destroy (GTK_WIDGET (dialog));
+
+}
+
+
+
+/* Callback function for the response signal "activate" related to the SimpleAction
+ * "about_action".
+ * This function is used to cause the about dialog window to popup.
+ */
+static void
+about_cb (GSimpleAction *simple,
+ GVariant *parameter,
+ gpointer user_data)
+{
+ GtkWidget *about_dialog;
+
+ about_dialog = gtk_about_dialog_new ();
+
+ /* Lists of authors/ documentators to be used later, they must be initialized
+ * in a null terminated array of strings.
+ */
+ const gchar *authors[] = {"GNOME Documentation Team", NULL};
+ const gchar *documenters[] = {"GNOME Documentation Team", NULL};
+
+ /* We fill in the information for the about dialog */
+ gtk_about_dialog_set_program_name (GTK_ABOUT_DIALOG (about_dialog), "AboutDialog Example");
+ gtk_about_dialog_set_copyright (GTK_ABOUT_DIALOG (about_dialog), "Copyright \xc2\xa9 2012 GNOME
Documentation Team");
+ gtk_about_dialog_set_authors (GTK_ABOUT_DIALOG (about_dialog), authors);
+ gtk_about_dialog_set_documenters (GTK_ABOUT_DIALOG (about_dialog), documenters);
+ gtk_about_dialog_set_website_label (GTK_ABOUT_DIALOG (about_dialog), "GNOME Developer Website");
+ gtk_about_dialog_set_website (GTK_ABOUT_DIALOG (about_dialog), "http://developer.gnome.org";);
+
+ /* We do not wish to show the title, which in this case would be
+ * "AboutDialog Example". We have to reset the title of the messagedialog
+ * window after setting the program name.
+ */
+ gtk_window_set_title (GTK_WINDOW (about_dialog), "");
+
+ /* To close the aboutdialog when "close" is clicked we connect the response
+ * signal to on_close
+ */
+ g_signal_connect (GTK_DIALOG (about_dialog), "response",
+ G_CALLBACK (on_close), NULL);
+
+ /* Show the about dialog */
+ gtk_widget_show (about_dialog);
+}
+
+
+
+static void
+activate (GtkApplication *app,
+ gpointer user_data)
+{
+ GtkWidget *window;
+
+ GSimpleAction *about_action;
+
+ /* Create a window with a title and a default size */
+ window = gtk_application_window_new (app);
+ gtk_window_set_title (GTK_WINDOW (window), "AboutDialog Example");
+ gtk_window_set_default_size (GTK_WINDOW (window), 200, 200);
+
+ /* Create a new simple action, giving it a NULL parameter type. It will
+ * always be NULL for actions invoked from a menu. (e.g clicking on an "ok"
+ * or "cancel" button)
+ */
+ about_action = g_simple_action_new ("about", NULL);
+
+ /* Connect the "activate" signal to the appropriate callback function.
+ * It will indicate that the action was just activated.
+ */
+ g_signal_connect (about_action, "activate", G_CALLBACK (about_cb),
+ GTK_WINDOW (window));
+
+ /* Adds the about_action to the overall action map. An Action map is an
+ * interface that contains a number of named GAction instances
+ * (such as about_action)
+ */
+ g_action_map_add_action (G_ACTION_MAP (window), G_ACTION (about_action));
+
+ gtk_widget_show_all (window);
+}
+
+
+
+/* Callback function for the response signal "activate" from the "quit" action
+ * found in the function directly below.
+ */
+static void
+quit_cb (GSimpleAction *simple,
+ GVariant *parameter,
+ gpointer user_data)
+{
+ GApplication *application = user_data;
+
+ g_application_quit (application);
+}
+
+
+
+/* Startup function for the menu we are creating in this sample */
+static void
+startup (GApplication *app,
+ gpointer user_data)
+{
+ GMenu *menu;
+ GSimpleAction *quit_action;
+
+ /* Initialize the GMenu, and add a menu item with label "About" and action
+ * "win.about". Also add another menu item with label "Quit" and action
+ * "app.quit"
+ */
+ menu = g_menu_new ();
+ g_menu_append (menu, "About", "win.about");
+ g_menu_append (menu, "Quit", "app.quit");
+
+ /* Create a new simple action for the application. (In this case it is the
+ * "quit" action.
+ */
+ quit_action = g_simple_action_new ("quit", NULL);
+
+ /* Ensure that the menu we have just created is set for the overall application */
+ gtk_application_set_app_menu (GTK_APPLICATION (app), G_MENU_MODEL (menu));
+
+ g_signal_connect (quit_action,
+ "activate",
+ G_CALLBACK (quit_cb),
+ app);
+
+ g_action_map_add_action (G_ACTION_MAP (app), G_ACTION (quit_action));
+
+}
+
+
+
+/* Startup function for the application */
+int
+main (int argc, char **argv)
+{
+ GtkApplication *app;
+ int status;
+
+ app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
+ g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
+ g_signal_connect (app, "startup", G_CALLBACK (startup), NULL);
+ status = g_application_run (G_APPLICATION (app), argc, argv);
+ g_object_unref (app);
+
+ return status;
+}
diff --git a/beginners-docs/C/samples/aboutdialog.js b/beginners-docs/C/samples/aboutdialog.js
new file mode 100644
index 0000000..31744be
--- /dev/null
+++ b/beginners-docs/C/samples/aboutdialog.js
@@ -0,0 +1,102 @@
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const GLib = imports.gi.GLib;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const AboutDialogExample = new Lang.Class({
+ Name: 'AboutDialog Example',
+
+ // Create the application itself
+ _init: function() {
+ this.application = new Gtk.Application({
+ application_id: 'org.example.jsaboutdialog',
+ flags: Gio.ApplicationFlags.FLAGS_NONE
+ });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents windows when active
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ // Callback function for 'startup' signal creates the menu and builds the UI
+ _onStartup: function() {
+ this._initMenus();
+ this._buildUI();
+ },
+
+ // Build the application's UI
+ _buildUI: function(){
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow({ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ title: "AboutDialog Example",
+ default_height: 250,
+ default_width: 350 });
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+
+ // Create the application menu
+ _initMenus: function() {
+ let menu = new Gio.Menu();
+ menu.append("About", 'app.about');
+ menu.append("Quit",'app.quit');
+ this.application.set_app_menu(menu);
+
+ // Create the "About" menu option and have it call the _showAbout() function
+ let aboutAction = new Gio.SimpleAction({ name: 'about' });
+ aboutAction.connect('activate', Lang.bind(this,
+ function() {
+ this._showAbout();
+ }));
+ this.application.add_action(aboutAction);
+
+ // Create the "Quit" menu option and have it close the window
+ let quitAction = new Gio.SimpleAction ({ name: 'quit' });
+ quitAction.connect('activate', Lang.bind(this,
+ function() {
+ this._window.destroy();
+ }));
+ this.application.add_action(quitAction);
+ },
+
+ _showAbout: function() {
+
+ // String arrays of the names of the people involved in the project
+ var authors = ["GNOME Documentation Team"];
+ var documenters = ["GNOME Documentation Team"];
+
+ // Create the About dialog
+ let aboutDialog = new Gtk.AboutDialog({ title: "AboutDialog Example",
+ program_name: "GtkApplication Example",
+ copyright: "Copyright \xa9 2012 GNOME Documentation Team",
+ authors: authors,
+ documenters: documenters,
+ website: "http://developer.gnome.org";,
+ website_label: "GNOME Developer Website" });
+
+ // Attach the About dialog to the window
+ aboutDialog.modal = true;
+ aboutDialog.transient_for = this._window;
+
+ // Show the About dialog
+ aboutDialog.show();
+
+ // Connect the Close button to the destroy signal for the dialog
+ aboutDialog.connect('response', function() {
+ aboutDialog.destroy();
+ });
+ }
+});
+
+// Run the application
+let app = new AboutDialogExample();
+app.application.run(ARGV);
diff --git a/beginners-docs/C/samples/aboutdialog.py b/beginners-docs/C/samples/aboutdialog.py
new file mode 100644
index 0000000..4ef29e6
--- /dev/null
+++ b/beginners-docs/C/samples/aboutdialog.py
@@ -0,0 +1,80 @@
+from gi.repository import Gtk
+from gi.repository import Gio
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+
+ # constructor for a window (the parent window)
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="AboutDialog Example", application=app)
+ self.set_default_size(200, 200)
+
+ # create the about_action (a Gio.SimpleAction)
+ about_action = Gio.SimpleAction.new("about", None)
+ # connect the signal from the action to the function about_cb()
+ about_action.connect("activate", self.about_cb)
+ # add the action to the application
+ app.add_action(about_action)
+
+ # callback function for the about_action's "activate" signal
+ def about_cb(self, action, parameter):
+ # a Gtk.AboutDialog
+ aboutdialog = Gtk.AboutDialog()
+
+ # lists of authors and documenters (will be used later)
+ authors = ["GNOME Documentation Team"]
+ documenters = ["GNOME Documentation Team"]
+
+ # we fill in the aboutdialog
+ aboutdialog.set_program_name("AboutDialog Example")
+ aboutdialog.set_copyright("Copyright \xc2\xa9 2012 GNOME Documentation Team")
+ aboutdialog.set_authors(authors)
+ aboutdialog.set_documenters(documenters)
+ aboutdialog.set_website("http://developer.gnome.org";)
+ aboutdialog.set_website_label("GNOME Developer Website")
+
+ # we do not want to show the title, which by default would be "About AboutDialog Example"
+ # we have to reset the title of the messagedialog window after setting the program name
+ aboutdialog.set_title("")
+
+ # to close the aboutdialog when "close" is clicked we connect the
+ # "response" signal to on_close
+ aboutdialog.connect("response", self.on_close)
+ # show the aboutdialog
+ aboutdialog.show()
+
+ # destroy the aboutdialog
+ def on_close(self, action, parameter):
+ action.destroy()
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def quit_cb(self, action, parameter):
+ self.quit()
+
+ def do_startup (self):
+ Gtk.Application.do_startup(self)
+
+ # create a menu (a Gio.Menu)
+ menu = Gio.Menu()
+ # append a menu item with label "About" and action "app.about"
+ menu.append ("About", "app.about")
+ # append a menu item with label "Quit" and action "app.quit"
+ menu.append("Quit", "app.quit")
+ # set menu as the menu for the application
+ self.set_app_menu (menu)
+
+ # a new simpleaction - for the application
+ quit_action = Gio.SimpleAction.new("quit", None)
+ quit_action.connect("activate", self.quit_cb)
+ self.add_action(quit_action)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/aboutdialog.vala b/beginners-docs/C/samples/aboutdialog.vala
new file mode 100644
index 0000000..8fcc6cf
--- /dev/null
+++ b/beginners-docs/C/samples/aboutdialog.vala
@@ -0,0 +1,65 @@
+/* A window in the application */
+public class Window : Gtk.ApplicationWindow {
+
+ /* The constructor */
+ public Window (Application app) {
+ Object (application: app, title: "AboutDialog Example");
+
+ var about_action = new SimpleAction ("about", null);
+
+ about_action.activate.connect (this.about_cb);
+ this.add_action (about_action);
+ this.show_all ();
+ }
+
+ /* This is the callback function connected to the 'activate' signal
+ * of the SimpleAction about_action.
+ */
+ void about_cb (SimpleAction simple, Variant? parameter) {
+ string[] authors = { "GNOME Documentation Team", null };
+ string[] documenters = { "GNOME Documentation Team", null };
+
+ Gtk.show_about_dialog (this,
+ "program-name", ("GtkApplication Example"),
+ "copyright", ("Copyright \xc2\xa9 2012 GNOME Documentation Team"),
+ "authors", authors,
+ "documenters", documenters,
+ "website", "http://developer.gnome.org";,
+ "website-label", ("GNOME Developer Website"),
+ null);
+ }
+}
+
+/* This is the Application */
+public class Application : Gtk.Application {
+
+ /* Here we override the activate signal of GLib.Application */
+ protected override void activate () {
+ new Window (this);
+ }
+
+ /* Here we override the startup signal of GLib.Application */
+ protected override void startup () {
+
+ base.startup ();
+
+ var menu = new Menu ();
+ menu.append ("About", "win.about");
+ menu.append ("Quit", "app.quit");
+ this.app_menu = menu;
+
+ var quit_action = new SimpleAction ("quit", null);
+ //quit_action.activate.connect (this.quit);
+ this.add_action (quit_action);
+ }
+
+ /* The constructor */
+ public Application () {
+ Object (application_id: "org.example.application");
+ }
+}
+
+/* main function creates Application and runs it */
+int main (string[] args) {
+ return new Application ().run (args);
+}
diff --git a/beginners-docs/C/samples/button.c b/beginners-docs/C/samples/button.c
new file mode 100644
index 0000000..3fc1af9
--- /dev/null
+++ b/beginners-docs/C/samples/button.c
@@ -0,0 +1,63 @@
+#include <gtk/gtk.h>
+
+
+
+/*This is the callback function. It is a handler function which
+reacts to the signal. In this case, it will cause the button label's
+string to reverse.*/
+static void
+button_clicked (GtkButton *button,
+ gpointer user_data)
+{
+ const char *old_label;
+ char *new_label;
+
+ old_label = gtk_button_get_label (button);
+ new_label = g_utf8_strreverse (old_label, -1);
+
+ gtk_button_set_label (button, new_label);
+ g_free (new_label);
+}
+
+
+
+static void
+activate (GtkApplication *app,
+ gpointer user_data)
+{
+ GtkWidget *window;
+ GtkWidget *button;
+
+ /*Create a window with a title and a default size*/
+ window = gtk_application_window_new (app);
+ gtk_window_set_title (GTK_WINDOW (window), "GNOME Button");
+ gtk_window_set_default_size (GTK_WINDOW (window), 250, 50);
+
+ /*Create a button with a label, and add it to the window*/
+ button = gtk_button_new_with_label ("Click Me");
+ gtk_container_add (GTK_CONTAINER (window), button);
+
+ /*Connecting the clicked signal to the callback function*/
+ g_signal_connect (GTK_BUTTON (button),
+ "clicked",
+ G_CALLBACK (button_clicked),
+ G_OBJECT (window));
+
+ gtk_widget_show_all (window);
+}
+
+
+
+int
+main (int argc, char **argv)
+{
+ GtkApplication *app;
+ int status;
+
+ app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
+ g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
+ status = g_application_run (G_APPLICATION (app), argc, argv);
+ g_object_unref (app);
+
+ return status;
+}
diff --git a/beginners-docs/C/samples/button.js b/beginners-docs/C/samples/button.js
new file mode 100644
index 0000000..f2ebb4b
--- /dev/null
+++ b/beginners-docs/C/samples/button.js
@@ -0,0 +1,63 @@
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const GLib = imports.gi.GLib;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const ButtonExample = new Lang.Class ({
+ Name: 'Button Example',
+
+ /* Create the application itself
+ This boilerplate code is needed to build any GTK+ application. */
+ _init: function () {
+ this.application = new Gtk.Application ({
+ application_id: 'org.example.jsbutton',
+ flags: Gio.ApplicationFlags.FLAGS_NONE
+ });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents windows when active
+ _onActivate: function () {
+ this._window.present ();
+ },
+
+ // Callback function for 'startup' signal initializes menus and builds the UI
+ _onStartup: function () {
+ this._buildUI ();
+ },
+
+ // Build the application's UI
+ _buildUI: function () {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow ({ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ title: "GNOME Button",
+ default_height: 50,
+ default_width: 250 });
+
+ // Create the button
+ this.Button = new Gtk.Button ({label: "Click Me"});
+ this._window.add (this.Button);
+
+ // Bind it to a function that says what to do when the button is clicked
+ this.Button.connect ("clicked", Lang.bind(this, this._clickHandler));
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+
+ // Here's the function that says what happens when the button is clicked
+ _clickHandler: function () {
+ this.Button.set_label ("Clicked!");
+ }
+});
+
+// Run the application
+let app = new ButtonExample ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/button.py b/beginners-docs/C/samples/button.py
new file mode 100644
index 0000000..16aa2b5
--- /dev/null
+++ b/beginners-docs/C/samples/button.py
@@ -0,0 +1,37 @@
+from gi.repository import Gtk
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ # a window
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="GNOME Button", application=app)
+ self.set_default_size(250, 50)
+
+ # a button
+ button = Gtk.Button()
+ # with a label
+ button.set_label("Click me")
+ # connect the signal "clicked" emitted by the button
+ # to the callback function do_clicked
+ button.connect("clicked", self.do_clicked)
+ # add the button to the window
+ self.add(button)
+
+ # callback function connected to the signal "clicked" of the button
+ def do_clicked(self, button):
+ print "You clicked me!"
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup (self):
+ Gtk.Application.do_startup (self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/button.vala b/beginners-docs/C/samples/button.vala
new file mode 100644
index 0000000..fad4abb
--- /dev/null
+++ b/beginners-docs/C/samples/button.vala
@@ -0,0 +1,42 @@
+/* A window in the application */
+public class MyWindow : Gtk.ApplicationWindow {
+
+ /* The constructor of the window */
+ internal MyWindow (MyApplication app) {
+ Object (application: app, title: "GNOME Button");
+
+ var button = new Gtk.Button.with_label ("Click Me");
+ button.clicked.connect (this.reverse_label);
+ button.show ();
+
+ this.window_position = Gtk.WindowPosition.CENTER;
+ this.set_default_size (250,50);
+ this.add (button);
+ }
+
+ /* The callback function connected to the
+ * 'clicked' signal of the button.
+ */
+ void reverse_label (Gtk.Button button) {
+ button.label = button.label.reverse ();
+ }
+}
+
+/* This is the application. */
+public class MyApplication : Gtk.Application {
+
+ /* This is the constructor */
+ internal MyApplication () {
+ Object (application_id: "org.example.MyApplication");
+ }
+
+ /* Override the activate signal of GLib.Application */
+ protected override void activate () {
+ new MyWindow (this).show ();
+ }
+}
+
+/* main creates and runs the application */
+public int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/buttonbox.py b/beginners-docs/C/samples/buttonbox.py
new file mode 100644
index 0000000..ead1f96
--- /dev/null
+++ b/beginners-docs/C/samples/buttonbox.py
@@ -0,0 +1,142 @@
+from gi.repository import Gtk
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="Calculator", application=app)
+ self.set_default_size(350, 200)
+ self.set_border_width(10)
+
+ # an entry
+ self.entry = Gtk.Entry()
+ # with an initial text
+ self.entry.set_text('0')
+ # text aligned on the right
+ self.entry.set_alignment(1)
+ # the text in the entry cannot be modified writing in it
+ self.entry.set_can_focus(False)
+
+ # a grid
+ grid = Gtk.Grid()
+ grid.set_row_spacing(5)
+
+ # to attach the entry
+ grid.attach(self.entry, 0, 0, 1, 1)
+
+ # the labels for the buttons
+ buttons = [ 7, 8, 9, '/',
+ 4, 5, 6, '*',
+ 1, 2, 3, '-',
+ 'C', 0, '=', '+' ]
+
+ # each row is a ButtonBox, attached to the grid
+ for i in range(4):
+ hbox = Gtk.ButtonBox.new(Gtk.Orientation.HORIZONTAL)
+ hbox.set_spacing(5)
+ grid.attach(hbox, 0, i + 1, 1, 1)
+ # each ButtonBox has 4 buttons, connected to the callback function
+ for j in range(4):
+ button = Gtk.Button(label=buttons[i * 4 + j])
+ button.set_can_focus(False)
+ button.connect("clicked", self.button_clicked)
+ hbox.add(button)
+
+ # some variables for the calculations
+ self.first_number = 0
+ self.second_number = 0
+ self.counter = 0
+ self.operation = ""
+
+ # add the grid to the window
+ self.add(grid)
+
+ # callback function for all the buttons
+ def button_clicked(self, button):
+ # for the operations
+ if button.get_label() == '+':
+ self.counter += 1
+ if self.counter > 1:
+ self.do_operation()
+ self.entry.set_text('0')
+ self.operation = "plus"
+ elif button.get_label() == '-':
+ self.counter += 1
+ if self.counter > 1:
+ self.do_operation()
+ self.entry.set_text('0')
+ self.operation = "minus"
+ elif button.get_label() == '*':
+ self.counter += 1
+ if self.counter > 1:
+ self.do_operation()
+ self.entry.set_text('0')
+ self.operation = "multiplication"
+ elif button.get_label() == '/':
+ self.counter += 1
+ if self.counter > 1:
+ self.do_operation()
+ self.entry.set_text('0')
+ self.operation = "division"
+ # for =
+ elif button.get_label() == '=':
+ self.do_operation()
+ self.entry.set_text(str(self.first_number))
+ self.counter = 1
+ # for Cancel
+ elif button.get_label() == 'C':
+ self.first_number = 0
+ self.second_number = 0
+ self.counter = 0
+ self.entry.set_text('')
+ self.operation = ""
+ # for a digit button
+ else:
+ new_digit = int(button.get_label())
+ if self.entry.get_text() == 'error':
+ number = 0
+ else:
+ number = int(self.entry.get_text())
+ number = number * 10 + new_digit
+ if self.counter == 0:
+ self.first_number = number
+ else:
+ self.second_number = number
+ self.entry.set_text(str(number))
+
+ def do_operation(self):
+ if self.operation == "plus":
+ self.first_number += self.second_number
+ elif self.operation == "minus":
+ self.first_number -= self.second_number
+ elif self.operation == "multiplication":
+ self.first_number *= self.second_number
+ elif self.operation == "division":
+ try:
+ self.first_number /= self.second_number
+ except ZeroDivisionError:
+ self.first_number = 0
+ self.second_number = 0
+ self.counter = 0
+ self.entry.set_text('error')
+ self.operation = ""
+ return
+ else:
+ self.first_number = 0
+ self.second_number = 0
+ self.counter = 0
+ self.entry.set_text('error')
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/checkbutton.c b/beginners-docs/C/samples/checkbutton.c
new file mode 100644
index 0000000..feec092
--- /dev/null
+++ b/beginners-docs/C/samples/checkbutton.c
@@ -0,0 +1,46 @@
+#include <gtk/gtk.h>
+
+/* signal handler for "toggled" signal of the CheckButton */
+static void
+toggled_cb (GtkToggleButton *toggle_button,
+ gpointer user_data)
+{
+ GtkWindow *window = user_data;
+
+ if (gtk_toggle_button_get_active (toggle_button))
+ gtk_window_set_title (window, "CheckButton Example");
+ else
+ gtk_window_set_title (window, "");
+}
+
+static void
+activate (GtkApplication *app,
+ gpointer user_data)
+{
+ GtkWidget *window;
+ GtkWidget *checkbutton;
+
+ window = gtk_application_window_new (app);
+ gtk_window_set_title (GTK_WINDOW (window), "CheckButton Example");
+ gtk_window_set_default_size (GTK_WINDOW (window), 300, 100);
+
+ checkbutton = gtk_check_button_new_with_label ("Show Title");
+ gtk_toggle_button_set_active (GTK_TOGGLE_BUTTON (checkbutton), TRUE);
+ g_signal_connect (GTK_TOGGLE_BUTTON (checkbutton), "toggled", G_CALLBACK (toggled_cb), window);
+ gtk_container_add (GTK_CONTAINER (window), checkbutton);
+ gtk_widget_show_all (window);
+}
+
+int
+main (int argc, char **argv)
+{
+ GtkApplication *app;
+ int status;
+
+ app = gtk_application_new ("org.example.checkbutton", G_APPLICATION_FLAGS_NONE);
+ g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
+ status = g_application_run (G_APPLICATION (app), argc, argv);
+ g_object_unref (app);
+
+ return status;
+}
diff --git a/beginners-docs/C/samples/checkbutton.js b/beginners-docs/C/samples/checkbutton.js
new file mode 100644
index 0000000..835e7d5
--- /dev/null
+++ b/beginners-docs/C/samples/checkbutton.js
@@ -0,0 +1,76 @@
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const CheckButtonExample = new Lang.Class({
+ Name: 'CheckButton Example',
+
+ // Create the application itself
+ _init: function() {
+ this.application = new Gtk.Application({
+ application_id: 'org.example.jscheckbutton',
+ flags: Gio.ApplicationFlags.FLAGS_NONE
+ });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents window when active
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function() {
+ this._buildUI ();
+ },
+
+
+
+ // Build the application's UI
+ _buildUI: function() {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ default_height: 100,
+ default_width: 300,
+ border_width: 10,
+ title: "CheckButton Example"});
+
+ // Create the check button
+ this._button = new Gtk.CheckButton ({label: "Show Title"});
+ this._window.add (this._button);
+
+ // Have the check button be checked by default
+ this._button.set_active (true);
+
+ // Connect the button to a function that does something when it's toggled
+ this._button.connect ("toggled", Lang.bind (this, this._toggledCB));
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+
+
+
+ _toggledCB: function () {
+
+ // Make the window title appear or disappear when the checkbox is toggled
+ if (this._button.get_active() == true)
+ this._window.set_title ("CheckButton Example");
+ else
+ this._window.set_title ("");
+
+ }
+
+});
+
+// Run the application
+let app = new CheckButtonExample ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/checkbutton.py b/beginners-docs/C/samples/checkbutton.py
new file mode 100644
index 0000000..8f1dd9d
--- /dev/null
+++ b/beginners-docs/C/samples/checkbutton.py
@@ -0,0 +1,47 @@
+from gi.repository import Gtk
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ # a window
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="CheckButton Example", application=app)
+ self.set_default_size(300, 100)
+ self.set_border_width(10)
+
+ # a new checkbutton
+ button = Gtk.CheckButton()
+ # with a label
+ button.set_label("Show Title")
+ # connect the signal "toggled" emitted by the checkbutton
+ # with the callback function toggled_cb
+ button.connect("toggled", self.toggled_cb)
+ # by default, the checkbutton is active
+ button.set_active(True)
+
+ # add the checkbutton to the window
+ self.add(button)
+
+ # callback function
+ def toggled_cb(self, button):
+ # if the togglebutton is active, set the title of the window
+ # as "Checkbutton Example"
+ if button.get_active():
+ self.set_title("CheckButton Example")
+ # else, set it as "" (empty string)
+ else:
+ self.set_title("")
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/checkbutton.vala b/beginners-docs/C/samples/checkbutton.vala
new file mode 100644
index 0000000..3653bdc
--- /dev/null
+++ b/beginners-docs/C/samples/checkbutton.vala
@@ -0,0 +1,52 @@
+/* A window in the application */
+class MyWindow : Gtk.ApplicationWindow {
+
+ /* The constructor */
+ internal MyWindow (MyApplication app) {
+ Object (application: app, title: "CheckButton Example");
+
+ this.set_default_size (300, 100);
+ this.border_width = 10;
+
+ var checkbutton = new Gtk.CheckButton.with_label ("Show Title");
+
+ /* Connect the checkbutton to the
+ * callback function (aka. signal handler).
+ */
+ checkbutton.toggled.connect (this.toggled_cb);
+
+ /* Add the button to the this window */
+ this.add (checkbutton);
+
+ checkbutton.set_active (true);
+ checkbutton.show ();
+ }
+
+ /* The signal handler for the 'toggled' signal of the checkbutton. */
+ void toggled_cb (Gtk.ToggleButton checkbutton) {
+ if (checkbutton.get_active())
+ this.set_title ("CheckButton Example");
+ else
+ this.set_title ("");
+ }
+}
+
+/* This is the application */
+class MyApplication : Gtk.Application {
+
+ /* The constructor */
+ internal MyApplication () {
+ Object (application_id: "org.example.checkbutton");
+ }
+
+ /* Override the activate signal of GLib.Application */
+ protected override void activate () {
+ new MyWindow (this).show ();
+ }
+
+}
+
+/* main creates and runs the application */
+int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/colorbutton.py b/beginners-docs/C/samples/colorbutton.py
new file mode 100644
index 0000000..ff5121e
--- /dev/null
+++ b/beginners-docs/C/samples/colorbutton.py
@@ -0,0 +1,52 @@
+from gi.repository import Gtk
+from gi.repository import Gdk
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="ColorButton", application=app)
+ self.set_default_size(150, 50)
+ self.set_border_width(10)
+
+ # a colorbutton (which opens a dialogue window in
+ # which we choose a color)
+ self.button = Gtk.ColorButton()
+ # with a default color (blue, in this instance)
+ color = Gdk.RGBA()
+ color.red = 0.0
+ color.green = 0.0
+ color.blue = 1.0
+ color.alpha = 0.5
+ self.button.set_rgba(color)
+
+ # choosing a color in the dialogue window emits a signal
+ self.button.connect("color-set", self.on_color_chosen)
+
+ # a label
+ label = Gtk.Label()
+ label.set_text("Click to choose a color")
+
+ # a grid to attach button and label
+ grid = Gtk.Grid()
+ grid.attach(self.button, 0, 0, 2, 1)
+ grid.attach(label, 0, 1, 2, 1)
+ self.add(grid)
+
+ # if a new color is chosen, we print it as rgb(r,g,b) in the terminal
+ def on_color_chosen(self, user_data):
+ print "You chose the color: " + self.button.get_rgba().to_string()
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup (self):
+ Gtk.Application.do_startup (self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/colorbutton.vala b/beginners-docs/C/samples/colorbutton.vala
new file mode 100644
index 0000000..9bf3c54
--- /dev/null
+++ b/beginners-docs/C/samples/colorbutton.vala
@@ -0,0 +1,39 @@
+/* This is the application. */
+public class MyApplication : Gtk.Application {
+ Gtk.Label label;
+
+ /* Override the 'activate' signal of GLib.Application. */
+ protected override void activate () {
+ /* Create the window of this application and show it. */
+ var window = new Gtk.ApplicationWindow (this);
+ window.title = "ColorButton";
+ window.set_default_size (150, 50);
+ window.set_border_width (10);
+
+ /* Create a new ColorButton with default blue. */
+ var blue = Gdk.RGBA ();
+ blue.parse ("blue");
+ var colorbutton = new Gtk.ColorButton.with_rgba (blue);
+
+ label = new Gtk.Label ("Click to choose a color");
+
+ var grid = new Gtk.Grid ();
+ grid.attach (colorbutton, 0, 0, 1, 1);
+ grid.attach_next_to (label, colorbutton, Gtk.PositionType.BOTTOM, 1, 1);
+
+ colorbutton.color_set.connect (this.on_color_set);
+
+ window.add (grid);
+ window.show_all ();
+ }
+
+ void on_color_set (Gtk.ColorButton button) {
+ var color = button.get_rgba ();
+ label.set_text ("RGBA: " + color.to_string());
+ }
+}
+
+/* main creates and runs the application. */
+public int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/combobox.js b/beginners-docs/C/samples/combobox.js
new file mode 100644
index 0000000..387e402
--- /dev/null
+++ b/beginners-docs/C/samples/combobox.js
@@ -0,0 +1,136 @@
+#!/usr/bin/gjs
+
+const GObject = imports.gi.GObject;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const ComboBoxExample = new Lang.Class ({
+ Name: 'ComboBox Example',
+
+ // Create the application itself
+ _init: function () {
+ this.application = new Gtk.Application ({
+ application_id: 'org.example.jscombobox'});
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents windows when active
+ _onActivate: function () {
+ this._window.present ();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function () {
+ this._buildUI ();
+ },
+
+
+
+ // Build the application's UI
+ _buildUI: function () {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow ({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ title: "Welcome to GNOME",
+ default_width: 200,
+ border_width: 10 });
+
+ // Create the liststore to put our options in
+ this._listStore = new Gtk.ListStore();
+ this._listStore.set_column_types ([
+ GObject.TYPE_STRING,
+ GObject.TYPE_STRING]);
+
+ // This array holds our list of options and their icons
+ let options = [{ name: "Select" },
+ { name: "New", icon: Gtk.STOCK_NEW },
+ { name: "Open", icon: Gtk.STOCK_OPEN },
+ { name: "Save", icon: Gtk.STOCK_SAVE }];
+
+ // Put the options in the liststore
+ for (let i = 0; i < options.length; i++ ) {
+ let option = options[i];
+ let iter = this._listStore.append();
+ this._listStore.set (iter, [0], [option.name]);
+ if ('icon' in option)
+ this._listStore.set (iter, [1], [option.icon]);
+ }
+
+ // Create the combobox
+ this._comboBox = new Gtk.ComboBox({
+ model: this._listStore});
+
+ // Create some cellrenderers for the items in each column
+ let rendererPixbuf = new Gtk.CellRendererPixbuf();
+ let rendererText = new Gtk.CellRendererText();
+
+ // Pack the renderers into the combobox in the order we want to see
+ this._comboBox.pack_start (rendererPixbuf, false);
+ this._comboBox.pack_start (rendererText, false);
+
+ // Set the renderers to use the information from our liststore
+ this._comboBox.add_attribute (rendererText, "text", 0);
+ this._comboBox.add_attribute (rendererPixbuf, "stock_id", 1);
+
+ // Set the first row in the combobox to be active on startup
+ this._comboBox.set_active (0);
+
+ // Connect the combobox's 'changed' signal to our callback function
+ this._comboBox.connect ('changed', Lang.bind (this, this._onComboChanged));
+
+ // Add the combobox to the window
+ this._window.add (this._comboBox);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+
+
+
+ _onComboChanged: function () {
+
+ // The silly pseudohaiku that we'll use for our messagedialog
+ let haiku = ["",
+ "You ask for the new\nwith no thought for the aged\nlike fallen leaves trod.",
+ "Like a simple clam\nrevealing a lustrous pearl\nit opens for you.",
+ "A moment in time\na memory on the breeze\nthese things can't be saved."];
+
+ // Which combobox item is active?
+ let activeItem = this._comboBox.get_active();
+
+ // No messagedialog if you choose "Select"
+ if (activeItem != 0) {
+ this._popUp = new Gtk.MessageDialog ({
+ transient_for: this._window,
+ modal: true,
+ buttons: Gtk.ButtonsType.OK,
+ message_type: Gtk.MessageType.INFO,
+ text: haiku[activeItem]});
+
+ // Connect the OK button to a handler function
+ this._popUp.connect ('response', Lang.bind (this, this._onDialogResponse));
+
+ // Show the messagedialog
+ this._popUp.show();
+ }
+
+ },
+
+
+
+ _onDialogResponse: function () {
+
+ this._popUp.destroy ();
+
+ }
+
+});
+
+// Run the application
+let app = new ComboBoxExample ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/combobox.py b/beginners-docs/C/samples/combobox.py
new file mode 100644
index 0000000..b08a89e
--- /dev/null
+++ b/beginners-docs/C/samples/combobox.py
@@ -0,0 +1,60 @@
+from gi.repository import Gtk
+import sys
+
+distros = [["Select distribution"], ["Fedora"], ["Mint"], ["Suse"]]
+
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="Welcome to GNOME", application=app)
+ self.set_default_size(200, -1)
+ self.set_border_width(10)
+
+ # the data in the model, of type string
+ listmodel = Gtk.ListStore(str)
+ # append the data in the model
+ for i in range(len(distros)):
+ listmodel.append(distros[i])
+
+ # a combobox to see the data stored in the model
+ combobox = Gtk.ComboBox(model=listmodel)
+
+ # a cellrenderer to render the text
+ cell = Gtk.CellRendererText()
+
+ # pack the cell into the beginning of the combobox, allocating
+ # no more space than needed
+ combobox.pack_start(cell, False)
+ # associate a property ("text") of the cellrenderer (cell) to a column (column 0)
+ # in the model used by the combobox
+ combobox.add_attribute(cell, "text", 0)
+
+ # the first row is the active one by default at the beginning
+ combobox.set_active(0)
+
+ # connect the signal emitted when a row is selected to the callback function
+ combobox.connect("changed", self.on_changed)
+
+ # add the combobox to the window
+ self.add(combobox)
+
+ def on_changed(self, combo):
+ # if the row selected is not the first one, write its value on the terminal
+ if combo.get_active() != 0:
+ print "You chose " + str(distros[combo.get_active()][0]) +"."
+ return True
+
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/combobox.vala b/beginners-docs/C/samples/combobox.vala
new file mode 100644
index 0000000..f182ada
--- /dev/null
+++ b/beginners-docs/C/samples/combobox.vala
@@ -0,0 +1,79 @@
+/* A window in the application */
+class MyWindow : Gtk.ApplicationWindow {
+
+ /* An instance array of linux distributions belonging to this window. */
+ string[] distros = {"Select distribution", "Fedora", "Mint", "Suse"};
+
+ /* This enum makes the code more readable when we refer to
+ * the column as Column.DISTRO, instead of just 0.
+ */
+ enum Column {
+ DISTRO
+ }
+
+ /* Constructor */
+ internal MyWindow (MyApplication app) {
+ Object (application: app, title: "Welcome to GNOME");
+
+ this.set_default_size (200, -1);
+ this.border_width = 10;
+
+ Gtk.ListStore liststore = new Gtk.ListStore (1, typeof (string));
+
+ for (int i = 0; i < distros.length; i++){
+ Gtk.TreeIter iter;
+ liststore.append (out iter);
+ liststore.set (iter, Column.DISTRO, distros[i]);
+ }
+
+ Gtk.ComboBox combobox = new Gtk.ComboBox.with_model (liststore);
+ Gtk.CellRendererText cell = new Gtk.CellRendererText ();
+ combobox.pack_start (cell, false);
+
+ combobox.set_attributes (cell, "text", Column.DISTRO);
+
+ /* Set the first item in the list to be selected (active). */
+ combobox.set_active (0);
+
+ /* Connect the 'changed' signal of the combobox
+ * to the signal handler (aka. callback function.
+ */
+ combobox.changed.connect (this.item_changed);
+
+ /* Add the combobox to this window */
+ this.add (combobox);
+ combobox.show ();
+ }
+
+ /* Signal handler for the 'changed' signal of the combobox. */
+ void item_changed (Gtk.ComboBox combo) {
+ if (combo.get_active () !=0) {
+ print ("You chose " + distros [combo.get_active ()] +"\n");
+ }
+ }
+}
+
+/* This is the application */
+class MyApplication : Gtk.Application {
+
+ /* Constructor */
+ internal MyApplication () {
+ Object (application_id: "org.example.MyApplication");
+ }
+
+ /* Override the activate signal of GLib.Application,
+ * which is inherited by Gtk.Application.
+ */
+ protected override void activate () {
+
+ /* Create the window of this application
+ * and show it.
+ */
+ new MyWindow (this).show ();
+ }
+}
+
+/* main creates and runs the application */
+int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/combobox_multicolumn.py
b/beginners-docs/C/samples/combobox_multicolumn.py
new file mode 100644
index 0000000..63f2765
--- /dev/null
+++ b/beginners-docs/C/samples/combobox_multicolumn.py
@@ -0,0 +1,71 @@
+from gi.repository import Gtk
+import sys
+
+actions = [["Select", None],
+ ["New", Gtk.STOCK_NEW],
+ ["Open", Gtk.STOCK_OPEN],
+ ["Save", Gtk.STOCK_SAVE]]
+
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="Welcome to GNOME", application=app)
+ self.set_default_size(200, -1)
+ self.set_border_width(10)
+
+ # the data in the model, of type string on two columns
+ listmodel = Gtk.ListStore(str, str)
+ # append the data
+ for i in range(len(actions)):
+ listmodel.append(actions[i])
+
+ # a combobox to see the data stored in the model
+ combobox = Gtk.ComboBox(model=listmodel)
+
+ # cellrenderers to render the data
+ renderer_pixbuf = Gtk.CellRendererPixbuf()
+ renderer_text = Gtk.CellRendererText()
+
+ # we pack the cell into the beginning of the combobox, allocating
+ # no more space than needed;
+ # first the image, then the text;
+ # note that it does not matter in which order they are in the model,
+ # the visualization is decided by the order of the cellrenderers
+ combobox.pack_start(renderer_pixbuf, False)
+ combobox.pack_start(renderer_text, False)
+
+ # associate a property of the cellrenderer to a column in the model
+ # used by the combobox
+ combobox.add_attribute(renderer_text, "text", 0)
+ combobox.add_attribute(renderer_pixbuf, "stock_id", 1)
+
+ # the first row is the active one at the beginning
+ combobox.set_active(0)
+
+ # connect the signal emitted when a row is selected to the callback function
+ combobox.connect("changed", self.on_changed)
+
+ # add the combobox to the window
+ self.add(combobox)
+
+ def on_changed(self, combo):
+ # if the row selected is not the first one, write on the terminal
+ # the value of the first column in the model
+ if combo.get_active() != 0:
+ print "You chose " + str(actions[combo.get_active()][0]) +"\n"
+ return True
+
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/comboboxtext.js b/beginners-docs/C/samples/comboboxtext.js
new file mode 100644
index 0000000..8a633f7
--- /dev/null
+++ b/beginners-docs/C/samples/comboboxtext.js
@@ -0,0 +1,104 @@
+#!/usr/bin/gjs
+
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const ComboBoxTextExample = new Lang.Class ({
+ Name: 'ComboBoxText Example',
+
+ // Create the application itself
+ _init: function () {
+ this.application = new Gtk.Application ({
+ application_id: 'org.example.jscomboboxtext'});
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents windows when active
+ _onActivate: function () {
+ this._window.present ();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function () {
+ this._buildUI ();
+ },
+
+
+
+ // Build the application's UI
+ _buildUI: function () {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow ({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ title: "Welcome to GNOME",
+ default_width: 200,
+ border_width: 10 });
+
+ // Create the combobox
+ this._comboBoxText = new Gtk.ComboBoxText();
+
+ // Populate the combobox
+ let distros = ["Select distribution", "Fedora", "Mint", "Suse"];
+ for (let i = 0; i < distros.length; i++)
+ this._comboBoxText.append_text (distros[i]);
+ this._comboBoxText.set_active (0);
+
+ // Connect the combobox's 'changed' signal to our callback function
+ this._comboBoxText.connect ('changed', Lang.bind (this, this._onComboChanged));
+
+ // Add the combobox to the window
+ this._window.add (this._comboBoxText);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+
+
+
+ _onComboChanged: function () {
+
+ // The responses we'll use for our messagedialog
+ let responses = ["",
+ "Fedora is a community distro sponsored by Red Hat.",
+ "Mint is a popular distro based on Ubuntu.",
+ "SUSE is a name shared by two separate distros."];
+
+ // Which combobox item is active?
+ let activeItem = this._comboBoxText.get_active();
+
+ // No messagedialog if you chose "Select distribution"
+ if (activeItem != 0) {
+ this._popUp = new Gtk.MessageDialog ({
+ transient_for: this._window,
+ modal: true,
+ buttons: Gtk.ButtonsType.OK,
+ message_type: Gtk.MessageType.INFO,
+ text: responses[activeItem]});
+
+ // Connect the OK button to a handler function
+ this._popUp.connect ('response', Lang.bind (this, this._onDialogResponse));
+
+ // Show the messagedialog
+ this._popUp.show();
+ }
+
+ },
+
+
+
+ _onDialogResponse: function () {
+
+ this._popUp.destroy ();
+
+ }
+
+});
+
+// Run the application
+let app = new ComboBoxTextExample ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/dialog.c b/beginners-docs/C/samples/dialog.c
new file mode 100644
index 0000000..ea22626
--- /dev/null
+++ b/beginners-docs/C/samples/dialog.c
@@ -0,0 +1,100 @@
+#include <gtk/gtk.h>
+
+
+/*Callback function in which reacts to the "response" signal. Be sure to place
+it before the function it is called in*/
+static void
+on_response (GtkDialog *dialog,
+ gint response_id,
+ gpointer user_data)
+{
+ /*For demonstration purposes, this will show the int value
+ of the response type*/
+ g_print ("response is %d\n", response_id);
+
+ /*This will cause the dialog to be destroyed*/
+ gtk_widget_destroy (GTK_WIDGET (dialog));
+}
+
+
+
+/*Callback function in which reacts to the "clicked" signal*/
+static void
+show_dialog (GtkButton *button,
+ gpointer user_data)
+{
+ GtkWindow *window = user_data;
+ GtkWidget *dialog;
+ GtkWidget *content_area;
+ GtkWidget *label;
+
+ gint response_id;
+
+ /*Create the dialog window. Modal windows prevent interaction with other
+ windows in the same application*/
+ dialog = gtk_dialog_new_with_buttons ("A Gtk+ Dialog",
+ window,
+ GTK_DIALOG_MODAL,
+ GTK_STOCK_OK,
+ GTK_RESPONSE_OK,
+ NULL);
+
+ /*Create a label and attach it to the content area of the dialog*/
+ content_area = gtk_dialog_get_content_area (GTK_DIALOG (dialog));
+ label = gtk_label_new ("This demonstrates a dialog with a label");
+ gtk_container_add (GTK_CONTAINER (content_area), label);
+
+ /*The main purpose of this is to show dialog's child widget, label*/
+ gtk_widget_show_all (dialog);
+
+ /*Connecting the "response" signal from the user to the associated
+ callback function*/
+ g_signal_connect (GTK_DIALOG (dialog),
+ "response",
+ G_CALLBACK (on_response),
+ NULL);
+
+}
+
+
+
+static void
+activate (GtkApplication *app,
+ gpointer user_data)
+{
+ GtkWidget *window;
+ GtkWidget *button;
+
+ /*Create a window with a title and a default size*/
+ window = gtk_application_window_new (app);
+ gtk_window_set_title (GTK_WINDOW (window), "GNOME Button");
+ gtk_window_set_default_size (GTK_WINDOW (window), 250, 50);
+
+ /*Create a button with a label, and add it to the window*/
+ button = gtk_button_new_with_label ("Click Me");
+ gtk_container_add (GTK_CONTAINER (window), button);
+
+ /*Connecting the clicked signal to the callback*/
+ g_signal_connect (GTK_BUTTON (button),
+ "clicked",
+ G_CALLBACK (show_dialog),
+ GTK_WINDOW (window));
+
+ gtk_widget_show_all (window);
+}
+
+
+
+int
+main (int argc, char **argv)
+{
+ GtkApplication *app;
+ int status;
+
+ app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
+ g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
+ status = g_application_run (G_APPLICATION (app), argc, argv);
+ g_object_unref (app);
+
+ return status;
+}
diff --git a/beginners-docs/C/samples/dialog.js b/beginners-docs/C/samples/dialog.js
new file mode 100644
index 0000000..83bd381
--- /dev/null
+++ b/beginners-docs/C/samples/dialog.js
@@ -0,0 +1,87 @@
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const GLib = imports.gi.GLib;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const DialogExample = new Lang.Class ({
+ Name: 'Dialog Example',
+
+ // Create the application itself
+ _init: function () {
+ this.application = new Gtk.Application ({
+ application_id: 'org.example.jsdialog',
+ flags: Gio.ApplicationFlags.FLAGS_NONE
+ });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents windows when active
+ _onActivate: function () {
+ this._window.present ();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function () {
+ this._buildUI ();
+ },
+
+ // Build the application's UI
+ _buildUI: function () {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow ({ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ title: "Gtk.Dialog Example",
+ default_height: 50,
+ default_width: 250 });
+
+ // Create a button
+ this._button = new Gtk.Button ({label: "Click Me"});
+ this._window.add (this._button);
+
+ // Bind it to the function that creates the dialog
+ this._button.connect ("clicked", Lang.bind(this, this._createDialog));
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+
+ _createDialog: function () {
+
+ // Create the dialog
+ this._dialog = new Gtk.Dialog ({ transient_for: this._window,
+ modal: true,
+ title: "A Gtk+ dialog" });
+
+ // Create the dialog's content area, which contains a message
+ this._contentArea = this._dialog.get_content_area();
+ this._message = new Gtk.Label ({label: "This demonstrates a dialog with a label"});
+ this._contentArea.add (this._message);
+
+ // Create the dialog's action area, which contains a stock OK button
+ this._actionArea = this._dialog.get_action_area();
+ this._OKButton = new Gtk.Button.new_from_stock (Gtk.STOCK_OK);
+ this._actionArea.add (this._OKButton);
+
+ // Connect the button to the function that handles what it does
+ this._OKButton.connect ("clicked", Lang.bind (this, this._OKHandler));
+
+ this._dialog.show_all();
+ },
+
+ _OKHandler: function (dialog, response_id) {
+
+ // Destroy the dialog
+ this._dialog.destroy();
+ }
+
+});
+
+// Run the application
+let app = new DialogExample ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/dialog.py b/beginners-docs/C/samples/dialog.py
new file mode 100644
index 0000000..b8315d1
--- /dev/null
+++ b/beginners-docs/C/samples/dialog.py
@@ -0,0 +1,58 @@
+from gi.repository import Gtk
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ # construct a window (the parent window)
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="GNOME Button", application=app)
+ self.set_default_size(250, 50)
+
+ # a button on the parent window
+ button = Gtk.Button("Click me")
+ # connect the signal "clicked" of the button with the function on_button_click()
+ button.connect("clicked", self.on_button_click)
+ # add the button to the window
+ self.add(button)
+
+ # callback function for the signal "clicked" of the button in the parent window
+ def on_button_click(self, widget):
+ # create a Gtk.Dialog
+ dialog = Gtk.Dialog()
+ dialog.set_title("A Gtk+ Dialog")
+ # The window defined in the constructor (self) is the parent of the dialog.
+ # Furthermore, the dialog is on top of the parent window
+ dialog.set_transient_for(self)
+ # set modal true: no interaction with other windows of the application
+ dialog.set_modal(True)
+ # add a button to the dialog window
+ dialog.add_button(button_text="OK", response_id=Gtk.ResponseType.OK)
+ # connect the "response" signal (the button has been clicked) to the function on_response()
+ dialog.connect("response", self.on_response)
+
+ # get the content area of the dialog, add a label to it
+ content_area = dialog.get_content_area()
+ label = Gtk.Label("This demonstrates a dialog with a label")
+ content_area.add(label)
+ # show the dialog
+ dialog.show_all()
+
+ def on_response(self, widget, response_id):
+ print "response_id is", response_id
+ # destroy the widget (the dialog) when the function on_response() is called
+ # (that is, when the button of the dialog has been clicked)
+ widget.destroy()
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup (self):
+ Gtk.Application.do_startup(self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/dialog.vala b/beginners-docs/C/samples/dialog.vala
new file mode 100644
index 0000000..fa1dc8c
--- /dev/null
+++ b/beginners-docs/C/samples/dialog.vala
@@ -0,0 +1,77 @@
+/* A window in the application. */
+public class MyWindow : Gtk.ApplicationWindow {
+
+ /* Constructor */
+ internal MyWindow (MyApplication app) {
+ Object (application: app, title: "GNOME Button");
+
+ this.window_position = Gtk.WindowPosition.CENTER;
+ this.set_default_size (250,50);
+
+ var button = new Gtk.Button.with_label ("Click Me");
+
+ /* Connect the button's "clicked" signal to
+ * the signal handler (aka. this.callback function).
+ */
+ button.clicked.connect (this.on_button_click);
+
+ /* Add the button to this window and show it. */
+ this.add (button);
+ button.show ();
+ }
+
+ /* The signal handler for the buttons 'clicked' signal. */
+ void on_button_click (Gtk.Button button) {
+ var dialog = new Gtk.Dialog.with_buttons ("A Gtk+ Dialog", this,
+ Gtk.DialogFlags.MODAL,
+ Gtk.Stock.OK,
+ Gtk.ResponseType.OK, null);
+
+ var content_area = dialog.get_content_area ();
+ var label = new Gtk.Label ("This demonstrates a dialog with a label");
+
+ content_area.add (label);
+
+ /* Connect the 'response' signal of the dialog
+ * the signal handler. It is emitted when the dialog's
+ * OK button is clicked.
+ */
+ dialog.response.connect (on_response);
+
+ /* Show the dialog and all the widgets. */
+ dialog.show_all ();
+ }
+
+ /* Signal handler for the 'response' signal of the dialog. */
+ void on_response (Gtk.Dialog dialog, int response_id) {
+
+ /* To see the int value of the ResponseType. This is only
+ * for demonstration purposes.*/
+ print ("response is %d\n", response_id);
+
+ /* This causes the dialog to be destroyed. */
+ dialog.destroy ();
+ }
+
+}
+
+/* This is the application. */
+public class MyApplication : Gtk.Application {
+
+ /* The constructore of the application. */
+ internal MyApplication () {
+ Object (application_id: "org.example.MyApplication");
+ }
+
+ /* Override the 'activate' signal of GLib.Application. */
+ protected override void activate () {
+
+ /* Create a window for the this application and show it. */
+ new MyWindow (this).show ();
+ }
+}
+
+/* The main function creates and runs the application. */
+public int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/entry.c b/beginners-docs/C/samples/entry.c
new file mode 100644
index 0000000..57d0dd5
--- /dev/null
+++ b/beginners-docs/C/samples/entry.c
@@ -0,0 +1,59 @@
+#include <gtk/gtk.h>
+
+
+
+/*This is the callback function. It is a handler function
+which reacts to the signal. In this case, it will grab the
+text input from the entry box and print out a line to the user.*/
+static void
+on_activate (GtkEntry *entry,
+ gpointer user_data)
+{
+ const char *name;
+ name = gtk_entry_get_text (entry);
+
+ g_print ("\nHello %s!\n\n", name);
+}
+
+
+
+static void
+activate (GtkApplication *app,
+ gpointer user_data)
+{
+ GtkWidget *window;
+ GtkWidget *entry_box;
+
+ /*Create a window with a title, a default size,
+ and a set border width*/
+ window = gtk_application_window_new (app);
+ gtk_window_set_title (GTK_WINDOW (window), "What is your name?");
+ gtk_window_set_default_size (GTK_WINDOW (window), 300, 100);
+ gtk_container_set_border_width (GTK_CONTAINER (window), 10);
+
+ /*Create a new entry box, and add it to the window*/
+ entry_box = gtk_entry_new ();
+ gtk_container_add (GTK_CONTAINER (window), entry_box);
+
+ /*Connecting the activate signal to the callback*/
+ g_signal_connect (GTK_ENTRY (entry_box), "activate",
+ G_CALLBACK (on_activate), NULL);
+
+ gtk_widget_show_all (window);
+}
+
+
+
+int
+main (int argc, char **argv)
+{
+ GtkApplication *app;
+ int status;
+
+ app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
+ g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
+ status = g_application_run (G_APPLICATION (app), argc, argv);
+ g_object_unref (app);
+
+ return status;
+}
diff --git a/beginners-docs/C/samples/entry.js b/beginners-docs/C/samples/entry.js
new file mode 100644
index 0000000..a4272dc
--- /dev/null
+++ b/beginners-docs/C/samples/entry.js
@@ -0,0 +1,86 @@
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const GLib = imports.gi.GLib;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const EntryExample = new Lang.Class({
+ Name: 'Entry Example',
+
+ // Create the application itself
+ _init: function() {
+ this.application = new Gtk.Application({
+ application_id: 'org.example.jsentry',
+ flags: Gio.ApplicationFlags.FLAGS_NONE
+ });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents windows when active
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function() {
+ this._buildUI ();
+ },
+
+
+
+ // Build the application's UI
+ _buildUI: function() {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ default_height: 100,
+ default_width: 300,
+ border_width: 10,
+ title: "What is your name?"});
+
+ // Create the text entry box
+ this.entry = new Gtk.Entry ();
+ this._window.add(this.entry);
+
+ // Connect the text entry box to a function that responds to what you type in
+ this.entry.connect("activate", Lang.bind (this, this._hello));
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+
+
+
+ _hello: function() {
+
+ // Create a popup dialog to greet the person who types in their name
+ this._greeter = new Gtk.MessageDialog ({
+ transient_for: this._window,
+ modal: true,
+ text: "Hello, " + this.entry.get_text() + "!",
+ message_type: Gtk.MessageType.OTHER,
+ buttons: Gtk.ButtonsType.OK,
+ });
+
+ // Show the popup dialog
+ this._greeter.show();
+
+ // Bind the OK button to the function that closes the popup
+ this._greeter.connect ("response", Lang.bind(this, this._okClicked));
+ },
+
+ _okClicked: function () {
+ this._greeter.destroy();
+ }
+
+});
+
+// Run the application
+let app = new EntryExample ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/entry.py b/beginners-docs/C/samples/entry.py
new file mode 100644
index 0000000..75eb7c2
--- /dev/null
+++ b/beginners-docs/C/samples/entry.py
@@ -0,0 +1,39 @@
+from gi.repository import Gtk
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="What is your name?", application=app)
+ self.set_default_size(300, 100)
+ self.set_border_width(10)
+
+ # a single line entry
+ name_box = Gtk.Entry()
+ # emits a signal when the Enter key is pressed, connected to the
+ # callback function cb_activate
+ name_box.connect("activate", self.cb_activate)
+
+ # add the Gtk.Entry to the window
+ self.add(name_box)
+
+ # the content of the entry is used to write in the terminal
+ def cb_activate(self, entry):
+ # retrieve the content of the widget
+ name = entry.get_text()
+ # print it in a nice form in the terminal
+ print "Hello " + name + "!"
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/entry.vala b/beginners-docs/C/samples/entry.vala
new file mode 100644
index 0000000..f188715
--- /dev/null
+++ b/beginners-docs/C/samples/entry.vala
@@ -0,0 +1,51 @@
+/* A window in the application. */
+class MyWindow : Gtk.ApplicationWindow {
+
+ /* Constructor */
+ internal MyWindow (MyApplication app) {
+ Object (application: app, title: "What is your name?");
+
+ var name_box = new Gtk.Entry ();
+
+ /* Connect to the signal handler. */
+ name_box.activate.connect (this.on_activate);
+ name_box.show ();
+
+ this.set_default_size (300, 100);
+ this.border_width = 10;
+
+ /* Add the name_box to this window. */
+ this.add (name_box);
+ }
+
+ /* Signal handler (aka. callback function) for the 'activate'
+ * signal of a Gtk.Entry.
+ */
+ void on_activate (Gtk.Entry entry) {
+ name = entry.get_text ();
+ print ("\nHello " + name + "!\n\n");
+ }
+}
+
+/* This is the application. */
+class MyApplication : Gtk.Application {
+
+ /* Constructor for the application. */
+ internal MyApplication () {
+ Object (application_id: "org.example.MyApplication");
+ }
+
+ /* Override the 'activate' signal of GLib.Application. */
+ protected override void activate () {
+
+ /* Create a new window for this application
+ * and show it. */
+ new MyWindow (this).show ();
+ }
+
+}
+
+/* The main function creats and runs the application. */
+int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/filechooserdialog.py b/beginners-docs/C/samples/filechooserdialog.py
new file mode 100644
index 0000000..ceb5bce
--- /dev/null
+++ b/beginners-docs/C/samples/filechooserdialog.py
@@ -0,0 +1,209 @@
+from gi.repository import Gtk
+from gi.repository import Gdk
+from gi.repository import Gio
+from gi.repository import GObject
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="FileChooserDialog Example", application=app)
+ self.set_default_size(400, 400)
+
+ # the actions for the window menu, connected to the callback functions
+ new_action = Gio.SimpleAction.new("new", None)
+ new_action.connect("activate", self.new_callback)
+ self.add_action(new_action)
+
+ open_action = Gio.SimpleAction.new("open", None)
+ open_action.connect("activate", self.open_callback)
+ self.add_action(open_action)
+
+ save_action = Gio.SimpleAction.new("save", None)
+ save_action.connect("activate", self.save_callback)
+ self.add_action(save_action)
+
+ save_as_action = Gio.SimpleAction.new("save-as", None)
+ save_as_action.connect("activate", self.save_as_callback)
+ self.add_action(save_as_action)
+
+ # the file
+ self.file = None
+
+ # the textview with the buffer
+ self.buffer = Gtk.TextBuffer()
+ textview = Gtk.TextView(buffer=self.buffer)
+ textview.set_wrap_mode(Gtk.WrapMode.WORD)
+
+ # a scrolled window for the textview
+ self.scrolled_window = Gtk.ScrolledWindow()
+ self.scrolled_window.set_policy(Gtk.PolicyType.AUTOMATIC, Gtk.PolicyType.AUTOMATIC)
+ self.scrolled_window.add(textview)
+ self.scrolled_window.set_border_width(5)
+
+ # add the scrolled window to the window
+ self.add(self.scrolled_window)
+
+ # callback for new
+ def new_callback(self, action, parameter):
+ self.buffer.set_text("")
+ print "New file created"
+
+ # callback for open
+ def open_callback(self, action, parameter):
+ # create a filechooserdialog to open:
+ # the arguments are: title of the window, parent_window, action, (buttons, response)
+ open_dialog = Gtk.FileChooserDialog ("Pick a file", self,
+ Gtk.FileChooserAction.OPEN,
+ (Gtk.STOCK_CANCEL, Gtk.ResponseType.CANCEL,
+ Gtk.STOCK_OPEN, Gtk.ResponseType.ACCEPT))
+
+ # not only local files can be selected in the file selector
+ open_dialog.set_local_only(False)
+ # dialog always on top of the textview window
+ open_dialog.set_modal(True)
+ # connect the dialog with the callback function open_response_cb()
+ open_dialog.connect("response", self.open_response_cb)
+ # show the dialog
+ open_dialog.show()
+
+ # callback function for the dialog open_dialog
+ def open_response_cb(self, dialog, response_id):
+ open_dialog = dialog
+ # if response is "ACCEPT" (the button "Open" has been clicked)
+ if response_id == Gtk.ResponseType.ACCEPT:
+ # self.file is the file that we get from the FileChooserDialog
+ self.file = open_dialog.get_file()
+ # an empty string (provisionally)
+ content = ""
+ try:
+ # load the content of the file into memory:
+ # success is a boolean depending on the success of the operation
+ # content is self-explanatory
+ # etags is an entity tag (can be used to quickly determine if the
+ # file has been modified from the version on the file system)
+ [success, content, etags] = self.file.load_contents(None)
+ except GObject.GError as e:
+ print "Error: " + e.message
+ # set the content as the text into the buffer
+ self.buffer.set_text(content, len(content))
+ print "opened: " + open_dialog.get_filename()
+ # if response is "CANCEL" (the button "Cancel" has been clicked)
+ elif response_id == Gtk.ResponseType.CANCEL:
+ print "cancelled: FileChooserAction.OPEN"
+ # destroy the FileChooserDialog
+ dialog.destroy()
+
+ # callback function for save_as
+ def save_as_callback(self, action, parameter):
+ # create a filechooserdialog to save:
+ # the arguments are: title of the window, parent_window, action, (buttons, response)
+ save_dialog = Gtk.FileChooserDialog ("Pick a file", self,
+ Gtk.FileChooserAction.SAVE,
+ (Gtk.STOCK_CANCEL, Gtk.ResponseType.CANCEL,
+ Gtk.STOCK_SAVE, Gtk.ResponseType.ACCEPT))
+ # the dialog will present a confirmation dialog if the user types a file name that
+ # already exists
+ save_dialog.set_do_overwrite_confirmation(True)
+ # dialog always on top of the textview window
+ save_dialog.set_modal(True)
+ # if self.file has already been saved
+ if self.file is not None:
+ try:
+ # set self.file as the current filename for the file chooser
+ save_dialog.set_file(self.file)
+ except GObject.GError as e:
+ print "Error: " + e.message
+ # connect the dialog to the callback function save_response_cb()
+ save_dialog.connect("response", self.save_response_cb)
+ # show the dialog
+ save_dialog.show()
+
+ # callback function for the dialog save_dialog
+ def save_response_cb(self, dialog, response_id):
+ save_dialog = dialog
+ # if response is "ACCEPT" (the button "Save" has been clicked)
+ if response_id == Gtk.ResponseType.ACCEPT:
+ # self.file is the currently selected file
+ self.file = save_dialog.get_file()
+ # save to file (see below)
+ self.save_to_file()
+ # if response is "CANCEL" (the button "Cancel" has been clicked)
+ elif response_id == Gtk.ResponseType.CANCEL:
+ print "cancelled: FileChooserAction.SAVE"
+ # destroy the FileChooserDialog
+ dialog.destroy()
+
+ # callback function for save
+ def save_callback(self, action, parameter):
+ # if self.file is not already there
+ if self.file is not None:
+ self.save_to_file()
+ # self.file is a new file
+ else:
+ # use save_as
+ self.save_as_callback(action, parameter)
+
+ # save_to_file
+ def save_to_file(self):
+ # get the content of the buffer, without hidden characters
+ [start, end] = self.buffer.get_bounds()
+ current_contents = self.buffer.get_text(start, end, False)
+ # if there is some content
+ if current_contents != "":
+ # set the content as content of self.file.
+ # arguments: contents, etags, make_backup, flags, GError
+ try:
+ self.file.replace_contents(current_contents,
+ None,
+ False,
+ Gio.FileCreateFlags.NONE,
+ None)
+ print "saved: " + self.file.get_path()
+ except GObject.GError as e:
+ print "Error: " + e.message
+ # if the contents are empty
+ else:
+ # create (if the file does not exist) or overwrite the file in readwrite mode.
+ # arguments: etags, make_backup, flags, GError
+ try:
+ self.file.replace_readwrite(None,
+ False,
+ Gio.FileCreateFlags.NONE,
+ None)
+ print "saved: " + self.file.get_path()
+ except GObject.GError as e:
+ print "Error: " + e.message
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+ # app action quit, connected to the callback function
+ quit_action = Gio.SimpleAction.new("quit", None)
+ quit_action.connect("activate", self.quit_callback)
+ self.add_action(quit_action)
+
+ # get the menu from the ui file with a builder
+ builder = Gtk.Builder()
+ try:
+ builder.add_from_file("filechooserdialog.ui")
+ except:
+ print "file not found"
+ sys.exit()
+ menu = builder.get_object("appmenu")
+ self.set_app_menu(menu)
+
+ # callback function for quit
+ def quit_callback(self, action, parameter):
+ self.quit()
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/filechooserdialog.ui b/beginners-docs/C/samples/filechooserdialog.ui
new file mode 100644
index 0000000..bc79bd1
--- /dev/null
+++ b/beginners-docs/C/samples/filechooserdialog.ui
@@ -0,0 +1,31 @@
+<?xml version="1.0"?>
+<interface>
+ <menu id="appmenu">
+ <section>
+ <item>
+ <attribute name="label">New</attribute>
+ <attribute name="action">win.new</attribute>
+ </item>
+ <item>
+ <attribute name="label">Open</attribute>
+ <attribute name="action">win.open</attribute>
+ </item>
+ </section>
+ <section>
+ <item>
+ <attribute name="label">Save</attribute>
+ <attribute name="action">win.save</attribute>
+ </item>
+ <item>
+ <attribute name="label">Save As...</attribute>
+ <attribute name="action">win.save-as</attribute>
+ </item>
+ </section>
+ <section>
+ <item>
+ <attribute name="label">Quit</attribute>
+ <attribute name="action">app.quit</attribute>
+ </item>
+ </section>
+ </menu>
+</interface>
diff --git a/beginners-docs/C/samples/filechooserdialog.vala b/beginners-docs/C/samples/filechooserdialog.vala
new file mode 100644
index 0000000..615d646
--- /dev/null
+++ b/beginners-docs/C/samples/filechooserdialog.vala
@@ -0,0 +1,196 @@
+class MyWindow: Gtk.ApplicationWindow {
+
+ /* MyWindow instance variables. */
+ GLib.File? file;
+ Gtk.TextBuffer buffer;
+ Gtk.TextView textview;
+ Gtk.ScrolledWindow scrolled_window;
+
+ /* Create ActionEntries. */
+ const ActionEntry[] actions = {
+ { "new", new_cb },
+ { "open", open_cb },
+ { "save", save_cb },
+ { "save-as", save_as_cb }
+ };
+
+ /* Constructor creates MyWindow, and add the scrolled_window. */
+ internal MyWindow (MyApplication app) {
+ Object (application: app, title: "FileChooserDialog Example");
+ this.set_default_size (400, 400);
+
+ /* Add the ActionEntries to MyWindow. */
+ this.add_action_entries (actions, this);
+
+ buffer = new Gtk.TextBuffer (null); //stores text to be displayed
+ textview = new Gtk.TextView.with_buffer (buffer); //displays TextBuffer
+ textview.set_wrap_mode (Gtk.WrapMode.WORD); //sets line wrapping
+
+ scrolled_window = new Gtk.ScrolledWindow (null, null);
+ scrolled_window.set_policy (Gtk.PolicyType.AUTOMATIC,
+ Gtk.PolicyType.AUTOMATIC);
+
+ scrolled_window.add (textview);
+ scrolled_window.set_border_width (5);
+
+ this.add (scrolled_window);
+ this.show_all ();
+ }
+
+ void new_cb (SimpleAction action, Variant? parameter) {
+ file = null;
+ buffer.set_text ("");
+ print ("New file created\n");
+ }
+
+ /* Create FileChooserDialog in OPEN mode. */
+ void open_cb (SimpleAction action, Variant? parameter) {
+
+ var open_dialog = new Gtk.FileChooserDialog ("Pick a file",
+ this as Gtk.Window,
+ Gtk.FileChooserAction.OPEN,
+ Gtk.Stock.CANCEL,
+ Gtk.ResponseType.CANCEL,
+ Gtk.Stock.OPEN,
+ Gtk.ResponseType.ACCEPT);
+
+ open_dialog.local_only = false; //allow for uri
+ open_dialog.set_modal (true);
+ open_dialog.response.connect (open_response_cb);
+ open_dialog.show ();
+ }
+
+ /* Either open the file and load the file contents or cancel. */
+ void open_response_cb (Gtk.Dialog dialog, int response_id) {
+ var open_dialog = dialog as Gtk.FileChooserDialog;
+
+ switch (response_id) {
+ case Gtk.ResponseType.ACCEPT: //open the file
+ file = open_dialog.get_file();
+
+ uint8[] file_contents;
+
+ try {
+ file.load_contents (null, out file_contents, null);
+ }
+ catch (GLib.Error err) { //handle the exception
+ error ("%s\n", err.message);
+ }
+ /* Set the buffer text to be the contents of the file. */
+ buffer.set_text ((string) file_contents,
+ file_contents.length);
+
+ print ("opened: %s\n", (open_dialog.get_filename ()));
+ break;
+
+ case Gtk.ResponseType.CANCEL:
+ print ("cancelled: FileChooserAction.OPEN\n");
+ break;
+ }
+ dialog.destroy ();
+ }
+
+
+ /* Create FileChooserDialog in SAVE mode. */
+ void save_as_cb (SimpleAction action, Variant? parameter) {
+ var save_dialog = new Gtk.FileChooserDialog ("Pick a file",
+ this as Gtk.Window,
+ Gtk.FileChooserAction.SAVE,
+ Gtk.Stock.CANCEL,
+ Gtk.ResponseType.CANCEL,
+ Gtk.Stock.SAVE,
+ Gtk.ResponseType.ACCEPT);
+
+ save_dialog.set_do_overwrite_confirmation (true);
+ save_dialog.set_modal (true);
+ if (file != null) {
+ try {
+ (save_dialog as Gtk.FileChooser).set_file (file);
+ }
+ catch (GLib.Error error) {
+ print ("%s\n", error.message);
+ }
+ }
+ save_dialog.response.connect (save_as_response_cb);
+ save_dialog.show ();
+ }
+
+ void save_as_response_cb (Gtk.Dialog dialog, int response_id) {
+ var save_dialog = dialog as Gtk.FileChooserDialog;
+
+ switch (response_id) {
+ case Gtk.ResponseType.ACCEPT:
+ file = save_dialog.get_file();
+ this.save_to_file ();
+ break;
+ default:
+ break;
+ }
+ dialog.destroy ();
+ }
+
+ /* Save the existing contents to the file.
+ * If file does not exist, call save_as_cb.
+ */
+ void save_cb (SimpleAction action, Variant? parameter) {
+ if (file != null) {
+ this.save_to_file ();
+ }
+ else {
+ save_as_cb (action, parameter);
+ }
+ }
+
+ void save_to_file (){
+ Gtk.TextIter start;
+ Gtk.TextIter end;
+
+ buffer.get_bounds (out start, out end);
+ string current_contents = buffer.get_text (start, end, false);
+ try {
+ file.replace_contents (current_contents.data, null, false,
+ GLib.FileCreateFlags.NONE, null, null);
+
+ print ("saved: %s\n", file.get_path ());
+ }
+ catch (GLib.Error err) {
+ error ("%s\n", err.message);
+ }
+ }
+}
+
+/* This is the application */
+class MyApplication: Gtk.Application {
+ protected override void activate () {
+ new MyWindow (this).show_all;
+ }
+
+ const ActionEntry[] actions = {
+ { "quit", quit_cb }
+ };
+
+ void quit_cb (SimpleAction action, Variant? parameter) {
+ this.quit ();
+ }
+
+ protected override void startup () {
+ base.startup ();
+
+ /* Setup actions */
+ this.add_action_entries (actions, this);
+
+ /* Setup menus */
+ var builder = new Gtk.Builder ();
+ try {
+ builder.add_from_file ("filechooserdialog.ui");
+ } catch (GLib.Error err) {
+ error ("Unable to load file: %s\n", err.message);
+ }
+ this.app_menu = builder.get_object ("appmenu") as MenuModel;
+ }
+}
+
+/* main creates and runs the application. */
+public int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/fontchooserwidget.py b/beginners-docs/C/samples/fontchooserwidget.py
new file mode 100644
index 0000000..db8a81e
--- /dev/null
+++ b/beginners-docs/C/samples/fontchooserwidget.py
@@ -0,0 +1,39 @@
+from gi.repository import Gtk
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="FontChooserWidget", application=app)
+
+ # a font chooser
+ self.font_chooser = Gtk.FontChooserWidget()
+ # a default font
+ self.font_chooser.set_font("Sans")
+ # a text to preview the font
+ self.font_chooser.set_preview_text("This is an example of preview text!")
+
+ # connect signal from the font chooser to the callback function
+ self.font_chooser.connect("notify::font", self.font_cb)
+
+ # add the font chooser to the window
+ self.add(self.font_chooser)
+
+ # callback function:
+ def font_cb(self, event, user_data):
+ # print in the terminal
+ print "You chose the font " + self.font_chooser.get_font()
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/fruitbat.png b/beginners-docs/C/samples/fruitbat.png
new file mode 100644
index 0000000..119ed48
Binary files /dev/null and b/beginners-docs/C/samples/fruitbat.png differ
diff --git a/beginners-docs/C/samples/future.vala b/beginners-docs/C/samples/future.vala
new file mode 100644
index 0000000..23a2454
--- /dev/null
+++ b/beginners-docs/C/samples/future.vala
@@ -0,0 +1,48 @@
+public class MyWindow : Gtk.ApplicationWindow {
+ void reverse_label (Gtk.Button button) {
+ button.label = button.label.reverse ();
+ }
+
+ internal MyWindow (MyApplication app) {
+ Object (application: app, title: "My Application");
+
+ var button = new Gtk.Button.with_label ("Click me!");
+ button.clicked.connect (reverse_label);
+ this.add (button);
+ button.show ();
+ }
+}
+
+public class MyApplication : Gtk.Application {
+ protected override void activate () {
+ new_window ();
+ }
+
+ void new_window () {
+ new MyWindow (this).show ();
+ }
+
+ const ActionEntry[] action_entries = {
+ { "new", new_window } /*,
+ { "quit", quit }*/
+ };
+
+ internal MyApplication () {
+ Object (application_id: "org.example.MyApplication");
+ }
+
+ protected override void startup () {
+ base.startup ();
+
+ this.add_action_entries (action_entries, this);
+
+ var menu = new Menu ();
+ menu.append ("New", "app.new");
+ menu.append ("Quit", "app.quit");
+ this.app_menu = menu;
+ }
+}
+
+public int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/gentoopenguin.png b/beginners-docs/C/samples/gentoopenguin.png
new file mode 100644
index 0000000..3df22b7
Binary files /dev/null and b/beginners-docs/C/samples/gentoopenguin.png differ
diff --git a/beginners-docs/C/samples/gmenu.c b/beginners-docs/C/samples/gmenu.c
new file mode 100644
index 0000000..2b9df00
--- /dev/null
+++ b/beginners-docs/C/samples/gmenu.c
@@ -0,0 +1,67 @@
+#include <gtk/gtk.h>
+
+static void
+new_window (GSimpleAction *action,
+ GVariant *parameter,
+ gpointer user_data)
+{
+ g_print ("This does nothing. It is only a demonstration.\n");
+}
+
+static void
+quit (GSimpleAction *action,
+ GVariant *parameter,
+ gpointer user_data)
+{
+ GApplication *application = user_data;
+
+ g_application_quit (application);
+}
+
+static void
+startup (GtkApplication *application,
+ gpointer user_data)
+{
+ static const GActionEntry actions[] = {
+ { "new", new_window },
+ { "quit", quit }
+ };
+
+ GMenu *menu;
+
+ g_action_map_add_action_entries (G_ACTION_MAP (application), actions, G_N_ELEMENTS (actions), application);
+
+ menu = g_menu_new ();
+ g_menu_append (menu, "New", "app.new");
+ g_menu_append (menu, "Quit", "app.quit");
+ gtk_application_set_app_menu (application, G_MENU_MODEL (menu));
+ g_object_unref (menu);
+}
+
+static void
+activate (GtkApplication *app,
+ gpointer user_data)
+{
+ GtkWidget *window;
+
+ window = gtk_application_window_new (app);
+
+ gtk_window_set_application (GTK_WINDOW (window), GTK_APPLICATION (app));
+ gtk_window_set_title (GTK_WINDOW (window), "Hello GNOME");
+
+ gtk_widget_show_all (GTK_WIDGET (window));
+}
+
+int
+main (int argc, char **argv)
+{
+ GtkApplication *app;
+ int status;
+
+ app = gtk_application_new ("org.gtk.example",G_APPLICATION_FLAGS_NONE);
+ g_signal_connect (app, "startup", G_CALLBACK (startup), NULL);
+ g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
+ status = g_application_run (G_APPLICATION (app), argc, argv);
+ g_object_unref (app);
+ return status;
+}
diff --git a/beginners-docs/C/samples/gmenu.js b/beginners-docs/C/samples/gmenu.js
new file mode 100644
index 0000000..0f0dac7
--- /dev/null
+++ b/beginners-docs/C/samples/gmenu.js
@@ -0,0 +1,89 @@
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const GLib = imports.gi.GLib;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const Application = new Lang.Class ({
+ Name: 'Application',
+
+ //create the application
+ _init: function () {
+ this.application = new Gtk.Application ({
+ application_id: 'org.example.myapp',
+ flags: Gio.ApplicationFlags.FLAGS_NONE
+ });
+
+ //connect to 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ //create the UI (in this case it's just the ApplicationWindow
+ _buildUI: function() {
+ this._window = new Gtk.ApplicationWindow ({ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ title: "Welcome to GNOME" });
+
+ //uncommenting the line below will change the window size
+ //this._window.set_default_size(600, 400);
+
+ //show the window and all child widgets (none in this case)
+ this._window.show_all();
+ },
+
+ _showNew: function() {
+ print ("This doesn't do anything. It is only a demonstration.");
+ },
+
+ _showAbout: function() {
+ print ("No AboutDialog here. This is only a demonstration.");
+ },
+
+ //create the menu items and connect the signals to the callback functions.
+ _initMenus: function() {
+ let menu = new Gio.Menu();
+ menu.append("New",'app.new');
+ menu.append("About", 'app.about');
+ menu.append("Quit",'app.quit');
+ this.application.set_app_menu(menu);
+
+ let newAction = new Gio.SimpleAction ({ name: 'new' });
+ newAction.connect('activate', Lang.bind(this,
+ function() {
+ this._showNew();
+ }));
+ this.application.add_action(newAction);
+
+ let aboutAction = new Gio.SimpleAction ({ name: 'about' });
+ aboutAction.connect('activate', Lang.bind(this,
+ function() {
+ this._showAbout();
+ }));
+ this.application.add_action(aboutAction);
+
+ let quitAction = new Gio.SimpleAction ({ name: 'quit' });
+ quitAction.connect('activate', Lang.bind(this,
+ function() {
+ this._window.destroy();
+ }));
+ this.application.add_action(quitAction);
+ },
+
+ //callback function for 'activate' signal
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ //callback function for 'startup' signal
+ _onStartup: function() {
+ //You must call _initMenus() before calling _buildUI().
+ this._initMenus();
+ this._buildUI();
+ }
+});
+
+//run the application
+let app = new Application ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/gmenu.py b/beginners-docs/C/samples/gmenu.py
new file mode 100644
index 0000000..c0dc578
--- /dev/null
+++ b/beginners-docs/C/samples/gmenu.py
@@ -0,0 +1,62 @@
+from gi.repository import Gtk
+from gi.repository import Gio
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="GMenu Example", application=app)
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup (self):
+ # start the application
+ Gtk.Application.do_startup(self)
+
+ # create a menu
+ menu = Gio.Menu()
+ # append to the menu three options
+ menu.append("New", "app.new")
+ menu.append("About", "app.about")
+ menu.append("Quit", "app.quit")
+ # set the menu as menu of the application
+ self.set_app_menu(menu)
+
+ # create an action for the option "new" of the menu
+ new_action = Gio.SimpleAction.new("new", None)
+ # connect it to the callback function new_cb
+ new_action.connect("activate", self.new_cb)
+ # add the action to the application
+ self.add_action(new_action)
+
+ # option "about"
+ about_action = Gio.SimpleAction.new("about", None)
+ about_action.connect("activate", self.about_cb)
+ self.add_action(about_action)
+
+ # option "quit"
+ quit_action = Gio.SimpleAction.new("quit", None)
+ quit_action.connect("activate", self.quit_cb)
+ self.add_action(quit_action)
+
+ # callback function for "new"
+ def new_cb(self, action, parameter):
+ print "This does nothing. It is only a demonstration."
+
+ # callback function for "about"
+ def about_cb(self, action, parameter):
+ print "No AboutDialog for you. This is only a demonstration."
+
+ # callback function for "quit"
+ def quit_cb(self, action, parameter):
+ print "You have quit."
+ self.quit()
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/gmenu.vala b/beginners-docs/C/samples/gmenu.vala
new file mode 100644
index 0000000..3d56a03
--- /dev/null
+++ b/beginners-docs/C/samples/gmenu.vala
@@ -0,0 +1,60 @@
+/* A window in the application. */
+public class Window : Gtk.ApplicationWindow {
+
+ /* Constructor */
+ public Window (Application app) {
+ Object (application: app, title: "Gmenu Example");
+
+ var about_action = new SimpleAction ("about", null);
+
+ /* Connect the 'activate' signal to the
+ * signal handler (aka. callback).
+ */
+ about_action.activate.connect (this.about_cb);
+
+ /* Add the action to this window. */
+ this.add_action (about_action);
+
+ this.show ();
+ }
+
+ /* Signal handler for 'activate' signal of the SimpleAction. */
+ void about_cb (SimpleAction simple, Variant? parameter) {
+ print ("This does nothing. It is only a demonstration.\n");
+ }
+}
+
+/* This is the Application. */
+public class Application : Gtk.Application {
+
+ /* Constructor */
+ public Application () {
+ Object (application_id: "org.example.application");
+ }
+
+ /* Override the 'activate' signal of GLib.Application. */
+ protected override void activate () {
+
+ /* Create a new window for this application. */
+ new Window (this);
+ }
+
+ /* Override the 'startup' signal of GLib.Application. */
+ protected override void startup () {
+ base.startup ();
+
+ var menu = new Menu ();
+ menu.append ("About", "win.about");
+ menu.append ("Quit", "app.quit");
+ this.app_menu = menu;
+
+ var quit_action = new SimpleAction ("quit", null);
+ //quit_action.activate.connect (this.quit);
+ this.add_action (quit_action);
+ }
+}
+
+/* main function creates Application and runs it. */
+int main (string[] args) {
+ return new Application ().run (args);
+}
diff --git a/beginners-docs/C/samples/gnome-image.png b/beginners-docs/C/samples/gnome-image.png
new file mode 100644
index 0000000..0064fe6
Binary files /dev/null and b/beginners-docs/C/samples/gnome-image.png differ
diff --git a/beginners-docs/C/samples/grid.c b/beginners-docs/C/samples/grid.c
new file mode 100644
index 0000000..b67c7b9
--- /dev/null
+++ b/beginners-docs/C/samples/grid.c
@@ -0,0 +1,68 @@
+#include <gtk/gtk.h>
+
+
+
+/*Signal handler for the "clicked" signal of the Button. Each
+click generates a progress bar pulse*/
+static void
+on_button_click (GtkButton *button,
+ gpointer user_data)
+{
+ GtkProgressBar *progress_bar = user_data;
+ gtk_progress_bar_pulse (progress_bar);
+}
+
+
+
+static void
+activate (GtkApplication *app,
+ gpointer user_data)
+{
+ GtkWidget *grid;
+ GtkWidget *window;
+ GtkWidget *button;
+ GtkWidget *progress_bar;
+
+ /*Create the window and set a title*/
+ window = gtk_application_window_new (app);
+ gtk_window_set_title (GTK_WINDOW (window), "Grid Example");
+
+ /*Create a button with a label*/
+ button = gtk_button_new_with_label ("Button");
+
+ /*Create the progress bar*/
+ progress_bar = gtk_progress_bar_new ();
+
+ /*Create a grid and attach the button and progress bar
+ accordingly*/
+ grid = gtk_grid_new ();
+ gtk_grid_attach (GTK_GRID (grid), button, 1, 1, 1, 1);
+ gtk_grid_attach_next_to (GTK_GRID (grid),
+ progress_bar,
+ button,
+ GTK_POS_BOTTOM, 1, 1);
+
+ /*Connecting the clicked signal to the callback function*/
+ g_signal_connect (GTK_BUTTON (button), "clicked",
+ G_CALLBACK (on_button_click), progress_bar);
+
+ gtk_container_add (GTK_CONTAINER (window), GTK_WIDGET (grid));
+
+ gtk_widget_show_all (window);
+}
+
+
+
+int
+main (int argc, char **argv)
+{
+ GtkApplication *app;
+ int status;
+
+ app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
+ g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
+ status = g_application_run (G_APPLICATION (app), argc, argv);
+ g_object_unref (app);
+
+ return status;
+}
diff --git a/beginners-docs/C/samples/grid.js b/beginners-docs/C/samples/grid.js
new file mode 100644
index 0000000..6e7ec05
--- /dev/null
+++ b/beginners-docs/C/samples/grid.js
@@ -0,0 +1,72 @@
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const GLib = imports.gi.GLib;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const GridExample = new Lang.Class ({
+ Name: 'Grid Example',
+
+ /* Create the application itself
+ This boilerplate code is needed to build any GTK+ application. */
+ _init: function () {
+ this.application = new Gtk.Application ({
+ application_id: 'org.example.jsgrid',
+ flags: Gio.ApplicationFlags.FLAGS_NONE
+ });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents windows when active
+ _onActivate: function () {
+ this._window.present ();
+ },
+
+ // Callback function for 'startup' signal initializes menus and builds the UI
+ _onStartup: function () {
+ this._buildUI ();
+ },
+
+
+
+
+ // Build the application's UI
+ _buildUI: function () {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow ({ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ title: "Grid Example"});
+
+ // Create the grid
+ this.Grid = new Gtk.Grid ();
+
+ // Create the widgets inside the grid
+ this.progressBar = new Gtk.ProgressBar ();
+ this.Button = new Gtk.Button ({ label: "Button" });
+ this.Button.connect ("clicked", Lang.bind(this, this._clickHandler));
+
+ // Assemble the grid
+ this._window.add (this.Grid);
+ this.Grid.attach (this.Button, 1, 1, 1, 1);
+ this.Grid.attach_next_to (this.progressBar, this.Button, Gtk.PositionType.BOTTOM, 1, 1);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+
+ // Here's the function that says what happens when the button is clicked
+ _clickHandler: function () {
+ this.progressBar.pulse ();
+ }
+
+
+});
+
+// Run the application
+let app = new GridExample ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/grid.py b/beginners-docs/C/samples/grid.py
new file mode 100644
index 0000000..70a7217
--- /dev/null
+++ b/beginners-docs/C/samples/grid.py
@@ -0,0 +1,40 @@
+from gi.repository import Gtk
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="Grid Example", application=app)
+
+ # 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):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/grid.vala b/beginners-docs/C/samples/grid.vala
new file mode 100644
index 0000000..64aa255
--- /dev/null
+++ b/beginners-docs/C/samples/grid.vala
@@ -0,0 +1,40 @@
+public class MyWindow : Gtk.ApplicationWindow {
+
+ Gtk.Widget progress_bar;
+
+ internal MyWindow (MyApplication app) {
+ Object (application: app, title: "Grid Example");
+ var grid = new Gtk.Grid();
+ progress_bar = new Gtk.ProgressBar ();
+ progress_bar.show ();
+
+ var button = new Gtk.Button.with_label ("Button");
+ button.clicked.connect (on_button_click);
+ button.show ();
+
+ this.add(grid);
+ grid.attach(button, 0, 1, 1, 1);
+ grid.attach_next_to (progress_bar, button, Gtk.PositionType.BOTTOM, 1, 1);
+ grid.show ();
+ }
+
+ void on_button_click (Gtk.Button button) {
+ (progress_bar as Gtk.ProgressBar).pulse ();
+ }
+}
+
+public class MyApplication : Gtk.Application {
+ protected override void activate () {
+
+ new MyWindow (this).show ();
+ }
+
+ internal MyApplication () {
+ Object (application_id: "org.example.MyApplication");
+
+ }
+}
+
+public int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/hello-in-C/Makefile.am b/beginners-docs/C/samples/hello-in-C/Makefile.am
new file mode 100644
index 0000000..0f97551
--- /dev/null
+++ b/beginners-docs/C/samples/hello-in-C/Makefile.am
@@ -0,0 +1,10 @@
+# The actual runnable program is set to the SCRIPTS primitive.
+# # Prefix bin_ tells where to copy this
+bin_PROGRAMS = hello-world
+hello_world_CFLAGS = $(gtk_CFLAGS)
+hello_world_LDADD = $(gtk_LIBS)
+hello_world_SOURCES = hello-world.c
+
+desktopdir = $(datadir)/applications
+desktop_DATA = \
+ hello-world.desktop
diff --git a/beginners-docs/C/samples/hello-in-C/README b/beginners-docs/C/samples/hello-in-C/README
new file mode 100644
index 0000000..e69de29
diff --git a/beginners-docs/C/samples/hello-in-C/autogen.sh b/beginners-docs/C/samples/hello-in-C/autogen.sh
new file mode 100755
index 0000000..cb2570e
--- /dev/null
+++ b/beginners-docs/C/samples/hello-in-C/autogen.sh
@@ -0,0 +1,18 @@
+#!/bin/sh
+
+set -e
+
+test -n "$srcdir" || srcdir=`dirname "$0"`
+test -n "$srcdir" || srcdir=.
+
+olddir=`pwd`
+cd "$srcdir"
+
+# This will run autoconf, automake, etc. for us
+autoreconf --force --install
+
+cd "$olddir"
+
+if test -z "$NOCONFIGURE"; then
+ "$srcdir"/configure "$@"
+fi
diff --git a/beginners-docs/C/samples/hello-in-C/configure.ac
b/beginners-docs/C/samples/hello-in-C/configure.ac
new file mode 100644
index 0000000..b8fa181
--- /dev/null
+++ b/beginners-docs/C/samples/hello-in-C/configure.ac
@@ -0,0 +1,9 @@
+# This file is processed by autoconf to create a configure script
+AC_INIT([Hello World], 1.0)
+AM_INIT_AUTOMAKE([1.10 no-define foreign dist-xz no-dist-gzip])
+AC_PROG_CC
+AM_PROG_VALAC([0.16])
+PKG_CHECK_MODULES(gtk, gtk+-3.0)
+AC_CONFIG_FILES([Makefile hello-world.desktop])
+
+AC_OUTPUT
diff --git a/beginners-docs/C/samples/hello-in-C/hello-world.c
b/beginners-docs/C/samples/hello-in-C/hello-world.c
new file mode 100644
index 0000000..98fffd1
--- /dev/null
+++ b/beginners-docs/C/samples/hello-in-C/hello-world.c
@@ -0,0 +1,34 @@
+#include <gtk/gtk.h>
+
+static void
+activate (GtkApplication* app,
+ gpointer user_data)
+{
+ GtkWidget *window;
+ GtkWidget *label;
+
+ window = gtk_application_window_new (app);
+ label = gtk_label_new ("Hello GNOME!");
+ gtk_container_add (GTK_CONTAINER (window), label);
+ gtk_window_set_title (GTK_WINDOW (window), "Welcome to GNOME");
+ gtk_window_set_default_size (GTK_WINDOW (window), 200, 100);
+ gtk_widget_show_all (window);
+}
+
+int
+main (int argc,
+ char **argv)
+{
+ GtkApplication *app;
+ int status;
+
+ app = gtk_application_new (NULL, G_APPLICATION_FLAGS_NONE);
+ g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
+ status = g_application_run (G_APPLICATION (app), argc, argv);
+ g_object_unref (app);
+
+ return status;
+}
+
+
+
diff --git a/beginners-docs/C/samples/hello-in-C/hello-world.desktop.in
b/beginners-docs/C/samples/hello-in-C/hello-world.desktop.in
new file mode 100644
index 0000000..06fbd41
--- /dev/null
+++ b/beginners-docs/C/samples/hello-in-C/hello-world.desktop.in
@@ -0,0 +1,11 @@
+[Desktop Entry]
+Version=1.0
+Encoding=UTF-8
+Name=Hello World
+Comment=Say Hello
+Exec= prefix@/bin/hello-world
+Icon=application-default-icon
+Terminal=false
+Type=Application
+StartupNotify=true
+Categories=GNOME;GTK;Utility;
diff --git a/beginners-docs/C/samples/hello-in-python/Makefile.am
b/beginners-docs/C/samples/hello-in-python/Makefile.am
new file mode 100644
index 0000000..fa4110a
--- /dev/null
+++ b/beginners-docs/C/samples/hello-in-python/Makefile.am
@@ -0,0 +1,11 @@
+# The actual runnable program is set to the SCRIPTS primitive.
+# # Prefix bin_ tells where to copy this
+bin_SCRIPTS = hello-world.py
+# # List of files to be distributed
+EXTRA_DIST= \
+ $(bin_SCRIPTS)
+#
+# # The desktop files
+desktopdir = $(datadir)/applications
+desktop_DATA = \
+ hello-world.desktop
diff --git a/beginners-docs/C/samples/hello-in-python/README b/beginners-docs/C/samples/hello-in-python/README
new file mode 100644
index 0000000..dba645f
--- /dev/null
+++ b/beginners-docs/C/samples/hello-in-python/README
@@ -0,0 +1,36 @@
+To build and install this program:
+
+./autogen.sh --prefix=/home/your_username/.local
+make install
+
+-------------
+Running the first line above creates the following files:
+
+aclocal.m4
+autom4te.cache
+config.log
+config.status
+configure
+hello-world.desktop
+install-sh
+missing
+Makefile.in
+Makefile
+
+Running "make install", installs the application in /home/your_username/.local/bin
+and installs the hello-world.desktop file in /home/your_username/.local/share/applications
+
+You can now run the application by typing "Hello World" in the Overview.
+
+----------------
+To uninstall, type:
+
+make uninstall
+
+----------------
+To create a tarball type:
+
+make distcheck
+
+This will create hello-world-1.0.tar.xz
+
diff --git a/beginners-docs/C/samples/hello-in-python/autogen.sh
b/beginners-docs/C/samples/hello-in-python/autogen.sh
new file mode 100755
index 0000000..cb2570e
--- /dev/null
+++ b/beginners-docs/C/samples/hello-in-python/autogen.sh
@@ -0,0 +1,18 @@
+#!/bin/sh
+
+set -e
+
+test -n "$srcdir" || srcdir=`dirname "$0"`
+test -n "$srcdir" || srcdir=.
+
+olddir=`pwd`
+cd "$srcdir"
+
+# This will run autoconf, automake, etc. for us
+autoreconf --force --install
+
+cd "$olddir"
+
+if test -z "$NOCONFIGURE"; then
+ "$srcdir"/configure "$@"
+fi
diff --git a/beginners-docs/C/samples/hello-in-python/configure.ac
b/beginners-docs/C/samples/hello-in-python/configure.ac
new file mode 100644
index 0000000..bdd443b
--- /dev/null
+++ b/beginners-docs/C/samples/hello-in-python/configure.ac
@@ -0,0 +1,5 @@
+# This file is processed by autoconf to create a configure script
+AC_INIT([Hello World], 1.0)
+AM_INIT_AUTOMAKE([1.10 no-define foreign dist-xz no-dist-gzip])
+AC_CONFIG_FILES([Makefile hello-world.desktop])
+AC_OUTPUT
diff --git a/beginners-docs/C/samples/hello-in-python/hello-world.desktop.in
b/beginners-docs/C/samples/hello-in-python/hello-world.desktop.in
new file mode 100644
index 0000000..06fbd41
--- /dev/null
+++ b/beginners-docs/C/samples/hello-in-python/hello-world.desktop.in
@@ -0,0 +1,11 @@
+[Desktop Entry]
+Version=1.0
+Encoding=UTF-8
+Name=Hello World
+Comment=Say Hello
+Exec= prefix@/bin/hello-world
+Icon=application-default-icon
+Terminal=false
+Type=Application
+StartupNotify=true
+Categories=GNOME;GTK;Utility;
diff --git a/beginners-docs/C/samples/hello-in-python/hello-world.py
b/beginners-docs/C/samples/hello-in-python/hello-world.py
new file mode 100644
index 0000000..ebca626
--- /dev/null
+++ b/beginners-docs/C/samples/hello-in-python/hello-world.py
@@ -0,0 +1,30 @@
+from gi.repository import Gtk
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ # constructor for a Gtk.ApplicationWindow
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="Welcome to GNOME", application=app)
+ self.set_default_size(200, 100)
+
+ # create a label
+ label = Gtk.Label()
+ # set the text of the label
+ label.set_text("Hello GNOME!")
+ # add the label to the window
+ self.add(label)
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/hello-in-vala/Makefile.am
b/beginners-docs/C/samples/hello-in-vala/Makefile.am
new file mode 100644
index 0000000..5d6150a
--- /dev/null
+++ b/beginners-docs/C/samples/hello-in-vala/Makefile.am
@@ -0,0 +1,11 @@
+# The actual runnable program is set to the SCRIPTS primitive.
+# # Prefix bin_ tells where to copy this
+bin_PROGRAMS = hello-world
+hello_world_CFLAGS = $(gtk_CFLAGS)
+hello_world_LDADD = $(gtk_LIBS)
+hello_world_VALAFLAGS = --pkg gtk+-3.0
+hello_world_SOURCES = hello-world.vala
+
+desktopdir = $(datadir)/applications
+desktop_DATA = \
+ hello-world.desktop
diff --git a/beginners-docs/C/samples/hello-in-vala/README b/beginners-docs/C/samples/hello-in-vala/README
new file mode 100644
index 0000000..e69de29
diff --git a/beginners-docs/C/samples/hello-in-vala/autogen.sh
b/beginners-docs/C/samples/hello-in-vala/autogen.sh
new file mode 100755
index 0000000..cb2570e
--- /dev/null
+++ b/beginners-docs/C/samples/hello-in-vala/autogen.sh
@@ -0,0 +1,18 @@
+#!/bin/sh
+
+set -e
+
+test -n "$srcdir" || srcdir=`dirname "$0"`
+test -n "$srcdir" || srcdir=.
+
+olddir=`pwd`
+cd "$srcdir"
+
+# This will run autoconf, automake, etc. for us
+autoreconf --force --install
+
+cd "$olddir"
+
+if test -z "$NOCONFIGURE"; then
+ "$srcdir"/configure "$@"
+fi
diff --git a/beginners-docs/C/samples/hello-in-vala/configure.ac
b/beginners-docs/C/samples/hello-in-vala/configure.ac
new file mode 100644
index 0000000..b8fa181
--- /dev/null
+++ b/beginners-docs/C/samples/hello-in-vala/configure.ac
@@ -0,0 +1,9 @@
+# This file is processed by autoconf to create a configure script
+AC_INIT([Hello World], 1.0)
+AM_INIT_AUTOMAKE([1.10 no-define foreign dist-xz no-dist-gzip])
+AC_PROG_CC
+AM_PROG_VALAC([0.16])
+PKG_CHECK_MODULES(gtk, gtk+-3.0)
+AC_CONFIG_FILES([Makefile hello-world.desktop])
+
+AC_OUTPUT
diff --git a/beginners-docs/C/samples/hello-in-vala/hello-world.desktop.in
b/beginners-docs/C/samples/hello-in-vala/hello-world.desktop.in
new file mode 100644
index 0000000..06fbd41
--- /dev/null
+++ b/beginners-docs/C/samples/hello-in-vala/hello-world.desktop.in
@@ -0,0 +1,11 @@
+[Desktop Entry]
+Version=1.0
+Encoding=UTF-8
+Name=Hello World
+Comment=Say Hello
+Exec= prefix@/bin/hello-world
+Icon=application-default-icon
+Terminal=false
+Type=Application
+StartupNotify=true
+Categories=GNOME;GTK;Utility;
diff --git a/beginners-docs/C/samples/hello-in-vala/hello-world.vala
b/beginners-docs/C/samples/hello-in-vala/hello-world.vala
new file mode 100644
index 0000000..5a880fc
--- /dev/null
+++ b/beginners-docs/C/samples/hello-in-vala/hello-world.vala
@@ -0,0 +1,14 @@
+public class MyApplication : Gtk.Application {
+ protected override void activate () {
+ var window = new Gtk.ApplicationWindow (this);
+ var label = new Gtk.Label ("Hello GNOME!");
+ window.add (label);
+ window.set_title ("Welcome to GNOME");
+ window.set_default_size (200, 100);
+ window.show_all ();
+ }
+}
+
+public int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/helloWorld.js b/beginners-docs/C/samples/helloWorld.js
new file mode 100644
index 0000000..3041dd1
--- /dev/null
+++ b/beginners-docs/C/samples/helloWorld.js
@@ -0,0 +1,42 @@
+#!/usr/bin/gjs
+
+const Lang = imports.lang;
+const Gtk = imports.gi.Gtk;
+
+const Application = new Lang.Class({
+ //A Class requires an explicit Name parameter. This is the Class Name.
+ Name: 'Application',
+
+ //create the application
+ _init: function() {
+ this.application = new Gtk.Application();
+
+ //connect to 'activate' and 'startup' signals to handlers.
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ //create the UI
+ _buildUI: function() {
+ this._window = new Gtk.ApplicationWindow({ application: this.application,
+ title: "Hello World!" });
+ this._window.set_default_size(200, 200);
+ this.label = new Gtk.Label({ label: "Hello World" });
+ this._window.add(this.label);
+ },
+
+ //handler for 'activate' signal
+ _onActivate: function() {
+ //show the window and all child widgets
+ this._window.show_all();
+ },
+
+ //handler for 'startup' signal
+ _onStartup: function() {
+ this._buildUI();
+ }
+});
+
+//run the application
+let app = new Application();
+app.application.run(ARGV);
diff --git a/beginners-docs/C/samples/helloWorld/Makefile.am b/beginners-docs/C/samples/helloWorld/Makefile.am
new file mode 100644
index 0000000..963c67c
--- /dev/null
+++ b/beginners-docs/C/samples/helloWorld/Makefile.am
@@ -0,0 +1,11 @@
+# The actual runnable program is set to the SCRIPTS primitive.
+# # Prefix bin_ tells where to copy this
+bin_SCRIPTS = helloWorld
+# # List of files to be distributed
+EXTRA_DIST= \
+ $(bin_SCRIPTS)
+#
+# # The desktop files
+desktopdir = $(datadir)/applications
+desktop_DATA = \
+ helloWorld.desktop
diff --git a/beginners-docs/C/samples/helloWorld/README b/beginners-docs/C/samples/helloWorld/README
new file mode 100644
index 0000000..e21367d
--- /dev/null
+++ b/beginners-docs/C/samples/helloWorld/README
@@ -0,0 +1,36 @@
+To build and install this program:
+
+./autogen.sh --prefix=/home/your_username/.local
+make install
+
+-------------
+Running the first line above creates the following files:
+
+aclocal.m4
+autom4te.cache
+config.log
+config.status
+configure
+helloWorld.desktop
+install-sh
+missing
+Makefile.in
+Makefile
+
+Running "make install", installs the application in /home/your_username/.local/bin
+and installs the helloWorld.desktop file in /home/your_username/.local/share/applications
+
+You can now run the application by typing "Hello World" in the Overview.
+
+----------------
+To uninstall, type:
+
+make uninstall
+
+----------------
+To create a tarball type:
+
+make distcheck
+
+This will create hello-world-1.0.tar.xz
+
diff --git a/beginners-docs/C/samples/helloWorld/autogen.sh b/beginners-docs/C/samples/helloWorld/autogen.sh
new file mode 100755
index 0000000..cb2570e
--- /dev/null
+++ b/beginners-docs/C/samples/helloWorld/autogen.sh
@@ -0,0 +1,18 @@
+#!/bin/sh
+
+set -e
+
+test -n "$srcdir" || srcdir=`dirname "$0"`
+test -n "$srcdir" || srcdir=.
+
+olddir=`pwd`
+cd "$srcdir"
+
+# This will run autoconf, automake, etc. for us
+autoreconf --force --install
+
+cd "$olddir"
+
+if test -z "$NOCONFIGURE"; then
+ "$srcdir"/configure "$@"
+fi
diff --git a/beginners-docs/C/samples/helloWorld/configure.ac
b/beginners-docs/C/samples/helloWorld/configure.ac
new file mode 100644
index 0000000..075cac0
--- /dev/null
+++ b/beginners-docs/C/samples/helloWorld/configure.ac
@@ -0,0 +1,5 @@
+# This file is processed by autoconf to create a configure script
+AC_INIT([Hello World], 1.0)
+AM_INIT_AUTOMAKE([1.10 no-define foreign dist-xz no-dist-gzip])
+AC_CONFIG_FILES([Makefile helloWorld.desktop])
+AC_OUTPUT
diff --git a/beginners-docs/C/samples/helloWorld/helloWorld b/beginners-docs/C/samples/helloWorld/helloWorld
new file mode 100755
index 0000000..3041dd1
--- /dev/null
+++ b/beginners-docs/C/samples/helloWorld/helloWorld
@@ -0,0 +1,42 @@
+#!/usr/bin/gjs
+
+const Lang = imports.lang;
+const Gtk = imports.gi.Gtk;
+
+const Application = new Lang.Class({
+ //A Class requires an explicit Name parameter. This is the Class Name.
+ Name: 'Application',
+
+ //create the application
+ _init: function() {
+ this.application = new Gtk.Application();
+
+ //connect to 'activate' and 'startup' signals to handlers.
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ //create the UI
+ _buildUI: function() {
+ this._window = new Gtk.ApplicationWindow({ application: this.application,
+ title: "Hello World!" });
+ this._window.set_default_size(200, 200);
+ this.label = new Gtk.Label({ label: "Hello World" });
+ this._window.add(this.label);
+ },
+
+ //handler for 'activate' signal
+ _onActivate: function() {
+ //show the window and all child widgets
+ this._window.show_all();
+ },
+
+ //handler for 'startup' signal
+ _onStartup: function() {
+ this._buildUI();
+ }
+});
+
+//run the application
+let app = new Application();
+app.application.run(ARGV);
diff --git a/beginners-docs/C/samples/helloWorld/helloWorld.desktop.in
b/beginners-docs/C/samples/helloWorld/helloWorld.desktop.in
new file mode 100644
index 0000000..a96d438
--- /dev/null
+++ b/beginners-docs/C/samples/helloWorld/helloWorld.desktop.in
@@ -0,0 +1,11 @@
+[Desktop Entry]
+Version=1.0
+Encoding=UTF-8
+Name=Hello World
+Comment=Say Hello
+Exec= prefix@/bin/helloWorld
+Icon=application-default-icon
+Terminal=false
+Type=Application
+StartupNotify=true
+Categories=GNOME;GTK;Utility;
diff --git a/beginners-docs/C/samples/hellognome.html b/beginners-docs/C/samples/hellognome.html
new file mode 100644
index 0000000..233fe87
--- /dev/null
+++ b/beginners-docs/C/samples/hellognome.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Hello, GNOME!</title>
+
+ <!-- Use JavaScript to show a greeting when someone clicks the button -->
+ <script type="text/javascript">
+ function greeting () {
+ document.getElementById ("greeting").innerHTML = ("O hai!");
+ }
+ </script>
+
+ <!-- Very basic CSS style using the GNOME font -->
+ <style type="text/css">
+ body {
+ font-face: Cantarell, sans-serif;
+ text-align: center; }
+ </style>
+
+ </head>
+ <body>
+ <br /> <br />
+ <button type="button" onclick="greeting()">Hello, GNOME!</button>
+
+ <!-- Empty H1 element gets filled in when the button is clicked -->
+ <h1 id="greeting"></h1>
+ </body>
+</html>
diff --git a/beginners-docs/C/samples/hellognome.js b/beginners-docs/C/samples/hellognome.js
new file mode 100644
index 0000000..396dca6
--- /dev/null
+++ b/beginners-docs/C/samples/hellognome.js
@@ -0,0 +1,59 @@
+#!/usr/bin/gjs
+
+const GLib = imports.gi.GLib;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+const Webkit = imports.gi.WebKit;
+
+const HelloGNOME = new Lang.Class ({
+ Name: 'Hello GNOME',
+
+ // Create the application itself
+ _init: function () {
+ this.application = new Gtk.Application ();
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents windows when active
+ _onActivate: function () {
+ this._window.present ();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function () {
+ this._buildUI ();
+ },
+
+ // Build the application's UI
+ _buildUI: function () {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow ({
+ application: this.application,
+ title: "Welcome to GNOME",
+ default_height: 200,
+ default_width: 400,
+ window_position: Gtk.WindowPosition.CENTER });
+
+ // Create a webview to show the web app
+ this._webView = new Webkit.WebView ();
+
+ // Put the web app into the webview
+ this._webView.load_uri (GLib.filename_to_uri (GLib.get_current_dir() +
+ "/hellognome.html", null));
+
+ // Put the webview into the window
+ this._window.add (this._webView);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+
+});
+
+// Run the application
+let app = new HelloGNOME ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/image.c b/beginners-docs/C/samples/image.c
new file mode 100644
index 0000000..a00fb1e
--- /dev/null
+++ b/beginners-docs/C/samples/image.c
@@ -0,0 +1,37 @@
+#include <gtk/gtk.h>
+
+
+
+static void
+activate (GtkApplication *app,
+ gpointer user_data)
+{
+ GtkWidget *window;
+ GtkWidget *image;
+
+ /*Create a window with a title and a default size*/
+ window = gtk_application_window_new (app);
+ gtk_window_set_title (GTK_WINDOW (window), "Welcome to GNOME");
+ gtk_window_set_default_size (GTK_WINDOW (window), 300, 300);
+
+ image = gtk_image_new_from_file ("gnome-image.png");
+
+ gtk_container_add (GTK_CONTAINER (window), GTK_WIDGET (image));
+
+ gtk_widget_show_all (GTK_WIDGET (window));
+}
+
+
+
+int
+main (int argc, char **argv)
+{
+ GtkApplication *app;
+ int status;
+
+ app = gtk_application_new ("org.gtk.example",G_APPLICATION_FLAGS_NONE);
+ g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
+ status = g_application_run (G_APPLICATION (app), argc, argv);
+ g_object_unref (app);
+ return status;
+}
diff --git a/beginners-docs/C/samples/image.js b/beginners-docs/C/samples/image.js
new file mode 100644
index 0000000..50be45b
--- /dev/null
+++ b/beginners-docs/C/samples/image.js
@@ -0,0 +1,60 @@
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const GLib = imports.gi.GLib;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const ImageExample = new Lang.Class ({
+ Name: 'Image Example',
+
+ /* Create the application itself
+ This boilerplate code is needed to build any GTK+ application. */
+ _init: function () {
+ this.application = new Gtk.Application ({
+ application_id: 'org.example.jsimage',
+ flags: Gio.ApplicationFlags.FLAGS_NONE
+ });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents windows when active
+ _onActivate: function () {
+ this._window.present ();
+ },
+
+ // Callback function for 'startup' signal initializes menus and builds the UI
+ _onStartup: function () {
+ this._buildUI ();
+ },
+
+
+
+
+ // Build the application's UI
+ _buildUI: function () {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow ({ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ title: "Welcome to GNOME",
+ default_height: 300,
+ default_width: 300 });
+
+ // Create the label
+ this.jsimage = new Gtk.Image ({file: "gnome-image.png"});
+ this._window.add (this.jsimage);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ }
+
+
+});
+
+// Run the application
+let app = new ImageExample ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/image.py b/beginners-docs/C/samples/image.py
new file mode 100644
index 0000000..640ca75
--- /dev/null
+++ b/beginners-docs/C/samples/image.py
@@ -0,0 +1,31 @@
+from gi.repository import Gtk
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ # create a window
+ def __init__(self, app):
+ Gtk.Window.__init__(self, application=app)
+ self.set_title("Welcome to GNOME")
+ self.set_default_size(300, 300)
+
+ # create an image
+ image = Gtk.Image()
+ # set the content of the image as the file filename.png
+ image.set_from_file("gnome-image.png")
+ # add the image to the window
+ self.add(image)
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/image.vala b/beginners-docs/C/samples/image.vala
new file mode 100644
index 0000000..a714171
--- /dev/null
+++ b/beginners-docs/C/samples/image.vala
@@ -0,0 +1,24 @@
+public class MyWindow : Gtk.ApplicationWindow {
+ internal MyWindow (MyApplication app) {
+ Object (application: app, title: "Welcome to GNOME");
+
+ var image = new Gtk.Image ();
+ image.set_from_file ("gnome-image.png");
+ this.add (image);
+ this.set_default_size (300, 300);
+ }
+}
+
+public class MyApplication : Gtk.Application {
+ protected override void activate () {
+ new MyWindow (this).show_all ();
+ }
+
+ internal MyApplication () {
+ Object (application_id: "org.example.MyApplication");
+ }
+}
+
+public int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/label.c b/beginners-docs/C/samples/label.c
new file mode 100644
index 0000000..d54e2e2
--- /dev/null
+++ b/beginners-docs/C/samples/label.c
@@ -0,0 +1,43 @@
+#include <gtk/gtk.h>
+
+
+
+static void
+activate (GtkApplication *app,
+ gpointer user_data)
+{
+ GtkWidget *window;
+ GtkWidget *label;
+
+ /*Create a window with a title and a default size*/
+ window = gtk_application_window_new (app);
+ gtk_window_set_application (GTK_WINDOW (window), GTK_APPLICATION (app));
+ gtk_window_set_title (GTK_WINDOW (window), "Welcome to GNOME");
+ gtk_window_set_default_size (GTK_WINDOW (window), 200,100);
+
+ /*Create a label and set its alignment. Setting the line wrap to TRUE makes
+ the label break lines if the text exceeds the widget's size. When set to
+ FALSE the text gets cut off by the edge of the widget*/
+ label = gtk_label_new ("Hello GNOME!");
+ gtk_label_set_justify (GTK_LABEL (label), GTK_JUSTIFY_CENTER);
+ gtk_label_set_line_wrap (GTK_LABEL (label), TRUE);
+
+ gtk_container_add (GTK_CONTAINER (window), GTK_WIDGET (label));
+
+ gtk_widget_show_all (GTK_WIDGET (window));
+}
+
+
+
+int
+main (int argc, char **argv)
+{
+ GtkApplication *app;
+ int status;
+
+ app = gtk_application_new ("org.gtk.example",G_APPLICATION_FLAGS_NONE);
+ g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
+ status = g_application_run (G_APPLICATION (app), argc, argv);
+ g_object_unref (app);
+ return status;
+}
diff --git a/beginners-docs/C/samples/label.js b/beginners-docs/C/samples/label.js
new file mode 100644
index 0000000..b6959d7
--- /dev/null
+++ b/beginners-docs/C/samples/label.js
@@ -0,0 +1,60 @@
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const GLib = imports.gi.GLib;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const LabelExample = new Lang.Class ({
+ Name: 'Label Example',
+
+ /* Create the application itself
+ This boilerplate code is needed to build any GTK+ application. */
+ _init: function () {
+ this.application = new Gtk.Application ({
+ application_id: 'org.example.jslabel',
+ flags: Gio.ApplicationFlags.FLAGS_NONE
+ });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents windows when active
+ _onActivate: function () {
+ this._window.present ();
+ },
+
+ // Callback function for 'startup' signal initializes menus and builds the UI
+ _onStartup: function () {
+ this._buildUI ();
+ },
+
+
+
+
+ // Build the application's UI
+ _buildUI: function () {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow ({ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ title: "Welcome to GNOME",
+ default_height: 100,
+ default_width: 200 });
+
+ // Create the label
+ this.label = new Gtk.Label ({label: "Hello GNOME!"});
+ this._window.add (this.label);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ }
+
+
+});
+
+// Run the application
+let app = new LabelExample ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/label.py b/beginners-docs/C/samples/label.py
new file mode 100644
index 0000000..ebca626
--- /dev/null
+++ b/beginners-docs/C/samples/label.py
@@ -0,0 +1,30 @@
+from gi.repository import Gtk
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ # constructor for a Gtk.ApplicationWindow
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="Welcome to GNOME", application=app)
+ self.set_default_size(200, 100)
+
+ # create a label
+ label = Gtk.Label()
+ # set the text of the label
+ label.set_text("Hello GNOME!")
+ # add the label to the window
+ self.add(label)
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/label.vala b/beginners-docs/C/samples/label.vala
new file mode 100644
index 0000000..6434771
--- /dev/null
+++ b/beginners-docs/C/samples/label.vala
@@ -0,0 +1,25 @@
+public class MyWindow : Gtk.ApplicationWindow {
+ internal MyWindow (MyApplication app) {
+ Object (application: app, title: "Welcome to GNOME");
+
+ var label = new Gtk.Label ("Hello GNOME!");
+
+ this.add (label);
+ this.set_default_size (200, 100);
+ this.show_all ();
+ }
+}
+
+public class MyApplication : Gtk.Application {
+ protected override void activate () {
+ new MyWindow (this).show ();
+ }
+
+ internal MyApplication () {
+ Object (application_id: "org.example.MyApplication");
+ }
+}
+
+public int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/linkbutton.c b/beginners-docs/C/samples/linkbutton.c
new file mode 100644
index 0000000..d157944
--- /dev/null
+++ b/beginners-docs/C/samples/linkbutton.c
@@ -0,0 +1,35 @@
+#include <gtk/gtk.h>
+
+static void
+activate (GtkApplication *app,
+ gpointer user_data)
+{
+ GtkWidget *window;
+ GtkWidget *linkbutton;
+
+ window = gtk_application_window_new (app);
+
+ gtk_window_set_title (GTK_WINDOW (window), "GNOME LinkButton");
+ gtk_window_set_default_size (GTK_WINDOW (window), 250, 50);
+
+ linkbutton = gtk_link_button_new ("Link to GNOME live!");
+ gtk_link_button_set_uri (GTK_LINK_BUTTON(linkbutton), "http://live.gnome.org";);
+
+ gtk_container_add (GTK_CONTAINER (window), GTK_WIDGET (linkbutton));
+
+ gtk_widget_show_all (window);
+}
+
+int
+main (int argc, char **argv)
+{
+ GtkApplication *app;
+ int status;
+
+ app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
+ g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
+ status = g_application_run (G_APPLICATION (app), argc, argv);
+ g_object_unref (app);
+
+ return status;
+}
diff --git a/beginners-docs/C/samples/linkbutton.js b/beginners-docs/C/samples/linkbutton.js
new file mode 100644
index 0000000..eb21319
--- /dev/null
+++ b/beginners-docs/C/samples/linkbutton.js
@@ -0,0 +1,55 @@
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const GLib = imports.gi.GLib;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const LinkButtonExample = new Lang.Class ({
+ Name: 'LinkButton Example',
+
+ // Create the application itself
+ _init: function () {
+ this.application = new Gtk.Application ({
+ application_id: 'org.example.jslinkbutton',
+ flags: Gio.ApplicationFlags.FLAGS_NONE
+ });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents window when active
+ _onActivate: function () {
+ this._window.present ();
+ },
+
+ // Callback function for 'startup' signal initializes menus and builds the UI
+ _onStartup: function () {
+ this._buildUI ();
+ },
+
+ // Build the application's UI
+ _buildUI: function () {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow ({ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ title: "GNOME LinkButton",
+ default_height: 50,
+ default_width: 250 });
+
+ // Create the LinkButton and have it link to live.gnome.org
+ this.LinkButton = new Gtk.LinkButton ({label: "Link to GNOME live!",
+ uri: "http://live.gnome.org"});
+ this._window.add (this.LinkButton);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+});
+
+// Run the application
+let app = new LinkButtonExample ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/linkbutton.py b/beginners-docs/C/samples/linkbutton.py
new file mode 100644
index 0000000..a098361
--- /dev/null
+++ b/beginners-docs/C/samples/linkbutton.py
@@ -0,0 +1,31 @@
+from gi.repository import Gtk
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ # a window
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="GNOME LinkButton", application=app)
+ self.set_default_size(250, 50)
+
+ # a linkbutton pointing to the given URI
+ button = Gtk.LinkButton(uri="http://live.gnome.org";)
+ # with given text
+ button.set_label("Link to GNOME live!")
+
+ # add the button to the window
+ self.add(button)
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup (self):
+ Gtk.Application.do_startup (self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/linkbutton.vala b/beginners-docs/C/samples/linkbutton.vala
new file mode 100644
index 0000000..02347af
--- /dev/null
+++ b/beginners-docs/C/samples/linkbutton.vala
@@ -0,0 +1,21 @@
+/* This is the application. */
+public class MyApplication : Gtk.Application {
+ /* Override the 'activate' signal of GLib.Application. */
+ protected override void activate () {
+
+ /* Create the window of this application and child widget and show all the things. */
+ var window = new Gtk.ApplicationWindow (this);
+ window.set_default_size (250, 50);
+ window.title = "GNOME LinkButton";
+
+ var linkbutton = new Gtk.LinkButton.with_label ("http://live.gnome.org";, "Link to GNOME
live!");
+
+ window.add (linkbutton);
+ window.show_all ();
+ }
+}
+
+/* main creates and runs the application. */
+public int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/menubar.c b/beginners-docs/C/samples/menubar.c
new file mode 100644
index 0000000..a350bf7
--- /dev/null
+++ b/beginners-docs/C/samples/menubar.c
@@ -0,0 +1,312 @@
+#include <gtk/gtk.h>
+
+
+
+/* Callback function for the "copy" action */
+static void
+copy_callback (GSimpleAction *simple,
+ GVariant *parameter,
+ gpointer user_data)
+{
+ g_print ("\"Copy\" activated\n");
+}
+
+
+
+/* Callback function for the "paste" action */
+static void
+paste_callback (GSimpleAction *simple,
+ GVariant *parameter,
+ gpointer user_data)
+{
+ g_print ("\"Paste\" activated\n");
+}
+
+
+
+/* Callback function for the "shape" action */
+static void
+shape_callback (GSimpleAction *simple,
+ GVariant *parameter,
+ gpointer user_data)
+{
+ /* We first gather the value of the GVariant instance with a string type.
+ * The overall goal here is to see if shape is set to line, triangle, etc,
+ * and put that value within the variable "answer".
+ */
+ const gchar *answer = g_variant_get_string (parameter, NULL);
+ g_printf ("Shape is set to %s.\n", answer);
+ /* Note that we set the state of the action */
+ g_simple_action_set_state (simple, parameter);
+}
+
+
+
+/* Callback function in which closes the about_dialog created below */
+static void
+on_close (GtkDialog *dialog,
+ gint response_id,
+ gpointer user_data)
+{
+ gtk_widget_destroy (GTK_WIDGET (dialog));
+}
+
+
+
+/* Callback function for the about action (see aboutdialog.c example) */
+static void
+about_callback (GSimpleAction *simple,
+ GVariant *parameter,
+ gpointer user_data)
+{
+ GtkWidget *about_dialog;
+
+ about_dialog = gtk_about_dialog_new ();
+
+ const gchar *authors[] = {"GNOME Documentation Team", NULL};
+ const gchar *documenters[] = {"GNOME Documentation Team", NULL};
+
+ /* Fill in the about_dialog with the desired information */
+ gtk_about_dialog_set_program_name (GTK_ABOUT_DIALOG (about_dialog), "AboutDialog Example");
+ gtk_about_dialog_set_copyright (GTK_ABOUT_DIALOG (about_dialog), "Copyright \xc2\xa9 2012 GNOME
Documentation Team");
+ gtk_about_dialog_set_authors (GTK_ABOUT_DIALOG (about_dialog), authors);
+ gtk_about_dialog_set_documenters (GTK_ABOUT_DIALOG (about_dialog), documenters);
+ gtk_about_dialog_set_website_label (GTK_ABOUT_DIALOG (about_dialog), "GNOME Developer Website");
+ gtk_about_dialog_set_website (GTK_ABOUT_DIALOG (about_dialog), "http://developer.gnome.org";);
+
+ /* The "response" signal is emitted when the dialog receives a delete event,
+ * therefore we connect that signal to the on_close callback function
+ * created above.
+ */
+ g_signal_connect (GTK_DIALOG (about_dialog), "response",
+ G_CALLBACK (on_close), NULL);
+
+ /* Show the about dialog */
+ gtk_widget_show (about_dialog);
+}
+
+
+
+static void
+activate (GtkApplication *app,
+ gpointer user_data)
+{
+ GtkWidget *window;
+
+ GSimpleAction *copy_action;
+ GSimpleAction *paste_action;
+ GSimpleAction *shape_action;
+ GSimpleAction *about_action;
+
+ /* Create a window with a title and a default size */
+ window = gtk_application_window_new (app);
+ gtk_window_set_title (GTK_WINDOW (window), "MenuBar Example");
+ gtk_window_set_default_size (GTK_WINDOW (window), 200, 200);
+
+ /* Begin creating the "copy" action.
+ * Note that it is an action without a state.
+ */
+ copy_action = g_simple_action_new ("copy", NULL);
+ /* Connected to a callback function */
+ g_signal_connect (copy_action, "activate", G_CALLBACK (copy_callback),
+ GTK_WINDOW (window));
+ /* Added to the window */
+ g_action_map_add_action (G_ACTION_MAP (window), G_ACTION (copy_action));
+
+ /* Begin creating the "paste" action.
+ * Note that it is an action without a state.
+ */
+ paste_action = g_simple_action_new ("paste", NULL);
+ /* Connect the action to a callback function */
+ g_signal_connect (paste_action, "activate", G_CALLBACK (paste_callback),
+ GTK_WINDOW (window));
+ /* Add it to the window */
+ g_action_map_add_action (G_ACTION_MAP (window), G_ACTION (paste_action));
+
+ /* Begin creating the "shape" action.
+ * Note that it is an action with a state.
+ * First we state that the parameter type of the simple action is a string.
+ * When using g_variant_type_new, it is appropriate to free the return value
+ * once you're done with it.
+ */
+ GVariantType *type_string = g_variant_type_new ("s");
+ /* parameters for the g_simple_action_new_stateful are: (name, parameter type,
+ * initial state).
+ */
+ shape_action = g_simple_action_new_stateful ("shape", type_string,
+ g_variant_new_string ("line"));
+ /* Connect the action to a callback function */
+ g_signal_connect (shape_action, "activate", G_CALLBACK (shape_callback),
+ GTK_WINDOW (window));
+ /* Add it to the window */
+ g_action_map_add_action (G_ACTION_MAP (window), G_ACTION (shape_action));
+ g_variant_type_free (type_string);
+
+ /* Begin creating the "about" action.
+ * Note that it is an action without a state.
+ */
+ about_action = g_simple_action_new ("about", NULL);
+ /* Connect the action to a callback function */
+ g_signal_connect (about_action, "activate", G_CALLBACK (about_callback),
+ GTK_WINDOW (window));
+ /* Add it to the window */
+ g_action_map_add_action (G_ACTION_MAP (window), G_ACTION (about_action));
+
+ gtk_widget_show_all (window);
+}
+
+
+
+/* Callback function for the "new" action */
+static void
+new_callback (GSimpleAction *simple,
+ GVariant *parameter,
+ gpointer user_data)
+{
+ g_print ("You clicked \"New\"\n");
+}
+
+
+
+/* Callback function for the "quit" action */
+static void
+quit_callback (GSimpleAction *simple,
+ GVariant *parameter,
+ gpointer user_data)
+{
+ GApplication *application = user_data;
+
+ g_print ("You clicked \"Quit\"\n");
+ g_application_quit (application);
+}
+
+
+
+/* Callback function for the "state" action */
+static void
+state_callback (GSimpleAction *simple,
+ GVariant *parameter,
+ gpointer user_data)
+{
+ /* The two possibilies in this case for the "answer" variable are either
+ * "on" or "off".
+ */
+ const gchar *answer = g_variant_get_string (parameter, NULL);
+ /* We print the information to the user */
+ g_printf ("State is set to %s.\n", answer);
+ /* Note that we set the state of the action */
+ g_simple_action_set_state (simple, parameter);
+}
+
+
+
+/* Callback function for the "awesome" action */
+static void
+awesome_callback (GSimpleAction *simple,
+ GVariant *parameter,
+ gpointer user_data)
+{
+ GVariant *action_state = g_action_get_state (G_ACTION (simple));
+ gboolean active = g_variant_get_boolean (action_state);
+ GVariant *new_state = g_variant_new_boolean (!active);
+ /* Set the new state for the action.
+ * (Keeps track of whether it was last checked or unchecked).
+ */
+ g_simple_action_set_state (simple, new_state);
+
+ if (active)
+ g_print ("You unchecked \"Awesome\"\n");
+ else
+ g_print ("You checked \"Awesome\"\n");
+}
+
+
+
+/* Startup function for the menu we are creating in this sample */
+static void
+startup (GApplication *app,
+ gpointer user_data)
+{
+ /* Initialize variables */
+ GSimpleAction *new_action;
+ GSimpleAction *quit_action;
+ GSimpleAction *state_action;
+ GSimpleAction *awesome_action;
+
+ GtkBuilder *builder;
+
+ GError **error;
+
+ /* Begin creating the "new" action.
+ * Note that it is an action without a state.
+ */
+ new_action = g_simple_action_new ("new", NULL);
+ g_signal_connect (new_action, "activate", G_CALLBACK (new_callback), app);
+ /* It is added to the overall application */
+ g_action_map_add_action (G_ACTION_MAP (app), G_ACTION (new_action));
+
+ /* Begin creating the "quit" action.
+ * Note that it is an action without a state.
+ */
+ quit_action = g_simple_action_new ("quit", NULL);
+ g_signal_connect (quit_action, "activate", G_CALLBACK (quit_callback), app);
+ /* It is added to the overall application */
+ g_action_map_add_action (G_ACTION_MAP (app), G_ACTION (quit_action));
+
+ /* Begin creating the "state" action.
+ * Note that it is an action with a state.
+ */
+ GVariantType *type_string2 = g_variant_type_new ("s");
+ state_action = g_simple_action_new_stateful ("state", type_string2,
+ g_variant_new_string ("off"));
+ g_signal_connect (state_action, "activate", G_CALLBACK (state_callback), app);
+ /* It is added to the overall application */
+ g_action_map_add_action (G_ACTION_MAP (app), G_ACTION (state_action));
+ g_variant_type_free (type_string2);
+
+ /* Begin creating the "awesome" action.
+ * Note that it is an action with a state.
+ */
+ awesome_action = g_simple_action_new_stateful ("awesome", NULL, g_variant_new_boolean (FALSE));
+ g_signal_connect (awesome_action, "activate", G_CALLBACK (awesome_callback), app);
+ /* It is added to the overall application */
+ g_action_map_add_action (G_ACTION_MAP (app), G_ACTION (awesome_action));
+
+ /* A builder to add the User Interface designed with GLADE to the grid: */
+ builder = gtk_builder_new ();
+ /* Get the file (if it is there):
+ * Note: you must make sure that the file is in the current directory for
+ * this to work. The function used here returns a value within our variable
+ * "error", and it is equal to zero if an error is indeed found.
+ */
+ gtk_builder_add_from_file (builder, "menubar.ui", error);
+ if (error == 0) {
+ g_print ("File not found.\n");
+ }
+
+ /* Extract the menubar */
+ GObject *menubar = gtk_builder_get_object (builder, "menubar");
+ gtk_application_set_menubar (GTK_APPLICATION (app), G_MENU_MODEL (menubar));
+
+ /* Extract the appmenu */
+ GObject *appmenu = gtk_builder_get_object (builder, "appmenu");
+ gtk_application_set_app_menu (GTK_APPLICATION (app), G_MENU_MODEL (appmenu));
+}
+
+
+
+/* Startup function for the application */
+int
+main (int argc, char **argv)
+{
+ GtkApplication *app;
+ int status;
+
+ app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
+ g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
+ g_signal_connect (app, "startup", G_CALLBACK (startup), NULL);
+ status = g_application_run (G_APPLICATION (app), argc, argv);
+ g_object_unref (app);
+
+ return status;
+}
diff --git a/beginners-docs/C/samples/menubar.py b/beginners-docs/C/samples/menubar.py
new file mode 100644
index 0000000..ae63cc4
--- /dev/null
+++ b/beginners-docs/C/samples/menubar.py
@@ -0,0 +1,159 @@
+from gi.repository import Gtk
+from gi.repository import GLib
+from gi.repository import Gio
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="MenuBar Example", application=app)
+ self.set_default_size(200, 200)
+
+ # action without a state created (name, parameter type)
+ copy_action = Gio.SimpleAction.new("copy", None)
+ # connected with the callback function
+ copy_action.connect("activate", self.copy_callback)
+ # added to the window
+ self.add_action(copy_action)
+
+ # action without a state created (name, parameter type)
+ paste_action = Gio.SimpleAction.new("paste", None)
+ # connected with the callback function
+ paste_action.connect("activate", self.paste_callback)
+ # added to the window
+ self.add_action(paste_action)
+
+ # action with a state created (name, parameter type, initial state)
+ shape_action = Gio.SimpleAction.new_stateful("shape", GLib.VariantType.new('s'),
GLib.Variant.new_string('line'))
+ # connected to the callback function
+ shape_action.connect("activate", self.shape_callback)
+ # added to the window
+ self.add_action(shape_action)
+
+ # action with a state created
+ about_action = Gio.SimpleAction.new("about", None)
+ # action connected to the callback function
+ about_action.connect("activate", self.about_callback)
+ # action added to the application
+ self.add_action(about_action)
+
+ # callback function for copy_action
+ def copy_callback(self, action, parameter):
+ print "\"Copy\" activated"
+
+ # callback function for paste_action
+ def paste_callback(self, action, parameter):
+ print "\"Paste\" activated"
+
+ # callback function for shape_action
+ def shape_callback(self, action, parameter):
+ print "Shape is set to", parameter.get_string()
+ # Note that we set the state of the action!
+ action.set_state(parameter)
+
+ # callback function for about (see the AboutDialog example)
+ def about_callback(self, action, parameter):
+ # a Gtk.AboutDialog
+ aboutdialog = Gtk.AboutDialog()
+
+ # lists of authors and documenters (will be used later)
+ authors = ["GNOME Documentation Team"]
+ documenters = ["GNOME Documentation Team"]
+
+ # we fill in the aboutdialog
+ aboutdialog.set_program_name("MenuBar Example")
+ aboutdialog.set_copyright("Copyright \xc2\xa9 2012 GNOME Documentation Team")
+ aboutdialog.set_authors(authors)
+ aboutdialog.set_documenters(documenters)
+ aboutdialog.set_website("http://developer.gnome.org";)
+ aboutdialog.set_website_label("GNOME Developer Website")
+
+ # to close the aboutdialog when "close" is clicked we connect the
+ # "response" signal to on_close
+ aboutdialog.connect("response", self.on_close)
+ # show the aboutdialog
+ aboutdialog.show()
+
+ # a callback function to destroy the aboutdialog
+ def on_close(self, action, parameter):
+ action.destroy()
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ # FIRST THING TO DO: do_startup()
+ Gtk.Application.do_startup(self)
+
+ # action without a state created
+ new_action = Gio.SimpleAction.new("new", None)
+ # action connected to the callback function
+ new_action.connect("activate", self.new_callback)
+ # action added to the application
+ self.add_action(new_action)
+
+ # action without a state created
+ quit_action = Gio.SimpleAction.new("quit", None)
+ # action connected to the callback function
+ quit_action.connect("activate", self.quit_callback)
+ # action added to the application
+ self.add_action(quit_action)
+
+ # action with a state created
+ state_action = Gio.SimpleAction.new_stateful("state", GLib.VariantType.new('s'),
GLib.Variant.new_string('off'))
+ # action connected to the callback function
+ state_action.connect("activate", self.state_callback)
+ # action added to the application
+ self.add_action(state_action)
+
+ # action with a state created
+ awesome_action = Gio.SimpleAction.new_stateful("awesome", None, GLib.Variant.new_boolean(False))
+ # action connected to the callback function
+ awesome_action.connect("activate", self.awesome_callback)
+ # action added to the application
+ self.add_action(awesome_action)
+
+ # a builder to add the UI designed with Glade to the grid:
+ builder = Gtk.Builder()
+ # get the file (if it is there)
+ try:
+ builder.add_from_file("menubar.ui")
+ except:
+ print "file not found"
+ sys.exit()
+
+ # we use the method Gtk.Application.set_menubar(menubar) to add the menubar
+ # and the menu to the application (Note: NOT the window!)
+ self.set_menubar(builder.get_object("menubar"))
+ self.set_app_menu(builder.get_object("appmenu"))
+
+ # callback function for new
+ def new_callback(self, action, parameter):
+ print "You clicked \"New\""
+
+ # callback function for quit
+ def quit_callback(self, action, parameter):
+ print "You clicked \"Quit\""
+ sys.exit()
+
+ # callback function for state
+ def state_callback(self, action, parameter):
+ print "State is set to", parameter.get_string()
+ action.set_state(parameter)
+
+ # callback function for awesome
+ def awesome_callback(self, action, parameter):
+ action.set_state(GLib.Variant.new_boolean(not action.get_state()))
+ if action.get_state().get_boolean() is True:
+ print "You checked \"Awesome\""
+ else:
+ print "You unchecked \"Awesome\""
+
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/menubar.ui b/beginners-docs/C/samples/menubar.ui
new file mode 100644
index 0000000..f515006
--- /dev/null
+++ b/beginners-docs/C/samples/menubar.ui
@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+ <menu id="menubar">
+ <submenu>
+ <attribute name="label">File</attribute>
+ <section>
+ <item>
+ <attribute name="label">New</attribute>
+ <attribute name="action">app.new</attribute>
+ </item>
+ <item>
+ <attribute name="label">Quit</attribute>
+ <attribute name="action">app.quit</attribute>
+ </item>
+ </section>
+ </submenu>
+ <submenu>
+ <attribute name="label">Edit</attribute>
+ <section>
+ <item>
+ <attribute name="label">Copy</attribute>
+ <attribute name="action">win.copy</attribute>
+ </item>
+ <item>
+ <attribute name="label">Paste</attribute>
+ <attribute name="action">win.paste</attribute>
+ </item>
+ </section>
+ </submenu>
+ <submenu>
+ <attribute name="label">Choices</attribute>
+ <submenu>
+ <attribute name="label">Shapes</attribute>
+ <section>
+ <item>
+ <attribute name="label">Line</attribute>
+ <attribute name="action">win.shape</attribute>
+ <attribute name="target">line</attribute>
+ </item>
+ <item>
+ <attribute name="label">Triangle</attribute>
+ <attribute name="action">win.shape</attribute>
+ <attribute name="target">triangle</attribute>
+ </item>
+ <item>
+ <attribute name="label">Square</attribute>
+ <attribute name="action">win.shape</attribute>
+ <attribute name="target">square</attribute>
+ </item>
+ <item>
+ <attribute name="label">Polygon</attribute>
+ <attribute name="action">win.shape</attribute>
+ <attribute name="target">polygon</attribute>
+ </item>
+ <item>
+ <attribute name="label">Circle</attribute>
+ <attribute name="action">win.shape</attribute>
+ <attribute name="target">circle</attribute>
+ </item>
+ </section>
+ </submenu>
+ <section>
+ <item>
+ <attribute name="label">On</attribute>
+ <attribute name="action">app.state</attribute>
+ <attribute name="target">on</attribute>
+ </item>
+ <item>
+ <attribute name="label">Off</attribute>
+ <attribute name="action">app.state</attribute>
+ <attribute name="target">off</attribute>
+ </item>
+ </section>
+ <section>
+ <item>
+ <attribute name="label">Awesome</attribute>
+ <attribute name="action">app.awesome</attribute>
+ </item>
+ </section>
+ </submenu>
+ <submenu>
+ <attribute name="label">Help</attribute>
+ <section>
+ <item>
+ <attribute name="label">About</attribute>
+ <attribute name="action">win.about</attribute>
+ </item>
+ </section>
+ </submenu>
+ </menu>
+ <menu id="appmenu">
+ <section>
+ <item>
+ <attribute name="label">New</attribute>
+ <attribute name="action">app.new</attribute>
+ </item>
+ <item>
+ <attribute name="label">Quit</attribute>
+ <attribute name="action">app.quit</attribute>
+ </item>
+ </section>
+ </menu>
+</interface>
diff --git a/beginners-docs/C/samples/menubar.vala b/beginners-docs/C/samples/menubar.vala
new file mode 100644
index 0000000..78c2808
--- /dev/null
+++ b/beginners-docs/C/samples/menubar.vala
@@ -0,0 +1,99 @@
+public class MyWindow : Gtk.ApplicationWindow {
+
+ /* Callback functions for the window actions. */
+ void copy_cb (SimpleAction action, Variant? parameter) {
+ print ("\"Copy\" activated\n");
+ }
+
+ void paste_cb (SimpleAction action, Variant? parameter) {
+ print ("\"Paste\" activated\n");
+ }
+
+ void shape_cb (SimpleAction action, Variant? parameter) {
+ print ("shape is set to %s\n", parameter.get_string(null));
+ action.set_state (parameter);
+ }
+
+ /* Create the window actions. */
+ const ActionEntry[] actions = {
+ /*{ "action name", cb to connect to "activate" signal, parameter type,
+ initial state, cb to connect to "change-state" signal } */
+ { "copy", copy_cb },
+ { "paste", paste_cb },
+ { "shape", shape_cb, "s", "'line'"}
+ };
+
+ internal MyWindow (MyApplication app) {
+ Object (application: app, title: "MenuBar Example");
+ this.set_default_size (200, 200);
+
+ /* Setup window actions. */
+ this.add_action_entries (actions, this);
+ }
+}
+
+class MyApplication: Gtk.Application {
+ protected override void activate () {
+ new MyWindow (this).show ();
+ }
+
+ /* Callback functions for the application actions. */
+ void new_cb (SimpleAction action, Variant? parameter) {
+ //new MyWindow (this).show ();
+ print ("You clicked \"New\"\n");
+ }
+
+ void quit_cb (SimpleAction action, Variant? parameter) {
+ print ("You clicked \"Quit\"\n");
+ //this.quit (); **Bug #674090**
+ }
+
+ void awesome_cb (SimpleAction action, Variant? parameter) {
+ var active = action.get_state ().get_boolean ();
+ action.set_state (new Variant.boolean (!active));
+ if (active)
+ print ("You unchecked \"Awesome\"\n");
+ else
+ print ("You checked \"Awesome\"\n");
+ }
+
+ void state_cb (SimpleAction action, Variant? parameter) {
+ print ("state is set to %s\n", parameter.get_string(null));
+ action.set_state (parameter);
+ }
+
+ /* Create the application actions. */
+ const ActionEntry[] actions = {
+ { "new", new_cb },
+ { "quit", quit_cb },
+ { "awesome", awesome_cb, null, "false" },
+ { "state", state_cb, "s", "'off'" }
+ };
+
+ protected override void startup () {
+ base.startup ();
+
+ /* Setup application actions. */
+ this.add_action_entries (actions, this);
+
+ /* Setup menubar and app_menu. */
+ /* Get the UI file. */
+ var builder = new Gtk.Builder ();
+ try {
+ builder.add_from_file ("menubar.ui");
+ } catch (Error e) {
+ error ("Unable to load file: %s", e.message);
+ }
+
+ /* Get the menubar from the builder. */
+ this.menubar = builder.get_object ("menubar") as MenuModel;
+
+ /* Get the app_menu from the builder. */
+ this.app_menu = builder.get_object ("appmenu") as MenuModel;
+ }
+}
+
+/* main creates and runs the application. */
+public int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/menubar_basis.py b/beginners-docs/C/samples/menubar_basis.py
new file mode 100644
index 0000000..1394854
--- /dev/null
+++ b/beginners-docs/C/samples/menubar_basis.py
@@ -0,0 +1,35 @@
+from gi.repository import Gtk
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="MenuBar Example", application=app)
+ self.set_default_size(200, 200)
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+ # a builder to add the UI designed with Glade to the grid:
+ builder = Gtk.Builder()
+ # get the file (if it is there)
+ try:
+ builder.add_from_file("menubar_basis.ui")
+ except:
+ print "file not found"
+ sys.exit()
+
+ # we use the method Gtk.Application.set_menubar(menubar) to add the menubar
+ # to the application (Note: NOT the window!)
+ self.set_menubar(builder.get_object("menubar"))
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/menubar_basis.ui b/beginners-docs/C/samples/menubar_basis.ui
new file mode 100644
index 0000000..131fe04
--- /dev/null
+++ b/beginners-docs/C/samples/menubar_basis.ui
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+ <menu id="menubar">
+ <submenu>
+ <attribute name="label">File</attribute>
+ </submenu>
+ <submenu>
+ <attribute name="label">Edit</attribute>
+ </submenu>
+ <submenu>
+ <attribute name="label">Choices</attribute>
+ </submenu>
+ <submenu>
+ <attribute name="label">Help</attribute>
+ </submenu>
+ </menu>
+</interface>
diff --git a/beginners-docs/C/samples/menubar_basis.vala b/beginners-docs/C/samples/menubar_basis.vala
new file mode 100644
index 0000000..f00c9f0
--- /dev/null
+++ b/beginners-docs/C/samples/menubar_basis.vala
@@ -0,0 +1,33 @@
+public class MyWindow : Gtk.ApplicationWindow {
+ internal MyWindow (MyApplication app) {
+ Object (application: app, title: "MenuBar Example");
+ this.set_default_size (200, 200);
+ }
+}
+
+class MyApplication: Gtk.Application {
+ protected override void activate () {
+ new MyWindow (this).show ();
+ }
+ protected override void startup () {
+ base.startup ();
+
+ /* Setup menubar. */
+ /* Get the UI file. */
+ var builder = new Gtk.Builder ();
+ try {
+ builder.add_from_file ("menubar_basis.ui");
+ /* Handle the exception. */
+ } catch (Error e) {
+ error ("Unable to load file: %s", e.message);
+ }
+
+ /* Get the menubar from the builder. */
+ this.menubar = builder.get_object ("menubar") as MenuModel;
+ }
+}
+
+/* main creates and runs the application. */
+public int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/menubutton.js b/beginners-docs/C/samples/menubutton.js
new file mode 100644
index 0000000..98d253d
--- /dev/null
+++ b/beginners-docs/C/samples/menubutton.js
@@ -0,0 +1,106 @@
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const GLib = imports.gi.GLib;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const Application = new Lang.Class ({
+ Name: 'Application',
+
+ //create the application
+ _init: function() {
+ this.application = new Gtk.Application ({ application_id: 'org.example.myapp',
+ flags: Gio.ApplicationFlags.FLAGS_NONE });
+
+ //connect to 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ //create the UI (in this case it's just the ApplicationWindow)
+ _buildUI: function() {
+ this._window = new Gtk.ApplicationWindow({ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ title: "Welcome to GNOME" });
+ this._window.set_default_size(600, 400);
+ this.grid = new Gtk.Grid();
+ this._window.add(this.grid);
+
+
+ this._menuButton = new Gtk.MenuButton();
+ this.grid.attach(this._menuButton, 0, 0, 1, 1 );
+ this.menu = new Gtk.Menu.new_from_model(this.menuModel);
+
+ this.menu.show();
+ this._menuButton.set_menu(this.menu);
+ this._menuButton.set_size_request(80, 35);
+ this._menuButton.show();
+
+ this._window.show_all();
+ },
+
+ _showNew: function() {
+ print("New Menu. It doesn't do anything. It is only a demonstration.");
+ },
+
+ _showAbout: function() {
+ print("No AboutDialog here. This is only a demonstration.");
+ },
+
+ //create the menu items and connect the signals to the callback functions.
+ _initMenus: function() {
+ let newAction = new Gio.SimpleAction({ name: 'new' });
+ newAction.connect('activate', Lang.bind(this,
+ function() {
+ this._showNew();
+ }));
+ this.application.add_action(newAction);
+
+ let aboutAction = new Gio.SimpleAction({ name: 'about' });
+ aboutAction.connect('activate', Lang.bind(this,
+ function() {
+ this._showAbout();
+ }));
+ this.application.add_action(aboutAction);
+
+ let quitAction = new Gio.SimpleAction({ name: 'quit' });
+ quitAction.connect('activate', Lang.bind(this,
+ function() {
+ this._window.destroy();
+ }));
+ this.application.add_action(quitAction);
+
+ this.menuModel = new Gio.Menu();
+
+ this.menuItemNew = Gio.MenuItem.new("New", 'app.new');
+ this.menuItemAbout = Gio.MenuItem.new("About", 'app.about');
+ this.fileMenuItem = Gio.MenuItem.new("Other", null);
+
+ this.menuModel.append_item(this.menuItemNew);
+ this.menuModel.append_item(this.menuItemAbout);
+
+ //submenu
+ this.subMenu = new Gio.Menu();
+ this.fileMenuItem.set_submenu(this.subMenu);
+ this.menuItemQuit = Gio.MenuItem.new("Quit", 'app.quit');
+ this.subMenu.append_item(this.menuItemQuit);
+ this.menuModel.append_item(this.fileMenuItem);
+ },
+
+ //callback function for 'activate' signal
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ //callback function for 'startup' signal
+ _onStartup: function() {
+ //You must call _initMenus() before calling _buildUI().
+ this._initMenus();
+ this._buildUI();
+ }
+});
+
+//run the application
+let app = new Application();
+app.application.run(ARGV);
diff --git a/beginners-docs/C/samples/menubutton.py b/beginners-docs/C/samples/menubutton.py
new file mode 100644
index 0000000..63fbbfe
--- /dev/null
+++ b/beginners-docs/C/samples/menubutton.py
@@ -0,0 +1,72 @@
+from gi.repository import Gtk
+from gi.repository import Gio
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="Menubutton Example", application=app)
+ self.set_default_size(600, 400)
+
+ grid = Gtk.Grid()
+
+ # a menubutton
+ menubutton = Gtk.MenuButton()
+ menubutton.set_size_request(80, 35)
+
+ grid.attach(menubutton, 0, 0, 1, 1)
+
+ # a menu with two actions
+ menumodel = Gio.Menu()
+ menumodel.append("New", "app.new")
+ menumodel.append("About", "win.about")
+
+ # a submenu with one action for the menu
+ submenu = Gio.Menu()
+ submenu.append("Quit", "app.quit")
+ menumodel.append_submenu("Other", submenu)
+
+ # the menu is set as the menu of the menubutton
+ menubutton.set_menu_model(menumodel)
+
+ # the action related to the window (about)
+ about_action = Gio.SimpleAction.new("about", None)
+ about_action.connect("activate", self.about_callback)
+ self.add_action(about_action)
+
+ self.add(grid)
+
+ # callback for "about"
+ def about_callback(self, action, parameter):
+ print "You clicked \"About\""
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+ # the actions related to the application
+ new_action = Gio.SimpleAction.new("new", None)
+ new_action.connect("activate", self.new_callback)
+ self.add_action(new_action)
+
+ quit_action = Gio.SimpleAction.new("quit", None)
+ quit_action.connect("activate", self.quit_callback)
+ self.add_action(quit_action)
+
+ # callback functions for the actions related to the application
+ def new_callback(self, action, parameter):
+ print "You clicked \"New\""
+
+ def quit_callback(self, action, parameter):
+ print "You clicked \"Quit\""
+ self.quit()
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/menubutton.vala b/beginners-docs/C/samples/menubutton.vala
new file mode 100644
index 0000000..fd37008
--- /dev/null
+++ b/beginners-docs/C/samples/menubutton.vala
@@ -0,0 +1,65 @@
+public class MyWindow : Gtk.ApplicationWindow {
+
+ internal MyWindow (MyApplication app) {
+ Object (application: app, title: "MenuButton Example");
+ this.set_default_size (600, 400);
+ var grid = new Gtk.Grid ();
+
+ var menubutton = new Gtk.MenuButton();
+ menubutton.set_size_request (80, 35);
+
+ var menumodel = new Menu ();
+ menumodel.append ("New", "app.new");
+ menumodel.append ("About", "win.about");
+
+ /* We create the last item as a MenuItem, so that
+ * a submenu can be appended to this menu item.
+ */
+ var submenu = new Menu ();
+ menumodel.append_submenu ("Other", submenu);
+ submenu.append ("Quit", "app.quit");
+ menubutton.set_menu_model (menumodel);
+
+ var about_action = new SimpleAction ("about", null);
+ about_action.activate.connect (this.about_cb);
+ this.add_action (about_action);
+
+ this.add(grid);
+ grid.attach(menubutton, 0, 0, 1, 1);
+ }
+
+ void about_cb (SimpleAction simple, Variant? parameter) {
+ print ("You clicked \"About\"\n");
+ }
+}
+
+public class MyApplication : Gtk.Application {
+ protected override void activate () {
+ new MyWindow (this).show_all ();
+ }
+
+ internal MyApplication () {
+ Object (application_id: "org.example.MyApplication");
+ }
+
+ /* Override the 'startup' signal of GLib.Application. */
+ protected override void startup () {
+ base.startup ();
+
+ var new_action = new SimpleAction ("new", null);
+ new_action.activate.connect (this.new_cb);
+ this.add_action (new_action);
+
+ var quit_action = new SimpleAction ("quit", null);
+ quit_action.activate.connect (this.quit);
+ this.add_action (quit_action);
+ }
+
+ void new_cb (SimpleAction simple, Variant? parameter) {
+ print ("You clicked \"New\"\n");
+ }
+}
+
+public int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/messagedialog.c b/beginners-docs/C/samples/messagedialog.c
new file mode 100644
index 0000000..735fdb7
--- /dev/null
+++ b/beginners-docs/C/samples/messagedialog.c
@@ -0,0 +1,170 @@
+#include <gtk/gtk.h>
+
+
+
+/* Callback function in which reacts to the "response" signal from the user in
+ * the message dialog window.
+ * This function is used to interact with the user in the terminal.
+ */
+static void
+on_response (GtkDialog *dialog,
+ gint response_id,
+ gpointer user_data)
+{
+ /* If the button clicked gives response OK (response_id being -5) */
+ if (response_id == GTK_RESPONSE_OK)
+ g_print ("*boom*\n");
+
+ /* If the button clicked gives response CANCEL (response_id being -6) */
+ else if (response_id == GTK_RESPONSE_CANCEL)
+ g_print ("good choice\n");
+
+ /* If the message dialog is destroyed (for example by pressing escape) */
+ else if (response_id == GTK_RESPONSE_DELETE_EVENT)
+ g_print ("dialog closed or cancelled\n");
+
+ /* Destroy the dialog after one of the above actions have taken place */
+ gtk_widget_destroy (GTK_WIDGET (dialog));
+
+}
+
+
+
+/* Callback function for the response signal "activate" related to the SimpleAction
+ * message_action.
+ * This function is used to cause the message dialog window to popup.
+ */
+static void
+message_cb (GSimpleAction *simple,
+ GVariant *parameter,
+ gpointer user_data)
+{
+ /* the parent variable in this case represents the window */
+ GtkWidget *message_dialog;
+ GtkWindow *parent = user_data;
+
+ /* Create a new message dialog, and set the parameters as follows:
+ * Dialog Flags - make the constructed dialog modal
+ * (modal windows prevent interaction with other windows in the application)
+ * Message Type - nonfatal warning message
+ * Buttons Type - use the ok and cancel buttons
+ * message_format - text that you want the user to see in the window
+ */
+ message_dialog = gtk_message_dialog_new (parent, GTK_DIALOG_MODAL,
+ GTK_MESSAGE_WARNING,
+ GTK_BUTTONS_OK_CANCEL,
+ "This action will cause the universe to stop existing.");
+
+ gtk_widget_show_all (message_dialog);
+
+ g_signal_connect (GTK_DIALOG (message_dialog), "response",
+ G_CALLBACK (on_response), NULL);
+
+}
+
+
+
+static void
+activate (GtkApplication *app,
+ gpointer user_data)
+{
+ GtkWidget *window;
+ GtkWidget *label;
+
+ GSimpleAction *message_action;
+
+ /* Create a window with a title and a default size */
+ window = gtk_application_window_new (app);
+ gtk_window_set_title (GTK_WINDOW (window), "GMenu Example");
+ gtk_window_set_default_size (GTK_WINDOW (window), 400, 200);
+
+ /* Create a label and add it to the window */
+ label = gtk_label_new ("This application goes boom!");
+ gtk_container_add (GTK_CONTAINER (window), label);
+
+ /* Create a new simple action, giving it a NULL parameter type. It will
+ * always be NULL for actions invoked from a menu. (e.g clicking on an "ok"
+ * or "cancel" button)
+ */
+ message_action = g_simple_action_new ("message", NULL);
+
+ /* Connect the "activate" signal to the appropriate callback function */
+ g_signal_connect (message_action, "activate", G_CALLBACK (message_cb),
+ GTK_WINDOW (window));
+
+ /* Adds the message_action to the overall action map. An Action map is an
+ * interface that contains a number of named GAction instances
+ * (such as message_action)
+ */
+ g_action_map_add_action (G_ACTION_MAP (window), G_ACTION (message_action));
+
+ gtk_widget_show_all (window);
+}
+
+
+
+/* Callback function for the response signal "activate" from the "quit" action
+ * in the function directly below.
+ */
+static void
+quit_cb (GSimpleAction *simple,
+ GVariant *parameter,
+ gpointer user_data)
+{
+ GApplication *application = user_data;
+
+ g_application_quit (application);
+}
+
+
+
+/* Startup function for the menu we are creating in this sample */
+static void
+startup (GApplication *app,
+ gpointer user_data)
+{
+ GMenu *menu;
+ GSimpleAction *quit_action;
+
+ /* Initialize the GMenu, and add a menu item with label "Message" and action
+ * "win.message". Also add another menu item with label "Quit" and action
+ * "app.quit"
+ */
+ menu = g_menu_new ();
+ g_menu_append (menu, "Message", "win.message");
+ g_menu_append (menu, "Quit", "app.quit");
+
+ /* Create a new simple action for the application. (In this case it is the
+ * "quit" action.
+ */
+ quit_action = g_simple_action_new ("quit", NULL);
+
+ /* Ensure that the menu we have just created is set for the overall application */
+ gtk_application_set_app_menu (GTK_APPLICATION (app), G_MENU_MODEL (menu));
+
+ g_signal_connect (quit_action,
+ "activate",
+ G_CALLBACK (quit_cb),
+ app);
+
+ g_action_map_add_action (G_ACTION_MAP (app), G_ACTION (quit_action));
+
+}
+
+
+
+/* Startup function for the application */
+int
+main (int argc, char **argv)
+{
+ GtkApplication *app;
+ int status;
+
+ app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
+ g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
+ g_signal_connect (app, "startup", G_CALLBACK (startup), NULL);
+ status = g_application_run (G_APPLICATION (app), argc, argv);
+ g_object_unref (app);
+
+ return status;
+}
diff --git a/beginners-docs/C/samples/messagedialog.js b/beginners-docs/C/samples/messagedialog.js
new file mode 100644
index 0000000..8dc202c
--- /dev/null
+++ b/beginners-docs/C/samples/messagedialog.js
@@ -0,0 +1,122 @@
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const MessageDialogExample = new Lang.Class ({
+ Name: 'MessageDialog Example',
+
+ // Create the application itself
+ _init: function () {
+ this.application = new Gtk.Application ({
+ application_id: 'org.example.jsmessagedialog',
+ flags: Gio.ApplicationFlags.FLAGS_NONE });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents windows when active
+ _onActivate: function () {
+ this._window.present ();
+ },
+
+ // Callback function for 'startup' signal initializes menus and builds the UI
+ _onStartup: function () {
+ this._initMenus();
+ this._buildUI ();
+ },
+
+
+
+ // Build the application's UI
+ _buildUI: function () {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow ({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ title: "Gtk.MessageDialog Example",
+ default_height: 200,
+ default_width: 400 });
+
+ // Create a silly warning message and add it to the window
+ this.warningLabel = new Gtk.Label ({
+ label: "This application goes boom! (Not really.)"});
+ this._window.add (this.warningLabel);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+
+
+
+ // Build the application menu, including the button that calls the dialog
+ _initMenus: function() {
+ let menu = new Gio.Menu();
+ menu.append("Message",'app.message');
+ menu.append("Quit",'app.quit');
+ this.application.set_app_menu(menu);
+
+ // This pops up a MessageDialog when "Message" is clicked in the menu
+ let messageAction = new Gio.SimpleAction ({ name: 'message' });
+ messageAction.connect('activate', Lang.bind(this,
+ function() {
+ this._showMessageDialog();
+ }));
+ this.application.add_action(messageAction);
+
+ // This closes the window when "Quit" is clicked in the menu
+ let quitAction = new Gio.SimpleAction ({ name: 'quit' });
+ quitAction.connect('activate', Lang.bind(this,
+ function() {
+ this._window.destroy();
+ }));
+ this.application.add_action(quitAction);
+ },
+
+
+
+ _showMessageDialog: function () {
+
+ // Create a modal MessageDialog whose parent is the window
+ this._messageDialog = new Gtk.MessageDialog ({
+ transient_for: this._window,
+ modal: true,
+ buttons: Gtk.ButtonsType.OK_CANCEL,
+ message_type: Gtk.MessageType.WARNING,
+ text: "This action will cause the universe to stop existing." });
+
+ this._messageDialog.connect ('response', Lang.bind(this, this._response_cb));
+ this._messageDialog.show();
+ },
+
+
+
+ // Callback function (aka signal handler) for the response signal
+ _response_cb: function (messagedialog, response_id) {
+
+ // A simple switch that changes the main window's label
+ switch (response_id) {
+ case Gtk.ResponseType.OK:
+ this.warningLabel.set_label ("*BOOM*\n");
+ break;
+ case Gtk.ResponseType.CANCEL:
+ this.warningLabel.set_label ("Good choice!\n");
+ break;
+ case Gtk.ResponseType.DELETE_EVENT:
+ this.warningLabel.set_label ("Dialog closed or cancelled.\n");
+ break;
+ }
+
+ this._messageDialog.destroy();
+
+ }
+
+});
+
+// Run the application
+let app = new MessageDialogExample ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/messagedialog.py b/beginners-docs/C/samples/messagedialog.py
new file mode 100644
index 0000000..6e81923
--- /dev/null
+++ b/beginners-docs/C/samples/messagedialog.py
@@ -0,0 +1,80 @@
+from gi.repository import Gtk
+from gi.repository import Gio
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+
+ # constructor for a window (the parent window) with a label
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="GMenu Example", application=app)
+ self.set_default_size(400, 200)
+ label = Gtk.Label()
+ label.set_text("This application goes boom!")
+ self.add(label)
+
+ # create the message_action (a Gio.SimpleAction) - for the window
+ message_action = Gio.SimpleAction.new("message", None)
+ # connect the signal from the action to the function message_cb()
+ message_action.connect("activate", self.message_cb)
+ # add the action to the application
+ app.add_action(message_action)
+
+ # callback function for the signal "activate" from the message_action
+ # in the menu of the parent window
+ def message_cb(self, action, parameter):
+ # a Gtk.MessageDialog
+ messagedialog = Gtk.MessageDialog(parent=self,
+ flags=Gtk.DialogFlags.MODAL,
+ type=Gtk.MessageType.WARNING,
+ buttons=Gtk.ButtonsType.OK_CANCEL,
+ message_format="This action will cause the universe to stop
existing.")
+ # connect the response (of the button clicked) to the function
+ # dialog_response()
+ messagedialog.connect("response", self.dialog_response)
+ # show the messagedialog
+ messagedialog.show()
+
+ def dialog_response(self, widget, response_id):
+ # if the button clicked gives response OK (-5)
+ if response_id == Gtk.ResponseType.OK:
+ print "*boom*"
+ # if the button clicked gives response CANCEL (-6)
+ elif response_id == Gtk.ResponseType.CANCEL:
+ print "good choice"
+ # if the messagedialog is destroyed (by pressing ESC)
+ elif response_id == Gtk.ResponseType.DELETE_EVENT:
+ print "dialog closed or cancelled"
+ # finally, destroy the messagedialog
+ widget.destroy()
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def quit_cb(self, action, parameter):
+ self.quit()
+
+ def do_startup (self):
+ Gtk.Application.do_startup(self)
+
+ # create a menu (a Gio.Menu)
+ menu = Gio.Menu()
+ # append a menu item with label "Message" and action "app.message"
+ menu.append("Message", "app.message")
+ # append a menu item with label "Quit" and action "app.quit"
+ menu.append("Quit", "app.quit")
+ # set menu as the menu for the application
+ self.set_app_menu(menu)
+
+ # a new simpleaction - for the application
+ quit_action = Gio.SimpleAction.new("quit", None)
+ quit_action.connect("activate", self.quit_cb)
+ self.add_action (quit_action)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/messagedialog.vala b/beginners-docs/C/samples/messagedialog.vala
new file mode 100644
index 0000000..ddab941
--- /dev/null
+++ b/beginners-docs/C/samples/messagedialog.vala
@@ -0,0 +1,71 @@
+//A window in the application
+public class Window : Gtk.ApplicationWindow {
+ public Window (Application app) {
+ Object (application: app, title: "Gtk.MessageDialog Example");
+
+ var label = new Gtk.Label ("This application goes boom!");
+ this.add (label);
+
+ var message_action = new SimpleAction ("message", null);
+ message_action.activate.connect (message);
+ this.add_action (message_action);
+
+ this.set_default_size (400, 200);
+ this.show_all ();
+ }
+
+ void dialog_response (Gtk.Dialog dialog, int response_id) {
+ switch (response_id) {
+ case Gtk.ResponseType.OK:
+ print ("*boom*\n");
+ break;
+ case Gtk.ResponseType.CANCEL:
+ print ("good choice\n");
+ break;
+ case Gtk.ResponseType.DELETE_EVENT:
+ print ("dialog closed or cancelled\n");
+ break;
+ }
+ dialog.destroy();
+ }
+
+ void message (SimpleAction simple, Variant? parameter) {
+ var messagedialog = new Gtk.MessageDialog (this,
+ Gtk.DialogFlags.MODAL,
+ Gtk.MessageType.WARNING,
+ Gtk.ButtonsType.OK_CANCEL,
+ "This action will cause the universe to stop existing.");
+
+ messagedialog.response.connect (dialog_response);
+ messagedialog.show ();
+ }
+}
+
+//This is the Application
+public class Application : Gtk.Application {
+ protected override void activate () {
+ new Window (this);
+ }
+
+ protected override void startup () {
+ base.startup ();
+
+ var menu = new Menu ();
+ menu.append ("Message", "win.message");
+ menu.append ("Quit", "app.quit");
+ this.app_menu = menu;
+
+ var quit_action = new SimpleAction ("quit", null);
+ //quit_action.activate.connect (this.quit);
+ this.add_action (quit_action);
+ }
+
+ public Application () {
+ Object (application_id: "org.example.application");
+ }
+}
+
+//main function creates Application and runs it
+int main (string[] args) {
+ return new Application ().run (args);
+}
diff --git a/beginners-docs/C/samples/muteswan.png b/beginners-docs/C/samples/muteswan.png
new file mode 100644
index 0000000..539291c
Binary files /dev/null and b/beginners-docs/C/samples/muteswan.png differ
diff --git a/beginners-docs/C/samples/paned.py b/beginners-docs/C/samples/paned.py
new file mode 100644
index 0000000..0d6ab34
--- /dev/null
+++ b/beginners-docs/C/samples/paned.py
@@ -0,0 +1,40 @@
+from gi.repository import Gtk
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="Paned Example", application=app)
+ self.set_default_size(450, 350)
+
+ # a new widget with two adjustable panes,
+ # one on the left and one on the right
+ paned = Gtk.Paned.new(Gtk.Orientation.HORIZONTAL)
+
+ # two images
+ image1 = Gtk.Image()
+ image1.set_from_file("gnome-image.png")
+ image2 = Gtk.Image()
+ image2.set_from_file("tux.png")
+
+ # add the first image to the left pane
+ paned.add1(image1)
+ # add the second image to the right pane
+ paned.add2(image2)
+
+ # add the panes to the window
+ self.add(paned)
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/progressbar.c b/beginners-docs/C/samples/progressbar.c
new file mode 100644
index 0000000..cd599be
--- /dev/null
+++ b/beginners-docs/C/samples/progressbar.c
@@ -0,0 +1,69 @@
+#include <gtk/gtk.h>
+
+
+static gboolean
+fill (gpointer user_data)
+{
+ GtkWidget *progress_bar = user_data;
+
+ /*Get the current progress*/
+ gdouble fraction;
+ fraction = gtk_progress_bar_get_fraction (GTK_PROGRESS_BAR (progress_bar));
+
+ /*Increase the bar by 10% each time this function is called*/
+ fraction += 0.1;
+
+ /*Fill in the bar with the new fraction*/
+ gtk_progress_bar_set_fraction (GTK_PROGRESS_BAR (progress_bar), fraction);
+
+ /*Ensures that the fraction stays below 1.0*/
+ if (fraction < 1.0)
+ return TRUE;
+
+ return FALSE;
+}
+
+
+
+static void
+activate (GtkApplication *app,
+ gpointer user_data)
+{
+ GtkWidget *window;
+ GtkWidget *progress_bar;
+
+ gdouble fraction = 0.0;
+
+ /*Create a window with a title, and a default size*/
+ window = gtk_application_window_new (app);
+ gtk_window_set_title (GTK_WINDOW (window), "ProgressBar Example");
+ gtk_window_set_default_size (GTK_WINDOW (window), 220, 20);
+
+ /*Create a progressbar and add it to the window*/
+ progress_bar = gtk_progress_bar_new ();
+ gtk_container_add (GTK_CONTAINER (window), progress_bar);
+
+ /*Fill in the given fraction of the bar. Has to be between 0.0-1.0 inclusive*/
+ gtk_progress_bar_set_fraction (GTK_PROGRESS_BAR (progress_bar), fraction);
+
+ /*Use the created fill function every 500 milliseconds*/
+ g_timeout_add (500, fill, GTK_PROGRESS_BAR (progress_bar));
+
+ gtk_widget_show_all (window);
+}
+
+
+
+int
+main (int argc, char **argv)
+{
+ GtkApplication *app;
+ int status;
+
+ app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
+ g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
+ status = g_application_run (G_APPLICATION (app), argc, argv);
+ g_object_unref (app);
+
+ return status;
+}
diff --git a/beginners-docs/C/samples/progressbar.js b/beginners-docs/C/samples/progressbar.js
new file mode 100644
index 0000000..ef516b5
--- /dev/null
+++ b/beginners-docs/C/samples/progressbar.js
@@ -0,0 +1,81 @@
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const GLib = imports.gi.GLib;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const ProgressBarExample = new Lang.Class({
+ Name: 'ProgressBar Example',
+
+ // Create the application itself
+ _init: function() {
+ this.application = new Gtk.Application({
+ application_id: 'org.example.jsprogressbar',
+ flags: Gio.ApplicationFlags.FLAGS_NONE
+ });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents windows when active
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function() {
+ this._buildUI ();
+ },
+
+
+
+ // Build the application's UI
+ _buildUI: function() {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow({ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ default_height: 20,
+ default_width: 220,
+ title: "ProgressBar Example"});
+
+ // Create the progress bar
+ this.progressBar = new Gtk.ProgressBar ();
+ this._window.add(this.progressBar);
+
+ // Start the function that pulses the bar every 100 milliseconds
+ this.sourceID = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 100, Lang.bind(this, this._barPulse));
+
+ // Connect a keypress event to the function that toggles the bar to start or stop pulsing
+ this._window.connect("key-press-event", Lang.bind(this, this._onKeyPress));
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+
+
+
+ // Pulse the progressbar (unless it has been disabled by a keypress)
+ _barPulse: function() {
+ this.progressBar.pulse();
+ return true;
+ },
+
+ // Start or stop the progressbar when a key is pressed
+ _onKeyPress: function() {
+ if (this.sourceID == 0)
+ this.sourceID = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 100, Lang.bind(this, this._barPulse));
+ else {
+ GLib.source_remove(this.sourceID);
+ this.sourceID = 0;
+ }
+ }
+
+});
+
+// Run the application
+let app = new ProgressBarExample ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/progressbar.py b/beginners-docs/C/samples/progressbar.py
new file mode 100644
index 0000000..4641da9
--- /dev/null
+++ b/beginners-docs/C/samples/progressbar.py
@@ -0,0 +1,56 @@
+from gi.repository import GLib
+from gi.repository import Gtk
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ # a window
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="ProgressBar Example", application=app)
+ self.set_default_size(220, 20)
+
+ # a progressbar
+ self.progress_bar = Gtk.ProgressBar()
+ # add the progressbar to the window
+ self.add(self.progress_bar)
+
+ # the method self.pulse is called each 100 milliseconds
+ # and self.source_id is set to be the ID of the event source
+ # (i.e. the bar changes position every 100 milliseconds)
+ self.source_id = GLib.timeout_add(100, self.pulse)
+
+ # event handler
+ # any signal from the keyboard controls if the progressbar stops/starts
+ def do_key_press_event(self, event):
+ # if the progressbar has been stopped (therefore source_id == 0 - see
+ # "else" below), turn it back on
+ if (self.source_id == 0):
+ self.source_id = GLib.timeout_add(100, self.pulse)
+ # if the bar is moving, remove the source with the ID of source_id
+ # from the main context (stop the bar) and set the source_id to 0
+ else:
+ GLib.source_remove(self.source_id)
+ self.source_id = 0
+ # stop the signal emission
+ return True
+
+ # source function
+ # the progressbar is in "activity mode" when this method is called
+ def pulse(self):
+ self.progress_bar.pulse()
+ # call the function again
+ return True
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/progressbar.vala b/beginners-docs/C/samples/progressbar.vala
new file mode 100644
index 0000000..86fe853
--- /dev/null
+++ b/beginners-docs/C/samples/progressbar.vala
@@ -0,0 +1,36 @@
+public class MyApplication : Gtk.Application {
+
+ Gtk.ProgressBar progress_bar;
+
+ protected override void activate () {
+ var window = new Gtk.ApplicationWindow (this);
+ window.set_title ("ProgressBar Example");
+ window.set_default_size (220, 20);
+
+ progress_bar = new Gtk.ProgressBar ();
+ window.add (progress_bar);
+ window.show_all ();
+
+ double fraction = 0.0;
+ progress_bar.set_fraction (fraction);
+ GLib.Timeout.add (500, fill);
+ }
+
+ bool fill () {
+ double fraction = progress_bar.get_fraction (); //get current progress
+ fraction += 0.1; //increase by 10% each time this function is called
+
+ progress_bar.set_fraction (fraction);
+
+ /* This function is only called by GLib.Timeout.add while it returns true; */
+ if (fraction < 1.0)
+ return true;
+ return false;
+ }
+}
+
+public int main (string[] args) {
+ var progress_bar_application = new MyApplication ();
+ int status = progress_bar_application.run (args);
+ return status;
+}
diff --git a/beginners-docs/C/samples/radiobutton.c b/beginners-docs/C/samples/radiobutton.c
new file mode 100644
index 0000000..46e3a48
--- /dev/null
+++ b/beginners-docs/C/samples/radiobutton.c
@@ -0,0 +1,97 @@
+#include <gtk/gtk.h>
+
+
+
+/*Signal handler for the "toggled" signal of the RadioButton*/
+static void
+button_toggled_cb (GtkWidget *button,
+ gpointer user_data)
+{
+ char *b_state;
+ const char *button_label;
+
+ if (gtk_toggle_button_get_active (GTK_TOGGLE_BUTTON (button)))
+ b_state = "on";
+ else {
+ b_state = "off";
+ g_print ("\n");
+ }
+
+ button_label = gtk_button_get_label (GTK_BUTTON (button));
+
+ g_print ("%s was turned %s\n", button_label, b_state);
+}
+
+
+
+static void
+activate (GtkApplication *app,
+ gpointer user_data)
+{
+ GtkWidget *grid;
+ GtkWidget *window;
+
+ GtkWidget *button1;
+ GtkWidget *button2;
+ GtkWidget *button3;
+
+ /*Create a window with a set title and default size.
+ Also, set a border width for the amount of space to leave
+ inside the window*/
+ window = gtk_application_window_new (app);
+ gtk_window_set_title (GTK_WINDOW (window), "RadioButton Example");
+ gtk_window_set_default_size (GTK_WINDOW (window), 250, 100);
+ gtk_container_set_border_width (GTK_CONTAINER(window), 20);
+
+
+ /*Create an initial radio button*/
+ button1 = gtk_radio_button_new_with_label (NULL, "Button 1");
+
+ /*Create a second radio button, and add it to the same group as Button 1*/
+ button2 = gtk_radio_button_new_with_label_from_widget (GTK_RADIO_BUTTON (button1),
+ "Button 2");
+
+ /*Create a third button, and add it to the same group as Button 1*/
+ button3 = gtk_radio_button_new_with_label_from_widget (GTK_RADIO_BUTTON (button1),
+ "Button 3");
+
+
+ /*Create a grid, attach the buttons, and position them accordingly*/
+ grid = gtk_grid_new ();
+ gtk_grid_attach (GTK_GRID (grid), button1, 0, 0, 1, 1);
+ gtk_grid_attach (GTK_GRID (grid), button2, 0, 1, 1, 1);
+ gtk_grid_attach (GTK_GRID (grid), button3, 0, 2, 1, 1);
+
+ /*Be sure to set the initial state of each button*/
+ gtk_toggle_button_set_active (GTK_TOGGLE_BUTTON (button2), TRUE);
+ gtk_toggle_button_set_active (GTK_TOGGLE_BUTTON (button1), FALSE);
+ gtk_toggle_button_set_active (GTK_TOGGLE_BUTTON (button3), FALSE);
+
+ /*Connect the signal handlers (aka Callback functions) to the buttons*/
+ g_signal_connect (GTK_TOGGLE_BUTTON (button1), "toggled",
+ G_CALLBACK (button_toggled_cb), window);
+ g_signal_connect (GTK_TOGGLE_BUTTON (button2), "toggled",
+ G_CALLBACK (button_toggled_cb), window);
+ g_signal_connect (GTK_TOGGLE_BUTTON (button3), "toggled",
+ G_CALLBACK (button_toggled_cb), window);
+
+ gtk_container_add (GTK_CONTAINER (window), GTK_WIDGET (grid));
+
+ gtk_widget_show_all (window);
+}
+
+
+
+int
+main (int argc, char **argv)
+{
+ GtkApplication *app;
+ int status;
+
+ app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
+ g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
+ status = g_application_run (G_APPLICATION (app), argc, argv);
+ g_object_unref (app);
+
+ return status;
+}
diff --git a/beginners-docs/C/samples/radiobutton.js b/beginners-docs/C/samples/radiobutton.js
new file mode 100644
index 0000000..7eaac00
--- /dev/null
+++ b/beginners-docs/C/samples/radiobutton.js
@@ -0,0 +1,188 @@
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const RadioButtonExample = new Lang.Class({
+ Name: 'RadioButton Example',
+
+ // Create the application itself
+ _init: function() {
+ this.application = new Gtk.Application({
+ application_id: 'org.example.jsradiobutton',
+ flags: Gio.ApplicationFlags.FLAGS_NONE
+ });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents window when active
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function() {
+ this._buildUI ();
+ },
+
+
+
+ // Build the application's UI
+ _buildUI: function() {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ border_width: 20,
+ title: "Travel Planning"});
+
+ // Create a label for the first group of buttons
+ this._placeLabel = new Gtk.Label ({label: "Where would you like to travel to?"});
+
+ // Create three radio buttons three different ways
+ this._place1 = new Gtk.RadioButton ({label: "The Beach"});
+
+ this._place2 = Gtk.RadioButton.new_from_widget (this._place1);
+ this._place2.set_label ("The Moon");
+
+ this._place3 = Gtk.RadioButton.new_with_label_from_widget (this._place1, "Antarctica");
+ // this._place3.set_active (true);
+
+ // Create a label for the second group of buttons
+ this._thingLabel = new Gtk.Label ({label: "And what would you like to bring?" });
+
+ // Create three more radio buttons
+ this._thing1 = new Gtk.RadioButton ({label: "Penguins" });
+ this._thing2 = new Gtk.RadioButton ({label: "Sunscreen", group: this._thing1 });
+ this._thing3 = new Gtk.RadioButton ({label: "A spacesuit", group: this._thing1 });
+
+ // Create a stock OK button
+ this._okButton = new Gtk.Button ({
+ label: 'gtk-ok',
+ use_stock: 'true',
+ halign: Gtk.Align.END });
+
+ // Connect the button to the function which handles clicking it
+ this._okButton.connect ('clicked', Lang.bind (this, this._okClicked));
+
+ // Create a grid to put the "place" items in
+ this._places = new Gtk.Grid ();
+
+ // Attach the "place" items to the grid
+ this._places.attach (this._placeLabel, 0, 0, 1, 1);
+ this._places.attach (this._place1, 0, 1, 1, 1);
+ this._places.attach (this._place2, 0, 2, 1, 1);
+ this._places.attach (this._place3, 0, 3, 1, 1);
+
+ // Create a grid to put the "thing" items in
+ this._things = new Gtk.Grid ({ margin_top: 50 });
+
+ // Attach the "thing" items to the grid
+ this._things.attach (this._thingLabel, 0, 0, 1, 1);
+ this._things.attach (this._thing1, 0, 1, 1, 1);
+ this._things.attach (this._thing2, 0, 2, 1, 1);
+ this._things.attach (this._thing3, 0, 3, 1, 1);
+
+ // Create a grid to put everything in
+ this._grid = new Gtk.Grid ({
+ halign: Gtk.Align.CENTER,
+ valign: Gtk.Align.CENTER,
+ margin_left: 40,
+ margin_right: 50 });
+
+ // Attach everything to the grid
+ this._grid.attach (this._places, 0, 0, 1, 1);
+ this._grid.attach (this._things, 0, 1, 1, 1);
+ this._grid.attach (this._okButton, 0, 2, 1, 1);
+
+ // Add the grid to the window
+ this._window.add (this._grid);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+
+
+
+ _okClicked: function () {
+
+ // Create a popup that shows a silly message
+ this._travel = new Gtk.MessageDialog ({
+ transient_for: this._window,
+ modal: true,
+ message_type: Gtk.MessageType.OTHER,
+ buttons: Gtk.ButtonsType.OK,
+ text: this._messageText() });
+
+ // Show the popup
+ this._travel.show();
+
+ // Bind the OK button to the function that closes the popup
+ this._travel.connect ("response", Lang.bind (this, this._clearTravelPopUp));
+
+ },
+
+
+
+ _messageText: function() {
+
+ // Create a silly message for the popup depending on what you selected
+ var stringMessage = "";
+
+ if (this._place1.get_active()) {
+
+ if (this._thing1.get_active())
+ stringMessage = "Penguins love the beach, too!";
+
+ else if (this._thing2.get_active())
+ stringMessage = "Make sure to put on that sunscreen!";
+
+ else stringMessage = "Are you going to the beach in space?";
+
+ }
+
+ else if (this._place2.get_active()) {
+
+ if (this._thing1.get_active())
+ stringMessage = "The penguins will take over the moon!";
+
+ else if (this._thing2.get_active())
+ stringMessage = "A lack of sunscreen will be the least of your problems!";
+
+ else stringMessage = "You'll probably want a spaceship, too!";
+ }
+
+ else if (this._place3.get_active()) {
+
+ if (this._thing1.get_active())
+ stringMessage = "The penguins will be happy to be back home!";
+
+ else if (this._thing2.get_active())
+ stringMessage = "Antarctic sunbathing may be hazardous to your health!";
+
+ else stringMessage = "Try bringing a parka instead!";
+ }
+
+ return stringMessage;
+
+ },
+
+
+
+
+ _clearTravelPopUp: function () {
+
+ this._travel.destroy();
+
+ }
+
+});
+
+// Run the application
+let app = new RadioButtonExample ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/radiobutton.py b/beginners-docs/C/samples/radiobutton.py
new file mode 100644
index 0000000..f177ac1
--- /dev/null
+++ b/beginners-docs/C/samples/radiobutton.py
@@ -0,0 +1,70 @@
+from gi.repository import Gtk
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="RadioButton Example", application=app)
+ self.set_default_size(250, 100)
+ self.set_border_width(20)
+
+ # a new radiobutton with a label
+ button1 = Gtk.RadioButton(label="Button 1")
+ # connect the signal "toggled" emitted by the radiobutton
+ # with the callback function toggled_cb
+ button1.connect("toggled", self.toggled_cb)
+
+ # another radiobutton, in the same group as button1
+ button2 = Gtk.RadioButton.new_from_widget(button1)
+ # with label "Button 2"
+ button2.set_label("Button 2")
+ # connect the signal "toggled" emitted by the radiobutton
+ # with the callback function toggled_cb
+ button2.connect("toggled", self.toggled_cb)
+ # set button2 not active by default
+ button2.set_active(False)
+
+ # another radiobutton, in the same group as button1,
+ # with label "Button 3"
+ button3 = Gtk.RadioButton.new_with_label_from_widget(button1, "Button 3")
+ # connect the signal "toggled" emitted by the radiobutton
+ # with the callback function toggled_cb
+ button3.connect("toggled", self.toggled_cb)
+ # set button3 not active by default
+ button3.set_active(False)
+
+ # a grid to place the buttons
+ grid = Gtk.Grid.new()
+ grid.attach(button1, 0, 0, 1, 1);
+ grid.attach(button2, 0, 1, 1, 1);
+ grid.attach(button3, 0, 2, 1, 1);
+ # add the grid to the window
+ self.add(grid)
+
+ # callback function
+ def toggled_cb(self, button):
+ # a string to describe the state of the button
+ state = "unknown"
+ # whenever the button is turned on, state is on
+ if button.get_active():
+ state = "on"
+ # else state is off
+ else:
+ state = "off"
+ # whenever the function is called (a button is turned on or off)
+ # print on the terminal which button was turned on/off
+ print button.get_label() + " was turned " + state
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/radiobutton.vala b/beginners-docs/C/samples/radiobutton.vala
new file mode 100644
index 0000000..c77a199
--- /dev/null
+++ b/beginners-docs/C/samples/radiobutton.vala
@@ -0,0 +1,63 @@
+public class MyWindow : Gtk.ApplicationWindow {
+ internal MyWindow (MyApplication app) {
+ Object (application: app, title: "RadioButton Example");
+
+ this.border_width = 20;
+ this.set_default_size (250, 100);
+
+ /* We demonstrate 3 different RadioButton creation methods */
+
+ //Create a Radio Button
+ var button1 = new Gtk.RadioButton (null);
+ button1.set_label ("Button 1");
+
+ //Create a RadioButton with a label, and add it to the same group as button1.
+ var button2 = new Gtk.RadioButton.with_label (button1.get_group(),"Button 2");
+
+ //Create a RadioButton with a label, adding it to button1's group.
+ var button3 = new Gtk.RadioButton.with_label_from_widget (button1, "Button 3");
+
+ //Attach the buttons to a grid.
+ var grid = new Gtk.Grid ();
+ grid.attach (button1, 0, 0, 1, 1);
+ grid.attach (button2, 0, 1, 1, 1);
+ grid.attach (button3, 0, 2, 1, 1);
+
+ //Add the button to the window.
+ this.add (grid);
+
+ //Connect the signal handlers (aka. callback functions) to the buttons.
+ button1.toggled.connect (button_toggled_cb);
+ button2.toggled.connect (button_toggled_cb);
+ button3.toggled.connect (button_toggled_cb);
+ }
+
+ void button_toggled_cb (Gtk.ToggleButton button)
+ {
+ var state = "unknown";
+
+ if (button.get_active ())
+ state = "on";
+ else {
+ state = "off";
+ print ("\n");
+ }
+ print (button.get_label() + " was turned " + state + "\n");
+ }
+}
+
+public class MyApplication : Gtk.Application {
+ protected override void activate () {
+
+ //Show all of the things.
+ new MyWindow (this).show_all ();
+ }
+
+ internal MyApplication () {
+ Object (application_id: "org.example.MyApplication");
+ }
+}
+
+public int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/redfox.png b/beginners-docs/C/samples/redfox.png
new file mode 100644
index 0000000..0fa0e9e
Binary files /dev/null and b/beginners-docs/C/samples/redfox.png differ
diff --git a/beginners-docs/C/samples/scale.c b/beginners-docs/C/samples/scale.c
new file mode 100644
index 0000000..c384c01
--- /dev/null
+++ b/beginners-docs/C/samples/scale.c
@@ -0,0 +1,156 @@
+#include <gtk/gtk.h>
+
+
+
+/* This is the callback function.
+ * It is a handler function which reacts to the signal.
+ * In this case, it will notify the user the value of their scale as a label.
+ */
+static void
+hscale_moved (GtkRange *range,
+ gpointer user_data)
+{
+ GtkWidget *label = user_data;
+
+ /* Get the value of the range, and convert it into a string which will be
+ * used as a new label for the horizontal scale.
+ * %.0f - stands for a double that will have 0 decimal places.
+ */
+ gdouble pos = gtk_range_get_value (range);
+ /* Note: Using g_strdup_printf returns a string that must be freed.
+ * (In which is done below)
+ */
+ gchar *str = g_strdup_printf ("Horizontal scale is %.0f", pos);
+ gtk_label_set_text (GTK_LABEL (label), str);
+
+ g_free(str);
+}
+
+
+
+/* This is the second callback function. It is a handler function which
+ * reacts to the signal. It does the same thing as the function above, except with
+ * the vertical scale.
+ */
+vscale_moved (GtkRange *range,
+ gpointer user_data)
+{
+ GtkWidget *label = user_data;
+
+ gdouble pos = gtk_range_get_value (range);
+ /* %.1f - stands for a double that will have 1 decimal place */
+ gchar *str = g_strdup_printf ("Vertical scale is %.1f", pos);
+ gtk_label_set_text (GTK_LABEL (label), str);
+
+
+ g_free (str);
+}
+
+
+
+static void
+activate (GtkApplication *app,
+ gpointer user_data)
+{
+ /* Declare variables */
+ GtkWidget *window;
+ GtkWidget *h_scale;
+ GtkWidget *v_scale;
+ GtkWidget *hlabel;
+ GtkWidget *vlabel;
+ GtkWidget *grid;
+
+ /* The Adjustment object represents a value
+ * which has an associated lower and upper bound.
+ */
+ GtkAdjustment *hadjustment;
+ GtkAdjustment *vadjustment;
+
+ /* Create a window with a title and a default size */
+ window = gtk_application_window_new (app);
+ gtk_window_set_title (GTK_WINDOW (window), "Scale Example");
+ gtk_window_set_default_size (GTK_WINDOW (window), 400, 300);
+ gtk_container_set_border_width (GTK_CONTAINER (window), 5);
+
+ /* Two labels to be shown in the window */
+ hlabel = gtk_label_new ("Move the scale handle...");
+ vlabel = gtk_label_new ("Move the scale handle...");
+
+
+ /* gtk_adjustment_new takes six parameters, three of which
+ * may be difficult to understand:
+ * step increment- move the handle with the arrow keys on your keyboard to see.
+ * page increment - move the handle by clicking away from it
+ * on the scale to see.
+ * page size - not used here.
+ */
+ hadjustment = gtk_adjustment_new (0, 0, 100, 5, 10, 0);
+ vadjustment = gtk_adjustment_new (50, 0, 100, 5, 10, 0);
+
+ /* Create the Horizontal scale, making sure the
+ * digits used have no decimals.
+ */
+ h_scale = gtk_scale_new (GTK_ORIENTATION_HORIZONTAL, hadjustment);
+ gtk_scale_set_digits (GTK_SCALE (h_scale), 0);
+
+ /* Allow it to expand horizontally (if there's space), and
+ * set the vertical alignment
+ */
+ gtk_widget_set_hexpand (h_scale, TRUE);
+ gtk_widget_set_valign (h_scale, GTK_ALIGN_START);
+
+ /* Connecting the "value-changed" signal for the horizontal scale
+ * to the appropriate callback function.
+ * take note that GtkRange is part of GtkScale's Object Hierarchy.
+ */
+ g_signal_connect (h_scale,
+ "value-changed",
+ G_CALLBACK (hscale_moved),
+ hlabel);
+
+
+
+ /* Create the Vertical scale. This time, we will see what happens
+ * when the digits arent initially set.
+ */
+ v_scale = gtk_scale_new (GTK_ORIENTATION_VERTICAL, vadjustment);
+ gtk_widget_set_vexpand (v_scale, TRUE);
+
+ /* Connecting the "value-changed" signal for the vertical scale to
+ * the appropriate callback function.
+ */
+ g_signal_connect (v_scale,
+ "value-changed",
+ G_CALLBACK (vscale_moved),
+ vlabel);
+
+ /* Create a grid and arrange everything accordingly */
+ grid = gtk_grid_new ();
+ gtk_grid_set_column_spacing (GTK_GRID (grid), 10);
+ gtk_grid_set_column_homogeneous (GTK_GRID (grid), TRUE);
+ gtk_grid_attach (GTK_GRID (grid), h_scale, 0, 0, 1, 1);
+ gtk_grid_attach (GTK_GRID (grid), v_scale, 1, 0, 1, 1);
+ gtk_grid_attach (GTK_GRID (grid), hlabel, 0, 1, 1, 1);
+ gtk_grid_attach (GTK_GRID (grid), vlabel, 1, 1, 1, 1);
+
+
+ gtk_container_add (GTK_CONTAINER (window), grid);
+
+ gtk_widget_show_all (window);
+}
+
+
+
+int
+main (int argc, char **argv)
+{
+ GtkApplication *app;
+ int status;
+
+ app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
+ g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
+ status = g_application_run (G_APPLICATION (app), argc, argv);
+ g_object_unref (app);
+
+ return status;
+}
diff --git a/beginners-docs/C/samples/scale.js b/beginners-docs/C/samples/scale.js
new file mode 100644
index 0000000..b479f4e
--- /dev/null
+++ b/beginners-docs/C/samples/scale.js
@@ -0,0 +1,128 @@
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const ScaleExample = new Lang.Class({
+ Name: 'Scale Example',
+
+ // Create the application itself
+ _init: function() {
+ this.application = new Gtk.Application({
+ application_id: 'org.example.jsscale'
+ });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents window when active
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function() {
+ this._buildUI ();
+ },
+
+
+
+ // Build the application's UI
+ _buildUI: function() {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ border_width: 20,
+ title: "Birds on a Floe"});
+
+ // Create the horizontal scale
+ this._hScale = Gtk.Scale.new_with_range (Gtk.Orientation.HORIZONTAL, 0.0, 100.0, 5.0);
+ this._hScale.set_valign (Gtk.Align.START);
+ this._hScale.set_value (50);
+ this._hScale.set_digits (0);
+ // this._hScale.set_draw_value (false);
+
+ // Create a master adjustment to use for the vertical (or any other) scale
+ this._adjustment = new Gtk.Adjustment ({
+ value: 95,
+ lower: 0,
+ upper: 100,
+ step_increment: 5,
+ page_increment: 10 });
+
+ // Create a vertical scale using the adjustment we just made
+ this._vScale = new Gtk.Scale ({
+ orientation: Gtk.Orientation.VERTICAL,
+ adjustment: this._adjustment,
+ digits: 0,
+ // draw_value: false,
+ margin_left: 10 });
+
+ // Create the label that shows the product of the two values
+ this._product = (this._hScale.get_value() * this._vScale.get_value());
+ this._label = new Gtk.Label ({
+ label: (String(this._product) + " penguins on the iceberg."),
+ height_request: 200,
+ width_request: 200,
+ wrap: true});
+
+ // Connect the two scales to functions which recalculate the label
+ this._hScale.connect ("value-changed", Lang.bind (this, this._recalc));
+ this._vScale.connect ("value-changed", Lang.bind (this, this._recalc));
+
+ // Create a grid to arrange things in
+ this._UIGrid = new Gtk.Grid ({
+ halign: Gtk.Align.CENTER,
+ valign: Gtk.Align.CENTER,
+ margin_top: 20,
+ margin_left: 20});
+
+ // Attach everything to the grid
+ this._UIGrid.attach (this._label, 0, 0, 1, 1);
+ this._UIGrid.attach (this._hScale, 0, 1, 1, 1);
+ this._UIGrid.attach (this._vScale, 1, 0, 1, 1);
+
+ // Add the grid to the window
+ this._window.add (this._UIGrid);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+
+
+
+ _recalc: function() {
+
+ // Figure out what the product of the two scales' values is
+ var product = (this._hScale.get_value() * this._vScale.get_value());
+
+ // Create a blank comment line in case there isn't a silly comment to make
+ var comment = "";
+
+ // Make a silly comment based on the number of penguins
+ if (product > 9000) {
+ comment = "It's over 9000!";
+ }
+ else if (product < 1000 && product > 0) {
+ comment = "They're getting lonely.";
+ }
+ else if (product == 0) {
+ comment = "They're all gone ...";
+ }
+ else comment = "";
+
+ // Set ._label's new text
+ this._label.set_label (String (product) + " penguins on the iceberg. " + comment);
+
+ }
+
+});
+
+// Run the application
+let app = new ScaleExample ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/scale.py b/beginners-docs/C/samples/scale.py
new file mode 100644
index 0000000..dd4a2ea
--- /dev/null
+++ b/beginners-docs/C/samples/scale.py
@@ -0,0 +1,71 @@
+from gi.repository import Gtk
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="Scale Example", application=app)
+ self.set_default_size(400, 300)
+ self.set_border_width(5)
+
+ # two adjustments (initial value, min value, max value,
+ # step increment - press cursor keys to see!,
+ # page increment - click around the handle to see!,
+ # page size - not used here)
+ ad1 = Gtk.Adjustment(0, 0, 100, 5, 10, 0)
+ ad2 = Gtk.Adjustment(50, 0, 100, 5, 10, 0)
+
+ # an horizontal scale
+ self.h_scale = Gtk.Scale(orientation=Gtk.Orientation.HORIZONTAL, adjustment=ad1)
+ # of integers (no digits)
+ self.h_scale.set_digits(0)
+ # that can expand horizontally if there is space in the grid (see below)
+ self.h_scale.set_hexpand(True)
+ # that is aligned at the top of the space allowed in the grid (see below)
+ self.h_scale.set_valign(Gtk.Align.START)
+
+ # we connect the signal "value-changed" emitted by the scale with the callback
+ # function scale_moved
+ self.h_scale.connect("value-changed", self.scale_moved)
+
+ # a vertical scale
+ self.v_scale = Gtk.Scale(orientation=Gtk.Orientation.VERTICAL, adjustment=ad2)
+ # that can expand vertically if there is space in the grid (see below)
+ self.v_scale.set_vexpand(True)
+
+ # we connect the signal "value-changed" emitted by the scale with the callback
+ # function scale_moved
+ self.v_scale.connect("value-changed", self.scale_moved)
+
+ # a label
+ self.label = Gtk.Label()
+ self.label.set_text("Move the scale handles...")
+
+ # a grid to attach the widgets
+ grid = Gtk.Grid()
+ grid.set_column_spacing(10)
+ grid.set_column_homogeneous(True)
+ grid.attach(self.h_scale, 0, 0, 1, 1)
+ grid.attach_next_to(self.v_scale, self.h_scale, Gtk.PositionType.RIGHT, 1, 1)
+ grid.attach(self.label, 0, 1, 2, 1)
+
+ self.add(grid)
+
+ # any signal from the scales is signaled to the label the text of which is changed
+ def scale_moved(self, event):
+ self.label.set_text("Horizontal scale is " + str(int(self.h_scale.get_value())) +
+ "; vertical scale is " + str(self.v_scale.get_value()) + ".")
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/scale.vala b/beginners-docs/C/samples/scale.vala
new file mode 100644
index 0000000..3b99883
--- /dev/null
+++ b/beginners-docs/C/samples/scale.vala
@@ -0,0 +1,52 @@
+/* This is the application. */
+public class MyApplication : Gtk.Application {
+ Gtk.Scale h_scale;
+ Gtk.Scale v_scale;
+ Gtk.Label label;
+
+ /* Override the 'activate' signal of GLib.Application. */
+ protected override void activate () {
+ var window = new Gtk.ApplicationWindow (this);
+ window.title = "Scale Example";
+ window.set_default_size (400, 300);
+ window.set_border_width (5);
+
+ h_scale = new Gtk.Scale.with_range (Gtk.Orientation.HORIZONTAL, 0.0, 100.0, 5.0);
+ h_scale.set_digits (0); //number of decimal places displayed
+ h_scale.set_valign (Gtk.Align.START); //horizontal alignment
+
+ var adjustment = new Gtk.Adjustment (42.0, 0.0, 100.0, 5.0, 10.0, 0.0);
+ v_scale = new Gtk.Scale (Gtk.Orientation.VERTICAL, adjustment);
+ v_scale.set_vexpand(true);
+
+ label = new Gtk.Label ("Move the scale handles...");
+
+ var grid = new Gtk.Grid ();
+ grid.set_column_spacing (10); //amount of space between columns
+ grid.set_column_homogeneous (true); //all columns same width
+ grid.attach (h_scale, 0, 0, 1, 1);
+ grid.attach_next_to (v_scale, h_scale, Gtk.PositionType.RIGHT, 1, 1);
+ grid.attach (label, 0, 1, 2, 1);
+
+ h_scale.value_changed.connect (scale_moved);
+ v_scale.value_changed.connect (scale_moved);
+
+ window.add (grid);
+ window.show_all ();
+ }
+
+ /* Callback function for "value-changed" signal.
+ * The paramter refers to the scale which emitted the signal.
+ * Since we are accessing the values of not one, but two scales,
+ * we made the ranges instance variables, and ignore the
+ * parameter.
+ */
+ void scale_moved (Gtk.Range range) {
+ label.set_text ("Horizontal scale is %.1f; vertical scale is %.1f.".printf (h_scale.get_value
(), v_scale.get_value ()));
+ }
+}
+
+/* main creates and runs the application. */
+public int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/scrolledwindow.c b/beginners-docs/C/samples/scrolledwindow.c
new file mode 100644
index 0000000..d17da52
--- /dev/null
+++ b/beginners-docs/C/samples/scrolledwindow.c
@@ -0,0 +1,57 @@
+#include <gtk/gtk.h>
+
+
+
+static void
+activate (GtkApplication *app,
+ gpointer user_data)
+{
+ /* Declare variables */
+ GtkWidget *window;
+ GtkWidget *scrolled_window;
+ GtkWidget *image;
+
+ /* Create a window with a title, and a default size */
+ window = gtk_application_window_new (app);
+ gtk_window_set_title (GTK_WINDOW (window), "ScrolledWindow Example");
+ gtk_window_set_default_size (GTK_WINDOW (window), 220, 200);
+
+ /* Create the scrolled window. Usually NULL is passed for both parameters so
+ * that it creates the horizontal/vertical adjustments automatically. Setting
+ * the scrollbar policy to automatic allows the scrollbars to only show up
+ * when needed.
+ */
+ scrolled_window = gtk_scrolled_window_new (NULL, NULL);
+ /* Set the border width */
+ gtk_container_set_border_width (GTK_CONTAINER (scrolled_window), 10);
+ /* Extract our desired image from a file that we have */
+ image = gtk_image_new_from_file ("gnome-image.png");
+ /* And add it to the scrolled window */
+ gtk_scrolled_window_add_with_viewport (GTK_SCROLLED_WINDOW (scrolled_window), image);
+ /* Set the policy of the horizontal and vertical scrollbars to automatic.
+ * What this means is that the scrollbars are only present if needed.
+ */
+ gtk_scrolled_window_set_policy (GTK_SCROLLED_WINDOW (scrolled_window),
+ GTK_POLICY_AUTOMATIC,
+ GTK_POLICY_AUTOMATIC);
+
+ gtk_container_add (GTK_CONTAINER (window), scrolled_window);
+
+ gtk_widget_show_all (window);
+}
+
+
+
+int
+main (int argc, char **argv)
+{
+ GtkApplication *app;
+ int status;
+
+ app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
+ g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
+ status = g_application_run (G_APPLICATION (app), argc, argv);
+ g_object_unref (app);
+
+ return status;
+}
diff --git a/beginners-docs/C/samples/scrolledwindow.py b/beginners-docs/C/samples/scrolledwindow.py
new file mode 100644
index 0000000..05137b7
--- /dev/null
+++ b/beginners-docs/C/samples/scrolledwindow.py
@@ -0,0 +1,38 @@
+from gi.repository import Gtk
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="ScrolledWindow Example", application=app)
+ self.set_default_size(200, 200)
+
+ # the scrolledwindow
+ scrolled_window = Gtk.ScrolledWindow()
+ scrolled_window.set_border_width(10)
+ # there is always the scrollbar (otherwise: AUTOMATIC - only if needed - or NEVER)
+ scrolled_window.set_policy(Gtk.PolicyType.ALWAYS, Gtk.PolicyType.ALWAYS)
+
+ # an image - slightly larger than the window...
+ image = Gtk.Image()
+ image.set_from_file("gnome-image.png")
+
+ # add the image to the scrolledwindow
+ scrolled_window.add_with_viewport(image)
+
+ # add the scrolledwindow to the window
+ self.add(scrolled_window)
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/scrolledwindow.vala b/beginners-docs/C/samples/scrolledwindow.vala
new file mode 100644
index 0000000..b37ce20
--- /dev/null
+++ b/beginners-docs/C/samples/scrolledwindow.vala
@@ -0,0 +1,23 @@
+/* This is the application. */
+public class MyApplication : Gtk.Application {
+ /* Override the 'activate' signal of GLib.Application. */
+ protected override void activate () {
+ /* Create the window of this application. */
+ var window = new Gtk.ApplicationWindow (this);
+ window.title = "ScrolledWindow Example";
+ window.set_default_size (200, 200);
+
+ var scrolled_window = new Gtk.ScrolledWindow (null, null);
+ scrolled_window.set_border_width (10);
+ scrolled_window.add_with_viewport (new Gtk.Image.from_file ("gnome-image.png"));
+ scrolled_window.set_policy (Gtk.PolicyType.AUTOMATIC, Gtk.PolicyType.AUTOMATIC);
+
+ window.add (scrolled_window);
+ window.show_all ();
+ }
+}
+
+/* main creates and runs the application. */
+public int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/separator.py b/beginners-docs/C/samples/separator.py
new file mode 100644
index 0000000..4263a27
--- /dev/null
+++ b/beginners-docs/C/samples/separator.py
@@ -0,0 +1,44 @@
+from gi.repository import Gtk
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="Separator Example", application=app)
+
+ # three labels
+ label1 = Gtk.Label()
+ label1.set_text("Below, a horizontal separator.")
+
+ label2 = Gtk.Label()
+ label2.set_text("On the right, a vertical separator.")
+
+ label3 = Gtk.Label()
+ label3.set_text("On the left, a vertical separator.")
+
+ # a horizontal separator
+ hseparator = Gtk.Separator(orientation=Gtk.Orientation.HORIZONTAL)
+ # a vertical separator
+ vseparator = Gtk.Separator(orientation=Gtk.Orientation.VERTICAL)
+
+ # a grid to attach labels and separators
+ grid = Gtk.Grid()
+ grid.attach(label1, 0, 0, 3, 1)
+ grid.attach(hseparator, 0, 1, 3, 1)
+ grid.attach(label2, 0, 2, 1, 1)
+ grid.attach(vseparator, 1, 2, 1, 1)
+ grid.attach(label3, 2, 2, 1, 1)
+ grid.set_column_homogeneous(True)
+ # add the grid to the window
+ self.add(grid)
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/spinbutton.c b/beginners-docs/C/samples/spinbutton.c
new file mode 100644
index 0000000..3682e87
--- /dev/null
+++ b/beginners-docs/C/samples/spinbutton.c
@@ -0,0 +1,94 @@
+#include <gtk/gtk.h>
+
+
+
+/* This is the callback function.
+ * It is a handler function which reacts to the signal.
+ * In this case, it will notify the user the value of their spinbutton
+ * as a label.
+ */
+static void
+spin_clicked (GtkSpinButton *spinbutton,
+ gpointer user_data)
+{
+ GtkWidget *label = user_data;
+ gint value = gtk_spin_button_get_value_as_int (spinbutton);
+
+ /* %d - Is used when printing integers.
+ * Note: Using g_strdup_printf returns a string that must be freed.
+ * (In which is done below)
+ */
+ gchar *str = g_strdup_printf ("The number you selected is %d.", value);
+ gtk_label_set_text (GTK_LABEL (label), str);
+
+ g_free(str);
+}
+
+
+
+static void
+activate (GtkApplication *app,
+ gpointer user_data)
+{
+ /* Declare variables */
+ GtkWidget *window;
+ GtkWidget *label;
+ GtkWidget *grid;
+ GtkWidget *spin_button;
+ GtkAdjustment *adjustment;
+
+
+ /* Create a window with a title, a border width, and a default size */
+ window = gtk_application_window_new (app);
+ gtk_window_set_title (GTK_WINDOW (window), "SpinButton Example");
+ gtk_window_set_default_size (GTK_WINDOW (window), 210, 70);
+ gtk_container_set_border_width (GTK_CONTAINER (window), 5);
+
+ /* Create a label to be shown in the window */
+ label = gtk_label_new ("Choose a number");
+
+ /* Create an adjustment representing an adjustable bounded value */
+ adjustment = gtk_adjustment_new (0, 0, 100, 1, 0, 0);
+
+
+ /* Create a spin button that is to be as wide as possible */
+ spin_button = gtk_spin_button_new (adjustment, 1, 0);
+ gtk_widget_set_hexpand (spin_button, TRUE);
+
+ /* Connecting the "value-changed" signal for the spinbutton
+ * to the appropriate callback function.
+ */
+ g_signal_connect (spin_button,
+ "value-changed",
+ G_CALLBACK (spin_clicked),
+ label);
+
+
+ /* Create a grid and arrange everything accordingly */
+ grid = gtk_grid_new ();
+ gtk_grid_set_column_spacing (GTK_GRID (grid), 10);
+ gtk_grid_set_column_homogeneous (GTK_GRID (grid), TRUE);
+ gtk_grid_attach (GTK_GRID (grid), spin_button, 0, 0, 1, 1);
+ gtk_grid_attach (GTK_GRID (grid), label, 0, 1, 1, 1);
+
+
+ gtk_container_add (GTK_CONTAINER (window), grid);
+
+ gtk_widget_show_all (window);
+}
+
+
+
+int
+main (int argc, char **argv)
+{
+ GtkApplication *app;
+ int status;
+
+ app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
+ g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
+ status = g_application_run (G_APPLICATION (app), argc, argv);
+ g_object_unref (app);
+
+ return status;
+}
diff --git a/beginners-docs/C/samples/spinbutton.js b/beginners-docs/C/samples/spinbutton.js
new file mode 100644
index 0000000..46c569e
--- /dev/null
+++ b/beginners-docs/C/samples/spinbutton.js
@@ -0,0 +1,113 @@
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const SpinButtonExample = new Lang.Class({
+ Name: 'SpinButton Example',
+
+ // Create the application itself
+ _init: function() {
+ this.application = new Gtk.Application({
+ application_id: 'org.example.jsspinbutton'
+ });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents window when active
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function() {
+ this._buildUI ();
+ },
+
+
+
+ // Build the application's UI
+ _buildUI: function() {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ border_width: 20,
+ title: "Kitten Feeder"});
+
+ // Create the first spinbutton using a function
+ this._kittens = Gtk.SpinButton.new_with_range (1, 9001, 1);
+ this._kittens.connect ("value-changed", Lang.bind (this, this._newValue));
+
+ // Create an adjustment to use for the second spinbutton
+ this._adjustment = new Gtk.Adjustment ({
+ value: 1,
+ lower: 0,
+ upper: 9001,
+ step_increment: 1,
+ page_increment: 10 });
+
+ // Create the second spinbutton
+ this._tuna = new Gtk.SpinButton ({ adjustment: this._adjustment });
+ this._tuna.connect ("value-changed", Lang.bind (this, this._newValue));
+
+ // this._tuna.set_digits (1);
+ // this._tuna.set_wrap (true);
+
+ // Create the text labels to go with the spinbuttons
+ this._startLabel = new Gtk.Label ({ label: "There are " });
+ this._kittenLabel = new Gtk.Label ({ label: " kitten(s), and "});
+ this._tunaLabel = new Gtk.Label ({ label: " can(s) of tuna."});
+ this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value()));
+ this._lastLabel = new Gtk.Label ({
+ label: "That's " + this.perKitten + " can(s) of tuna per kitten." });
+
+ // Create a grid to put the spinbuttons and their labels in
+ this._spinGrid = new Gtk.Grid ({
+ halign: Gtk.Align.CENTER,
+ valign: Gtk.Align.CENTER,
+ margin_bottom: 20 });
+
+ // Attach everything to the grid
+ this._spinGrid.attach (this._startLabel, 0, 0, 1, 1);
+ this._spinGrid.attach (this._kittens, 1, 0, 1, 1);
+ this._spinGrid.attach (this._kittenLabel, 2, 0, 1, 1);
+ this._spinGrid.attach (this._tuna, 3, 0, 1, 1);
+ this._spinGrid.attach (this._tunaLabel, 4, 0, 1, 1);
+
+ // Create a main grid to hold it and the last label
+ this._mainGrid = new Gtk.Grid ({
+ halign: Gtk.Align.CENTER,
+ valign: Gtk.Align.CENTER });
+
+ // Attach the smaller grid and the last label to the main grid
+ this._mainGrid.attach (this._spinGrid, 0, 0, 1, 1);
+ this._mainGrid.attach (this._lastLabel, 0, 1, 1, 1);
+
+ // Add the main grid to the window
+ this._window.add (this._mainGrid);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+
+
+
+ _newValue: function () {
+
+ // Update the label which shows how many cans there are per kitten
+ this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value()))
+ this._lastLabel.set_label ("That's " + this.perKitten + " can(s) of tuna per kitten.");
+
+ }
+
+});
+
+// Run the application
+let app = new SpinButtonExample ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/spinbutton.py b/beginners-docs/C/samples/spinbutton.py
new file mode 100644
index 0000000..1aa77a1
--- /dev/null
+++ b/beginners-docs/C/samples/spinbutton.py
@@ -0,0 +1,53 @@
+from gi.repository import Gtk
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="SpinButton Example", application=app)
+ self.set_default_size(210, 70)
+ self.set_border_width(5)
+
+ # an adjustment (initial value, min value, max value,
+ # step increment - press cursor keys or +/- buttons to see!,
+ # page increment - not used here,
+ # page size - not used here)
+ ad = Gtk.Adjustment(0, 0, 100, 1, 0, 0)
+
+ # a spin button for integers (digits=0)
+ self.spin = Gtk.SpinButton(adjustment=ad, climb_rate=1, digits=0)
+ # as wide as possible
+ self.spin.set_hexpand(True)
+
+ # we connect the signal "value-changed" emitted by the spinbutton with the callback
+ # function spin_selected
+ self.spin.connect("value-changed", self.spin_selected)
+
+ # a label
+ self.label = Gtk.Label()
+ self.label.set_text("Choose a number")
+
+ # a grid to attach the widgets
+ grid = Gtk.Grid()
+ grid.attach(self.spin, 0, 0, 1, 1)
+ grid.attach(self.label, 0, 1, 2, 1)
+
+ self.add(grid)
+
+ # callback function: the signal of the spinbutton is used to change the text of the label
+ def spin_selected(self, event):
+ self.label.set_text("The number you selected is " + str(self.spin.get_value_as_int()) + ".")
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/spinbutton.vala b/beginners-docs/C/samples/spinbutton.vala
new file mode 100644
index 0000000..37659b2
--- /dev/null
+++ b/beginners-docs/C/samples/spinbutton.vala
@@ -0,0 +1,35 @@
+/* This is the application. */
+public class MyApplication : Gtk.Application {
+ Gtk.Label label;
+
+ /* Override the 'activate' signal of GLib.Application. */
+ protected override void activate () {
+ var window = new Gtk.ApplicationWindow (this);
+ window.title = "SpinButton Example";
+ window.set_default_size (210, 70);
+ window.set_border_width (5);
+
+ var spinbutton = new Gtk.SpinButton.with_range (0, 100, 1);
+ spinbutton.set_hexpand (true);
+
+ label = new Gtk.Label ("Choose a number");
+
+ var grid = new Gtk.Grid ();
+ grid.attach (spinbutton, 0, 0, 1, 1);
+ grid.attach (label, 0, 1, 1, 1);
+
+ spinbutton.value_changed.connect (this.value_changed_cb);
+
+ window.add (grid);
+ window.show_all ();
+ }
+
+ void value_changed_cb (Gtk.SpinButton spin) {
+ label.set_text ("The number you selected is %.0f.".printf (spin.get_value()));
+ }
+}
+
+/* main creates and runs the application. */
+public int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/spinner.c b/beginners-docs/C/samples/spinner.c
new file mode 100644
index 0000000..197c87d
--- /dev/null
+++ b/beginners-docs/C/samples/spinner.c
@@ -0,0 +1,88 @@
+#include <gtk/gtk.h>
+
+
+
+ /*Global variable used to indicate active state of the
+spinner. TRUE = active, FALSE = not-active. This is because
+there isn't a current function for C that does this for us*/
+gboolean active;
+
+
+
+/*This is the callback function. It is a handler function
+which reacts to the signal. In this case, it will cause the
+spinner to start and stop according to how many times the user
+presses the spacebar.*/
+static gboolean
+key_pressed_event (GtkWidget *widget,
+ GdkEvent *event,
+ gpointer user_data)
+{
+ GtkWidget *spinner = user_data;
+ guint keyval;
+
+ /*Extracts the keyval from an event. And stores it in the variable
+ "keyval" (we give the function the address). In this case, the
+ event is GdkEventKey, a key press event*/
+ gdk_event_get_keyval (event, &keyval);
+
+ /*Grabbing the boolean value from the spinner*/
+ g_object_get (GTK_SPINNER (spinner), "active", &active, NULL);
+
+ if (keyval == GDK_KEY_space) {
+ if (active) {
+ gtk_spinner_stop (GTK_SPINNER (spinner));
+ }
+ else {
+ gtk_spinner_start (GTK_SPINNER (spinner));
+ }
+ }
+
+return TRUE;
+}
+
+
+
+static void
+activate (GtkApplication *app,
+ gpointer user_data)
+{
+ GtkWidget *window;
+ GtkWidget *spinner;
+
+ /*Create a window with a title, border width and a default size*/
+ window = gtk_application_window_new (app);
+
+ gtk_window_set_title (GTK_WINDOW (window), "Spinner Example");
+ gtk_window_set_default_size (GTK_WINDOW (window), 200, 200);
+ gtk_container_set_border_width (GTK_CONTAINER(window), 30);
+
+ /*Create a spinner, with extra horizontal and vertical space*/
+ spinner = gtk_spinner_new ();
+ gtk_spinner_start (GTK_SPINNER (spinner));
+
+ gtk_container_add (GTK_CONTAINER (window), spinner);
+
+ /*Connecting the key-press-event signal to the callback*/
+ g_signal_connect (GTK_WINDOW (window), "key-press-event",
+ G_CALLBACK (key_pressed_event), spinner);
+
+ gtk_widget_show_all (window);
+}
+
+
+
+
+int
+main (int argc, char **argv)
+{
+ GtkApplication *app;
+ int status;
+
+ app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
+ g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
+ status = g_application_run (G_APPLICATION (app), argc, argv);
+ g_object_unref (app);
+
+ return status;
+}
diff --git a/beginners-docs/C/samples/spinner.js b/beginners-docs/C/samples/spinner.js
new file mode 100644
index 0000000..affb6c1
--- /dev/null
+++ b/beginners-docs/C/samples/spinner.js
@@ -0,0 +1,80 @@
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const GLib = imports.gi.GLib;
+const Gtk = imports.gi.Gtk;
+const Gdk = imports.gi.Gdk;
+const Lang = imports.lang;
+
+const SpinnerExample = new Lang.Class ({
+ Name: 'Spinner Example',
+
+ // Create the application itself
+ _init: function () {
+ this.application = new Gtk.Application ({
+ application_id: 'org.example.jsspinner',
+ flags: Gio.ApplicationFlags.FLAGS_NONE
+ });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents windows when active
+ _onActivate: function () {
+ this._window.present ();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function () {
+ this._buildUI ();
+ },
+
+
+
+ // Build the application's UI
+ _buildUI: function () {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow ({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ title: "Spinner Example",
+ default_height: 200,
+ default_width: 200,
+ border_width: 30 });
+
+ // Create a spinner which starts spinning automatically
+ this._spinner = new Gtk.Spinner ({active: true});
+ this._window.add (this._spinner);
+
+ // Connect a keypress event to the function that makes it start or stop spinning
+ this._window.connect("key-press-event", Lang.bind(this, this._onKeyPress));
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+
+
+
+ _onKeyPress: function(widget, event) {
+
+ // Get the value of the key that was pressed
+ let keyval = event.get_keyval()[1];
+
+ // If it was the spacebar, toggle the spinner to start or stop
+ if (keyval == Gdk.KEY_space) {
+ if (this._spinner.active == true)
+ this._spinner.stop();
+ else
+ this._spinner.start();
+ }
+ }
+
+
+});
+
+// Run the application
+let app = new SpinnerExample ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/spinner.py b/beginners-docs/C/samples/spinner.py
new file mode 100644
index 0000000..517b657
--- /dev/null
+++ b/beginners-docs/C/samples/spinner.py
@@ -0,0 +1,50 @@
+from gi.repository import Gtk
+from gi.repository import Gdk
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ # a window
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="Spinner Example", application=app)
+ self.set_default_size(200, 200)
+ self.set_border_width(30)
+
+ # a spinner
+ self.spinner = Gtk.Spinner()
+ # that by default spins
+ self.spinner.start()
+ # add the spinner to the window
+ self.add(self.spinner)
+
+ # event handler
+ # a signal from the keyboard (space) controls if the spinner stops/starts
+ def do_key_press_event(self, event):
+ # keyname is the symbolic name of the key value given by the event
+ keyname = Gdk.keyval_name(event.keyval)
+ # if it is "space"
+ if keyname == "space":
+ # and the spinner is active
+ if self.spinner.get_property("active"):
+ # stop the spinner
+ self.spinner.stop()
+ # if the spinner is not active
+ else:
+ # start it again
+ self.spinner.start()
+ # stop the signal emission
+ return True
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/spinner.vala b/beginners-docs/C/samples/spinner.vala
new file mode 100644
index 0000000..7017c6d
--- /dev/null
+++ b/beginners-docs/C/samples/spinner.vala
@@ -0,0 +1,51 @@
+public class MyWindow : Gtk.ApplicationWindow {
+
+ Gtk.Widget spinner;
+
+ internal MyWindow (MyApplication app) {
+
+ Object (application: app, title: "Spinner Example");
+
+ this.set_default_size (200, 200);
+ this.border_width = 30;
+
+ spinner = new Gtk.Spinner ();
+
+ this.add (spinner);
+ (spinner as Gtk.Spinner).active = true;
+ spinner.show ();
+ }
+
+ protected override bool key_press_event (Gdk.EventKey event) {
+
+ //print (Gdk.keyval_name(event.keyval) +"\n");
+ if (Gdk.keyval_name(event.keyval) == "space") {
+
+ if ((spinner as Gtk.Spinner).active) {
+ (spinner as Gtk.Spinner).stop ();
+ //spinner.visible = false;
+ }
+ else {
+ (spinner as Gtk.Spinner).start ();
+ //spinner.visible = true;
+ }
+ }
+ return true;
+ }
+}
+
+public class MyApplication : Gtk.Application {
+
+ protected override void activate () {
+ MyWindow window = new MyWindow (this);
+ window.show ();
+ }
+
+ internal MyApplication () {
+ Object (application_id: "org.example.spinner");
+ }
+}
+
+public int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/statusbar.c b/beginners-docs/C/samples/statusbar.c
new file mode 100644
index 0000000..8819710
--- /dev/null
+++ b/beginners-docs/C/samples/statusbar.c
@@ -0,0 +1,101 @@
+#include <gtk/gtk.h>
+
+
+
+/*Callback function in which pushes an item onto the statusbar*/
+static void
+push_item (GtkWidget *widget,
+ gpointer data)
+{
+ GtkWidget *status_bar = data;
+
+ /*Create a context id, which is used to uniquely identify
+ *the source of a message*/
+ guint context_id = gtk_statusbar_get_context_id (GTK_STATUSBAR (status_bar),
+ "Statusbar example");
+
+ /*Count is used to keep track of the amount of items
+ the user is pushing/popping*/
+ static int count = 1;
+ char hold_output[20];
+
+ /*This is a safer form of the standard sprintf () function. The output is
+ gauranteed in this case to not exceed 20 characters, and the result is stored
+ into the 'hold_output' variable*/
+ g_snprintf (hold_output, 20, "Item %d", count++);
+ gtk_statusbar_push (GTK_STATUSBAR (status_bar),
+ context_id,
+ hold_output);
+}
+
+
+
+/*Callback function that is used to pop an item off the statusbar*/
+static void
+pop_item (GtkWidget *widget,
+ gpointer data )
+{
+ GtkWidget *status_bar = data;
+ guint context_id = gtk_statusbar_get_context_id (GTK_STATUSBAR (status_bar),
+ "Statusbar example");
+
+ gtk_statusbar_pop (GTK_STATUSBAR (status_bar), context_id);
+}
+
+
+
+static void
+activate (GtkApplication *app,
+ gpointer user_data)
+{
+ GtkWidget *grid;
+ GtkWidget *window;
+ GtkWidget *status_bar;
+ GtkWidget *pop_button;
+ GtkWidget *push_button;
+
+ /*Create a window with a title, border width, and a default size**/
+ window = gtk_application_window_new (app);
+ gtk_window_set_default_size (GTK_WINDOW (window), 220, 100);
+ gtk_window_set_title (GTK_WINDOW (window), "Statusbar Example");
+ gtk_container_set_border_width (GTK_CONTAINER(window), 10);
+
+ /*Create the status bar, which is held in the global variable*/
+ status_bar = gtk_statusbar_new ();
+
+ /*Create the buttons with labels*/
+ push_button = gtk_button_new_with_label ("push item");
+ pop_button = gtk_button_new_with_label ("pop last item");
+
+ /*Create the grid, and attach the buttons/statusbar accordingly*/
+ grid = gtk_grid_new ();
+ gtk_grid_attach (GTK_GRID (grid), push_button, 0,1,1,1);
+ gtk_grid_attach (GTK_GRID (grid), pop_button, 0,2,1,1);
+ gtk_grid_attach (GTK_GRID (grid), status_bar, 0,3,1,1);
+
+ /*Connecting the clicked signals to the corresponding callback functions*/
+ g_signal_connect (GTK_BUTTON (push_button), "clicked",
+ G_CALLBACK (push_item), status_bar);
+ g_signal_connect (GTK_BUTTON (pop_button), "clicked",
+ G_CALLBACK (pop_item), status_bar);
+
+ /*Attach the grid holding the child widgets onto the window, and show all*/
+ gtk_container_add (GTK_CONTAINER (window), grid);
+ gtk_widget_show_all (window);
+}
+
+
+
+int
+main (int argc, char **argv)
+{
+ GtkApplication *app;
+ int status;
+
+ app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
+ g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
+ status = g_application_run (G_APPLICATION (app), argc, argv);
+ g_object_unref (app);
+
+ return status;
+}
diff --git a/beginners-docs/C/samples/statusbar.js b/beginners-docs/C/samples/statusbar.js
new file mode 100644
index 0000000..4a0bdd7
--- /dev/null
+++ b/beginners-docs/C/samples/statusbar.js
@@ -0,0 +1,150 @@
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const StatusbarExample = new Lang.Class({
+ Name: 'Statusbar Example',
+
+ // Create the application itself
+ _init: function() {
+ this.application = new Gtk.Application({
+ application_id: 'org.example.jsstatusbar',
+ flags: Gio.ApplicationFlags.FLAGS_NONE
+ });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents window when active
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function() {
+ this._buildUI ();
+ },
+
+
+
+ // Build the application's UI
+ _buildUI: function() {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ default_height: 120,
+ default_width: 300,
+ title: "Button Clicker"});
+
+ // Create a paned interface
+ this._panes = new Gtk.Paned ({
+ orientation: Gtk.Orientation.VERTICAL });
+
+ // Create the main button
+ this._clickMe = new Gtk.Button ({
+ label: "Click Me!" });
+ this._clickMe.connect ("clicked", Lang.bind (this, this._clicked));
+
+ // Create the back button
+ this._backButton = new Gtk.Button ({
+ label: "gtk-go-back",
+ use_stock: true });
+ this._backButton.connect ("clicked", Lang.bind (this, this._back));
+
+ // Create the clear button
+ this._clearButton = new Gtk.Button ({
+ label: "gtk-clear",
+ use_stock: true });
+ this._clearButton.connect ("clicked", Lang.bind (this, this._clear));
+
+ // Put the buttons in a grid
+ this._grid = new Gtk.Grid ({
+ halign: Gtk.Align.CENTER,
+ valign: Gtk.Align.CENTER });
+ this._grid.attach (this._backButton, 0, 0, 1, 1);
+ this._grid.attach_next_to (this._clickMe, this._backButton, Gtk.PositionType.RIGHT, 1, 1);
+ this._grid.attach_next_to (this._clearButton, this._clickMe, Gtk.PositionType.RIGHT, 1, 1);
+
+ // Put the grid in a large frame that fills most of the window
+ this._topFrame = new Gtk.Frame ({
+ border_width: 20,
+ height_request: 90,
+ width_request: 300});
+ this._topFrame.add (this._grid);
+
+ // Create the statusbar
+ this._statusbar = new Gtk.Statusbar();
+
+ // Keep track of the number of times the button has been clicked
+ this.Clicks = 0;
+ this.ContextID = this._statusbar.get_context_id ("Number of Clicks");
+
+ // Give the statusbar an initial message
+ this._statusbar.push (this.ContextID, "Number of clicks: " + this.Clicks);
+
+ // Put the statusbar in its own frame at the bottom
+ this._barFrame = new Gtk.Frame ({
+ height_request: 30 });
+ this._barFrame.add (this._statusbar);
+
+ // Assemble the frames into the paned interface
+ this._panes.pack1 (this._topFrame, true, false);
+ this._panes.pack2 (this._barFrame, false, false);
+
+ // Put the panes into the window
+ this._window.add (this._panes);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+
+
+
+ _clicked: function() {
+
+ // Increment the number of clicks by 1
+ this.Clicks++;
+
+ // Update the statusbar with the new number of clicks
+ this._statusbar.push (this.ContextID, "Number of clicks: " + this.Clicks);
+
+ },
+
+
+
+ _back: function () {
+
+ // If there have been any clicks, decrement by 1 and remove last statusbar update
+ if (this.Clicks > 0 ) {
+ this.Clicks--;
+ this._statusbar.pop (this.ContextID);
+ };
+
+ },
+
+
+
+ _clear: function () {
+
+ // Reset the number of clicks
+ this.Clicks = 0;
+
+ // Wipe out all the messages pushed to the statusbar
+ this._statusbar.remove_all (this.ContextID);
+
+ // Reset the statusbar's message
+ this._statusbar.push (this.ContextID, "Number of clicks: " + this.Clicks);
+
+ }
+
+});
+
+// Run the application
+let app = new StatusbarExample ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/statusbar.py b/beginners-docs/C/samples/statusbar.py
new file mode 100644
index 0000000..bb1b622
--- /dev/null
+++ b/beginners-docs/C/samples/statusbar.py
@@ -0,0 +1,68 @@
+from gi.repository import Gtk
+from gi.repository import Gdk
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ # a window
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="StatusBar Example", application=app)
+ self.set_default_size(200, 100)
+
+ # a label
+ label = Gtk.Label(label="Press any key or ")
+
+ # a button
+ button = Gtk.Button(label="click me.")
+ # connected to a callback
+ button.connect("clicked", self.button_clicked_cb)
+
+ # the statusbar
+ self.statusbar = Gtk.Statusbar()
+ # its context_id - not shown in the UI but needed to uniquely identify
+ # the source of a message
+ self.context_id = self.statusbar.get_context_id("example")
+ # we push a message onto the statusbar's stack
+ self.statusbar.push(self.context_id, "Waiting for you to do something...")
+
+ # a grid to attach the widgets
+ grid = Gtk.Grid()
+ grid.set_column_spacing(5)
+ grid.set_column_homogeneous(True)
+ grid.set_row_homogeneous(True)
+ grid.attach(label, 0, 0, 1, 1)
+ grid.attach_next_to(button, label, Gtk.PositionType.RIGHT, 1, 1)
+ grid.attach(self.statusbar, 0, 1, 2, 1)
+
+ # add the grid to the window
+ self.add(grid)
+
+ # callback function for the button clicked
+ # if the button is clicked the event is signaled to the statusbar
+ # onto which we push a new status
+ def button_clicked_cb(self, button):
+ self.statusbar.push(self.context_id, "You clicked the button.")
+
+ # event handler
+ def do_key_press_event(self, event):
+ # any signal from the keyboard is signaled to the statusbar
+ # onto which we push a new status with the symbolic name
+ # of the key pressed
+ self.statusbar.push(self.context_id, Gdk.keyval_name(event.keyval) +
+ " key was pressed.")
+ # stop the signal emission
+ return True
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/statusbar.vala b/beginners-docs/C/samples/statusbar.vala
new file mode 100644
index 0000000..83cceaf
--- /dev/null
+++ b/beginners-docs/C/samples/statusbar.vala
@@ -0,0 +1,62 @@
+public class MyWindow : Gtk.ApplicationWindow {
+
+ Gtk.Statusbar statusbar;
+ uint context_id;
+
+ internal MyWindow (MyApplication app) {
+ Object (application: app, title: "Statusbar Example");
+
+ statusbar = new Gtk.Statusbar ();
+ context_id = statusbar.get_context_id ("example");
+ statusbar.push (context_id, "Waiting for you to do something...");
+
+ //set the default size of the window
+ this.set_default_size (200, 100);
+ var grid = new Gtk.Grid ();
+ var label = new Gtk.Label ("Press any key or ");
+
+ grid.attach (label, 0, 0, 1, 1);
+ label.show ();
+
+ var button = new Gtk.Button.with_label ("click me.");
+ grid.attach_next_to (button, label, Gtk.PositionType.RIGHT, 1, 1);
+ button.show ();
+
+ grid.attach (statusbar, 0, 1, 2, 1);
+ statusbar.show ();
+
+ grid.set_column_spacing (5);
+ grid.set_column_homogeneous (true);
+ grid.set_row_homogeneous (true);
+
+ this.add (grid);
+ grid.show ();
+
+ button.clicked.connect(button_clicked_cb);
+ }
+
+ /* Since the key-press-event is a signal received by the window, we don't need to connect
+ the window to a callback function. We can just override key_press_event. */
+ protected override bool key_press_event (Gdk.EventKey event) {
+ statusbar.push (context_id, Gdk.keyval_name(event.keyval) + " key was pressed.");
+ return true;
+ }
+
+ void button_clicked_cb (Gtk.Button button) {
+ statusbar.push (context_id, "You clicked the button.");
+ }
+}
+
+public class MyApplication : Gtk.Application {
+ protected override void activate () {
+ new MyWindow (this).show ();
+ }
+
+ internal MyApplication () {
+ Object (application_id: "org.example.status");
+ }
+}
+
+public int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/switch.c b/beginners-docs/C/samples/switch.c
new file mode 100644
index 0000000..5de330b
--- /dev/null
+++ b/beginners-docs/C/samples/switch.c
@@ -0,0 +1,77 @@
+#include <gtk/gtk.h>
+
+
+
+/*Signal handler for the "active" signal of the Switch*/
+static void
+activate_cb (GObject *switcher,
+ GParamSpec *pspec,
+ gpointer user_data)
+{
+ GtkWindow *window = user_data;
+
+ if (gtk_switch_get_active (GTK_SWITCH (switcher)))
+ gtk_window_set_title (GTK_WINDOW (window), "Switch Example");
+ else
+ gtk_window_set_title (GTK_WINDOW (window), "");
+}
+
+
+
+static void
+activate (GtkApplication *app,
+ gpointer user_data)
+{
+ GtkWidget *grid;
+ GtkWidget *window;
+ GtkWidget *label;
+ GtkWidget *switcher;
+
+ /*Create a window with a set title and default size.
+ Also, set a border width for the amount of space to leave
+ inside the window*/
+ window = gtk_application_window_new (app);
+ gtk_window_set_title (GTK_WINDOW (window), "Switch Example");
+ gtk_window_set_default_size (GTK_WINDOW (window), 300, 100);
+ gtk_container_set_border_width (GTK_CONTAINER (window), 10);
+
+ /*Create a label*/
+ label = gtk_label_new ("Title");
+
+ /*Create a switch with a default active state*/
+ switcher = gtk_switch_new ();
+ gtk_switch_set_active (GTK_SWITCH (switcher), TRUE);
+
+ /*Create a grid and set the column spacing, attach the label and
+ switch onto the grid and position them accordingly*/
+ grid = gtk_grid_new();
+ gtk_grid_set_column_spacing (GTK_GRID (grid), 10);
+ gtk_grid_attach (GTK_GRID (grid), label, 0, 0, 1, 1);
+ gtk_grid_attach (GTK_GRID (grid), switcher, 1, 0, 1, 1);
+
+ /*Connecting the clicked signal to the callback function*/
+ g_signal_connect (GTK_SWITCH (switcher),
+ "notify::active",
+ G_CALLBACK (activate_cb),
+ window);
+
+ gtk_container_add (GTK_CONTAINER (window), GTK_WIDGET (grid));
+
+ gtk_widget_show_all (window);
+}
+
+
+
+int
+main (int argc, char **argv)
+{
+ GtkApplication *app;
+ int status;
+
+ app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
+ g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
+ status = g_application_run (G_APPLICATION (app), argc, argv);
+ g_object_unref (app);
+
+ return status;
+}
diff --git a/beginners-docs/C/samples/switch.js b/beginners-docs/C/samples/switch.js
new file mode 100644
index 0000000..d27b42b
--- /dev/null
+++ b/beginners-docs/C/samples/switch.js
@@ -0,0 +1,179 @@
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const SwitchExample = new Lang.Class({
+ Name: 'Switch Example',
+
+ // Create the application itself
+ _init: function() {
+ this.application = new Gtk.Application({
+ application_id: 'org.example.jsswitch'
+ });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents window when active
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ // Callback function for 'startup' signal creates the menu and builds the UI
+ _onStartup: function() {
+ this._initMenus();
+ this._buildUI ();
+ },
+
+
+
+ // Build the application's UI
+ _buildUI: function() {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ border_width: 20,
+ title: "Animal Creator"});
+
+ // Create the image widget and set its default picture
+ this._image = new Gtk.Image ({file: "redfox.png"});
+
+ // Create a label for the first switch
+ this._flyLabel = new Gtk.Label ({
+ label: "Make it fly",
+ margin_right: 30});
+
+ // Create the first switch and set its default position
+ this._flySwitch = new Gtk.Switch ({active: false});
+ this._flySwitch.connect ('notify::active', Lang.bind (this, this._switchFlip));
+
+ // Create a label for the second switch
+ this._birdLabel = new Gtk.Label ({
+ label: "Make it a bird",
+ margin_right: 30});
+
+ // Create the second switch
+ this._birdSwitch = new Gtk.Switch ({active: false});
+ this._birdSwitch.connect ('notify::active', Lang.bind (this, this._switchFlip));
+
+ // Create a grid for the labels and switches beneath the picture
+ this._UIGrid = new Gtk.Grid ({
+ halign: Gtk.Align.CENTER,
+ valign: Gtk.Align.CENTER,
+ margin_top: 20});
+
+ // Attach the labels and switches to that grid
+ this._UIGrid.attach (this._flyLabel, 0, 0, 1, 1);
+ this._UIGrid.attach (this._flySwitch, 1, 0, 1, 1);
+ this._UIGrid.attach (this._birdLabel, 0, 1, 1, 1);
+ this._UIGrid.attach (this._birdSwitch, 1, 1, 1, 1);
+
+ // Create a master grid to put both the UI and the picture into
+ this._mainGrid = new Gtk.Grid ({
+ halign: Gtk.Align.CENTER,
+ valign: Gtk.Align.CENTER });
+
+ // Attach the picture and the UI grid to the master grid
+ this._mainGrid.attach (this._image, 0, 0, 1, 1);
+ this._mainGrid.attach (this._UIGrid, 0, 1, 1, 1);
+
+ // Add the master grid to the window
+ this._window.add (this._mainGrid);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+
+
+
+ _switchFlip: function() {
+
+ // Change the picture depending on which switches are flipped
+ if (this._flySwitch.get_active()) {
+
+ if (this._birdSwitch.get_active()) this._image.set_from_file ("muteswan.png");
+
+ else this._image.set_from_file ("fruitbat.png");
+ }
+
+ else {
+
+ if (this._birdSwitch.get_active()) this._image.set_from_file ("gentoopenguin.png");
+
+ else this._image.set_from_file ("redfox.png");
+
+ }
+
+ },
+
+
+
+ _initMenus: function() {
+
+ // Build the application's menu so we can have an "About" button
+ let menu = new Gio.Menu();
+ menu.append("About", 'app.about');
+ menu.append("Quit",'app.quit');
+ this.application.set_app_menu(menu);
+
+ // Bind the "About" button to the _showAbout() function
+ let aboutAction = new Gio.SimpleAction ({ name: 'about' });
+ aboutAction.connect('activate', Lang.bind(this,
+ function() {
+ this._showAbout();
+ }));
+ this.application.add_action(aboutAction);
+
+ // Bind the "Quit" button to the function that closes the window
+ let quitAction = new Gio.SimpleAction ({ name: 'quit' });
+ quitAction.connect('activate', Lang.bind(this,
+ function() {
+ this._window.destroy();
+ }));
+ this.application.add_action(quitAction);
+ },
+
+
+
+ _showAbout: function () {
+
+ // String arrays of the names of the people involved in the project
+ var artists = ['Rob Lee http://en.wikipedia.org/wiki/File:Fuzzy_Freddy.png', 'Ken Funakoshi
http://en.wikipedia.org/wiki/File:Pygoscelis_papua_-Nagasaki_Penguin_Aquarium_-swimming_underwater-8a.png',
'Shek Graham http://www.flickr.com/photos/shekgraham/127431519/in/photostream/', 'Mindaugas Urbonas
http://commons.wikimedia.org/wiki/File:Mute_Swan-Mindaugas_Urbonas.png'];
+ var authors = ["GNOME Documentation Team"];
+ var documenters = ["GNOME Documentation Team"];
+
+ // Create the About dialog
+ let aboutDialog = new Gtk.AboutDialog({
+ title: "AboutDialog Example",
+ program_name: "Animal Creator",
+ copyright: "Copyright \xa9 2012 GNOME Documentation Team\n\nRed fox photo licensed CC-By by Rob
Lee\nGentoo penguin photo licensed CC-By-SA by Ken Funakoshi\nFruit bat photo licensed CC-By by Shek
Graham\nMute swan photo licensed CC-By-SA by Mindaugas Urbonas\nLinks to the originals are available under
Credits.\n\nHave you hugged a penguin today?",
+ artists: artists,
+ authors: authors,
+ documenters: documenters,
+ website: "http://developer.gnome.org";,
+ website_label: "GNOME Developer Website" });
+
+ // Attach the About dialog to the window
+ aboutDialog.modal = true;
+ aboutDialog.transient_for = this._window;
+
+ // Show the About dialog
+ aboutDialog.show();
+
+ // Connect the Close button to the destroy signal for the dialog
+ aboutDialog.connect('response', function() {
+ aboutDialog.destroy();
+ });
+ }
+
+});
+
+// Run the application
+let app = new SwitchExample ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/switch.py b/beginners-docs/C/samples/switch.py
new file mode 100644
index 0000000..c830ee6
--- /dev/null
+++ b/beginners-docs/C/samples/switch.py
@@ -0,0 +1,56 @@
+from gi.repository import Gtk
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ # a window
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="Switch Example", application=app)
+ self.set_default_size(300, 100)
+ self.set_border_width(10)
+
+ # a switch
+ switch = Gtk.Switch()
+ # turned on by default
+ switch.set_active(True)
+ # connect the signal notify::active emitted by the switch
+ # to the callback function activate_cb
+ switch.connect("notify::active", self.activate_cb)
+
+ # a label
+ label = Gtk.Label()
+ label.set_text("Title")
+
+ # a grid to allocate the widgets
+ grid = Gtk.Grid()
+ grid.set_column_spacing (10);
+ grid.attach (label, 0, 0, 1, 1);
+ grid.attach (switch, 1, 0, 1, 1);
+
+ # add the grid to the window
+ self.add(grid)
+
+ # Callback function. Since the signal is notify::active
+ # we need the argument 'active'
+ def activate_cb(self, button, active):
+ # if the button (i.e. the switch) is active, set the title
+ # of the window to "Switch Example"
+ if button.get_active():
+ self.set_title("Switch Example")
+ # else, set it to "" (empty string)
+ else:
+ self.set_title("")
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/switch.vala b/beginners-docs/C/samples/switch.vala
new file mode 100644
index 0000000..58f085d
--- /dev/null
+++ b/beginners-docs/C/samples/switch.vala
@@ -0,0 +1,46 @@
+class MyWindow : Gtk.ApplicationWindow {
+
+ internal MyWindow (MyApplication app) {
+ Object (application: app, title: "Switch Example");
+
+ this.set_default_size (300, 100);
+ this.border_width = 10;
+
+ var label = new Gtk.Label ("Title");
+ var switcher = new Gtk.Switch ();
+
+ switcher.set_active (true);
+
+ switcher.notify["active"].connect (switcher_cb);
+
+ var grid = new Gtk.Grid ();
+ grid.set_column_spacing (10);
+ grid.attach (label, 0, 0, 1, 1);
+ grid.attach (switcher, 1, 0, 1, 1);
+
+ this.add (grid);
+ }
+
+ void switcher_cb (Object switcher, ParamSpec pspec) {
+ if ((switcher as Gtk.Switch).get_active())
+ this.set_title ("Switch Example");
+ else
+ this.set_title ("");
+ }
+}
+
+class MyApplication : Gtk.Application {
+ protected override void activate () {
+
+ var window = new MyWindow (this);
+ window.show_all (); //show all the things
+ }
+
+ internal MyApplication () {
+ Object (application_id: "org.example.checkbutton");
+ }
+}
+
+int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/textview.c b/beginners-docs/C/samples/textview.c
new file mode 100644
index 0000000..8ee3d0b
--- /dev/null
+++ b/beginners-docs/C/samples/textview.c
@@ -0,0 +1,71 @@
+#include <gtk/gtk.h>
+
+
+
+static void
+activate (GtkApplication *app,
+ gpointer user_data)
+{
+ /* Declare variables */
+ GtkWidget *window;
+ GtkWidget *text_view;
+ GtkWidget *scrolled_window;
+
+ GtkTextBuffer *buffer;
+
+
+ /* Create a window with a title, and a default size */
+ window = gtk_application_window_new (app);
+ gtk_window_set_title (GTK_WINDOW (window), "TextView Example");
+ gtk_window_set_default_size (GTK_WINDOW (window), 220, 200);
+
+
+ /* The text buffer represents the text being edited */
+ buffer = gtk_text_buffer_new (NULL);
+
+
+ /* Text view is a widget in which can display the text buffer.
+ * The line wrapping is set to break lines in between words.
+ */
+ text_view = gtk_text_view_new_with_buffer (buffer);
+ gtk_text_view_set_wrap_mode (GTK_TEXT_VIEW (text_view), GTK_WRAP_WORD);
+
+
+ /* Create the scrolled window. Usually NULL is passed for both parameters so
+ * that it creates the horizontal/vertical adjustments automatically. Setting
+ * the scrollbar policy to automatic allows the scrollbars to only show up
+ * when needed.
+ */
+ scrolled_window = gtk_scrolled_window_new (NULL, NULL);
+ gtk_scrolled_window_set_policy (GTK_SCROLLED_WINDOW (scrolled_window),
+ GTK_POLICY_AUTOMATIC,
+ GTK_POLICY_AUTOMATIC);
+ /* The function directly below is used to add children to the scrolled window
+ * with scrolling capabilities (e.g text_view), otherwise,
+ * gtk_scrolled_window_add_with_viewport() would have been used
+ */
+ gtk_container_add (GTK_CONTAINER (scrolled_window),
+ text_view);
+ gtk_container_set_border_width (GTK_CONTAINER (scrolled_window), 5);
+
+
+ gtk_container_add (GTK_CONTAINER (window), scrolled_window);
+
+ gtk_widget_show_all (window);
+}
+
+
+
+int
+main (int argc, char **argv)
+{
+ GtkApplication *app;
+ int status;
+
+ app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
+ g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
+ status = g_application_run (G_APPLICATION (app), argc, argv);
+ g_object_unref (app);
+
+ return status;
+}
diff --git a/beginners-docs/C/samples/textview.js b/beginners-docs/C/samples/textview.js
new file mode 100644
index 0000000..3979890
--- /dev/null
+++ b/beginners-docs/C/samples/textview.js
@@ -0,0 +1,154 @@
+#!/usr/bin/gjs
+
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const TextViewExample = new Lang.Class ({
+ Name: 'TextView Example',
+
+ // Create the application itself
+ _init: function () {
+ this.application = new Gtk.Application ({
+ application_id: 'org.example.jstextview' });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents windows when active
+ _onActivate: function () {
+ this._window.present ();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function () {
+ this._buildUI ();
+ },
+
+
+
+ // Build the application's UI
+ _buildUI: function () {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow ({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ title: "Talk to a Penguin",
+ default_height: 400,
+ default_width: 440,
+ border_width: 20 });
+
+ // Create a label for the penguin to talk to you
+ this._penguin = new Gtk.Label ({
+ height_request: 180,
+ width_request: 400,
+ label: "Squaaaak?",
+ wrap: true });
+
+ // Create a textview for you to talk to the penguin
+ this.buffer = new Gtk.TextBuffer();
+ this._textView = new Gtk.TextView ({
+ buffer: this.buffer,
+ editable: true,
+ wrap_mode: Gtk.WrapMode.WORD });
+
+ // Create a "scrolled window" to put your textview in so it will scroll
+ this._scrolled = new Gtk.ScrolledWindow ({
+ hscrollbar_policy: Gtk.PolicyType.AUTOMATIC,
+ vscrollbar_policy: Gtk.PolicyType.AUTOMATIC,
+ shadow_type: Gtk.ShadowType.ETCHED_IN,
+ height_request: 180,
+ width_request: 400, });
+
+ // Put the textview into the scrolled window
+ this._scrolled.add_with_viewport (this._textView);
+
+ // Create a grid to organize them in
+ this._grid = new Gtk.Grid ({
+ halign: Gtk.Align.CENTER,
+ valign: Gtk.Align.CENTER });
+
+ // Put the label and textview in the grid one on top of the other
+ this._grid.attach (this._penguin, 0, 0, 1, 1);
+ this._grid.attach (this._scrolled, 0, 1, 1, 1);
+
+ // Create a button to send your message to the penguin
+ this._send = new Gtk.Button ({
+ halign: Gtk.Align.END,
+ margin_top: 20,
+ label: "Send" });
+ this._send.connect ('clicked', Lang.bind (this, this._chat));
+
+ // Create a grid that will have the other grid on top and the button on bottom
+ this._mainGrid = new Gtk.Grid ({
+ halign: Gtk.Align.CENTER,
+ valign: Gtk.Align.CENTER });
+
+ // Add the other grid and the button to the main grid
+ this._mainGrid.attach (this._grid, 0, 0, 1, 1);
+ this._mainGrid.attach (this._send, 0, 1, 1, 1);
+
+ // Attach the main grid to the window
+ this._window.add (this._mainGrid);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+
+
+
+ _chat: function () {
+
+ // Create a random number to determine what the penguin says
+ this.number = Math.floor ((Math.random() * 3) + 1);
+
+ // Did you actually say anything?
+ if (this.buffer.text) {
+
+ // Did you mention fish?
+ if (this.buffer.text.match (/fish/gi)) {
+
+ // Have the penguin squaak about fish
+ if (this.number == 1)
+ this._penguin.set_label ("FISH!");
+
+ else if (this.number == 2)
+ this._penguin.set_label ("Fish fish fish fish. Fish!");
+
+ else
+ this._penguin.set_label ("Fish? Fish fish fish. Fish fish. FISH!");
+
+ }
+
+ // I guess you didn't mention fish
+ else {
+
+ // Have the penguin talk about penguinny stuff
+ if (this.number == 1)
+ this._penguin.set_label ("SQUAAK!");
+
+ else if (this.number == 2)
+ this._penguin.set_label ("Ork ork ork ork squaak. Squaak squaak! *waves flippers*");
+
+ else
+ this._penguin.set_label ("Ork ork ork ork ork?");
+
+ }
+
+ }
+
+ // Clear the buffer
+ this.buffer.text = "";
+
+ // Give focus back to the textview so you don't have to click it again
+ this._textView.has_focus = true;
+
+ }
+
+});
+
+// Run the application
+let app = new TextViewExample ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/textview.py b/beginners-docs/C/samples/textview.py
new file mode 100644
index 0000000..d13dcc4
--- /dev/null
+++ b/beginners-docs/C/samples/textview.py
@@ -0,0 +1,41 @@
+from gi.repository import Gtk
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="TextView Example", application=app)
+ self.set_default_size(300, 450)
+
+ # a scrollbar for the child widget (that is going to be the textview)
+ scrolled_window = Gtk.ScrolledWindow()
+ scrolled_window.set_border_width(5)
+ # we scroll only if needed
+ scrolled_window.set_policy(Gtk.PolicyType.AUTOMATIC, Gtk.PolicyType.AUTOMATIC)
+
+ # a text buffer (stores text)
+ buffer1 = Gtk.TextBuffer()
+
+ # a textview (displays the buffer)
+ textview = Gtk.TextView(buffer=buffer1)
+ # wrap the text, if needed, breaking lines in between words
+ textview.set_wrap_mode(Gtk.WrapMode.WORD)
+
+ # textview is scrolled
+ scrolled_window.add(textview)
+
+ self.add(scrolled_window)
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/textview.vala b/beginners-docs/C/samples/textview.vala
new file mode 100644
index 0000000..e9bcde7
--- /dev/null
+++ b/beginners-docs/C/samples/textview.vala
@@ -0,0 +1,33 @@
+/* This is the application. */
+public class MyApplication : Gtk.Application {
+ /* Override the 'activate' signal of GLib.Application. */
+ protected override void activate () {
+ /* Create the window of this applicationt. */
+ new MyWindow (this).show_all ();
+ }
+}
+
+/* This is the window. */
+class MyWindow: Gtk.ApplicationWindow {
+ internal MyWindow (MyApplication app) {
+ Object (application: app, title: "TextView Example");
+ this.set_default_size (220, 200);
+
+ var buffer = new Gtk.TextBuffer (null); //stores text to be displayed
+ var textview = new Gtk.TextView.with_buffer (buffer); //displays TextBuffer
+ textview.set_wrap_mode (Gtk.WrapMode.WORD); //sets line wrapping
+
+ var scrolled_window = new Gtk.ScrolledWindow (null, null);
+ scrolled_window.set_policy (Gtk.PolicyType.AUTOMATIC,
+ Gtk.PolicyType.AUTOMATIC);
+
+ scrolled_window.add (textview);
+ scrolled_window.set_border_width (5);
+
+ this.add (scrolled_window);
+ }
+}
+/* main creates and runs the application. */
+public int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/togglebutton.c b/beginners-docs/C/samples/togglebutton.c
new file mode 100644
index 0000000..027ebb3
--- /dev/null
+++ b/beginners-docs/C/samples/togglebutton.c
@@ -0,0 +1,78 @@
+#include <gtk/gtk.h>
+
+
+
+/*This is the callback function. It is a handler function
+which reacts to the signal. In this case, it will cause the
+spinner to start and stop according to how many times the user
+presses the button.*/
+static void
+button_toggled_cb (GtkWidget *button,
+ gpointer user_data)
+{
+ GtkWidget *spinner = user_data;
+
+ if (gtk_toggle_button_get_active (GTK_TOGGLE_BUTTON(button)))
+ gtk_spinner_start (GTK_SPINNER (spinner));
+ else {
+ gtk_spinner_stop (GTK_SPINNER (spinner));
+ }
+}
+
+
+
+static void
+activate (GtkApplication *app,
+ gpointer user_data)
+{
+ GtkWidget *window;
+ GtkWidget *button;
+ GtkWidget *grid;
+ GtkWidget *spinner;
+
+ /*Create a window with a title, border width and a default size*/
+ window = gtk_application_window_new (app);
+ gtk_window_set_title (GTK_WINDOW (window), "ToggleButton Example");
+ gtk_window_set_default_size (GTK_WINDOW (window), 300, 300);
+ gtk_container_set_border_width(GTK_CONTAINER(window), 30);
+
+ /*Create a togglebutton with a label*/
+ button = gtk_toggle_button_new_with_label ("Start/Stop");
+
+ /*Create a spinner, with extra horizontal and vertical space*/
+ spinner = gtk_spinner_new ();
+ gtk_widget_set_hexpand (spinner, TRUE);
+ gtk_widget_set_vexpand (spinner, TRUE);
+
+ /*Create a grid and set the row spacing, attach the togglebutton
+ and spinner onto the grid and position them accordingly*/
+ grid = gtk_grid_new();
+ gtk_grid_set_row_homogeneous (GTK_GRID (grid), FALSE);
+ gtk_grid_set_row_spacing (GTK_GRID (grid), 15);
+ gtk_grid_attach (GTK_GRID (grid), spinner, 0, 0, 1, 1);
+ gtk_grid_attach (GTK_GRID (grid), button, 0, 1, 1, 1);
+
+ gtk_container_add (GTK_CONTAINER (window), grid);
+
+ /*Connecting the toggled signal to the callback*/
+ g_signal_connect (GTK_TOGGLE_BUTTON (button), "toggled",
+ G_CALLBACK (button_toggled_cb), spinner);
+
+ gtk_widget_show_all (window);
+}
+
+
+
+int
+main (int argc, char **argv)
+{
+ GtkApplication *app;
+ int status;
+
+ app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
+ g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
+ status = g_application_run (G_APPLICATION (app), argc, argv);
+ g_object_unref (app);
+
+ return status;
+}
diff --git a/beginners-docs/C/samples/togglebutton.js b/beginners-docs/C/samples/togglebutton.js
new file mode 100644
index 0000000..0fd7174
--- /dev/null
+++ b/beginners-docs/C/samples/togglebutton.js
@@ -0,0 +1,82 @@
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const ToggleButtonExample = new Lang.Class({
+ Name: 'ToggleButton Example',
+
+ // Create the application itself
+ _init: function() {
+ this.application = new Gtk.Application({
+ application_id: 'org.example.jstogglebutton',
+ flags: Gio.ApplicationFlags.FLAGS_NONE
+ });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents window when active
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function() {
+ this._buildUI ();
+ },
+
+
+
+ // Build the application's UI
+ _buildUI: function() {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ default_height: 300,
+ default_width: 300,
+ border_width: 30,
+ title: "ToggleButton Example"});
+
+ // Create the spinner that the button stops and starts
+ this._spinner = new Gtk.Spinner ({hexpand: true, vexpand: true});
+
+ // Create the togglebutton that starts and stops the spinner
+ this._toggleButton = new Gtk.ToggleButton ({label: "Start/Stop"});
+ this._toggleButton.connect ('toggled', Lang.bind (this, this._onToggle));
+
+ // Create a grid and put everything in it
+ this._grid = new Gtk.Grid ({
+ row_homogeneous: false,
+ row_spacing: 15});
+ this._grid.attach (this._spinner, 0, 0, 1, 1);
+ this._grid.attach (this._toggleButton, 0, 1, 1, 1);
+
+ // Add the grid to the window
+ this._window.add (this._grid);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+
+
+
+ _onToggle: function() {
+
+ // Start or stop the spinner
+ if (this._toggleButton.get_active ())
+ this._spinner.start ();
+ else this._spinner.stop ();
+
+ }
+
+});
+
+// Run the application
+let app = new ToggleButtonExample ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/togglebutton.py b/beginners-docs/C/samples/togglebutton.py
new file mode 100644
index 0000000..f741985
--- /dev/null
+++ b/beginners-docs/C/samples/togglebutton.py
@@ -0,0 +1,56 @@
+from gi.repository import Gtk
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ # a window
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="ToggleButton Example", application=app)
+ self.set_default_size(300, 300)
+ self.set_border_width(30)
+
+ # a spinner animation
+ self.spinner = Gtk.Spinner()
+ # with extra horizontal space
+ self.spinner.set_hexpand(True)
+ # with extra vertical space
+ self.spinner.set_vexpand(True)
+
+ # a togglebutton
+ button = Gtk.ToggleButton.new_with_label("Start/Stop")
+ # connect the signal "toggled" emitted by the togglebutton
+ # when its state is changed to the callback function toggled_cb
+ button.connect("toggled", self.toggled_cb)
+
+ # a grid to allocate the widgets
+ grid = Gtk.Grid()
+ grid.set_row_homogeneous(False);
+ grid.set_row_spacing(15);
+ grid.attach(self.spinner, 0, 0, 1, 1);
+ grid.attach(button, 0, 1, 1, 1);
+
+ # add the grid to the window
+ self.add(grid)
+
+ # callback function for the signal "toggled"
+ def toggled_cb(self, button):
+ # if the togglebutton is active, start the spinner
+ if button.get_active():
+ self.spinner.start()
+ # else, stop it
+ else:
+ self.spinner.stop()
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/togglebutton.vala b/beginners-docs/C/samples/togglebutton.vala
new file mode 100644
index 0000000..92048ef
--- /dev/null
+++ b/beginners-docs/C/samples/togglebutton.vala
@@ -0,0 +1,55 @@
+public class MyWindow : Gtk.ApplicationWindow {
+
+ Gtk.Spinner spinner;
+
+ internal MyWindow (MyApplication app) {
+ Object (application: app, title: "ToggleButton Example");
+
+ this.set_default_size (300, 300);
+ this.border_width = 30;
+
+ /*Spinner*/
+ spinner = new Gtk.Spinner ();
+ spinner.set_hexpand (true);
+ spinner.set_vexpand (true);
+
+ /*ToggleButton*/
+ var togglebutton = new Gtk.ToggleButton.with_label ("Start/Stop");
+ togglebutton.toggled.connect (toggled_cb);
+
+ /*Grid*/
+ var grid = new Gtk.Grid ();
+ grid.set_row_homogeneous (false);
+ grid.set_row_spacing (15);
+ grid.attach (spinner, 0, 0, 1, 1);
+ grid.attach (togglebutton, 0, 1, 1, 1);
+
+ this.add (grid);
+ }
+
+ void toggled_cb (Gtk.ToggleButton button) {
+ if (button.get_active()) {
+ spinner.start ();
+ }
+ else {
+ spinner.stop ();
+ }
+ }
+}
+
+public class MyApplication : Gtk.Application {
+
+ protected override void activate () {
+
+ //Show all the things
+ new MyWindow (this).show_all ();
+ }
+
+ internal MyApplication () {
+ Object (application_id: "org.example.spinner");
+ }
+}
+
+public int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/toolbar.c b/beginners-docs/C/samples/toolbar.c
new file mode 100644
index 0000000..acd8f8e
--- /dev/null
+++ b/beginners-docs/C/samples/toolbar.c
@@ -0,0 +1,222 @@
+#include <gtk/gtk.h>
+
+/* Declare these two Toolbuttons, as they will be used in both the fullscreen
+ * action callback as well as the activate function.
+ */
+GtkToolItem *fullscreen_button;
+GtkToolItem *leavefullscreen_button;
+
+
+
+/* Callback function for the undo action */
+static void
+undo_callback (GSimpleAction *simple,
+ GVariant *parameter,
+ gpointer user_data)
+{
+ g_print ("You clicked \"Undo\".\n");
+}
+
+
+
+/* Callback function for the fullscreen action */
+static void
+fullscreen_callback (GSimpleAction *simple,
+ GVariant *parameter,
+ gpointer user_data)
+{
+ GdkWindow *window = gtk_widget_get_window (GTK_WIDGET (user_data));
+
+ GdkWindowState current_state = gdk_window_get_state (window);
+
+ /* If the window is currently in fullscreen mode */
+ if ( (current_state & GDK_WINDOW_STATE_FULLSCREEN) != 0)
+ {
+ /* Minimize the window and change to the fullscreen button */
+ gdk_window_unfullscreen (window);
+ gtk_widget_hide (GTK_WIDGET(leavefullscreen_button));
+ gtk_widget_show (GTK_WIDGET(fullscreen_button));
+ }
+ else
+ {
+ /* Maximize the window, and change to the unfullscreen button */
+ gdk_window_fullscreen (window);
+ gtk_widget_hide (GTK_WIDGET (fullscreen_button));
+ gtk_widget_show (GTK_WIDGET (leavefullscreen_button));
+ }
+}
+
+
+
+/* Our "main" function */
+static void
+activate (GtkApplication *app,
+ gpointer user_data)
+{
+ /* Initialize variables */
+ GtkWidget *window;
+ GtkWidget *grid;
+ GtkWidget *toolbar;
+
+ GtkToolItem *new_button;
+ GtkToolItem *open_button;
+ GtkToolItem *undo_button;
+
+ GtkStyleContext *style_context;
+
+ GSimpleAction *undo_action;
+ GSimpleAction *fullscreen_action;
+ GSimpleAction *leavefullscreen_action;
+
+ /* Create a window with a title and a default size */
+ window = gtk_application_window_new (app);
+ gtk_window_set_title (GTK_WINDOW (window), "Toolbar Example");
+ gtk_window_set_default_size (GTK_WINDOW (window), 400, 200);
+
+ /* Here we begin to create the toolbar */
+ toolbar = gtk_toolbar_new ();
+ /* Set the toolbar to be the primary toolbar of the application */
+ style_context = gtk_widget_get_style_context (toolbar);
+ gtk_style_context_add_class (style_context, GTK_STYLE_CLASS_PRIMARY_TOOLBAR);
+
+ /* Create a button for the "new" action, with a stock image */
+ new_button = gtk_tool_button_new_from_stock (GTK_STOCK_NEW);
+ /* Show the "new" button's label */
+ gtk_tool_item_set_is_important (new_button, TRUE);
+ /* Insert the button in the desired position within the toolbar */
+ gtk_toolbar_insert (GTK_TOOLBAR (toolbar), new_button, 0);
+ /* Show the button */
+ gtk_widget_show (GTK_WIDGET (new_button));
+ /* Set the action name for the "new" action. We use "app.new" to
+ * indicate that the action controls the application.
+ */
+ gtk_actionable_set_action_name (GTK_ACTIONABLE (new_button), "app.new");
+
+ /* Repeat the same steps for the "open" action */
+ open_button = gtk_tool_button_new_from_stock (GTK_STOCK_OPEN);
+ gtk_tool_item_set_is_important (open_button, TRUE);
+ gtk_toolbar_insert (GTK_TOOLBAR (toolbar), open_button, 1);
+ gtk_widget_show (GTK_WIDGET (open_button));
+ gtk_actionable_set_action_name (GTK_ACTIONABLE (open_button), "app.open");
+
+ /* Repeat the same steps for the "undo" action */
+ undo_button = gtk_tool_button_new_from_stock (GTK_STOCK_UNDO);
+ gtk_tool_item_set_is_important (undo_button, TRUE);
+ gtk_toolbar_insert (GTK_TOOLBAR (toolbar), undo_button, 2);
+ gtk_widget_show (GTK_WIDGET (undo_button));
+ /* In this case, we use "win.undo" to indicate that
+ * the action controls only the window
+ */
+ gtk_actionable_set_action_name (GTK_ACTIONABLE (undo_button), "win.undo");
+
+ /* Repeat the same steps for the "fullscreen" action */
+ fullscreen_button = gtk_tool_button_new_from_stock (GTK_STOCK_FULLSCREEN);
+ gtk_tool_item_set_is_important (fullscreen_button, TRUE);
+ gtk_toolbar_insert (GTK_TOOLBAR (toolbar), fullscreen_button, 3);
+ gtk_widget_show (GTK_WIDGET (fullscreen_button));
+ gtk_actionable_set_action_name (GTK_ACTIONABLE (fullscreen_button),
+ "win.fullscreen");
+
+ /*Repeat the same steps for the "leavefullscreen" action */
+ leavefullscreen_button = gtk_tool_button_new_from_stock (GTK_STOCK_LEAVE_FULLSCREEN);
+ gtk_tool_item_set_is_important (leavefullscreen_button, TRUE);
+ gtk_toolbar_insert (GTK_TOOLBAR (toolbar), leavefullscreen_button, 3);
+ /* The only difference here is that we don't show the leavefullscreen button,
+ * as it will later replace the fullscreen button.
+ */
+ gtk_actionable_set_action_name (GTK_ACTIONABLE (leavefullscreen_button),
+ "win.leavefullscreen");
+
+ /* Once we've created the bare-bones of the toolbar, we make
+ * sure it has enough horizontal space.
+ */
+ gtk_widget_set_hexpand (toolbar, TRUE);
+ gtk_widget_show (toolbar);
+
+ /* Attach the toolbar to the grid and add it to the overall window */
+ grid = gtk_grid_new ();
+ gtk_grid_attach (GTK_GRID (grid), toolbar, 0, 0, 1, 1);
+ gtk_container_add (GTK_CONTAINER (window), GTK_WIDGET (grid));
+ gtk_widget_show (GTK_WIDGET (grid));
+
+ /* Use the action names to create the actions that control the window, and
+ * connect them to the appropriate callbackfunctions.
+ */
+ undo_action = g_simple_action_new ("undo", NULL);
+ g_signal_connect (undo_action, "activate", G_CALLBACK (undo_callback),
+ GTK_WINDOW (window));
+ g_action_map_add_action (G_ACTION_MAP (window), G_ACTION (undo_action));
+
+ fullscreen_action = g_simple_action_new ("fullscreen", NULL);
+ g_signal_connect (fullscreen_action, "activate", G_CALLBACK (fullscreen_callback),
+ GTK_WINDOW (window));
+ g_action_map_add_action (G_ACTION_MAP (window), G_ACTION (fullscreen_action));
+
+ leavefullscreen_action = g_simple_action_new ("leavefullscreen", NULL);
+ g_signal_connect (leavefullscreen_action, "activate", G_CALLBACK (fullscreen_callback),
+ GTK_WINDOW (window));
+ g_action_map_add_action (G_ACTION_MAP (window), G_ACTION (leavefullscreen_action));
+
+ gtk_widget_show (window);
+}
+
+
+
+/* Callback function for the new action */
+static void
+new_callback (GSimpleAction *simple,
+ GVariant *parameter,
+ gpointer user_data)
+{
+ g_print ("You clicked \"New\".\n");
+}
+
+
+
+/* Callback function for the open action */
+static void
+open_callback (GSimpleAction *simple,
+ GVariant *parameter,
+ gpointer user_data)
+{
+ g_print ("You clicked \"Open\".\n");
+}
+
+
+
+/* In this function, we create the actions in which control the window, and
+ * connect their signals to the appropriate callback function.
+ */
+static void
+startup (GApplication *app,
+ gpointer user_data)
+{
+ GSimpleAction *new_action;
+ GSimpleAction *open_action;
+
+ new_action = g_simple_action_new ("new", NULL);
+ g_signal_connect (new_action, "activate", G_CALLBACK (new_callback), app);
+ g_action_map_add_action (G_ACTION_MAP (app), G_ACTION (new_action));
+
+ open_action = g_simple_action_new ("open", NULL);
+ g_signal_connect (open_action, "activate", G_CALLBACK (open_callback), app);
+ g_action_map_add_action (G_ACTION_MAP (app), G_ACTION (open_action));
+}
+
+
+
+/* Startup function for the application */
+int
+main (int argc, char **argv)
+{
+ GtkApplication *app;
+ int status;
+
+ app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
+ g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
+ g_signal_connect (app, "startup", G_CALLBACK (startup), NULL);
+ status = g_application_run (G_APPLICATION (app), argc, argv);
+ g_object_unref (app);
+
+ return status;
+}
diff --git a/beginners-docs/C/samples/toolbar.js b/beginners-docs/C/samples/toolbar.js
new file mode 100644
index 0000000..8a2d63b
--- /dev/null
+++ b/beginners-docs/C/samples/toolbar.js
@@ -0,0 +1,171 @@
+#!/usr/bin/gjs
+
+const Gdk = imports.gi.Gdk;
+const Gio = imports.gi.Gio;
+const GLib = imports.gi.GLib;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const Application = new Lang.Class({
+ Name: 'Application',
+
+ //create the application
+ _init: function() {
+ this.application = new Gtk.Application({
+ application_id: 'org.example.myapp',
+ flags: Gio.ApplicationFlags.FLAGS_NONE
+ });
+
+ //connect to 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ //create the UI (in this case it's just the ApplicationWindow
+ _buildUI: function() {
+ this._window = new Gtk.ApplicationWindow({ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ title: "Toolbar Example",
+ default_height: 200,
+ default_width: 400 });
+
+ this._grid = new Gtk.Grid();
+ this._window.add(this._grid);
+ this._grid.show();
+
+ this._createToolbar();
+ this._toolbar.set_hexpand(true);
+ this._grid.attach(this._toolbar, 0, 0, 1, 1);
+
+ //show the toolbar and window
+ this._toolbar.show();
+ this._window.show();
+ },
+
+ //callback function for 'activate' signal
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ //callback function for 'startup' signal
+ _onStartup: function() {
+ this._initMenus();
+ this._buildUI();
+ },
+
+ //create the toolbar, its toolbuttons and their actions
+ _createToolbar: function() {
+
+ this._toolbar = new Gtk.Toolbar();
+ this._toolbar.get_style_context().add_class(Gtk.STYLE_CLASS_PRIMARY_TOOLBAR);
+
+ //create the "New" ToolButton and its SimpleAction.
+ //Using actions allows you to add them to the app menu
+ //without duplicating code.
+ let newAction = new Gio.SimpleAction({ name: 'new'});
+ newAction.connect('activate', Lang.bind(this,
+ function() {
+ this._newCB();
+ }));
+ this.application.add_action(newAction);//note: this action is added to the app
+
+ this._newButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_NEW);
+ this._newButton.is_important = true;
+ this._toolbar.add(this._newButton);
+ this._newButton.show();
+ this._newButton.action_name = "app.new";
+
+ //create the "Open" ToolButton and its SimpleAction
+ let openAction = new Gio.SimpleAction({ name: 'open'});
+ openAction.connect('activate', Lang.bind(this,
+ function() {
+ this._openCB();
+ }));
+ this.application.add_action(openAction);
+
+ this._openButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_OPEN);
+ this._openButton.is_important = true;
+ this._toolbar.add(this._openButton);
+ this._openButton.show();
+ this._openButton.action_name = "app.open";
+
+ //create the "Undo" ToolButton and its SimpleAction
+ let undoAction = new Gio.SimpleAction({ name: 'undo'});
+ undoAction.connect('activate', Lang.bind (this,
+ function() {
+ this._undoCB();
+ }));
+ this._window.add_action(undoAction);//note this action is added to the window
+
+ this._undoButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_UNDO);
+ this._undoButton.is_important = true;
+ this._toolbar.add(this._undoButton);
+ this._undoButton.show();
+ this._undoButton.action_name = "win.undo";
+
+ //create the "Fullscreen" ToolButton and its SimpleAction
+ let fullscreenToggleAction = new Gio.SimpleAction ({ name: 'fullscreenToggle' });
+ fullscreenToggleAction.connect ('activate', Lang.bind (this,
+ function () {
+ this._fullscreenToggleCB();
+ }));
+ this._window.add_action(fullscreenToggleAction);
+
+ this._fullscreenButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_FULLSCREEN);
+ this._fullscreenButton.is_important = true;
+ this._toolbar.add(this._fullscreenButton);
+ this._fullscreenButton.show();
+ this._fullscreenButton.action_name = "win.fullscreenToggle";
+
+ //create the "leaveFullscreen" ToolButton, and set the action name to "win.fullscreenToggle"
+ this._leaveFullscreenButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_LEAVE_FULLSCREEN);
+ this._leaveFullscreenButton.is_important = true;
+ this._toolbar.add(this._leaveFullscreenButton);
+ this._leaveFullscreenButton.action_name = "win.fullscreenToggle";
+ },
+
+ _initMenus: function () {
+ let menu = new Gio.Menu();
+ menu.append("New", 'app.new');
+ menu.append("Open", 'app.open');
+ menu.append("Quit", 'app.quit');
+
+ this.application.set_app_menu(menu);
+
+ let quitAction = new Gio.SimpleAction({name: 'quit' });
+ quitAction.connect('activate', Lang.bind(this,
+ function() {
+ this._window.destroy();
+ }));
+ this.application.add_action(quitAction);
+ },
+
+ _newCB: function() {
+ print("You clicked 'New'.");
+ },
+
+ _openCB: function() {
+ print("You clicked 'Open'.");
+ },
+
+ _undoCB:function () {
+ print ("You clicked 'Undo'.");
+ },
+
+ _fullscreenToggleCB: function() {
+ if ((this._window.get_window().get_state() & Gdk.WindowState.FULLSCREEN) != 0 ) {
+ this._window.unfullscreen();
+ this._leaveFullscreenButton.hide();
+ this._fullscreenButton.show();
+ }
+ else {
+ this._window.fullscreen();
+ this._fullscreenButton.hide();
+ this._leaveFullscreenButton.show();
+ }
+ }
+});
+
+//run the application
+let app = new Application();
+app.application.run(ARGV);
diff --git a/beginners-docs/C/samples/toolbar.py b/beginners-docs/C/samples/toolbar.py
new file mode 100644
index 0000000..c673d7e
--- /dev/null
+++ b/beginners-docs/C/samples/toolbar.py
@@ -0,0 +1,132 @@
+from gi.repository import Gtk
+from gi.repository import Gdk
+from gi.repository import Gio
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="Toolbar Example", application=app)
+ self.set_default_size(400, 200)
+
+ # a grid to attach the toolbar
+ grid = Gtk.Grid()
+
+ # a toolbar created in the method create_toolbar (see below)
+ toolbar = self.create_toolbar()
+ # with extra horizontal space
+ toolbar.set_hexpand(True)
+ # show the toolbar
+ toolbar.show()
+
+ # attach the toolbar to the grid
+ grid.attach(toolbar, 0, 0, 1, 1)
+
+ # add the grid to the window
+ self.add(grid)
+
+ # create the actions that control the window and connect their signal to a
+ # callback method (see below):
+
+ # undo
+ undo_action = Gio.SimpleAction.new("undo", None)
+ undo_action.connect("activate", self.undo_callback)
+ self.add_action(undo_action)
+
+ # fullscreen
+ fullscreen_action = Gio.SimpleAction.new("fullscreen", None)
+ fullscreen_action.connect("activate", self.fullscreen_callback)
+ self.add_action(fullscreen_action)
+
+ # a method to create the toolbar
+ def create_toolbar(self):
+ # a toolbar
+ toolbar = Gtk.Toolbar()
+
+ # which is the primary toolbar of the application
+ toolbar.get_style_context().add_class(Gtk.STYLE_CLASS_PRIMARY_TOOLBAR);
+
+ # create a button for the "new" action, with a stock image
+ new_button = Gtk.ToolButton.new_from_stock(Gtk.STOCK_NEW)
+ # label is shown
+ new_button.set_is_important(True)
+ # insert the button at position in the toolbar
+ toolbar.insert(new_button, 0)
+ # show the button
+ new_button.show()
+ # set the name of the action associated with the button.
+ # The action controls the application (app)
+ new_button.set_action_name("app.new")
+
+ # button for the "open" action
+ open_button = Gtk.ToolButton.new_from_stock(Gtk.STOCK_OPEN)
+ open_button.set_is_important(True)
+ toolbar.insert(open_button, 1)
+ open_button.show()
+ open_button.set_action_name("app.open")
+
+ # button for the "undo" action
+ undo_button = Gtk.ToolButton.new_from_stock(Gtk.STOCK_UNDO)
+ undo_button.set_is_important(True)
+ toolbar.insert(undo_button, 2)
+ undo_button.show()
+ undo_button.set_action_name("win.undo")
+
+ # button for the "fullscreen/leave fullscreen" action
+ self.fullscreen_button = Gtk.ToolButton.new_from_stock(Gtk.STOCK_FULLSCREEN)
+ self.fullscreen_button.set_is_important(True)
+ toolbar.insert(self.fullscreen_button, 3)
+ self.fullscreen_button.set_action_name("win.fullscreen")
+
+ # return the complete toolbar
+ return toolbar
+
+ # callback method for undo
+ def undo_callback(self, action, parameter):
+ print "You clicked \"Undo\"."
+
+ # callback method for fullscreen / leave fullscreen
+ def fullscreen_callback(self, action, parameter):
+ # check if the state is the same as Gdk.WindowState.FULLSCREEN, which is a bit flag
+ is_fullscreen = self.get_window().get_state() & Gdk.WindowState.FULLSCREEN != 0
+ if not is_fullscreen:
+ self.fullscreen_button.set_stock_id(Gtk.STOCK_LEAVE_FULLSCREEN)
+ self.fullscreen()
+ else:
+ self.fullscreen_button.set_stock_id(Gtk.STOCK_FULLSCREEN)
+ self.unfullscreen()
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+ # create the actions that control the window and connect their signal to a
+ # callback method (see below):
+
+ # new
+ new_action = Gio.SimpleAction.new("new", None)
+ new_action.connect("activate", self.new_callback)
+ app.add_action(new_action)
+
+ # open
+ open_action = Gio.SimpleAction.new("open", None)
+ open_action.connect("activate", self.open_callback)
+ app.add_action(open_action)
+
+ # callback method for new
+ def new_callback(self, action, parameter):
+ print "You clicked \"New\"."
+
+ # callback method for open
+ def open_callback(self, action, parameter):
+ print "You clicked \"Open\"."
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/toolbar.vala b/beginners-docs/C/samples/toolbar.vala
new file mode 100644
index 0000000..45d0252
--- /dev/null
+++ b/beginners-docs/C/samples/toolbar.vala
@@ -0,0 +1,132 @@
+/* This is the Window */
+class MyWindow : Gtk.ApplicationWindow {
+
+ /* Instance variables belonging to the window */
+ Gtk.Toolbar toolbar;
+ Gtk.ToolButton new_button;
+ Gtk.ToolButton open_button;
+ Gtk.ToolButton undo_button;
+ Gtk.ToolButton fullscreen_button;
+ Gtk.ToolButton leave_fullscreen_button;
+
+ /* Contstructor */
+ internal MyWindow (MyApplication app) {
+ Object (application: app, title: "Toolbar Example");
+
+ this.set_default_size (400, 200);
+ var grid = new Gtk.Grid ();
+ this.add (grid);
+ grid.show ();
+
+ create_toolbar ();
+ toolbar.set_hexpand (true);
+ grid.attach (toolbar, 0, 0, 1, 1);
+ toolbar.show ();
+
+ /* create the "undo" window action action */
+ var undo_action = new SimpleAction ("undo", null);
+ undo_action.activate.connect (undo_callback);
+ this.add_action (undo_action);
+
+ /* create the "fullscreen" window action */
+ var fullscreen_action = new SimpleAction ("fullscreen", null);
+ fullscreen_action.activate.connect (fullscreen_callback);
+ this.add_action (fullscreen_action);
+ }
+
+ /* This function creates the toolbar, its ToolButtons,
+ * and assigns the actions names to the ToolButtons.*/
+ void create_toolbar () {
+ toolbar = new Gtk.Toolbar ();
+ toolbar.get_style_context ().add_class (Gtk.STYLE_CLASS_PRIMARY_TOOLBAR);
+
+ new_button = new Gtk.ToolButton.from_stock (Gtk.Stock.NEW);
+ new_button.is_important = true; //decides whether to show the label
+ toolbar.add (new_button);
+ new_button.show ();
+ new_button.action_name = "app.new";
+
+ open_button = new Gtk.ToolButton.from_stock (Gtk.Stock.OPEN);
+ open_button.is_important = true;
+ toolbar.add (open_button);
+ open_button.show ();
+ open_button.action_name = "app.open";
+
+ undo_button = new Gtk.ToolButton.from_stock (Gtk.Stock.UNDO);
+ undo_button.is_important = true;
+ toolbar.add (undo_button);
+ undo_button.show ();
+ undo_button.action_name = "win.undo";
+
+ fullscreen_button = new Gtk.ToolButton.from_stock (Gtk.Stock.FULLSCREEN);
+ fullscreen_button.is_important = true;
+ toolbar.add (fullscreen_button);
+ fullscreen_button.show ();
+ fullscreen_button.action_name = "win.fullscreen";
+
+ leave_fullscreen_button = new Gtk.ToolButton.from_stock (Gtk.Stock.LEAVE_FULLSCREEN)
+;
+ leave_fullscreen_button.is_important = true;
+ toolbar.add (leave_fullscreen_button);
+
+ leave_fullscreen_button.action_name = "win.fullscreen";
+ }
+
+ void undo_callback (SimpleAction simple, Variant? parameter) {
+ print ("You clicked \"Undo\".\n");
+ }
+
+ void fullscreen_callback (SimpleAction simple, Variant? parameter) {
+ if ((this.get_window ().get_state () & Gdk.WindowState.FULLSCREEN) != 0) {
+ this.unfullscreen ();
+ leave_fullscreen_button.hide ();
+ fullscreen_button.show ();
+ }
+ else {
+ this.fullscreen ();
+ fullscreen_button.hide ();
+ leave_fullscreen_button.show ();
+ }
+ }
+}
+
+/* This is the application */
+class MyApplication : Gtk.Application {
+ protected override void activate () {
+ new MyWindow (this).show ();
+ }
+
+ protected override void startup () {
+ base.startup ();
+
+ /* Create the "new" action and add it to the app*/
+ var new_action = new SimpleAction ("new", null);
+ new_action.activate.connect (new_callback);
+ this.add_action (new_action);
+
+ /* Create the "open" action, and add it to the app */
+ var open_action = new SimpleAction ("open", null);
+ open_action.activate.connect (open_callback);
+ this.add_action (open_action);
+
+ /* You could also add the action to the app menu
+ * if you wanted to.
+ */
+ //var menu = new Menu ();
+ //menu.append ("New", "app.new");
+ //this.app_menu = menu;
+ }
+
+ void new_callback (SimpleAction action, Variant? parameter) {
+ print ("You clicked \"New\".\n");
+ }
+
+ void open_callback (SimpleAction action, Variant? parameter) {
+ print ("You clicked \"Open\".\n");
+ }
+}
+
+/* The main function creates the application and runs it. */
+int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/toolbar_builder.py b/beginners-docs/C/samples/toolbar_builder.py
new file mode 100644
index 0000000..1984315
--- /dev/null
+++ b/beginners-docs/C/samples/toolbar_builder.py
@@ -0,0 +1,100 @@
+from gi.repository import Gtk
+from gi.repository import Gdk
+from gi.repository import Gio
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="Toolbar Example", application=app)
+ self.set_default_size(400, 200)
+
+ # a grid to attach the toolbar (see below)
+ grid = Gtk.Grid()
+ self.add(grid)
+ # we have to show the grid (and therefore the toolbar) with show(),
+ # as show_all() would show also the buttons in the toolbar that we want to
+ # be hidden (such as the leave_fullscreen button)
+ grid.show()
+
+ # a builder to add the UI designed with Glade to the grid:
+ builder = Gtk.Builder()
+ # get the file (if it is there)
+ try:
+ builder.add_from_file("toolbar_builder.ui")
+ except:
+ print "file not found"
+ sys.exit()
+ # and attach it to the grid
+ grid.attach(builder.get_object("toolbar"), 0, 0, 1, 1)
+
+ # two buttons that will be used later in a method
+ self.fullscreen_button = builder.get_object("fullscreen_button")
+ self.leave_fullscreen_button = builder.get_object("leave_fullscreen_button")
+
+ # create the actions that control the window, connect their signal to a
+ # callback method (see below), add the action to the window:
+
+ # undo
+ undo_action = Gio.SimpleAction.new("undo", None)
+ undo_action.connect("activate", self.undo_callback)
+ self.add_action(undo_action)
+
+ # and fullscreen
+ fullscreen_action = Gio.SimpleAction.new("fullscreen", None)
+ fullscreen_action.connect("activate", self.fullscreen_callback)
+ self.add_action(fullscreen_action)
+
+ # callback for undo
+ def undo_callback(self, action, parameter):
+ print "You clicked \"Undo\"."
+
+ # callback for fullscreen
+ def fullscreen_callback(self, action, parameter):
+ # check if the state is the same as Gdk.WindowState.FULLSCREEN, which is a bit flag
+ is_fullscreen = self.get_window().get_state() & Gdk.WindowState.FULLSCREEN != 0
+ if is_fullscreen:
+ self.unfullscreen()
+ self.leave_fullscreen_button.hide()
+ self.fullscreen_button.show()
+ else:
+ self.fullscreen()
+ self.fullscreen_button.hide()
+ self.leave_fullscreen_button.show()
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ # show the window - with show() not show_all() because that would show also
+ # the leave_fullscreen button
+ win.show()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+ # actions that control the application: create, connect their signal to a
+ # callback method (see below), add the action to the application
+
+ # new
+ new_action = Gio.SimpleAction.new("new", None)
+ new_action.connect("activate", self.new_callback)
+ app.add_action(new_action)
+
+ # open
+ open_action = Gio.SimpleAction.new("open", None)
+ open_action.connect("activate", self.open_callback)
+ app.add_action(open_action)
+
+ # callback for new
+ def new_callback(self, action, parameter):
+ print "You clicked \"New\"."
+
+ # callback for open
+ def open_callback(self, action, parameter):
+ print "You clicked \"Open\"."
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/toolbar_builder.ui b/beginners-docs/C/samples/toolbar_builder.ui
new file mode 100644
index 0000000..7e94c30
--- /dev/null
+++ b/beginners-docs/C/samples/toolbar_builder.ui
@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+ <!-- interface-requires gtk+ 3.0 -->
+ <object class="GtkToolbar" id="toolbar">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="hexpand">True</property>
+ <property name="show_arrow">False</property>
+ <child>
+ <object class="GtkToolButton" id="new_button">
+ <property name="use_action_appearance">False</property>
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="use_action_appearance">False</property>
+ <property name="is_important">True</property>
+ <property name="action_name">app.new</property>
+ <property name="label" translatable="yes">New</property>
+ <property name="use_underline">True</property>
+ <property name="stock_id">gtk-new</property>
+ </object>
+ <packing>
+ <property name="expand">False</property>
+ <property name="homogeneous">True</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkToolButton" id="open_button">
+ <property name="use_action_appearance">False</property>
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="use_action_appearance">False</property>
+ <property name="is_important">True</property>
+ <property name="action_name">app.open</property>
+ <property name="label" translatable="yes">Open</property>
+ <property name="use_underline">True</property>
+ <property name="stock_id">gtk-open</property>
+ </object>
+ <packing>
+ <property name="expand">False</property>
+ <property name="homogeneous">True</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkToolButton" id="undo_button">
+ <property name="use_action_appearance">False</property>
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="use_action_appearance">False</property>
+ <property name="is_important">True</property>
+ <property name="action_name">win.undo</property>
+ <property name="label" translatable="yes">Undo</property>
+ <property name="use_underline">True</property>
+ <property name="stock_id">gtk-undo</property>
+ </object>
+ <packing>
+ <property name="expand">False</property>
+ <property name="homogeneous">True</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkToolButton" id="fullscreen_button">
+ <property name="use_action_appearance">False</property>
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="use_action_appearance">False</property>
+ <property name="is_important">True</property>
+ <property name="action_name">win.fullscreen</property>
+ <property name="label" translatable="yes">Fullscreen</property>
+ <property name="use_underline">True</property>
+ <property name="stock_id">gtk-fullscreen</property>
+ </object>
+ <packing>
+ <property name="expand">False</property>
+ <property name="homogeneous">True</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkToolButton" id="leave_fullscreen_button">
+ <property name="use_action_appearance">False</property>
+ <property name="can_focus">False</property>
+ <property name="use_action_appearance">False</property>
+ <property name="is_important">True</property>
+ <property name="action_name">win.fullscreen</property>
+ <property name="label" translatable="yes">Leave Fullscreen</property>
+ <property name="use_underline">True</property>
+ <property name="stock_id">gtk-leave-fullscreen</property>
+ </object>
+ <packing>
+ <property name="expand">False</property>
+ <property name="homogeneous">True</property>
+ </packing>
+ </child>
+ </object>
+</interface>
diff --git a/beginners-docs/C/samples/toolbar_builder.vala b/beginners-docs/C/samples/toolbar_builder.vala
new file mode 100644
index 0000000..b23a725
--- /dev/null
+++ b/beginners-docs/C/samples/toolbar_builder.vala
@@ -0,0 +1,103 @@
+/* This is the Window */
+class MyWindow : Gtk.ApplicationWindow {
+
+ /* Declare these two ToolButtons, as we will get them
+ * from the ui file (see lines 32 and 33), so we can
+ * hide() and show() them as needed.*/
+ Gtk.ToolButton fullscreen_button;
+ Gtk.ToolButton leave_fullscreen_button;
+
+ /* Contstructor */
+ internal MyWindow (MyApplication app) {
+ Object (application: app, title: "Toolbar Example");
+
+ this.set_default_size (400, 200);
+ var grid = new Gtk.Grid ();
+ this.add (grid);
+ grid.show ();
+
+ /* add the toolbar from the ui file */
+ var builder = new Gtk.Builder ();
+ try {
+ builder.add_from_file ("toolbar_builder.ui");
+ }
+ /* Handle the exception */
+ catch (Error e) {
+ error ("Unable to load file: %s", e.message);
+ }
+
+ grid.attach (builder.get_object ("toolbar") as Gtk.Toolbar, 0, 0, 1, 1);
+
+ /* get these objects from the ui file so we can toggle between them */
+ fullscreen_button = builder.get_object ("fullscreen_button") as Gtk.ToolButton;
+ leave_fullscreen_button = builder.get_object ("leave_fullscreen_button") as Gtk.ToolButton;
+
+ /* create the "undo" window action action */
+ var undo_action = new SimpleAction ("undo", null);
+ undo_action.activate.connect (undo_callback);
+ this.add_action (undo_action);
+
+ /* create the "fullscreen" window action */
+ var fullscreen_action = new SimpleAction ("fullscreen", null);
+ fullscreen_action.activate.connect (fullscreen_callback);
+ this.add_action (fullscreen_action);
+ }
+
+ void undo_callback (SimpleAction simple, Variant? parameter) {
+ print ("You clicked \"Undo\".\n");
+ }
+
+ void fullscreen_callback (SimpleAction simple, Variant? parameter) {
+ if ((this.get_window ().get_state () & Gdk.WindowState.FULLSCREEN) != 0) {
+ this.unfullscreen ();
+ leave_fullscreen_button.hide ();
+ fullscreen_button.show ();
+ }
+ else {
+ this.fullscreen ();
+ fullscreen_button.hide ();
+ leave_fullscreen_button.show ();
+ }
+ }
+}
+
+/* This is the application */
+class MyApplication : Gtk.Application {
+ protected override void activate () {
+ new MyWindow (this).show ();
+ }
+
+ protected override void startup () {
+ base.startup ();
+
+ /* Create the "new" action and add it to the app*/
+ var new_action = new SimpleAction ("new", null);
+ new_action.activate.connect (new_callback);
+ this.add_action (new_action);
+
+ /* Create the "open" action, and add it to the app */
+ var open_action = new SimpleAction ("open", null);
+ open_action.activate.connect (open_callback);
+ this.add_action (open_action);
+
+ /* You could also add the action to the app menu
+ * if you wanted to.
+ */
+ //var menu = new Menu ();
+ //menu.append ("New", "app.new");
+ //this.app_menu = menu;
+ }
+
+ void new_callback (SimpleAction action, Variant? parameter) {
+ print ("You clicked \"New\".\n");
+ }
+
+ void open_callback (SimpleAction action, Variant? parameter) {
+ print ("You clicked \"Open\".\n");
+ }
+}
+
+/* The main function creates the application and runs it. */
+int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/tooltip.py b/beginners-docs/C/samples/tooltip.py
new file mode 100644
index 0000000..8e03249
--- /dev/null
+++ b/beginners-docs/C/samples/tooltip.py
@@ -0,0 +1,120 @@
+from gi.repository import Gtk
+from gi.repository import Gdk
+from gi.repository import Gio
+import sys
+
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="Toolbar with Tooltips Example", application=app)
+ self.set_default_size(400, 200)
+
+ grid = Gtk.Grid()
+
+ toolbar = self.create_toolbar()
+ toolbar.set_hexpand(True)
+ toolbar.show()
+
+ grid.attach(toolbar, 0, 0, 1, 1)
+
+ self.add(grid)
+
+ undo_action = Gio.SimpleAction.new("undo", None)
+ undo_action.connect("activate", self.undo_callback)
+ self.add_action(undo_action)
+
+ fullscreen_action = Gio.SimpleAction.new("fullscreen", None)
+ fullscreen_action.connect("activate", self.fullscreen_callback)
+ self.add_action(fullscreen_action)
+
+ def create_toolbar(self):
+ toolbar = Gtk.Toolbar()
+ toolbar.get_style_context().add_class(Gtk.STYLE_CLASS_PRIMARY_TOOLBAR);
+
+ # button for the "new" action
+ new_button = Gtk.ToolButton.new_from_stock(Gtk.STOCK_NEW)
+ # with a tooltip with a given text
+ new_button.set_tooltip_text("Create a new file")
+ new_button.set_is_important(True)
+ toolbar.insert(new_button, 0)
+ new_button.show()
+ new_button.set_action_name("app.new")
+
+ # button for the "open" action
+ open_button = Gtk.ToolButton.new_from_stock(Gtk.STOCK_OPEN)
+ # with a tooltip with a given text in the Pango markup language
+ open_button.set_tooltip_markup("Open an <i>existing</i> file")
+ open_button.set_is_important(True)
+ toolbar.insert(open_button, 1)
+ open_button.show()
+ open_button.set_action_name("app.open")
+
+ # button for the "undo" action
+ undo_button = Gtk.ToolButton.new_from_stock(Gtk.STOCK_UNDO)
+ # with a tooltip with an image
+ # set True the property "has-tooltip"
+ undo_button.set_property("has-tooltip", True)
+ # connect to the callback function that for the tooltip
+ # with the signal "query-tooltip"
+ undo_button.connect("query-tooltip", self.undo_tooltip_callback)
+ undo_button.set_is_important(True)
+ toolbar.insert(undo_button, 2)
+ undo_button.show()
+ undo_button.set_action_name("win.undo")
+
+ # button for the "fullscreen/leave fullscreen" action
+ self.fullscreen_button = Gtk.ToolButton.new_from_stock(Gtk.STOCK_FULLSCREEN)
+ self.fullscreen_button.set_is_important(True)
+ toolbar.insert(self.fullscreen_button, 3)
+ self.fullscreen_button.set_action_name("win.fullscreen")
+
+ return toolbar
+
+ # the callback function for the tooltip of the "undo" button
+ def undo_tooltip_callback(self, widget, x, y, keyboard_mode, tooltip):
+ # set the text for the tooltip
+ tooltip.set_text("Undo your last action")
+ # set an icon fot the tooltip
+ tooltip.set_icon_from_stock("gtk-undo", Gtk.IconSize.MENU)
+ # show the tooltip
+ return True
+
+ def undo_callback(self, action, parameter):
+ print "You clicked \"Undo\"."
+
+ def fullscreen_callback(self, action, parameter):
+ is_fullscreen = self.get_window().get_state() & Gdk.WindowState.FULLSCREEN != 0
+ if not is_fullscreen:
+ self.fullscreen_button.set_stock_id(Gtk.STOCK_LEAVE_FULLSCREEN)
+ self.fullscreen()
+ else:
+ self.fullscreen_button.set_stock_id(Gtk.STOCK_FULLSCREEN)
+ self.unfullscreen()
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+ new_action = Gio.SimpleAction.new("new", None)
+ new_action.connect("activate", self.new_callback)
+ app.add_action(new_action)
+
+ open_action = Gio.SimpleAction.new("open", None)
+ open_action.connect("activate", self.open_callback)
+ app.add_action(open_action)
+
+ def new_callback(self, action, parameter):
+ print "You clicked \"New\"."
+
+ def open_callback(self, action, parameter):
+ print "You clicked \"Open\"."
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/treeview_advanced_liststore.py
b/beginners-docs/C/samples/treeview_advanced_liststore.py
new file mode 100644
index 0000000..30f0f8b
--- /dev/null
+++ b/beginners-docs/C/samples/treeview_advanced_liststore.py
@@ -0,0 +1,129 @@
+from gi.repository import Gtk
+from gi.repository import Pango
+import sys
+
+list_of_dvd = [["The Usual Suspects"],
+ ["Gilda"],
+ ["The Godfather"],
+ ["Pulp Fiction"],
+ ["Once Upon a Time in the West"],
+ ["Rear Window"]]
+
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="My DVDs", application=app)
+ self.set_default_size(250, 100)
+ self.set_border_width(10)
+
+ # the data are stored in the model
+ # create a liststore with one column
+ self.listmodel = Gtk.ListStore(str)
+ for i in range(len(list_of_dvd)):
+ self.listmodel.append(list_of_dvd[i])
+
+ # a treeview to see the data stored in the model
+ view = Gtk.TreeView(model=self.listmodel)
+
+ # cellrenderer for the first column
+ cell = Gtk.CellRendererText()
+ # the first column is created
+ col = Gtk.TreeViewColumn("Title", cell, text=0)
+ # and it is appended to the treeview
+ view.append_column(col)
+
+ # when a row of the treeview is selected, it emits a signal
+ self.selection = view.get_selection()
+ self.selection.connect("changed", self.on_changed)
+
+ # the label we use to show the selection
+ self.label = Gtk.Label()
+ self.label.set_text("")
+
+ # a button to add new titles, connected to a callback function
+ self.button_add = Gtk.Button(label="Add")
+ self.button_add.connect("clicked", self.add_cb)
+
+ # an entry to enter titles
+ self.entry = Gtk.Entry()
+
+ # a button to remove titles, connected to a callback function
+ self.button_remove = Gtk.Button(label="Remove")
+ self.button_remove.connect("clicked", self.remove_cb)
+
+ # a button to remove all titles, connected to a callback function
+ self.button_remove_all = Gtk.Button(label="Remove All")
+ self.button_remove_all.connect("clicked", self.remove_all_cb)
+
+ # a grid to attach the widgets
+ grid = Gtk.Grid()
+ grid.attach(view, 0, 0, 4, 1)
+ grid.attach(self.label, 0, 1, 4, 1)
+ grid.attach(self.button_add, 0, 2, 1, 1)
+ grid.attach_next_to(self.entry, self.button_add, Gtk.PositionType.RIGHT, 1, 1)
+ grid.attach_next_to(self.button_remove, self.entry, Gtk.PositionType.RIGHT, 1, 1)
+ grid.attach_next_to(self.button_remove_all, self.button_remove, Gtk.PositionType.RIGHT, 1, 1)
+
+ # add the grid to the window
+ self.add(grid)
+
+ def on_changed(self, selection):
+ # get the model and the iterator that points at the data in the model
+ (model, iter) = selection.get_selected()
+ # set the label to a new value depending on the selection, if there is one
+ if iter is not None:
+ self.label.set_text("\n %s" %(model[iter][0]))
+ else:
+ self.label.set_text("")
+ return True
+
+ # callback function for the "Add" button
+ def add_cb(self, button):
+ # append to the model the title that is in the entry
+ title = self.entry.get_text()
+ self.listmodel.append([title])
+ # and print a message in the terminal
+ print "%s has been added" %(title)
+
+ def remove_cb(self, button):
+ # if there is still an entry in the model
+ if len(self.listmodel) != 0:
+ # get the selection
+ (model, iter) = self.selection.get_selected()
+ # if there is a selection, print a message in the terminal
+ # and remove it from the model
+ if iter is not None:
+ print "%s has been removed" %(model[iter][0])
+ self.listmodel.remove(iter)
+ # otherwise, ask the user to select something to remove
+ else:
+ print "Select a title to remove"
+ # else, if there are no entries in the model, print "Empty list"
+ # in the terminal
+ else:
+ print "Empty list"
+
+ def remove_all_cb(self, button):
+ # if there is still an entry in the model
+ if len(self.listmodel) != 0:
+ # remove all the entries in the model
+ for i in range(len(self.listmodel)):
+ iter = self.listmodel.get_iter(0)
+ self.listmodel.remove(iter)
+ # print a message in the terminal alerting that the model is empty
+ print "Empty list"
+
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/treeview_cellrenderertoggle.py
b/beginners-docs/C/samples/treeview_cellrenderertoggle.py
new file mode 100644
index 0000000..d8e3868
--- /dev/null
+++ b/beginners-docs/C/samples/treeview_cellrenderertoggle.py
@@ -0,0 +1,101 @@
+from gi.repository import Gtk
+from gi.repository import Pango
+import sys
+
+books = [["Tolstoy, Leo", ["War and Peace", True], ["Anna Karenina", False]],
+ ["Shakespeare, William", ["Hamlet", False], ["Macbeth", True], ["Othello", False]],
+ ["Tolkien, J.R.R.", ["The Lord of the Rings", False]]]
+
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="Library", application=app)
+ self.set_default_size(250, 100)
+ self.set_border_width(10)
+
+ # the data are stored in the model
+ # create a treestore with two columns
+ self.store = Gtk.TreeStore(str, bool)
+ # fill in the model
+ for i in range(len(books)):
+ # the iter piter is returned when appending the author in the first column
+ # and False in the second
+ piter = self.store.append(None, [books[i][0], False])
+ # append the books and the associated boolean value as children of the author
+ j = 1
+ while j < len(books[i]):
+ self.store.append(piter, books[i][j])
+ j += 1
+
+ # the treeview shows the model
+ # create a treeview on the model self.store
+ view = Gtk.TreeView()
+ view.set_model(self.store)
+
+ # the cellrenderer for the first column - text
+ renderer_books = Gtk.CellRendererText()
+ # the first column is created
+ column_books = Gtk.TreeViewColumn("Books", renderer_books, text=0)
+ # and it is appended to the treeview
+ view.append_column(column_books)
+
+ # the cellrenderer for the second column - boolean rendered as a toggle
+ renderer_in_out = Gtk.CellRendererToggle()
+ # the second column is created
+ column_in_out = Gtk.TreeViewColumn("Out?", renderer_in_out, active=1)
+ # and it is appended to the treeview
+ view.append_column(column_in_out)
+ # connect the cellrenderertoggle with a callback function
+ renderer_in_out.connect("toggled", self.on_toggled)
+
+ # add the treeview to the window
+ self.add(view)
+
+ # callback function for the signal emitted by the cellrenderertoggle
+ def on_toggled(self, widget, path):
+ # the boolean value of the selected row
+ current_value = self.store[path][1]
+ # change the boolean value of the selected row in the model
+ self.store[path][1] = not current_value
+ # new current value!
+ current_value = not current_value
+ # if length of the path is 1 (that is, if we are selecting an author)
+ if len(path) == 1:
+ # get the iter associated with the path
+ piter = self.store.get_iter(path)
+ # get the iter associated with its first child
+ citer = self.store.iter_children(piter)
+ # while there are children, change the state of their boolean value
+ # to the value of the author
+ while citer is not None:
+ self.store[citer][1] = current_value
+ citer = self.store.iter_next(citer)
+ # if the length of the path is not 1 (that is, if we are selecting a book)
+ elif len(path) != 1:
+ # get the first child of the parent of the book (the first book of the author)
+ citer = self.store.get_iter(path)
+ piter = self.store.iter_parent(citer)
+ citer = self.store.iter_children(piter)
+ # check if all the children are selected
+ all_selected = True
+ while citer is not None:
+ if self.store[citer][1] == False:
+ all_selected = False
+ break
+ citer = self.store.iter_next(citer)
+ # if they do, the author as well is selected; otherwise it is not
+ self.store[piter][1] = all_selected
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/treeview_simple_liststore.js
b/beginners-docs/C/samples/treeview_simple_liststore.js
new file mode 100644
index 0000000..086b536
--- /dev/null
+++ b/beginners-docs/C/samples/treeview_simple_liststore.js
@@ -0,0 +1,151 @@
+#!/usr/bin/gjs
+
+const GObject = imports.gi.GObject;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+const Pango = imports.gi.Pango;
+
+const TreeViewExample = new Lang.Class({
+ Name: 'TreeView Example with Simple ListStore',
+
+ // Create the application itself
+ _init: function() {
+ this.application = new Gtk.Application({
+ application_id: 'org.example.jstreeviewsimpleliststore'
+ });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents window when active
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function() {
+ this._buildUI ();
+ },
+
+
+
+ // Build the application's UI
+ _buildUI: function() {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ default_height: 250,
+ default_width: 100,
+ border_width: 20,
+ title: "My Phone Book"});
+
+ // Create the underlying liststore for the phonebook
+ this._listStore = new Gtk.ListStore ();
+ this._listStore.set_column_types ([
+ GObject.TYPE_STRING,
+ GObject.TYPE_STRING,
+ GObject.TYPE_STRING,
+ GObject.TYPE_STRING]);
+
+ // Data to go in the phonebook
+ let phonebook =
+ [{ name: "Jurg", surname: "Billeter", phone: "555-0123",
+ description: "A friendly person."},
+ { name: "Johannes", surname: "Schmid", phone: "555-1234",
+ description: "Easy phone number to remember."},
+ { name: "Julita", surname: "Inca", phone: "555-2345",
+ description: "Another friendly person."},
+ { name: "Javier", surname: "Jardon", phone: "555-3456",
+ description: "Bring fish for his penguins."},
+ { name: "Jason", surname: "Clinton", phone: "555-4567",
+ description: "His cake's not a lie."},
+ { name: "Random J.", surname: "Hacker", phone: "555-5678",
+ description: "Very random!"}];
+
+ // Put the data in the phonebook
+ for (let i = 0; i < phonebook.length; i++ ) {
+ let contact = phonebook [i];
+ this._listStore.set (this._listStore.append(), [0, 1, 2, 3],
+ [contact.name, contact.surname, contact.phone, contact.description]);
+ }
+
+ // Create the treeview
+ this._treeView = new Gtk.TreeView ({
+ expand: true,
+ model: this._listStore });
+
+ // Create the columns for the address book
+ let firstName = new Gtk.TreeViewColumn ({ title: "First Name" });
+ let lastName = new Gtk.TreeViewColumn ({ title: "Last Name" });
+ let phone = new Gtk.TreeViewColumn ({ title: "Phone Number" });
+
+ // Create a cell renderer for when bold text is needed
+ let bold = new Gtk.CellRendererText ({
+ weight: Pango.Weight.BOLD });
+
+ // Create a cell renderer for normal text
+ let normal = new Gtk.CellRendererText ();
+
+ // Pack the cell renderers into the columns
+ firstName.pack_start (bold, true);
+ lastName.pack_start (normal, true);
+ phone.pack_start (normal, true);
+
+ // Set each column to pull text from the TreeView's model
+ firstName.add_attribute (bold, "text", 0);
+ lastName.add_attribute (normal, "text", 1);
+ phone.add_attribute (normal, "text", 2);
+
+ // Insert the columns into the treeview
+ this._treeView.insert_column (firstName, 0);
+ this._treeView.insert_column (lastName, 1);
+ this._treeView.insert_column (phone, 2);
+
+ // Create the label that shows details for the name you select
+ this._label = new Gtk.Label ({ label: "" });
+
+ // Get which item is selected
+ this.selection = this._treeView.get_selection();
+
+ // When something new is selected, call _on_changed
+ this.selection.connect ('changed', Lang.bind (this, this._onSelectionChanged));
+
+ // Create a grid to organize everything in
+ this._grid = new Gtk.Grid;
+
+ // Attach the treeview and label to the grid
+ this._grid.attach (this._treeView, 0, 0, 1, 1);
+ this._grid.attach (this._label, 0, 1, 1, 1);
+
+ // Add the grid to the window
+ this._window.add (this._grid);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+
+
+
+ _onSelectionChanged: function () {
+
+ // Grab a treeiter pointing to the current selection
+ let [ isSelected, model, iter ] = this.selection.get_selected();
+
+ // Set the label to read off the values stored in the current selection
+ this._label.set_label ("\n" +
+ this._listStore.get_value (iter, 0) + " " +
+ this._listStore.get_value (iter, 1) + " " +
+ this._listStore.get_value (iter, 2) + "\n" +
+ this._listStore.get_value (iter, 3));
+
+ }
+
+});
+
+// Run the application
+let app = new TreeViewExample ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/treeview_simple_liststore.py
b/beginners-docs/C/samples/treeview_simple_liststore.py
new file mode 100644
index 0000000..4af92b6
--- /dev/null
+++ b/beginners-docs/C/samples/treeview_simple_liststore.py
@@ -0,0 +1,79 @@
+from gi.repository import Gtk
+from gi.repository import Pango
+import sys
+
+columns = ["First Name",
+ "Last Name",
+ "Phone Number"]
+
+phonebook = [["Jurg", "Billeter", "555-0123"],
+ ["Johannes", "Schmid", "555-1234"],
+ ["Julita", "Inca", "555-2345"],
+ ["Javier", "Jardon", "555-3456"],
+ ["Jason", "Clinton", "555-4567"],
+ ["Random J.", "Hacker", "555-5678"]]
+
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="My Phone Book", application=app)
+ self.set_default_size(250, 100)
+ self.set_border_width(10)
+
+ # the data in the model (three strings for each row, one for each column)
+ listmodel = Gtk.ListStore(str, str, str)
+ # append the values in the model
+ for i in range(len(phonebook)):
+ listmodel.append(phonebook[i])
+
+ # a treeview to see the data stored in the model
+ view = Gtk.TreeView(model=listmodel)
+ # for each column
+ for i in range(len(columns)):
+ # cellrenderer to render the text
+ cell = Gtk.CellRendererText()
+ # the text in the first column should be in boldface
+ if i == 0:
+ cell.props.weight_set=True
+ cell.props.weight=Pango.Weight.BOLD
+ # the column is created
+ col = Gtk.TreeViewColumn(columns[i], cell, text=i)
+ # and it is appended to the treeview
+ view.append_column(col)
+
+ # when a row is selected, it emits a signal
+ view.get_selection().connect("changed", self.on_changed)
+
+ # the label we use to show the selection
+ self.label = Gtk.Label()
+ self.label.set_text("")
+
+ # a grid to attach the widgets
+ grid = Gtk.Grid()
+ grid.attach(view, 0, 0, 1, 1)
+ grid.attach(self.label, 0, 1, 1, 1)
+
+ # attach the grid to the window
+ self.add(grid)
+
+ def on_changed(self, selection):
+ # get the model and the iterator that points at the data in the model
+ (model, iter) = selection.get_selected()
+ # set the label to a new value depending on the selection
+ self.label.set_text("\n %s %s %s" %(model[iter][0], model[iter][1], model[iter][2]))
+ return True
+
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/treeview_simple_liststore.vala
b/beginners-docs/C/samples/treeview_simple_liststore.vala
new file mode 100644
index 0000000..b0da70d
--- /dev/null
+++ b/beginners-docs/C/samples/treeview_simple_liststore.vala
@@ -0,0 +1,125 @@
+public class PhoneBookEntry {
+ public string firstname;
+ public string lastname;
+ public string phone;
+
+ public PhoneBookEntry (string f, string l, string p) {
+ this.firstname = f;
+ this.lastname = l;
+ this.phone = p;
+ }
+}
+
+class TreeViewSimpleListStore : Gtk.ApplicationWindow {
+
+ Gtk.Label label;
+
+ PhoneBookEntry[] phonebook = {
+ new PhoneBookEntry ("Jurg", "Billeter", "555-0123"),
+ new PhoneBookEntry ("Johannes", "Schmid", "555-1234"),
+ new PhoneBookEntry ("Julita", "Inca", "555-2345"),
+ new PhoneBookEntry ("Javier", "Jardon", "555-3456"),
+ new PhoneBookEntry ("Jason", "Clinton", "555-4567"),
+ new PhoneBookEntry ("Random J.", "Hacker", "555-5678")
+ };
+
+ enum Column {
+ FIRSTNAME,
+ LASTNAME,
+ PHONE
+ }
+
+ internal TreeViewSimpleListStore (MyApplication app) {
+ Object (application: app, title: "My Phone Book");
+
+ this.set_default_size (250, 100);
+ this.border_width = 10;
+
+ var view = new Gtk.TreeView ();
+ this.setup_treeview (view);
+ view.expand = true;
+
+ label = new Gtk.Label ("");
+
+ var grid = new Gtk.Grid ();
+
+ grid.attach (view, 0, 0, 1, 1);
+ grid.attach (label, 0, 1, 1, 1);
+ this.add (grid);
+
+ var selection = view.get_selection ();
+ selection.changed.connect (this.on_changed);
+ }
+
+ void setup_treeview (Gtk.TreeView view) {
+ var listmodel = new Gtk.ListStore (3, typeof (string),
+ typeof (string),
+ typeof (string));
+ view.set_model (listmodel);
+
+ var cell = new Gtk.CellRendererText ();
+
+ /* 'weight' refers to font boldness.
+ * 400 is normal.
+ * 700 is bold.
+ */
+ cell.set ("weight_set", true);
+ cell.set ("weight", 700);
+
+ /*columns*/
+ view.insert_column_with_attributes (-1, "First Name",
+ cell, "text",
+ Column.FIRSTNAME);
+
+ view.insert_column_with_attributes (-1, "Last Name",
+ new Gtk.CellRendererText (),
+ "text", Column.LASTNAME);
+
+ view.insert_column_with_attributes (-1, "Phone Number",
+ new Gtk.CellRendererText (),
+ "text", Column.PHONE);
+
+ /* Insert the phonebook into the ListStore */
+ Gtk.TreeIter iter;
+ for (int i = 0; i < phonebook.length; i++) {
+ listmodel.append (out iter);
+ listmodel.set (iter, Column.FIRSTNAME,
+ phonebook[i].firstname,
+ Column.LASTNAME, phonebook[i].lastname,
+ Column.PHONE, phonebook[i].phone);
+ }
+ }
+
+ void on_changed (Gtk.TreeSelection selection) {
+ Gtk.TreeModel model;
+ Gtk.TreeIter iter;
+ string name;
+ string lastname;
+ string phone;
+
+ if (selection.get_selected (out model, out iter)) {
+ model.get (iter,
+ Column.FIRSTNAME, out name,
+ Column.LASTNAME, out lastname,
+ Column.PHONE, out phone);
+
+ label.set_text ("\n" + name + " " + lastname + " " + phone);
+ }
+ }
+}
+
+class MyApplication : Gtk.Application {
+ protected override void activate () {
+
+ /* Create new Window and show all the things. */
+ new TreeViewSimpleListStore (this).show_all ();
+ }
+
+ internal MyApplication () {
+ Object (application_id: "example.liststore.simple.treeview");
+ }
+}
+
+int main (string[] args) {
+ return new MyApplication ().run (args);
+}
diff --git a/beginners-docs/C/samples/treeview_treestore.py b/beginners-docs/C/samples/treeview_treestore.py
new file mode 100644
index 0000000..4b7277c
--- /dev/null
+++ b/beginners-docs/C/samples/treeview_treestore.py
@@ -0,0 +1,59 @@
+from gi.repository import Gtk
+from gi.repository import Pango
+import sys
+
+books = [["Tolstoy, Leo", "War and Peace", "Anna Karenina"],
+ ["Shakespeare, William", "Hamlet", "Macbeth", "Othello"],
+ ["Tolkien, J.R.R.", "The Lord of the Rings"]]
+
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="Library", application=app)
+ self.set_default_size(250, 100)
+ self.set_border_width(10)
+
+ # the data are stored in the model
+ # create a treestore with one column
+ store = Gtk.TreeStore(str)
+ for i in range(len(books)):
+ # the iter piter is returned when appending the author
+ piter = store.append(None, [books[i][0]])
+ # append the books as children of the author
+ j = 1
+ while j < len(books[i]):
+ store.append(piter, [books[i][j]])
+ j += 1
+
+ # the treeview shows the model
+ # create a treeview on the model store
+ view = Gtk.TreeView()
+ view.set_model(store)
+
+ # the cellrenderer for the column - text
+ renderer_books = Gtk.CellRendererText()
+ # the column is created
+ column_books = Gtk.TreeViewColumn("Books by Author", renderer_books, text=0)
+ # and it is appended to the treeview
+ view.append_column(column_books)
+
+ # the books are sortable by author
+ column_books.set_sort_column_id(0)
+
+ # add the treeview to the window
+ self.add(view)
+
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/tux.png b/beginners-docs/C/samples/tux.png
new file mode 100644
index 0000000..abb9c2b
Binary files /dev/null and b/beginners-docs/C/samples/tux.png differ
diff --git a/beginners-docs/C/samples/widget_drawing.py b/beginners-docs/C/samples/widget_drawing.py
new file mode 100644
index 0000000..6e8588f
--- /dev/null
+++ b/beginners-docs/C/samples/widget_drawing.py
@@ -0,0 +1,83 @@
+from gi.repository import Gtk
+from gi.repository import cairo
+import sys
+import math
+
+class MyWindow(Gtk.ApplicationWindow):
+ def __init__(self, app):
+ Gtk.Window.__init__(self, title="Choose an angle", application=app)
+ self.set_default_size(400, 400)
+ self.set_border_width(10)
+
+ # a default angle
+ self.angle = 360
+
+ grid = Gtk.Grid()
+
+ # a spinbutton that takes the value of an angle
+ ad = Gtk.Adjustment(360, 0, 360, 1, 0, 0)
+ self.spin = Gtk.SpinButton(adjustment=ad, climb_rate=1, digits=0)
+ self.spin.connect("value-changed", self.get_angle)
+
+ # a drawing area for drawing whatever we want
+ self.darea = Gtk.DrawingArea()
+ # that we describe in the method draw(), connected to the signal "draw"
+ self.darea.connect("draw", self.draw)
+ # we have to request a minimum size of the drawing area, or it will disappear
+ self.darea.set_size_request(300, 300)
+
+ grid.attach(self.spin, 0, 0, 1, 1)
+ grid.attach(self.darea, 0, 1, 1, 1)
+
+ self.add(grid)
+
+ # whenever we get a new angle in the spinbutton
+ def get_angle(self, event):
+ self.angle = self.spin.get_value_as_int()
+ # redraw what is in the drawing area
+ self.darea.queue_draw()
+
+ def draw(self, darea, cr):
+ # a 10-pixels-wide line
+ cr.set_line_width(10)
+ # red
+ cr.set_source_rgba(0.5, 0.0, 0.0, 1.0)
+
+ # get the width and height of the drawing area
+ w = self.darea.get_allocated_width()
+ h = self.darea.get_allocated_height()
+
+ # move to the center of the drawing area
+ # (translate from the top left corner to w/2, h/2)
+ cr.translate(w/2, h/2)
+ # draw a line to (55, 0)
+ cr.line_to(55, 0)
+ # and get back to (0, 0)
+ cr.line_to(0, 0)
+ # draw an arc centered in the origin, 50 pixels wide, from the angle 0
+ # (in radians) to the angle given by the spinbutton (in degrees)
+ cr.arc(0, 0, 50, 0, self.angle*(math.pi/180))
+ # draw a line back to the origin
+ cr.line_to(0, 0)
+ # drawing the path, and keeping the path for future use
+ cr.stroke_preserve()
+
+ # set a colour
+ cr.set_source_rgba(0.0, 0.5, 0.5, 1.0)
+ # and use it to fill the path (that we had kept)
+ cr.fill()
+
+class MyApplication(Gtk.Application):
+ def __init__(self):
+ Gtk.Application.__init__(self)
+
+ def do_activate(self):
+ win = MyWindow(self)
+ win.show_all()
+
+ def do_startup(self):
+ Gtk.Application.do_startup(self)
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)
diff --git a/beginners-docs/C/samples/window.c b/beginners-docs/C/samples/window.c
new file mode 100644
index 0000000..309521e
--- /dev/null
+++ b/beginners-docs/C/samples/window.c
@@ -0,0 +1,28 @@
+#include <gtk/gtk.h>
+
+static void
+activate (GtkApplication *app,
+ gpointer user_data)
+{
+ GtkWidget *window;
+
+ window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
+
+ gtk_window_set_application (GTK_WINDOW (window), GTK_APPLICATION (app));
+ gtk_window_set_title (GTK_WINDOW (window), "Hello GNOME");
+
+ gtk_widget_show_all (GTK_WIDGET (window));
+}
+
+int
+main (int argc, char **argv)
+{
+ GtkApplication *app;
+ int status;
+
+ app = gtk_application_new ("org.gtk.example",G_APPLICATION_FLAGS_NONE);
+ g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
+ status = g_application_run (G_APPLICATION (app), argc, argv);
+ g_object_unref (app);
+ return status;
+}
diff --git a/beginners-docs/C/samples/window.js b/beginners-docs/C/samples/window.js
new file mode 100644
index 0000000..874b244
--- /dev/null
+++ b/beginners-docs/C/samples/window.js
@@ -0,0 +1,42 @@
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const GLib = imports.gi.GLib;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const Application = new Lang.Class ({
+ Name: 'Application',
+
+ //create the application
+ _init: function () {
+ this.application = new Gtk.Application ({
+ application_id: 'org.example.myapp',
+ flags: Gio.ApplicationFlags.FLAGS_NONE
+ });
+
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ },
+
+ //callback function for 'activate' signal
+ _onActivate: function () {
+
+ MyWindow = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL});
+ MyWindow.title = "Welcome to GNOME";
+
+ /* Here are a few ways we can customize our window.
+ Try uncommenting them or changing their values! */
+ //MyWindow.set_default_size (400,200);
+ //MyWindow.set_has_resize_grip (false);
+ //MyWindow.set_opacity (0.5);
+ //MyWindow.maximize ();
+
+ //show the window and all child widgets (none in this case)
+ MyWindow.show_all();
+ this.application.add_window(MyWindow);
+ }
+});
+
+//run the application
+let app = new Application ();
+app.application.run (ARGV);
diff --git a/beginners-docs/C/samples/window.py b/beginners-docs/C/samples/window.py
new file mode 100644
index 0000000..9b2491e
--- /dev/null
+++ b/beginners-docs/C/samples/window.py
@@ -0,0 +1,20 @@
+from gi.repository import Gtk
+
+class MyWindow(Gtk.Window):
+ def __init__(self):
+ Gtk.Window.__init__(self)
+ # set the title
+ self.set_title("Welcome to GNOME")
+ # set a default size: width of 200 and default height
+ self.set_default_size(200, -1)
+ # set a default position: center of the screen
+ self.set_position(Gtk.WindowPosition.CENTER)
+ # show the window
+ self.show_all()
+
+# create an instance of MyWindow
+win = MyWindow()
+# close the GTK+ processing loop when the window is closed
+win.connect("delete-event", Gtk.main_quit)
+# start the GTK+ processing loop
+Gtk.main()
diff --git a/beginners-docs/C/samples/window.vala b/beginners-docs/C/samples/window.vala
new file mode 100644
index 0000000..3669a01
--- /dev/null
+++ b/beginners-docs/C/samples/window.vala
@@ -0,0 +1,37 @@
+/* This is the application. */
+public class Application : Gtk.Application {
+
+ /* Constructor */
+ public Application () {
+ Object (application_id: "org.example.window");
+ }
+
+ /* Override the 'activate' signal of GLib.Application,
+ * which is inherited by Gtk.Application. */
+ public override void activate () {
+
+ var window = new Gtk.Window ();
+ window.title = "Welcome to GNOME";
+
+ /* The following 3 lines are included here to introduce
+ * you to ways you can adjust the toplevel window to suit
+ * your needs. Uncomment them to see what they do.
+ */
+
+ //window.border_width = 10;
+ //window.set_default_size (350, 70);
+ //window.window_position = Gtk.WindowPosition.CENTER;
+
+ /* Add the window to this application. */
+ this.add_window (window);
+
+ /* Show the window. */
+ window.show ();
+ }
+}
+
+/* The main function creates the application and runs it.*/
+int main (string[] args) {
+ var app = new Application ();
+ return app.run (args);
+}
diff --git a/beginners-docs/C/scale.c.page b/beginners-docs/C/scale.c.page
new file mode 100644
index 0000000..dd16179
--- /dev/null
+++ b/beginners-docs/C/scale.c.page
@@ -0,0 +1,40 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="scale.c">
+ <info>
+ <title type="text">Scale (C)</title>
+ <link type="guide" xref="beginner.c#entry"/>
+ <link type="seealso" xref="grid.c"/>
+ <link type="seealso" xref="label.c"/>
+ <revision version="0.2" date="2012-07-04" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Monica Kochofar</name>
+ <email>monicakochofar gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A slider widget for selecting a value from a range</desc>
+ </info>
+
+ <title>Scale</title>
+
+ <media type="image" mime="image/png" src="media/scale2.png"/>
+ <p>Slide the scales!</p>
+
+ <code mime="text/x-csrc" style="numbered">
+<xi:include href="samples/scale.c" parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/3.4/GtkApplication.html";>GtkApplication</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/3.4/GtkWindow.html";>GtkWindow</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkScale.html";>GtkScale</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkRange.html";>GtkRange</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkAdjustment.html";>GtkAdjustment</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/glib/stable/glib-String-Utility-Functions.html#g-strdup-printf";>String
Utility Functions</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/scale.js.page b/beginners-docs/C/scale.js.page
new file mode 100644
index 0000000..45909a5
--- /dev/null
+++ b/beginners-docs/C/scale.js.page
@@ -0,0 +1,217 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="scale.js">
+ <info>
+ <title type="text">Scale (JavaScript)</title>
+ <link type="guide" xref="beginner.js#entry"/>
+ <revision version="0.1" date="2012-06-20" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Taryn Fox</name>
+ <email>jewelfox fursona net</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A slider which corresponds to a numerical value</desc>
+ </info>
+
+ <title>Scale</title>
+ <media type="image" mime="image/png" src="media/scalepenguins.png"/>
+ <p>A Scale is a horizontal or vertical slider, that represents a value inside a numerical range. When you
create a new Scale, you set what its default position is, what the numbers at the top and bottom of the range
are, and things like how much it moves up or down when you click on the Scale to either side of the knob. To
keep from having to type all that in every time you create a new Scale, you can create an object called an
Adjustment which keeps track of all that, then tell each new Scale to use that Adjustment.</p>
+ <p>This scale is a simple widget that lets you adjust the size of an iceberg that penguins live on. The
number of penguins on the iceberg is the product of the values of the two sliders. Try playing with them and
seeing what happens.</p>
+ <links type="section" />
+
+ <section id="imports">
+ <title>Libraries to import</title>
+ <code mime="application/javascript"><![CDATA[
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+]]></code>
+ <p>These are the libraries we need to import for this application to run. Remember that the line which
tells GNOME that we're using Gjs always needs to go at the start.</p>
+ </section>
+
+ <section id="applicationwindow">
+ <title>Creating the application window</title>
+ <code mime="application/javascript"><![CDATA[
+const ScaleExample = new Lang.Class({
+ Name: 'Scale Example',
+
+ // Create the application itself
+ _init: function() {
+ this.application = new Gtk.Application({
+ application_id: 'org.example.jsscale'
+ });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents window when active
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function() {
+ this._buildUI ();
+ },
+]]></code>
+ <p>All the code for this sample goes in the ScaleExample class. The above code creates a <link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link> for our
widgets and window to go in.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Build the application's UI
+ _buildUI: function() {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ border_width: 20,
+ title: "Birds on a Floe"});
+]]></code>
+ <p>The _buildUI function is where we put all the code to create the application's user interface. The
first step is creating a new <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link> to put all our
widgets into.</p>
+ </section>
+
+ <section id="button">
+ <title>Creating the scales</title>
+ <code mime="application/javascript"><![CDATA[
+ // Create the horizontal scale
+ this._hScale = Gtk.Scale.new_with_range (Gtk.Orientation.HORIZONTAL, 0.0, 100.0, 5.0);
+ this._hScale.set_valign (Gtk.Align.START);
+ this._hScale.set_value (50);
+ this._hScale.set_digits (0);
+ // this._hScale.set_draw_value (false);
+]]></code>
+
+ <p>The new_with_range method is one way to create a new Scale widget. The parameters it takes are a
<link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Orientation.html";>Gtk.Orientation</link>, the
minimum value, the maximum value, and the increment for a single step. After that we use the Scale's methods
to set its starting value, and how many decimal places it runs to. We also set its vertical alignment in this
case, to control where it appears in the window.</p>
+ <p>We can use the set_draw_value method to tell it whether or not to show the number next to the sliding
scale. It's commented out in this example.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Create a master adjustment to use for the vertical (or any other) scale
+ this._adjustment = new Gtk.Adjustment ({
+ value: 95,
+ lower: 0,
+ upper: 100,
+ step_increment: 5,
+ page_increment: 10 });
+]]></code>
+
+ <p>An Adjustment is an object we can use to simplify things when creating a new Scale. The Adjustment's
"value" property is what the Scale's default value is, while "upper" and "lower" make the high and low ends
of the numerical range. Meanwhile, the increment values show how much the slider moves when you do things
like click on it.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Create a vertical scale using the adjustment we just made
+ this._vScale = new Gtk.Scale ({
+ orientation: Gtk.Orientation.VERTICAL,
+ adjustment: this._adjustment,
+ digits: 0,
+ // draw_value: false,
+ margin_left: 10 });
+]]></code>
+
+ <p>Here we create a new Scale object using _adjustment as its "adjustment" property. This is a great
shortcut. We still have to tell it to round off the decimal place, though. Note that the draw_value property
is commented out; this is how you tell it not to show the number next to the Scale when you're creating one
this way.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Create the label that shows the product of the two values
+ this._product = (this._hScale.get_value() * this._vScale.get_value());
+ this._label = new Gtk.Label ({
+ label: (String(this._product) + " penguins on the iceberg."),
+ height_request: 200,
+ width_request: 200,
+ wrap: true});
+
+ // Connect the two scales to functions which recalculate the label
+ this._hScale.connect ("value-changed", Lang.bind (this, this._recalc));
+ this._vScale.connect ("value-changed", Lang.bind (this, this._recalc));
+]]></code>
+
+ <p>We can use the get_value method to find out the numerical value a Scale is set at. We can then do
whatever we want with it, including multiply the two Scales' values together and have a <link
xref="label.js">Label</link> show us the product. We set the label's text to wrap around, because we're
having it display a silly message too.</p>
+ <p>After we create the Label, we connect the two Scales' "value-changed" signals to _recalc, a function
that will recalculate the number of penguins on the iceberg and come up with a new message.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Create a grid to arrange things in
+ this._UIGrid = new Gtk.Grid ({
+ halign: Gtk.Align.CENTER,
+ valign: Gtk.Align.CENTER,
+ margin_top: 20,
+ margin_left: 20});
+
+ // Attach everything to the grid
+ this._UIGrid.attach (this._label, 0, 0, 1, 1);
+ this._UIGrid.attach (this._hScale, 0, 1, 1, 1);
+ this._UIGrid.attach (this._vScale, 1, 0, 1, 1);
+]]></code>
+ <p>Here we create a <link xref="grid.js">Grid</link> to put everything in, then attach all our widgets
to it. Note that here and on some of the widgets themselves we're using margins to keep things neatly
spaced.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Add the grid to the window
+ this._window.add (this._UIGrid);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+]]></code>
+ <p>Finally, we add the Grid to the window, then tell the window to show itself and all the widgets
inside of it.</p>
+ </section>
+
+ <section id="scales-handler">
+ <title>Function which handles the scales' values changing</title>
+
+ <code mime="application/javascript"><![CDATA[
+ _recalc: function() {
+
+ // Figure out what the product of the two scales' values is
+ var product = (this._hScale.get_value() * this._vScale.get_value());
+
+ // Create a blank comment line in case there isn't a silly comment to make
+ var comment = "";
+
+ // Make a silly comment based on the number of penguins
+ if (product > 9000) {
+ comment = "It's over 9000!";
+ }
+ else if (product < 1000 && product > 0) {
+ comment = "They're getting lonely.";
+ }
+ else if (product == 0) {
+ comment = "They're all gone ...";
+ }
+ else comment = "";
+
+ // Set ._label's new text
+ this._label.set_label (String (product) + " penguins on the iceberg. " + comment);
+
+ }
+
+});
+]]></code>
+ <p>Remember, we can get a Scale's value using its get_value method. Here we simply recalculate what the
product of the two values is after one of the Scales is moved, add in a silly message depending on how many
penguins are left, and change the wording on _label to show the new number and message.</p>
+
+ <code mime="application/javascript"><![CDATA[
+// Run the application
+let app = new ScaleExample ();
+app.application.run (ARGV);
+]]></code>
+ <p>Finally, we create a new instance of the finished ScaleExample class, and set the application
running.</p>
+ </section>
+
+ <section id="complete">
+ <title>Complete code sample</title>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/scale.js"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="in-depth">
+ <title>In-depth documentation</title>
+<list>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Adjustment.html";>Gtk.Adjustment</link></p></item>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Grid.html";>Gtk.Grid</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Label.html";>Gtk.Label</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Scale.html";>Gtk.Scale</link></p></item>
+</list>
+ </section>
+</page>
diff --git a/beginners-docs/C/scale.py.page b/beginners-docs/C/scale.py.page
new file mode 100644
index 0000000..0fcf256
--- /dev/null
+++ b/beginners-docs/C/scale.py.page
@@ -0,0 +1,61 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="scale.py">
+ <info>
+ <title type="text">Scale (Python)</title>
+ <link type="guide" xref="beginner.py#entry"/>
+ <link type="seealso" xref="grid.py"/>
+ <link type="next" xref="textview.py" />
+ <revision version="0.2" date="2012-06-23" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A slider widget for selecting a value from a range</desc>
+ </info>
+
+ <title>Scale</title>
+ <media type="image" mime="image/png" src="media/scale.png"/>
+ <p>Slide the scales!</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/scale.py"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="methods">
+ <title>Useful methods for a Scale widget</title>
+ <p>A Gtk.Adjustment is needed to construct the Gtk.Scale. This is the representation of a value with a
lower and upper bound, together with step and page increments, and a page size, and it is constructed as
<code>Gtk.Adjustment(value, lower, upper, step_increment, page_increment, page_size)</code> where the fields
are of type <code>float</code>; <code>step_increment</code> is the increment/decrement that is obtained by
using the cursor keys, <code>page_increment</code> the one that is obtained clicking on the scale itself.
Note that <code>page_size</code> is not used in this case, it should be set to <code>0</code>.</p>
+ <p>In line 28 the signal <code>"value-changed"</code> is connected to the callback function
<code>scale_moved()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback
function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.</p>
+ <list>
+ <item><p><code>get_value()</code> retrieves the current value of the scale;
<code>set_value(value)</code> sets it (if the <code>value</code>, of type <code>float</code>, is outside the
minimum or maximum range, it will be clamped to fit inside them). These are methods of the class
Gtk.Range.</p></item>
+ <item><p>Use <code>set_draw_value(False)</code> to avoid displaying the current value as a string next
to the slider.</p></item>
+ <item><p>To highlight the part of the scale between the origin and the current value:</p>
+ <code mime="text/x-python">
+self.h_scale.set_restrict_to_fill_level(False)
+self.h_scale.set_fill_level(self.h_scale.get_value())
+self.h_scale.set_show_fill_level(True)</code>
+ <p>in the callback function of the "value-changed" signal, so to have the new filling every time the
value is changed. These are methods of the class Gtk.Range.</p>
+ </item>
+ <item><p><code>add_mark(value, position, markup)</code> adds a mark at the <code>value</code>
(<code>float</code> or <code>int</code> if that is the precision of the scale), in <code>position</code>
(<code>Gtk.PositionType.LEFT, Gtk.PositionType.RIGHT, Gtk.PositionType.TOP, Gtk.PositionType.BOTTOM</code>)
with text <code>Null</code> or <code>markup</code> in the Pango Markup Language. To clear marks,
<code>clear_marks()</code>.</p></item>
+ <item><p><code>set_digits(digits)</code> sets the precision of the scale at <code>digits</code>
digits.</p></item>
+ </list>
+ </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/GtkScale.html";>GtkScale</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkAdjustment.html";>GtkAdjustment</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/gtk3-Standard-Enumerations.html";>Standard
Enumerations</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/scale.vala.page b/beginners-docs/C/scale.vala.page
new file mode 100644
index 0000000..391b54f
--- /dev/null
+++ b/beginners-docs/C/scale.vala.page
@@ -0,0 +1,36 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="scale.vala">
+ <info>
+ <title type="text">Scale (Vala)</title>
+ <link type="guide" xref="beginner.vala#entry"/>
+ <link type="seealso" xref="grid.vala"/>
+ <link type="seealso" xref="label.vala"/>
+ <revision version="0.1" date="2012-06-07" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A slider widget for selecting a value from a range</desc>
+ </info>
+
+ <title>Scale</title>
+ <media type="image" mime="image/png" src="media/scale.png"/>
+ <p>Slide the scales!</p>
+
+<code mime="text/x-csharp" style="numbered"><xi:include href="samples/scale.vala"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.Scale.html";>Gtk.Scale</link></p></item>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.Adjustment.html";>Gtk.Adjustment</link></p></item>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.PositionType.html";>Gtk.PositionType</link></p></item>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.Orientation.html";>Gtk.Orientation</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/scrolledwindow.c.page b/beginners-docs/C/scrolledwindow.c.page
new file mode 100644
index 0000000..bcc5c48
--- /dev/null
+++ b/beginners-docs/C/scrolledwindow.c.page
@@ -0,0 +1,38 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="scrolledwindow.c">
+ <info>
+ <title type="text">ScrolledWindow (C)</title>
+ <link type="guide" xref="beginner.c#scrolling"/>
+ <link type="seealso" xref="textview.c"/>
+ <link type="seealso" xref="image.c"/>
+ <revision version="0.1" date="2012-08-20" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Monica Kochofar</name>
+ <email>monicakochofar gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Adds scrollbars to its child widget</desc>
+ </info>
+
+ <title>ScrolledWindow</title>
+
+ <media type="image" mime="image/png" src="media/scrolledwindow.png"/>
+ <p>An image in a scrolled window.</p>
+
+ <code mime="text/x-csrc" style="numbered">
+<xi:include href="samples/scrolledwindow.c" parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkApplication.html";>GtkApplication</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkWindow.html";>GtkWindow</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkScrolledWindow.html";>GtkScrolledWindow</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk/stable/gtk-Standard-Enumerations.html#GtkPolicyType";>GtkPolicyType</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/scrolledwindow.py.page b/beginners-docs/C/scrolledwindow.py.page
new file mode 100644
index 0000000..68b8b92
--- /dev/null
+++ b/beginners-docs/C/scrolledwindow.py.page
@@ -0,0 +1,49 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="scrolledwindow.py">
+ <info>
+ <title type="text">ScrolledWindow (Python)</title>
+ <link type="guide" xref="beginner.py#scrolling"/>
+ <link type="next" xref="paned.py"/>
+ <revision version="0.1" date="2012-05-26" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Adds scrollbars to its child widget</desc>
+ </info>
+
+ <title>ScrolledWindow</title>
+ <media type="image" mime="image/png" src="media/scrolledwindow.png"/>
+ <p>An image in a scrolled window.</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/scrolledwindow.py"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+ <section id="methods">
+ <title>Useful methods for a ScrolledWindow widget</title>
+ <list>
+ <item><p><code>set_policy(hscrollbar_policy, vscrollbar_policy)</code> where each of the arguments is
one of <code>Gtk.Policy.AUTOMATIC, Gtk.Policy.ALWAYS, Gtk.Policy.NEVER</code> regulates whether the
horizontal and vertical scrollbars should appear: with <code>AUTOMATIC</code> they appear only if needed,
<code>ALWAYS</code> and <code>NEVER</code> are self-explanatory.</p></item>
+ <item><p><code>add_with_viewport(widget)</code> is used to add the Gtk.Widget <code>widget</code>
without native scrolling capabilities inside the window.</p></item>
+ <item><p><code>set_placement(window_placement)</code> sets the placement of the contents with respect
to the scrollbars for the scrolled window. The options for the argument are
<code>Gtk.CornerType.TOP_LEFT</code> (default: the scrollbars are on the bottom and on the right of the
window), <code>Gtk.CornerType.TOP_RIGHT, Gtk.CornerType.BOTTOM_LEFT,
Gtk.CornerType.BOTTOM_RIGHT</code>.</p></item>
+ <item><p><code>set_hadjustment(adjustment)</code> and <code>set_vadjustment(adjustment)</code> set the
Gtk.Adjustment <code>adjustment</code>. This is the representation of a value with a lower and upper bound,
together with step and page increments, and a page size, and it is constructed as <code>Gtk.Adjustment(value,
lower, upper, step_increment, page_increment, page_size)</code> where the fields are of type
<code>float</code>. (Note that <code>step_increment</code> is not used in this case, it can be set to
<code>0</code>.)</p></item>
+ </list>
+ </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/GtkScrolledWindow.html";>GtkScrolledWindow</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/gtk3-Standard-Enumerations.html";>Standard
Enumerations</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/unstable/GtkImage.html";>GtkImage</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/scrolledwindow.vala.page b/beginners-docs/C/scrolledwindow.vala.page
new file mode 100644
index 0000000..05e7dbf
--- /dev/null
+++ b/beginners-docs/C/scrolledwindow.vala.page
@@ -0,0 +1,33 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="scrolledwindow.vala">
+ <info>
+ <title type="text">ScrolledWindow (Vala)</title>
+ <link type="guide" xref="beginner.vala#scrolling"/>
+ <link type="seealso" xref="image.vala"/>
+ <revision version="0.1" date="2012-06-08" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Adds scrollbars to its child widget</desc>
+ </info>
+
+ <title>ScrolledWindow</title>
+ <media type="image" mime="image/png" src="media/scrolledwindow.png"/>
+ <p>An image in a scrolled window.</p>
+
+<code mime="text/x-csharp" style="numbered"><xi:include href="samples/scrolledwindow.vala"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.ScrolledWindow.html";>Gtk.ScrolledWindow</link></p></item>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.PolicyType.html";>Gtk.PolicyType</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/separator.py.page b/beginners-docs/C/separator.py.page
new file mode 100644
index 0000000..05f10a1
--- /dev/null
+++ b/beginners-docs/C/separator.py.page
@@ -0,0 +1,45 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="separator.py">
+ <info>
+ <title type="text">Seperator (Python)</title>
+ <link type="guide" xref="beginner.py#ornaments"/>
+ <link type="seealso" xref="grid.py"/>
+ <link type="next" xref="scrolledwindow.py" />
+ <revision version="0.1" date="2012-06-01" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A separator widget</desc>
+ </info>
+
+ <title>Separator</title>
+
+ <media type="image" mime="image/png" src="media/separator.png"/>
+ <p>A horizontal and a vertical separator divide some labels.</p>
+
+ <links type="section"/>
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/separator.py"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="reference">
+ <title>API Reference</title>
+ <p>In this sample we used the following:</p>
+ <list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkWindow.html";>GtkWindow</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkSeparator.html";>GtkSeparator</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/unstable/GtkGrid.html";>GtkGrid</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/unstable/GtkLabel.html";>GtkLabel</link></p></item>
+ </list>
+ </section>
+
+</page>
diff --git a/beginners-docs/C/set-up-gedit.js.page b/beginners-docs/C/set-up-gedit.js.page
new file mode 100644
index 0000000..b4ed1e5
--- /dev/null
+++ b/beginners-docs/C/set-up-gedit.js.page
@@ -0,0 +1,46 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="topic" style="task"
+ id="set-up-gedit.js">
+ <info>
+ <link type="guide" xref="beginner.js#tutorials"/>
+ <revision version="0.1" date="2012-07-17" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Taryn Fox</name>
+ <email>jewelfox fursona net</email>
+ <years>2012</years>
+ </credit>
+
+ </info>
+
+ <title>Set up gedit for JavaScript development</title>
+ <p>This tutorial will show you how to set up <link href="http://projects.gnome.org/gedit/";>gedit</link>,
GNOME's basic text editor, so that it has a handful of extra features which are useful for writing JavaScript
code.</p>
+
+ <section id="view">
+ <title>Making code clearer</title>
+ <p>Click on <gui>Edit</gui> in gedit's menu bar, then click on <gui>Preferences</gui>. You should see
something like this:</p>
+ <media type="image" mime="image/png" src="media/geditview.png"/>
+ <p>Here are the options you want to make sure are turned on.</p>
+ <steps>
+ <item><p><gui>Display line numbers</gui> will help you compare the code you type in with the original,
and make it easier to see which line is causing an error if there is a bug.</p></item>
+ <item><p><gui>Highlight current line</gui> makes it easier to see which line you're on, when you have
to go back and forth a lot.</p></item>
+ <item><p><gui>Highlight matching brackets</gui> helps you make sure you didn't leave out a bracket by
accident.</p></item>
+ </steps>
+ </section>
+
+ <section id="edit">
+ <title>Making editing easier</title>
+ <p>In gedit's <gui>Preferences</gui> dialog, click on the <gui>Editor</gui> tab. You should see
something like this:</p>
+ <media type="image" mime="image/png" src="media/gediteditor.png"/>
+ <p>Here, you want to have <gui>Enable automatic indentation</gui> turned on. This means that when you
hit <key>Enter</key> the cursor stays indented as far as the last line was. This is extremely useful when
writing JavaScript code, since it uses indentation to make it clearer which parts do what.</p>
+ <note style="tip"><p>If you want to share code with other people who write GNOME JavaScript
applications, you'll also want to set <gui>Tab width</gui> to 4 and turn on <gui>Insert spaces instead of
tabs</gui>.</p></note>
+ </section>
+
+
+
+
+
+
+</page>
diff --git a/beginners-docs/C/signals-callbacks.py.page b/beginners-docs/C/signals-callbacks.py.page
new file mode 100644
index 0000000..cbd0cbb
--- /dev/null
+++ b/beginners-docs/C/signals-callbacks.py.page
@@ -0,0 +1,51 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:e="http://projectmallard.org/experimental/";
+ type="guide" style="task"
+ id="signals-callbacks.py">
+
+<info>
+ <title type="text">Signals and callbacks (Python)</title>
+ <link type="guide" xref="beginner.py#theory"/>
+ <link type="next" xref="button.py"/>
+ <revision version="0.1" date="2012-06-16" status="draft"/>
+
+ <desc>An explanation of signals and callbacks in GTK+.</desc>
+ <credit type="author copyright">
+ <name>Sebastian Pölsterl</name>
+ <email>sebp k-d-w org</email>
+ <years>2011</years>
+ </credit>
+ <credit type="editor">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+</info>
+
+<title>Signals and callbacks</title>
+
+<links type="section" />
+
+<section id="overview">
+<title>Overview</title>
+
+<p>Like most GUI toolkits, GTK+ uses an event-driven programming model. When the user is doing nothing, GTK+
sits in the main loop and waits for input. If the user performs some action - say, a mouse click - then the
main loop "wakes up" and delivers an event to GTK+.</p>
+
+<p>When widgets receive an event, they frequently emit one or more signals. Signals notify your program that
"something interesting happened" by invoking functions you have connected to the signal. Such functions are
commonly known as callbacks. When your callbacks are invoked, you would typically take some action. After a
callback finishes, GTK+ will return to the main loop and await more user input.</p>
+
+<p>A generic example is: <code>handler_id = widget.connect("event", callback, data)</code>.
<code>widget</code> is an instance of a widget we created earlier. Next, the <code>event</code> we are
interested in. Each widget has its own particular events which can occur. For instance, if you have a
Gtk.Button you usually want to connect to the "clicked" event: this means that when the button is clicked,
the signal is issued. Another example is the <code>notify::property</code> signal: whenever a <link
xref="properties.py">property</link> is modified on a GObject, instead of just emitting the
<code>notify</code> signal, GObject associates as a detail to this signal emission the name of the property
modified. This allows clients who wish to be notified of changes to only one property to filter most events
before receiving them. Thirdly, the callback argument is the name of the callback function, which contains
the code which runs when signals of the specified type are issued. Fin
ally, the optional data argument includes any data which should be passed when the signal is issued.</p>
+
+<p>The function returns a number (the <code>handler_id</code>) that identifies this particular
signal-callback pair. This number is required to disconnect from a signal such that the callback function
will not be called during any future or currently ongoing emissions of the signal it has been connected to,
as in <code>widget.disconnect(handler_id)</code>.</p>
+
+</section>
+
+<section id="references">
+
+<title>References</title>
+<p><link href="http://developer.gnome.org/gobject/stable/signal.html";>Signals</link> in GObject
documentation</p>
+<p><link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/basics.html";>Basics - Main loop and
Signals</link> in Python GTK+ 3 Tutorial</p>
+</section>
+
+
+</page>
diff --git a/beginners-docs/C/signals-callbacks.vala.page b/beginners-docs/C/signals-callbacks.vala.page
new file mode 100644
index 0000000..0a5971f
--- /dev/null
+++ b/beginners-docs/C/signals-callbacks.vala.page
@@ -0,0 +1,20 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="signals-callbacks.vala">
+ <info>
+ <link type="guide" xref="beginner.vala#tutorials"/>
+ <revision version="0.1" date="2012-02-20" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc></desc>
+ </info>
+
+ <title>ii. Signals and Handlers</title>
+
+</page>
diff --git a/beginners-docs/C/spinbutton.c.page b/beginners-docs/C/spinbutton.c.page
new file mode 100644
index 0000000..ac26fce
--- /dev/null
+++ b/beginners-docs/C/spinbutton.c.page
@@ -0,0 +1,41 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="spinbutton.c">
+ <info>
+ <title type="text">SpinButton (C)</title>
+ <link type="guide" xref="beginner.c#entry"/>
+ <link type="seealso" xref="scale.c"/>
+ <link type="seealso" xref="label.c"/>
+ <link type="seealso" xref="grid.c"/>
+ <revision version="0.2" date="2012-07-05" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Monica Kochofar</name>
+ <email>monicakochofar gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Retrieve an integer or floating point number</desc>
+ </info>
+
+ <title>SpinButton</title>
+
+ <media type="image" mime="image/png" src="media/spinbutton.png"/>
+ <p>Choose a number, by entering it or by clicking on the -/+ buttons!</p>
+
+ <code mime="text/x-csrc" style="numbered">
+<xi:include href="samples/spinbutton.c" parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/3.4/GtkApplication.html";>GtkApplication</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/3.4/GtkWindow.html";>GtkWindow</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkSpinButton.html";>GtkSpinButton</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkLabel.html";>GtkLabel</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkAdjustment.html";>GtkAdjustment</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkGrid.html";>GtkGrid</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/spinbutton.js.page b/beginners-docs/C/spinbutton.js.page
new file mode 100644
index 0000000..dbab644
--- /dev/null
+++ b/beginners-docs/C/spinbutton.js.page
@@ -0,0 +1,208 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="spinbutton.js">
+ <info>
+ <title type="text">SpinButton (JavaScript)</title>
+ <link type="guide" xref="beginner.js#entry"/>
+ <link type="seealso" xref="GtkApplicationWindow.js" />
+ <link type="seealso" xref="grid.js" />
+ <link type="seealso" xref="label.js" />
+ <revision version="0.1" date="2012-06-24" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Taryn Fox</name>
+ <email>jewelfox fursona net</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A number entry field that has + and - buttons</desc>
+ </info>
+
+ <title>SpinButton</title>
+ <media type="image" mime="image/png" src="media/spinbuttonkittens.png"/>
+ <p>A SpinButton is not related to a <link xref="spinner.js">Spinner</link>. It's a text entry field which
only accepts numbers, and which has plus and minus buttons to let you change the value without having to type
anything in.</p>
+ <p>It's best used when it's obvious that only a number can be entered into it. In this example, two
SpinButtons are used for the number of kittens and number of cans of tuna to give them.</p>
+ <links type="section" />
+
+ <section id="imports">
+ <title>Libraries to import</title>
+ <code mime="application/javascript"><![CDATA[
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+]]></code>
+ <p>These are the libraries we need to import for this application to run. Remember that the line which
tells GNOME that we're using Gjs always needs to go at the start.</p>
+ </section>
+
+ <section id="applicationwindow">
+ <title>Creating the application window</title>
+ <code mime="application/javascript"><![CDATA[
+const SpinButtonExample = new Lang.Class({
+ Name: 'SpinButton Example',
+
+ // Create the application itself
+ _init: function() {
+ this.application = new Gtk.Application({
+ application_id: 'org.example.jsspinbutton'
+ });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents window when active
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function() {
+ this._buildUI ();
+ },
+]]></code>
+ <p>All the code for this sample goes in the SpinButtonExample class. The above code creates a <link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link> for our
widgets and window to go in.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Build the application's UI
+ _buildUI: function() {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ border_width: 20,
+ title: "Kitten Feeder"});
+]]></code>
+ <p>The _buildUI function is where we put all the code to create the application's user interface. The
first step is creating a new <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link> to put all our
widgets into.</p>
+ </section>
+
+ <section id="spinbutton">
+ <title>Creating the SpinButtons</title>
+ <code mime="application/javascript"><![CDATA[
+ // Create the first spinbutton using a function
+ this._kittens = Gtk.SpinButton.new_with_range (1, 9001, 1);
+ this._kittens.connect ("value-changed", Lang.bind (this, this._newValue));
+]]></code>
+
+ <p>We can use the new_with_range function to create a new SpinButton quickly. Its first parameter is the
SpinButton's starting value, its second is the maximum value, and its third is how much to increment it when
the plus or minus buttons are pressed.</p>
+ <p>After we create the first SpinButton, we connect its value-changed signal to a function which handles
what happens when the number inside either SpinButton changes.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Create an adjustment to use for the second spinbutton
+ this._adjustment = new Gtk.Adjustment ({
+ value: 1,
+ lower: 0,
+ upper: 9001,
+ step_increment: 1,
+ page_increment: 10 });
+
+ // Create the second spinbutton
+ this._tuna = new Gtk.SpinButton ({ adjustment: this._adjustment });
+ this._tuna.connect ("value-changed", Lang.bind (this, this._newValue));
+
+ // this._tuna.set_digits (1);
+ // this._tuna.set_wrap (true);
+]]></code>
+
+ <p>If you want more fine-grained control over a SpinButton, or want to create a bunch of SpinButtons
which all use the same parameters, you can create an object called an <link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Adjustment.html";>Adjustment</link>. Then you can use
that object as a new SpinButton's adjustment property, and it sets all the values at once. Afterwards, you
can change all the SpinButtons which use that adjustment by changing the Adjustment object's properties.</p>
+ <p>The commented-out lines here show things you can do to customize your SpinButton. You can set the
number of digits which go after the decimal point, for example, or tell it to wrap the number around if it
goes past the upper or lower bounds that you set.</p>
+ <note><p>For the kitties' sake, please don't use set_digits to allow a decimal number of
kittens.</p></note>
+ </section>
+
+ <section id="UI">
+ <title>Creating the rest of the UI</title>
+
+ <code mime="application/javascript"><![CDATA[
+ // Create the text labels to go with the spinbuttons
+ this._startLabel = new Gtk.Label ({ label: "There are " });
+ this._kittenLabel = new Gtk.Label ({ label: " kitten(s), and "});
+ this._tunaLabel = new Gtk.Label ({ label: " can(s) of tuna."});
+ this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value()));
+ this._lastLabel = new Gtk.Label ({
+ label: "That's " + this.perKitten + " can(s) of tuna per kitten." });
+]]></code>
+ <p>We create each <link xref="label.js">Label</link> individually, and then string them together along
with the SpinButtons. The last label needs to show the number of cans of tuna per kitten, so it has a
variable in the middle, which corresponds to an equation that uses the SpinButtons' get_value functions to
find out what they're set at. JavaScript's Math function's floor method is used to round the number of cans
of tuna per kitten down to the nearest whole number.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Create a grid to put the spinbuttons and their labels in
+ this._spinGrid = new Gtk.Grid ({
+ halign: Gtk.Align.CENTER,
+ valign: Gtk.Align.CENTER,
+ margin_bottom: 20 });
+
+ // Attach everything to the grid
+ this._spinGrid.attach (this._startLabel, 0, 0, 1, 1);
+ this._spinGrid.attach (this._kittens, 1, 0, 1, 1);
+ this._spinGrid.attach (this._kittenLabel, 2, 0, 1, 1);
+ this._spinGrid.attach (this._tuna, 3, 0, 1, 1);
+ this._spinGrid.attach (this._tunaLabel, 4, 0, 1, 1);
+
+ // Create a main grid to hold it and the last label
+ this._mainGrid = new Gtk.Grid ({
+ halign: Gtk.Align.CENTER,
+ valign: Gtk.Align.CENTER });
+
+ // Attach the smaller grid and the last label to the main grid
+ this._mainGrid.attach (this._spinGrid, 0, 0, 1, 1);
+ this._mainGrid.attach (this._lastLabel, 0, 1, 1, 1);
+]]></code>
+
+ <p>Here we use <link xref="grid.js">Grid</link> widgets to keep everything organized. One Grid holds the
labels and SpinButtons in order, while the next puts that Grid on top and the final Label on the bottom.</p>
+ <p>There isn't a wrong way to organize things in Grids, so long as you like how it turns out. In this
case, the top Grid has a margin on the bottom to keep it evenly spaced from the bottom Label, and the bottom
Label is inside a separate Grid so it will be centered relative to the Labels and SpinButtons on the top.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Add the main grid to the window
+ this._window.add (this._mainGrid);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+]]></code>
+ <p>Finally, we add the larger Grid to the window, then tell the window to show itself and all the
widgets inside of it.</p>
+ </section>
+
+ <section id="spinbutton-handler">
+ <title>Function which handles the SpinButtons' numerical values being adjusted</title>
+
+ <code mime="application/javascript"><![CDATA[
+ _newValue: function () {
+
+ // Update the label which shows how many cans there are per kitten
+ this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value()))
+ this._lastLabel.set_label ("That's " + this.perKitten + " can(s) of tuna per kitten.");
+
+ }
+
+});
+]]></code>
+ <p>Here we update the perKitten variable based on the SpinButtons' new values, and use the set_label
property to refresh what _lastLabel shows. Since both SpinButtons have their value-changed signal connected
to this function, every time either of the numbers changes this function will update the Label.</p>
+
+ <code mime="application/javascript"><![CDATA[
+// Run the application
+let app = new SpinButtonExample ();
+app.application.run (ARGV);
+]]></code>
+ <p>Finally, we create a new instance of the finished SpinButtonExample class, and set the application
running.</p>
+ </section>
+
+ <section id="complete">
+ <title>Complete code sample</title>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/spinbutton.js"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="in-depth">
+ <title>In-depth documentation</title>
+<list>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Adjustment.html";>Gtk.Adjustment</link></p></item>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Grid.html";>Gtk.Grid</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Label.html";>Gtk.Label</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.SpinButton.html";>Gtk.SpinButton</link></p></item>
+</list>
+ </section>
+</page>
diff --git a/beginners-docs/C/spinbutton.py.page b/beginners-docs/C/spinbutton.py.page
new file mode 100644
index 0000000..ec548c8
--- /dev/null
+++ b/beginners-docs/C/spinbutton.py.page
@@ -0,0 +1,52 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="spinbutton.py">
+ <info>
+ <title type="text">SpinButton (Python)</title>
+ <link type="guide" xref="beginner.py#entry"/>
+ <link type="seealso" xref="signals-callbacks.py"/>
+ <link type="next" xref="entry.py" />
+ <revision version="0.2" date="2012-06-23" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Retrieve an integer or floating-point number from the user.</desc>
+ </info>
+
+ <title>SpinButton</title>
+ <media type="image" mime="image/png" src="media/spinbutton.png"/>
+ <p>Choose a number, by entering it or by clicking on the -/+ buttons!</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/spinbutton.py"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="methods">
+ <title>Useful methods for a SpinButton widget</title>
+ <p>A Gtk.Adjustment is needed to construct the Gtk.SpinButton. This is the representation of a value
with a lower and upper bound, together with step and page increments, and a page size, and it is constructed
as <code>Gtk.Adjustment(value, lower, upper, step_increment, page_increment, page_size)</code> where the
fields are of type <code>float</code>; <code>step_increment</code> is the increment/decrement that is
obtained by using the cursor keys or the buttons of the spinbutton. Note that <code>page_increment</code> and
<code>page_size</code> are not used in this case, and they should be set to <code>0</code>.</p>
+ <p>In line 23 the signal <code>"value-changed"</code> is connected to the callback function
<code>spin_selected()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback
function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.</p>
+ <list>
+ <item><p>If you want the value of the spinbutton to wrap around when they exceed the maximum or the
minimum, set <code>set_wrap(True)</code>. The <code>"wrapped"</code> signal is emitted when this
happens.</p></item>
+ <item><p><code>set_digits(digits)</code> sets the precision to be displayed by the spinbutton, up to
20 digits.</p></item>
+ <item><p>To get the value of the spinbutton as an integer, use
<code>get_value_as_int()</code>.</p></item>
+ </list>
+ </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/GtkSpinButton.html";>GtkSpinButton</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkAdjustment.html";>GtkAdjustment</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/spinbutton.vala.page b/beginners-docs/C/spinbutton.vala.page
new file mode 100644
index 0000000..5186437
--- /dev/null
+++ b/beginners-docs/C/spinbutton.vala.page
@@ -0,0 +1,33 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="spinbutton.vala">
+ <info>
+ <title type="text">SpinButton (Vala)</title>
+ <link type="guide" xref="beginner.vala#entry"/>
+ <link type="seealso" xref="label.vala"/>
+ <link type="seealso" xref="grid.vala"/>
+ <revision version="0.1" date="2012-05-07" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Retrieve an integer or floating point number.</desc>
+ </info>
+
+ <title>SpinButton</title>
+ <media type="image" mime="image/png" src="media/spinbutton.png"/>
+ <p>Choose a number, by entering it or by clicking on the -/+ buttons!</p>
+
+<code mime="text/x-csharp" style="numbered"><xi:include href="samples/spinbutton.vala"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.SpinButton.html";>Gtk.SpinButton</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/spinner.c.page b/beginners-docs/C/spinner.c.page
new file mode 100644
index 0000000..ed72757
--- /dev/null
+++ b/beginners-docs/C/spinner.c.page
@@ -0,0 +1,37 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="spinner.c">
+ <info>
+ <title type="text">Spinner (C)</title>
+ <link type="guide" xref="beginner.c#display-widgets"/>
+ <link type="seealso" xref="togglebutton.c"/>
+ <revision version="0.1" date="2012-06-14" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Monica Kochofar</name>
+ <email>monicakochofar gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A spinner animation</desc>
+ </info>
+
+ <title>Spinner</title>
+
+ <media type="image" mime="image/png" src="media/spinner.png"/>
+ <p>This Spinner is stopped and started by pressing the spacebar.</p>
+
+ <code mime="text/x-csrc" style="numbered">
+<xi:include href="samples/spinner.c" parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/3.4/GtkApplication.html";>GtkApplication</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/3.4/GtkWindow.html";>GtkWindow</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gobject/stable/gobject-The-Base-Object-Type.html#g-object-get";>GObject</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkSpinner.html";>GtkSpinner</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/spinner.js.page b/beginners-docs/C/spinner.js.page
new file mode 100644
index 0000000..a94be8b
--- /dev/null
+++ b/beginners-docs/C/spinner.js.page
@@ -0,0 +1,34 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="spinner.js">
+ <info>
+ <title type="text">Spinner (JavaScript)</title>
+ <link type="guide" xref="beginner.js#display-widgets"/>
+ <revision version="0.1" date="2012-06-03" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Taryn Fox</name>
+ <email>jewelfox fursona net</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A spinner animation</desc>
+ </info>
+
+ <title>Spinner</title>
+ <media type="image" mime="image/png" src="media/spinner.png"/>
+ <p>This Spinner is stopped and started by pressing the spacebar.</p>
+
+<code mime="application/javascript" style="numbered"><xi:include href="samples/spinner.js"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gdk.html";>Gdk - Key
Values</link></p></item>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Spinner.html";>Gtk.Spinner</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/spinner.py.page b/beginners-docs/C/spinner.py.page
new file mode 100644
index 0000000..36bddfb
--- /dev/null
+++ b/beginners-docs/C/spinner.py.page
@@ -0,0 +1,45 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="spinner.py">
+ <info>
+ <title type="text">Spinner (Python)</title>
+ <link type="guide" xref="beginner.py#display-widgets"/>
+ <link type="next" xref="progressbar.py" />
+ <revision version="0.2" date="2012-06-12" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A spinner animation</desc>
+ </info>
+
+ <title>Spinner</title>
+ <media type="image" mime="image/png" src="media/spinner.png"/>
+ <p>This Spinner is stopped and started by pressing the spacebar.</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/spinner.py"
parse="text"><xi:fallback/></xi:include></code>
+
+ <note><p>
+ <code>Gdk.keyval_name(event.keyval)</code> converts the key value <code>event.keyval</code> into a
symbolic name. The names and corresponding key values can be found <link
href="http://git.gnome.org/browse/gtk+/tree/gdk/gdkkeysyms.h";>here</link>,but for instance
<code>GDK_KEY_BackSpace</code> becomes the string <code>"BackSpace"</code>.
+ </p></note>
+ </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/GtkSpinner.html";>GtkSpinner</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gdk/stable/gdk-Keyboard-Handling.html";>Key
Values</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/spinner.vala.page b/beginners-docs/C/spinner.vala.page
new file mode 100644
index 0000000..165bc43
--- /dev/null
+++ b/beginners-docs/C/spinner.vala.page
@@ -0,0 +1,33 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="spinner.vala">
+ <info>
+ <title type="text">Spinner (Vala)</title>
+ <link type="guide" xref="beginner.vala#display-widgets"/>
+ <revision version="0.1" date="2012-05-06" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A spinner animation</desc>
+ </info>
+
+ <title>Spinner</title>
+ <media type="image" mime="image/png" src="media/spinner.png"/>
+ <p>This Spinner is stopped and started by pressing the spacebar.</p>
+
+<code mime="text/x-csharp" style="numbered"><xi:include href="samples/spinner.vala"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.Widget.html";>Gtk.Widget</link></p></item>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.Spinner.html";>Gtk.Spinner</link></p></item>
+ <item><p><link href="http://www.valadoc.org/gdk-3.0/Gdk.keyval_name.html";>Gdk.keyval_name</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/statusbar.c.page b/beginners-docs/C/statusbar.c.page
new file mode 100644
index 0000000..9b03a23
--- /dev/null
+++ b/beginners-docs/C/statusbar.c.page
@@ -0,0 +1,41 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="statusbar.c">
+ <info>
+ <title type="text">Statusbar (C)</title>
+ <link type="guide" xref="beginner.c#buttons"/>
+ <link type="seealso" xref="grid.c"/>
+ <link type="seealso" xref="button.c"/>
+
+
+ <revision version="0.1" date="2012-06-22" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Monica Kochofar</name>
+ <email>monicakochofar gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Report messages of minor importance to the user</desc>
+ </info>
+
+ <title>Statusbar</title>
+
+ <media type="image" mime="image/png" src="media/statusbar3.png"/>
+ <p>This statusbar is used to demonstrate how messages are stacked in a last-in-first-out order. The
message at the top of the stack is always the one displayed.</p>
+
+ <code mime="text/x-csrc" style="numbered">
+<xi:include href="samples/statusbar.c" parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/3.4/GtkApplication.html";>GtkApplication</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/3.4/GtkWindow.html";>GtkWindow</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkStatusbar.htmll";>GtkStatusBar</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/glib/stable/glib-String-Utility-Functions.html#g-snprintf";>String Utility
Functions</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkGrid.html";>GtkGrid</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/statusbar.js.page b/beginners-docs/C/statusbar.js.page
new file mode 100644
index 0000000..2b487a7
--- /dev/null
+++ b/beginners-docs/C/statusbar.js.page
@@ -0,0 +1,230 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="statusbar.js">
+ <info>
+ <title type="text">Statusbar (JavaScript)</title>
+ <link type="guide" xref="beginner.js#display-widgets"/>
+ <revision version="0.1" date="2012-06-10" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Taryn Fox</name>
+ <email>jewelfox fursona net</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Show notifications in a dedicated statusbar</desc>
+ </info>
+
+ <title>Statusbar</title>
+ <media type="image" mime="image/png" src="media/statusbar2.png"/>
+ <p>This statusbar keeps track of how many times you've clicked a button. Applications like <link
href="http://projects.gnome.org/gedit/";>gedit</link> use statusbars to display information at a glance, and
show notifications without interrupting the user.</p>
+ <p>Messages pushed to a statusbar go on top of its stack, and can be popped off to show the next-most
recent one. You can also clear away every message of a specific type all at once. This sample application
demonstrates these functions.</p>
+ <links type="section" />
+
+ <section id="imports">
+ <title>Libraries to import</title>
+ <code mime="application/javascript"><![CDATA[
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+]]></code>
+ <p>These are the libraries we need to import for this application to run. Remember that the line which
tells GNOME that we're using Gjs always needs to go at the start.</p>
+ </section>
+
+ <section id="applicationwindow">
+ <title>Creating the application window</title>
+ <code mime="application/javascript"><![CDATA[
+const StatusbarExample = new Lang.Class({
+ Name: 'Statusbar Example',
+
+ // Create the application itself
+ _init: function() {
+ this.application = new Gtk.Application({
+ application_id: 'org.example.jsstatusbar',
+ flags: Gio.ApplicationFlags.FLAGS_NONE
+ });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents window when active
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function() {
+ this._buildUI ();
+ },
+]]></code>
+ <p>All the code for this sample goes in the StatusbarExample class. The above code creates a <link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link> for our
widgets and window to go in.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Build the application's UI
+ _buildUI: function() {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ default_height: 120,
+ default_width: 300,
+ title: "Button Clicker"});
+
+ // Create a paned interface
+ this._panes = new Gtk.Paned ({
+ orientation: Gtk.Orientation.VERTICAL });
+]]></code>
+ <p>The _buildUI function is where we put all the code to create the application's user interface. The
first step is creating a new <link href="GtkApplicationWindow.js.page">Gtk.ApplicationWindow</link> to put
all our widgets into. The next step is to create a vertically-oriented <link
href="paned.js.page">Gtk.Paned</link> interface, to divide the window up into two sections. This way the
statusbar looks like those used in other applications, and it stays at the bottom of the window, even if the
user resizes it.</p>
+ </section>
+
+ <section id="buttons">
+ <title>Creating the buttons</title>
+ <code mime="application/javascript"><![CDATA[
+ // Create the main button
+ this._clickMe = new Gtk.Button ({
+ label: "Click Me!" });
+ this._clickMe.connect ("clicked", Lang.bind (this, this._clicked));
+
+ // Create the back button
+ this._backButton = new Gtk.Button ({
+ label: "gtk-go-back",
+ use_stock: true });
+ this._backButton.connect ("clicked", Lang.bind (this, this._back));
+
+ // Create the clear button
+ this._clearButton = new Gtk.Button ({
+ label: "gtk-clear",
+ use_stock: true });
+ this._clearButton.connect ("clicked", Lang.bind (this, this._clear));
+]]></code>
+ <p>This code creates the three <link href="button.js.page">Gtk.Buttons</link> we'll use to push a new
message to the statusbar, pop the last one off, and clear all existing messages. The "back" and "clear"
buttons are <link href="http://developer.gnome.org/gtk/2.24/gtk-Stock-Items.html";>stock buttons</link>, which
are automatically translated into any language GNOME supports.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Put the buttons in a grid
+ this._grid = new Gtk.Grid ({
+ halign: Gtk.Align.CENTER,
+ valign: Gtk.Align.CENTER });
+ this._grid.attach (this._backButton, 0, 0, 1, 1);
+ this._grid.attach_next_to (this._clickMe, this._backButton, Gtk.PositionType.RIGHT, 1, 1);
+ this._grid.attach_next_to (this._clearButton, this._clickMe, Gtk.PositionType.RIGHT, 1, 1);
+
+ // Put the grid in a large frame that fills most of the window
+ this._topFrame = new Gtk.Frame ({
+ border_width: 20,
+ height_request: 90,
+ width_request: 300});
+ this._topFrame.add (this._grid);
+]]></code>
+ <p>This code creates the <link href="grid.js.page">Gtk.Grid</link> that we'll use to organize the
buttons, and attaches the buttons to it in order. It then creates a <link
href="paned.js.page">Gtk.Frame</link> which will take up most of the window and has a large amount of padding
around the buttons, and adds the Grid to the Frame. Note that we still need to put the Frame into the Paned
interface, and then add it to the ApplicationWindow.</p>
+ </section>
+
+ <section id="statusbar">
+ <title>Creating the statusbar</title>
+ <code mime="application/javascript"><![CDATA[
+ // Create the statusbar
+ this._statusbar = new Gtk.Statusbar();
+
+ // Keep track of the number of times the button has been clicked
+ this.Clicks = 0;
+ this.ContextID = this._statusbar.get_context_id ("Number of Clicks");
+
+ // Give the statusbar an initial message
+ this._statusbar.push (this.ContextID, "Number of clicks: " + this.Clicks);
+
+ // Put the statusbar in its own frame at the bottom
+ this._barFrame = new Gtk.Frame ({
+ height_request: 30 });
+ this._barFrame.add (this._statusbar);
+]]></code>
+ <p>Here we create the Gtk.Statusbar, and push a message to it to start off with. Then we give it its own
narrow frame at the bottom of the window.</p>
+ <p>Every message needs to have a context id, which is an integer value you can get from the statusbar
with the get_context_id() function. Its only parameter is the string value you use to describe that
particular context id. Normally, you'll get a new context id for different kinds of messages, so that you can
use the remove() function to remove a specific message and not just the most recent one on the stack. This is
a simple example with only one kind of message, though, so we're just using one for everything.</p>
+ <p>We use the push() function to push a new message onto the stack. Its first parameter is the context
id, and its second is the message.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Assemble the frames into the paned interface
+ this._panes.pack1 (this._topFrame, true, false);
+ this._panes.pack2 (this._barFrame, false, false);
+
+ // Put the panes into the window
+ this._window.add (this._panes);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+]]></code>
+ <p>This code finishes up creating the window, by packing the frames into the pane, adding it to the
window, and telling the window to show all child widgets.</p>
+ </section>
+
+ <section id="functions">
+ <title>Functions for interacting with the statusbar</title>
+ <code mime="application/javascript"><![CDATA[
+ _clicked: function() {
+
+ // Increment the number of clicks by 1
+ this.Clicks++;
+
+ // Update the statusbar with the new number of clicks
+ this._statusbar.push (this.ContextID, "Number of clicks: " + this.Clicks);
+
+ },
+
+
+
+ _back: function () {
+
+ // If there have been any clicks, decrement by 1 and remove last statusbar update
+ if (this.Clicks > 0 ) {
+ this.Clicks--;
+ this._statusbar.pop (this.ContextID);
+ };
+
+ },
+
+
+
+ _clear: function () {
+
+ // Reset the number of clicks
+ this.Clicks = 0;
+
+ // Wipe out all the messages pushed to the statusbar
+ this._statusbar.remove_all (this.ContextID);
+
+ // Reset the statusbar's message
+ this._statusbar.push (this.ContextID, "Number of clicks: " + this.Clicks);
+
+ }
+
+});
+]]></code>
+ <p>Here we have functions which demonstrate pushing a message onto the stack, popping the top one off of
it, and clearing all messages of a particular context id. The pop() function just takes one parameter, which
is the context id for the type of message you want to pop off the most recent one of. The remove_all()
function works the same way, except it removes all messages of that type from the stack.</p>
+ <code mime="application/javascript"><![CDATA[
+// Run the application
+let app = new StatusbarExample ();
+app.application.run (ARGV);
+]]></code>
+ <p>Finally, we create a new instance of the finished StatusbarExample class, and set the application
running.</p>
+ </section>
+
+ <section id="complete">
+ <title>Complete code sample</title>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/statusbar.js"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="in-depth">
+ <title>In-depth documentation</title>
+<list>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Button.html";>Gtk.Button</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Frame.html";>Gtk.Frame</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Paned.html";>Gtk.Paned</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Statusbar.html";>Gtk.Statusbar</link></p></item>
+</list>
+ </section>
+</page>
diff --git a/beginners-docs/C/statusbar.py.page b/beginners-docs/C/statusbar.py.page
new file mode 100644
index 0000000..92ae853
--- /dev/null
+++ b/beginners-docs/C/statusbar.py.page
@@ -0,0 +1,56 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="statusbar.py">
+ <info>
+ <title type="text">Statusbar (Python)</title>
+ <link type="guide" xref="beginner.py#display-widgets"/>
+ <link type="seealso" xref="signals-callbacks.py"/>
+ <link type="next" xref="spinner.py" />
+ <revision version="0.2" date="2012-06-12" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Report messages of minor importance to the user</desc>
+ </info>
+
+ <title>Statusbar</title>
+ <media type="image" mime="image/png" src="media/statusbar.png"/>
+ <p>This statusbar tells you if you click the button or if you press any key (and which key).</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/statusbar.py"
parse="text"><xi:fallback/></xi:include></code>
+
+ <note><p>
+ <code>Gdk.keyval_name(event.keyval)</code> converts the key value <code>event.keyval</code> into a
symbolic name. The names and corresponding key values can be found <link
href="http://git.gnome.org/browse/gtk+/tree/gdk/gdkkeysyms.h";>here</link>, but for instance
<code>GDK_KEY_BackSpace</code> becomes the string <code>"BackSpace"</code>.
+ </p></note>
+ </section>
+
+ <section id="methods">
+ <title>Useful methods for a Statusbar widget</title>
+ <p>In line 17 the signal <code>"clicked"</code> is connected to the callback function
<code>button_clicked_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback
function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.</p>
+ <list>
+ <item><p><code>pop(context_id)</code> removes the first message in the statusbar stack with the given
<code>context_id</code>.</p></item>
+ <item><p><code>remove_all(context_id)</code> removes all the messages in the statusbar stack with the
given <code>context_id</code>.</p></item>
+ <item><p><code>remove(context_id, message_id)</code> removes the message with the given
<code>message_id</code> in the statusbar stack with the given <code>context_id</code>. The
<code>message_id</code> is returned by <code>push(context_id, "the message")</code> when pushing the message
on the statusbar.</p></item>
+ </list>
+ </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/GtkStatusbar.html";>GtkStatusbar</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gdk/stable/gdk-Keyboard-Handling.html";>Gdk - Key
Values</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/statusbar.vala.page b/beginners-docs/C/statusbar.vala.page
new file mode 100644
index 0000000..363e862
--- /dev/null
+++ b/beginners-docs/C/statusbar.vala.page
@@ -0,0 +1,34 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="statusbar.vala">
+ <info>
+ <title type="text">Statusbar (Vala)</title>
+ <link type="guide" xref="beginner.vala#display-widgets"/>
+ <link type="seealso" xref="grid.vala"/>
+ <link type="seealso" xref="button.vala"/>
+ <link type="seealso" xref="label.vala"/>
+ <revision version="0.1" date="2012-05-08" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Report messages of minor importance to the user</desc>
+ </info>
+
+ <title>Statusbar</title>
+ <media type="image" mime="image/png" src="media/statusbar.png"/>
+ <p>This statusbar tells you what's going on.</p>
+
+<code mime="text/x-csharp" style="numbered"><xi:include href="samples/statusbar.vala"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.Statusbar.html";>Gtk.Statusbar</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/strings.py.page b/beginners-docs/C/strings.py.page
new file mode 100644
index 0000000..43293ac
--- /dev/null
+++ b/beginners-docs/C/strings.py.page
@@ -0,0 +1,117 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:e="http://projectmallard.org/experimental/";
+ type="guide" style="task"
+ id="strings.py">
+
+<info>
+ <title type="text">Strings (Python)</title>
+ <link type="guide" xref="beginner.py#theory"/>
+ <link type="next" xref="label.py"/>
+ <revision version="0.1" date="2012-06-16" status="draft"/>
+
+ <desc>An explanation of how to deal with strings in Python and GTK+.</desc>
+ <credit type="author copyright">
+ <name>Sebastian Pölsterl</name>
+ <email>sebp k-d-w org</email>
+ <years>2011</years>
+ </credit>
+ <credit type="editor">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+</info>
+
+<title>Strings</title>
+
+<links type="section" />
+
+<note style="warning"><p>GNOME strongly encourages the use of Python 3 for writing applications!</p></note>
+
+<section id="python-2">
+<title>Strings in Python 2</title>
+
+<p>Python 2 comes with two different kinds of objects that can be used to represent strings,
<code>str</code> and <code>unicode</code>. Instances of <code>unicode</code> are used to express Unicode
strings, whereas instances of the <code>str</code> type are byte representations (the encoded string). Under
the hood, Python represents Unicode strings as either 16- or 32-bit integers, depending on how the Python
interpreter was compiled.</p>
+
+<code><![CDATA[
+>>> unicode_string = u"Fu\u00dfb\u00e4lle"
+>>> print unicode_string]]>
+Fußbälle
+</code>
+
+<p>Unicode strings can be converted to 8-bit strings with <code>unicode.encode()</code>. Python’s 8-bit
strings have a <code>str.decode()</code> method that interprets the string using the given encoding (that is,
it is the inverse of the <code>unicode.encode()</code>):</p>
+
+<code><![CDATA[
+>>> type(unicode_string)
+<type 'unicode'>
+>>> unicode_string.encode("utf-8")
+'Fu\xc3\x9fb\xc3\xa4lle'
+>>> utf8_string = unicode_string.encode("utf-8")
+>>> type(utf8_string)
+<type 'str'>
+>>> unicode_string == utf8_string.decode("utf-8")
+True]]></code>
+
+<p>Unfortunately, Python 2.x allows you to mix <code>unicode</code> and <code>str</code> if the 8-bit string
happened to contain only 7-bit (ASCII) bytes, but would get <sys>UnicodeDecodeError</sys> if it contained
non-ASCII values.</p>
+
+</section>
+
+<section id="python-3">
+<title>Strings in Python 3</title>
+
+<p>Since Python 3.0, all strings are stored as Unicode in an instance of the <code>str</code> type. Encoded
strings on the other hand are represented as binary data in the form of instances of the bytes type.
Conceptionally, <code>str</code> refers to text, whereas bytes refers to data. Use <code>encode()</code> to
go from <code>str</code> to <code>bytes</code>, and <code>decode()</code> to go from <code>bytes</code> to
<code>str</code>.</p>
+
+<p>In addition, it is no longer possible to mix Unicode strings with encoded strings, because it will result
in a <code>TypeError</code>:</p>
+
+<code><![CDATA[
+>>> text = "Fu\u00dfb\u00e4lle"
+>>> data = b" sind rund"
+>>> text + data
+Traceback (most recent call last):
+ File "<stdin>", line 1, in <module>
+TypeError: Can't convert 'bytes' object to str implicitly
+>>> text + data.decode("utf-8")
+'Fußbälle sind rund'
+>>> text.encode("utf-8") + data
+b'Fu\xc3\x9fb\xc3\xa4lle sind rund']]></code>
+
+</section>
+
+<section id="gtk">
+<title>Unicode in GTK+</title>
+
+<p>GTK+ uses UTF-8 encoded strings for all text. This means that if you call a method that returns a string
you will always obtain an instance of the <code>str</code> type. The same applies to methods that expect one
or more strings as parameter, they must be UTF-8 encoded. However, for convenience PyGObject will
automatically convert any unicode instance to str if supplied as argument:</p>
+
+<code><![CDATA[
+>>> from gi.repository import Gtk
+>>> label = Gtk.Label()
+>>> unicode_string = u"Fu\u00dfb\u00e4lle"
+>>> label.set_text(unicode_string)
+>>> txt = label.get_text()
+>>> type(txt)
+<type 'str'>]]></code>
+
+<p>Furthermore:</p>
+
+<code><![CDATA[
+>>> txt == unicode_string]]></code>
+
+<p>would return <code>False</code>, with the warning <code>__main__:1: UnicodeWarning: Unicode equal
comparison failed to convert both arguments to Unicode - interpreting them as being unequal</code>
(<code>Gtk.Label.get_text()</code> will always return a <code>str</code> instance; therefore,
<code>txt</code> and <code>unicode_string</code> are not equal).</p>
+
+<p>This is especially important if you want to internationalize your program using <link
href="http://docs.python.org/library/gettext.html";><code>gettext</code></link>. You have to make sure that
<code>gettext</code> will return UTF-8 encoded 8-bit strings for all languages.</p>
+
+<p>In general it is recommended to not use <code>unicode</code> objects in GTK+ applications at all, and
only use UTF-8 encoded <code>str</code> objects since GTK+ does not fully integrate with <code>unicode</code>
objects.</p>
+
+<p>With Python 3.x things are much more consistent, because PyGObject will automatically encode/decode
to/from UTF-8 if you pass a string to a method or a method returns a string. Strings, or text, will always be
represented as instances of <code>str</code> only.</p>
+
+</section>
+
+<section id="references">
+<title>References</title>
+
+<p><link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/unicode.html";>How To Deal With Strings
- The Python GTK+ 3 Tutorial</link></p>
+
+</section>
+
+</page>
diff --git a/beginners-docs/C/switch.c.page b/beginners-docs/C/switch.c.page
new file mode 100644
index 0000000..ad209e5
--- /dev/null
+++ b/beginners-docs/C/switch.c.page
@@ -0,0 +1,38 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="switch.c">
+ <info>
+ <title type="text">Switch (C)</title>
+ <link type="guide" xref="beginner.c#buttons"/>
+ <revision version="0.1" date="2012-06-01" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Monica Kochofar</name>
+ <email>monicakochofar gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A "light switch" style toggle</desc>
+ </info>
+
+ <title>Switch</title>
+
+ <media type="image" mime="image/png" style="floatend" src="media/switch_off.png"/>
+ <media type="image" mime="image/png" src="media/switch_on.png"/>
+ <p>This switch toggles the title of the window.</p>
+
+ <code mime="text/x-csrc" style="numbered">
+<xi:include href="samples/switch.c" parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/3.4/GtkApplication.html";>GtkApplication</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/3.4/GtkWindow.html";>GtkWindow</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkLabel.html";>GtkLabel</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkSwitch.html";>GtkSwitch</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkGrid.html";>GtkGrid</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/switch.js.page b/beginners-docs/C/switch.js.page
new file mode 100644
index 0000000..3fe7df6
--- /dev/null
+++ b/beginners-docs/C/switch.js.page
@@ -0,0 +1,275 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="switch.js">
+ <info>
+ <title type="text">Switch (JavaScript)</title>
+ <link type="guide" xref="beginner.js#buttons"/>
+ <revision version="0.1" date="2012-06-18" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Taryn Fox</name>
+ <email>jewelfox fursona net</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A sliding switch that can be flipped on and off</desc>
+ </info>
+
+ <title>Switch</title>
+ <media type="image" mime="image/png" src="media/switchanimals.png"/>
+ <p>A Switch has two positions, on and off. This example shows how you can use multiple switches together
to control which <link xref="image.js">Image</link> is shown in the window. The pictures used in this example
<link href="https://live.gnome.org/TarynFox?action=AttachFile&do=get&target=Animal+Photos.zip";>can be
downloaded here</link>.</p>
+ <note><p>The window will contain a "broken image" icon instead of a picture if picture files named
<file>redfox.png</file>, <file>muteswan.png</file>, <file>fruitbat.png</file>, and
<file>gentoopenguin.png</file> aren't in the same directory. You can change the code and the pictures around
as you like, but the Creative Commons-licensed photos used in this example were taken from the following
sources and cropped to 640x425:</p>
+ <list>
+ <item><p><link href="http://en.wikipedia.org/wiki/File:Fuzzy_Freddy.jpg";>Red fox photo</link> by Rob
Lee, licensed <link href="http://creativecommons.org/licenses/by/2.0/deed.en";>CC-By</link></p></item>
+ <item><p><link
href="http://en.wikipedia.org/wiki/File:Pygoscelis_papua_-Nagasaki_Penguin_Aquarium_-swimming_underwater-8a.jpg";>Gentoo
penguin photo</link> by Ken Funakoshi, licensed <link
href="http://creativecommons.org/licenses/by-sa/2.0/deed.en";>CC-By-SA</link></p></item>
+ <item><p><link href="http://www.flickr.com/photos/shekgraham/127431519/in/photostream/";>Fruit bat
photo</link> by Shek Graham, licensed <link
href="http://creativecommons.org/licenses/by/2.0/deed.en";>CC-By</link></p></item>
+ <item><p><link href="http://commons.wikimedia.org/wiki/File:Mute_Swan-Mindaugas_Urbonas.jpg";>Mute
swan photo</link> by Mindaugas Urbonas, licensed <link
href="http://creativecommons.org/licenses/by-sa/2.5/deed.en";>CC-By-SA</link></p></item>
+ </list>
+ <p>Photo credits and licensing information are shown in the application's <link
xref="aboutdialog.js">AboutDialog</link>. Always remember to credit the original artist when using <link
href="http://creativecommons.org";>Creative Commons-licensed works!</link></p></note>
+ <links type="section" />
+
+ <section id="imports">
+ <title>Libraries to import</title>
+ <code mime="application/javascript"><![CDATA[
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+]]></code>
+ <p>These are the libraries we need to import for this application to run. Remember that the line which
tells GNOME that we're using Gjs always needs to go at the start.</p>
+ </section>
+
+ <section id="applicationwindow">
+ <title>Creating the application window</title>
+ <code mime="application/javascript"><![CDATA[
+const SwitchExample = new Lang.Class({
+ Name: 'Switch Example',
+
+ // Create the application itself
+ _init: function() {
+ this.application = new Gtk.Application({
+ application_id: 'org.example.jsswitch',
+ flags: Gio.ApplicationFlags.FLAGS_NONE
+ });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents window when active
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ // Callback function for 'startup' signal creates the menu and builds the UI
+ _onStartup: function() {
+ this._initMenus();
+ this._buildUI ();
+ },
+]]></code>
+ <p>All the code for this sample goes in the SwitchExample class. The above code creates a <link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link> for our
widgets and window to go in.</p>
+ <note><p>Before we call _buildUI to create the window and the widgets inside it, we need to call
_initMenus, which tells GNOME to create the menu. We can put the actual code for _initMenus after the code
for _buildUI, since it doesn't matter what order we put them in so long as _initMenus is called first in
_onStartup.</p></note>
+ <code mime="application/javascript"><![CDATA[
+ // Build the application's UI
+ _buildUI: function() {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ border_width: 20,
+ title: "Animal Creator"});
+]]></code>
+ <p>The _buildUI function is where we put all the code to create the application's user interface. The
first step is creating a new <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link> to put all our
widgets into.</p>
+ </section>
+
+ <section id="button">
+ <title>Creating the switches</title>
+ <code mime="application/javascript"><![CDATA[
+ // Create the image widget and set its default picture
+ this._image = new Gtk.Image ({file: "redfox.png"});
+]]></code>
+
+ <p>We first create the <link xref="image.js">Image</link> that the switches will control. Remember that
a file named <file>redfox.png</file> needs to be in the same directory as this application.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Create a label for the first switch
+ this._flyLabel = new Gtk.Label ({
+ label: "Make it fly",
+ margin_right: 30});
+
+ // Create the first switch and set its default position
+ this._flySwitch = new Gtk.Switch ({active: false});
+ this._flySwitch.connect ('notify::active', Lang.bind (this, this._switchFlip));
+
+ // Create a label for the second switch
+ this._birdLabel = new Gtk.Label ({
+ label: "Make it a bird",
+ margin_right: 30});
+
+ // Create the second switch
+ this._birdSwitch = new Gtk.Switch ({active: false});
+ this._birdSwitch.connect ('notify::active', Lang.bind (this, this._switchFlip));
+]]></code>
+
+ <p>We use a <link xref="label.js">Label</link> to mark each Switch, and give them a bit of a margin on
the right so that they aren't crammed right next to the Switches. After that we create the Switches, and set
them to be switched off by default.</p>
+ <p>The signal a switch sends out when it's flipped on or off is called notify::active. After we create
each switch, we connect its notify::active signal to a function called _switchFlip. If you have multiple
switches that each do something different, you might want to connect them to different functions, but here
they're both used for the same thing: To control what picture's displayed by _image.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Create a grid for the labels and switches beneath the picture
+ this._UIGrid = new Gtk.Grid ({
+ halign: Gtk.Align.CENTER,
+ valign: Gtk.Align.CENTER,
+ margin_top: 20});
+
+ // Attach the labels and switches to that grid
+ this._UIGrid.attach (this._flyLabel, 0, 0, 1, 1);
+ this._UIGrid.attach (this._flySwitch, 1, 0, 1, 1);
+ this._UIGrid.attach (this._birdLabel, 0, 1, 1, 1);
+ this._UIGrid.attach (this._birdSwitch, 1, 1, 1, 1);
+
+ // Create a master grid to put both the UI and the picture into
+ this._mainGrid = new Gtk.Grid ({
+ halign: Gtk.Align.CENTER,
+ valign: Gtk.Align.CENTER });
+
+ // Attach the picture and the UI grid to the master grid
+ this._mainGrid.attach (this._image, 0, 0, 1, 1);
+ this._mainGrid.attach (this._UIGrid, 0, 1, 1, 1);
+]]></code>
+ <p>We create a <link xref="grid.js">Grid</link> for the Labels and Switches first, so that we can
organize them in a 2x2 layout with a margin between it and the Image. Then we put that Grid into a larger 2x1
Grid that has the Image on top, and the Grid with the Labels and Switches on the bottom.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Add the master grid to the window
+ this._window.add (this._mainGrid);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+]]></code>
+ <p>Finally, we add the larger Grid to the window, then tell the window to show itself and all the
widgets inside of it.</p>
+ </section>
+
+ <section id="switch-handler">
+ <title>Function which handles the switches being flipped</title>
+
+ <code mime="application/javascript"><![CDATA[
+ _switchFlip: function() {
+
+ // Change the picture depending on which switches are flipped
+ if (this._flySwitch.get_active()) {
+
+ if (this._birdSwitch.get_active()) this._image.set_from_file ("muteswan.png");
+
+ else this._image.set_from_file ("fruitbat.png");
+ }
+
+ else {
+
+ if (this._birdSwitch.get_active()) this._image.set_from_file ("gentoopenguin.png");
+
+ else this._image.set_from_file ("redfox.png");
+
+ }
+
+ },
+]]></code>
+ <p>Each time a Switch is flipped, this function checks to see which of the two Switches are active
afterwards, using the Switches' built-in get_active() function. It then changes the Image accordingly. You
can change the filenames around as you like, so long as you have pictures to go with them.</p>
+</section>
+
+<section id="about">
+ <title>Creating the AboutDialog</title>
+ <code mime="application/javascript"><![CDATA[
+ _initMenus: function() {
+
+ // Build the application's menu so we can have an "About" button
+ let menu = new Gio.Menu();
+ menu.append("About", 'app.about');
+ menu.append("Quit",'app.quit');
+ this.application.set_app_menu(menu);
+
+ // Bind the "About" button to the _showAbout() function
+ let aboutAction = new Gio.SimpleAction ({ name: 'about' });
+ aboutAction.connect('activate', Lang.bind(this,
+ function() {
+ this._showAbout();
+ }));
+ this.application.add_action(aboutAction);
+
+ // Bind the "Quit" button to the function that closes the window
+ let quitAction = new Gio.SimpleAction ({ name: 'quit' });
+ quitAction.connect('activate', Lang.bind(this,
+ function() {
+ this._window.destroy();
+ }));
+ this.application.add_action(quitAction);
+ },
+]]></code>
+ <p>The first step is building the <link xref="gmenu.js">GMenu</link> that the "About" button goes into.
This is the menu that appears when you click the application's name in the upper-left corner of the screen,
next to the Activities menu. Our menu only has two options in it: About, and Quit.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ _showAbout: function () {
+
+ // String arrays of the names of the people involved in the project
+ var artists = ['Rob Lee http://en.wikipedia.org/wiki/File:Fuzzy_Freddy.jpg', 'Ken Funakoshi
http://en.wikipedia.org/wiki/File:Pygoscelis_papua_-Nagasaki_Penguin_Aquarium_-swimming_underwater-8a.jpg',
'Shek Graham http://www.flickr.com/photos/shekgraham/127431519/in/photostream/', 'Mindaugas Urbonas
http://commons.wikimedia.org/wiki/File:Mute_Swan-Mindaugas_Urbonas.jpg'];
+ var authors = ["GNOME Documentation Team"];
+ var documenters = ["GNOME Documentation Team"];
+
+ // Create the About dialog
+ let aboutDialog = new Gtk.AboutDialog({
+ title: "AboutDialog Example",
+ program_name: "Animal Creator",
+ copyright: "Copyright \xa9 2012 GNOME Documentation Team\n\nRed fox photo licensed CC-By by Rob
Lee\nGentoo penguin photo licensed CC-By-SA by Ken Funakoshi\nFruit bat photo licensed CC-By by Shek
Graham\nMute swan photo licensed CC-By-SA by Mindaugas Urbonas\nLinks to the originals are available under
Credits.\n\nHave you hugged a penguin today?",
+ artists: artists,
+ authors: authors,
+ documenters: documenters,
+ website: "http://developer.gnome.org";,
+ website_label: "GNOME Developer Website" });
+
+ // Attach the About dialog to the window
+ aboutDialog.modal = true;
+ aboutDialog.transient_for = this._window;
+
+ // Show the About dialog
+ aboutDialog.show();
+
+ // Connect the Close button to the destroy signal for the dialog
+ aboutDialog.connect('response', function() {
+ aboutDialog.destroy();
+ });
+ }
+
+});
+]]></code>
+ <p>An <link xref="aboutdialog.js">AboutDialog</link> has a lot of different things you can set, to
credit everyone who worked on the application and leave a note to whomever reads it. In this case, the
copyright section contains our note and credits the original photographers, while the artists section shows
you a list of the photographers with links to the original photos when you click the Credits button. The web
URLs put after their names in the array turn their names into clickable links in the Credits section.</p>
+
+ <code mime="application/javascript"><![CDATA[
+// Run the application
+let app = new SwitchExample ();
+app.application.run (ARGV);
+]]></code>
+ <p>Finally, we create a new instance of the finished SwitchExample class, and set the application
running.</p>
+ </section>
+
+ <section id="complete">
+ <title>Complete code sample</title>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/switch.js"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="in-depth">
+ <title>In-depth documentation</title>
+<list>
+ <item><p><link href="http://developer.gnome.org/gio/unstable/GMenu.html";>GMenu</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gio/stable/GSimpleAction.html";>GSimpleAction</link></p></item>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Grid.html";>Gtk.Grid</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Image.html";>Gtk.Image</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Label.html";>Gtk.Label</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Switch.html";>Gtk.Switch</link></p></item>
+</list>
+ </section>
+</page>
diff --git a/beginners-docs/C/switch.py.page b/beginners-docs/C/switch.py.page
new file mode 100644
index 0000000..ee33cde
--- /dev/null
+++ b/beginners-docs/C/switch.py.page
@@ -0,0 +1,49 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="switch.py">
+ <info>
+ <title type="text">Switch (Python)</title>
+ <link type="guide" xref="beginner.py#buttons"/>
+ <link type="next" xref="radiobutton.py"/>
+ <revision version="0.1" date="2012-05-24" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A "light switch" style toggle</desc>
+ </info>
+
+ <title>Switch</title>
+ <media type="image" mime="image/png" style="floatend" src="media/switch_off.png"/>
+ <media type="image" mime="image/png" src="media/switch_on.png"/>
+
+ <p>This Switch makes the title appears and disappear.</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/switch.py"
parse="text"><xi:fallback/></xi:include></code>
+
+ </section>
+ <section id="methods">
+ <title>Useful methods for a Switch widget</title>
+ <p>In line 17 the signal <code>"notify::active"</code> is connected to the callback function
<code>activate_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback
function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.</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/GtkSwitch.html";>GtkSwitch</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/switch.vala.page b/beginners-docs/C/switch.vala.page
new file mode 100644
index 0000000..963d873
--- /dev/null
+++ b/beginners-docs/C/switch.vala.page
@@ -0,0 +1,37 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="switch.vala">
+ <info>
+ <title type="text">Switch (Vala)</title>
+ <link type="guide" xref="beginner.vala#buttons"/>
+ <link type="seealso" xref="checkbutton.vala"/>
+ <link type="seealso" xref="label.vala"/>
+ <link type="seealso" xref="grid.vala"/>
+
+ <revision version="0.1" date="2012-05-09" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A "light switch" style toggle</desc>
+ </info>
+
+ <title>Switch</title>
+ <media type="image" mime="image/png" style="floatend" src="media/switch_off.png"/>
+ <media type="image" mime="image/png" src="media/switch_on.png"/>
+
+ <p>This Switch toggles the title.</p>
+
+<code mime="text/x-csharp" style="numbered"><xi:include href="samples/switch.vala"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.Switch.html";>Gtk.Switch</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/textview.c.page b/beginners-docs/C/textview.c.page
new file mode 100644
index 0000000..052be80
--- /dev/null
+++ b/beginners-docs/C/textview.c.page
@@ -0,0 +1,42 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="textview.c">
+ <info>
+ <title type="text">TextView (C)</title>
+ <link type="guide" xref="beginner.c#multiline"/>
+ <revision version="0.1" date="2012-07-10" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Monica Kochofar</name>
+ <email>monicakochofar gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Widget which displays a GtkTextBuffer</desc>
+ </info>
+
+ <title>TextView widget</title>
+<note style="sidebar"><p>If we press "enter", we have a new line.</p>
+ <p>If we press "enter" more times then there are lines in the default sized window, then a vertical
scrollbar appears.</p>
+ <p>If we write a long sentence, the text will wrap breaking lines between words.</p>
+ <p>If we have a loooooooooooooooooooooooooooooooooooong (that was long) word, a* horizontal scrollbar
will appear.</p></note>
+
+ <media type="image" mime="image/png" src="media/textview.png"/>
+ <p>This is an example of Gtk.TextView</p>
+
+ <code mime="text/x-csrc" style="numbered">
+<xi:include href="samples/textview.c" parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/3.4/GtkApplication.html";>GtkApplication</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/3.4/GtkWindow.html";>GtkWindow</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkTextBuffer.html";>GtkTextBuffer</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkTextView.html";>GtkTextView</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkScrolledWindow.html";>GtkScrolledWindow</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkContainer.html";>GtkContainer</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/textview.js.page b/beginners-docs/C/textview.js.page
new file mode 100644
index 0000000..2dc6830
--- /dev/null
+++ b/beginners-docs/C/textview.js.page
@@ -0,0 +1,260 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="textview.js">
+ <info>
+ <title type="text">TextView (JavaScript)</title>
+ <link type="guide" xref="beginner.js#multiline"/>
+ <link type="seealso" xref="button.js"/>
+ <link type="seealso" xref="grid.js"/>
+ <link type="seealso" xref="GtkApplicationWindow.js"/>
+ <link type="seealso" xref="label.js"/>
+ <revision version="0.1" date="2012-06-28" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Taryn Fox</name>
+ <email>jewelfox fursona net</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A multiline text editor</desc>
+ </info>
+
+ <title>TextView</title>
+ <media type="image" mime="image/png" src="media/textviewpenguinchat.png"/>
+ <p>A TextView is really (or at least usually) a nested set of three objects.</p>
+ <list>
+ <item><p>At the bottom there is a <link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TextBuffer.html";>TextBuffer</link>. This holds the
text itself.</p></item>
+ <item><p>In the middle there is the <link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TextView.html";>TextView</link>, which is a widget
that lets you see and edit the text in the buffer. It automatically resizes itself depending on how much text
there is.</p></item>
+ <item><p>Since the automatic resizing can make a TextView unwieldy, you normally place it inside of a
<link xref="scrolledwindow.js">ScrolledWindow</link>. Despite the name, it's not an actual window in terms of
having a title bar and an X button; it's a widget you put on the application you're making, which acts like a
window onto a more manageable chunk of a TextView. If the text in the buffer is too big to fit, scrollbars
will appear.</p></item>
+ </list>
+ <p>If you want to change what text is displayed in the TextView, you act on the TextBuffer, since it's
what actually holds the text. The same goes for if you want to see what text someone typed in. This sample
application lets you talk to a (make-believe) penguin, and checks the TextBuffer to see if you typed the word
"fish" anywhere in it.</p>
+ <note><p>Real-life penguin populations are declining fast, because climate change is melting the ice that
they live on and killing the fish that they eat. If you'd like to play a (somewhat silly) GNOME game based on
this premise, take a look at <link href="http://pingus.seul.org/";>Pingus</link>.</p></note>
+ <links type="section" />
+
+ <section id="imports">
+ <title>Libraries to import</title>
+ <code mime="application/javascript"><![CDATA[
+#!/usr/bin/gjs
+
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+]]></code>
+ <p>These are the libraries we need to import for this application to run. Remember that the line which
tells GNOME that we're using Gjs always needs to go at the start.</p>
+ </section>
+
+ <section id="applicationwindow">
+ <title>Creating the application window</title>
+ <code mime="application/javascript"><![CDATA[
+const TextViewExample = new Lang.Class ({
+ Name: 'TextView Example',
+
+ // Create the application itself
+ _init: function () {
+ this.application = new Gtk.Application ({
+ application_id: 'org.example.jstextview' });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents windows when active
+ _onActivate: function () {
+ this._window.present ();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function () {
+ this._buildUI ();
+ },
+]]></code>
+ <p>All the code for this sample goes in the TextViewExample class. The above code creates a <link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link> for our
widgets and window to go in.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Build the application's UI
+ _buildUI: function () {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow ({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ title: "Talk to a Penguin",
+ default_height: 400,
+ default_width: 440,
+ border_width: 20 });
+]]></code>
+ <p>The _buildUI function is where we put all the code to create the application's user interface. The
first step is creating a new <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link> to put all our
widgets into.</p>
+ </section>
+
+ <section id="textview">
+ <title>Creating the TextView</title>
+ <code mime="application/javascript"><![CDATA[
+ // Create a label for the penguin to talk to you
+ this._penguin = new Gtk.Label ({
+ height_request: 180,
+ width_request: 400,
+ label: "Squaaaak?",
+ wrap: true });
+]]></code>
+
+ <p>Our first step in this example is to create the <link xref="label.js">Label</link> that the penguin
will use to talk to you. We set the text in it to wrap by setting its wrap property to true, but we'll use a
different method on the TextView itself that allows for more fine-grained control.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Create a textview for you to talk to the penguin
+ this.buffer = new Gtk.TextBuffer();
+ this._textView = new Gtk.TextView ({
+ buffer: this.buffer,
+ editable: true,
+ wrap_mode: Gtk.WrapMode.WORD });
+]]></code>
+
+ <p>Our first step is to create a TextBuffer to put the words into. After that we create the TextView,
and tell it to use the TextBuffer we created as its buffer. We also set it to be editable, since we want to
be able to type new things in.</p>
+ <p>The wrap_mode property lets you select from four different <link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.WrapMode.html";>WrapModes</link>. Gtk.WrapMode.CHAR,
for instance, starts wrapping around in the middle of a word if you keep typing when it gets to the edge.
Most people are probably used to Gtk.WrapMode.WORD, which will automatically put the word you're typing on
the next line if it gets to be too long.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Create a "scrolled window" to put your textview in so it will scroll
+ this._scrolled = new Gtk.ScrolledWindow ({
+ hscrollbar_policy: Gtk.PolicyType.AUTOMATIC,
+ vscrollbar_policy: Gtk.PolicyType.AUTOMATIC,
+ shadow_type: Gtk.ShadowType.ETCHED_IN,
+ height_request: 180,
+ width_request: 400, });
+
+ // Put the textview into the scrolled window
+ this._scrolled.add_with_viewport (this._textView);
+]]></code>
+ <p>Here we create a <link xref="scrolledwindow.js">ScrolledWindow</link>, and set it to automatically
scroll if it gets to be too big horizontally or vertically. We also give it a nice-looking ETCHED_IN border.
After that, we put our TextView inside, and tell the ScrolledWindow to give us a viewport onto it.</p>
+ </section>
+
+ <section id="ui">
+ <title>Creating the rest of the user interface</title>
+
+ <code mime="application/javascript"><![CDATA[
+ // Create a grid to organize them in
+ this._grid = new Gtk.Grid ({
+ halign: Gtk.Align.CENTER,
+ valign: Gtk.Align.CENTER });
+
+ // Put the label and textview in the grid one on top of the other
+ this._grid.attach (this._penguin, 0, 0, 1, 1);
+ this._grid.attach (this._scrolled, 0, 1, 1, 1);
+]]></code>
+ <p>The first <link xref="grid.js">Grid</link> we create only has the Label and the ScrolledWindow inside
it.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Create a button to send your message to the penguin
+ this._send = new Gtk.Button ({
+ halign: Gtk.Align.END,
+ margin_top: 20,
+ label: "Send" });
+ this._send.connect ('clicked', Lang.bind (this, this._chat));
+
+ // Create a grid that will have the other grid on top and the button on bottom
+ this._mainGrid = new Gtk.Grid ({
+ halign: Gtk.Align.CENTER,
+ valign: Gtk.Align.CENTER });
+
+ // Add the other grid and the button to the main grid
+ this._mainGrid.attach (this._grid, 0, 0, 1, 1);
+ this._mainGrid.attach (this._send, 0, 1, 1, 1);
+]]></code>
+ <p>We create a <link xref="button.js">Button</link> to send your message to the penguin, and a new Grid
that has the other one on top and the Button on the bottom. The Button has a margin on top, so that it isn't
squished up against the ScrolledWindow.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Attach the main grid to the window
+ this._window.add (this._mainGrid);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+]]></code>
+
+ <p>Finally, we attach the main Grid to the window, then we tell the window and everything inside it to
become visible when the application is run.</p>
+
+ </section>
+
+ <section id="function">
+ <title>Function which handles the penguin's response</title>
+ <code mime="application/javascript"><![CDATA[
+ _chat: function () {
+
+ // Create a random number to determine what the penguin says
+ this.number = Math.floor ((Math.random() * 3) + 1);
+
+ // Did you actually say anything?
+ if (this.buffer.text) {
+
+ // Did you mention fish?
+ if (this.buffer.text.match (/fish/gi)) {
+
+ // Have the penguin squaak about fish
+ if (this.number == 1)
+ this._penguin.set_label ("FISH!");
+
+ else if (this.number == 2)
+ this._penguin.set_label ("Fish fish fish fish. Fish!");
+
+ else
+ this._penguin.set_label ("Fish? Fish fish fish. Fish fish. FISH!");
+
+ }
+
+ // I guess you didn't mention fish
+ else {
+
+ // Have the penguin talk about penguinny stuff
+ if (this.number == 1)
+ this._penguin.set_label ("SQUAAK!");
+
+ else if (this.number == 2)
+ this._penguin.set_label ("Ork ork ork ork squaak. Squaak squaak! *waves flippers*");
+
+ else
+ this._penguin.set_label ("Ork ork ork ork ork?");
+
+ }
+
+ }
+
+ // Clear the buffer
+ this.buffer.text = "";
+
+ // Give focus back to the textview so you don't have to click it again
+ this._textView.has_focus = true;
+
+ }
+
+});
+]]></code>
+ <p>Here we use some basic JavaScript functions to have the penguins say something random. Penguins like
fish, though, so if you mention fish we want the penguin to respond to that. To do that, we use the
JavaScript String object's match method on <file>this.buffer.text</file>, which returns the contents of our
TextBuffer.</p>
+ <p>Since we want to clear out the TextBuffer after each time you click Send, we set
<file>this.buffer.text</file> to contain an empty string afterwards. Then we return focus to our TextView, so
that you can keep typing without having to click on it beforehand.</p>
+
+ <code mime="application/javascript"><![CDATA[
+// Run the application
+let app = new TextViewExample ();
+app.application.run (ARGV);
+]]></code>
+ <p>Finally, we create a new instance of the finished TextViewExample class, and set the application
running.</p>
+ </section>
+
+ <section id="complete">
+ <title>Complete code sample</title>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/textview.js"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="in-depth">
+ <title>In-depth documentation</title>
+<list>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Button.html";>Gtk.Button</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Grid.html";>Gtk.Grid</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Label.html";>Gtk.Label</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.RadioButton.html";>Gtk.RadioButton</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.ScrolledWindow.html";>Gtk.ScrolledWindow</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TextBuffer.html";>Gtk.TextBuffer</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TextView.html";>Gtk.TextView</link></p></item>
+</list>
+ </section>
+</page>
diff --git a/beginners-docs/C/textview.py.page b/beginners-docs/C/textview.py.page
new file mode 100644
index 0000000..1c9a5ee
--- /dev/null
+++ b/beginners-docs/C/textview.py.page
@@ -0,0 +1,102 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="textview.py">
+ <info>
+ <title type="text">TextView (Python)</title>
+ <link type="guide" xref="beginner.py#multiline"/>
+ <link type="seealso" xref="strings.py" />
+ <link type="seealso" xref="scrolledwindow.py"/>
+ <link type="next" xref="dialog.py" />
+ <revision version="0.2" date="2012-06-19" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Sebastian Pölsterl</name>
+ <email>sebp k-d-w org</email>
+ <years>2011</years>
+ </credit>
+
+ <credit type="author copyright editor">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Widget that displays a GtkTextBuffer</desc>
+ </info>
+
+ <title>TextView</title>
+
+ <note style="sidebar"><p>This is an example of Gtk.TextView.</p>
+ <p>If we press "enter", we have a new line.</p>
+ <p>But we can also have a new line if we write a long sentence (the text will wrap breaking lines between
words).</p>
+ <p>If we have a loooooooooooooooooooooooooooooooooooong</p>
+ <p>(that was long)</p>
+ <p>word, an horizontal scrollbar will appear.</p></note>
+
+ <media type="image" mime="image/png" src="media/textview.png"/>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/textview.py"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="methods">
+ <title>Useful methods for a TextView widget</title>
+ <p>A <code>Gtk.TextView</code> displays the text stored in a <code>Gtk.TextBuffer</code>. However, most
text manipulation is accomplished with iterators, represented by a <code>Gtk.TextIter</code> - a position
between two characters in the text buffer. Iterators are not valid indefinitely; whenever the buffer is
modified in a way that affects the contents of the buffer, all outstanding iterators become invalid. Because
of this, iterators can’t be used to preserve positions across buffer modifications. To preserve a position,
we use a <code>Gtk.TextMark</code>, that can be set visible with <code>visible(True)</code>. A text buffer
contains two built-in marks; an "insert" mark (the position of the cursor) and the "selection_bound" mark.</p>
+ <p>Methods for a TextView widget:</p>
+ <list>
+ <item><p>The TextView widget is by default editable. If you prefer otherwise, use
<code>set_editable(False)</code>. If the buffer has no editable text, it might be a good idea to use
<code>set_cursor_visible(False)</code> as well.</p></item>
+ <item><p>The justification of the text is set with
<code>set_justification(Gtk.Justification.JUSTIFICATION)</code> where <code>JUSTIFICATION</code> is one of
<code>LEFT, RIGHT, CENTER, FILL</code>.</p></item>
+ <item><p>The line wrapping of the text is set with <code>set_wrap_mode(Gtk.WrapMode.WRAP)</code> where
<code>WRAP</code> is one of <code>NONE</code> (the text area is made wider), <code>CHAR</code> (break lines
anywhere the cursor can appear), <code>WORD</code> (break lines between words), <code>WORD_CHAR</code> (break
lines between words, but if that is not enough between characters).</p></item>
+ </list>
+ <p>Methods for a TextBuffer widget:</p>
+ <list>
+ <item><p><code>get_insert()</code> returns the <code>Gtk.TextMark</code> that represents the cursor,
that is the insertion point.</p></item>
+ <item><p><code>get_selection_bound()</code> returns the <code>Gtk.TextMark</code> that represents the
selection bound.</p></item>
+ <item><p><code>set_text("some text", length)</code> where <code>length</code> is a positive integer or
<code>-1</code>, sets the content of the buffer as the first <code>length</code> characters of the
<code>"some text"</code> text. If <code>length</code> is omitted or <code>-1</code>, the text is inserted
completely. The content of the buffer, if there is any, is destroyed.</p></item>
+ <item><p><code>insert(iter, "some text", length)</code> where <code>iter</code> is a text iterator and
<code>length</code> is a positive integer or <code>-1</code>, inserts in the buffer at <code>iter</code> the
first <code>length</code> characters of the <code>"some text"</code> text. If <code>length</code> is omitted
or <code>-1</code>, the text is inserted completely.</p></item>
+ <item><p><code>insert_at_cursor("some text", length)</code> does the same as <code>insert(iter, "some
text", length)</code>, with the current cursor taken as <code>iter</code>.</p></item>
+ <item><p><code>create_mark("mark_name", iter, left_gravity)</code> where <code>iter</code> is a
<code>Gtk.TextIter</code> and <code>left_gravity</code> is a boolean, creates a <code>Gtk.TextMark</code> at
the position of <code>iter</code>. If <code>"mark_name"</code> is <code>None</code>, the mark is anonymous;
otherwise, the mark can be retrieved by name using <code>get_mark()</code>. If a mark has left gravity, and
text is inserted at the mark’s current location, the mark will be moved to the left of the newly-inserted
text. If <code>left_gravity</code> is omitted, it defaults to <code>False</code>.
+</p></item>
+ <item><p>To specify that some text in the buffer should have specific formatting, you must define a tag
to hold that formatting information, and then apply that tag to the region of text using
<code>create_tag("tag name", property)</code> and <code>apply_tag(tag, start_iter, end_iter)</code> as in,
for instance:</p>
+ <code>
+tag = textbuffer.create_tag("orange_bg", background="orange")
+textbuffer.apply_tag(tag, start_iter, end_iter)</code>
+ <p>The following are some of the common styles applied to text:</p>
+ <list>
+ <item><p>Background colour ("background" property)</p></item>
+ <item><p>Foreground colour ("foreground" property)</p></item>
+ <item><p>Underline ("underline" property)</p></item>
+ <item><p>Bold ("weight" property)</p></item>
+ <item><p>Italics ("style" property)</p></item>
+ <item><p>Strikethrough ("strikethrough" property)</p></item>
+ <item><p>Justification ("justification" property)</p></item>
+ <item><p>Size ("size" and "size-points" properties)</p></item>
+ <item><p>Text wrapping ("wrap-mode" property)</p></item>
+ </list>
+ <p>You can also delete particular tags later using <code>remove_tag()</code> or delete all tags in a
given region by calling <code>remove_all_tags()</code>.</p></item>
+ </list>
+ <p>Methods for a TextIter widget</p>
+ <list>
+ <item><p><code>forward_search(needle, flags, limit)</code> searches forward for <code>needle</code>. The
search will not continue past the <code>Gtk.TextIter</code> limit. The <code>flags</code> can be set to one
of the following, or any combination of it by concatenating them with the bitwise-OR operator <code>|</code>:
<code>0</code> (the match must be exact); <code>Gtk.TextSearchFlags.VISIBLE_ONLY</code> (the match may have
invisible text interspersed in needle); <code>Gtk.TextSearchFlags.TEXT_ONLY</code> (the match may have
pixbufs or child widgets mixed inside the matched range); <code>Gtk.TextSearchFlags.CASE_INSENSITIVE</code>
(the text will be matched regardless of what case it is in). The method returns a tuple containing a
<code>Gtk.TextIter</code> pointing to the start and to the first character after the match; if no match is
found, <code>None</code> is returned.</p></item>
+ <item><p><code>backward_search(needle, flags, limit)</code> does the same as
<code>forward_search()</code>, but moving backwards.</p></item>
+ </list>
+ </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/GtkTextView.html";>GtkTextView</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkTextBuffer.html";>GtkTextBuffer</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkTextTag.html";>GtkTextTag</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkScrolledWindow.html";>GtkScrolledWindow</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/unstable/gtk3-Standard-Enumerations.html";>Standard
Enumerations</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/textview.vala.page b/beginners-docs/C/textview.vala.page
new file mode 100644
index 0000000..63ce3af
--- /dev/null
+++ b/beginners-docs/C/textview.vala.page
@@ -0,0 +1,40 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="textview.vala">
+ <info>
+ <title type="text">TextView (Vala)</title>
+ <link type="guide" xref="beginner.vala#multiline"/>
+ <revision version="0.1" date="2012-06-07" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Widget which displays a GtkTextBuffer</desc>
+ </info>
+
+ <title>TextView widget</title>
+ <note style="sidebar"><p>If we press "enter", we have a new line.</p>
+ <p>If we press "enter" more times then there are lines in the default sized window, then a vertical
scrollbar appears.</p>
+ <p>If we write a long sentence, the text will wrap breaking lines between words.</p>
+ <p>If we have a loooooooooooooooooooooooooooooooooooong word, a horizontal scrollbar will
appear.</p></note>
+
+ <media type="image" mime="image/png" src="media/textview.png"/>
+ <p>This is an example of Gtk.TextView</p>
+
+<code mime="text/x-csharp" style="numbered"><xi:include href="samples/textview.vala"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.TextBuffer.html";>Gtk.TextBuffer</link></p></item>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.TextView.html";>Gtk.TextView</link></p></item>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.ScrolledWindow.html";>Gtk.ScrolledWindow</link></p></item>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.WrapMode.html";>Gtk.WrapMode</link></p></item>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.PolicyType.html";>Gtk.PolicyType</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/togglebutton.c.page b/beginners-docs/C/togglebutton.c.page
new file mode 100644
index 0000000..88160ca
--- /dev/null
+++ b/beginners-docs/C/togglebutton.c.page
@@ -0,0 +1,41 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="togglebutton.c">
+ <info>
+ <title type="text">ToggleButton (C)</title>
+ <link type="guide" xref="beginner.c#buttons"/>
+ <link type="seealso" xref="grid.c"/>
+ <link type="seealso" xref="switch.c"/>
+
+
+ <revision version="0.1" date="2012-06-12" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Monica Kochofar</name>
+ <email>monicakochofar gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A button which retains state</desc>
+ </info>
+
+ <title>ToggleButton</title>
+
+ <media type="image" mime="image/png" src="media/togglebutton.png"/>
+ <p>When this ToggleButton is in an active state, the spinner spins.</p>
+
+ <code mime="text/x-csrc" style="numbered">
+<xi:include href="samples/togglebutton.c" parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/3.4/GtkApplication.html";>GtkApplication</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/3.4/GtkWindow.html";>GtkWindow</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkSpinner.html";>GtkSpinner</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkToggleButton.html";>GtkTogglebutton</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkGrid.html";>GtkGrid</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/togglebutton.js.page b/beginners-docs/C/togglebutton.js.page
new file mode 100644
index 0000000..a7189b4
--- /dev/null
+++ b/beginners-docs/C/togglebutton.js.page
@@ -0,0 +1,161 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="togglebutton.js">
+ <info>
+ <title type="text">ToggleButton (JavaScript)</title>
+ <link type="guide" xref="beginner.js#buttons"/>
+ <revision version="0.1" date="2012-06-16" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Taryn Fox</name>
+ <email>jewelfox fursona net</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Stays pressed until you click it again</desc>
+ </info>
+
+ <title>ToggleButton</title>
+ <media type="image" mime="image/png" src="media/togglebutton.png"/>
+ <p>A ToggleButton is like a normal <link xref="button.js">Button</link>, except that it stays pressed in
when you click it. You can use it like an on/off switch, to control things like the <link
xref="spinner.js">Spinner</link> in this example.</p>
+ <p>A ToggleButton's get_active method returns true if it's pressed in, and false if it's not. Its
set_active method is used if you want to change its state without needing to click on it. When it changes
state from pressed in to popped out and vice-versa, it sends out the "toggled" signal, which you can connect
to a function to do something.</p>
+ <links type="section" />
+
+ <section id="imports">
+ <title>Libraries to import</title>
+ <code mime="application/javascript"><![CDATA[
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+]]></code>
+ <p>These are the libraries we need to import for this application to run. Remember that the line which
tells GNOME that we're using Gjs always needs to go at the start.</p>
+ </section>
+
+ <section id="applicationwindow">
+ <title>Creating the application window</title>
+ <code mime="application/javascript"><![CDATA[
+const ToggleButtonExample = new Lang.Class({
+ Name: 'ToggleButton Example',
+
+ // Create the application itself
+ _init: function() {
+ this.application = new Gtk.Application({
+ application_id: 'org.example.jstogglebutton',
+ flags: Gio.ApplicationFlags.FLAGS_NONE
+ });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents window when active
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function() {
+ this._buildUI ();
+ },
+]]></code>
+ <p>All the code for this sample goes in the RadioButtonExample class. The above code creates a <link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link> for our
widgets and window to go in.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Build the application's UI
+ _buildUI: function() {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ default_height: 300,
+ default_width: 300,
+ border_width: 30,
+ title: "ToggleButton Example"});
+]]></code>
+ <p>The _buildUI function is where we put all the code to create the application's user interface. The
first step is creating a new <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link> to put all our
widgets into.</p>
+ </section>
+
+ <section id="togglebutton">
+ <title>Creating the ToggleButton and other widgets</title>
+ <code mime="application/javascript"><![CDATA[
+ // Create the spinner that the button stops and starts
+ this._spinner = new Gtk.Spinner ({hexpand: true, vexpand: true});
+]]></code>
+
+ <p>We want this <link xref="spinner.js">Spinner</link> to expand vertically and horizontally, to take up
as much space as possible inside the window.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Create the togglebutton that starts and stops the spinner
+ this._toggleButton = new Gtk.ToggleButton ({label: "Start/Stop"});
+ this._toggleButton.connect ('toggled', Lang.bind (this, this._onToggle));
+]]></code>
+
+ <p>Creating a ToggleButton is a lot like creating a normal <link xref="button.js">Button</link>. The
biggest difference is that you're handling a "toggled" signal instead of a "clicked" signal. This code binds
the _onToggle function to that signal, so that it's called whenever our ToggleButton is toggled.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Create a grid and put everything in it
+ this._grid = new Gtk.Grid ({
+ row_homogeneous: false,
+ row_spacing: 15});
+ this._grid.attach (this._spinner, 0, 0, 1, 1);
+ this._grid.attach (this._toggleButton, 0, 1, 1, 1);
+]]></code>
+ <p>Here we create a simple <link xref="grid.js">Grid</link> to organize everything in, then attach the
Spinner and ToggleButton to it.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Add the grid to the window
+ this._window.add (this._grid);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+]]></code>
+ <p>Now we add the Grid to the Window, and tell the Window to show itself and its child widgets when the
application is started.</p>
+ </section>
+
+ <section id="toggled">
+ <title>Making something happen when the ToggleButton is toggled</title>
+
+ <code mime="application/javascript"><![CDATA[
+ _onToggle: function() {
+
+ // Start or stop the spinner
+ if (this._toggleButton.get_active ())
+ this._spinner.start ();
+ else this._spinner.stop ();
+
+ }
+
+});
+]]></code>
+ <p>Whenever someone toggles the button, this function checks what its state is afterwards using
get_active and starts or stops the spinner accordingly. We want it to spin only while the button is pressed
in, so if get_active returns true we start the spinner. Otherwise, we tell it to stop.</p>
+
+ <code mime="application/javascript"><![CDATA[
+// Run the application
+let app = new ToggleButtonExample ();
+app.application.run (ARGV);
+]]></code>
+ <p>Finally, we create a new instance of the finished RadioButtonExample class, and set the application
running.</p>
+ </section>
+
+ <section id="complete">
+ <title>Complete code sample</title>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/togglebutton.js"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="in-depth">
+ <title>In-depth documentation</title>
+<list>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Grid.html";>Gtk.Grid</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Spinner.html";>Gtk.Spinner</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.ToggleButton.html";>Gtk.ToggleButton</link></p></item>
+</list>
+ </section>
+</page>
diff --git a/beginners-docs/C/togglebutton.py.page b/beginners-docs/C/togglebutton.py.page
new file mode 100644
index 0000000..8a07749
--- /dev/null
+++ b/beginners-docs/C/togglebutton.py.page
@@ -0,0 +1,48 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="togglebutton.py">
+ <info>
+ <title type="text">ToggleButton (Python)</title>
+ <link type="guide" xref="beginner.py#buttons"/>
+ <link type="next" xref="switch.py"/>
+ <revision version="0.1" date="2012-05-23" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A button which retains state</desc>
+ </info>
+
+ <title>ToggleButton</title>
+ <media type="image" mime="image/png" src="media/togglebutton.png"/>
+ <p>When this ToggleButton is in an active state, the spinner spins.</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/togglebutton.py"
parse="text"><xi:fallback/></xi:include></code>
+
+ </section>
+
+ <section id="methods">
+ <title>Useful methods for a ToggleButton widget</title>
+ <p>In line 22 the signal <code>"toggled"</code> is connected to the callback function
<code>toggled_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback
function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.</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/GtkToggleButton.html";>GtkToggleButton</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkWidget.html";>GtkWidget</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkSpinner.html";>GtkSpinner</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/togglebutton.vala.page b/beginners-docs/C/togglebutton.vala.page
new file mode 100644
index 0000000..57dd9df
--- /dev/null
+++ b/beginners-docs/C/togglebutton.vala.page
@@ -0,0 +1,34 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="togglebutton.vala">
+ <info>
+ <title type="text">ToggleButton (Vala)</title>
+ <link type="guide" xref="beginner.vala#buttons"/>
+ <link type="seealso" xref="grid.vala"/>
+ <link type="seealso" xref="spinner.vala"/>
+
+ <revision version="0.1" date="2012-05-09" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A button which retains state</desc>
+ </info>
+
+ <title>ToggleButton</title>
+ <media type="image" mime="image/png" src="media/togglebutton.png"/>
+ <p>When this ToggleButton is in an active state, the spinner spins.</p>
+
+<code mime="text/x-csharp" style="numbered"><xi:include href="samples/togglebutton.vala"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.ToggleButton.html";>Gtk.ToggleButton</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/toolbar.c.page b/beginners-docs/C/toolbar.c.page
new file mode 100644
index 0000000..613e937
--- /dev/null
+++ b/beginners-docs/C/toolbar.c.page
@@ -0,0 +1,37 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="toolbar.c">
+ <info>
+ <title type="text">Toolbar (C)</title>
+ <link type="guide" xref="beginner.c#menu-combo-toolbar"/>
+ <link type="seealso" xref="menubar.c"/>
+ <link type="seealso" xref="grid.c"/>
+ <revision version="0.1" date="2012-08-19" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Monica Kochofar</name>
+ <email>monicakochofar gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A bar of buttons</desc>
+ </info>
+
+ <title>Toolbar</title>
+
+ <media type="image" mime="image/png" src="media/toolbar.png"/>
+ <p>Toolbar can contain either text or stock icons. In this sample we use stock icons. This example has
fullscreen functionality.</p>
+ <p>This example uses SimpleActions (window and app). App actions can easily be added to the app menu.</p>
+
+ <code mime="text/x-csrc" style="numbered">
+<xi:include href="samples/toolbar.c" parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkToolbar.html";>GtkToolbar</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkToolButton.html";>GtkToolbutton</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/toolbar.js.page b/beginners-docs/C/toolbar.js.page
new file mode 100644
index 0000000..d4faa9a
--- /dev/null
+++ b/beginners-docs/C/toolbar.js.page
@@ -0,0 +1,36 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="toolbar.js">
+ <info>
+ <title type="text">Toolbar (JavaScript)</title>
+ <link type="guide" xref="beginner.js#menu-combo-toolbar"/>
+ <revision version="0.1" date="2012-05-30" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A bar of tools</desc>
+ </info>
+
+ <title>Toolbar</title>
+ <media type="image" mime="image/png" src="media/toolbar.png"/>
+ <p>Toolbar can contain either text or stock icons. In this sample we use stock icons. This example has
fullscreen functionality.</p>
+ <p>This example uses SimpleActions (window and app). App actions can easily be added the the app menu.</p>
+
+<code mime="application/javascript" style="numbered"><xi:include href="samples/toolbar.js"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Window.html";>Gtk.Window</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Toolbar.html";>Gtk.Toolbar</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.ToolButton.html";>Gtk.ToolButton</link></p></item>
+ <item><p><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.html";>Gtk Stock
items</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gdk.WindowState.html";>Gdk.WindowState</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/toolbar.py.page b/beginners-docs/C/toolbar.py.page
new file mode 100644
index 0000000..ed2ea4c
--- /dev/null
+++ b/beginners-docs/C/toolbar.py.page
@@ -0,0 +1,63 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="toolbar.py">
+ <info>
+ <title type="text">Toolbar (Python)</title>
+ <link type="guide" xref="beginner.py#menu-combo-toolbar"/>
+ <link type="seealso" xref="grid.py"/>
+ <link type="next" xref="tooltip.py"/>
+ <revision version="0.1" date="2012-06-05" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A bar of buttons and other widgets</desc>
+ </info>
+
+ <title>Toolbar</title>
+
+ <media type="image" mime="image/png" src="media/toolbar.png"/>
+ <p>An example of toolbar with buttons (from stock icons).</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/toolbar.py"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="methods">
+ <title>Useful methods for a Toolbar widget</title>
+ <p>In line 32 the signal <code>"activate"</code> from the action <code>undo_action</code> is connected
to the callback function <code>undo_callback()</code> using
<code><var>action</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link
xref="signals-callbacks.py"/> for a more detailed explanation.</p>
+
+ <list>
+ <item><p>Use <code>insert(tool_item, position)</code> to insert the <code>tool_item</code> at
<code>position</code>. If <code>position</code> is negative, the item is appended at the end of the
toolbar.</p></item>
+ <item><p><code>get_item_index(tool_item)</code> retrieves the position of <code>tool_item</code> on
the toolbar.</p></item>
+ <item><p><code>get_n_items()</code> returns the number of items on the toolbar;
<code>get_nth_item(position)</code> returns the item in position <code>position</code>.</p></item>
+ <item><p>If the toolbar does not have room for all the menu items, and
<code>set_show_arrow(True)</code>, the items that do not have room are shown through an overflow
menu.</p></item>
+ <item><p><code>set_icon_size(icon_size)</code> sets the size of icons in the toolbar;
<code>icon_size</code> can be one of <code>Gtk.IconSize.INVALID, Gtk.IconSize.MENU,
Gtk.IconSize.SMALL_TOOLBAR, Gtk.IconSize.LARGE_TOOLBAR, Gtk.IconSize.BUTTON, Gtk.IconSize.DND,
Gtk.IconSize.DIALOG</code>. This should be used only for special-purpose toolbars, normal application
toolbars should respect user preferences for the size of icons. <code>unset_icon_size()</code> unsets the
preferences set with <code>set_icon_size(icon_size)</code>, so that user preferences are used to determine
the icon size.</p></item>
+ <item><p><code>set_style(style)</code>, where <code>style</code> is one of
<code>Gtk.ToolbarStyle.ICONS, Gtk.ToolbarStyle.TEXT, Gtk.ToolbarStyle.BOTH,
Gtk.ToolbarStyle.BOTH_HORIZ</code>, sets if the toolbar shows only icons, only text, or both (vertically
stacked or alongside each other). To let user preferences determine the toolbar style, and unset a toolbar
style so set, use <code>unset_style()</code>.</p></item>
+ </list>
+
+ </section>
+
+ <section id="reference">
+ <title>API References</title>
+ <p>In this sample we used the following:</p>
+ <list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkToolbar.html";>GtkToolbar</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkToolButton.html";>GtkToolButton</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkToolItem.html";>GtkToolItem</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items.html";>Stock
Items</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkActionable.html";>GtkActionable</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkWidget.html";>GtkWidget</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gdk3/unstable/gdk3-Event-Structures.html#GdkEventWindowState";>Event
Structures</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/toolbar.vala.page b/beginners-docs/C/toolbar.vala.page
new file mode 100644
index 0000000..bf643e0
--- /dev/null
+++ b/beginners-docs/C/toolbar.vala.page
@@ -0,0 +1,38 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="toolbar.vala">
+ <info>
+ <title type="text">Toolbar (Vala)</title>
+ <link type="guide" xref="beginner.vala#menu-combo-toolbar"/>
+ <link type="seealso" xref="grid.vala"/>
+ <revision version="0.1" date="2012-05-08" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A bar of buttons</desc>
+ </info>
+
+ <title>Toolbar</title>
+
+ <media type="image" mime="image/png" src="media/toolbar.png"/>
+ <p>Toolbar can contain either text or stock icons. In this sample we use stock icons. This example has
fullscreen functionality.</p>
+ <p>This example uses SimpleActions (window and app). App actions can easily be added the the app menu.</p>
+
+<code mime="text/x-csharp" style="numbered"><xi:include href="samples/toolbar.vala"
parse="text"><xi:fallback/></xi:include></code>
+
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.Toolbar.html";>Gtk.Toolbar</link></p></item>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.ToolButton.html";>Gtk.Toolbutton</link></p></item>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.Stock.html";>Gtk.Stock</link></p></item>
+</list>
+
+</page>
diff --git a/beginners-docs/C/toolbar_builder.py.page b/beginners-docs/C/toolbar_builder.py.page
new file mode 100644
index 0000000..14fea10
--- /dev/null
+++ b/beginners-docs/C/toolbar_builder.py.page
@@ -0,0 +1,203 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="toolbar_builder.py">
+ <info>
+ <title type="text">Toolbar created using Glade (Python)</title>
+ <link type="guide" xref="beginner.py#menu-combo-toolbar"/>
+ <link type="seealso" xref="toolbar.py"/>
+ <link type="seealso" xref="grid.py"/>
+ <link type="next" xref="menubar.py"/>
+ <revision version="0.1" date="2012-07-17" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <credit type="author copyright edit">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <credit type="author copyright">
+ <name>Sebastian Pölsterl</name>
+ <email>sebp k-d-w org</email>
+ <years>2011</years>
+ </credit>
+
+ <desc>A bar of buttons and other widgets</desc>
+ </info>
+
+ <title>Toolbar created using Glade</title>
+
+ <media type="image" mime="image/png" src="media/toolbar.png"/>
+ <p>This example is similar to <link xref="toolbar.py"/>, except we use Glade to create the toolbar in an
XML .ui file.</p>
+
+<links type="sections" />
+
+<section id="glade">
+<title>Creating the toolbar with Glade</title>
+ <p>
+ To create the toolbar using the <link href="http://glade.gnome.org/";>Glade Interface Designer</link>:
+ </p>
+ <steps>
+ <item><p>Open Glade, and save the file as <file>toolbar_builder.ui</file></p>
+ <p><media type="image" src="media/glade_ui.png" width="900">
+ Screenshot of Glade ui
+ </media></p>
+ </item>
+
+ <item><p>Under <gui>Containers</gui> on the left hand side, right click on the toolbar icon and select
<gui>Add widget as toplevel</gui>.</p>
+ <p><media type="image" src="media/glade_select_toolbar.png">
+ Screenshot of toolbar icon in Glade ui
+ </media></p>
+ </item>
+
+ <item><p>Under the <gui>General</gui> tab on the bottom right, change the <gui>Name</gui> to
<input>toolbar</input> and <gui>Show Arrow</gui> to <gui>No</gui>.</p>
+ <p><media type="image" src="media/glade_toolbar_general.png">
+ Screenshot of General tab
+ </media></p>
+ </item>
+
+ <item><p>Under the <gui>Common</gui> tab, set <gui>Horizontal Expand</gui> to <gui>Yes</gui>.</p>
+ <p><media type="image" src="media/glade_toolbar_common.png">
+ Screenshot of Common tab
+ </media></p>
+ </item>
+
+ <item><p>Right click on the toolbar in the top right and select <gui>Edit</gui>. The <gui>Tool Bar
Editor</gui> window will appear.</p>
+ <p><media type="image" src="media/glade_toolbar_edit.png">
+ Screenshot of where to right click to edit toolbar.
+ </media></p>
+ </item>
+
+ <item><p>We want to add 5 ToolButtons: New, Open, Undo, Fullscreen and Leave Fullscreen. First, we will
add the New ToolButton.
+ </p>
+ <steps>
+ <item><p>Under <gui>Hierarchy</gui> tab, click <gui>Add</gui>.</p></item>
+ <item><p>Change the name of the ToolItem to <input>new_button</input>.</p></item>
+ <item><p>Scroll down and set <gui>Is important</gui> to <gui>Yes</gui>. This will cause the label of
the ToolButton to be shown, when you view the toolbar.</p></item>
+ <item><p>Enter the <gui>action name</gui>: <input>app.new</input>.</p></item>
+ <item><p>Change the <gui>Label</gui> to <input>New</input>.</p></item>
+ <item><p>Select the <gui>New</gui> Stock Id from the drop down menu, or type
<input>gtk-new</input>.</p></item>
+ </steps>
+ <p>
+ Repeat the above steps for the remaining ToolButtons, with the following properties:
+ </p>
+ <table frame="all" rules="rows">
+ <thead>
+ <tr>
+ <td><p>Name</p></td>
+ <td><p>Is important</p></td>
+ <td><p>Action name</p></td>
+ <td><p>Label</p></td>
+ <td><p>Stock Id</p></td>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><p>open_button</p></td>
+ <td><p>Yes</p></td>
+ <td><p>app.open</p></td>
+ <td><p>Open</p></td>
+ <td><p>gtk-open</p></td>
+ </tr>
+ <tr>
+ <td><p>undo_button</p></td>
+ <td><p>Yes</p></td>
+ <td><p>win.undo</p></td>
+ <td><p>Undo</p></td>
+ <td><p>gtk-undo</p></td>
+ </tr>
+ <tr>
+ <td><p>fullscreen_button</p></td>
+ <td><p>Yes</p></td>
+ <td><p>win.fullscreen</p></td>
+ <td><p>Fullscreen</p></td>
+ <td><p>gtk-fullscreen</p></td>
+ </tr>
+ <tr>
+ <td><p>leave_fullscreen_button</p></td>
+ <td><p>Yes</p></td>
+ <td><p>win.fullscreen</p></td>
+ <td><p>Leave Fullscreen</p></td>
+ <td><p>gtk-leave-fullscreen</p></td>
+ </tr>
+ </tbody>
+</table>
+ <media type="image" src="media/glade_toolbar_editor.png">
+
+ </media>
+ </item>
+
+ <item><p>Close the <gui>Tool Bar Editor</gui>.</p>
+ </item>
+
+ <item><p>When our program will first start, we do not want the <gui>Leave Fullscreen</gui> ToolButton to
be visible, since the application will not be in fullscreen mode. You can set this in the <gui>Common</gui>
tab, by clicking the <gui>Visible</gui> property to <gui>No</gui>. The ToolButton will still appear in the
interface designer, but will behave correctly when the file is loaded into your program code. Note that the
method <code>show_all()</code> would override this setting - so in the code we have to use
<code>show()</code> separately on all the elements.</p>
+ <p><media type="image" src="media/glade_visible_no.png">
+ Setting the visible property to No
+ </media></p>
+ </item>
+
+ <item><p>Save your work, and close Glade.</p>
+ </item>
+
+ <item><p>The XML file created by Glade is shown below. This is the description of the toolbar. At the
time of this writing, the option to add the class Gtk.STYLE_CLASS_PRIMARY_TOOLBAR in the Glade Interface did
not exist. We can manually add this to the XML file. To do this, add the following XML code at line 9 of
<file>toolbar_builder.ui</file>:</p>
+ <code><![CDATA[
+ <style>
+ <class name="primary-toolbar"/>
+ </style>
+ ]]></code>
+ <p>If you do not add this, the program will still work fine. The resulting toolbar will however look
slightly different then the screenshot at the top of this page.</p>
+ </item>
+</steps>
+ <code mime="application/xml" style="numbered"><xi:include href="samples/toolbar_builder.ui"
parse="text"><xi:fallback/></xi:include></code>
+
+</section>
+
+<section id="code">
+<title>Code used to generate this example</title>
+
+ <p>We now create the code below, which adds the toolbar from the file we just created.</p>
+<code mime="text/x-python" style="numbered"><xi:include href="samples/toolbar_builder.py"
parse="text"><xi:fallback/></xi:include></code>
+
+</section>
+
+<section id="methods">
+<title>Useful methods for Gtk.Builder</title>
+<p>For the useful methods for a Toolbar widget, see <link xref="toolbar.py" /></p>
+
+<p>Gtk.Builder builds an interface from an XML UI definition.</p>
+
+<list>
+<item><p><code>add_from_file(filename)</code> loads and parses the given file and merges it with the current
contents of the Gtk.Builder.</p></item>
+<item><p><code>add_from_string(string)</code> parses the given string and merges it with the current
contents of the Gtk.Builder.</p></item>
+<item><p><code>add_objects_from_file(filename, object_ids)</code> is the same as
<code>add_from_file()</code>, but it loads only the objects with the ids given in the <code>object_id</code>s
list.</p></item>
+<item><p><code>add_objects_from_string(filename, object_ids)</code> is the same as
<code>add_from_string()</code>, but it loads only the objects with the ids given in the
<code>object_id</code>s list.</p></item>
+<item><p><code>get_object(object_id)</code> retrieves the widget with the id <code>object_id</code> from the
loaded objects in the builder.</p></item>
+<item><p><code>get_objects()</code> returns all loaded objects.</p></item>
+<item><p><code>connect_signals(handler_object)</code> connects the signals to the methods given in the
<code>handler_object</code>. This can be any object which contains keys or attributes that are called like
the signal handler names given in the interface description, e.g. a class or a dict. In line 39 the signal
<code>"activate"</code> from the action <code>undo_action</code> is connected to the callback function
<code>undo_callback()</code> using <code><var>action</var>.connect(<var>signal</var>, <var>callback
function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.</p>
+</item>
+</list>
+
+</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/GtkGrid.html";>GtkGrid</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/unstable/GtkBuilder.html";>GtkBuilder</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/unstable/GtkWidget.html";>GtkWidget</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gdk3/unstable/gdk3-Event-Structures.html#GdkEventWindowState";>Event
Structures</link></p></item>
+</list>
+
+</section>
+
+</page>
diff --git a/beginners-docs/C/toolbar_builder.vala.page b/beginners-docs/C/toolbar_builder.vala.page
new file mode 100644
index 0000000..0652deb
--- /dev/null
+++ b/beginners-docs/C/toolbar_builder.vala.page
@@ -0,0 +1,155 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="toolbar_builder.vala">
+ <info>
+ <title type="text">Toolbar created using Glade (Vala)</title>
+ <link type="guide" xref="beginner.vala#menu-combo-toolbar"/>
+ <link type="seealso" xref="toolbar.vala"/>
+ <link type="seealso" xref="grid.vala"/>
+ <revision version="0.1" date="2012-05-08" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A bar of buttons</desc>
+ </info>
+
+ <title>Toolbar created using Glade</title>
+
+ <media type="image" mime="image/png" src="media/toolbar.png"/>
+ <p>This example is similar to <link xref="toolbar.vala"/>, except we use Glade to create the toolbar in an
XML ui file.</p>
+
+ <p>
+ To create the toolbar using the <link href="http://glade.gnome.org/";>Glade Interface Designer</link>:
+ </p>
+ <steps>
+ <item><p>Open Glade, and save the file as <file>toolbar_builder.ui</file></p>
+ <p><media type="image" src="media/glade_ui.png" width="900">
+ Screenshot of Glade ui
+ </media></p>
+ </item>
+
+ <item><p>Under <gui>Containers</gui> on the left hand side, right click on the toolbar icon and select
<gui>Add widget as toplevel</gui>.</p>
+ <p><media type="image" src="media/glade_select_toolbar.png">
+ Screenshot of toolbar icon in Glade ui
+ </media></p>
+ </item>
+
+ <item><p>Under the <gui>General</gui> tab on the bottom right, change the <gui>Name</gui> to
<input>toolbar</input> and <gui>Show Arrow</gui> to <gui>No</gui>.</p>
+ <p><media type="image" src="media/glade_toolbar_general.png">
+ Screenshot of General tab
+ </media></p>
+ </item>
+
+ <item><p>Under the <gui>Common</gui> tab, set <gui>Horizontal Expand</gui> to <gui>Yes</gui>.</p>
+ <p><media type="image" src="media/glade_toolbar_common.png">
+ Screenshot of Common tab
+ </media></p>
+ </item>
+
+ <item><p>Right click on the toolbar in the top right and select <gui>Edit</gui>. The <gui>Tool Bar
Editor</gui> window will appear.</p>
+ <p><media type="image" src="media/glade_toolbar_edit.png">
+ Screenshot of where to right click to edit toolbar.
+ </media></p>
+ </item>
+
+ <item><p>We want to add 5 ToolButtons: New, Open, Undo, Fullscreen and Leave Fullscreen. First, we will
add the New ToolButton.
+ </p>
+ <steps>
+ <item><p>Under <gui>Hierarchy</gui> tab, click <gui>Add</gui>.</p></item>
+ <item><p>Change the name of the ToolItem to <input>new_button</input>.</p></item>
+ <item><p>Scroll down and set <gui>Is important</gui> to <gui>Yes</gui>. This will cause the label of
the ToolButton to be shown, when you view the toolbar.</p></item>
+ <item><p>Enter the <gui>action name</gui>: <input>app.new</input>.</p></item>
+ <item><p>Change the <gui>Label</gui> to <input>New</input>.</p></item>
+ <item><p>Select the <gui>New</gui> Stock Id from the drop down menu, or type
<input>gtk-new</input>.</p></item>
+ </steps>
+ <p>
+ Repeat the above steps for the remaining ToolButtons, with the following properties:
+ </p>
+ <table frame="all" rules="rows">
+ <thead>
+ <tr>
+ <td><p>Name</p></td>
+ <td><p>Is important</p></td>
+ <td><p>Action name</p></td>
+ <td><p>Label</p></td>
+ <td><p>Stock Id</p></td>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><p>open_button</p></td>
+ <td><p>Yes</p></td>
+ <td><p>app.open</p></td>
+ <td><p>Open</p></td>
+ <td><p>gtk-open</p></td>
+ </tr>
+ <tr>
+ <td><p>undo_button</p></td>
+ <td><p>Yes</p></td>
+ <td><p>win.undo</p></td>
+ <td><p>Undo</p></td>
+ <td><p>gtk-undo</p></td>
+ </tr>
+ <tr>
+ <td><p>fullscreen_button</p></td>
+ <td><p>Yes</p></td>
+ <td><p>win.fullscreen</p></td>
+ <td><p>Fullscreen</p></td>
+ <td><p>gtk-fullscreen</p></td>
+ </tr>
+ <tr>
+ <td><p>leave_fullscreen_button</p></td>
+ <td><p>Yes</p></td>
+ <td><p>win.fullscreen</p></td>
+ <td><p>Leave Fullscreen</p></td>
+ <td><p>gtk-leave-fullscreen</p></td>
+ </tr>
+ </tbody>
+</table>
+ <media type="image" src="media/glade_toolbar_editor.png">
+
+ </media>
+ </item>
+
+ <item><p>Close the <gui>Tool Bar Editor</gui>.</p>
+ </item>
+
+ <item><p>When our program will first start, we don't want the <gui>Leave Fullscreen</gui> ToolButton to
be visible, since the application will not be in fullscreen mode. You can set this in the <gui>Common</gui>
tab, by clicking the <gui>Visible</gui> property to <gui>No</gui>. The ToolButton will still appear in the
interface designer, but will behave correctly when the file is loaded into your program code.</p>
+ <p><media type="image" src="media/glade_visible_no.png">
+ Setting the visible property to No
+ </media></p>
+ </item>
+
+ <item><p>Save your work, and close Glade.</p>
+ </item>
+
+ <item><p>The XML file created by Glade is shown below. This is the description of the toolbar. At the
time of this writing, the option to add the class Gtk.STYLE_CLASS_PRIMARY_TOOLBAR in the Glade Interface did
not exist. We can manually add this to the XML file. To do this, add the following XML code at line 9 of
<file>toolbar_builder.ui</file>:</p>
+ <code><![CDATA[
+ <style>
+ <class name="primary-toolbar"/>
+ </style>
+ ]]></code>
+ <p>If you do not add this, the program will still work fine. The resulting toolbar will however look
slightly different then the screenshot at the top of this page.</p>
+ </item>
+</steps>
+ <code mime="application/xml" style="numbered"><xi:include href="samples/toolbar_builder.ui"
parse="text"><xi:fallback/></xi:include></code>
+
+ <p>We now create the code below, which adds the toolbar from the file we just created.</p>
+<code mime="text/x-csharp" style="numbered"><xi:include href="samples/toolbar_builder.vala"
parse="text"><xi:fallback/></xi:include></code>
+
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.Toolbar.html";>Gtk.Toolbar</link></p></item>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.ToolButton.html";>Gtk.Toolbutton</link></p></item>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.Stock.html";>Gtk.Stock</link></p></item>
+</list>
+
+</page>
diff --git a/beginners-docs/C/toolbars.vala.page b/beginners-docs/C/toolbars.vala.page
new file mode 100644
index 0000000..ef7a7b1
--- /dev/null
+++ b/beginners-docs/C/toolbars.vala.page
@@ -0,0 +1,20 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="toolbars.vala">
+ <info>
+ <link type="guide" xref="beginner.vala#tutorials"/>
+ <revision version="0.1" date="2012-02-20" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc></desc>
+ </info>
+
+ <title>iv. Toolbars</title>
+
+</page>
diff --git a/beginners-docs/C/tooltip.py.page b/beginners-docs/C/tooltip.py.page
new file mode 100644
index 0000000..28ea2ab
--- /dev/null
+++ b/beginners-docs/C/tooltip.py.page
@@ -0,0 +1,63 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="tooltip.py">
+ <info>
+ <title type="text">Tooltip (Python)</title>
+ <link type="guide" xref="beginner.py#misc"/>
+ <link type="seealso" xref="toolbar.py"/>
+ <link type="next" xref="toolbar_builder.py"/>
+ <revision version="0.1" date="2012-08-20" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Add tips to your widgets</desc>
+ </info>
+
+ <title>Tooltip</title>
+ <media type="image" mime="image/png" src="media/tooltip.png"/>
+ <p>A toolbar with a tooltip (with an image) for a button.</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+ <code mime="text/x-csharp" style="numbered"><xi:include href="samples/tooltip.py"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="methods">
+ <title>Useful methods for a Tooltip widget</title>
+
+ <p><code>set_tooltip_text(text)</code> and <code>set_tooltip_markup(text)</code> can be used to add a
tooltip of plain text (or text in the Pango Markup Language) to a widget.</p>
+ <p>For more complex tooltips, for instance for a tooltip with an image:</p>
+ <steps>
+ <item><p>Set the <code>"has-tooltip"</code> property of the widget to <code>True</code>; this will
make GTK+ monitor the widget for motion and related events which are needed to determine when and where to
show a tooltip.</p></item>
+ <item><p>Connect to the <code>"query-tooltip"</code> signal. This signal will be emitted when a
tooltip is supposed to be shown. One of the arguments passed to the signal handler is a GtkTooltip object.
This is the object that we are about to display as a tooltip, and can be manipulated in your callback using
functions like <code>set_icon()</code>. There are functions for setting the tooltip's markup
(<code>set_markup(text)</code>), setting an image from a stock icon (<code>set_icon_from_stock(stock_id,
size)</code>), or even putting in a custom widget (<code>set_custom(widget)</code>).</p></item>
+ <item><p>Return <code>True</code> from your query-tooltip handler. This causes the tooltip to be show.
If you return <code>False</code>, it will not be shown.</p></item>
+ </steps>
+
+ <p>In the probably rare case where you want to have even more control over the tooltip that is about to
be shown, you can set your own GtkWindow which will be used as tooltip window. This works as follows:</p>
+ <steps>
+ <item><p>Set <code>"has-tooltip"</code> and connect to <code>"query-tooltip"</code> as
before.</p></item>
+ <item><p>Use <code>set_tooltip_window()</code> on the widget to set a GtkWindow created by you as
tooltip window.</p></item>
+ <item><p>In the <code>"query-tooltip"</code> callback you can access your window using
<code>get_tooltip_window()</code> and manipulate as you wish. The semantics of the return value are exactly
as before, return <code>True</code> to show the window, <code>False</code> to not show it.</p></item>
+ </steps>
+
+ </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/stable/GtkTooltip.html";>GtkTooltip</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkToolbar.html";>GtkToolbar</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkWidget.html";>GtkWidget</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/gtk3-Stock-Items.html";>Stock
Items</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/translate.page b/beginners-docs/C/translate.page
new file mode 100644
index 0000000..b62ec91
--- /dev/null
+++ b/beginners-docs/C/translate.page
@@ -0,0 +1,39 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="translate">
+
+ <info>
+ <link type="guide" xref="index#get-involved"/>
+
+ <revision pkgversion="3.4" version="0.1" date="2012-02-06" status="candidate"/>
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2011</years>
+ </credit>
+ <credit type="editor">
+ <name>Michael Hill</name>
+ <email>mdhillca gmail com</email>
+ </credit>
+ <license>
+ <p>Creative Commons Share Alike 3.0</p>
+ </license>
+ </info>
+
+<title>Help translate</title>
+<p>
+ The <app>Tutorial Demos</app> are being translated by a world-wide volunteer community. You are welcome
to participate.
+</p>
+<p>
+ There are <link href="http://l10n.gnome.org/module/gnome-devel-docs/";>many languages</link> for which
translations are still needed.
+</p>
+<p>
+To start translating you will need to <link href="http://l10n.gnome.org";>create an account</link> and join
the <link href="http://l10n.gnome.org/teams/";>translation team</link> for your language. This will give you
the ability to upload new translations.
+</p>
+
+<p>
+ You can chat with GNOME translators using <link
href="https://cbe003.chat.mibbit.com/?url=irc%3A%2F%2Firc.gnome.org%2Fi18n";>irc</link>. People on the channel
are located worldwide, so you may not get an immediate response as a result of timezone differences.
+</p>
+<p>Alternatively, you can contact the Internationalization Team using their <link
href="http://mail.gnome.org/mailman/listinfo/gnome-i18n";>mailing list</link>.
+</p>
+</page>
diff --git a/beginners-docs/C/treeview.c.page b/beginners-docs/C/treeview.c.page
new file mode 100644
index 0000000..c715728
--- /dev/null
+++ b/beginners-docs/C/treeview.c.page
@@ -0,0 +1,29 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ type="guide" style="task"
+ id="treeview.c">
+ <info>
+ <title type="text">TreeView (C)</title>
+ <link type="guide" xref="beginner.c#treeview"/>
+ <revision version="0.1" date="2012-04-07" status="stub"/>
+
+ <credit type="author copyright">
+ <name></name>
+ <email></email>
+ <years></years>
+ </credit>
+
+ <desc>A widget which displays trees and lists</desc>
+ </info>
+
+ <title>TreeView</title>
+ <media type="image" mime="image/png" src="media/widget.png"/>
+ <p>More specific description of this particular example.</p>
+
+ <code mime="text/x-csrc" style="numbered"><![CDATA[
+
+]]></code>
+<p>
+ In this sample we used the following widgets: <link href="">Widget 1</link>, <link href="">Widget 2</link>
and <link href="">Widget 3</link>.
+</p>
+</page>
diff --git a/beginners-docs/C/treeview.js.page b/beginners-docs/C/treeview.js.page
new file mode 100644
index 0000000..6bb952d
--- /dev/null
+++ b/beginners-docs/C/treeview.js.page
@@ -0,0 +1,28 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ type="guide" style="task"
+ id="treeview.js">
+ <info>
+ <title type="text">TreeView (JavaScript)</title>
+ <link type="guide" xref="beginner.js#treeview"/>
+ <revision version="0.1" date="2012-04-07" status="stub"/>
+
+ <credit type="author copyright">
+ <name></name>
+ <email></email>
+ <years></years>
+ </credit>
+
+ <desc>A widget which displays trees and lists</desc>
+ </info>
+
+ <title>TreeView</title>
+ <media type="image" mime="image/png" src="media/widget.png"/>
+ <p>More specific description of this particular example.</p>
+
+ <code mime="application/javascript" style="numbered"><![CDATA[
+]]></code>
+<p>
+ In this sample we used the following widgets: <link href="">Widget 1</link>, <link href="">Widget 2</link>
and <link href="">Widget 3</link>.
+</p>
+</page>
diff --git a/beginners-docs/C/treeview.py.page b/beginners-docs/C/treeview.py.page
new file mode 100644
index 0000000..e08a7cd
--- /dev/null
+++ b/beginners-docs/C/treeview.py.page
@@ -0,0 +1,28 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ type="guide" style="task"
+ id="treeview.py">
+ <info>
+ <title type="text">TreeView (Python)</title>
+ <link type="guide" xref="beginner.py#treeview"/>
+ <revision version="0.1" date="2012-04-07" status="stub"/>
+
+ <credit type="author copyright">
+ <name></name>
+ <email></email>
+ <years></years>
+ </credit>
+
+ <desc>A widget which displays trees and lists</desc>
+ </info>
+
+ <title>TreeView</title>
+ <media type="image" mime="image/png" src="media/widget.png"/>
+ <p>More specific description of this particular example.</p>
+
+ <code mime="text/x-python" style="numbered"><![CDATA[
+]]></code>
+<p>
+ In this sample we used the following widgets: <link href="">Widget 1</link>, <link href="">Widget 2</link>
and <link href="">Widget 3</link>.
+</p>
+</page>
diff --git a/beginners-docs/C/treeview.vala.page b/beginners-docs/C/treeview.vala.page
new file mode 100644
index 0000000..abed7e7
--- /dev/null
+++ b/beginners-docs/C/treeview.vala.page
@@ -0,0 +1,29 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ type="guide" style="task"
+ id="treeview.vala">
+ <info>
+ <title type="text">TreeView (Vala)</title>
+ <link type="guide" xref="beginner.vala#treeview"/>
+ <revision version="0.1" date="2012-04-07" status="stub"/>
+
+ <credit type="author copyright">
+ <name></name>
+ <email></email>
+ <years></years>
+ </credit>
+
+ <desc>A widget which displays trees and lists</desc>
+ </info>
+
+ <title>TreeView</title>
+ <media type="image" mime="image/png" src="media/widget.png"/>
+ <p>More specific description of this particular example.</p>
+
+ <code mime="text/x-csharp" style="numbered"><![CDATA[
+
+]]></code>
+<p>
+ In this sample we used the following widgets: <link href="">Widget 1</link>, <link href="">Widget 2</link>
and <link href="">Widget 3</link>.
+</p>
+</page>
diff --git a/beginners-docs/C/treeview_advanced_liststore.py.page
b/beginners-docs/C/treeview_advanced_liststore.py.page
new file mode 100644
index 0000000..5b2165a
--- /dev/null
+++ b/beginners-docs/C/treeview_advanced_liststore.py.page
@@ -0,0 +1,51 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="treeview_advanced_liststore.py">
+ <info>
+ <title type="text">Simple Treeview with ListStore (Python)</title>
+ <link type="guide" xref="beginner.py#treeview"/>
+ <link type="next" xref="treeview_cellrenderertoggle.py"/>
+ <revision version="0.1" date="2012-06-30" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A TreeView displaying a ListStore (more complex example)</desc>
+ </info>
+
+ <title>More Complex Treeview with ListStore</title>
+ <media type="image" mime="image/png" src="media/treeview_advanced_liststore.png"/>
+ <p>This TreeView displays a simple ListStore with the selection "changed" signal connected.</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/treeview_advanced_liststore.py"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="methods">
+ <title>Useful methods for a TreeView widget</title>
+ <p>The TreeView widget is designed around a <em>Model/View/Controller</em> design: the <em>Model</em>
stores the data; the <em>View</em> gets change notifications and displays the content of the model; the
<em>Controller</em>, finally, changes the state of the model and notifies the view of these changes. For more
information and for a list of useful methods for TreeModel see <link xref="model-view-controller.py" />.</p>
+ <p>In line 36 the <code>"changed"</code> signal is connected to the callback function
<code>on_changed()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback
function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.</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/GtkTreeView.html";>GtkTreeView</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkTreeModel.html";>GtkTreeModel</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkListStore.html";>GtkListStore</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkCellRendererText.html";>GtkCellRendererText</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkTreeViewColumn.html";>GtkTreeViewColumn</link></p></item>
+ <item><p><link href="http://git.gnome.org/browse/pygobject/tree/gi/overrides/Gtk.py";>pygobject -
Python bindings for GObject Introspection</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/treeview_cellrenderertoggle.py.page
b/beginners-docs/C/treeview_cellrenderertoggle.py.page
new file mode 100644
index 0000000..93a08dc
--- /dev/null
+++ b/beginners-docs/C/treeview_cellrenderertoggle.py.page
@@ -0,0 +1,51 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="treeview_cellrenderertoggle.py">
+ <info>
+ <title type="text">TreeView with TreeStore (Python)</title>
+ <link type="guide" xref="beginner.py#treeview"/>
+ <link type="next" xref="widget_drawing.py"/>
+ <revision version="0.1" date="2012-06-30" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A TreeView displaying a TreeStore (more complex example, with CellRendererToggle)</desc>
+ </info>
+
+ <title>More Complex TreeView with TreeStore</title>
+ <media type="image" mime="image/png" src="media/treeview_cellrenderertoggle.png"/>
+ <p>This TreeView displays a TreeStore with two columns, one of which is rendered as a toggle.</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/treeview_cellrenderertoggle.py"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="methods">
+ <title>Useful methods for a TreeView widget</title>
+ <p>The TreeView widget is designed around a <em>Model/View/Controller</em> design: the <em>Model</em>
stores the data; the <em>View</em> gets change notifications and displays the content of the model; the
<em>Controller</em>, finally, changes the state of the model and notifies the view of these changes. For more
information and for a list of useful methods for TreeModel see <link xref="model-view-controller.py" />.</p>
+ <p>In line 48 the <code>"toggled"</code> signal is connected to the callback function
<code>on_toggled()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback
function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.</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/GtkTreeView.html";>GtkTreeView</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkTreeModel.html";>GtkTreeModel</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkTreeStore.html";>GtkTreeStore</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkCellRendererText.html";>GtkCellRendererText</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkCellRendererToggle.html";>GtkCellRendererToggle</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkTreeViewColumn.html";>GtkTreeViewColumn</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/treeview_simple_liststore.js.page
b/beginners-docs/C/treeview_simple_liststore.js.page
new file mode 100644
index 0000000..08b3455
--- /dev/null
+++ b/beginners-docs/C/treeview_simple_liststore.js.page
@@ -0,0 +1,286 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="treeview_simple_liststore.js">
+ <info>
+ <title type="text">TreeView with ListStore (JavaScript)</title>
+ <link type="guide" xref="beginner.js#treeview"/>
+ <link type="seealso" xref="GtkApplicationWindow.js" />
+ <link type="seealso" xref="grid.js" />
+ <link type="seealso" xref="label.js" />
+ <revision version="0.1" date="2012-07-04" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Taryn Fox</name>
+ <email>jewelfox fursona net</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A widget that shows a separate list of items</desc>
+ </info>
+
+ <title>TreeView with ListStore</title>
+ <media type="image" mime="image/png" src="media/treeview_simple_liststore_penguins.png"/>
+ <p>A TreeView is like a window onto the contents of either a ListStore or a TreeStore. A ListStore is like
a spreadsheet: a "flat", two-dimensional list of things broken up into rows and columns. A TreeStore,
meanwhile, can branch out in different directions like a tree can. In this example, we create a TreeView that
shows the contents of a ListStore with (fictitious) names and phone numbers in it, and set it so that the
<link xref="label.js">Label</link> at the bottom of the window shows more information about whichever name
you click on.</p>
+ <p>The TreeView is not just a single widget, but contains a number of smaller ones:</p>
+ <list>
+ <item><p>TreeViewColumn widgets show each (vertical) column of information from the ListStore. Each one
has a title which can be shown at the top of the column, like in the screenshot.</p></item>
+ <item><p>CellRenderer widgets are "packed" into each TreeViewColumn, and contain the instructions for
how to display each individual "cell", or item from the ListStore. There are multiple different types,
including the CellRendererText used here and the CellRendererPixbuf, which displays a picture ("pixel
buffer").</p></item>
+ </list>
+ <p>Finally, we're going to use an object called a TreeIter, which isn't a widget so much as an invisible
cursor which points to a (horizontal) row in the ListStore. Whenever you click on a name in the phonebook,
for instance, we create a TreeIter pointing to the row that's selected, and then use that to tell the
ListStore which entry we want the Label to show more information about.</p>
+ <note><p>The TreeView is probably the most complicated Gtk widget, because of how many parts it has and
how they all have to work together. Give yourself time to learn how it works and experiment with it, or try
something easier first if you're having trouble.</p></note>
+ <links type="section" />
+
+ <section id="imports">
+ <title>Libraries to import</title>
+ <code mime="application/javascript"><![CDATA[
+#!/usr/bin/gjs
+
+const GObject = imports.gi.GObject;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+const Pango = imports.gi.Pango;
+]]></code>
+ <p>These are the libraries we need to import for this application to run. Remember that the line which
tells GNOME that we're using Gjs always needs to go at the start.</p>
+ </section>
+
+ <section id="applicationwindow">
+ <title>Creating the application window</title>
+ <code mime="application/javascript"><![CDATA[
+const TreeViewExample = new Lang.Class({
+ Name: 'TreeView Example with Simple ListStore',
+
+ // Create the application itself
+ _init: function() {
+ this.application = new Gtk.Application({
+ application_id: 'org.example.jstreeviewsimpleliststore'
+ });
+
+ // Connect 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ // Callback function for 'activate' signal presents window when active
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ // Callback function for 'startup' signal builds the UI
+ _onStartup: function() {
+ this._buildUI ();
+ },
+]]></code>
+ <p>All the code for this sample goes in the TreeViewExample class. The above code creates a <link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link> for our
widgets and window to go in.</p>
+ <code mime="application/javascript"><![CDATA[
+ // Build the application's UI
+ _buildUI: function() {
+
+ // Create the application window
+ this._window = new Gtk.ApplicationWindow({
+ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ default_height: 250,
+ default_width: 100,
+ border_width: 20,
+ title: "My Phone Book"});
+]]></code>
+ <p>The _buildUI function is where we put all the code to create the application's user interface. The
first step is creating a new <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link> to put all our
widgets into.</p>
+ </section>
+
+ <section id="liststore">
+ <title>Creating the ListStore</title>
+ <code mime="application/javascript"><![CDATA[
+ // Create the underlying liststore for the phonebook
+ this._listStore = new Gtk.ListStore ();
+ this._listStore.set_column_types ([
+ GObject.TYPE_STRING,
+ GObject.TYPE_STRING,
+ GObject.TYPE_STRING,
+ GObject.TYPE_STRING]);
+]]></code>
+ <p>We first create the ListStore like we would any widget. Then we call its set_column_types method, and
pass it an array of GObject data types. (We could have put the types all on one line, but here we are
breaking them up to make it easier to read.)</p>
+ <p>The GObject data types you can use include:</p>
+ <list>
+ <item><p><file>GObject.TYPE_BOOLEAN</file> -- True or false</p></item>
+ <item><p><file>GObject.TYPE_FLOAT</file> -- A floating point number (one with a decimal
point)</p></item>
+ <item><p><file>GObject.TYPE_STRING</file> -- A string of letters and numbers</p></item>
+ <item><p><file>gtk.gdk.Pixbuf</file> -- A picture</p></item>
+ </list>
+ <p>In this case, we're making a ListStore of four columns, each one containing string values.</p>
+ <note><p>You need to put the line <file>const GObject = imports.gi.GObject;</file> at the start of your
application's code, like we did in this example, if you want to be able to use GObject types.</p></note>
+
+ <code mime="application/javascript"><![CDATA[
+ // Data to go in the phonebook
+ this.phonebook =
+ let phonebook =
+ [{ name: "Jurg", surname: "Billeter", phone: "555-0123",
+ description: "A friendly person."},
+ { name: "Johannes", surname: "Schmid", phone: "555-1234",
+ description: "Easy phone number to remember."},
+ { name: "Julita", surname: "Inca", phone: "555-2345",
+ description: "Another friendly person."},
+ { name: "Javier", surname: "Jardon", phone: "555-3456",
+ description: "Bring fish for his penguins."},
+ { name: "Jason", surname: "Clinton", phone: "555-4567",
+ description: "His cake's not a lie."},
+ { name: "Random J.", surname: "Hacker", phone: "555-5678",
+ description: "Very random!"}];
+]]></code>
+ <p>Here we have the information to go in the ListStore. It's an array of objects, each one corresponding
to a single entry in our phone book.</p>
+ <p>Note that the TreeView in the screenshot doesn't actually show the data from the "description"
properties. Instead, that information's shown in the Label beneath it, for whichever row that you click on.
That's because the TreeView and ListStore are two separate things, and a TreeView can show all or part of a
ListStore, and display what's in it in different ways. You can even have multiple widgets show things from
the same ListStore, like the Label in our example or even a second TreeView.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ for (i = 0; i < phonebook.length; i++ ) {
+ let contact = phonebook [i];
+ this._listStore.set (this._listStore.append(), [0, 1, 2, 3],
+ [contact.name, contact.surname, contact.phone, contact.description]);
+ }
+]]></code>
+ <p>This <file>for</file> loop puts the strings from our phonebook into our ListStore in order. In order,
we pass the ListStore's set method the iter that points to the correct row, an array which says which columns
we want to set, and an array which contains the data we want to put into those columns.</p>
+ <p>A ListStore's <file>append</file> method adds a horizontal row onto it (it starts out with none), and
returns a TreeIter pointing to that row like a cursor. So by passing <file>this._listStore.append()</file> to
the ListStore as a property, we're creating a new row and telling the <file>set</file> method which row to
set data for at the same time.</p>
+
+ </section>
+
+ <section id="treeview">
+ <title>Creating the TreeView</title>
+ <code mime="application/javascript"><![CDATA[
+ // Create the treeview
+ this._treeView = new Gtk.TreeView ({
+ expand: true,
+ model: this._listStore });
+]]></code>
+ <p>Here we create a basic TreeView widget, that expands both horizontally and vertically to use as much
space as needed. We set it to use the ListStore we created as its "model", or the thing it'll show us stuff
from.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Create the columns for the address book
+ let firstName = new Gtk.TreeViewColumn ({ title: "First Name" });
+ let lastName = new Gtk.TreeViewColumn ({ title: "Last Name" });
+ let phone = new Gtk.TreeViewColumn ({ title: "Phone Number" });
+]]></code>
+ <p>Now we create each of the vertical TreeViewColumns we'll see in the TreeView. The title for each one
goes at the top, as you can see in the screenshot.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Create a cell renderer for when bold text is needed
+ let bold = new Gtk.CellRendererText ({
+ weight: Pango.Weight.BOLD });
+
+ // Create a cell renderer for normal text
+ let normal = new Gtk.CellRendererText ();
+
+ // Pack the cell renderers into the columns
+ firstName.pack_start (bold, true);
+ lastName.pack_start (normal, true);
+ phone.pack_start (normal, true);
+]]></code>
+ <p>Here we create the CellRenderers that we'll use to display the text from our ListStore, and pack them
into the TreeViewColumns. Each CellRendererText is used for all the entries in that column. Our normal
CellRendererText just creates plain text, while our bold one uses heavier-weight text. We put it into the
first name column, and tell the other two to use copies of the normal one. The "true" used as the second
parameter for the <file>pack_start</file> method tells it to expand the cells when possible, instead of
keeping them compact.</p>
+ <note><p><link href="http://www.pygtk.org/docs/pygtk/pango-constants.html";>Here is a list</link> of
other text properties you can use. In order to use these Pango constants, make sure to put the line
<file>const Pango = imports.gi.Pango;</file> at the beginning of your code like we did.</p></note>
+
+ <code mime="application/javascript"><![CDATA[
+ firstName.add_attribute (bold, "text", 0);
+ lastName.add_attribute (normal, "text", 1);
+ phone.add_attribute (normal, "text", 2);
+
+ // Insert the columns into the treeview
+ this._treeView.insert_column (firstName, 0);
+ this._treeView.insert_column (lastName, 1);
+ this._treeView.insert_column (phone, 2);
+]]></code>
+ <p>Now that we've put the CellRenderers into the TreeViewColumns, we use the <file>add_attribute</file>
method to tell each column to pull in text from the model our TreeView is set to use; in this case, the
ListStore with the phonebook.</p>
+ <list>
+ <item><p>The first parameter is which CellRenderer we're going to use to render what we're pulling
in.</p></item>
+ <item><p>The second parameter is what kind of information we're going to pull in. In this case, we're
letting it know that we're rendering text.</p></item>
+ <item><p>The third parameter is which of the ListStore's columns we're pulling that information in
from.</p></item>
+ </list>
+ <p>After we've set that up, we use the TreeView's <file>insert_column</file> method to put our
TreeViewColumns inside it in order. Our TreeView is now complete.</p>
+ <note><p>Normally, you might want to use a loop to initialize your TreeView, but in this example we're
spelling things out step by step for the sake of making it easier to understand.</p></note>
+ </section>
+
+ <section id="ui">
+ <title>Building the rest of the UI</title>
+ <code mime="application/javascript"><![CDATA[
+ // Create the label that shows details for the name you select
+ this._label = new Gtk.Label ({ label: "" });
+
+ // Get which item is selected
+ this.selection = this._treeView.get_selection();
+
+ // When something new is selected, call _on_changed
+ this.selection.connect ('changed', Lang.bind (this, this._onSelectionChanged));
+]]></code>
+ <p>The TreeView's <file>get_selection</file> method returns an object called a TreeSelection. A
TreeSelection is like a TreeIter in that it's basically a cursor that points at a particular row, except that
the one it points to is the one that's visibly highlighted as selected.</p>
+ <p>After we get the TreeSelection that goes with our TreeView, we ask it to tell us when it changes
which row it's pointing to. We do this by connecting its <file>changed</file> signal to the
_onSelectionChanged function we wrote. This function changes the text displayed by the Label we just made.</p>
+
+ <code mime="application/javascript"><![CDATA[
+ // Create a grid to organize everything in
+ this._grid = new Gtk.Grid;
+
+ // Attach the treeview and label to the grid
+ this._grid.attach (this._treeView, 0, 0, 1, 1);
+ this._grid.attach (this._label, 0, 1, 1, 1);
+
+ // Add the grid to the window
+ this._window.add (this._grid);
+
+ // Show the window and all child widgets
+ this._window.show_all();
+ },
+]]></code>
+ <p>After we've gotten that out of the way, we create a <link xref="grid.js">Grid</link> to put
everything in, then add it to our window and tell the window to show itself and its contents.</p>
+ </section>
+
+ <section id="function">
+ <title>Function which handles a changed selection</title>
+
+ <code mime="application/javascript"><![CDATA[
+ _onSelectionChanged: function () {
+
+ // Grab a treeiter pointing to the current selection
+ let [ isSelected, model, iter ] = this.selection.get_selected();
+
+ // Set the label to read off the values stored in the current selection
+ this._label.set_label ("\n" +
+ this._listStore.get_value (iter, 0) + " " +
+ this._listStore.get_value (iter, 1) + " " +
+ this._listStore.get_value (iter, 2) + "\n" +
+ this._listStore.get_value (iter, 3));
+
+ }
+
+});
+]]></code>
+ <p>The line of code with the let statement is a little convoluted, but it's nonetheless the best way to
get a TreeIter pointing to the same row as our TreeSelection. It has to create a couple of other object
references, but <file>iter</file> is the only one we need.</p>
+ <p>After we've done that, we call the Label's <file>set_label</file> function, and use the ListStore's
<file>get_value</file> function a handful of times to fill in the data we want to put in it. Its parameters
are a TreeIter pointing to the row we want to get data from, and the column.</p>
+ <p>Here, we want to get data from all four columns, including the "hidden" one that's not part of the
TreeView. This way, we can use our Label to show strings that are too large to fit in the TreeView, and that
we don't need to see at a glance.</p>
+
+ <code mime="application/javascript"><![CDATA[
+// Run the application
+let app = new TreeViewExample ();
+app.application.run (ARGV);
+]]></code>
+ <p>Finally, we create a new instance of the finished TreeViewExample class, and set the application
running.</p>
+ </section>
+
+ <section id="complete">
+ <title>Complete code sample</title>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/treeview_simple_liststore.js"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="in-depth">
+ <title>In-depth documentation</title>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+ <item><p><link
href="www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.CellRendererText.html">Gtk.CellRendererText</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.ListStore.html";>Gtk.ListStore</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TreeIter.html";>Gtk.TreeIter</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TreeSelection.html";>Gtk.TreeSelection</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TreeView.html";>Gtk.TreeView</link></p></item>
+ <item><p><link
href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TreeViewColumn.html";>Gtk.TreeViewColumn</link></p></item>
+</list>
+ </section>
+</page>
diff --git a/beginners-docs/C/treeview_simple_liststore.py.page
b/beginners-docs/C/treeview_simple_liststore.py.page
new file mode 100644
index 0000000..f06434a
--- /dev/null
+++ b/beginners-docs/C/treeview_simple_liststore.py.page
@@ -0,0 +1,53 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="treeview_simple_liststore.py">
+ <info>
+ <title type="text">Simple TreeView with ListStore (Python)</title>
+ <link type="guide" xref="beginner.py#treeview"/>
+ <link type="seealso" xref="model-view-controller.py"/>
+ <link type="next" xref="treeview_treestore.py"/>
+ <revision version="0.2" date="2012-06-30" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A TreeView displaying a ListStore (simpler example)</desc>
+ </info>
+
+ <title>Simple TreeView with ListStore</title>
+ <media type="image" mime="image/png" src="media/treeview_simple_liststore.png"/>
+ <p>This TreeView displays a simple ListStore with the selection "changed" signal connected.</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/treeview_simple_liststore.py"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="methods">
+ <title>Useful methods for a TreeView widget</title>
+ <p>The TreeView widget is designed around a <em>Model/View/Controller</em> design: the <em>Model</em>
stores the data; the <em>View</em> gets change notifications and displays the content of the model; the
<em>Controller</em>, finally, changes the state of the model and notifies the view of these changes. For more
information, and for a list of useful methods for TreeModel, see <link xref="model-view-controller.py" />.</p>
+ <p>In line 44 the <code>"changed"</code> signal is connected to the callback function
<code>on_changed()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback
function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.</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/GtkTreeView.html";>GtkTreeView</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkTreeModel.html";>GtkTreeModel</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkListStore.html";>GtkListStore</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkCellRendererText.html";>GtkCellRendererText</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkTreeViewColumn.html";>GtkTreeViewColumn</link></p></item>
+ <item><p><link href="http://git.gnome.org/browse/pygobject/tree/gi/overrides/Gtk.py";>pygobject -
Python bindings for GObject Introspection</link></p></item>
+ <item><p><link href="http://developer.gnome.org/pango/stable/pango-Fonts.html";>Fonts</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/treeview_simple_liststore.vala.page
b/beginners-docs/C/treeview_simple_liststore.vala.page
new file mode 100644
index 0000000..a9699a7
--- /dev/null
+++ b/beginners-docs/C/treeview_simple_liststore.vala.page
@@ -0,0 +1,35 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="treeview_simple_liststore.vala">
+ <info>
+ <title type="text">Simple Treeview with ListStore (Vala)</title>
+ <link type="guide" xref="beginner.vala#treeview"/>
+ <link type="seealso" xref="grid.vala"/>
+ <link type="seealso" xref="label.vala"/>
+ <revision version="0.1" date="2012-05-09" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A widget can display any TreeModel implementation (lists and trees)</desc>
+ </info>
+
+ <title>Simple Treeview with ListStore</title>
+ <media type="image" mime="image/png" src="media/treeview_simple_liststore.png"/>
+ <p>This TreeView displays a simple ListStore with the Selection "changed" signal connected.</p>
+
+<code mime="text/x-csharp" style="numbered"><xi:include href="samples/treeview_simple_liststore.vala"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.TreeView.html";>Gtk.TreeView</link></p></item>
+ <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.ListStore.html";>Gtk.ListStore</link></p></item>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.TreeSelection.html";>Gtk.TreeSelection</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/treeview_treestore.py.page b/beginners-docs/C/treeview_treestore.py.page
new file mode 100644
index 0000000..7c2576f
--- /dev/null
+++ b/beginners-docs/C/treeview_treestore.py.page
@@ -0,0 +1,50 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="treeview_treestore.py">
+ <info>
+ <title type="text">TreeView with TreeStore (Python)</title>
+ <link type="guide" xref="beginner.py#treeview"/>
+ <link type="seealso" xref="model-view-controller.py" />
+ <link type="next" xref="model-view-controller.py"/>
+ <revision version="0.1" date="2012-06-30" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A TreeView displaying a TreeStore (simpler example)</desc>
+ </info>
+
+ <title>Simpler TreeView with TreeStore</title>
+ <media type="image" mime="image/png" src="media/treeview_treestore.png"/>
+ <p>This TreeView displays a TreeStore.</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/treeview_treestore.py"
parse="text"><xi:fallback/></xi:include></code>
+ </section>
+
+ <section id="methods">
+ <title>Useful methods for a TreeView widget</title>
+ <p>The TreeView widget is designed around a <em>Model/View/Controller</em> design: the <em>Model</em>
stores the data; the <em>View</em> gets change notifications and displays the content of the model; the
<em>Controller</em>, finally, changes the state of the model and notifies the view of these changes. For more
information and for a list of useful methods for TreeModel see <link xref="model-view-controller.py" />.</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/GtkTreeView.html";>GtkTreeView</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkTreeModel.html";>GtkTreeModel</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkTreeStore.html";>GtkTreeStore</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkCellRendererText.html";>GtkCellRendererText</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkTreeViewColumn.html";>GtkTreeViewColumn</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/vala.page b/beginners-docs/C/vala.page
new file mode 100644
index 0000000..497bcb0
--- /dev/null
+++ b/beginners-docs/C/vala.page
@@ -0,0 +1,32 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:ui="http://projectmallard.org/experimental/ui/";
+ type="guide"
+ id="vala">
+<info>
+ <title type='link'>Vala</title>
+ <link type="guide" xref="index#languages"/>
+ <revision version="3.4" date="2012-04-28" status="stub"/>
+ <credit type="editor">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ </credit>
+ <credit type="editor">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2013</years>
+ </credit>
+</info>
+
+<title>Tutorials, code samples and platform demos in Vala</title>
+
+<links type="section" />
+
+<section id="libraries">
+<title>Introduction to libraries</title>
+</section>
+
+<section id="10minutes">
+<title>10 minutes tutorials</title>
+</section>
+
+</page>
diff --git a/beginners-docs/C/weatherApp.js.page b/beginners-docs/C/weatherApp.js.page
new file mode 100644
index 0000000..709be97
--- /dev/null
+++ b/beginners-docs/C/weatherApp.js.page
@@ -0,0 +1,56 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ type="guide" style="task"
+ id="weatherApp.js">
+ <info>
+ <title type="text">Weather application (JavaScript)</title>
+ <link type="guide" xref="js#examples"/>
+ <revision version="0.1" date="2012-03-09" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Susanna Huhtanen</name>
+ <email>ihmis suski gmail com</email>
+ <years>2012</years>
+ </credit>
+ <credit type="editor">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2013</years>
+ </credit>
+
+ <desc> How to plan an application that uses asynchronous calls. Asynchronous calls will be presented
through a weather application.
+ </desc>
+
+ </info>
+
+ <title>Weather application</title>
+ <synopsis>
+ <p>In this guide well construct a weather application using asynchronous calls. Weather information in
this example is fetched from geonames.org and the application is using the <link href=
"http://en.wikipedia.org/wiki/List_of_airports_by_ICAO_code:_E";>ICAO codes </link> to place your weather
request. To write and run all the code examples yourself, you need an editor to write code in, Terminal and
GNOME 3 or higher installed into your computer. In this guide we we'll go through the following parts:</p>
+
+ <list>
+ <item><p> <link xref="#planningUi">Planning the graphical user interface</link></p></item>
+ <item><p> <link xref="#asynchronous">Asynchronous calls</link></p></item>
+ <item><p> <link xref="#main">The main program file</link></p></item>
+ <item><p> <link xref="#main">Local library GeoNames</link></p></item>
+ <item><p> <link xref="#main">Autotools and Icons</link></p></item>
+ </list>
+ </synopsis>
+
+ <p>After reading this tutorial, you should see this in your screen:</p>
+ <media type="image" mime="image/png" src="media/weatherAppJs.png"/>
+
+ <section id ="planningUi">
+ <title>Planning the graphical user interface</title>
+ <p> Structuring an application for GNOME 3 means you will be using <link
href="http://developer.gnome.org/platform-overview/stable/gtk";>GTK+</link>. The most important thing is to
remember that the main window will only accept one widget. You must plan your structure accordingly (this
example is using Gtk.Grid). A useful method is to draw out the main window and place every widget needed
inside that box. By looking at an image of your future application it is easier to tell what are the
relations between widgets. For example Gtk.Grid places your widgets in relation to other widgets, so after
the first widget is in place, placing widgets can be done in relation to any widget on the grid. </p>
+ </section>
+ <section id ="asynchronous">
+ <title>Asynchronous calls</title>
+ <p> With many programming languages, all operations are run synchronously - you tell the program to do
something, and it will wait until that action completes before proceeding. This is however bad for
+ graphical user interfaces, as then the whole application will be frozen while the program waits for
+ the operation. Going asynchronous (async) helps here. With async calls, your UI won't be blocked with
any requests. Async calls make your application more flexible and better equipped to handle situations when
calls take more time than expected or for some reason get jammed. Async calls can be used for example file
system I/O and for slower calculations in the background. </p>
+ <p> In this example we have to get data from geonames.org. While we do that we want the rest of our
program to continue. If we wouldn't get any information from geonames.org for the lack of internet connection
and this would be a synchronous application we would never get to the point where our main_quit() is
processed correctly and the application would have to killed from Terminal. </p>
+ </section>
+ <section id="main">
+ <title>The different parts of the program</title>
+ </section>
+</page>
diff --git a/beginners-docs/C/weatherAppMain.js.page b/beginners-docs/C/weatherAppMain.js.page
new file mode 100644
index 0000000..2de4858
--- /dev/null
+++ b/beginners-docs/C/weatherAppMain.js.page
@@ -0,0 +1,235 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="weatherAppMain.js">
+ <info>
+ <link type="guide" xref="weatherApp.js#main" group="#first"/>
+ <revision version="0.1" date="2012-03-09" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Susanna Huhtanen</name>
+ <email>ihmis suski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc></desc>
+ </info>
+
+ <title>The main program file</title>
+ <synopsis>
+ <p>In this part of the guide well construct the main program file of the weather application. To write
and run all the code examples yourself, you need an editor to write code in, Terminal and GNOME 3 or higher
installed into your computer. In this part we we'll go through the following parts:</p>
+ <list>
+ <item><p> <link xref="#script">Script for running the application</link> </p></item>
+ <item><p> <link xref="#imports">Libraries to import</link> </p></item>
+ <item><p> <link xref="#mainwindow">Creating the main window for the application</link> </p></item>
+ <item><p> <link xref="#widgets">Adding a grid and all the necessary widgets to it</link></p></item>
+ <item><p> <link xref="#asynccall">Requesting the weather information asynchronously</link></p></item>
+ <item><p> <link xref="#connectingbuttons">Connecting signals to button and entry</link>.</p></item>
+ <item><p> <link xref="#weatherapp.js">weatherapp.js</link></p></item>
+ </list>
+ </synopsis>
+ <section id="script">
+ <title>Script for running the application</title>
+ <code mime="application/javascript" style="numbered"><![CDATA[
+ #!/usr/bin/gjs]]></code>
+ <p> This line tells how to run the script. It needs to be the first line of the code and it needs to be
executable. To get the execution rights go to Terminal and run in right folder: chmod +x scriptname. Or you
can use the graphical filemanager. Just go to the right folder where your code is, right click you code file,
choose properties, click the permissions tab and check the box for allow executing file as a program
+ </p>
+ </section>
+
+ <section id="imports">
+ <title>Libraries to import</title>
+ <code mime="application/javascript" style="numbered"><![CDATA[
+var Gtk = imports.gi.Gtk;
+const WeatherService = imports.geonames;]]></code>
+ <p>In order to have a working program we need to import a GObject Introspection -library to our use. For
working UI, we need Gtk. Gtk is imported in the beginning so we have it in our use everywhere. We also import
our own local JavaScript library geonames to our use here.</p>
+ </section>
+
+ <section id="mainwindow">
+ <title>Creating the main window for the application</title>
+ <code mime="application/javascript" style="numbered"><![CDATA[
+// Initialize the gtk
+Gtk.init(null, 0);
+//create your window, name it and connect the x to quit function. Remember that window is a taken word
+var weatherwindow = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL});
+weatherwindow.title = "Todays weather";
+//Window only accepts one widget and a title. Further structure with Gtk.boxes of similar
+weatherwindow.connect("destroy", function(){Gtk.main_quit()});
+
+weatherwindow.show_all();
+//and run it
+Gtk.main();]]></code>
+ </section>
+ <section id="widgets">
+ <title>Adding a grid and all the necessary widgets to it</title>
+ <code mime="application/javascript" style="numbered"><![CDATA[
+var grid = new Gtk.Grid();
+weatherwindow.add(grid);
+
+//We initialize the icon here, but deside the file later in geonames.js.
+var weatherIcon = new Gtk.Image();
+
+//Set some labels to your window
+var label1 = new Gtk.Label({label: ""});
+var label2 = new Gtk.Label({label: "Looking in the sky..."});
+var label3 = new Gtk.Label({label: ""});
+
+var entry = new Gtk.Entry();
+entry.set_width_chars(4);
+entry.set_max_length(4);
+var label4 = new Gtk.Label({label: "Enter ICAO station for weather: "});
+var button1 = new Gtk.Button({label: "search!"});
+
+grid.attach(label4, 2, 1, 1, 1);
+grid.attach_next_to(label1,label4,3,1,1);
+grid.attach_next_to(label2,label1,3,1,1);
+grid.attach_next_to(label3,label2,3,1,1);
+grid.attach_next_to(entry,label4,1,1,1);
+grid.attach_next_to(button1,entry,1,1,1);
+grid.attach_next_to(weatherIcon,label2,1,1,1)
+]]></code>
+ <p>In this section we create the grid we are going to use for positioning the widgets. All the buttons,
labels and entrys are initialized and placed on the grid. As seen from the placing of the different widgets,
they don't need to be related only to one widget. At this point some of the labels don't have any content.
The content for those widgets is applied later. If you run the application at this stage, you have the UI
ready, but the widgets are not connected to anything. For this we need to first build the weather searching
local library, and then get the information we need asynchronously. When we have our local library ready we
can connect it to the necessary widgets.</p>
+ </section>
+
+ <section id="asynccall">
+ <title>Requesting the weather information asynchronously</title>
+ <code mime="application/javascript" style="numbered"><![CDATA[
+function getWeatherForStation() {
+ var station = entry.get_text();
+
+ var GeoNames = new WeatherService.GeoNames(station); //"EFHF";
+
+ GeoNames.getWeather(function(error, weather) {
+ //this here works bit like signals. This code will be run when we have weather.
+ if (error) {
+ label2.set_text("Suggested ICAO station does not exist Try EFHF");
+ return; }
+ weatherIcon.file = GeoNames.getIcon(weather);
+
+ label1.set_text("Temperature is " + weather.weatherObservation.temperature + " degrees.");
+ if (weather.weatherObservation.weatherCondition !== "n/a"){
+ label2.set_text("Looks like there is " + weather.weatherObservation.weatherCondition + " in the sky.");
+ }
+ else {
+ label2.set_text("Looks like there is " + weather.weatherObservation.clouds + " in the sky.");
+ }
+ label3.set_text("Windspeed is " + weather.weatherObservation.windSpeed + " m/s")
+ // ...
+ });
+}
+]]></code>
+ <p>This function is dedicated for calling for the weather information and updating labels and icons
accordingly. In the beginning of the function we get the user input for the search. So here for the first
time we use our own library and assign it to variable GeoNames. While assigning WeatherService we give it the
station. The firs thing we do with GeoNames is to request weather. Everything after
GeoNames.getWeather(function(error, weather) happens only if we either get an error message or weather
information. If either doesn't come, the rest of the program works as normal, so main_Quit works.</p>
+ </section>
+
+ <section id="connectingbuttons">
+ <title>Connecting signals to button and entry.</title>
+ <code mime="application/javascript" style="numbered"><![CDATA[
+entry.connect("key_press_event", function(widget, event) {
+ if (entry.get_text().length === 4) {
+ // Enough is enough
+ getWeatherForStation();
+ }
+ return false;
+});
+
+button1.connect("clicked", function(){
+ getWeatherForStation();
+});]]></code>
+ <p>And finally we have the connections that make the whole application run as it should. We connect both
the entry and the button to do the same thing, getting the weather. So it doesn't matter weather you press
enter of click the search button.</p>
+ </section>
+
+ <section id ="weatherapp.js">
+ <title>Weatherapp.js</title>
+ <p> Weatherapp.js file looks like this:</p>
+ <code mime="application/javascript" style="numbered"><![CDATA[
+#!/usr/bin/gjs
+//The previous line is a hash bang tells how to run the script.
+// Note that the script has to be executable (run in terminal in the right folder: chmod +x scriptname)
+
+var Gtk = imports.gi.Gtk;
+
+const WeatherService = imports.geonames;
+//Bring your own library from same folder (as set in GJS_PATH). If using autotools .desktop will take care
of this
+
+// Initialize the gtk
+Gtk.init(null, 0);
+//create your window, name it and connect the x to quit function. Remember that window is a taken word
+var weatherwindow = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL});
+weatherwindow.title = "Todays weather";
+//Window only accepts one widget and a title. Further structure with Gtk.boxes of similar
+weatherwindow.connect("destroy", function(){Gtk.main_quit()});
+//We initialize the icon here, but deside the file later in geonames.js.
+
+var weatherIcon = new Gtk.Image();
+
+//Set some labels to your window
+var label1 = new Gtk.Label({label: ""});
+var label2 = new Gtk.Label({label: "Looking in the sky..."});
+var label3 = new Gtk.Label({label: ""});
+
+var grid = new Gtk.Grid();
+weatherwindow.add(grid);
+
+var entry = new Gtk.Entry();
+entry.set_width_chars(4);
+entry.set_max_length(4);
+var label4 = new Gtk.Label({label: "Enter ICAO station for weather: "});
+var button1 = new Gtk.Button({label: "search!"});
+
+//some weather
+
+entry.connect("key_press_event", function(widget, event) {
+ // FIXME: Get weather on enter (key 13)
+ if (entry.get_text().length === 4) {
+ // Enough is enough
+ getWeatherForStation();
+ }
+ return false;
+});
+
+button1.connect("clicked", function(){
+ getWeatherForStation();
+});
+
+function getWeatherForStation() {
+ var station = entry.get_text();
+
+ var GeoNames = new WeatherService.GeoNames(station); //"EFHF";
+
+ GeoNames.getWeather(function(error, weather) {
+ //this here works bit like signals. This code will be run when we have weather.
+ if (error) {
+ label2.set_text("Suggested ICAO station does not exist Try EFHF");
+ return; }
+ weatherIcon.file = GeoNames.getIcon(weather);
+
+ label1.set_text("Temperature is " + weather.weatherObservation.temperature + " degrees.");
+ if (weather.weatherObservation.weatherCondition !== "n/a"){
+ label2.set_text("Looks like there is " + weather.weatherObservation.weatherCondition + " in the sky.");
+ }
+ else {
+ label2.set_text("Looks like there is " + weather.weatherObservation.clouds + " in the sky.");
+ }
+ label3.set_text("Windspeed is " + weather.weatherObservation.windSpeed + " m/s")
+ // ...
+ });
+}
+
+grid.attach(label4, 2, 1, 1, 1);
+grid.attach_next_to(label1,label4,3,1,1);
+grid.attach_next_to(label2,label1,3,1,1);
+grid.attach_next_to(label3,label2,3,1,1);
+grid.attach_next_to(entry,label4,1,1,1);
+grid.attach_next_to(button1,entry,1,1,1);
+grid.attach_next_to(weatherIcon,label2,1,1,1)
+weatherwindow.show_all();
+//and run it
+Gtk.main();
+]]></code>
+ <p>Running until you have all the autotools files ready. :</p>
+
+ <screen> <output style="prompt">$ </output><input> GJS_PATH=`pwd` gjs weatherapp.js</input></screen>
+ <p> Use this command on terminal while developing your modules. When calling your program in this manner
it knows where to find your custom JSlibraries, in this case geonames.js.
+ </p>
+
+ </section>
+</page>
diff --git a/beginners-docs/C/weatherAutotools.js.page b/beginners-docs/C/weatherAutotools.js.page
new file mode 100644
index 0000000..932d243
--- /dev/null
+++ b/beginners-docs/C/weatherAutotools.js.page
@@ -0,0 +1,151 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="weatherAutotools.js">
+ <info>
+ <link type="guide" xref="weatherApp.js#main" group="#last"/>
+ <revision version="0.1" date="2012-03-09" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Susanna Huhtanen</name>
+ <email>ihmis suski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc></desc>
+ </info>
+
+ <title>Autotools and Icons</title>
+ <synopsis>
+ <p>In this part of the guide well construct the autotools and custom icons needed for weather
application to be a seamless part of your desktop. To write and run all the code examples yourself, you need
an editor to write code in, Terminal and GNOME 3 or higher installed into your computer. In this guide we
we'll go through the following parts:</p>
+
+ <list>
+ <item><p><link xref="#autotools"> Autotools</link></p></item>
+ <item><p><link xref="#icons">Custom icons for your application</link></p></item>
+ </list>
+ </synopsis>
+
+
+
+ <section id ="autotools">
+ <title>Autotools and necessary files</title>
+ <p>Having more than one file in your folder makes using autotools a bit tricky. You need the .desktop
file, autogen.sh, Makefile.am, configure.ac and as a new file: myapp.sh.in file. Hacking the autotools file
is a complicated field. More information can be found in many different sources, <link
href="http://en.wikipedia.org/wiki/GNU_build_system";>the wikipedia article</link> provides a good overwiev on
the subject.
+ </p>
+ <list>
+ <item><p>weatherapp.desktop</p></item>
+ <item><p>weatherapp.sh.in</p></item>
+ <item><p>Makefile.am</p></item>
+ <item><p>configure.ac</p></item>
+ <item><p>autogen.sh</p></item>
+ </list>
+ <p>weatherapp.desktop</p>
+ <code mime="text/.desktop" style="numbered"><![CDATA[
+[Desktop Entry]
+Version=1.0
+Encoding=UTF-8
+Name=Weather app
+Comment=Weather showing application
+Exec=weatherapp.sh
+Icon=application-default-icon
+Terminal=false
+Type=Application
+StartupNotify=true
+Categories=GNOME;GTK;Utility;]]></code>
+ <p>The thing to notice in this file is that the Exec line will make this .desktop file work only after
running all the other makefiles. Weatherapp.sh is a small shell script created with the weatherapp.sh.in.</p>
+
+ <p>weatherapp.sh.in</p>
+ <code mime="text/sh.in" style="numbered"><![CDATA[
+#!/bin/sh
+export GJS_PATH= bindir@
+gjs @bindir@/weatherapp.js]]></code>
+ <p>This file is a template to the file Makefile will do to be run from .desktop.</p>
+
+ <p>Makefile.am</p>
+ <code mime="text/am" style="numbered"><![CDATA[
+# The actual runnable program is set to the SCRIPTS primitive. Prefix bin_ tells where to copy this
+bin_SCRIPTS = weatherapp.js geonames.js weatherapp.sh
+# List of files to be distributed
+EXTRA_DIST= \
+ $(bin_SCRIPTS) \
+ $(private_icons) \
+ $(NULL)
+
+CLEANFILES =
+
+# The desktop files
+desktopdir = $(datadir)/applications
+desktop_DATA =weatherapp.desktop
+
+# convenience command for doing Makefile variable substitutions in non-Makefile
+# files (scripts, service files, etc.)
+do_subst = sed -e 's|@abs_top_srcdir[ ]|$(abs_top_srcdir)|g' \
+ -e 's|@abs_top_builddir[ ]|$(abs_top_builddir)|g' \
+ -e 's|@localedir[ ]|$(localedir)|g' \
+ -e 's|@bindir[ ]|$(bindir)|g' \
+ -e 's|@libexecdir[ ]|$(libexecdir)|g' \
+ -e 's|@pkglibdir[ ]|$(pkglibdir)|g' \
+ -e 's|@pkgdatadir[ ]|$(pkgdatadir)|g' \
+ -e 's|@have_libnotify[ ]|$(HAVE_LIBNOTIFY)|g' \
+ -e 's|@have_libsoup[ ]|$(HAVE_LIBSOUP)|g' \
+ -e 's|@have_cheese[ ]|$(HAVE_CHEESE)|g'
+
+weatherapp.sh: weatherapp.sh.in
+ $(AM_V_GEN) $(do_subst) $< > $@
+ chmod +x $@
+
+CLEANFILES += weatherapp.sh
+EXTRA_DIST += weatherapp.sh.in
+
+#the application icon
+appicondir=$(datadir)/icons/hicolor/scalable/apps
+appicon_DATA=weather-icon.svg
+
+#icons in the application
+NULL =
+
+private_icons = \
+ weather-clear.svg \
+ weather-few-clouds.svg \
+ weather-fog.svg \
+ weather-icon.svg \
+ weather-overcast.svg \
+ weather-showers.svg \
+ weather-showers-scattered.svg \
+ weather-snow.svg \
+ $(NULL)
+
+install-icons:
+ for icon in $(private_icons); do \
+ mkdir -p $(DESTDIR)$(pkgdatadir)/icons/; \
+ $(INSTALL_DATA) $(srcdir)/$$icon $(DESTDIR)$(pkgdatadir)/icons/; \
+ done
+
+install-data-local: install-icons]]></code>
+ <p>This needs a bit more explaining. Compared to the HelloWorld Makefile.am this has changed quite a
bit. Lets go through all the new blocks:</p>
+ <p>bin_scripts are the files that are needed to run your application. In thin case they are the first
two files are the program itself and the third is the script that launches the application.</p>
+ <p>EXTRA_DIST are the files that are to be distributed</p>
+ <p>do_subst block is bits and pieces that need to be where they are</p>
+ <p>after the comment #icons in the application there are all the icons that are used by the program. For
them to be useful you need to install the icons in correct places and that is done byt the install-icons:
bit</p>
+
+ <p>configure.ac</p>
+ <code mime="text/ac" style="numbered"><![CDATA[
+dnl This file is processed by autoconf to create a configure script
+AC_INIT([Weather App], 1.0)
+AM_INIT_AUTOMAKE([1.10 no-define foreign])
+AC_CONFIG_FILES(Makefile)
+AC_OUTPUT]]></code>
+ <p>autohen.sh</p>
+ <code mime="text/sh" style="numbered"><![CDATA[
+#!/bin/sh
+# This will run autoconf, automake, etc. for us
+autoreconf --force --install]]></code>
+ </section>
+ <section id="icons">
+ <title>Custom icons for your application</title>
+ <p>When thinking about custom icons a good rule of thumb is: do you expect to see that icon used elsewhere
or is it private to your app? If the first (e.g. the icons in the desktop file that are shown by the shell)
then you need /usr/share/hicolor, otherwise (e.g. the weather icons of your app)
/usr/share/$application/bla/bla</p>
+ <p>Using autotools you have to make some changes to your .desktop and Makefile.am files. In the desktop
file you change the Icon's name Icon=weather-icon. In the Makefile.am file you add these two lines to the
end of your application #the application icon</p>
+ <p>appicondir=$(datadir)/icons/hicolor/scalable/apps</p>
+ <p>appicon_DATA=weather-icon.svg</p>
+ </section>
+
+</page>
diff --git a/beginners-docs/C/weatherGeonames.js.page b/beginners-docs/C/weatherGeonames.js.page
new file mode 100644
index 0000000..64b296d
--- /dev/null
+++ b/beginners-docs/C/weatherGeonames.js.page
@@ -0,0 +1,154 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="weatherGeonames.js">
+ <info>
+ <link type="guide" xref="weatherApp.js#main"/>
+ <revision version="0.1" date="2012-03-09" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Susanna Huhtanen</name>
+ <email>ihmis suski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc></desc>
+ </info>
+
+ <title>Local library geoNames</title>
+ <synopsis>
+ <p>In this part of the guide we'll construct the local library geoNames using asynchronous calls.
Weather information in this example is fetched from geonames.org and the application is using the <link href=
"http://en.wikipedia.org/wiki/List_of_airports_by_ICAO_code:_E";>ICAO codes </link> to place your weather
request. To write and run all the code examples yourself, you need an editor to write code in, Terminal and
GNOME 3 or higher installed into your computer. In this guide we'll go through the following parts:</p>
+
+ <list>
+ <item><p> <link xref="#geonamesimports">Local library for getting the weather</link></p></item>
+ <item><p> <link xref="#geonamesfunction">Creating function geoNames</link></p></item>
+ <item><p> <link xref="#geonamesmethods">Methods for geoNames</link></p></item>
+ <item><p> <link xref="#geonames.js">geonames.js </link></p></item>
+ </list>
+ </synopsis>
+
+ <section id="geonamesimports">
+ <title>Local library for getting the weather</title>
+ <p>For this we need a new file that will be our local library.</p>
+ <code mime="application/javascript" style="numbered"><![CDATA[
+const Soup = imports.gi.Soup;
+const _httpSession = new Soup.SessionAsync();
+Soup.Session.prototype.add_feature.call(_httpSession, new Soup.ProxyResolverDefault());
+]]></code>
+ <p>In the first lines we'll import and initialize the libraries we need to use in this local library. Soup
handles all the requests we have to make with http.</p>
+ </section>
+
+ <section id="geonamesfunction">
+ <title>Creating function GeoNames</title>
+ <code mime="application/javascript" style="numbered"><![CDATA[
+function GeoNames(station) {
+ this.station = station;
+}
+
+GeoNames.prototype = {
+
+}
+]]></code>
+ <p>Here we create the function GeoNames that will handle getting weather for us. JavaScript allows us to
create functions that have little inside at first and later expand them. This will be done inside the
GeoNames.prototype curly braces{}</p>
+ </section>
+
+ <section id="geonamesmethods">
+ <title>Methods for GeoNames</title>
+ <code mime="application/javascript" style="numbered"><![CDATA[
+getWeather: function(callback) {
+ var request = Soup.Message.new('GET', 'http://api.geonames.org/weatherIcaoJSON?ICAO=' + this.station +
'&username=demo');
+ _httpSession.queue_message(request, function(_httpSession, message) {
+ if (message.status_code !== 200) {
+ callback(message.status_code, null);
+ return;
+ }
+ var weatherJSON = request.response_body.data;
+ var weather = JSON.parse(weatherJSON);
+ callback(null, weather);
+ });
+},
+
+getIcon: function(weather){
+ switch (weather.weatherObservation.weatherCondition){
+ case "drizzle":
+ case "light showers rain":
+ case "light rain":
+ return "weather-showers-scattered.svg";
+ case "rain":
+ return "weather-showers.svg";
+ case "light snow":
+ case "snow grains":
+ return "weather-snow.svg";
+ }
+ switch (weather.weatherObservation.clouds){
+ case "few clouds":
+ case "scattered clouds":
+ return "weather-few-clouds.svg";
+ case "clear sky":
+ return "weather-clear.svg"
+ case "broken clouds":
+ case "overcast":
+ return "weather-overcast.svg";
+ }
+ return "weather-fog.svg";
+}
+]]></code>
+ <p>The first method for GeoNames is getWeather and the second getIcon. In getWeather we make a http
request with soup, handle errors and then parse the information from the request to form we can use it. In
getIcon we simply compare the results we got from getWeather to the switch we have in order to get the icon
matching current weather. Now that we have our local library ready, it's time to make use of it.</p>
+ </section>
+
+
+ <section id ="geonames.js">
+ <title>geonames.js</title>
+ <p>Here is the entire code for our local library. The main program file calls this asynchronously.</p>
+ <code mime="application/javascript" style="numbered"><![CDATA[
+const Soup = imports.gi.Soup;
+const _httpSession = new Soup.SessionAsync();
+Soup.Session.prototype.add_feature.call(_httpSession, new Soup.ProxyResolverDefault());
+
+function GeoNames(station) {
+ this.station = station;
+}
+
+GeoNames.prototype = {
+ getWeather: function(callback) {
+ var request = Soup.Message.new('GET', 'http://api.geonames.org/weatherIcaoJSON?ICAO=' + this.station +
'&username=demo');
+ _httpSession.queue_message(request, function(_httpSession, message) {
+ if (message.status_code !== 200) {
+ callback(message.status_code, null);
+ return;
+ }
+ var weatherJSON = request.response_body.data;
+ var weather = JSON.parse(weatherJSON);
+ callback(null, weather);
+ });
+ },
+
+ getIcon: function(weather){
+ switch (weather.weatherObservation.weatherCondition){
+ case "drizzle":
+ case "light showers rain":
+ case "light rain":
+ return "weather-showers-scattered.svg";
+ case "rain":
+ return "weather-showers.svg";
+ case "light snow":
+ case "snow grains":
+ return "weather-snow.svg";
+ }
+ switch (weather.weatherObservation.clouds){
+ case "few clouds":
+ case "scattered clouds":
+ return "weather-few-clouds.svg";
+ case "clear sky":
+ return "weather-clear.svg"
+ case "broken clouds":
+ case "overcast":
+ return "weather-overcast.svg";
+ }
+ return "weather-fog.svg";
+ }
+}
+} ]]></code>
+ </section>
+
+</page>
diff --git a/beginners-docs/C/widget.c.page b/beginners-docs/C/widget.c.page
new file mode 100644
index 0000000..cb86319
--- /dev/null
+++ b/beginners-docs/C/widget.c.page
@@ -0,0 +1,31 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="widget.c">
+ <info>
+ <title type="text">Generic widget (C)</title>
+ <link type="guide" xref="beginner.c#samples"/>
+ <revision version="0.1" date="2012-04-07" status="stub"/>
+
+ <credit type="author copyright">
+ <name></name>
+ <email></email>
+ <years></years>
+ </credit>
+
+ <desc>General description of widget</desc>
+ </info>
+
+ <title>Generic widget</title>
+ <media type="image" mime="image/png" src="media/widget.png"/>
+ <p>More specific description of this particular example.</p>
+
+<code mime="text/x-csrc" style="numbered"><xi:include href="samples/widget.c"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="">thing1</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/widget.js.page b/beginners-docs/C/widget.js.page
new file mode 100644
index 0000000..38357b8
--- /dev/null
+++ b/beginners-docs/C/widget.js.page
@@ -0,0 +1,30 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="widget.js">
+ <info>
+ <link type="guide" xref="beginner.js#samples"/>
+ <revision version="0.1" date="2012-04-07" status="stub"/>
+
+ <credit type="author copyright">
+ <name></name>
+ <email></email>
+ <years></years>
+ </credit>
+
+ <desc>General description of widget</desc>
+ </info>
+
+ <title>Generic widget</title>
+ <media type="image" mime="image/png" src="media/widget.png"/>
+ <p>More specific description of this particular example.</p>
+
+<code mime="application/javascript" style="numbered"><xi:include href="samples/widget.js"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="">thing1</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/widget.py.page b/beginners-docs/C/widget.py.page
new file mode 100644
index 0000000..342d2a0
--- /dev/null
+++ b/beginners-docs/C/widget.py.page
@@ -0,0 +1,31 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="widget.py">
+ <info>
+ <title type="text">Generic widget (Python)</title>
+ <link type="guide" xref="beginner.py#samples"/>
+ <revision version="0.1" date="2012-04-07" status="stub"/>
+
+ <credit type="author copyright">
+ <name></name>
+ <email></email>
+ <years></years>
+ </credit>
+
+ <desc>General description of widget</desc>
+ </info>
+
+ <title>Generic widget</title>
+ <media type="image" mime="image/png" src="media/widget.png"/>
+ <p>More specific description of this particular example.</p>
+
+<code mime="text/x-python" style="numbered"><xi:include href="samples/widget.py"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="">thing1</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/widget.vala.page b/beginners-docs/C/widget.vala.page
new file mode 100644
index 0000000..39f1438
--- /dev/null
+++ b/beginners-docs/C/widget.vala.page
@@ -0,0 +1,30 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="widget.vala">
+ <info>
+ <link type="guide" xref="beginner.vala#samples"/>
+ <revision version="0.1" date="2012-04-07" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>General description of widget</desc>
+ </info>
+
+ <title>Generic widget</title>
+ <media type="image" mime="image/png" src="media/widget.png"/>
+ <p>More specific description of this particular example.</p>
+
+<code mime="text/x-csharp" style="numbered"><xi:include href="samples/widget.vala"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="">thing1</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/widget_drawing.py.page b/beginners-docs/C/widget_drawing.py.page
new file mode 100644
index 0000000..99250d0
--- /dev/null
+++ b/beginners-docs/C/widget_drawing.py.page
@@ -0,0 +1,42 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="widget_drawing.py">
+ <info>
+ <title type="text">Widget (Python)</title>
+ <link type="guide" xref="beginner.py#misc"/>
+ <revision version="0.1" date="2013-02-24" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2013</years>
+ </credit>
+
+ <desc>A widget that uses the Cairo library to draw</desc>
+ </info>
+
+ <title>Widget</title>
+ <media type="image" mime="image/png" src="media/widget_drawing.png"/>
+ <p>Enter an angle, visualize it.</p>
+
+ <links type="section" />
+
+ <section id="code">
+ <title>Code used to generate this example</title>
+
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/widget_drawing.py"
parse="text"><xi:fallback/></xi:include></code>
+
+ </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/GtkWidget.html";>GtkWidget</link></p></item>
+ <item><p><link
href="http://developer.gnome.org/gtk3/unstable/GtkDrawingArea.html";>GtkDrawingArea</link></p></item>
+ <item><p><link href="http://www.tortall.net/mu/wiki/CairoTutorial";>The Cairo Tutorial for Python
Programmers</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/window.c.page b/beginners-docs/C/window.c.page
new file mode 100644
index 0000000..09e3421
--- /dev/null
+++ b/beginners-docs/C/window.c.page
@@ -0,0 +1,36 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="window.c">
+ <info>
+ <title type="text">Window (C)</title>
+ <link type="guide" xref="beginner.c#windows"/>
+ <revision version="0.1" date="2012-04-28" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A toplevel window which can contain other widgets</desc>
+ </info>
+
+ <title>Window</title>
+<media type="image" mime="image/png" src="media/window.png"/>
+
+ <p>A minimal GtkApplication. Use <link xref="GtkApplicationWindow.c">Application Window</link> if you
need GMenu support.</p>
+
+
+
+ <code mime="text/x-csrc" style="numbered">
+<xi:include href="samples/window.c" parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://developer.gnome.org/gtk3/3.4/GtkApplication.html";>GtkApplication</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/3.4/GtkWindow.html";>GtkWindow</link></p></item>
+</list>
+</page>
diff --git a/beginners-docs/C/window.js.page b/beginners-docs/C/window.js.page
new file mode 100644
index 0000000..6b83fb9
--- /dev/null
+++ b/beginners-docs/C/window.js.page
@@ -0,0 +1,42 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="window.js">
+ <info>
+ <title type="text">Window (JavaScript)</title>
+ <link type="guide" xref="beginner.js#windows"/>
+ <revision version="0.1" date="2012-04-14" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Taryn Fox</name>
+ <email>jewelfox fursona net</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A basic window which can contain other widgets</desc>
+ </info>
+
+ <title>Window</title>
+<table>
+ <tr>
+ <td>
+ <media type="image" mime="image/png" src="media/window.png"/>
+ <p>A minimal GtkApplication</p>
+ </td>
+ <td>
+ <p>Use <link xref="GtkApplicationWindow.js">ApplicationWindow</link> if you need GMenu support.</p>
+ </td>
+ </tr>
+</table>
+ <code mime="application/javascript" style="numbered">
+<xi:include href="samples/window.js" parse="text"><xi:fallback/></xi:include></code>
+<p>
+In this example we used the following:
+</p>
+<list>
+<item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link></p></item>
+<item><p><link
href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Window.html";>Gtk.Window</link></p></item>
+</list>
+
+</page>
diff --git a/beginners-docs/C/window.py.page b/beginners-docs/C/window.py.page
new file mode 100644
index 0000000..6448dc8
--- /dev/null
+++ b/beginners-docs/C/window.py.page
@@ -0,0 +1,75 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="topic"
+ id="window.py">
+
+ <info>
+ <title type="text">Window (Python)</title>
+ <link type="next" xref="GtkApplicationWindow.py"/>
+ <link type="seealso" xref="properties.py"/>
+ <revision version="0.3" date="2013-03-03" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+ <credit type="author copyright">
+ <name>Marta Maria Casetti</name>
+ <email>mmcasetti gmail com</email>
+ <years>2012, 2013</years>
+ </credit>
+
+ <desc>A window which can contain other widgets</desc>
+ </info>
+
+ <title>Window</title>
+
+ <synopsis><p>We start from the most basic widget: a window.</p></synopsis>
+
+ <links type="section"/>
+
+ <section id="example">
+ <title>An example</title>
+
+ <p>Here is an example of what you can do to construct a window.</p>
+
+ <code mime="text/x-python" style="numbered"><xi:include href="samples/window.py"
parse="text"><xi:fallback/></xi:include></code>
+
+ <p>If you run this code, a window like the one below should appear in the
+ middle of your screen.</p>
+
+ <media type="image" mime="image/png" src="media/window.png"/>
+
+ </section>
+
+ <section id="in-depth">
+ <title>A more in-depth look</title>
+
+ <p>In this first example, we create a window with a title and a size, in a
+ given position. The creation is given by the constructor
+ <code>__init__(self)</code>; the properties such as title, size and position
+ are given by the methods in lines 6–13.</p>
+
+ <p>Do not worry too much of what happens in lines 15–20: we will see it
+ in <link xref="signals-callbacks.py"/>.</p>
+
+ </section>
+
+ <section id="exercises">
+ <title>Exercises</title>
+
+ <p>Guess what would happen by changing or removing something in lines
+ 6–13, then verify your guess. </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/GtkWindow.html";>GtkWindow</link></p></item>
+ </list>
+ </section>
+</page>
diff --git a/beginners-docs/C/window.vala.page b/beginners-docs/C/window.vala.page
new file mode 100644
index 0000000..91b132a
--- /dev/null
+++ b/beginners-docs/C/window.vala.page
@@ -0,0 +1,48 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
+ type="guide" style="task"
+ id="window.vala">
+ <info>
+ <title type="text">Window (Vala)</title>
+ <link type="guide" xref="beginner.vala#windows"/>
+ <revision version="0.1" date="2012-04-07" status="draft"/>
+
+ <credit type="author copyright">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A toplevel window which can contain other widgets</desc>
+ </info>
+
+ <title>Window</title>
+<table>
+ <tr>
+ <td>
+ <media type="image" mime="image/png" src="media/window.png"/>
+ <p>The simplest Gtk.Application</p>
+ </td>
+ <td>
+ <p>Use <link xref="GtkApplicationWindow.vala">Application Window</link> if you need GMenu support.</p>
+ </td>
+ </tr>
+</table>
+<code mime="text/x-csharp" style="numbered"><xi:include href="samples/window.vala"
parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.Application.html";>Gtk.Application</link></p></item>
+ <item><p>The widget <link
href="http://www.valadoc.org/gtk+-3.0/Gtk.Window.html";>Gtk.Window</link></p></item>
+
+ <item><p>The enum <link
href="http://www.valadoc.org/gtk+-3.0/Gtk.WindowPosition.html";>Gtk.WindowPosition</link></p></item>
+
+ <item><p>The method <link
href="http://www.valadoc.org/gtk+-3.0/Gtk.Window.set_default_size.html";>set_default_size</link></p></item>
+
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.Container.border_width.html";>border_width</link></p></item>
+
+ <item><p><link
href="http://www.valadoc.org/gtk+-3.0/Gtk.Window.window_position.html";>window_position</link></p></item>
+</list>
+</page>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
![https://live.gnome.org/TarynFox?action=AttachFile&do=get&target=gnome-image.png"](https://live.gnome.org/TarynFox?action=AttachFile&do=get&target=gnome-image.png"){kind=link}
![http://en.wikipedia.org/wiki/File:Fuzzy_Freddy.jpg"](http://en.wikipedia.org/wiki/File:Fuzzy_Freddy.jpg"){kind=link}
![http://en.wikipedia.org/wiki/File:Pygoscelis_papua_-Nagasaki_Penguin_Aquarium_-swimming_underwater-8a.jpg"](http://en.wikipedia.org/wiki/File:Pygoscelis_papua_-Nagasaki_Penguin_Aquarium_-swimming_underwater-8a.jpg"){kind=link}
![http://commons.wikimedia.org/wiki/File:Mute_Swan-Mindaugas_Urbonas.jpg"](http://commons.wikimedia.org/wiki/File:Mute_Swan-Mindaugas_Urbonas.jpg"){kind=link}
