[gnome-devel-docs] Majot reorg of platform overview, many stub topics, moved dev demos into directory, renamed many fil
- From: Phil Bull <philbull src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-devel-docs] Majot reorg of platform overview, many stub topics, moved dev demos into directory, renamed many fil
- Date: Wed, 22 Feb 2012 08:30:11 +0000 (UTC)
commit c5e43559c0d79f01764a720c9c99b733fbb0e17a
Author: Phil Bull <philbull gmail com>
Date: Tue Feb 21 10:07:20 2012 +0000
Majot reorg of platform overview, many stub topics, moved dev demos into directory, renamed many files
platform-overview/C/atk.page | 49 ---
platform-overview/C/audio-player/audio-player.vala | 92 +++++
platform-overview/C/cairo.page | 39 --
platform-overview/C/canberra.page | 22 -
platform-overview/C/clutter.page | 44 ---
platform-overview/C/concepts-boxmodel.page | 26 ++
platform-overview/C/concepts-deployment.page | 26 ++
platform-overview/C/concepts-gobject.page | 24 ++
platform-overview/C/concepts-signals.page | 22 +
platform-overview/C/d-bus.page | 51 ---
platform-overview/C/demo-audio-player.vala.page | 19 +
platform-overview/C/demo-guitar-tuner.c.page | 278 ++++++++++++++
platform-overview/C/demo-guitar-tuner.cpp.page | 286 ++++++++++++++
platform-overview/C/demo-guitar-tuner.py.page | 249 ++++++++++++
platform-overview/C/demo-guitar-tuner.vala.page | 282 ++++++++++++++
platform-overview/C/demo-image-viewer.c.page | 243 ++++++++++++
platform-overview/C/demo-image-viewer.cpp.page | 235 ++++++++++++
platform-overview/C/demo-image-viewer.js.page | 332 ++++++++++++++++
platform-overview/C/demo-image-viewer.py.page | 246 ++++++++++++
platform-overview/C/demo-image-viewer.vala.page | 305 +++++++++++++++
platform-overview/C/demo-magic-mirror.vala.page | 168 ++++++++
platform-overview/C/demo-message-board.c.page | 401 ++++++++++++++++++++
platform-overview/C/demo-photo-wall.c.page | 381 +++++++++++++++++++
platform-overview/C/demo-record-collection.js.page | 292 ++++++++++++++
platform-overview/C/demos.page | 58 +++
platform-overview/C/dev-build.page | 45 +++
platform-overview/C/dev-coding.page | 26 ++
platform-overview/C/dev-help.page | 34 ++
platform-overview/C/dev-translate.page | 34 ++
platform-overview/C/eds.page | 36 --
platform-overview/C/equation.png | Bin 0 -> 17579 bytes
platform-overview/C/gda.page | 20 -
platform-overview/C/gdk.page | 43 --
platform-overview/C/getting-ready.page | 73 ++++
platform-overview/C/gio-network.page | 25 --
platform-overview/C/gio.page | 33 --
platform-overview/C/glib.page.stub | 10 -
platform-overview/C/gobject.page.stub | 11 -
platform-overview/C/gsettings.page.stub | 10 -
platform-overview/C/gstreamer.page | 54 ---
platform-overview/C/gtk.page | 47 ---
platform-overview/C/guitar-tuner/guitar-tuner.c | 99 +++++
platform-overview/C/guitar-tuner/guitar-tuner.cc | 110 ++++++
platform-overview/C/guitar-tuner/guitar-tuner.py | 65 ++++
platform-overview/C/guitar-tuner/guitar-tuner.vala | 102 +++++
platform-overview/C/help.page | 31 --
platform-overview/C/image-viewer/firefox_test.jpg | Bin 0 -> 20774 bytes
platform-overview/C/image-viewer/gtk_test.png | Bin 0 -> 29313 bytes
platform-overview/C/image-viewer/image-viewer.c | 95 +++++
platform-overview/C/image-viewer/image-viewer.cc | 67 ++++
platform-overview/C/image-viewer/image-viewer.js | 50 +++
platform-overview/C/image-viewer/image-viewer.py | 51 +++
platform-overview/C/image-viewer/image-viewer.vala | 62 +++
platform-overview/C/index.page | 72 ++--
platform-overview/C/keyring.page | 59 ---
.../C/magic-mirror/magic-mirror-advanced.vala | 110 ++++++
platform-overview/C/magic-mirror/magic-mirror.vala | 23 ++
platform-overview/C/media/fedora.png | Bin 0 -> 5996 bytes
platform-overview/C/media/gnome-devtools.catalog | 17 +
platform-overview/C/media/guitar-tuner-glade.png | Bin 0 -> 4481 bytes
.../C/media/guitar-tuner-pipeline.png | Bin 0 -> 11717 bytes
.../C/media/guitar-tuner-pipeline.svg | 239 ++++++++++++
platform-overview/C/media/guitar-tuner.png | Bin 0 -> 5677 bytes
platform-overview/C/media/image-viewer.png | Bin 0 -> 56153 bytes
platform-overview/C/media/magic-mirror.png | Bin 0 -> 336569 bytes
platform-overview/C/media/message-board.ogv | Bin 0 -> 347904 bytes
platform-overview/C/media/opensuse.png | Bin 0 -> 7776 bytes
platform-overview/C/media/photo-wall-focused.png | Bin 0 -> 904201 bytes
platform-overview/C/media/photo-wall.png | Bin 0 -> 1062772 bytes
platform-overview/C/media/record-collection.png | Bin 0 -> 19992 bytes
platform-overview/C/media/ubuntu.png | Bin 0 -> 5725 bytes
platform-overview/C/message-board/message-board.c | 108 ++++++
platform-overview/C/notify.page | 23 --
platform-overview/C/overview-communication.page | 91 +++++
platform-overview/C/overview-datastorage.page | 63 +++
platform-overview/C/overview-gettingstarted.page | 53 +++
platform-overview/C/overview-help.page | 87 +++++
platform-overview/C/overview-multimedia.page | 63 +++
.../C/overview-systemintegration.page | 64 +++
platform-overview/C/overview-ui.page | 63 +++
platform-overview/C/pango.page | 51 ---
platform-overview/C/photo-wall/CREDITS | 16 +
.../C/photo-wall/berlin_images/berlin_01.jpg | Bin 0 -> 420284 bytes
.../C/photo-wall/berlin_images/berlin_02.jpg | Bin 0 -> 805766 bytes
.../C/photo-wall/berlin_images/berlin_03.jpg | Bin 0 -> 416260 bytes
.../C/photo-wall/berlin_images/berlin_04.jpg | Bin 0 -> 707196 bytes
.../C/photo-wall/berlin_images/berlin_05.jpg | Bin 0 -> 524287 bytes
.../C/photo-wall/berlin_images/berlin_06.jpg | Bin 0 -> 485684 bytes
.../C/photo-wall/berlin_images/berlin_07.jpg | Bin 0 -> 255185 bytes
.../C/photo-wall/berlin_images/berlin_08.jpg | Bin 0 -> 311446 bytes
.../C/photo-wall/berlin_images/berlin_09.jpg | Bin 0 -> 335614 bytes
.../C/photo-wall/berlin_images/berlin_10.jpg | Bin 0 -> 614353 bytes
.../C/photo-wall/berlin_images/berlin_11.jpg | Bin 0 -> 755752 bytes
.../C/photo-wall/berlin_images/berlin_12.jpg | Bin 0 -> 472960 bytes
platform-overview/C/photo-wall/photo-wall.c | 153 ++++++++
.../C/record-collection/record-collection.js | 148 +++++++
.../C/sample-avahi-discoverprinter.page | 33 ++
platform-overview/C/sample-telepathy-imstatus.page | 33 ++
platform-overview/C/samples.page | 33 ++
platform-overview/C/soup.page.stub | 11 -
platform-overview/C/tech-atk.page | 108 ++++++
platform-overview/C/tech-cairo.page | 99 +++++
platform-overview/C/tech-canberra.page | 82 ++++
platform-overview/C/tech-clutter.page | 103 +++++
platform-overview/C/tech-dbus.page | 110 ++++++
platform-overview/C/tech-eds.page | 95 +++++
platform-overview/C/tech-gda.page | 79 ++++
platform-overview/C/tech-gdk.page | 102 +++++
platform-overview/C/tech-gio-network.page | 84 ++++
platform-overview/C/tech-gio.page | 92 +++++
platform-overview/C/tech-glib.page | 69 ++++
platform-overview/C/tech-gobject.page | 69 ++++
platform-overview/C/tech-gsettings.page | 68 ++++
platform-overview/C/tech-gstreamer.page | 112 ++++++
platform-overview/C/tech-gtk.page | 105 +++++
.../C/{gupnp.page => tech-gupnp.page} | 64 +++-
platform-overview/C/tech-keyring.page | 116 ++++++
platform-overview/C/tech-notify.page | 77 ++++
platform-overview/C/tech-pango.page | 106 +++++
platform-overview/C/tech-soup.page | 70 ++++
platform-overview/C/tech-telepathy.page | 104 +++++
platform-overview/C/tech-tracker.page | 71 ++++
platform-overview/C/tech-webkit.page | 91 +++++
platform-overview/C/tech.page | 41 ++
platform-overview/C/telepathy.page | 28 --
platform-overview/C/test_comm1.png | Bin 0 -> 81184 bytes
platform-overview/C/tracker.page.stub | 11 -
platform-overview/C/webkit.page | 29 --
128 files changed, 8424 insertions(+), 777 deletions(-)
---
diff --git a/platform-overview/C/audio-player/audio-player.vala b/platform-overview/C/audio-player/audio-player.vala
new file mode 100644
index 0000000..181d81c
--- /dev/null
+++ b/platform-overview/C/audio-player/audio-player.vala
@@ -0,0 +1,92 @@
+/*
+ * Compile using:
+ * valac --pkg gtk+-2.0 --pkg gstreamer-0.10 audio-player.vala
+ *
+ */
+
+using Gtk;
+using Gst;
+
+public class AudioPlayer : Gtk.Window
+{
+ private Gst.Element playbin;
+ private string[] files;
+ private Gtk.Label label;
+ private int song = 0;
+ private bool playing;
+ private Gtk.Button play_pause_button;
+
+ public AudioPlayer ()
+ {
+ this.set_size_request (600, 200);
+ this.destroy.connect (Gtk.main_quit);
+ var vbox = new Gtk.VBox (false, 0);
+ this.label = new Gtk.Label ("Audio Player");
+ vbox.pack_start (this.label, true, true, 0);
+
+ this.play_pause_button = new Gtk.Button.from_stock (Gtk.STOCK_MEDIA_PLAY);
+ this.play_pause_button.clicked.connect (on_play_pause);
+ var next_button = new Gtk.Button.from_stock (Gtk.STOCK_MEDIA_NEXT);
+ next_button.clicked.connect (on_next);
+
+ var button_box = new Gtk.HButtonBox ();
+ button_box.add (this.play_pause_button);
+ button_box.add (next_button);
+ vbox.pack_start (button_box, false, true, 0);
+
+ this.add (vbox);
+
+ this.playbin = Gst.ElementFactory.make ("playbin", "play");
+ }
+
+ private void on_play_pause ()
+ {
+ if (this.playing)
+ {
+ this.playbin.set_state (Gst.State.PAUSED);
+ this.play_pause_button.set_label (Gtk.STOCK_MEDIA_PAUSE);
+ }
+ else
+ {
+ this.playbin.set_state (Gst.State.PLAYING);
+ this.play_pause_button.set_label (Gtk.STOCK_MEDIA_PLAY);
+ }
+
+ this.playing = !this.playing;
+ }
+
+ private void on_next ()
+ {
+ this.playbin.set_state (Gst.State.NULL);
+ this.playbin.set ("uri", "file://" + this.files[song]);
+ this.label.set_text (this.files[song]);
+ this.song++;
+ if (this.files.length <= this.song)
+ {
+ this.song = 0;
+ }
+ this.playbin.set_state (Gst.State.PLAYING);
+ this.play_pause_button.set_label (Gtk.STOCK_MEDIA_PLAY);
+ this.playing = true;
+ }
+
+ public static int main (string[] args)
+ {
+ Gst.init (ref args);
+ Gtk.init (ref args);
+
+ if (args.length < 2)
+ {
+ print ("usage: audio-player [files...]\n");
+ return 1;
+ }
+
+ var audio_player = new AudioPlayer ();
+ audio_player.files = args[1:args.length];
+ audio_player.show_all ();
+ audio_player.on_next ();
+ Gtk.main ();
+
+ return 0;
+ }
+}
diff --git a/platform-overview/C/concepts-boxmodel.page b/platform-overview/C/concepts-boxmodel.page
new file mode 100644
index 0000000..b12d4d8
--- /dev/null
+++ b/platform-overview/C/concepts-boxmodel.page
@@ -0,0 +1,26 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="concepts-boxmodel">
+ <info>
+ <link type="guide" xref="index#concepts" />
+
+ <revision version="0.1" date="2012-02-19" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Phil Bull</name>
+ <email>philbull gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>UI elements are organized into containers, which position themselves dynamically, like HTML entities.</desc>
+ </info>
+
+<title>Window layout and the box model</title>
+
+<p>GTK uses a box model to layout UI elements in windows. This makes it easy for apps to adapt when windows are resized or maximized.</p>
+
+<p>To build a UI, you put widgets into containers and specify their spacing, padding an alignment, just as you would with an HTML document. This makes it easier to create good-looking layouts that adapt to changes in window size and screen format (for example, mobile displays).</p>
+
+<p>There are a number of different </p>
+
+</page>
diff --git a/platform-overview/C/concepts-deployment.page b/platform-overview/C/concepts-deployment.page
new file mode 100644
index 0000000..2d0a9d1
--- /dev/null
+++ b/platform-overview/C/concepts-deployment.page
@@ -0,0 +1,26 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="concepts-deployment">
+ <info>
+ <link type="guide" xref="index#concepts" />
+
+ <revision version="0.1" date="2012-02-19" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Phil Bull</name>
+ <email>philbull gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>A variety of deployment methods are supported, depending on who your target audience is.</desc>
+ </info>
+
+<title>Deployment</title>
+
+<p>Applications based on GNOME technologies can be packaged and deployed in multiple formats. The GNOME platform is well supported by most Linux distributions, and all of the major vendors provide up-to-date versions of the stack with each release.</p>
+
+<p>RPM and DEB. OpenSuSE build service.</p>
+
+<p>GTK and Glib are cross-platform, and it is possible to build them on Windows and Mac OS X.</p>
+
+</page>
diff --git a/platform-overview/C/concepts-gobject.page b/platform-overview/C/concepts-gobject.page
new file mode 100644
index 0000000..21e635c
--- /dev/null
+++ b/platform-overview/C/concepts-gobject.page
@@ -0,0 +1,24 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="concepts-gobject">
+ <info>
+ <link type="guide" xref="index#concepts" />
+
+ <revision version="0.1" date="2012-02-19" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Phil Bull</name>
+ <email>philbull gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>GNOME uses the GObject object model. This supports introspection, which allows language bindings to be generated automatically.</desc>
+ </info>
+
+<title>GObject and introspection</title>
+
+<p>GObject is our OOP system. Language bindings are generated automatically, using GObject introspection.</p>
+
+<p>Properties, signals, blah blah blah</p>
+
+</page>
diff --git a/platform-overview/C/concepts-signals.page b/platform-overview/C/concepts-signals.page
new file mode 100644
index 0000000..986e663
--- /dev/null
+++ b/platform-overview/C/concepts-signals.page
@@ -0,0 +1,22 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="concepts-signals">
+ <info>
+ <link type="guide" xref="index#concepts" />
+
+ <revision version="0.1" date="2012-02-19" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Phil Bull</name>
+ <email>philbull gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>UI elements emit signals when the user interacts with them. Connect your code to these to perform actions.</desc>
+ </info>
+
+<title>Event handling and signals</title>
+
+<p></p>
+
+</page>
diff --git a/platform-overview/C/demo-audio-player.vala.page b/platform-overview/C/demo-audio-player.vala.page
new file mode 100644
index 0000000..9f33216
--- /dev/null
+++ b/platform-overview/C/demo-audio-player.vala.page
@@ -0,0 +1,19 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="demo-audio-player.vala">
+
+ <info>
+ <link type="guide" xref="demos#vala"/>
+
+ <desc>XXXX</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/platform-overview/C/demo-guitar-tuner.c.page b/platform-overview/C/demo-guitar-tuner.c.page
new file mode 100644
index 0000000..408ac78
--- /dev/null
+++ b/platform-overview/C/demo-guitar-tuner.c.page
@@ -0,0 +1,278 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="demo-guitar-tuner.c">
+
+ <info>
+ <link type="guide" xref="demos#c"/>
+
+ <desc>Use Gtk+ and GStreamer to build a simple guitar tuner application for GNOME. Shows off how to use the interface designer.</desc>
+
+ <revision pkgversion="0.1" version="0.1" date="2010-12-02" 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>
+ </info>
+
+<title>Guitar Tuner</title>
+
+<synopsis>
+ <p>In this tutorial, we're going to make a program which plays tones that you can use to tune a guitar. You will learn how to:</p>
+ <list>
+ <item><p>Set up a basic project in Anjuta</p></item>
+ <item><p>Create a simple GUI with Anjuta's UI designer</p></item>
+ <item><p>Use GStreamer to play sounds</p></item>
+ </list>
+ <p>You'll need the following to be able to follow this tutorial:</p>
+ <list>
+ <item><p>An installed copy of the <link xref="getting-ready">Anjuta IDE</link></p></item>
+ <item><p>Basic knowledge of the C programming language</p></item>
+ </list>
+</synopsis>
+
+<media type="image" mime="image/png" src="media/guitar-tuner.png"/>
+
+<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>guitar-tuner</file> as project name and directory.</p>
+ </item>
+ <item>
+ <p>Make sure that <gui>Configure external packages</gui> is switched <gui>ON</gui>. On the next page, select
+ <em>gstreamer-0.10</em> from the list to include the GStreamer 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="build">
+ <title>Build the code for the first time</title>
+ <p>C is a rather verbose language, so don't be surprised that the file contains quite a lot of code. Most of it is template code. It loads an (empty) window from the user interface description file and shows it. More details are given below; skip this list if you understand the basics:</p>
+
+ <list>
+ <item>
+ <p>The three <code>#include</code> lines at the top include the <code>config</code> (useful autoconf build defines), <code>gtk</code> (user interface) and <code>gi18n</code> (internationalization) libraries. Functions from these libraries are used in the rest of the code.</p>
+ </item>
+ <item>
+ <p>The <code>create_window</code> function creates a new window by opening a GtkBuilder file (<file>src/guitar-tuner.ui</file>, defined a few lines above), connecting its signals and then displaying it in a window. The 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>
+ <p>Connecting signals is how you define what happens when you push a button, or when some other event happens. Here, the <code>destroy</code> function is called (and quits the app) when you close the window.</p>
+ </item>
+ <item>
+ <p>The <code>main</code> function is run by default when you start a C application. It calls a few functions which 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>
+ <item>
+ <p>The <code>ENABLE_NLS</code> conditional definition sets up <code>gettext</code>, which is a framework for translating applications. These functions specify how translation tools should handle your app when you run them.</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>).</p>
+ <p>Press <gui>Execute</gui> on the next window that appears to configure a debug build. You only need to do this once, for the first build.</p>
+</section>
+
+<section id="ui">
+ <title>Create the user interface</title>
+ <p>A description of the user interface (UI) is contained in the GtkBuilder file. To edit the user interface, open <file>src/guitar_tuner.ui</file>. This will switch to the interface designer. The design window is in the center; widgets and widgets' properties are on the left, and the palette of available widgets is on the right.
+ </p>
+ <p>The layout of every UI in GTK+ is organized using boxes and tables. Let's use a vertical <gui>GtkButtonBox</gui> here to assign six <gui>GtkButtons</gui>, one for each of the six guitar strings.</p>
+
+<media type="image" mime="image/png" src="media/guitar-tuner-glade.png"/>
+
+ <steps>
+ <item>
+ <p>Select a <gui>GtkButtonBox</gui> from the <gui>Container</gui> section of the <gui>Palette</gui> on the right and put it into the window. In the <gui>Properties</gui> pane, set the number of elements to 6 (for the
+six strings) and the orientation to vertical.</p>
+ </item>
+ <item>
+ <p>Now, choose a <gui>GtkButton</gui> from the palette and put it into the first part of the box.</p>
+ </item>
+ <item>
+ <p>While the button is still selected, change the <gui>Label</gui> property in the <gui>Widgets</gui> tab to <gui>E</gui>. This will be the low E string.</p>
+ </item>
+ <item>
+ <p>Switch to the <gui>Signals</gui> tab (inside the <gui>Widgets</gui> tab) and look for the <code>clicked</code> signal of the button. You can use this to connect a signal handler that will be called when the button is clicked by the user. To do this, click on the signal and type <code>on_button_clicked</code> in the <gui>Handler</gui> column and press <key>Return</key>.</p>
+ </item>
+ <item>
+ <p>Repeat the above steps for the other buttons, adding the next 5 strings with the names <em>A</em>, <em>D</em>, <em>G</em>, <em>B</em>, and <em>e</em>.</p>
+ </item>
+ <item>
+ <p>Save the UI design (by clicking <guiseq><gui>File</gui><gui>Save</gui></guiseq>) and keep it open.</p>
+ </item>
+ </steps>
+</section>
+
+<section id="signal">
+ <title>Creating the signal handler</title>
+ <p>In the UI designer, you made it so that all of the buttons will call the same function, <gui>on_button_clicked</gui>, when they are clicked. We need to add that function in the source file.</p>
+ <p>To do this, open <file>main.c</file> while the user interface file is still open. Switch to the <gui>Signals</gui> tab, which you already used to set the signal name. Now take the row where you set the
+<gui>clicked</gui> signal and drag it into to the source file at a
+position that is outside any function. The following code will be added to your source file:</p>
+<code mime="text/x-csrc"><![CDATA[
+void on_button_clicked (GtkWidget* button, gpointer user_data)
+{
+
+}]]></code>
+ <p>This signal handler has two arguments: a pointer to the <code>GtkWidget</code> that called the function (in our case, always a <code>GtkButton</code>), and a pointer to some "user data" that you can define, but which we won't be using here. (You can set the user data by calling <code>gtk_builder_connect_signals</code>; it is normally used to pass a pointer to a data structure that you might need to access inside the signal handler.)</p>
+ <p>For now, we'll leave the signal handler empty while we work on writing the code to produce sounds.</p>
+</section>
+
+<section id="gstreamer">
+ <title>GStreamer pipelines</title>
+ <p>GStreamer is GNOME's multimedia framework — you can use it for playing, recording, and processing video, audio, webcam streams and the like. Here, we'll be using it to produce single-frequency tones.</p>
+ <p>Conceptually, GStreamer works as follows: You create a <em>pipeline</em> containing several processing elements going from the <em>source</em> to the <em>sink</em> (output). The source can be an image file, a video, or a music file, for example, and the output could be a widget or the soundcard.</p>
+ <p>Between source and sink, you can apply various filters and converters to handle effects, format conversions and so on. Each element of the pipeline has properties which can be used to change its behaviour.</p>
+ <media type="image" mime="image/png" src="media/guitar-tuner-pipeline.png">
+ <p>An example GStreamer pipeline.</p>
+ </media>
+</section>
+
+<section id="pipeline">
+ <title>Set up the pipeline</title>
+ <p>In this simple example we will use a tone generator source called <code>audiotestsrc</code> and send the output to the default system sound device, <code>autoaudiosink</code>. We only need to configure the frequency of the tone generator; this is accessible through the <code>freq</code> property of <code>audiotestsrc</code>.</p>
+
+ <p>Insert the following line into <file>main.c</file>, just below the <code><![CDATA[#include <gtk/gtk.h>]]></code> line:</p>
+ <code mime="text/x-csrc"><![CDATA[#include <gst/gst.h>]]></code>
+ <p>This includes the GStreamer library. You also need to add a line to initialize GStreamer; put the following code on the line above the <code>gtk_init</code> call in the <code>main</code> function:</p>
+ <code><![CDATA[gst_init (&argc, &argv);]]></code>
+ <p>Then, copy the following function into <file>main.c</file> above the empty <code>on_button_clicked</code> function:</p>
+ <code mime="text/x-csrc"><![CDATA[static void
+play_sound (gdouble frequency)
+{
+ GstElement *source, *sink;
+ GstElement *pipeline;
+
+ pipeline = gst_pipeline_new ("note");
+ source = gst_element_factory_make ("audiotestsrc",
+ "source");
+ sink = gst_element_factory_make ("autoaudiosink",
+ "output");
+
+ /* set frequency */
+ g_object_set (source, "freq", frequency, NULL);
+
+ gst_bin_add_many (GST_BIN (pipeline), source, sink, NULL);
+ gst_element_link (source, sink);
+
+ gst_element_set_state (pipeline, GST_STATE_PLAYING);
+
+ /* stop it after 500ms */
+ g_timeout_add (LENGTH, (GSourceFunc) pipeline_stop, pipeline);
+}]]></code>
+
+ <steps>
+ <item>
+ <p>The first five lines create source and sink GStreamer elements (<code>GstElement</code>), and a pipeline element (which will be used as a container for the other two elements). The pipeline is given the name "note"; the source is named "source" and is set to the <code>audiotestsrc</code> source; and the sink is named "output" and set to the <code>autoaudiosink</code> sink (default sound card output).</p>
+ </item>
+ <item>
+ <p>The call to <code>g_object_set</code> sets the <code>freq</code> property of the source element to <code>frequency</code>, which is passed as an argument to the <code>play_sound</code> function. This is just the frequency of the note in Hertz; some useful frequencies will be defined later on.</p>
+ </item>
+ <item>
+ <p><code>gst_bin_add_many</code> puts the source and sink into the pipeline. The pipeline is a <code>GstBin</code>, which is just an element that can contain multiple other GStreamer elements. In general, you can add as many elements as you like to the pipeline by adding more arguments to <code>gst_bin_add_many</code>.</p>
+ </item>
+ <item>
+ <p>Next, <code>gst_element_link</code> is used to connect the elements together, so the output of <code>source</code> (a tone) goes into the input of <code>sink</code> (which is then output to the sound card). <code>gst_element_set_state</code> is then used to start playback, by setting the state of the pipeline to playing (<code>GST_STATE_PLAYING</code>).</p>
+ </item>
+ </steps>
+
+</section>
+
+<section id="stop">
+ <title>Stopping playback</title>
+ <p>We don't want to play an annoying tone forever, so the last thing <code>play_sound</code> does is to call <code>g_timeout_add</code>. This sets a timeout for stopping the sound; it waits for <code>LENGTH</code> milliseconds before calling the function <code>pipeline_stop</code>, and will keep calling it until <code>pipeline_stop</code> returns <code>FALSE</code>.</p>
+ <p>Now, we'll write the <code>pipeline_stop</code> function which is called by <code>g_timeout_add</code>. Insert the following code <em>above</em> the <code>play_sound</code> function:</p>
+ <code mime="text/x-csrc"><![CDATA[
+#define LENGTH 500 /* Length of playing in ms */
+
+static gboolean
+pipeline_stop (GstElement* pipeline)
+{
+ gst_element_set_state (pipeline, GST_STATE_PAUSED);
+ g_object_unref (pipeline);
+
+ return FALSE;
+}]]></code>
+ <p>The call to <code>gst_element_set_state</code> pauses the playback of the pipeline and <code>g_object_unref</code> unreferences the pipeline, destroying it and freeing its memory.</p>
+</section>
+
+<section id="tones">
+ <title>Define the tones</title>
+ <p>We want to play the correct sound when the user clicks a button. First of all, we need to know the frequencies for the six guitar strings, which are defined (at the top of <file>main.c</file>) as follows:</p>
+ <code mime="text/x-csrc"><![CDATA[
+/* Frequencies of the strings */
+#define NOTE_E 369.23
+#define NOTE_A 440
+#define NOTE_D 587.33
+#define NOTE_G 783.99
+#define NOTE_B 987.77
+#define NOTE_e 1318.5]]></code>
+ <p>Now to flesh out the signal handler that we defined earlier, <code>on_button_clicked</code>. We could have connected every button to a different signal handler, but that would lead to a lot of code duplication. Instead, we can use the label of the button to figure out which button was clicked:</p>
+ <code mime="text/x-csrc"><![CDATA[
+/* Callback for the buttons */
+void on_button_clicked (GtkButton* button,
+ gpointer user_data)
+{
+ GtkWidget* label = gtk_bin_get_child (GTK_BIN (button));
+ const gchar* text = gtk_label_get_label (GTK_LABEL (label));
+
+ if (g_str_equal (text, _("E")))
+ play_sound (NOTE_E);
+ else if (g_str_equal (text, _("A")))
+ play_sound (NOTE_A);
+ else if (g_str_equal (text, _("G")))
+ play_sound (NOTE_G);
+ else if (g_str_equal (text, _("D")))
+ play_sound (NOTE_D);
+ else if (g_str_equal (text, _("B")))
+ play_sound (NOTE_B);
+ else if (g_str_equal (text, _("e")))
+ play_sound (NOTE_e);
+}
+]]></code>
+ <p>A pointer to the <code>GtkButton</code> that was clicked is passed as an argument (<code>button</code>) to <code>on_button_clicked</code>. We can get the label of that button by using <code>gtk_bin_get_child</code>, and then get the text from that label using <code>gtk_label_get_label</code>.</p>
+ <p>The label text is then compared to the notes that we have using <code>g_str_equal</code>, and <code>play_sound</code> is called with the frequency appropriate for that note. This plays the tone; we have a working guitar tuner!</p>
+</section>
+
+<section id="run">
+ <title>Build and run the application</title>
+ <p>All of the code should now be ready to go. Click <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> to build everything again, and 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/guitar-tuner</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="guitar-tuner/guitar-tuner.c">reference code</link>.</p>
+</section>
+
+<section id="next">
+ <title>Next steps</title>
+ <p>Here are some ideas for how you can extend this simple demonstration:</p>
+ <list>
+ <item>
+ <p>Have the program automatically cycle through the notes.</p>
+ </item>
+ <item>
+ <p>Make the program play recordings of real guitar strings being plucked.</p>
+ <p>To do this, you would need to set up a more complicated GStreamer pipeline which allows you to load and play back music files. You'll have to choose <link href="http://gstreamer.freedesktop.org/documentation/plugins.html";>decoder and demuxer</link> GStreamer elements based on the file format of your recorded sounds — MP3s use different elements to Ogg Vorbis files, for example.</p>
+ <p>You might need to connect the elements in more complicated ways too. This could involve using <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/chapter-intro-basics.html";>GStreamer concepts</link> that we didn't cover in this tutorial, such as <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/section-intro-basics-pads.html";>pads</link>. You may also find the <cmd>gst-inspect</cmd> command useful.</p>
+ </item>
+ <item>
+ <p>Automatically analyze notes that the user plays.</p>
+ <p>You could connect a microphone and record sounds from it using an <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-autoaudiosrc.html";>input source</link>. Perhaps some form of <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-plugin-spectrum.html";>spectrum analysis</link> would allow you to figure out what notes are being played?</p>
+ </item>
+ </list>
+</section>
+
+</page>
diff --git a/platform-overview/C/demo-guitar-tuner.cpp.page b/platform-overview/C/demo-guitar-tuner.cpp.page
new file mode 100644
index 0000000..e315a8e
--- /dev/null
+++ b/platform-overview/C/demo-guitar-tuner.cpp.page
@@ -0,0 +1,286 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="demo-guitar-tuner.cpp">
+
+ <info>
+ <link type="guide" xref="demos#cpp"/>
+
+ <desc>Use Gtkmm and GStreamermm to build a simple guitar tuner application for GNOME. Shows off how to use the interface designer.</desc>
+
+ <revision pkgversion="0.1" version="0.1" date="2011-03-17" 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>
+ </info>
+
+<title>Guitar Tuner</title>
+
+<synopsis>
+ <p>In this tutorial, we're going to make a program which plays tones that you can use to tune a guitar. You will learn how to:</p>
+ <list>
+ <item><p>Set up a basic project in Anjuta</p></item>
+ <item><p>Create a simple GUI with Anjuta's UI designer</p></item>
+ <item><p>Use GStreamer to play sounds</p></item>
+ </list>
+ <p>You'll need the following to be able to follow this tutorial:</p>
+ <list>
+ <item><p>An installed copy of the <link xref="getting-ready">Anjuta IDE</link></p></item>
+ <item><p>Basic knowledge of the C++ programming language</p></item>
+ </list>
+</synopsis>
+
+<media type="image" mime="image/png" src="media/guitar-tuner.png"/>
+
+<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>GTKmm (Simple)</gui> from the <gui>C++</gui> tab, click <gui>Forward</gui>, and fill out your details on the next few pages. Use <file>guitar-tuner</file> as project name and directory.</p>
+ </item>
+ <item>
+ <p>Make sure that <gui>Configure external packages</gui> is selected. On the next page, select
+ <em>gstreamermm-0.10</em> from the list to include the GStreamermm library in your project.</p>
+ </item>
+ <item>
+ <p>Click <gui>Finished</gui> and the project will be created for you. Open <file>src/main.cc</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 <gtkmm.h>
+#include <iostream>]]></code>
+ </item>
+ </steps>
+</section>
+
+<section id="build">
+ <title>Build the code for the first time</title>
+ <p>This is a very basic C++ code setting up Gtkmm. More details are given below;
+ skip this list if you understand the basics:</p>
+ <list>
+ <item>
+ <p>The three <code>#include</code> lines at the top include the <code>config</code> (useful autoconf build defines), <code>gtkmm</code> (user interface) and <code>iostream</code> (STL). Functions from these libraries are used in the rest of the code.</p>
+ </item>
+ <item>
+ <p>The <code>main</code> function creates a new window by opening a GtkBuilder file (<file>src/guitar-tuner.ui</file>, defined a few lines above) and then displaying it in a window. The 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>
+ </item>
+ <item>
+ <p>Afterwards it calls a few functions which set up and then run the application. The <code>kit.run</code> function starts the GTKmm 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>).</p>
+ <p>Press <gui>Execute</gui> on the next window that appears to configure a debug build. You only need to do this once, for the first build.</p>
+</section>
+
+<section id="ui">
+ <title>Create the user interface</title>
+ <p>A description of the user interface (UI) is contained in the GtkBuilder file. To edit the user interface, open <file>src/guitar_tuner.ui</file>. This will switch to the interface designer. The design window is in the center; widgets and widgets' properties are on the left, and the palette of available widgets is on the right.
+ </p>
+ <p>The layout of every UI in GTK+ is organized using boxes and tables. Let's use a vertical <gui>GtkButtonBox</gui> here to assign six <gui>GtkButtons</gui>, one for each of the six guitar strings.</p>
+
+<media type="image" mime="image/png" src="media/guitar-tuner-glade.png"/>
+
+ <steps>
+ <item>
+ <p>Select a <gui>GtkButtonBox</gui> from the <gui>Container</gui> section of the <gui>Palette</gui> on the right and put it into the window. In the <gui>Properties</gui> pane, set the number of elements to 6 (for the
+six strings) and the orientation to vertical.</p>
+ </item>
+ <item>
+ <p>Now, choose a <gui>GtkButton</gui> from the palette and put it into the first part of the box.</p>
+ </item>
+ <item>
+ <p>While the button is still selected, change the <gui>Label</gui> property in the <gui>Widgets</gui> tab to <gui>E</gui>. This will be the low E string. Also change the <gui>Name</gui> property to <gui>button_E</gui>. This is the name we will refer
+ to the widget later in code.</p>
+ </item>
+ <item>
+ <p>Repeat the above steps for the other buttons, adding the next 5 strings with the labels <em>A</em>, <em>D</em>, <em>G</em>, <em>B</em>, and <em>e</em> and the names <em>button_A</em>, etc.</p>
+ </item>
+ <item>
+ <p>Save the UI design (by clicking <guiseq><gui>File</gui><gui>Save</gui></guiseq>) and close the file.</p>
+ </item>
+ </steps>
+</section>
+
+<section id="gst">
+ <title>GStreamer pipelines</title>
+ <p>GStreamer is GNOME's multimedia framework — you can use it for playing, recording, and processing video, audio, webcam streams and the like. Here, we'll be using it to produce single-frequency tones. GStreamermm is the C++ binding to GStreamer which
+ we will use here.</p>
+ <p>Conceptually, GStreamer works as follows: You create a <em>pipeline</em> containing several processing elements going from the <em>source</em> to the <em>sink</em> (output). The source can be an image file, a video, or a music file, for example, and the output could be a widget or the soundcard.</p>
+ <p>Between source and sink, you can apply various filters and converters to handle effects, format conversions and so on. Each element of the pipeline has properties which can be used to change its behaviour.</p>
+ <media type="image" mime="image/png" src="media/guitar-tuner-pipeline.png">
+ <p>An example GStreamer pipeline.</p>
+ </media>
+</section>
+
+<section id="usinggst">
+ <title>Using GStreamermm</title>
+ <p>To use GStreamermm, it has to be initialised. We do that by adding the following line of code next to the
+ <code>Gtk::Main kit(argc, argv);</code> line in <file>main.cc</file>:</p>
+ <p><code> Gst::init (argc, argv);</code></p>
+ <p>While we are on it, also make sure that the <file>gstreamermm.h</file> is included in <file>main.cc</file> properly.</p>
+
+ <p>In this simple example we will use a tone generator source called <code>audiotestsrc</code> and send the output to the default system sound device, <code>autoaudiosink</code>. We only need to configure the frequency of the tone generator; this is accessible through the <code>freq</code> property of <code>audiotestsrc</code>.</p>
+
+ <p>To simplify the handling of the pipeline we will define a helper class <code>Sound</code>. We do
+ that in <file>main.cc</file> in order to keep this example simple, whereas you might usually want
+ to use a separate file:</p>
+ <code><![CDATA[
+class Sound
+{
+ public:
+ Sound();
+
+ void start_playing(double frequency);
+ bool stop_playing();
+
+ private:
+ Glib::RefPtr<Gst::Pipeline> m_pipeline;
+ Glib::RefPtr<Gst::Element> m_source;
+ Glib::RefPtr<Gst::Element> m_sink;
+};
+
+Sound::Sound()
+{
+ m_pipeline = Gst::Pipeline::create("note");
+ m_source = Gst::ElementFactory::create_element("audiotestsrc",
+ "source");
+ m_sink = Gst::ElementFactory::create_element("autoaudiosink",
+ "output");
+ m_pipeline->add(m_source);
+ m_pipeline->add(m_sink);
+ m_source->link(m_sink);
+}
+
+void Sound::start_playing (double frequency)
+{
+ m_source->set_property("freq", frequency);
+ m_pipeline->set_state(Gst::STATE_PLAYING);
+
+ /* stop it after 200ms */
+ Glib::signal_timeout().connect(sigc::mem_fun(*this, &Sound::stop_playing),
+ 200);
+}
+
+bool Sound::stop_playing()
+{
+ m_pipeline->set_state(Gst::STATE_NULL);
+ return false;
+}
+]]></code>
+
+ <p>The code has the following purpose:</p>
+ <steps>
+ <item>
+ <p>In the constructor, source and sink GStreamer elements (<code>Gst::Element</code>) are created, and a pipeline element (which will be used as a container for the other two elements). The pipeline is given the name "note"; the source is named "source" and is set to the <code>audiotestsrc</code> source; and the sink is named "output" and set to the <code>autoaudiosink</code> sink (default sound card output). After the elements have been added to the pipeline and linked together, the pipeline is ready to run.</p>
+ </item>
+ <item>
+ <p><code>start_playing</code> sets the source element to play a particular frequency and then starts the pipeline so the sound
+ actually starts playing. As we don't want to have the annoying sound for ages, a timeout is set up to stop the pipeline
+ after 200 ms by calling <code>stop_playing</code>.</p>
+ </item>
+ <item>
+ <p>In <code>stop_playing</code> which is called when the timeout has elapsed, the pipeline is stopped and as such there isn't
+ any sound output anymore. As GStreamermm uses reference counting through the <code>Glib::RefPtr</code> object, the memory
+ is automatically freed once the <code>Sound</code> class is destroyed.</p>
+ </item>
+ </steps>
+</section>
+
+<section id="signals">
+ <title>Connecting the signals</title>
+ <p>We want to play the correct sound when the user clicks a button. That means that we have to connect
+ to the signal that is fired when the user clicks the button. We also want to provide information to the
+ called function which tone to play. GTKmm makes that quite easy as we can easily bind information with the <em>sigc</em>
+ library.</p>
+
+ <p>The function that is called when the user clicks a button can be pretty simple, as
+ all the interesting stuff is done in the helper class now:</p>
+ <code mime="text/x-csrc"><![CDATA[
+static void
+on_button_clicked(double frequency, Sound* sound)
+{
+ sound->start_playing (frequency);
+}
+]]></code>
+ <p>It only calls the helper class we defined before to play the correct frequencies. With some more
+ clever code we would also have been able to directly connect to the class without using the function
+ but we will leave that to use as an exercise.</p>
+
+ <p>The code to set up the signals should be added to the <code>main()</code> function just after the
+ <code>builder->get_widget("main_window", main_win);</code> line:</p>
+ <code mime="text/x-csrc"><![CDATA[
+Sound sound;
+Gtk::Button* button;
+
+builder->get_widget("button_E", button);
+button->signal_clicked().connect (sigc::bind<double, Sound*>(sigc::ptr_fun(&on_button_clicked),
+ 369.23, &sound));
+]]></code>
+ <steps>
+ <item>
+ <p>At first we create an instance of our helper class that we want to use now and declare a variable
+ for the button we want to connect to.</p>
+ </item>
+ <item>
+ <p>Next, we receive the button object from the user interface that was created out of the user interface file. Remember
+ that <em>button_E</em> is the name we gave to the first button.</p>
+ </item>
+ <item>
+ <p>Finally we connect the <em>clicked</em> signal. This isn't fully straightforward because this is done in a fully type-safe
+ way and we actually want to pass the frequency and our helper class to the signal handler.
+ <code>sigc::ptr_fun(&on_button_clicked)</code> creates a <em>slot</em> for the <code>on_button_clicked</code> method
+ we defined above. With <code>sigc::bind</code> we are able to pass additional arguments to the slot and in this
+ case we pass the frequency (as double) and our helper class.</p>
+ </item>
+ </steps>
+ <p>Now that we have set up the <em>E</em> button we also need to connect the other buttons according to their frequencies:
+ 440 for A, 587.33 for D, 783.99 for G, 987.77 for B and 1318.5 for the high E. This is done in the same way, just passing
+ a different frequency to the handler.</p>
+</section>
+
+<section id="run">
+ <title>Build and run the application</title>
+ <p>All of the code should now be ready to go. Click <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> to build everything again, and then <guiseq><gui>Run</gui><gui>Run</gui></guiseq> to start the application.</p>
+ <p>If you haven't already done so, choose the <file>Debug/src/guitar-tuner</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="guitar-tuner/guitar-tuner.cc">reference code</link>.</p>
+</section>
+
+<section id="further">
+ <title>Further Reading</title>
+ <p>Many of the things shown above are explained in detail in the
+ <link href="http://library.gnome.org/devel/gtkmm-tutorial/stable/";>GTKmm book</link> which also
+ covers a lot more key concept for using the full power of GTKmm. You might also be interested
+ in the <link href="http://library.gnome.org/devel/gstreamermm/";>GStreamermm reference documentation</link>.</p>
+</section>
+
+<section id="next">
+ <title>Next steps</title>
+ <p>Here are some ideas for how you can extend this simple demonstration:</p>
+ <list>
+ <item>
+ <p>Have the program automatically cycle through the notes.</p>
+ </item>
+ <item>
+ <p>Make the program play recordings of real guitar strings being plucked.</p>
+ <p>To do this, you would need to set up a more complicated GStreamer pipeline which allows you to load and play back music files. You'll have to choose <link href="http://gstreamer.freedesktop.org/documentation/plugins.html";>decoder and demuxer</link> GStreamer elements based on the file format of your recorded sounds — MP3s use different elements to Ogg Vorbis files, for example.</p>
+ <p>You might need to connect the elements in more complicated ways too. This could involve using <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/chapter-intro-basics.html";>GStreamer concepts</link> that we didn't cover in this tutorial, such as <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/section-intro-basics-pads.html";>pads</link>. You may also find the <cmd>gst-inspect</cmd> command useful.</p>
+ </item>
+ <item>
+ <p>Automatically analyze notes that the user plays.</p>
+ <p>You could connect a microphone and record sounds from it using an <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-autoaudiosrc.html";>input source</link>. Perhaps some form of <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-plugin-spectrum.html";>spectrum analysis</link> would allow you to figure out what notes are being played?</p>
+ </item>
+ </list>
+</section>
+
+</page>
diff --git a/platform-overview/C/demo-guitar-tuner.py.page b/platform-overview/C/demo-guitar-tuner.py.page
new file mode 100644
index 0000000..265aa1f
--- /dev/null
+++ b/platform-overview/C/demo-guitar-tuner.py.page
@@ -0,0 +1,249 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="demo-guitar-tuner.py">
+
+ <info>
+ <link type="guide" xref="demos#py"/>
+
+ <desc>Use Gtk+ and GStreamer to build a simple guitar tuner application for GNOME. Shows off how to use the interface designer.</desc>
+
+ <revision pkgversion="0.1" version="0.1" date="2010-12-02" status="stub"/>
+ <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>
+ </info>
+
+<title>Guitar Tuner</title>
+
+<synopsis>
+ <p>In this tutorial, we're going to make a program which plays tones that you can use to tune a guitar. You will learn how to:</p>
+ <list>
+ <item><p>Set up a basic project in Anjuta</p></item>
+ <item><p>Create a simple GUI with Anjuta's UI designer</p></item>
+ <item><p>Use GStreamer to play sounds</p></item>
+ </list>
+ <p>You'll need the following to be able to follow this tutorial:</p>
+ <list>
+ <item><p>An installed copy of the <link xref="getting-ready">Anjuta IDE</link></p></item>
+ <item><p>Basic knowledge of the Python programming language</p></item>
+ </list>
+</synopsis>
+
+<media type="image" mime="image/png" src="media/guitar-tuner.png"/>
+
+<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>PyGTK (automake)</gui> from the <gui>Python</gui> tab, click <gui>Forward</gui>, and fill out your details on the next few pages. Use <file>guitar-tuner</file> as project name and directory.</p>
+ </item>
+ <item>
+ <p>Click <gui>Apply</gui> and the project will be created for you. Open <file>src/guitar_tuner.py</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:</p>
+ <code mime="test/x-python"><![CDATA[
+from gi.repository import Gtk, GdkPixbuf, Gdk
+import os, sys]]></code>
+ </item>
+ </steps>
+</section>
+
+<section id="run">
+ <title>Run the code for the first time</title>
+ <p>Most of the code in the file is template code. It loads an (empty) window from the user interface description file and shows it. More details are given below; skip this list if you understand the basics:</p>
+
+ <list>
+ <item>
+ <p>The <code>import</code> lines at the top include the tell Python to load the user interface and system
+libraries needed.</p>
+ </item>
+ <item>
+ <p>A class is declared that will be the main class for our application. In the <code>__init__</code> method
+ the main window is loaded from the GtkBuilder file (<file>src/guitar-tuner.ui</file>) and the
+ signals are connected.</p>
+ <p>Connecting signals is how you define what happens when you push a button, or when some other event happens. Here, the <code>destroy</code> method is called (and quits the app) when you close the window.</p>
+ </item>
+ <item>
+ <p>The <code>main</code> function is run by default when you start a Python application. It just creates
+ an instance of the main class and starts the main loop to bring up the window.</p>
+ </item>
+ </list>
+
+ <p>This code is ready to be used, so you can run it by clicking <guiseq><gui>Run</gui><gui>Execute</gui></guiseq>.</p>
+</section>
+
+<section id="ui">
+ <title>Create the user interface</title>
+ <p>A description of the user interface (UI) is contained in the GtkBuilder file. To edit the user interface, open <file>src/guitar_tuner.ui</file>. This will switch to the interface designer. The design window is in the center; widgets and widgets' properties are on the left, and the palette of available widgets is on the right.
+ </p>
+ <p>The layout of every UI in GTK+ is organized using boxes and tables. Let's use a vertical <gui>GtkButtonBox</gui> here to assign six <gui>GtkButtons</gui>, one for each of the six guitar strings.</p>
+
+<media type="image" mime="image/png" src="media/guitar-tuner-glade.png"/>
+
+ <steps>
+ <item>
+ <p>Select a <gui>GtkButtonBox</gui> from the <gui>Container</gui> section of the <gui>Palette</gui> on the right and put it into the window. In the <gui>Properties</gui> pane, set the number of elements to 6 (for the
+six strings) and the orientation to vertical.</p>
+ </item>
+ <item>
+ <p>Now, choose a <gui>GtkButton</gui> from the palette and put it into the first part of the box.</p>
+ </item>
+ <item>
+ <p>While the button is still selected, change the <gui>Label</gui> property in the <gui>Widgets</gui> tab to <gui>E</gui>. This will be the low E string.</p>
+ </item>
+ <item>
+ <p>Switch to the <gui>Signals</gui> tab (inside the <gui>Widgets</gui> tab) and look for the <code>clicked</code> signal of the button. You can use this to connect a signal handler that will be called when the button is clicked by the user. To do this, click on the signal and type <code>on_button_clicked</code> in the <gui>Handler</gui> column and press <key>Return</key>.</p>
+ </item>
+ <item>
+ <p>Repeat the above steps for the other buttons, adding the next 5 strings with the names <em>A</em>, <em>D</em>, <em>G</em>, <em>B</em>, and <em>e</em>.</p>
+ </item>
+ <item>
+ <p>Save the UI design (by clicking <guiseq><gui>File</gui><gui>Save</gui></guiseq>) and keep it open.</p>
+ </item>
+ </steps>
+</section>
+
+<section id="signal">
+ <title>Write the signal handler</title>
+ <p>In the UI designer, you made it so that all of the buttons will call the same function, <gui>on_button_clicked</gui>, when they are clicked. We need to add that function in the source file.</p>
+<p>To do this, open <file>guitar_tuner.py</file> while the user interface file is still open. Switch to the <gui>Signals</gui> tab, which you already used to set the signal name. Now take the row where you set the
+<gui>clicked</gui> signal and drag it into to the source file inside the main class. The following code will be added to your source file:</p>
+<code mime="text/x-csrc"><![CDATA[
+def on_button_clicked (self, button):
+]]></code>
+
+ <p>This signal handler has two arguments: the usual Python class pointer, and the <code>Gtk.Button</code> that called the function.</p>
+ <p>For now, we'll leave the signal handler empty while we work on writing the code to produce sounds.</p>
+</section>
+
+<section id="gstreamer">
+ <title>GStreamer pipelines</title>
+ <p>GStreamer is GNOME's multimedia framework — you can use it for playing, recording, and processing video, audio, webcam streams and the like. Here, we'll be using it to produce single-frequency tones.</p>
+ <p>Conceptually, GStreamer works as follows: You create a <em>pipeline</em> containing several processing elements going from the <em>source</em> to the <em>sink</em> (output). The source can be an image file, a video, or a music file, for example, and the output could be a widget or the soundcard.</p>
+ <p>Between source and sink, you can apply various filters and converters to handle effects, format conversions and so on. Each element of the pipeline has properties which can be used to change its behaviour.</p>
+ <media type="image" mime="image/png" src="media/guitar-tuner-pipeline.png">
+ <p>An example GStreamer pipeline.</p>
+ </media>
+</section>
+
+<section id="pipeline">
+ <title>Set up the pipeline</title>
+ <p>In this simple example we will use a tone generator source called <code>audiotestsrc</code> and send the output to the default system sound device, <code>autoaudiosink</code>. We only need to configure the frequency of the tone generator; this is accessible through the <code>freq</code> property of <code>audiotestsrc</code>.</p>
+
+ <p>Change the import line in <file>guitar_tuner.py</file>, just at the beginning to :</p>
+ <code mime="test/x-python"><![CDATA[from gi.repository import Gtk, Gst, GObject ]]></code>
+ <p>The <code>Gst</code> includes the GStreamer library. You also need to initialise GStreamer properly which
+ is done in the <code>main()</code> method with this call added above the <code>app = GUI()</code>
+ line:</p>
+ <code mime="test/x-python"><![CDATA[Gst.init_check(sys.argv)]]></code>
+ <p>Then, copy the following function into the main class in <file>guitar_tuner.py</file> somewhere:</p>
+ <code mime="test/x-python"><![CDATA[
+def play_sound(self, frequency):
+ pipeline = Gst.Pipeline(name='note')
+ source = Gst.ElementFactory.make('audiotestsrc', 'src')
+ sink = Gst.ElementFactory.make('autoaudiosink', 'output')
+
+ source.set_property('freq', frequency)
+ pipeline.add(source)
+ pipeline.add(sink)
+ pipeline.set_state(Gst.State.PLAYING)
+
+ GObject.timeout_add(self.LENGTH, self.pipeline_stop, pipeline)]]></code>
+ <steps>
+ <item>
+ <p>The first three lines create source and sink GStreamer elements and a pipeline element (which will be used as a container for the other two elements). The pipeline is given the name "note"; the source is named "source" and is set to the <code>audiotestsrc</code> source; and the sink is named "output" and set to the <code>autoaudiosink</code> sink (default sound card output).</p>
+ </item>
+ <item>
+ <p>The call to <code>source.set_property</code> sets the <code>freq</code> property of the source element to <code>frequency</code>, which was passed as an argument to the <code>play_sound</code> function. This is just the frequency of the note in Hertz; some useful frequencies will be defined later on.</p>
+ </item>
+ <item>
+ <p>The next two lines call <code>pipeline.add</code>, putting the source and sink into the pipeline. The pipeline can contain multiple other GStreamer elements. In general, you can add as many elements as you like to the pipeline by calling its <code>add</code> method repeatedly.</p>
+ </item>
+ <item>
+ <p>Next <code>pipeline.set_state</code> is used to start playback, by setting the state of the pipeline to playing (<code>Gst.State.PLAYING</code>).</p>
+ </item>
+ </steps>
+
+</section>
+
+<section id="playback">
+ <title>Stopping playback</title>
+ <p>We don't want to play an annoying tone forever, so the last thing <code>play_sound</code> does is to call <code>GObject.timeout_add</code>. This sets a timeout for stopping the sound; it waits for <code>LENGTH</code> milliseconds before calling the function <code>pipeline_stop</code>, and will keep calling it until <code>pipeline_stop</code> returns <code>False</code>.</p>
+ <p>Now, we'll write the <code>pipeline_stop</code> function which is called by <code>GObject.timeout_add</code>. Insert the following code <em>above</em> the <code>play_sound</code> function:</p>
+ <code mime="test/x-python"><![CDATA[
+def pipeline_stop(self, pipeline):
+ pipeline.set_state(Gst.State.PAUSED)
+ return False
+]]></code>
+ <p>You need to define the <code>LENGTH</code> constant inside the class, so add this code at the beginning of the
+main class:</p>
+ <code mime="test/x-python"><![CDATA[
+LENGTH = 500
+]]></code>
+ <p>The call to <code>pipeline.set_state</code> pauses the playback of the pipeline.</p>
+</section>
+
+<section id="tones">
+ <title>Define the tones</title>
+ <p>We want to play the correct sound when the user clicks a button. First of all, we need to know the frequencies for the six guitar strings, which are defined (at the beginning of the main class) inside a dictionary so
+we can easily map them to the names of the strings:</p>
+ <code mime="test/x-python"><![CDATA[
+# Frequencies of the strings
+frequencies = {
+ 'E': 369.23,
+ 'A': 440,
+ 'D': 587.33,
+ 'G': 783.99,
+ 'B': 987.77,
+ 'e': 1318.5
+}
+]]></code>
+ <p>Now to flesh out the signal handler that we defined earlier, <code>on_button_clicked</code>. We could have connected every button to a different signal handler, but that would lead to a lot of code duplication. Instead, we can use the label of the button to figure out which button was clicked:</p>
+ <code mime="test/x-python"><![CDATA[
+def on_button_clicked(self, button):
+ label = button.get_child()
+ text = label.get_label()
+
+ self.play_sound (self.frequencies[text])
+]]></code>
+ <p>The button that was clicked is passed as an argument (<code>button</code>) to <code>on_button_clicked</code>. We can get the label of that button by using <code>button.get_child</code>, and then get the text from that label using <code>label.get_label</code>.</p>
+ <p>The label text is then used as a key for the dictionary and <code>play_sound</code> is called with the frequency appropriate for that note. This plays the tone; we have a working guitar tuner!</p>
+</section>
+
+<section id="run2">
+ <title>Run the application</title>
+ <p>All of the code should now be ready to go. Click <guiseq><gui>Run</gui><gui>Execute</gui></guiseq> to start the application. 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="guitar-tuner/guitar-tuner.py">reference code</link>.</p>
+</section>
+
+<section id="next">
+ <title>Next steps</title>
+ <p>Here are some ideas for how you can extend this simple demonstration:</p>
+ <list>
+ <item>
+ <p>Have the program automatically cycle through the notes.</p>
+ </item>
+ <item>
+ <p>Make the program play recordings of real guitar strings being plucked.</p>
+ <p>To do this, you would need to set up a more complicated GStreamer pipeline which allows you to load and play back music files. You'll have to choose <link href="http://gstreamer.freedesktop.org/documentation/plugins.html";>decoder and demuxer</link> GStreamer elements based on the file format of your recorded sounds — MP3s use different elements to Ogg Vorbis files, for example.</p>
+ <p>You might need to connect the elements in more complicated ways too. This could involve using <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/chapter-intro-basics.html";>GStreamer concepts</link> that we didn't cover in this tutorial, such as <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/section-intro-basics-pads.html";>pads</link>. You may also find the <cmd>gst-inspect</cmd> command useful.</p>
+ </item>
+ <item>
+ <p>Automatically analyze notes that the user plays.</p>
+ <p>You could connect a microphone and record sounds from it using an <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-autoaudiosrc.html";>input source</link>. Perhaps some form of <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-plugin-spectrum.html";>spectrum analysis</link> would allow you to figure out what notes are being played?</p>
+ </item>
+ </list>
+</section>
+
+</page>
diff --git a/platform-overview/C/demo-guitar-tuner.vala.page b/platform-overview/C/demo-guitar-tuner.vala.page
new file mode 100644
index 0000000..1aabd97
--- /dev/null
+++ b/platform-overview/C/demo-guitar-tuner.vala.page
@@ -0,0 +1,282 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="demo-guitar-tuner.vala">
+
+ <info>
+ <link type="guide" xref="demos#vala"/>
+
+ <desc>Use <link href="http://developer.gnome.org/platform-overview/stable/gtk";>Gtk+</link> and <link href="http://developer.gnome.org/platform-overview/stable/gstreamer";>GStreamer</link> to build a simple guitar tuner application for GNOME. Shows off how to use the interface designer.</desc>
+
+ <revision pkgversion="0.1" version="0.1" date="2012-02-09" status="candidate"/>
+ <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>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ </credit>
+ </info>
+
+<title>Guitar Tuner</title>
+
+<synopsis>
+ <p>In this tutorial you will create an application which plays tones that you can use to tune a guitar. You will learn how to:</p>
+ <list type="numbered">
+ <item><p>Set up a basic project using the <link xref="getting-ready">Anjuta IDE</link>.</p></item>
+ <item><p>Create a simple GUI with <app>Anjuta</app>'s UI designer.</p></item>
+ <item><p>Use the <link href="http://developer.gnome.org/platform-overview/stable/gstreamer";>GStreamer</link> library to play sounds.</p></item>
+ </list>
+ <p>You'll need the following to be able to follow this tutorial:</p>
+ <list>
+ <item><p>Basic knowledge of the <link href="https://live.gnome.org/Vala/Tutorial";>Vala</link> programming language.</p></item>
+ <item><p>An installed copy of <app>Anjuta</app>.</p></item>
+ </list>
+</synopsis>
+
+<media type="image" mime="image/png" src="media/guitar-tuner.png"/>
+
+<section id="anjuta">
+ <title>Create a project in <app>Anjuta</app></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 <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>Click on the <gui>Vala</gui> tab and select <gui>Gtk+ (Simple)</gui>. Click <gui>Continue</gui>, and fill out your details on the next few pages. Use <file>guitar-tuner</file> as project name and directory.</p>
+ </item>
+ <item>
+ <p>Make sure that <gui>Configure external packages</gui> is switched <gui>ON</gui>. On the next page, select
+ <link href="http://valadoc.org/gstreamer-0.10/index.htm";><em>gstreamer-0.10</em></link> from the list to include the GStreamer library in your project. Click <gui>Continue</gui></p>
+ </item>
+ <item>
+ <p>Click <gui>Apply</gui> and the project will be created for you. From the <gui>Project</gui> or <gui>Files</gui> tab, open <file>src/guitar_tuner.vala</file> by double-clicking on it. You should see some code which starts with the lines:</p>
+ <code mime="text/x-valasrc"><![CDATA[
+using GLib;
+using Gtk;]]></code>
+ </item>
+ </steps>
+</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. More details are given below; you may choose to skip this list if you understand the basics:</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/guitar-tuner.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. 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>
+
+<section id="ui">
+ <title>Create the user interface</title>
+ <p>A description of the user interface (UI) is contained in the GtkBuilder file <file>src/guitar_tuner.ui</file> defined at the top of the class. To edit the user interface, open <file>src/guitar_tuner.ui</file> by double-clicking on it in the <gui>Project</gui> or <gui>Files</gui> section. This will switch to the interface designer. The design window is in the center; <gui>Widgets</gui> and the widget properties are on the right, and the <gui>Palette</gui> of available widgets is on the left.
+ </p>
+ <p>The layout of every UI in GTK+ is organized using boxes and tables. Let's use a vertical GtkButtonBox here to assign six GtkButtons, one for each of the six guitar strings.</p>
+
+<media type="image" mime="image/png" src="media/guitar-tuner-glade.png"/>
+
+ <steps>
+ <item>
+ <p>In the <gui>Palette</gui> tab, from the <gui>Containers</gui> section, select a <gui>Button Box</gui> (GtkButtonBox) by clicking on the icon. Then click on the design window in the center to place it into the window. A dialog will display where you can set the <gui>Number of items</gui> to <input>6</input>. Then click <gui>Create</gui>.</p>
+ <note><p>
+ You can also change the <gui>Number of elements</gui> and the <gui>Orientation</gui> in the <gui>General</gui> tab on the right.</p></note>
+ </item>
+ <item>
+ <p>Now, from the <gui>Control and Display</gui> section of the <gui>Palette</gui> choose a <gui>Button</gui> (GtkButton) by clicking on it. Place it into the first section of the GtkButtonBox by clicking in the first section.</p>
+ </item>
+ <item>
+ <p>While the button is still selected, scroll down in the <gui>General</gui> tab on the right to the <gui>Label</gui> property, and change it to <gui>E</gui>. This will be the low E guitar string.</p>
+ <note><p>
+ The <gui>General</gui> tab is located in the <gui>Widgets</gui> section on the right.
+ </p></note>
+ </item>
+ <item>
+ <p>Click on the <gui>Signals</gui> tab in the <gui>Widgets</gui> section on the right, and look for the <code>clicked</code> signal of the button. You can use this to connect a signal handler that will be called when the button is clicked by the user. To do this, click on the signal and type <code>main_on_button_clicked</code> in the <gui>Handler</gui> column and press the <key>Enter</key>.</p>
+ </item>
+ <item>
+ <p>Repeat the above steps for the other buttons, adding the next 5 strings with the names <em>A</em>, <em>D</em>, <em>G</em>, <em>B</em>, and <em>e</em>.</p>
+ </item>
+ <item>
+ <p>Save the UI design (by clicking <guiseq><gui>File</gui><gui>Save</gui></guiseq>) and keep it open.</p>
+ </item>
+ </steps>
+</section>
+
+<section id="gstreamer">
+ <title>GStreamer pipelines</title>
+ <p>This section will show you how to create the code to produce sounds. <link href="http://developer.gnome.org/platform-overview/stable/gstreamer";>GStreamer</link> is GNOME's multimedia framework — you can use it for playing, recording, and processing video, audio, webcam streams and the like. Here, we'll be using it to produce single-frequency tones.</p>
+ <p>Conceptually, GStreamer works as follows: You create a <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/section-intro-basics-bins.html";><em>pipeline</em></link> containing several processing elements going from the <em>source</em> to the <em>sink</em> (output). The source can be an image file, a video, or a music file, for example, and the output could be a widget or the soundcard.</p>
+ <p>Between source and sink, you can apply various filters and converters to handle effects, format conversions and so on. Each element of the pipeline has properties which can be used to change its behaviour.</p>
+ <media type="image" mime="image/png" src="media/guitar-tuner-pipeline.png">
+ <p>An example GStreamer pipeline.</p>
+ </media>
+</section>
+
+<section id="pipeline">
+ <title>Set up the pipeline</title>
+ <p>In this example we will use a tone generator source called <code>audiotestsrc</code> and send the output to the default system sound device, <code>autoaudiosink</code>. We only need to configure the frequency of the tone generator; this is accessible through the <code>freq</code> property of <code>audiotestsrc</code>.</p>
+
+ <p>We need to add a line to initialize GStreamer; put the following code on the line above the <code>Gtk.init</code> call in the <code>main</code> function:</p>
+ <code mime="text/x-valasrc"><![CDATA[Gst.init (ref args);]]></code>
+ <p>Then, copy the following function into <file>guitar_tuner.vala</file> inside our <code>Main</code> class:</p>
+ <code mime="text/x-valasrc"><![CDATA[
+Gst.Element sink;
+Gst.Element source;
+Gst.Pipeline pipeline;
+
+private void play_sound(double frequency)
+{
+ pipeline = new Gst.Pipeline ("note");
+ source = Gst.ElementFactory.make ("audiotestsrc",
+ "source");
+ sink = Gst.ElementFactory.make ("autoaudiosink",
+ "output");
+
+ /* set frequency */
+ source.set ("freq", frequency);
+
+ pipeline.add (source);
+ pipeline.add (sink);
+ source.link (sink);
+
+ pipeline.set_state (Gst.State.PLAYING);
+
+ /* stop it after 200ms */
+ var time = new TimeoutSource(200);
+
+ time.set_callback(() => {
+ pipeline.set_state (Gst.State.PAUSED);
+ return false;
+ });
+ time.attach(null);
+}]]></code>
+
+ <steps>
+ <item>
+ <p>The first three lines create source and sink GStreamer elements (<link href="http://valadoc.org/gstreamer-0.10/Gst.Element.html";><code>Gst.Element</code></link>), and a <link href="http://valadoc.org/gstreamer-0.10/Gst.Pipeline.html";>pipeline element</link> (which will be used as a container for the other two elements). Those are class variables so they are defined outside the method. The pipeline is given the name "note"; the source is named "source" and is set to the <code>audiotestsrc</code> source; and the sink is named "output" and set to the <code>autoaudiosink</code> sink (default sound card output).</p>
+ </item>
+ <item>
+ <p>The call to <link href="http://valadoc.org/gobject-2.0/GLib.Object.set.html";><code>source.set</code></link> sets the <code>freq</code> property of the source element to <code>frequency</code>, which is passed in as an argument to the <code>play_sound</code> function. This is just the frequency of the note in Hertz; some useful frequencies will be defined later on.</p>
+ </item>
+ <item>
+ <p><link href="http://valadoc.org/gstreamer-0.10/Gst.Bin.add.html";><code>pipeline.add</code></link> puts the source and sink into the pipeline. The pipeline is a <link href="http://valadoc.org/gstreamer-0.10/Gst.Bin.html";><code>Gst.Bin</code></link>, which is just an element that can contain multiple other GStreamer elements. In general, you can add as many elements as you like to the pipeline by adding more calls to <code>pipeline.add</code>.</p>
+ </item>
+ <item>
+ <p>Next, <link href="http://valadoc.org/gstreamer-0.10/Gst.Element.link.html";><code>sink.link</code></link> is used to connect the elements together, so the output of source (a tone) goes into the input of sink (which is then output to the sound card). <link href="http://www.valadoc.org/gstreamer-0.10/Gst.Element.set_state.html";><code>pipeline.set_state</code></link> is then used to start playback, by setting the <link href="http://www.valadoc.org/gstreamer-0.10/Gst.State.html";>state of the pipeline</link> to playing (<code>Gst.State.PLAYING</code>).</p>
+ </item>
+ <item>
+ <p>We don't want to play an annoying tone forever, so the last thing <code>play_sound</code> does is to
+ add a <link href="http://www.valadoc.org/glib-2.0/GLib.TimeoutSource.html";><code>TimeoutSource</code></link>. This sets a timeout for stopping the sound; it waits for 200 milliseconds before
+ calling a signal handler defined inline that stops and destroys the pipeline. It returns <code>false</code> to
+ remove itself from the timeout, otherwise it would continue to be called every 200 ms.</p>
+ </item>
+ </steps>
+</section>
+
+
+<section id="signal">
+ <title>Creating the signal handler</title>
+ <p>In the UI designer, you made it so that all of the buttons will call the same function, <gui>on_button_clicked</gui>, when they are clicked. Actually we type <gui>main_on_button_clicked</gui> which tells the UI designer that this method is part of our <code>Main</code>. We need to add that function in the source file.</p>
+ <p>To do this, in the user interface file (guitar_tuner.ui) select one of the buttons by clicking on it, then open <file>guitar_tuner.vala</file> (by clicking on the tab in the center). Switch to the <gui>Signals</gui> tab on the right, which you used to set the signal name. Now take the row where you set the
+<gui>clicked</gui> signal and drag and drop it into to the source file at the beginning of the class. The following code will be added to your source file:</p>
+<code mime="text/x-valasrc"><![CDATA[
+[CCode (instance_pos=-1)]
+public void on_button_clicked (Gtk.Button sender) {
+
+}]]></code>
+
+ <note><p>You can also just type the code at the beginning of the class instead of using the drag and drop.</p></note>
+ <p>This signal handler has only one argument: the <link href="http://valadoc.org/gtk+-3.0/Gtk.Widget.html";><code>Gtk.Widget</code></link> that called the function (in our case, always a <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.html";><code>Gtk.Button</code></link>). The additonal <code>[CCode (instance_pos=-1)]</code> tells the compiler that this is a signal handler
+that needs special treating while linking in order to be found at runtime.</p>
+</section>
+
+
+<section id="handler">
+ <title>Define the signal handler</title>
+ <p>We want to play the correct sound when the user clicks a button. For this, we flesh out the signal handler which we defined above, <code>on_button_clicked</code>. We could have connected every button to a different signal handler, but that would lead to a lot of code duplication. Instead, we can use the label of the button to figure out which button was clicked:</p>
+ <code mime="text/x-valasrc"><![CDATA[
+public void on_button_clicked (Gtk.Button sender) {
+ var label = sender.get_child () as Gtk.Label;
+ switch (label.get_label()) {
+ case "E":
+ play_sound (369.23);
+ break;
+ case "A":
+ play_sound (440);
+ break;
+ case "D":
+ play_sound (587.33);
+ break;
+ case "G":
+ play_sound (783.99);
+ break;
+ case "B":
+ play_sound (987.77);
+ break;
+ case "e":
+ play_sound (1318);
+ break;
+ default:
+ break;
+ }
+}
+]]></code>
+ <p>The <code>Gtk.Button</code> that was clicked is passed as an argument (<code>sender</code>) to <code>on_button_clicked</code>. We can get the label of that button by using <code>get_child</code>, and then get the text from that label using <code>get_label</code>.</p>
+ <p>The switch statement compares the label text to the notes that we can play, and <code>play_sound</code> is called with the frequency appropriate for that note. This plays the tone; we have a working guitar tuner!</p>
+</section>
+
+<section id="run">
+ <title>Build and run the application</title>
+ <p>All of the code should now be ready to go. Click <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> to build everything again, and 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/guitar-tuner</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="guitar-tuner/guitar-tuner.vala">reference code</link>.</p>
+</section>
+
+<section id="further">
+<title>Further reading</title>
+<p>To find out more about the Vala programming language you might want to check out the
+<link href="http://live.gnome.org/Vala/Tutorial";>Vala Tutorial</link> and the <link href="http://valadoc.org/";>Vala API Documentation</link></p>
+</section>
+
+<section id="next">
+ <title>Next steps</title>
+ <p>Here are some ideas for how you can extend this simple demonstration:</p>
+ <list>
+ <item>
+ <p>Have the program automatically cycle through the notes.</p>
+ </item>
+ <item>
+ <p>Make the program play recordings of real guitar strings being plucked.</p>
+ <p>To do this, you would need to set up a more complicated GStreamer pipeline which allows you to load and play back music files. You'll have to choose <link href="http://gstreamer.freedesktop.org/documentation/plugins.html";>decoder and demuxer</link> GStreamer elements based on the file format of your recorded sounds — MP3s use different elements to Ogg Vorbis files, for example.</p>
+ <p>You might need to connect the elements in more complicated ways too. This could involve using <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/chapter-intro-basics.html";>GStreamer concepts</link> that we didn't cover in this tutorial, such as <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/section-intro-basics-pads.html";>pads</link>. You may also find the <cmd>gst-inspect</cmd> command useful.</p>
+ </item>
+ <item>
+ <p>Automatically analyze notes that the user plays.</p>
+ <p>You could connect a microphone and record sounds from it using an <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-autoaudiosrc.html";>input source</link>. Perhaps some form of <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-plugin-spectrum.html";>spectrum analysis</link> would allow you to figure out what notes are being played?</p>
+ </item>
+ </list>
+</section>
+
+</page>
diff --git a/platform-overview/C/demo-image-viewer.c.page b/platform-overview/C/demo-image-viewer.c.page
new file mode 100644
index 0000000..6b7937f
--- /dev/null
+++ b/platform-overview/C/demo-image-viewer.c.page
@@ -0,0 +1,243 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="demo-image-viewer.c">
+
+ <info>
+ <link type="guide" xref="demos#c"/>
+
+ <desc>A little bit more than a simple "Hello world" Gtk application.</desc>
+
+ <revision pkgversion="0.1" version="0.1" date="2011-03-18" 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>
+ </info>
+
+<title>Image Viewer</title>
+
+<synopsis>
+ <p>In this tutorial, you will learn:</p>
+ <list>
+ <item><p>Some basic concepts of C/GObject programming</p></item>
+ <item><p>How to write a Gtk application in C</p></item>
+ </list>
+</synopsis>
+
+<media type="image" mime="image/png" src="media/image-viewer.png"/>
+
+<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>image-viewer</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 if you want to learn how to use the interface builder.</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="build">
+ <title>Build the code for the first time</title>
+ <p>C is a rather verbose language, so don't be surprised that the file contains quite a lot of code. Most of it is template code. It loads an (empty) window and shows it. More details are given below; skip this list if you understand the basics:</p>
+
+ <list>
+ <item>
+ <p>The three <code>#include</code> lines at the top include the <code>config</code> (useful autoconf build defines), <code>gtk</code> (user interface) and <code>gi18n</code> (internationalization) libraries. Functions from these libraries are used in the rest of the code.</p>
+ </item>
+ <item>
+ <p>The <code>create_window</code> function creates a new (empty) window and connects a signal to exit the application when that window is closed.</p>
+ <p>Connecting signals is how you define what happens when you push a button, or when some other event happens. Here, the <code>destroy</code> function is called (and quits the app) when you close the window.</p>
+ </item>
+ <item>
+ <p>The <code>main</code> function is run by default when you start a C application. It calls a few functions which 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>
+ <item>
+ <p>The <code>ENABLE_NLS</code> conditional definition sets up <code>gettext</code>, which is a framework for translating applications. These functions specify how translation tools should handle your app when you run them.</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>).</p>
+ <p>Press <gui>Execute</gui> on the next window that appears to configure a debug build. You only need to do this once, for the first build.</p>
+</section>
+
+<section id="ui">
+<title>Creating the user interface</title>
+<p>Now we will bring life into the empty window. GTK organizes the user interface
+with <code>GtkContainer</code>s that can contain other widgets and even other containers. Here we
+will use the simplest available container, a <code>GtkBox</code>:</p>
+<code mime="text/x-csrc"><![CDATA[
+static GtkWidget*
+create_window (void)
+{
+ GtkWidget *window;
+ GtkWidget *button;
+ GtkWidget *image;
+ GtkWidget *box;
+
+ /* Set up the UI */
+ window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
+ gtk_window_set_title (GTK_WINDOW (window), "image-viewer-c");
+
+ box = gtk_box_new (GTK_ORIENTATION_VERTICAL, 5);
+ button = gtk_button_new_with_label (_("Open image"));
+ image = gtk_image_new ();
+
+ gtk_box_pack_start (GTK_BOX (box), image, TRUE, TRUE, 0);
+ gtk_box_pack_start (GTK_BOX (box), button, FALSE, FALSE, 0);
+
+ gtk_container_add (GTK_CONTAINER (window), box);
+
+ /* Connect signals */
+
+ /* Show open dialog when opening a file */
+ g_signal_connect (button, "clicked", G_CALLBACK (on_open_image), image);
+
+ /* Exit when the window is closed */
+ g_signal_connect (window, "destroy", G_CALLBACK (gtk_main_quit), NULL);
+
+ return window;
+}
+]]></code>
+ <steps>
+ <item>
+ <p>The first lines create the widgets we want to use: a button for opening up an image, the image view widget itself and
+ the box we will use as a container. The macros like <code>GTK_BOX</code> are used for dynamic type checking and casting
+ which is needed as C doesn't support object-orientation out-of-the-box.</p>
+ </item>
+ <item>
+ <p>The calls to <code>gtk_box_pack_start</code> add the two widgets to the box and define their behaviour. The image will
+ expand into any available space while the button will just be as big as needed. You will notice that we don't set
+ explicit sizes on the widgets. In GTK this is usually not needed as it makes it much easier to have a layout that
+ looks good in different window sizes. Next, the box is added to the window.</p>
+ </item>
+ <item>
+ <p>We need to define what happens when the user clicks on the button. GTK uses the concept of <em>signals</em>. When the button is clicked, it fires the <em>clicked</em> signal, which we can connect to some action. This is done using the <code>g_signal_connect</code>
+ function which tells GTK to call the <code>on_image_open</code> function when the button is clicked and
+ to pass the image as an additional argument to that function. We will define the <em>callback</em> in the next section.</p>
+ </item>
+ <item>
+ <p>The last <code>g_signal_connect()</code> makes sure that the application exits when the window is closed.</p>
+ </item>
+ <item>
+ <p>As a last step, make sure to replace the <code>gtk_widget_show</code> call in the <code>main()</code> function by
+ <code>gtk_widget_show_all()</code> to show the window and all the widgets it contains.</p>
+ </item>
+ </steps>
+</section>
+
+<section id="image">
+<title>Showing the image</title>
+<p>We will now define the signal handler for the <em>clicked</em> signal or the
+button we mentioned before. Add this code before the <code>create_window()</code>
+method.</p>
+<code mime="text/x-csrc"><![CDATA[
+static void
+on_open_image (GtkButton* button, gpointer user_data)
+{
+ GtkWidget *image = GTK_WIDGET (user_data);
+ GtkWidget *toplevel = gtk_widget_get_toplevel (image);
+ GtkFileFilter *filter = gtk_file_filter_new ();
+ GtkWidget *dialog = gtk_file_chooser_dialog_new (_("Open image"),
+ GTK_WINDOW (toplevel),
+ GTK_FILE_CHOOSER_ACTION_OPEN,
+ GTK_STOCK_OK, GTK_RESPONSE_ACCEPT,
+ GTK_STOCK_CANCEL, GTK_RESPONSE_CANCEL,
+ NULL);
+
+ gtk_file_filter_add_pixbuf_formats (filter);
+ gtk_file_chooser_add_filter (GTK_FILE_CHOOSER (dialog),
+ filter);
+
+ switch (gtk_dialog_run (GTK_DIALOG (dialog)))
+ {
+ case GTK_RESPONSE_ACCEPT:
+ {
+ gchar *filename =
+ gtk_file_chooser_get_filename (GTK_FILE_CHOOSER (dialog));
+ gtk_image_set_from_file (GTK_IMAGE (image), filename);
+ break;
+ }
+ default:
+ break;
+ }
+ gtk_widget_destroy (dialog);
+}
+]]></code>
+ <p>This is a bit more complicated than anything we've attempted so far, so let's break it down:</p>
+ <list>
+ <item><p>The first argument of the signal is always the widget that sent the signal. Sometimes
+ other arguments related to the signal come after that, but <em>clicked</em> doesn't have any. Next is
+ the <code>user_data</code> argument which is a pointer to the data we passed when connecting the signal.
+ In this case it is our <code>GtkImage</code> object.</p>
+ </item>
+ <item>
+ <p>The next interesting line is where the dialog for choosing the file is created using
+ <code>gtk_file_chooser_dialog_new</code>. The function takes the title of the dialog, the
+ parent window of the dialog and several options like the number of buttons and their corresponding
+ values.</p>
+ <p>Notice that we are using <em>stock</em> button names from Gtk, instead of manually typing "Cancel" or "Open". The advantage of using stock names is that the button labels will already be translated into the user's language.</p>
+ </item>
+ <item>
+ <p>The next two lines restrict the <gui>Open</gui> dialog to only display files which can be opened by GtkImage. A filter object is created first; we then add all kinds of files supported by <code>GdkPixbuf</code> (which includes most image formats like PNG and JPEG) to the filter. Finally, we set this filter to be the <gui>Open</gui> dialog's filter.</p>
+ </item>
+ <item>
+ <p><code>gtk_dialog_run</code> displays the <gui>Open</gui> dialog. The dialog will wait for the user to choose an image; when they do, <code>gtk_dialog_run</code> will return the value <code>GTK_RESPONSE_ACCEPT</code> (it would return <code>GTK_RESPONSE_CANCEL</code> if the user clicked <gui>Cancel</gui>). The <code>switch</code> statement tests for this.</p>
+ </item>
+ <item><p>Assuming that the user did click <gui>Open</gui>, the next line sets the <code>file</code> property of the GtkImage to the filename of the image selected by the user. The GtkImage will then load and display the chosen image.</p>
+ </item>
+ <item>
+ <p>In the final line of this method, we destroy the <gui>Open</gui> dialog because we don't need it any more.
+ Destroying automatically hides the dialog.</p>
+ </item>
+ </list>
+</section>
+
+<section id="run">
+ <title>Build and run the application</title>
+ <p>All of the code should now be ready to go. Click <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> to build everything again, and 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/image-viewer</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="image-viewer/image-viewer.c">reference code</link>.</p>
+</section>
+
+<section id="next">
+ <title>Next steps</title>
+ <p>Here are some ideas for how you can extend this simple demonstration:</p>
+ <list>
+ <item>
+ <p>Have the user select a directory rather than a file, and provide controls to cycle through all of the images in a directory.</p>
+ </item>
+ <item>
+ <p>Apply random filters and effects to the image when it is loaded and allow the user to save the modified image.</p>
+ <p><link href="http://www.gegl.org/api.html";>GEGL</link> provides powerful image manipulation capabilities.</p>
+ </item>
+ <item>
+ <p>Allow the user to load images from network shares, scanners, and other more complicated sources.</p>
+ <p>You can use <link href="http://library.gnome.org/devel/gio/unstable/";>GIO</link> to handle network file tranfers and the like, and <link href="http://library.gnome.org/devel/gnome-scan/unstable/";>GNOME Scan</link> to handle scanning.</p>
+ </item>
+ </list>
+</section>
+
+
+</page>
diff --git a/platform-overview/C/demo-image-viewer.cpp.page b/platform-overview/C/demo-image-viewer.cpp.page
new file mode 100644
index 0000000..c61ea36
--- /dev/null
+++ b/platform-overview/C/demo-image-viewer.cpp.page
@@ -0,0 +1,235 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="demo-image-viewer.cpp">
+
+ <info>
+ <link type="guide" xref="demos#cpp"/>
+
+ <desc>A little bit more than a simple "Hello world" GTKmm application.</desc>
+
+ <revision pkgversion="0.1" version="0.1" date="2011-03-18" 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>
+ </info>
+
+<title>Image Viewer</title>
+
+<synopsis>
+ <p>In this tutorial, you will learn:</p>
+ <list>
+ <item><p>Some basic concepts of C++/GObject programming</p></item>
+ <item><p>How to write a Gtk application in C++</p></item>
+ </list>
+</synopsis>
+
+<media type="image" mime="image/png" src="media/image-viewer.png"/>
+
+<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>GTKmm (Simple)</gui> from the <gui>C++</gui> tab, click <gui>Forward</gui>, and fill out your details on the next few pages. Use <file>image-viewer</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.cpp">Guitar-Tuner</link>
+ tutorial if you want to learn how to use the interface builder.</p>
+ </item>
+ <item>
+ <p>Click <gui>Apply</gui> and the project will be created for you. Open <file>src/main.cc</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 <gtkmm.h>
+#include <iostream>
+
+#include "config.h">]]></code>
+ </item>
+ </steps>
+</section>
+
+<section id="build">
+ <title>Build the code for the first time</title>
+ <p>This is a very basic C++ code setting up GTKmm. More details are given below; skip this list if you understand the basics:</p>
+ <list>
+ <item>
+ <p>The three <code>#include</code> lines at the top include the <code>config</code> (useful autoconf build defines), <code>gtkmm</code> (user interface) and <code>iostream</code> (C++-STL) libraries. Functions from these libraries are used in the rest of the code.</p>
+ </item>
+ <item>
+ <p>The <code>main</code> function creates a new (empty) window and sets the window title.</p>
+ </item>
+ <item>
+ <p>The <code>kit::run()</code> call starts the GTKmm main loop, which runs the user interface and starts listening for events (like clicks and key presses). As we give the window
+ as an argument to that function, the application will automatically exit when
+ that window is closed.</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>).</p>
+ <p>Press <gui>Execute</gui> on the next window that appears to configure a debug build. You only need to do this once, for the first build.</p>
+</section>
+
+<section id="ui">
+<title>Creating the user interface</title>
+<p>Now we will bring life into the empty window. GTKmm organizes the user interface
+with <code>Gtk::Container</code>s that can contain other widgets and even other containers. Here we
+will use the simplest available container, a <code>Gtk::Box</code>:</p>
+<code mime="text/x-csrc"><![CDATA[
+int
+main (int argc, char *argv[])
+{
+ Gtk::Main kit(argc, argv);
+
+ Gtk::Window* main_win = new Gtk::Window(Gtk::WINDOW_TOPLEVEL);
+ main_win->set_title ("image-viewer-cpp");
+
+ Gtk::Box* box = new Gtk::Box();
+ box->set_orientation (Gtk::ORIENTATION_VERTICAL);
+ box->set_spacing(5);
+
+ Gtk::Image* image = new Gtk::Image();
+ box->pack_start (*image, true, true);
+
+ Gtk::Button* button = new Gtk::Button("Open Imageâ");
+ box->pack_start (*button, false, false);
+
+ main_win->add(*box);
+
+ button->signal_clicked().connect (sigc::bind<Gtk::Image*>(sigc::ptr_fun(&on_open_image), image));
+
+ main_win->show_all();
+
+ if (main_win)
+ {
+ kit.run(*main_win);
+ }
+ return 0;
+}
+]]></code>
+ <steps>
+ <item>
+ <p>The first lines create the widgets we want to use: a button for opening up an image, the image view widget itself and the box we will use as a container. </p>
+ </item>
+ <item>
+ <p>The calls to <code>pack_start</code> add the two widgets to the box and define their behaviour. The image will
+ expand into any available space while the button will just be as big as needed. You will notice that we don't set
+ explicit sizes on the widgets. In GTKmm this is usually not needed as it makes it much easier to have a layout that
+ looks good in different window sizes. Next, the box is added to the window.</p>
+ </item>
+ <item>
+ <p>We need to define what happens when the user clicks on the button. GTKmm uses the concept of <em>signals</em>. When the button is clicked, it fires the <em>clicked</em> signal, which we can connect to some action. This is done using the <code>signal_clicked().connect</code>
+ method which tells GTKmm to call the <code>on_open_image</code> function when the button is clicked and
+ to pass the image as an additional argument to that function. We will define the <em>callback</em> in the next section.</p>
+ </item>
+ <item>
+ <p>The last step is to show all widgets in the window using
+ <code>show_all()</code>. This is equivalent to using the <code>show()</code>
+ method on all our widgets.</p>
+ </item>
+ </steps>
+</section>
+
+<section id="show">
+<title>Showing the image</title>
+<p>We will now define the signal handler for the <em>clicked</em> signal or the
+button we mentioned before. Add this code before the <code>main</code>
+method.</p>
+<code mime="text/x-csrc"><![CDATA[
+static void
+on_open_image (Gtk::Image* image)
+{
+ Gtk::FileChooserDialog dialog("Open image",
+ Gtk::FILE_CHOOSER_ACTION_OPEN);
+ dialog.add_button (Gtk::Stock::OPEN,
+ Gtk::RESPONSE_ACCEPT);
+ dialog.add_button (Gtk::Stock::CANCEL,
+ Gtk::RESPONSE_CANCEL);
+
+ Glib::RefPtr<Gtk::FileFilter> filter =
+ Gtk::FileFilter::create();
+ filter->add_pixbuf_formats();
+ dialog.add_filter (filter);
+
+ switch (dialog.run())
+ {
+ case Gtk::RESPONSE_ACCEPT:
+ image->set(dialog.get_filename());
+ break;
+ default:
+ break;
+ }
+ dialog.hide();
+}
+]]></code>
+ <p>This is a bit more complicated than anything we've attempted so far, so let's break it down:</p>
+ <list>
+ <item><p>The argument to the signal is the image object that we passed while connecting the signal. Sometimes there are other arguments related to the signal, but <em>clicked</em> doesn't have any. </p> </item>
+ <item>
+ <p>The next interesting line is where the dialog for choosing the file is created using
+ <code>Gtk::FileChooserDialog</code>. The function takes the title of the dialog and
+ the type of dialog this should be. In our case, it is an <em>Open</em> dialog.</p>
+ </item>
+ <item>
+ <p>The next two lines add an <em>Open</em> and a <em>Close</em> button to the dialog.</p>
+ <p>Notice that we are using <em>stock</em> button names from Gtk, instead of manually typing "Cancel" or "Open". The advantage of using stock names is that the button labels will already be translated into the user's language.</p>
+ <p>The second argument to the <code>add_button()</code> method is a value to identify
+ the clicked button. We use predefined values provided by GTKmm here, too.
+ </p>
+ </item>
+ <item>
+ <p>The next two lines restrict the <gui>Open</gui> dialog to only display files which can be opened by <code>Gtk::Image</code>. A filter object is created first; we then add all kinds of files supported by <code>Gdk::Pixbuf</code> (which includes most image formats like PNG and JPEG) to the filter. Finally, we set this filter to be the <gui>Open</gui> dialog's filter.</p>
+ <p><code>Glib::RefPtr</code> is a smart pointer used here, that makes sure that the filter is
+ destroyed when there is no reference to it anymore.</p>
+ </item>
+ <item>
+ <p><code>dialog.run</code> displays the <gui>Open</gui> dialog. The dialog will wait for the user to choose an image; when they do, <code>dialog.run</code> will return the value <code>Gtk::RESPONSE_ACCEPT</code> (it would return <code>Gtk::RESPONSE_CANCEL</code> if the user clicked <gui>Cancel</gui>). The <code>switch</code> statement tests for this.</p>
+ </item>
+ <item><p>Assuming that the user did click <gui>Open</gui>, the next line loads the
+ file into the <code>Gtk::Image</code> so that it is displayed.</p>
+ </item>
+ <item>
+ <p>In the final line of this method, we hide the <gui>Open</gui> dialog because we don't need it any more. The dialog would be hidden anyway, as it is only a local variable and is
+ destroyed (and as such hidden) when the scope ends.</p>
+ </item>
+ </list>
+</section>
+
+<section id="build2">
+ <title>Build and run the application</title>
+ <p>All of the code should now be ready to go. Click <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> to build everything again, and 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/image-viewer</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="image-viewer/image-viewer.cc">reference code</link>.</p>
+</section>
+
+<section id="next">
+ <title>Next steps</title>
+ <p>Here are some ideas for how you can extend this simple demonstration:</p>
+ <list>
+ <item>
+ <p>Have the user select a directory rather than a file, and provide controls to cycle through all of the images in a directory.</p>
+ </item>
+ <item>
+ <p>Apply random filters and effects to the image when it is loaded and allow the user to save the modified image.</p>
+ <p><link href="http://www.gegl.org/api.html";>GEGL</link> provides powerful image manipulation capabilities.</p>
+ </item>
+ <item>
+ <p>Allow the user to load images from network shares, scanners, and other more complicated sources.</p>
+ <p>You can use <link href="http://library.gnome.org/devel/gio/unstable/";>GIO</link> to handle network file tranfers and the like, and <link href="http://library.gnome.org/devel/gnome-scan/unstable/";>GNOME Scan</link> to handle scanning.</p>
+ </item>
+ </list>
+</section>
+
+
+</page>
diff --git a/platform-overview/C/demo-image-viewer.js.page b/platform-overview/C/demo-image-viewer.js.page
new file mode 100644
index 0000000..ff6ae80
--- /dev/null
+++ b/platform-overview/C/demo-image-viewer.js.page
@@ -0,0 +1,332 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="demo-image-viewer.js">
+
+ <info>
+
+ <link type="guide" xref="demos#js"/>
+
+ <desc>A little bit more than a simple "Hello world" application - write an image viewer in GTK. Includes an introduction to the JavaScript language.</desc>
+
+ <revision pkgversion="0.1" version="0.1" date="2011-03-19" status="review"/>
+ <credit type="author">
+ <name>Jonh Wendell</name>
+ <email>jwendell gnome org</email>
+ </credit>
+ <credit type="author">
+ <name>Johannes Schmid</name>
+ <email>jhs gnome org</email>
+ </credit>
+
+ </info>
+
+<title>Image Viewer</title>
+
+<synopsis>
+ <p>In this tutorial, we're going to write a very simple GTK application that loads and displays an image file. You will learn how to:</p>
+ <list>
+ <item><p>Write a basic GTK user interface in JavaScript</p></item>
+ <item><p>Deal with events by connecting signals to signal handlers</p></item>
+ <item><p>Lay out GTK user interfaces using containers</p></item>
+ <item><p>Load and display image files</p></item>
+ </list>
+ <p>You'll need the following to be able to follow this tutorial:</p>
+ <list>
+ <item><p>An installed copy of the <link xref="getting-ready">Anjuta IDE</link></p></item>
+ <item><p>An installed copy of the <em>gjs</em> interpreter</p></item>
+ <item><p>Basic knowledge of any object-orientated programming language</p></item>
+ </list>
+</synopsis>
+
+<media type="image" mime="image/png" src="media/image-viewer.png"/>
+
+<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>image-viewer</file> as project name and directory.</p>
+ </item>
+ <item>
+ <p>Click <gui>Apply</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="js">
+ <title>JavaScript basics: Hello World</title>
+ <p>Before we start writing the image viewer, let's find out more about the way JavaScript is used in GNOME. Of course, your very first contact with any programming language should be the Hello World program which can already be found in <file>main.js</file>:</p>
+ <code mime="text/javascript">print ("Hello world!");</code>
+ <p>This should look quite natural if you're familiar with almost any other programming language. The function <code>print</code> is called with the argument <code>"Hello world!"</code>, which will be printed on the screen. Note that each line of code ends with a semicolon.</p>
+</section>
+
+<section id="classes">
+ <title>Classes in JavaScript</title>
+ <p>This is the standard way to define a class in JavaScript:</p>
+ <code mime="text/javascript" style="numbered"><![CDATA[
+function MyClass () {
+ this._init ();
+}
+
+MyClass.prototype = {
+
+ _init: function () {
+ this.propertyA = "This is an object's field";
+ this.propertyB = 10;
+ },
+
+ aMethod: function (arg1, arg2) {
+ print ("inside aMethod: " + arg1 + " " + arg2);
+ },
+
+ dumpProperties: function () {
+ print (this.propertyA);
+ print (this.propertyB);
+ }
+
+}]]></code>
+ <p>This defines a class called <code>MyClass</code>. Let's go through each part of the class definition:</p>
+ <steps>
+ <item>
+ <p><code>function MyClass</code> is the constructor of the class — its name must match the class's name. You can access any member of the class by using the <code>this</code> object; here, the constructor calls the class's <code>_init</code> method.</p>
+ </item>
+ <item>
+ <p>The <code>MyClass.prototype</code> block is where you define the <em>structure</em> of the class. Each class is made up of methods (functions) and fields (variables); there are three methods and two fields in this example.</p>
+ </item>
+ <item>
+ <p>The first method defined here is called <code>_init</code>, and we specify that it is a function with no arguments:</p>
+ <code>_init: function ()</code>
+ <p>We write the function inside some curly braces. Two fields are defined here, <code>propertyA</code> and <code>propertyB</code>. The first is set to a string and the second is set to an integer (10). The function doesn't return any value.</p>
+ </item>
+ <item>
+ <p>The next method is called <code>aMethod</code> and has two arguments, which it prints out when you call it. The final method is <code>dumpProperties</code>, and prints the fields <code>propertyA</code> and <code>propertyB</code>.</p>
+ </item>
+ <item>
+ <p>Note how the class definition (prototype) is arranged; each function definition is separated by a comma.</p>
+ </item>
+ </steps>
+
+ <p>Now that MyClass has been defined, we can play with it:</p>
+ <code mime="text/javascript" style="numbered"><![CDATA[
+var o = new MyClass ();
+o.aMethod ("Hello", "world");
+o.propertyA = "Just changed its value!";
+o.dumpProperties ();]]></code>
+ <p>This code creates a new instance of the class called <code>o</code>, runs <code>aMethod</code>, changes <code>propertyA</code> to a different string, and then calls <code>dumpProperties</code> (which outputs the fields).</p>
+ <p>Save the code in the <file>main.js</file> and then run it by using
+ <guiseq><gui>Run</gui><gui>Execute</gui></guiseq> from the menu or using the toolbar.</p>
+</section>
+
+<section id="gtk">
+ <title>A first Gtk application</title>
+ <p>Let's see what a very basic Gtk application looks like in JavaScript:</p>
+ <code mime="text/javascript" style="numbered"><![CDATA[
+const Gtk = imports.gi.Gtk;
+
+Gtk.init (0, null);
+
+var w = new Gtk.Window ({title: "Image Viewer Demo"});
+w.show ();
+
+Gtk.main ();]]></code>
+ <p>Let's take a look at what's happening:</p>
+ <list>
+ <item>
+ <p>The first line imports the Gtk namespace (that is, it includes the Gtk library). The libraries are provided by GObject Introspection (gi), which provides language bindings for many GNOME libraries.</p>
+ </item>
+ <item>
+ <p><code>Gtk.init</code> initializes the Gtk library; this statement is mandatory for all Gtk programs.</p>
+ </item>
+ <item>
+ <p>The next line creates the main window by creating a new <code>Gtk.Window</code> object. You can pass several properties to the window's constructor by using the syntax <code>{property: value, property: value, ...}</code>. In this case we are setting the title of the window.</p></item>
+ <item><p>The next line explicitly shows the window. In Gtk, every widget is hidden by default.</p></item>
+ <item><p>Finally, <code>Gtk.main</code> runs the main loop — in other words, it executes the program. The main loop listens for events (signals) from the user interface and then calls a signal handler which will do something useful. We'll learn more about signals shortly.</p></item>
+ </list>
+
+ <p>Save the code in <file>main.js</file> and run it. You will notice that the application does not quit when you close the window. This is because we haven't set up a signal handler to deal with the window's <code>destroy</code> (close) signal yet. We'll do this shortly, but for now you can just hit <keyseq><key>Ctrl</key><key>C</key></keyseq> in the terminal window to quit the program.</p>
+
+</section>
+
+<section id="classes2">
+ <title>Adding classes</title>
+ <p>The proper way of doing Gtk programming is by using classes. Let's rewrite the simple code you just wrote using classes:</p>
+ <code mime="text/javascript" style="numbered"><![CDATA[
+const Gtk = imports.gi.Gtk;
+
+function ImageViewer () {
+ this._init ();
+}
+
+ImageViewer.prototype = {
+ _init: function () {
+ this.window = new Gtk.Window ({title: "Image Viewer Demo"});
+ this.window.show ();
+ }
+}
+
+Gtk.init (0, null);
+var iv = new ImageViewer ();
+Gtk.main ();]]></code>
+ <!-- FIXME: Throws an error, "JS ERROR: !!! Unhandled type int32 releasing GArgument" on Ubuntu 10.10 -->
+ <p>Notice that the program is the same; we just moved the window creation code to our own <code>ImageViewer</code> class. The class's constructor calls the <code>_init</code> method, which creates and shows the window. We then create an instance of the class before running the main loop (<code>Gtk.main</code>).</p>
+ <p>This code is modular and can be split into multiple files easily. This makes it cleaner and easier to read.</p>
+</section>
+
+<section id="signals">
+ <title>Signals</title>
+ <p>Signals are one of the key concepts in Gtk programming. Whenever something happens to an object, it emits a signal; for example, when a button is clicked it gives off the <code>clicked</code> signal. If you want your program to do something when that event occurs, you must connect a function (a "signal handler") to that signal. Here's an example:</p>
+ <code mime="text/javascript" style="numbered"><![CDATA[
+function button_clicked () {
+ print ("you clicked me!");
+}
+var b = new Gtk.Button ({label:"Click me"});
+b.connect ("clicked", button_clicked);]]></code>
+ <p>The last two lines create a <code>Gtk.Button</code> called <code>b</code> and connect its <code>clicked</code> signal to the <code>button_clicked</code> function, which is defined above. Every time the button is clicked, the code in the <code>button_clicked</code> function will be executed. It just prints a message here.</p>
+ <p>The syntax for connecting any signal to a function is:</p>
+ <code mime="text/javascript"><![CDATA[
+object.connect (<signal_name>, <function_to_be_called>);]]></code>
+ <p>You can find signal definitions for any object in the <link href="http://library.gnome.org/devel/gtk/stable/ch01.html";>GTK class reference</link>.</p>
+
+ <note>
+ <p>You can simplify the code by making use of an inline function definition:</p>
+ <code mime="text/javascript"><![CDATA[
+b.connect ("clicked", function () { print ("you clicked me!"); });]]></code>
+ </note>
+
+</section>
+
+<section id="close">
+ <title>Closing the window</title>
+ <p>When you close a Gtk window it's not really closed, it's hidden. This allows you to keep the window around (which is useful if you want to ask the user if they really want to close the window, for example).</p>
+ <p>In our case, we really do just want to close the window. The simplest way of doing this is by connecting the <code>hide</code> signal of the GtkWindow object to a function that closes the application. Go back to the <file>image-viewer.js</file> file and add the following code to the <code>_init</code> method, on the line above <code>this.window.show</code>:</p>
+ <code mime="text/javascript" style="numbered">this.window.connect ("hide", Gtk.main_quit);</code>
+ <p>This connects the <code>hide</code> signal of the window to Gtk's <code>main_quit</code> function, which ends the execution of the Gtk main loop. Once the main loop finishes, the function <code>Gtk.main</code> returns. Our program would continue to run any code written after the <code>Gtk.main ();</code> line, but since we don't have any code after that point, the program just ends.</p>
+</section>
+
+<section id="containers2">
+ <title>Containers: Laying-out the user interface</title>
+ <p>Widgets (controls, such as buttons and labels) can be arranged in the window by making use of <em>containers</em>. You can organize the layout by mixing different types of containers, like boxes and grids.</p>
+ <p>A <code>Gtk.Window</code> is itself a type of container, but you can only put one widget directly into it. We would like to have two widgets, an image and a button, so we must put a "higher-capacity" container inside the window to hold the other widgets. A number of <link href="http://library.gnome.org/devel/gtk/stable/GtkContainer.html";>container types</link> are available, but we will use a <code>Gtk.Box</code> here. A <code>Gtk.Box</code> can hold several widgets, organized horizontally or vertically. You can do more complicated layouts by putting several boxes inside another box and so on.</p>
+ <note>
+ <p>There is a graphical user interface designer called <app>Glade</app> integrated in <app>Anjuta</app> which makes UI design really easy. For this simple example, however, we will code everything manually.</p>
+ </note>
+ <p>Let's add the box and widgets to the window. Insert the following code into the <code>_init</code> method, immediately above the <code>this.window.show</code> line:</p>
+ <code mime="text/javascript" style="numbered"><![CDATA[
+var main_box = new Gtk.Box ({orientation: Gtk.Orientation.VERTICAL, spacing: 0});
+this.window.add (main_box);]]></code>
+ <p>The first line creates a <code>Gtk.Box</code> called <code>main_box</code> and sets two of its properties: the <code>orientation</code> is set to vertical (so widgets are arranged in a column), and the <code>spacing</code> between the widgets is set to 0 pixels. The next line then adds the newly-created <code>Gtk.Box</code> to the window.</p>
+ <p>So far the window only contains an empty <code>Gtk.Box</code>, and if you run the program now you will see no changes at all (the <code>Gtk.Box</code> is a transparent container, so you can't see that it's there).</p>
+</section>
+
+<section id="packing2">
+ <title>Packing: Adding widgets to the container</title>
+ <p>To add some widgets to the <code>Gtk.Box</code>, insert the following code directly below the <code>this.window.add (main_box)</code> line:</p>
+ <code mime="text/javascript" style="numbered"><![CDATA[
+this.image = new Gtk.Image ();
+main_box.pack_start (this.image, true, true, 0);]]></code>
+ <p>The first line creates a new <code>Gtk.Image</code> called <code>image</code>, which will be used to display an image file. Then, the image widget is added (<em>packed</em>) into the <code>main_box</code> container using <code>Gtk.Box</code>'s <link href="http://library.gnome.org/devel/gtk/stable/GtkBox.html#gtk-box-pack-start";><code>pack_start</code></link> method.</p>
+ <p><code>pack_start</code> takes 4 arguments: the widget that is to be added to the <code>Gtk.Box</code> (<code>child</code>); whether the <code>Gtk.Box</code> should grow larger when the new widget is added (<code>expand</code>); whether the new widget should take up all of the extra space created if the <code>Gtk.Box</code> gets bigger (<code>fill</code>); and how much space there should be, in pixels, between the widget and its neighbors inside the <code>Gtk.Box</code> (<code>padding</code>).</p>
+ <p>Gtk containers (and widgets) dynamically expand to fill the available space, if you let them. You don't position widgets by giving them a precise x,y-coordinate location in the window; rather, they are positioned relative to one another. This makes handling window resizing much easier, and widgets should automatically take a sensible size in most situations.</p>
+ <p>Also note how the widgets are organized in a hierarchy. Once packed in the <code>Gtk.Box</code>, the <code>Gtk.Image</code> is considered a <em>child</em> of the <code>Gtk.Box</code>. This allows you to treat all of the children of a widget as a group; for example, you could hide the <code>Gtk.Box</code>, which would also hide all of its children at the same time.</p>
+ <p>Now insert these two lines, below the two you just added:</p>
+ <code mime="text/javascript" style="numbered"><![CDATA[
+var open_button = new Gtk.Button ({label: "Open a picture..."});
+main_box.pack_start (open_button, false, false, 0);]]></code>
+ <p>These lines are similar to the first two, but this time they create a <code>Gtk.Button</code> and add it to <code>main_box</code>. Notice that we are setting the <code>expand</code> argument (the second one) to <code>false</code> here, whereas it was set to <code>true</code> for the <code>Gtk.Image</code>. This will cause the image to take up all available space and the button to take only the space it needs. When you maximize the window, the button size will remain the same, but the image size will increase, taking up all of the rest of the window.</p>
+ <p>Finally, we must change the <code>this.window.show ();</code> line to read:</p>
+ <code>this.window.show_all ();</code>
+ <p>This will show the child of the Gtk window, and all of its children, and its children's children, and so on. (Remember that Gtk widgets are all hidden by default.)</p>
+</section>
+
+<section id="loading2">
+ <title>Loading the image: Connecting to the button's <code>clicked</code> signal</title>
+ <p>When the user clicks on the <gui>Open</gui> button, a dialog should appear so that the user can choose a picture. Once chosen, the picture should be loaded and shown in the image widget.</p>
+ <p>The first step is to connect the <code>clicked</code> signal of the button to a signal handler function, which we call <code>_openClicked</code>. Put this code immediately after the <code>var open_button = new Gtk.Button</code> line where the button was created:</p>
+ <code mime="text/javascript"><![CDATA[
+open_button.connect ("clicked", Lang.bind (this, this._openClicked));]]></code>
+ <p>We are using the <em>Lang</em> JavaScript helper here. It allows us to connect a <em>class method</em> to the signal, rather than a plain function (without a class) which we had used before for the window's <code>hide</code> signal. Don't worry about this for now, it's just a technical detail. For it to work, you also need to put the following line at the top of the file:</p>
+ <code mime="text/javascript">const Lang = imports.lang;</code>
+</section>
+
+<section id="loading3">
+ <title>Loading the image: Writing the signal's callback</title>
+ <p>Now we can create the <code>_openClicked()</code> method. Insert the following into the <code>ImageViewer.prototype</code> code block, after the <code>_init</code> method (and not forgetting the comma):</p>
+ <code mime="text/javascript" style="numbered"><![CDATA[
+ _openClicked: function () {
+ var chooser = new Gtk.FileChooserDialog ({title: "Select an image",
+ action: Gtk.FileChooserAction.OPEN,
+ transient_for: this.window,
+ modal: true});
+ chooser.add_button (Gtk.STOCK_CANCEL, 0);
+ chooser.add_button (Gtk.STOCK_OPEN, 1);
+ chooser.set_default_response (1);
+
+ var filter = new Gtk.FileFilter ();
+ filter.add_pixbuf_formats ();
+ chooser.filter = filter;
+
+ if (chooser.run () == 1)
+ this.image.file = chooser.get_filename ();
+
+ chooser.destroy ();
+ }]]></code>
+ <p>This is a bit more complicated than anything we've attempted so far, so let's break it down:</p>
+ <list>
+ <item>
+ <p>The line beginning with <code>var chooser</code> creates an <gui>Open</gui> dialog, which the user can use to choose files. We set four properties: the title of the dialog; the action (type) of the dialog (it's an "open" dialog, but we could have used <code>SAVE</code> if the intention was to save a file; <code>transient_for</code>, which sets the parent window of the dialog; and <code>modal</code> which, if set to <code>true</code>, prevents the user from clicking on another area of the application until the dialog is closed.</p>
+ </item>
+ <item>
+ <p>The next two lines add <gui>Cancel</gui> and <gui>Open</gui> buttons to the dialog. The second argument of the <code>add_button</code> method is the (integer) value that is returned when the button is pressed: 0 for <gui>Cancel</gui> and 1 for <gui>Open</gui>.</p>
+ <p>Notice that we are using <em>stock</em> button names from Gtk, instead of manually typing "Cancel" or "Open". The advantage of using stock names is that the button labels will already be translated into the user's language.</p>
+ </item>
+ <item>
+ <p><code>set_default_response</code> determines the button that will be activated if the user double-clicks a file or presses <key>Enter</key>. In our case, we are using the <gui>Open</gui> button as default (which has the value 1).</p>
+ </item>
+ <item>
+ <p>The next three lines restrict the <gui>Open</gui> dialog to only display files which can be opened by <code>Gtk.Image</code>. A filter object is created first; we then add all kinds of files supported by <code>Gdk.Pixbuf</code> (which includes most image formats like PNG and JPEG) to the filter. Finally, we set this filter to be the <gui>Open</gui> dialog's filter.</p>
+ </item>
+ <item>
+ <p><code>chooser.run</code> displays the <gui>Open</gui> dialog. The dialog will wait for the user to choose an image; when they do, <code>chooser.run</code> will return the value <output>1</output> (it would return <output>0</output> if the user clicked <gui>Cancel</gui>). The <code>if</code> statement tests for this.</p>
+ </item>
+ <item><p>Assuming that the user did click <gui>Open</gui>, the next line sets the <code>file</code> property of the <code>Gtk.Image</code> to the filename of the image selected by the user. The <code>Gtk.Image</code> will then load and display the chosen image.</p>
+ </item>
+ <item>
+ <p>In the final line of this method, we destroy the <gui>Open</gui> dialog because we don't need it any more.</p>
+ </item>
+ </list>
+
+ </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. That should be it; a fully-functioning image viewer (and a whistlestop tour of JavaScript and Gtk) in not much time at all!</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="image-viewer/image-viewer.js">reference code</link>.</p>
+</section>
+
+<section id="next">
+ <title>Next steps</title>
+ <p>Here are some ideas for how you can extend this simple demonstration:</p>
+ <list>
+ <item>
+ <p>Have the user select a directory rather than a file, and provide controls to cycle through all of the images in a directory.</p>
+ </item>
+ <item>
+ <p>Apply random filters and effects to the image when it is loaded and allow the user to save the modified image.</p>
+ <p><link href="http://www.gegl.org/api.html";>GEGL</link> provides powerful image manipulation capabilities.</p>
+ </item>
+ <item>
+ <p>Allow the user to load images from network shares, scanners, and other more complicated sources.</p>
+ <p>You can use <link href="http://library.gnome.org/devel/gio/unstable/";>GIO</link> to handle network file tranfers and the like, and <link href="http://library.gnome.org/devel/gnome-scan/unstable/";>GNOME Scan</link> to handle scanning.</p>
+ </item>
+ </list>
+</section>
+
+</page>
diff --git a/platform-overview/C/demo-image-viewer.py.page b/platform-overview/C/demo-image-viewer.py.page
new file mode 100644
index 0000000..c33e376
--- /dev/null
+++ b/platform-overview/C/demo-image-viewer.py.page
@@ -0,0 +1,246 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="demo-image-viewer.py">
+
+ <info>
+
+ <link type="guide" xref="demos#py"/>
+
+ <desc>A little bit more than a simple "Hello world" application - write an image viewer in GTK. </desc>
+
+ <revision pkgversion="0.1" version="0.1" date="2011-03-19" status="review"/>
+ <credit type="author">
+ <name>Jonh Wendell</name>
+ <email>jwendell gnome org</email>
+ </credit>
+ <credit type="author">
+ <name>Johannes Schmid</name>
+ <email>jhs gnome org</email>
+ </credit>
+
+ </info>
+
+<title>Image Viewer</title>
+
+<synopsis>
+ <p>In this tutorial, we're going to write a very simple GTK application that loads and displays an image file. You will learn how to:</p>
+ <list>
+ <item><p>Write a basic GTK user interface in Python</p></item>
+ <item><p>Deal with events by connecting signals to signal handlers</p></item>
+ <item><p>Lay out GTK user interfaces using containers</p></item>
+ <item><p>Load and display image files</p></item>
+ </list>
+ <p>You'll need the following to be able to follow this tutorial:</p>
+ <list>
+ <item><p>An installed copy of the <link xref="getting-ready">Anjuta IDE</link></p></item>
+ <item><p>Basic knowledge of the python programming language</p></item>
+ </list>
+</synopsis>
+
+<media type="image" mime="image/png" src="media/image-viewer.png"/>
+
+<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>PyGTK (automake)</gui> from the <gui>Python</gui> tab, click <gui>Forward</gui>, and fill out your details on the next few pages. Use <file>image-viewer</file> as project name and directory.</p>
+ </item>
+ <item>
+ <p>Be sure to disable <gui>Use GtkBuilder for user interface</gui> as we will build the
+ user interface manually in this example. For an example of using the interface designer,
+ check the <link xref="guitar-tuner.py">Guitar-Tuner demo</link>.</p>
+ </item>
+ <item>
+ <p>Click <gui>Apply</gui> and the project will be created for you. Open <file>src/image_viewer.py</file> from the <gui>Project</gui> or <gui>File</gui> tabs. It contains very basic example code.</p>
+ </item>
+ </steps>
+</section>
+
+<section id="first">
+ <title>A first Gtk application</title>
+ <p>Let's see what a very basic Gtk application looks like in Python:</p>
+ <code mime="text/python" style="numbered"><![CDATA[
+from gi.repository import Gtk, GdkPixbuf, Gdk
+import os, sys
+
+class GUI:
+ def __init__(self):
+ window = Gtk.Window()
+ window.set_title ("Hello World")
+ window.connect_after('destroy', self.destroy)
+
+ window.show_all()
+
+ def destroy(window, self):
+ Gtk.main_quit()
+
+def main():
+ app = GUI()
+ Gtk.main()
+
+if __name__ == "__main__":
+ sys.exit(main())
+]]>
+ </code>
+ <p>Let's take a look at what's happening:</p>
+ <list>
+ <item>
+ <p>The first line imports the Gtk namespace (that is, it includes the Gtk library). The libraries are provided by GObject Introspection (gi), which provides language bindings for many GNOME libraries.</p>
+ </item>
+ <item>
+ <p>In the <code>__init__</code> method of the <code>GUI</code> class creates an
+ (empty) <code>Gtk.Window</code>, sets its title and then connects a signal to quit the application
+ once the window is closed. That's pretty simple overall, more on signals later.</p>
+ </item>
+ <item>
+ <p>Next, <code>destroy</code> is defined which just quits the application. It is called
+ by the <code>destroy</code> signal connected above.</p>
+ </item>
+ <item>
+ <p>The rest of the file does initialisation for Gtk and displays the GUI.</p>
+ </item>
+ </list>
+
+ <p>This code is ready to run, so try it using <guiseq><gui>Run</gui><gui>Execute</gui></guiseq>.
+ It should show you an empty window.</p>
+</section>
+
+<section id="signals">
+ <title>Signals</title>
+ <p>Signals are one of the key concepts in Gtk programming. Whenever something happens to an object, it emits a signal; for example, when a button is clicked it gives off the <code>clicked</code> signal. If you want your program to do something when that event occurs, you must connect a function (a "signal handler") to that signal. Here's an example:</p>
+ <code mime="text/python" style="numbered"><![CDATA[
+def button_clicked () :
+ print "you clicked me!"
+
+b = new Gtk.Button ("Click me")
+b.connect_after ('clicked', button_clicked)]]></code>
+ <p>The last two lines create a <code>Gtk.Button</code> called <code>b</code> and connect its <code>clicked</code> signal to the <code>button_clicked</code> function, which is defined above. Every time the button is clicked, the code in the <code>button_clicked</code> function will be executed. It just prints a message here.</p>
+</section>
+
+<section id="containers">
+ <title>Containers: Laying-out the user interface</title>
+ <p>Widgets (controls, such as buttons and labels) can be arranged in the window by making use of <em>containers</em>. You can organize the layout by mixing different types of containers, like boxes and grids.</p>
+ <p>A <code>Gtk.Window</code> is itself a type of container, but you can only put one widget directly into it. We would like to have two widgets, an image and a button, so we must put a "higher-capacity" container inside the window to hold the other widgets. A number of <link href="http://library.gnome.org/devel/gtk/stable/GtkContainer.html";>container types</link> are available, but we will use a <code>Gtk.Box</code> here. A <code>Gtk.Box</code> can hold several widgets, organized horizontally or vertically. You can do more complicated layouts by putting several boxes inside another box and so on.</p>
+ <note>
+ <p>There is a graphical user interface designer called <app>Glade</app> integrated in <app>Anjuta</app> which makes UI design really easy. For this simple example, however, we will code everything manually.</p>
+ </note>
+ <p>Let's add the box and widgets to the window. Insert the following code into the <code>__init__</code> method, immediately after the <code>window.connect_after</code> line:</p>
+<code mime="text/python" style="numbered"><![CDATA[
+box = Gtk.Box()
+box.set_spacing (5)
+box.set_orientation (Gtk.Orientation.VERTICAL)
+window.add (box)
+]]>
+</code>
+ <p>The first line creates a <code>Gtk.Box</code> called <code>box</code> and the following lines set two of its properties: the <code>orientation</code> is set to vertical (so the widgets are arranged in a column), and the <code>spacing</code> between the widgets is set to 5 pixels. The next line then adds the newly-created <code>Gtk.Box</code> to the window.</p>
+ <p>So far the window only contains an empty <code>Gtk.Box</code>, and if you run the program now you will see no changes at all (the <code>Gtk.Box</code> is a transparent container, so you can't see that it's there).</p>
+</section>
+
+<section id="packing">
+ <title>Packing: Adding widgets to the container</title>
+ <p>To add some widgets to the <code>Gtk.Box</code>, insert the following code directly below the <code>window.add (box)</code> line:</p>
+ <code mime="text/python" style="numbered"><![CDATA[
+self.image = Gtk.Image()
+box.pack_start (self.image, False, False, 0)]]></code>
+ <p>The first line creates a new <code>Gtk.Image</code> called <code>image</code>, which will be used to display an image file.
+As we need that later on in the signal handler, we will define it as a class-wide variable. You need to add <code>image = 0</code> to the beginning of the <code>GUI</code> class. Then, the image widget is added (<em>packed</em>) into the <code>box</code> container using GtkBox's <link href="http://library.gnome.org/devel/gtk/stable/GtkBox.html#gtk-box-pack-start";><code>pack_start</code></link> method.</p>
+ <p><code>pack_start</code> takes 4 arguments: the widget that is to be added to the GtkBox (<code>child</code>); whether the <code>Gtk.Box</code> should grow larger when the new widget is added (<code>expand</code>); whether the new widget should take up all of the extra space created if the <code>Gtk.Box</code> gets bigger (<code>fill</code>); and how much space there should be, in pixels, between the widget and its neighbors inside the <code>Gtk.Box</code> (<code>padding</code>).</p>
+ <p>Gtk containers (and widgets) dynamically expand to fill the available space, if you let them. You don't position widgets by giving them a precise x,y-coordinate location in the window; rather, they are positioned relative to one another. This makes handling window resizing much easier, and widgets should automatically take a sensible size in most situations.</p>
+ <p>Also note how the widgets are organized in a hierarchy. Once packed in the <code>Gtk.Box</code>, the <code>Gtk.Image</code> is considered a <em>child</em> of the <code>Gtk.Box</code>. This allows you to treat all of the children of a widget as a group; for example, you could hide the <code>Gtk.Box</code>, which would also hide all of its children at the same time.</p>
+ <p>Now insert these two lines, below the two you just added:</p>
+ <code mime="text/python" style="numbered"><![CDATA[
+button = Gtk.Button ("Open a picture...")
+box.pack_start (button, False, False, 0)
+]]></code>
+ <p>These lines are similar to the first two, but this time they create a <code>Gtk.Button</code> and add it to <code>box</code>. Notice that we are setting the <code>expand</code> argument (the second one) to <code>False</code> here, whereas it was set to <code>True</code> for the <code>Gtk.Image</code>. This will cause the image to take up all available space and the button to take only the space it needs. When you maximize the window, the button size will remain the same, but the image size will increase, taking up all of the rest of the window.</p>
+</section>
+
+<section id="loading">
+ <title>Loading the image: Connecting to the button's <code>clicked</code> signal</title>
+ <p>When the user clicks on the <gui>Open Image...</gui> button, a dialog should appear so that the user can choose a picture. Once chosen, the picture should be loaded and shown in the image widget.</p>
+ <p>The first step is to connect the <code>clicked</code> signal of the button to a signal handler function, which we call <code>on_open_clicked</code>. Put this code immediately after the <code>button = Gtk.Button()</code> line where the button was created:</p>
+ <code mime="text/python"><![CDATA[
+button.connect_after('clicked', self.on_open_clicked)
+]]></code>
+ <p>This will connect the <code>clicked</code> signal to <code>on_open_clicked</code> method that we will define
+below.</p>
+</section>
+
+<section id="loading2">
+ <title>Loading the image: Writing the signal's callback</title>
+ <p>Now we can create the <code>on_open_clicked</code> method. Insert the following into the <code>GUI</code> class code block, after the <code>__init__</code> method:</p>
+ <code mime="text/javascript" style="numbered"><![CDATA[
+def on_open_clicked (self, button):
+ dialog = Gtk.FileChooserDialog ("Open Image", button.get_toplevel(), Gtk.FileChooserAction.OPEN);
+ dialog.add_button (Gtk.STOCK_CANCEL, 0)
+ dialog.add_button (Gtk.STOCK_OK, 1)
+ dialog.set_default_response(1)
+
+ filefilter = Gtk.FileFilter ()
+ filefilter.add_pixbuf_formats ()
+ dialog.set_filter(filefilter)
+
+ if dialog.run() == 1:
+ self.image.set_from_file(dialog.get_filename())
+
+ dialog.destroy()]]></code>
+ <p>This is a bit more complicated than anything we've attempted so far, so let's break it down:</p>
+ <list>
+ <item>
+ <p>The line beginning with <code>dialog</code> creates an <gui>Open</gui> dialog, which the user can use to choose files. We set three properties: the title of the dialog; the action (type) of the dialog (it's an "open" dialog, but we could have used <code>SAVE</code> if the intention was to save a file; and <code>transient_for</code>, which sets the parent window of the dialog.</p>
+ </item>
+ <item>
+ <p>The next two lines add <gui>Cancel</gui> and <gui>Open</gui> buttons to the dialog. The second argument of the <code>add_button</code> method is the (integer) value that is returned when the button is pressed: 0 for <gui>Cancel</gui> and 1 for <gui>Open</gui>.</p>
+ <p>Notice that we are using <em>stock</em> button names from Gtk, instead of manually typing "Cancel" or "Open". The advantage of using stock names is that the button labels will already be translated into the user's language.</p>
+ </item>
+ <item>
+ <p><code>set_default_response</code> determines the button that will be activated if the user double-clicks a file or presses <key>Enter</key>. In our case, we are using the <gui>Open</gui> button as default (which has the value 1).</p>
+ </item>
+ <item>
+ <p>The next three lines restrict the <gui>Open</gui> dialog to only display files which can be opened by <code>Gtk.Image</code>. A filter object is created first; we then add all kinds of files supported by <code>Gdk.Pixbuf</code> (which includes most image formats like PNG and JPEG) to the filter. Finally, we set this filter to be the <gui>Open</gui> dialog's filter.</p>
+ </item>
+ <item>
+ <p><code>dialog.run</code> displays the <gui>Open</gui> dialog. The dialog will wait for the user to choose an image; when they do, <code>dialog.run</code> will return the value <output>1</output> (it would return <output>0</output> if the user clicked <gui>Cancel</gui>). The <code>if</code> statement tests for this.</p>
+ </item>
+ <item><p>Assuming that the user did click <gui>Open</gui>, the next line sets the <code>file</code> property of the <code>Gtk.Image</code> to the filename of the image selected by the user. The <code>Gtk.Image</code> will then load and display the chosen image.</p>
+ </item>
+ <item>
+ <p>In the final line of this method, we destroy the <gui>Open</gui> dialog because we don't need it any more.</p>
+ </item>
+ </list>
+
+ </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. That should be it; a fully-functioning image viewer (and a whistlestop tour of Python and Gtk) in not much time at all!</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="image-viewer/image-viewer.py">reference code</link>.</p>
+</section>
+
+<section id="next">
+ <title>Next steps</title>
+ <p>Here are some ideas for how you can extend this simple demonstration:</p>
+ <list>
+ <item>
+ <p>Have the user select a directory rather than a file, and provide controls to cycle through all of the images in a directory.</p>
+ </item>
+ <item>
+ <p>Apply random filters and effects to the image when it is loaded and allow the user to save the modified image.</p>
+ <p><link href="http://www.gegl.org/api.html";>GEGL</link> provides powerful image manipulation capabilities.</p>
+ </item>
+ <item>
+ <p>Allow the user to load images from network shares, scanners, and other more complicated sources.</p>
+ <p>You can use <link href="http://library.gnome.org/devel/gio/unstable/";>GIO</link> to handle network file tranfers and the like, and <link href="http://library.gnome.org/devel/gnome-scan/unstable/";>GNOME Scan</link> to handle scanning.</p>
+ </item>
+ </list>
+</section>
+
+</page>
diff --git a/platform-overview/C/demo-image-viewer.vala.page b/platform-overview/C/demo-image-viewer.vala.page
new file mode 100644
index 0000000..8b21996
--- /dev/null
+++ b/platform-overview/C/demo-image-viewer.vala.page
@@ -0,0 +1,305 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="demo-image-viewer.vala">
+
+ <info>
+ <link type="guide" xref="demos#vala"/>
+
+ <desc>A little bit more than a simple "Hello world" Gtk application.</desc>
+
+ <revision pkgversion="0.1" version="0.1" date="2011-03-18" 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="author">
+ <name>Philip Chimento</name>
+ <email>philip chimento gmail com</email>
+ </credit>
+ <credit type="editor">
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
+ </credit>
+ </info>
+
+<title>Image Viewer</title>
+<synopsis>
+ <p>In this tutorial you will create an application which opens and displays an image file. You will learn:</p>
+ <list type="numbered">
+ <item><p>How to set up a basic project using the <link xref="getting-ready">Anjuta IDE</link>.</p></item>
+ <item><p>How to write a <link href="http://developer.gnome.org/platform-overview/stable/gtk";>Gtk application</link> in Vala</p></item>
+ <item><p>Some basic concepts of <link href="http://developer.gnome.org/gobject/stable/";>GObject</link> programming</p></item>
+
+ </list>
+ <p>You'll need the following to be able to follow this tutorial:</p>
+ <list>
+ <item><p>Basic knowledge of the <link href="https://live.gnome.org/Vala/Tutorial";>Vala</link> programming language.</p></item>
+ <item><p>An installed copy of <app>Anjuta</app>.</p></item>
+ <item><p>You may find the <link href="http://valadoc.org/gtk+-3.0/";>gtk+-3.0</link></p> API Reference useful, although it is not necessary to follow the tutorial.</item>
+ </list>
+</synopsis>
+
+<media type="image" mime="image/png" src="media/image-viewer.png"/>
+
+<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 <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>image-viewer</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.</p>
+ <note><p>
+ You will learn how to use the interface builder in the <link xref="guitar-tuner.vala">Guitar-Tuner</link> tutorial.</p></note>
+ </item>
+ <item>
+ <p>Click <gui>Apply</gui> and the project will be created for you.
+ Open <file>src/main.vala</file> from the <gui>Project</gui> or <gui>File</gui> tabs.
+ You will see this code:</p>
+ <code mime="text/x-valasrc"><![CDATA[
+using GLib;
+using Gtk;
+
+public class Main : Object
+{
+
+ public Main ()
+ {
+ Window window = new Window();
+ window.set_title ("Hello World");
+ window.show_all();
+ window.destroy.connect(on_destroy);
+ }
+
+ [CCode (instance_pos = -1)]
+ 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>
+ </item>
+ </steps>
+</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 shows it.
+ More details are given below; skip this list if you understand the basics:</p>
+
+ <list>
+ <item>
+ <p>The two <code>using</code> lines at the top 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 (empty) window and connects a <link href="https://live.gnome.org/Vala/SignalsAndCallbacks";>signal</link> to exit the application when that window is closed.</p>
+ <p>Connecting signals is how you define what happens when you push a button, or when some other event happens.
+ Here, the <code>destroy</code> function is called (and quits the app) when you close the window.</p>
+ </item>
+ <item>
+ <p>The <code>static main</code> function is run by default when you start a Vala application.
+ It calls a few functions which create the <code>Main</code> class, set up and then run the application.
+ The <link href="http://valadoc.org/gtk+-3.0/Gtk.main.html";><code>Gtk.main</code></link> function starts the GTK <link href="http://en.wikipedia.org/wiki/Event_loop";>main loop</link>, 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>).</p>
+ <p>Change the <gui>Configuration</gui> to <gui>Default</gui> and then press <gui>Execute</gui> to configure the build directory.
+ You only need to do this once, for the first build.</p>
+</section>
+
+<section id="ui">
+ <title>Creating the user interface</title>
+ <p>Now we will bring life into the empty window.
+ GTK organizes the user interface with <link href="http://www.valadoc.org/gtk+-2.0/Gtk.Container.html";><code>Gtk.Container</code></link>s that can contain other widgets and even other containers.
+ Here we will use the simplest available container, a <link href="http://unstable.valadoc.org/gtk+-2.0/Gtk.Box.html";><code>Gtk.Box</code></link>.</p>
+
+<p>Add the following lines to the top of the <code>Main</code> class:</p>
+ <code mime="text/x-valasrc"><![CDATA[
+private Window window;
+private Image image;
+]]></code>
+
+<p>Now replace the current constructor with the one below:</p>
+<code mime="text/x-valasrc"><![CDATA[
+
+public Main () {
+
+ window = new Window ();
+ window.set_title ("Image Viewer in Vala");
+
+ // Set up the UI
+ var box = new Box (Orientation.VERTICAL, 5);
+ var button = new Button.with_label ("Open image");
+ image = new Image ();
+
+ box.pack_start (image, true, true, 0);
+ box.pack_start (button, false, false, 0);
+ window.add (box);
+
+ // Show open dialog when opening a file
+ button.clicked.connect (on_open_image);
+
+ window.show_all ();
+ window.destroy.connect (main_quit);
+}
+]]></code>
+ <steps>
+ <item>
+ <p>The first two lines are the parts of the GUI that we will need to access from more than one method.
+ We declare them up here so that they are accessible throughout the class instead of only in the method where they are created.</p>
+ </item>
+ <item>
+ <p>The first lines of the constructor create the empty window.
+ The next lines create the widgets we want to use: a button for opening up an image, the image view widget itself and the box we will use as a container.</p>
+ </item>
+ <item>
+ <p>The calls to <link href="http://unstable.valadoc.org/gtk+-2.0/Gtk.Box.pack_start.html";><code>pack_start</code></link> add the two widgets to the box and define their behaviour.
+ The image will expand into any available space whereas the button will just be as big as needed.
+ You will notice that we don't set explicit sizes on the widgets.
+ In GTK this is usually not needed as it makes it much easier to have a layout that looks good in different window sizes.
+ Next, the box is added to the window.</p>
+ </item>
+ <item>
+ <p>We need to define what happens when the user clicks on the button. GTK uses the concept of <em>signals</em>.</p>
+ <p>
+ When the <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.html";>button</link> is clicked, it fires the <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.clicked.html";><code>clicked</code></link> signal, which we can connect to some action (defined in a <link href="https://live.gnome.org/Vala/SignalsAndCallbacks";>callback</link> method).
+ </p>
+ <p>
+ This is done using the <code>connect</code> method of the button's <code>clicked</code> signal, which in this case tells GTK to call the (yet undefined) <code>on_image_open</code> callback method when the button is clicked.
+ We will define the <em>callback</em> in the next section.
+ </p>
+ <p>
+ In the callback, we need to access the <code>window</code> and <code>image</code> widgets, which is why we defined them as private members at the top of our class.</p>
+ </item>
+ <item>
+ <p>The last <code>connect</code> call makes sure that the application exits when the window is closed.
+ The code generated by Anjuta called an <code>on_destroy</code> callback method which called <link href="http://www.valadoc.org/gtk+-2.0/Gtk.main_quit.html";><code>Gtk.main_quit</code></link>, but just connecting our signal to <code>main_quit</code> directly is easier. You can delete the <code>on_destroy</code> method.</p>
+ </item>
+ </steps>
+</section>
+
+<section id="image">
+ <title>Showing the image</title>
+ <p>We will now define the signal handler for the <code>clicked</code> signal for the
+button we mentioned before.
+ Add this code after the constructor:</p>
+ <code mime="text/x-valasrc"><![CDATA[
+[CCode (instance_pos = -1)]
+public void on_open_image (Button self) {
+ var filter = new FileFilter ();
+ var dialog = new FileChooserDialog ("Open image",
+ window,
+ FileChooserAction.OPEN,
+ Stock.OK, ResponseType.ACCEPT,
+ Stock.CANCEL, ResponseType.CANCEL);
+ filter.add_pixbuf_formats ();
+ dialog.add_filter (filter);
+
+ switch (dialog.run ())
+ {
+ case ResponseType.ACCEPT:
+ var filename = dialog.get_filename ();
+ image.set_from_file (filename);
+ break;
+ default:
+ break;
+ }
+ dialog.destroy ();
+}
+]]></code>
+ <p>This is a bit complicated, so let's break it down:</p>
+ <note><p>A signal handler is a type of callback method that is called when a signal is emitted. Here the terms are used interchangeably.</p></note>
+ <list>
+ <item>
+ <p>The first argument of the callback method is always the widget that sent the signal.
+ Sometimes other arguments related to the signal come after that, but <em>clicked</em> doesn't have any.</p>
+ <p>In this case the <code>button</code> sent the <code>clicked</code> signal, which is connected to the <code>on_open_image</code> callback method:</p>
+<code mime="text/x-valasrc"><![CDATA[
+ button.clicked.connect (on_open_image);
+]]></code>
+
+ <p>The <code>on_open_image</code> method takes the button that emitted the signal as an argument: </p>
+ <code mime="text/x-valasrc"><![CDATA[
+ public void on_open_image (Button self)
+]]></code>
+ </item>
+ <item>
+ <p>The next interesting line is where the dialog for choosing the file is created.
+ <link href="http://www.valadoc.org/gtk+-3.0/Gtk.FileChooserDialog.html";><code>FileChooserDialog</code></link>'s constructor takes the title of the dialog, the parent window of the dialog and several options like the number of buttons and their corresponding values.</p>
+ <p>Notice that we are using <link href="http://unstable.valadoc.org/gtk+-3.0/Gtk.Stock.html";><em>stock</em></link> button names from Gtk, instead of manually typing "Cancel" or "Open".
+ The advantage of using stock names is that the button labels will already be translated into the user's language.</p>
+ </item>
+ <item>
+ <p>The next two lines restrict the <gui>Open</gui> dialog to only display files which can be opened by <em>GtkImage</em>. GtkImage is a widget which displays an image.
+ A filter object is created first; we then add all kinds of files supported by <link href="http://www.valadoc.org/gdk-pixbuf-2.0/Gdk.Pixbuf.html";><code>Gdk.Pixbuf</code></link> (which includes most image formats like PNG and JPEG) to the filter.
+ Finally, we set this filter to be the <gui>Open</gui> dialog's filter.</p>
+ </item>
+ <item>
+ <p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.Dialog.run.html";><code>dialog.run</code></link> displays the <gui>Open</gui> dialog.
+ The dialog will wait for the user to choose an image; when they do, <code>dialog.run</code> will return the <link href="http://www.valadoc.org/gtk+-3.0/Gtk.ResponseType.html";>ResponseType</link> value <code>ResponseType.ACCEPT</code> (it would return <code>ResponseType.CANCEL</code> if the user clicked <gui>Cancel</gui>).
+ The <code>switch</code> statement tests for this.</p>
+ </item>
+ <item>
+ <p>Assuming that the user did click <gui>Open</gui>, the next lines get the filename of the image selected by the user, and tell the <code>GtkImage</code> widget to load and display the selected image.</p>
+ </item>
+ <item>
+ <p>In the final line of this method, we destroy the <gui>Open</gui> dialog because we don't need it any more.</p>
+ <p>Destroying automatically hides the dialog.</p>
+ </item>
+ </list>
+</section>
+
+<section id="run">
+ <title>Build and run the application</title>
+ <p>All of the code should now be ready to go.
+ Click <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> to build everything again, and 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>src/image-viewer</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="image-viewer/image-viewer.vala">reference code</link>.</p>
+</section>
+
+<section id="next">
+ <title>Next steps</title>
+ <p>Here are some ideas for how you can extend this simple demonstration:</p>
+ <list>
+ <item><p>Set it up so that when the window opens it is of a specific size to start off with. For example, 200 X 200 pixels.</p></item>
+ <item>
+ <p>Have the user select a directory rather than a file, and provide controls to cycle through all of the images in a directory.</p>
+ </item>
+ <item>
+ <p>Apply random filters and effects to the image when it is loaded and allow the user to save the modified image.</p>
+ <p><link href="http://www.gegl.org/api.html";>GEGL</link> provides powerful image manipulation capabilities.</p>
+ </item>
+ <item>
+ <p>Allow the user to load images from network shares, scanners, and other more complicated sources.</p>
+ <p>You can use <link href="http://library.gnome.org/devel/gio/unstable/";>GIO</link> to handle network file tranfers and the like, and <link href="http://library.gnome.org/devel/gnome-scan/unstable/";>GNOME Scan</link> to handle scanning.</p>
+ </item>
+ </list>
+</section>
+
+</page>
diff --git a/platform-overview/C/demo-magic-mirror.vala.page b/platform-overview/C/demo-magic-mirror.vala.page
new file mode 100644
index 0000000..eeffbc8
--- /dev/null
+++ b/platform-overview/C/demo-magic-mirror.vala.page
@@ -0,0 +1,168 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="demo-magic-mirror.vala">
+
+ <info>
+ <link type="guide" xref="demos#vala"/>
+
+ <desc>Use your webcam as a mirror using the GStreamer framework and Gtk+</desc>
+
+ <revision pkgversion="0.1" version="0.1" date="2011-03-19" status="review"/>
+ <credit type="author">
+ <name>Daniel G. Siegel</name>
+ <email>dgsiegel gnome org</email>
+ </credit>
+ <credit type="author">
+ <name>Johannes Schmid</name>
+ <email>jhs gnome org</email>
+ </credit>
+ </info>
+
+<title>Magic Mirror</title>
+
+<synopsis>
+ <p><em>Your mirror just fell off the wall and broke into a thousand pieces — but you need a mirror to shave your beard off or add some makeup! You only have 15 minutes left before catching the bus to work. So what can you do?</em></p>
+ <p>In this tutorial, we're going to make a program which lets you use your webcam as a mirror. You will learn how to:</p>
+ <list>
+ <item><p>Create a GTK+ application</p></item>
+ <item><p>Access your webcam using GStreamer and embed the result into a window</p></item>
+ <item><p>Grab photos off your webcam</p></item>
+ </list>
+ <p>You'll need the following to be able to follow this tutorial:</p>
+ <list>
+ <item><p>An installed copy of the <link xref="getting-ready">Anjuta IDE</link></p></item>
+ <item><p>Installed copies of GTK, GStreamer, and a Vala compiler</p></item>
+ <item><p>Basic knowledge of an object-oriented programming language</p></item>
+ </list>
+</synopsis>
+
+<media type="image" mime="image/png" src="media/magic-mirror.png"/>
+
+<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>Vala</gui> tab, click <gui>Forward</gui>, and fill out your details on the next few pages. Use <file>guitar-tuner</file> as project name and directory.</p>
+ </item>
+ <item>
+ <p>Disable <gui>Use GtkBuilder for user interface</gui> as we will
+ create the UI manually in this tutorial. Check the <link xref="guitar-tuner.vala">Guitar-Tuner</link>
+ tutorial using the interface builder.</p>
+ </item>
+ <item>
+ <p>Make sure that <gui>Configure external packages</gui> is selected. On the next page, select
+ <em>gstreamer-0.10</em> from the list to include the <app>GStreamer</app> library into your project.</p>
+ </item>
+ <item>
+ <p>Click <gui>Apply</gui> and the project will be created for you. Open <file>src/magic_mirror.vala</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-valasrc"><![CDATA[
+using GLib;
+using Gtk;]]></code>
+ </item>
+ </steps>
+</section>
+
+<section id="build">
+ <title>Build the code for the first time</title>
+ <p>The code loads an (empty) window and shows it. More details are given below; skip this list if you understand the basics:</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 and sets its title. Afterwards the window
+ is shown and a signal is connected which quits the application if the window is closed. More on signals later on.</p>
+ </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>).</p>
+ <p>Change the <gui>Configuration</gui> to <gui>Default</gui> and then press <gui>Execute</gui> to configure the build directory. You only need to do this once, for the first build.</p>
+</section>
+
+<section id="webcam">
+ <title>Access the webcam video stream with GStreamer</title>
+ <p>The GStreamer multimedia framework is able to handle video from webcams. Let's add GStreamer to our application and so we can access the video stream.</p>
+
+<code mime="text/x-vala" style="numbered"><![CDATA[
+using GLib;
+using Gtk;
+
+public class Main : Object
+{
+ private Gst.Element camerabin;
+
+ public Main () {
+ this.camerabin = Gst.ElementFactory.make ("camerabin", "camera");
+ this.camerabin.set_state (Gst.State.PLAYING);
+ }
+
+ static int main (string[] args) {
+ Gtk.init (ref args);
+ Gst.init (ref args);
+ var app = new Main ();
+
+ Gtk.main ();
+
+ return 0;
+ }
+}
+]]></code>
+ <steps>
+ <item><p>First we remove the window we created before because GStreamer will
+ take care of showing the picture on screen.</p>
+ </item>
+ <item>
+ <p>
+ Now we are creating a GStreamer element which accesses our webcam. We are
+ using the Camerabin element, which is an all-in-one camera element and is
+ capable of taking photos, videos, applying effects and much more. Perfect for
+ our use case! With <code>this.camerabin.set_state (Gst.State.PLAYING)</code>
+ we tell the GStreamer pipeline we just created to start playing. Easy, no?
+ </p>
+ <p>Of course it is also possible to integrate the video more tighly into other
+ windows but that is an advanced topic that includes some details of the X Window
+ System we will omit here.
+ </p>
+ <p>
+ Compile and run it again. You will end up with two windows. In the next step
+ we will integrate the video into the GTK+ window.
+ </p>
+ </item>
+ </steps>
+</section>
+
+<section id="impl">
+ <title>Reference Implementation</title>
+ <p>If you run into problems with the tutorial, compare your code with this <link href="magic-mirror/magic-mirror.vala">reference code</link>.
+ There is also a more <link href="magic-mirror/magic-mirror-advanced.vala">extensive implementation</link> that embeds the window into a regular Gtk.Window
+ which involves some advanced techniques, and adds buttons to start/stop the picture.</p>
+</section>
+
+<section id="further">
+<title>Further reading</title>
+<p>To find out more about the Vala programming language you might want to check out the
+<link href="http://live.gnome.org/Vala/Tutorial";>Vala Tutorial</link>.</p>
+</section>
+
+<section id="conclusion">
+<title>Conclusion</title>
+ <p>
+ That's it, you have managed to create a full-featured webcam photo
+ application in 15 minutes. Now you can shave your beard off or add some makeup
+ to your beautiful face, right before having a beautiful day at your
+ workplace, where you can impress your friends and colleagues with an awesome
+ application you just made in 15 minutes.
+ </p>
+
+</section>
+
+</page>
+
+
diff --git a/platform-overview/C/demo-message-board.c.page b/platform-overview/C/demo-message-board.c.page
new file mode 100644
index 0000000..feed33f
--- /dev/null
+++ b/platform-overview/C/demo-message-board.c.page
@@ -0,0 +1,401 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="demo-message-board.c">
+
+ <info>
+
+ <link type="guide" xref="demos#c"/>
+
+ <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>
+
+ </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"/>
+
+<e:links type="section" xmlns:e="http://projectmallard.org/experimental/"/>
+
+<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/platform-overview/C/demo-photo-wall.c.page b/platform-overview/C/demo-photo-wall.c.page
new file mode 100644
index 0000000..e66d595
--- /dev/null
+++ b/platform-overview/C/demo-photo-wall.c.page
@@ -0,0 +1,381 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="demo-photo-wall.c">
+ <info>
+ <link type="guide" xref="demos#c"/>
+
+ <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>
+ </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>GSList</code>, a singly-linked list, to hold our <code>ClutterActor</code>s and another one for 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 <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 FOCUS_DEPTH 100.0
+#define UNFOCUS_DEPTH 0.0
+
+#define IMAGE_DIR_PATH "./berlin_images/"
+
+static GSList *actor_list = NULL;
+static GSList *img_path_list = NULL;
+
+typedef struct Position
+{
+ float x;
+ float y;
+}
+Position;
+
+static Position origin = {0, 0};
+]]>
+</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;
+
+ clutter_init(&argc, &argv);
+
+ stage = clutter_stage_get_default();
+ clutter_actor_set_size(stage, STAGE_WIDTH, STAGE_HEIGHT);
+ clutter_stage_set_color(CLUTTER_STAGE (stage), &stage_color);
+
+ load_image_path_names();
+
+ guint row = 0;
+ guint col = 0;
+ for(row=0; row < ROW_COUNT; ++row)
+ {
+ for(col=0; col < COL_COUNT; ++col)
+ {
+ GSList *img_path_node = g_slist_nth(img_path_list, (row * COL_COUNT) + col);
+ ClutterActor *actor = clutter_texture_new_from_file((gchar *)(img_path_node->data), NULL);
+ initialize_actor(actor, row, col);
+ clutter_container_add_actor(CLUTTER_CONTAINER(stage), actor);
+ actor_list = g_slist_prepend(actor_list, actor);
+ }
+ }
+
+ /* Show the stage. */
+ clutter_actor_show(stage);
+
+ /* Start the clutter main loop. */
+ clutter_main();
+
+ 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 9‒11: Here we get the default <code>ClutterStage</code> that was provided by <code>clutter_init</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 12: Here we call our function for getting the image file paths. We'll look at this in a bit.</p></item>
+ <item><p>Lines 14‒26: 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 29: Show the stage and <em>all its children</em>, meaning our images.</p></item>
+ <item><p>Line 32: 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[
+for(row=0; row < ROW_COUNT; ++row)
+{
+ for(col=0; col < COL_COUNT; ++col)
+ {
+ GSList *img_path_node = g_slist_nth(img_path_list, (row * COL_COUNT) + col);
+ ClutterActor *actor = clutter_texture_new_from_file((gchar *)(img_path_node->data), NULL);
+ initialize_actor(actor, row, col);
+ clutter_container_add_actor(CLUTTER_CONTAINER(stage), actor);
+ actor_list = g_slist_prepend(actor_list, actor);
+ }
+}
+]]>
+</code>
+<list>
+ <item><p>Line 5: Here we want to get the path at the <var>n</var>th location in the <code>GSList</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>. The return value is a pointer to a <code>GSList</code> which is just a node in the list. We will use this to get the actual path in the next line. The first parameter is a pointer to the head of the list.</p>
+ </item>
+ <item><p>Line 6: 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 7: We'll look at this function in a later section.</p>
+ </item>
+ <item><p>Line 8: 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>
+ <item><p>Line 9: This adds our <code>ClutterActor</code> to a <code>GSList</code> so that we can later iterate over the <code>ClutterActor</code>s.</p>
+<note><p>Interesting to note is that we want to prepend the <code>ClutterActor</code>s rather than append so that we avoid traversing the list upon each insertion. You will often see <code>g_slist_prepend</code> followed by <code>g_slist_reverse</code> because it faster than inserting many objects at the end of the list.</p></note>
+ </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;
+ }
+
+ 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);
+ img_path_list = g_slist_prepend(img_path_list, 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 14‒23: 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;
+
+ g_slist_foreach(actor_list, foreach_set_focus_state, &is_focused);
+
+ if(is_focused)
+ {
+ clutter_actor_animate(actor, CLUTTER_LINEAR, ANIMATION_DURATION_MS,
+ "x", origin.x,
+ "y", origin.y,
+ "depth", UNFOCUS_DEPTH,
+ "width", (float) THUMBNAIL_SIZE,
+ "height", (float) THUMBNAIL_SIZE,
+ NULL);
+ }
+ else
+ {
+ /*Save the current location before animating. */
+ clutter_actor_get_position(actor, &origin.x, &origin.y);
+ clutter_actor_set_reactive(actor, TRUE);
+ clutter_actor_animate(actor, CLUTTER_LINEAR, ANIMATION_DURATION_MS,
+ "x", (STAGE_WIDTH - STAGE_HEIGHT) / 2.0,
+ "y", 0.0,
+ "depth", FOCUS_DEPTH,
+ "width", (float) STAGE_HEIGHT,
+ "height", (float) STAGE_HEIGHT,
+ NULL);
+ }
+
+ /* 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 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 9: This line of code runs a custom function, <code>foreach_set_focus_state</code>, for each element in our <code>actor_list</code>, passing it the address to the <code>is_focused</code> flag. We'll see the definition of the <code>foreach_set_focus_state</code> function in the next section.</p></item>
+ <item><p>Lines 13‒19: Reaching this code means that one image currently has focus and we want to return to wall mode. The <code>clutter_actor_animate</code> function is used to animate a <code>ClutterActor</code>'s property or properties from the current state(s) to the specified state(s). The arguments are as follows:</p>
+<list type="numbered">
+ <item><p>The address of the <code>ClutterActor</code> to animate</p></item>
+ <item><p>The animation mode to use. Here we use <code>CLUTTER_LINEAR</code> so that we have a constant speed for animation.</p></item>
+ <item><p>The duration of the animation in milliseconds. I've chosen 500 ms for this example.</p></item>
+ <item><p>The remaining arguments are property/value pairs. Here we want to set the <code>x</code> value to the starting <code>x</code> value this <code>ClutterActor</code> was at before being brought into focus.</p></item>
+ <item><p>The last argument must always be <code>NULL</code> to indicate that there are no more properties to be set.</p></item>
+</list>
+<note><p>The <code>depth</code> property needs a little more explaining. We need to raise the focused image so that it doesn't slide behind other <code>ClutterActor</code>s. In this section we are returning it to the same depth as the others on the wall.</p>
+<p>Depth also determines which <code>ClutterActor</code>s receive events. A <code>ClutterActor</code> with a higher depth value receives the click events and can choose whether the event gets sent to <code>ClutterActor</code>s under it. We'll see how that works in a few steps.</p></note>
+ </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‒33: This is similar to the above block of code. Notice that we are setting the the depth to raise it above the other images.</p></item>
+ <item><p>Line 37: 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>
+ <p>
+ The following is the convenience function passed to <code>g_slist_foreach</code>.
+ </p>
+ <code mime="text/x-csrc" style="numbered"><![CDATA[
+static void
+foreach_set_focus_state(gpointer data, gpointer user_data)
+{
+ ClutterActor *actor = CLUTTER_ACTOR(data);
+ gboolean is_reactive = *((gboolean*)user_data);
+
+ clutter_actor_set_reactive(actor, is_reactive);
+}]]></code>
+<list>
+ <item><p>Lines 2‒5: The signature of this function requires two <code>gpointer</code>s. The first is a pointer to the <code>ClutterActor</code> that our <code>GSList</code> holds and the other is the <code>is_focused</code> flag that we've passed in the previous section. We want to cast these and store them for easy use.</p></item>
+ <item><p>Line 7: Depending on which boolean value is passed in, the <code>ClutterActor</code> will be set to respond to events or not.</p></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/platform-overview/C/demo-record-collection.js.page b/platform-overview/C/demo-record-collection.js.page
new file mode 100644
index 0000000..f2fa2ee
--- /dev/null
+++ b/platform-overview/C/demo-record-collection.js.page
@@ -0,0 +1,292 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="demo-record-collection.js">
+
+ <info>
+ <link type="guide" xref="demos#js"/>
+
+ <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>
+ </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="text/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="text/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="text/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="text/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="text/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/platform-overview/C/demos.page b/platform-overview/C/demos.page
new file mode 100644
index 0000000..4174a99
--- /dev/null
+++ b/platform-overview/C/demos.page
@@ -0,0 +1,58 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:e="http://projectmallard.org/experimental/";
+ xmlns:ui="http://projectmallard.org/experimental/ui/";
+ type="guide" id="demos">
+<info>
+
+ <link type="guide" xref="index#docs" />
+
+ <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>
+
+ <desc>Walkthroughs of building simple apps, designed to introduce you to various GNOME technologies.</desc>
+</info>
+
+
+<title>Walkthrough guides</title>
+
+<p>These guides are designed to give you a step-by-step introduction to various GNOME technologies, from software libraries to development and build tools. In each guide, you'll be walked through the process of building a functional application from scratch, integrating high-level features into it, and then building it ready for use.</p>
+
+<section id="start">
+ <title>Getting Ready</title>
+ <p>Before you start working on any of these guides, you'll need to make sure that you have some GNOME development tools installed.</p>
+</section>
+
+<section id="c" style="2column" ui:expanded="no">
+ <title>C</title>
+</section>
+
+<section id="cpp" style="2column" ui:expanded="no">
+ <title>C++</title>
+</section>
+
+<section id="js" style="2column" ui:expanded="no">
+ <title>JavaScript</title>
+</section>
+
+<section id="py" style="2column" ui:expanded="no">
+ <title>Python</title>
+</section>
+
+<section id="vala" style="2column" ui:expanded="no">
+ <title>Vala</title>
+</section>
+
+</page>
diff --git a/platform-overview/C/dev-build.page b/platform-overview/C/dev-build.page
new file mode 100644
index 0000000..3043a37
--- /dev/null
+++ b/platform-overview/C/dev-build.page
@@ -0,0 +1,45 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="dev-build">
+ <info>
+ <link type="guide" xref="index#dev" />
+
+ <revision version="0.1" date="2012-02-19" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Phil Bull</name>
+ <email>philbull gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Interpreters, compilers, and build tools appropriate to the language you're coding in.</desc>
+ </info>
+
+<title>Build systems and interpreters</title>
+
+<p>GNOME supports a range of programming languages, so the build tools or interpreter you use will depend on what you decide to code in.</p>
+
+<terms>
+ <title>Languages</title>
+ <item>
+ <title>C</title>
+ <p>The C language is at the core of GNOME. Much of the stack is built with
+ autotools and GCC, but other build systems are supported.</p>
+ </item>
+ <item>
+ <title>JavaScript</title>
+ <p>GNOME has two JavaScript bindings: Seed, based on the WebKit
+ JavaScriptCore engine, and gjs, built around the Mozilla SpiderMonkey
+ engine. </p>
+ </item>
+ <item>
+ <title>Python</title>
+ <p>The libraries </p>
+ </item>
+ <item>
+ <title>Vala</title>
+ <p></p>
+ </item>
+</terms>
+
+</page>
diff --git a/platform-overview/C/dev-coding.page b/platform-overview/C/dev-coding.page
new file mode 100644
index 0000000..5ba72ad
--- /dev/null
+++ b/platform-overview/C/dev-coding.page
@@ -0,0 +1,26 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="dev-coding">
+ <info>
+ <link type="guide" xref="index#dev" />
+
+ <revision version="0.1" date="2012-02-19" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Phil Bull</name>
+ <email>philbull gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Enhance your workflow with IDEs, debuggers, and profilers.</desc>
+ </info>
+
+<title>Coding tools</title>
+
+<p>Nemiver</p>
+
+<p>GDB</p>
+
+<p>Anjuta</p>
+
+</page>
diff --git a/platform-overview/C/dev-help.page b/platform-overview/C/dev-help.page
new file mode 100644
index 0000000..1c95127
--- /dev/null
+++ b/platform-overview/C/dev-help.page
@@ -0,0 +1,34 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="dev-help">
+ <info>
+ <link type="guide" xref="index#dev" />
+
+ <revision version="0.1" date="2012-02-19" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Phil Bull</name>
+ <email>philbull gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Integrate user assistance features and accessibility support.</desc>
+ </info>
+
+ <title>Help and accessibility tools</title>
+
+ <comment>
+ <cite date="2012-02-19" href="mailto:philbull gmail com">Phil Bull</cite>
+ <p>This assumes the reader knows how to.... By the end of this page,
+ the reader will be able to....</p>
+ </comment>
+
+ <p>Short introductory text...</p>
+
+ <steps>
+ <item><p>First step...</p></item>
+ <item><p>Second step...</p></item>
+ <item><p>Third step...</p></item>
+ </steps>
+
+</page>
diff --git a/platform-overview/C/dev-translate.page b/platform-overview/C/dev-translate.page
new file mode 100644
index 0000000..9904e7f
--- /dev/null
+++ b/platform-overview/C/dev-translate.page
@@ -0,0 +1,34 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="dev-translate">
+ <info>
+ <link type="guide" xref="index#dev" />
+
+ <revision version="0.1" date="2012-02-19" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Phil Bull</name>
+ <email>philbull gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Tools to help you internationalize your apps.</desc>
+ </info>
+
+ <title>Translation and Localization</title>
+
+ <comment>
+ <cite date="2012-02-19" href="mailto:philbull gmail com">Phil Bull</cite>
+ <p>This assumes the reader knows how to.... By the end of this page,
+ the reader will be able to....</p>
+ </comment>
+
+ <p>Short introductory text...</p>
+
+ <steps>
+ <item><p>First step...</p></item>
+ <item><p>Second step...</p></item>
+ <item><p>Third step...</p></item>
+ </steps>
+
+</page>
diff --git a/platform-overview/C/equation.png b/platform-overview/C/equation.png
new file mode 100644
index 0000000..295d843
Binary files /dev/null and b/platform-overview/C/equation.png differ
diff --git a/platform-overview/C/getting-ready.page b/platform-overview/C/getting-ready.page
new file mode 100644
index 0000000..892c475
--- /dev/null
+++ b/platform-overview/C/getting-ready.page
@@ -0,0 +1,73 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="getting-ready">
+
+ <info>
+ <link type="guide" xref="index#start"/>
+
+ <desc>Install GNOME development tools</desc>
+
+ <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/platform-overview/C/guitar-tuner/guitar-tuner.c b/platform-overview/C/guitar-tuner/guitar-tuner.c
new file mode 100644
index 0000000..98a97c9
--- /dev/null
+++ b/platform-overview/C/guitar-tuner/guitar-tuner.c
@@ -0,0 +1,99 @@
+/* -*- Mode: C; indent-tabs-mode: t; c-basic-offset: 4; tab-width: 4 -*- */
+
+#include <config.h>
+#include <gtk/gtk.h>
+#include <gst/gst.h>
+#include <glib/gi18n.h>
+
+/* For testing purposes, use the local (not installed) ui file */
+/* #define UI_FILE PACKAGE_DATA_DIR"/guitar_tuner/ui/guitar_tuner.ui" */
+#define UI_FILE "src/guitar_tuner.ui"
+
+/* Frequencies of the tones */
+#define NOTE_E 369.23
+#define NOTE_A 440
+#define NOTE_D 587.33
+#define NOTE_G 783.99
+#define NOTE_B 987.77
+#define NOTE_e 1318.5
+
+#define LENGTH 500
+
+#define WIDGET_WINDOW "window"
+
+static gboolean
+pipeline_stop (GstElement* pipeline)
+{
+ gst_element_set_state (pipeline, GST_STATE_PAUSED);
+ g_object_unref (pipeline);
+
+ /* disconnect handler */
+ return FALSE;
+}
+
+static void
+play_sound (gdouble frequency)
+{
+ GstElement *source, *sink;
+ GstElement *pipeline;
+
+ pipeline = gst_pipeline_new ("note");
+ source = gst_element_factory_make ("audiotestsrc",
+ "source");
+ sink = gst_element_factory_make ("autoaudiosink",
+ "output");
+
+ /* set frequency */
+ g_object_set (source, "freq", frequency, NULL);
+
+ gst_bin_add_many (GST_BIN (pipeline), source, sink, NULL);
+ gst_element_link (source, sink);
+
+ gst_element_set_state (pipeline, GST_STATE_PLAYING);
+
+ /* stop it after 200ms */
+ g_timeout_add (LENGTH, (GSourceFunc) pipeline_stop, pipeline);
+}
+
+/* Callback for the buttons */
+void on_button_clicked (GtkButton* button,
+ gpointer user_data)
+{
+ GtkWidget* label = gtk_bin_get_child (GTK_BIN (button));
+ const gchar* text = gtk_label_get_label (GTK_LABEL (label));
+
+ if (g_str_equal (text, _("E")))
+ play_sound (NOTE_E);
+ else if (g_str_equal (text, _("A")))
+ play_sound (NOTE_A);
+ else if (g_str_equal (text, _("G")))
+ play_sound (NOTE_G);
+ else if (g_str_equal (text, _("D")))
+ play_sound (NOTE_D);
+ else if (g_str_equal (text, _("B")))
+ play_sound (NOTE_B);
+ else if (g_str_equal (text, _("e")))
+ play_sound (NOTE_e);
+}
+
+int
+main (int argc, char *argv[])
+{
+ GtkWidget *window;
+ GtkBuilder *builder;
+
+ /* Initialize gtk+ and gstreamer */
+ gst_init (&argc, &argv);
+ gtk_init (&argc, &argv);
+
+ builder = gtk_builder_new ();
+ gtk_builder_add_from_file (builder, UI_FILE, NULL);
+
+ window = GTK_WIDGET (gtk_builder_get_object (builder, WIDGET_WINDOW));
+ gtk_builder_connect_signals (builder, NULL);
+
+ gtk_widget_show (window);
+
+ gtk_main ();
+ return 0;
+}
diff --git a/platform-overview/C/guitar-tuner/guitar-tuner.cc b/platform-overview/C/guitar-tuner/guitar-tuner.cc
new file mode 100644
index 0000000..42b07c9
--- /dev/null
+++ b/platform-overview/C/guitar-tuner/guitar-tuner.cc
@@ -0,0 +1,110 @@
+/* -*- Mode: C++; indent-tabs-mode: t; c-basic-offset: 4; tab-width: 4 -*- */
+
+#include <gtkmm.h>
+#include <iostream>
+#include <gstreamermm.h>
+
+#ifdef ENABLE_NLS
+# include <libintl.h>
+#endif
+
+/* For testing purposes, use the local (not installed) ui file */
+/* #define UI_FILE PACKAGE_DATA_DIR"/guitar_tuner_cpp/ui/guitar_tuner_cpp.ui" */
+#define UI_FILE "src/guitar_tuner.ui"
+
+class Sound
+{
+ public:
+ Sound();
+
+ void start_playing(double frequency);
+ bool stop_playing();
+
+ private:
+ Glib::RefPtr<Gst::Pipeline> m_pipeline;
+ Glib::RefPtr<Gst::Element> m_source;
+ Glib::RefPtr<Gst::Element> m_sink;
+};
+
+Sound::Sound()
+{
+ m_pipeline = Gst::Pipeline::create("note");
+ m_source = Gst::ElementFactory::create_element("audiotestsrc",
+ "source");
+ m_sink = Gst::ElementFactory::create_element("autoaudiosink",
+ "output");
+ m_pipeline->add(m_source);
+ m_pipeline->add(m_sink);
+ m_source->link(m_sink);
+}
+
+void Sound::start_playing (double frequency)
+{
+ m_source->set_property("freq", frequency);
+ m_pipeline->set_state(Gst::STATE_PLAYING);
+
+ /* stop it after 200ms */
+ Glib::signal_timeout().connect(sigc::mem_fun(*this, &Sound::stop_playing),
+ 200);
+}
+
+bool Sound::stop_playing()
+{
+ m_pipeline->set_state(Gst::STATE_NULL);
+ return false;
+}
+
+static void
+on_button_clicked(double frequency, Sound* sound)
+{
+ sound->start_playing (frequency);
+}
+
+int
+main(int argc, char *argv[])
+{
+ Gtk::Main kit(argc, argv);
+ Gst::init (argc, argv);
+
+ // Load the Glade file and instantiate its widgets:
+ Glib::RefPtr<Gtk::Builder> builder;
+ try
+ {
+ builder = Gtk::Builder::create_from_file(UI_FILE);
+ }
+ catch (const Glib::FileError & ex)
+ {
+ std::cerr << ex.what() << std::endl;
+ return 1;
+ }
+ Gtk::Window* main_win = 0;
+ builder->get_widget("main_window", main_win);
+
+ Sound sound;
+ Gtk::Button* button;
+
+ builder->get_widget("button_E", button);
+ button->signal_clicked().connect (sigc::bind<double, Sound*>(sigc::ptr_fun(&on_button_clicked),
+ 369.23, &sound));
+ builder->get_widget("button_A", button);
+ button->signal_clicked().connect (sigc::bind<double, Sound*>(sigc::ptr_fun(&on_button_clicked),
+ 440, &sound));
+ builder->get_widget("button_D", button);
+ button->signal_clicked().connect (sigc::bind<double, Sound*>(sigc::ptr_fun(&on_button_clicked),
+ 587.33, &sound));
+ builder->get_widget("button_G", button);
+ button->signal_clicked().connect (sigc::bind<double, Sound*>(sigc::ptr_fun(&on_button_clicked),
+ 783.99, &sound));
+ builder->get_widget("button_B", button);
+ button->signal_clicked().connect (sigc::bind<double, Sound*>(sigc::ptr_fun(&on_button_clicked),
+ 987.77, &sound));
+ builder->get_widget("button_e", button);
+ button->signal_clicked().connect (sigc::bind<double, Sound*>(sigc::ptr_fun(&on_button_clicked),
+ 1318.5, &sound));
+
+ if (main_win)
+ {
+ kit.run(*main_win);
+ }
+ return 0;
+}
diff --git a/platform-overview/C/guitar-tuner/guitar-tuner.py b/platform-overview/C/guitar-tuner/guitar-tuner.py
new file mode 100644
index 0000000..a313f1b
--- /dev/null
+++ b/platform-overview/C/guitar-tuner/guitar-tuner.py
@@ -0,0 +1,65 @@
+#!/usr/bin/python
+
+from gi.repository import Gtk, Gst, GObject
+import os, sys
+
+#Comment the first line and uncomment the second before installing
+#or making the tarball (alternatively, use project variables)
+UI_FILE = "src/guitar_tuner_py.ui"
+#UI_FILE = "/usr/local/share/guitar_tuner_py/ui/guitar_tuner_py.ui"
+
+class GUI:
+ LENGTH = 500
+ # Frequencies of the strings
+ frequencies = {
+ 'E': 369.23,
+ 'A': 440,
+ 'D': 587.33,
+ 'G': 783.99,
+ 'B': 987.77,
+ 'e': 1318.5
+ }
+
+ def __init__(self):
+ self.builder = Gtk.Builder()
+ self.builder.add_from_file(UI_FILE)
+ self.builder.connect_signals(self)
+
+ window = self.builder.get_object('window')
+ window.show_all()
+
+ def on_button_clicked (self, button):
+ label = button.get_child()
+ text = label.get_label()
+ self.play_sound (self.frequencies[text])
+
+ def destroy(window, self):
+ Gtk.main_quit()
+
+ def pipeline_stop(self, pipeline):
+ pipeline.set_state(Gst.State.PAUSED)
+ return False
+
+ def play_sound(self, frequency):
+ pipeline = Gst.Pipeline(name='note')
+ source = Gst.ElementFactory.make('audiotestsrc', 'src')
+ sink = Gst.ElementFactory.make('autoaudiosink', 'output')
+
+ source.set_property('freq', frequency)
+ pipeline.add(source)
+ pipeline.add(sink)
+
+ source.link (sink)
+
+ pipeline.set_state(Gst.State.PLAYING)
+
+ GObject.timeout_add(self.LENGTH, self.pipeline_stop, pipeline)
+
+def main():
+ Gst.init_check(sys.argv)
+ app = GUI()
+ Gtk.main()
+
+if __name__ == "__main__":
+ sys.exit(main())
+
diff --git a/platform-overview/C/guitar-tuner/guitar-tuner.vala b/platform-overview/C/guitar-tuner/guitar-tuner.vala
new file mode 100644
index 0000000..043eeaa
--- /dev/null
+++ b/platform-overview/C/guitar-tuner/guitar-tuner.vala
@@ -0,0 +1,102 @@
+/* -*- Mode: C; indent-tabs-mode: t; c-basic-offset: 4; tab-width: 4 -*- */
+
+using GLib;
+using Gtk;
+
+public class Main : Object
+{
+ /*
+ * Uncomment this line when you are done testing and building a tarball
+ * or installing
+ */
+ //const string UI_FILE = Config.PACKAGE_DATA_DIR + "/" + "guitar_tuner.ui";
+ const string UI_FILE = "src/guitar_tuner.ui";
+
+ Gst.Element sink;
+ Gst.Element source;
+ Gst.Pipeline pipeline;
+
+ [CCode (instance_pos=-1)]
+ public void on_button_clicked (Gtk.Button sender) {
+ var label = sender.get_child () as Gtk.Label;
+ switch (label.get_label()) {
+ case "E":
+ play_sound (369.23);
+ break;
+ case "A":
+ play_sound (440);
+ break;
+ case "D":
+ play_sound (587.33);
+ break;
+ case "G":
+ play_sound (783.99);
+ break;
+ case "B":
+ play_sound (987.77);
+ break;
+ case "e":
+ play_sound (1318);
+ break;
+ default:
+ break;
+ }
+ }
+
+ 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);
+ }
+ }
+
+ [CCode (instance_pos = -1)]
+ public void on_destroy (Window window) {
+ Gtk.main_quit();
+ }
+
+ private void play_sound(double frequency) {
+ pipeline = new Gst.Pipeline ("note");
+ source = Gst.ElementFactory.make ("audiotestsrc",
+ "source");
+ sink = Gst.ElementFactory.make ("autoaudiosink",
+ "output");
+
+ /* set frequency */
+ source.set ("freq", frequency);
+
+ pipeline.add (source);
+ pipeline.add (sink);
+ source.link (sink);
+
+ pipeline.set_state (Gst.State.PLAYING);
+
+ /* stop it after 200ms */
+ var time = new TimeoutSource(200);
+
+ time.set_callback(() => {
+ pipeline.set_state (Gst.State.PAUSED);
+ return false;
+ });
+
+ time.attach(null);
+ }
+
+ static int main (string[] args) {
+ Gst.init (ref args);
+ Gtk.init (ref args);
+ var app = new Main ();
+
+ Gtk.main ();
+
+ return 0;
+ }
+}
diff --git a/platform-overview/C/image-viewer/firefox_test.jpg b/platform-overview/C/image-viewer/firefox_test.jpg
new file mode 100644
index 0000000..32d00e9
Binary files /dev/null and b/platform-overview/C/image-viewer/firefox_test.jpg differ
diff --git a/platform-overview/C/image-viewer/gtk_test.png b/platform-overview/C/image-viewer/gtk_test.png
new file mode 100644
index 0000000..33c3e55
Binary files /dev/null and b/platform-overview/C/image-viewer/gtk_test.png differ
diff --git a/platform-overview/C/image-viewer/image-viewer.c b/platform-overview/C/image-viewer/image-viewer.c
new file mode 100644
index 0000000..d96aec3
--- /dev/null
+++ b/platform-overview/C/image-viewer/image-viewer.c
@@ -0,0 +1,95 @@
+/* -*- Mode: C; indent-tabs-mode: t; c-basic-offset: 4; tab-width: 4 -*- */
+
+#include <config.h>
+#include <gtk/gtk.h>
+
+
+#include <glib/gi18n.h>
+
+static void
+on_open_image (GtkButton* button, gpointer user_data)
+{
+ GtkWidget *image = GTK_WIDGET (user_data);
+ GtkWidget *toplevel = gtk_widget_get_toplevel (image);
+ GtkFileFilter *filter = gtk_file_filter_new ();
+ GtkWidget *dialog = gtk_file_chooser_dialog_new (_("Open image"),
+ GTK_WINDOW (toplevel),
+ GTK_FILE_CHOOSER_ACTION_OPEN,
+ GTK_STOCK_OK, GTK_RESPONSE_ACCEPT,
+ GTK_STOCK_CANCEL, GTK_RESPONSE_CANCEL,
+ NULL);
+
+ gtk_file_filter_add_pixbuf_formats (filter);
+ gtk_file_chooser_add_filter (GTK_FILE_CHOOSER (dialog),
+ filter);
+
+ switch (gtk_dialog_run (GTK_DIALOG (dialog)))
+ {
+ case GTK_RESPONSE_ACCEPT:
+ {
+ gchar *filename =
+ gtk_file_chooser_get_filename (GTK_FILE_CHOOSER (dialog));
+ gtk_image_set_from_file (GTK_IMAGE (image), filename);
+ break;
+ }
+ default:
+ break;
+ }
+ gtk_widget_destroy (dialog);
+}
+
+
+static GtkWidget*
+create_window (void)
+{
+ GtkWidget *window;
+ GtkWidget *button;
+ GtkWidget *image;
+ GtkWidget *box;
+
+ /* Set up the UI */
+ window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
+ gtk_window_set_title (GTK_WINDOW (window), "image-viewer-c");
+
+ box = gtk_box_new (GTK_ORIENTATION_VERTICAL, 5);
+ button = gtk_button_new_with_label (_("Open image"));
+ image = gtk_image_new ();
+
+ gtk_box_pack_start (GTK_BOX (box), image, TRUE, TRUE, 0);
+ gtk_box_pack_start (GTK_BOX (box), button, FALSE, FALSE, 0);
+
+ gtk_container_add (GTK_CONTAINER (window), box);
+
+ /* Connect signals */
+
+ /* Show open dialog when opening a file */
+ g_signal_connect (button, "clicked", G_CALLBACK (on_open_image), image);
+
+ /* Exit when the window is closed */
+ g_signal_connect (window, "destroy", G_CALLBACK (gtk_main_quit), NULL);
+
+ return window;
+}
+
+
+int
+main (int argc, char *argv[])
+{
+ GtkWidget *window;
+
+
+#ifdef ENABLE_NLS
+ bindtextdomain (GETTEXT_PACKAGE, PACKAGE_LOCALE_DIR);
+ bind_textdomain_codeset (GETTEXT_PACKAGE, "UTF-8");
+ textdomain (GETTEXT_PACKAGE);
+#endif
+
+
+ gtk_init (&argc, &argv);
+
+ window = create_window ();
+ gtk_widget_show_all (window);
+
+ gtk_main ();
+ return 0;
+}
diff --git a/platform-overview/C/image-viewer/image-viewer.cc b/platform-overview/C/image-viewer/image-viewer.cc
new file mode 100644
index 0000000..271dfb7
--- /dev/null
+++ b/platform-overview/C/image-viewer/image-viewer.cc
@@ -0,0 +1,67 @@
+/* -*- Mode: C++; indent-tabs-mode: t; c-basic-offset: 4; tab-width: 4 -*- */
+
+#include <gtkmm.h>
+#include <iostream>
+
+#include "config.h"
+
+
+#ifdef ENABLE_NLS
+# include <libintl.h>
+#endif
+
+
+static void
+on_open_image (Gtk::Image* image)
+{
+ Gtk::FileChooserDialog dialog("Open image",
+ Gtk::FILE_CHOOSER_ACTION_OPEN);
+ dialog.add_button (Gtk::Stock::OPEN,
+ Gtk::RESPONSE_ACCEPT);
+ dialog.add_button (Gtk::Stock::CANCEL,
+ Gtk::RESPONSE_CANCEL);
+
+ Glib::RefPtr<Gtk::FileFilter> filter =
+ Gtk::FileFilter::create();
+ filter->add_pixbuf_formats();
+ dialog.add_filter (filter);
+
+ switch (dialog.run())
+ {
+ case Gtk::RESPONSE_ACCEPT:
+ image->set(dialog.get_filename());
+ break;
+ default:
+ break;
+ }
+ dialog.hide();
+}
+
+int
+main (int argc, char *argv[])
+{
+ Gtk::Main kit(argc, argv);
+
+ Gtk::Window* main_win = new Gtk::Window(Gtk::WINDOW_TOPLEVEL);
+ main_win->set_title ("image-viewer-cpp");
+
+ Gtk::Box* box = new Gtk::Box();
+ box->set_orientation (Gtk::ORIENTATION_VERTICAL);
+ box->set_spacing(5);
+ main_win->add(*box);
+
+ Gtk::Image* image = new Gtk::Image();
+ box->pack_start (*image, true, true);
+
+ Gtk::Button* button = new Gtk::Button("Open Imageâ");
+ button->signal_clicked().connect (sigc::bind<Gtk::Image*>(sigc::ptr_fun(&on_open_image), image));
+ box->pack_start (*button, false, false);
+
+ main_win->show_all();
+
+ if (main_win)
+ {
+ kit.run(*main_win);
+ }
+ return 0;
+}
diff --git a/platform-overview/C/image-viewer/image-viewer.js b/platform-overview/C/image-viewer/image-viewer.js
new file mode 100644
index 0000000..9a9484b
--- /dev/null
+++ b/platform-overview/C/image-viewer/image-viewer.js
@@ -0,0 +1,50 @@
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+function ImageViewer () {
+ this._init ();
+}
+
+ImageViewer.prototype = {
+ _init: function () {
+ this.window = new Gtk.Window ({title: "Image Viewer Demo"});
+ this.window.connect ("hide", Gtk.main_quit);
+
+ var main_box = new Gtk.Box ({orientation: Gtk.Orientation.VERTICAL, spacing: 0});
+ this.window.add (main_box);
+
+ this.image = new Gtk.Image ();
+ main_box.pack_start (this.image, true, true, 0);
+
+ var open_button = new Gtk.Button ({label: "Open a picture..."});
+ open_button.connect ("clicked", Lang.bind (this, this._openClicked));
+ main_box.pack_start (open_button, false, false, 0);
+
+ this.window.show_all ();
+ },
+
+ _openClicked: function () {
+ var chooser = new Gtk.FileChooserDialog ({title: "Select an image",
+ action: Gtk.FileChooserAction.OPEN,
+ transient_for: this.window,
+ modal: true});
+ chooser.add_button (Gtk.STOCK_CANCEL, 0);
+ chooser.add_button (Gtk.STOCK_OPEN, 1);
+ chooser.set_default_response (1);
+
+ var filter = new Gtk.FileFilter ();
+ filter.add_pixbuf_formats ();
+ chooser.filter = filter;
+
+ if (chooser.run () == 1)
+ this.image.file = chooser.get_filename ();
+
+ chooser.destroy ();
+ }
+}
+
+Gtk.init (0, null);
+
+var iv = new ImageViewer ();
+
+Gtk.main ();
diff --git a/platform-overview/C/image-viewer/image-viewer.py b/platform-overview/C/image-viewer/image-viewer.py
new file mode 100755
index 0000000..8c81839
--- /dev/null
+++ b/platform-overview/C/image-viewer/image-viewer.py
@@ -0,0 +1,51 @@
+#!/usr/bin/python
+
+from gi.repository import Gtk, GdkPixbuf, Gdk
+import os, sys
+
+class GUI:
+ image = 0
+
+ def __init__(self):
+
+ window = Gtk.Window()
+ window.set_title ("Image Viewer")
+ window.connect_after('destroy', self.destroy)
+
+ box = Gtk.Box()
+ box.set_spacing(5)
+ box.set_orientation (Gtk.Orientation.VERTICAL)
+ window.add (box)
+
+ self.image = Gtk.Image()
+ box.pack_start (self.image, True, True, 0)
+
+ button = Gtk.Button ("Open a picture...")
+ box.pack_start (button, False, False, 0)
+ button.connect_after('clicked', self.on_open_clicked)
+
+ window.show_all()
+
+ def destroy(window, self):
+ Gtk.main_quit()
+
+ def on_open_clicked (self, button):
+ dialog = Gtk.FileChooserDialog ("Open Image", button.get_toplevel(), Gtk.FileChooserAction.OPEN);
+ dialog.add_button (Gtk.STOCK_CANCEL, 0)
+ dialog.add_button (Gtk.STOCK_OPEN, 1)
+ dialog.set_default_response(1)
+
+ filefilter = Gtk.FileFilter ()
+ filefilter.add_pixbuf_formats ()
+ dialog.set_filter(filefilter)
+
+ if dialog.run() == 1:
+ self.image.set_from_file(dialog.get_filename())
+ dialog.destroy()
+
+def main():
+ app = GUI()
+ Gtk.main()
+
+if __name__ == "__main__":
+ sys.exit(main())
diff --git a/platform-overview/C/image-viewer/image-viewer.vala b/platform-overview/C/image-viewer/image-viewer.vala
new file mode 100644
index 0000000..1c96126
--- /dev/null
+++ b/platform-overview/C/image-viewer/image-viewer.vala
@@ -0,0 +1,62 @@
+using GLib;
+using Gtk;
+
+public class Main : Object
+{
+ private Window window;
+ private Image image;
+
+ public Main () {
+
+ window = new Window ();
+ window.set_title ("Image Viewer in Vala");
+
+ // Set up the UI
+ var box = new Box (Orientation.VERTICAL, 5);
+ var button = new Button.with_label ("Open image");
+ image = new Image ();
+
+ box.pack_start (image, true, true, 0);
+ box.pack_start (button, false, false, 0);
+ window.add (box);
+
+ // Show open dialog when opening a file
+ button.clicked.connect (on_open_image);
+
+ window.show_all ();
+ window.destroy.connect (main_quit);
+ }
+
+ [CCode (instance_pos = -1)]
+ public void on_open_image (Button self) {
+ var filter = new FileFilter ();
+ var dialog = new FileChooserDialog ("Open image",
+ window,
+ FileChooserAction.OPEN,
+ Stock.OK, ResponseType.ACCEPT,
+ Stock.CANCEL, ResponseType.CANCEL);
+ filter.add_pixbuf_formats ();
+ dialog.add_filter (filter);
+
+ switch (dialog.run ())
+ {
+ case ResponseType.ACCEPT:
+ var filename = dialog.get_filename ();
+ image.set_from_file (filename);
+ break;
+ default:
+ break;
+ }
+ dialog.destroy ();
+ }
+
+ static int main (string[] args) {
+ Gtk.init (ref args);
+ var app = new Main ();
+
+ Gtk.main ();
+
+ return 0;
+ }
+}
+
diff --git a/platform-overview/C/index.page b/platform-overview/C/index.page
index a8962e1..ce8950c 100644
--- a/platform-overview/C/index.page
+++ b/platform-overview/C/index.page
@@ -24,42 +24,40 @@
<include href="cc-by-sa-3-0.xml" xmlns="http://www.w3.org/2001/XInclude"/>
</info>
-<title>Overview of the GNOME Platform</title>
-
-<p>GNOME is a powerful but simple desktop environment with a strong focus
-on usability, accessibility, and internationalization. GNOME is designed to
-be usable by everybody, regardless of technical expertise, disabilitites, or
-native language. GNOME makes it easy for people to use their computers.</p>
-
-<p>The GNOME platform provides a comprehensive development environment
-for graphical applications and other software. GNOME provides a
-comprehensive developer platform that allow developers to create professional
-software that is easy to use and aesthetically pleasing. Using the
-technologies in GNOME, you can create high-quality software to meet and
-exceed your users' expectations. This document provides a high-level
-overview of the GNOME platform along with links to detailed documentation
-on each part of the platform.</p>
-
-<links type="topic" style="toronto"
- groups="gtk clutter webkit gstreamer">
- <title>Graphics and Multimedia</title>
-</links>
-
-<links type="topic" style="toronto"
- groups="gio gio-network gsettings d-bus soup gupnp">
- <title>Core Application Support</title>
-</links>
-
-
-<links type="topic" style="toronto" groups="apps">
- <title>Application Technologies</title>
-</links>
-
-<links type="topic" style="toronto"
- groups="atk pango pulseaudio cairo gdk gobject glib">
- <title>Under the Hood</title>
-</links>
-
-<links type="topic" style="toronto"/>
+<title>Overview of the GNOME platform</title>
+
+
+<media src="equation.png" width="90%">
+ <p>GNOME equation</p>
+</media>
+
+<p>GNOME provides a comprehensive developer platform that allows
+developers to create professional software that is easy to use and
+aesthetically pleasing. Using the technologies in GNOME, you can create
+high-quality software to meet and exceed your users' expectations. Here, you
+can find a high-level overview of the platform, designed to introduce you to
+its capabilities, and to help you find resources on developing with GNOME.</p>
+
+<section id="overview" style="2column">
+ <title>Overview of GNOME technologies</title>
+ <p>Find out what you can do with GNOME's extensive collection of libraries.</p>
+</section>
+
+<section id="dev" style="2column">
+ <title>Tools for developers</title>
+ <p>A range of tools are available to make your life easier when developing
+ with GNOME.</p>
+</section>
+
+<section id="docs" style="2column">
+ <title>Examples and documentation</title>
+ <p>There are lots of example code snippets that you can use as a reference, as well as extensive generated API documentation.</p>
+</section>
+
+<section id="concepts" style="2column">
+ <title>Conceptual foundations</title>
+ <p>Learn about some of the concepts that differentiate GNOME from other
+ development platforms.</p>
+</section>
</page>
diff --git a/platform-overview/C/magic-mirror/magic-mirror-advanced.vala b/platform-overview/C/magic-mirror/magic-mirror-advanced.vala
new file mode 100644
index 0000000..13f1c4f
--- /dev/null
+++ b/platform-overview/C/magic-mirror/magic-mirror-advanced.vala
@@ -0,0 +1,110 @@
+/*
+ * Compile using:
+ * valac --pkg gtk+-2.0 --pkg gdk-x11-2.0 --pkg gstreamer-0.10 --pkg gstreamer-interfaces-0.10 webcam.vala
+ *
+ */
+using Gtk;
+using Gst;
+
+public class Webcam : Gtk.Window
+{
+ private Gtk.DrawingArea drawing_area;
+ private X.ID xid;
+ private Gst.Element camerabin;
+ private int counter = 1;
+ private bool playing;
+
+ public Webcam ()
+ {
+ this.set_title ("Press play to start");
+ this.destroy.connect (Gtk.main_quit);
+
+ var vbox = new Gtk.VBox (false, 0);
+ this.drawing_area = new Gtk.DrawingArea ();
+ this.drawing_area.set_size_request (640, 480);
+ this.drawing_area.realize.connect (on_realize);
+ vbox.pack_start (this.drawing_area, true, true, 0);
+
+ var play_button = new Button.from_stock (Gtk.STOCK_MEDIA_PLAY);
+ play_button.clicked.connect (on_play);
+ var pause_button = new Button.from_stock (Gtk.STOCK_MEDIA_PAUSE);
+ pause_button.clicked.connect (on_pause);
+ var photo_button = new Button.with_label ("Take a picture");
+ photo_button.clicked.connect (on_take_picture);
+ var stop_button = new Button.from_stock (Gtk.STOCK_MEDIA_STOP);
+ stop_button.clicked.connect (on_stop);
+
+ var button_box = new Gtk.HButtonBox ();
+ button_box.add (play_button);
+ button_box.add (pause_button);
+ button_box.add (photo_button);
+ button_box.add (stop_button);
+ vbox.pack_start (button_box, false, true, 5);
+
+ this.add (vbox);
+
+ this.camerabin = Gst.ElementFactory.make ("camerabin", "camera");
+ var bus = this.camerabin.get_bus ();
+ bus.set_sync_handler (on_bus_callback);
+ }
+
+ private Gst.BusSyncReply on_bus_callback (Gst.Bus bus, Gst.Message message)
+ {
+ if (message.get_structure () != null && message.get_structure().has_name("prepare-xwindow-id")) {
+ var xoverlay = message.src as Gst.XOverlay;
+ xoverlay.set_xwindow_id (this.xid);
+ return Gst.BusSyncReply.DROP;
+ }
+
+ return Gst.BusSyncReply.PASS;
+ }
+
+ private void on_realize ()
+ {
+ this.xid = Gdk.x11_drawable_get_xid (this.drawing_area.window);
+ on_play ();
+ }
+
+ private void on_play ()
+ {
+ this.camerabin.set_state (Gst.State.PLAYING);
+ this.playing = true;
+ }
+
+ private void on_pause ()
+ {
+ this.camerabin.set_state (Gst.State.PAUSED);
+ this.playing = false;
+ }
+
+ private void on_stop ()
+ {
+ this.camerabin.set_state (Gst.State.NULL);
+ this.playing = false;
+ }
+
+ private void on_take_picture ()
+ {
+ if (this.playing)
+ {
+ var filename = "photo" + "%d".printf (this.counter) + ".jpg";
+ this.set_title ("%d".printf (this.counter) + " photos taken");
+ this.counter++;
+ this.camerabin.set ("filename", filename);
+ GLib.Signal.emit_by_name (this.camerabin, "capture-start");
+ }
+ }
+
+ public static int main (string[] args)
+ {
+ Gst.init (ref args);
+ Gtk.init (ref args);
+
+ var webcam = new Webcam ();
+ webcam.show_all ();
+
+ Gtk.main ();
+
+ return 0;
+ }
+}
diff --git a/platform-overview/C/magic-mirror/magic-mirror.vala b/platform-overview/C/magic-mirror/magic-mirror.vala
new file mode 100644
index 0000000..397954b
--- /dev/null
+++ b/platform-overview/C/magic-mirror/magic-mirror.vala
@@ -0,0 +1,23 @@
+/* -*- Mode: C; indent-tabs-mode: t; c-basic-offset: 4; tab-width: 4 -*- */
+using GLib;
+using Gtk;
+
+public class Main : Object
+{
+ private Gst.Element camerabin;
+
+ public Main () {
+ this.camerabin = Gst.ElementFactory.make ("camerabin", "camera");
+ this.camerabin.set_state (Gst.State.PLAYING);
+ }
+
+ static int main (string[] args) {
+ Gtk.init (ref args);
+ Gst.init (ref args);
+ var app = new Main ();
+
+ Gtk.main ();
+
+ return 0;
+ }
+}
diff --git a/platform-overview/C/media/fedora.png b/platform-overview/C/media/fedora.png
new file mode 100644
index 0000000..15b8f44
Binary files /dev/null and b/platform-overview/C/media/fedora.png differ
diff --git a/platform-overview/C/media/gnome-devtools.catalog b/platform-overview/C/media/gnome-devtools.catalog
new file mode 100644
index 0000000..37d1b7b
--- /dev/null
+++ b/platform-overview/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/platform-overview/C/media/guitar-tuner-glade.png b/platform-overview/C/media/guitar-tuner-glade.png
new file mode 100644
index 0000000..7a4ce58
Binary files /dev/null and b/platform-overview/C/media/guitar-tuner-glade.png differ
diff --git a/platform-overview/C/media/guitar-tuner-pipeline.png b/platform-overview/C/media/guitar-tuner-pipeline.png
new file mode 100644
index 0000000..98125f1
Binary files /dev/null and b/platform-overview/C/media/guitar-tuner-pipeline.png differ
diff --git a/platform-overview/C/media/guitar-tuner-pipeline.svg b/platform-overview/C/media/guitar-tuner-pipeline.svg
new file mode 100644
index 0000000..5b8dea8
--- /dev/null
+++ b/platform-overview/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/platform-overview/C/media/guitar-tuner.png b/platform-overview/C/media/guitar-tuner.png
new file mode 100644
index 0000000..42dac73
Binary files /dev/null and b/platform-overview/C/media/guitar-tuner.png differ
diff --git a/platform-overview/C/media/image-viewer.png b/platform-overview/C/media/image-viewer.png
new file mode 100644
index 0000000..dd57cca
Binary files /dev/null and b/platform-overview/C/media/image-viewer.png differ
diff --git a/platform-overview/C/media/magic-mirror.png b/platform-overview/C/media/magic-mirror.png
new file mode 100644
index 0000000..874784b
Binary files /dev/null and b/platform-overview/C/media/magic-mirror.png differ
diff --git a/platform-overview/C/media/message-board.ogv b/platform-overview/C/media/message-board.ogv
new file mode 100644
index 0000000..c78a279
Binary files /dev/null and b/platform-overview/C/media/message-board.ogv differ
diff --git a/platform-overview/C/media/opensuse.png b/platform-overview/C/media/opensuse.png
new file mode 100644
index 0000000..ba1289e
Binary files /dev/null and b/platform-overview/C/media/opensuse.png differ
diff --git a/platform-overview/C/media/photo-wall-focused.png b/platform-overview/C/media/photo-wall-focused.png
new file mode 100644
index 0000000..a0806bb
Binary files /dev/null and b/platform-overview/C/media/photo-wall-focused.png differ
diff --git a/platform-overview/C/media/photo-wall.png b/platform-overview/C/media/photo-wall.png
new file mode 100644
index 0000000..b1380c8
Binary files /dev/null and b/platform-overview/C/media/photo-wall.png differ
diff --git a/platform-overview/C/media/record-collection.png b/platform-overview/C/media/record-collection.png
new file mode 100644
index 0000000..1a78188
Binary files /dev/null and b/platform-overview/C/media/record-collection.png differ
diff --git a/platform-overview/C/media/ubuntu.png b/platform-overview/C/media/ubuntu.png
new file mode 100644
index 0000000..52d9636
Binary files /dev/null and b/platform-overview/C/media/ubuntu.png differ
diff --git a/platform-overview/C/message-board/message-board.c b/platform-overview/C/message-board/message-board.c
new file mode 100644
index 0000000..6da56bf
--- /dev/null
+++ b/platform-overview/C/message-board/message-board.c
@@ -0,0 +1,108 @@
+/* -*- Mode: C; indent-tabs-mode: t; c-basic-offset: 4; tab-width: 4 -*- */
+
+#include <config.h>
+#include <gtk/gtk.h>
+#include <webkit/webkit.h>
+
+
+#include <glib/gi18n.h>
+
+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;"
+"}";
+
+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, "");
+}
+
+static GtkWidget*
+create_window (void)
+{
+ GtkWidget *window, *box, *scroll, *view, *entry;
+ gchar *tmp, *css;
+
+ 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);
+
+ 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);
+
+ g_signal_connect (entry, "activate",
+ G_CALLBACK (entry_activate_cb), view);
+
+ gtk_widget_show_all (GTK_WIDGET (box));
+ return window;
+}
+
+int
+main (int argc, char *argv[])
+{
+ GtkWidget *window;
+
+
+#ifdef ENABLE_NLS
+ bindtextdomain (GETTEXT_PACKAGE, PACKAGE_LOCALE_DIR);
+ bind_textdomain_codeset (GETTEXT_PACKAGE, "UTF-8");
+ textdomain (GETTEXT_PACKAGE);
+#endif
+
+ gtk_init (&argc, &argv);
+
+ window = create_window ();
+ gtk_widget_show (window);
+
+ gtk_main ();
+ return 0;
+}
diff --git a/platform-overview/C/overview-communication.page b/platform-overview/C/overview-communication.page
new file mode 100644
index 0000000..2df4462
--- /dev/null
+++ b/platform-overview/C/overview-communication.page
@@ -0,0 +1,91 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="guide" style="task"
+ id="overview-communication">
+ <info>
+ <revision version="0.1" date="2012-02-19" status="stub"/>
+ <link type="guide" xref="index#overview" />
+
+ <credit type="author copyright">
+ <name>Phil Bull</name>
+ <email>philbull gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Instant messaging, networking, social media, email, and calendaring support.</desc>
+ </info>
+
+<title>Communication and social networking</title>
+
+<list>
+ <item>
+ <p><em style="strong">Connect to instant messaging and social networking services</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Set up multi-protocol connections with web services or other clients</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Handle mail, online contacts and calendar services</em></p>
+ </item>
+</list>
+
+<p>Get your users connected and communicating with their friends and contacts through instant messaging, social media, and email. GNOME's extensive communications stack gives you high-level, abstracted access to complicated instant messaging and email protocols. For more specialised communication needs, there's access to the nuts and bolts through lower level APIs too.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>Empathy instant messaging client</p>
+</media>
+
+<section id="what">
+ <title>What can you do?</title>
+
+ <p>For <em style="strong">connecting to instant messaging services</em>, use <em style="strong"><link xref="telepathy">Telepathy</link></em>. It provides a powerful framework for interacting with the user's instant messaging contacts, and has support for a wide range of messaging protocols. With Telepathy, all accounts and connections are handled by a <link xref="d-bus">D-Bus</link> session service that's deeply integrated into GNOME. Applications can tie into this service to communicate with contacts.</p>
+
+ <p>Create multi-player games or collaborative editors that integrate with the desktop-wide instant messaging services. With the <em style="strong"><link xref="telepathy#tubes">Telepathy Tubes</link></em> API, you can <em style="strong">tunnel an arbitrary protocol</em> over modern instant messaging protocols like Jabber to create interactive applications.</p>
+
+ <p>Allow users to see other people they can chat with, and find printers, shared files, and shared music collections as soon as they connect to a network. The <em style="strong"><link xref="avahi">Avahi</link></em> API provides <em style="strong">service discovery</em> on a local network via the mDNS/DNS-SD protocol suite. It's compatible with similar technology found in MacOS X and Windows.</p>
+
+ <p>Handle users' local and online address books and calendars with <em style="strong"><link xref="eds">Evolution Data Server</link></em> (EDS). It provides a way of storing account information and interacting with </p>
+
+ <p>With <em style="strong"><link xref="eds">Folks</link></em>, you will have access to a single API for handling social networking, chat, email, and audio/video communications. </p>
+
+</section>
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>Change the IM status</p></item>
+ <item><p>Fetch a contact from a Gmail address book</p></item>
+ <item><p>Scan the network for zeroconf printers</p></item>
+ <item><p>Something with Telepathy Tubes</p></item>
+ <item><p><link xref="samples#communication">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <comment>
+ <cite>Phil Bull</cite>
+ <p>Need to use better links than these.</p>
+ </comment>
+
+ <p>You can see lots of real-world applications of the GNOME communications technologies in open source projects, like the examples given below.</p>
+ <list>
+ <item>
+ <p><em style="strong">Empathy</em> is an instant messaging app with support for a wide range of messaging services. It uses Telepathy to handle connections, presence, and contact information for all of the protocols that it supports.</p>
+ <p>(<link href="https://live.gnome.org/Empathy";>Website</link> | <link href="http://staz.be/tup/2009-06/Capture-Conversations.png";>Screenshot</link> | <link href="http://git.gnome.org/browse/empathy/tree/";>Empathy source code</link> )</p>
+ </item>
+
+ <item>
+ <p>With Telepathy Tubes support, the <em style="strong">GNOME Games</em> collection was able to add multi-player gaming support through the Jabber protocol.</p>
+ <p>(<link href="https://live.gnome.org/GnomeGames/";>Website</link> | <link href="https://live.gnome.org/glChess?action=AttachFile&do=get&target=glchess3d.png";>Screenshot</link> | <link href="http://git.gnome.org/browse/gnome-games/tree/glchess/src";>GLChess online multiplayer code</link> )</p>
+ </item>
+
+ <item>
+ <p>Avahi support allows users of the <em style="strong">Rhythmbox</em> music player to see shared music collections on their local network, using DAAP.</p>
+ <p>(<link href="http://projects.gnome.org/rhythmbox/";>Website</link> | <link href="http://skss.learnfree.eu/wp-content/uploads/2009/05/rhythmbox_daap_3.png";>Screenshot</link> | <link href="http://git.gnome.org/browse/rhythmbox/tree/plugins/daap";>DAAP Code</link> )</p>
+ </item>
+ </list>
+
+</section>
+
+</page>
diff --git a/platform-overview/C/overview-datastorage.page b/platform-overview/C/overview-datastorage.page
new file mode 100644
index 0000000..a864e74
--- /dev/null
+++ b/platform-overview/C/overview-datastorage.page
@@ -0,0 +1,63 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="overview-datastorage">
+ <info>
+ <link type="guide" xref="index#overview" />
+ <revision version="0.1" date="2012-02-19" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Phil Bull</name>
+ <email>philbull gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Access structured data storage, networking shares, and the desktop settings system.</desc>
+ </info>
+
+<title>Data storage and settings management</title>
+
+<list>
+ <item>
+ <p><em style="strong">Strong selling point #1</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #2</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #3</em></p>
+ </item>
+</list>
+
+<p>Marketing blurb, info on what the platform offers.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>IMAGE</p>
+</media>
+
+<section id="what">
+ <title>What can you do?</title>
+
+ <p>For <em style="strong">action</em>, use <em style="strong"><link xref="blah">technology</link></em>.</p>
+
+</section>
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>A sample we should write</p></item>
+ <item><p><link xref="samples#integration">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <p>You can see lots of real-world applications of system integration in open source projects, like the examples given below.</p>
+ <list>
+ <item>
+ <p><em style="strong">XXX</em> is .</p>
+ <p>(<link href="xxx">Website</link> | <link href="xxx">Screenshot</link> | <link href="xxx">Source code</link> )</p>
+ </item>
+ </list>
+</section>
+</page>
diff --git a/platform-overview/C/overview-gettingstarted.page b/platform-overview/C/overview-gettingstarted.page
new file mode 100644
index 0000000..5f90dee
--- /dev/null
+++ b/platform-overview/C/overview-gettingstarted.page
@@ -0,0 +1,53 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="overview-gettingstarted">
+ <info>
+
+ <link type="guide" xref="index#overview" group="#first" />
+ <revision version="0.1" date="2012-02-19" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Phil Bull</name>
+ <email>philbull gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Learn what you need to get started with GNOME development.</desc>
+ </info>
+
+<title>Getting started</title>
+
+<list type="numbered">
+ <item>
+ <p><em style="strong">Check OS support</em></p>
+ <p>Make sure that you're running an operating system that supports the
+ GNOME library versions that you want to target. Major Linux distributions
+ tend to have up-to-date support.</p>
+ </item>
+ <item>
+ <p><em style="strong">Install developer tools</em></p>
+ <p>You need to install the development libraries and build tools appropriate
+ to the programming language and GNOME technologies that you want to develop
+ with. Many Linux distributions have GNOME "dev" packages that provide a
+ quick and easy way of getting the right tools.</p>
+ </item>
+ <item>
+ <p><em style="strong">Learn the platform</em></p>
+ <p>Check out the developer tutorials and introductory guides for GNOME
+ technologies to get yourself familiar with the platform. There are code
+ snippets to help you along the way too.</p>
+ </item>
+ <item>
+ <p><em style="strong">Start coding</em></p>
+ <p>Once you have installed the necessary tools and gained familiarity with some of the GNOME technologies that are available, you're ready to start coding!</p>
+ </item>
+ <item>
+ <p><em style="strong">Get support and documentation</em></p>
+ <p>There are lots of sources of developer support and documentation for
+ GNOME. There are snippets of sample code, longer-format developer tutorials,
+ in-depth API documentation and listings, and reference implementations in
+ the form of open source applications. If you have specific questions,
+ you can use the IRC channels and mailing lists to answer them.</p>
+ </item>
+</list>
+</page>
diff --git a/platform-overview/C/overview-help.page b/platform-overview/C/overview-help.page
new file mode 100644
index 0000000..7649bec
--- /dev/null
+++ b/platform-overview/C/overview-help.page
@@ -0,0 +1,87 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="overview-help">
+<info>
+ <link type="guide" xref="index#overview" />
+
+ <desc>The innovative help system and built-in assitive technologies allow you to accommodate every user.</desc>
+ <revision pkgversion="3.0" date="2011-04-05" status="final"/>
+</info>
+
+<title>Help and assistive technologies</title>
+
+<list>
+ <item>
+ <p><em style="strong">Strong selling point #1</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #2</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #3</em></p>
+ </item>
+</list>
+
+<p>Marketing blurb, info on what the platform offers.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>IMAGE</p>
+</media>
+
+
+
+<p>Users sometimes need a little help, even with the best-designed
+applications. GNOME provides a built-in <em style="strong">topic-oriented help system</em>
+using the <link href="http://projectmallard.org/";>Mallard</link>
+markup language. Pioneered by GNOME developers, Mallard is an agile
+and dynamic language that helps you write and revise quickly. Its
+topic-oriented design means your users can find the answers they
+need without sifting through a manual. With its unique dynamic linking and
+organization system, Mallard is the only language designed to handle
+plugin and vendor help in one coherent document.</p>
+
+<p>When you do need linear manuals, GNOME also supports the
+industry-standard <link href="http://docbook.org/";>DocBook</link>
+format.</p>
+
+<p>Yelp help viewer, yelp-xsl and yelp-tools</p>
+
+<p>Accessibility: Orca, OSK, built-in to GTK accessibility tools.</p>
+
+<list style="compact">
+ <item><p><link href="http://projectmallard.org/about/learn/tenminutes.html";>Ten Minute Mallard Tour</link></p></item>
+ <item><p><link href="http://projectmallard.org/";>The Mallard web site</link></p></item>
+ <item><p><link href="http://docbook.org/";>The DocBook web site</link></p></item>
+</list>
+
+
+
+
+<section id="what">
+ <title>What can you do?</title>
+
+ <p>For <em style="strong">action</em>, use <em style="strong"><link xref="blah">technology</link></em>.</p>
+
+</section>
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>A sample we should write</p></item>
+ <item><p><link xref="samples#integration">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <p>You can see lots of real-world applications of system integration in open source projects, like the examples given below.</p>
+ <list>
+ <item>
+ <p><em style="strong">XXX</em> is .</p>
+ <p>(<link href="xxx">Website</link> | <link href="xxx">Screenshot</link> | <link href="xxx">Source code</link> )</p>
+ </item>
+ </list>
+
+</section>
+</page>
diff --git a/platform-overview/C/overview-multimedia.page b/platform-overview/C/overview-multimedia.page
new file mode 100644
index 0000000..b152bc4
--- /dev/null
+++ b/platform-overview/C/overview-multimedia.page
@@ -0,0 +1,63 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="overview-multimedia">
+ <info>
+ <link type="guide" xref="index#overview" />
+ <revision version="0.1" date="2012-02-19" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Phil Bull</name>
+ <email>philbull gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Multi-format audio and video playback and editing, streaming from the web, and webcam support.</desc>
+ </info>
+
+<title>Multimedia</title>
+
+<list>
+ <item>
+ <p><em style="strong">Strong selling point #1</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #2</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #3</em></p>
+ </item>
+</list>
+
+<p>Marketing blurb, info on what the platform offers.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>IMAGE</p>
+</media>
+
+<section id="what">
+ <title>What can you do?</title>
+
+ <p>For <em style="strong">action</em>, use <em style="strong"><link xref="blah">technology</link></em>.</p>
+
+</section>
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>A sample we should write</p></item>
+ <item><p><link xref="samples#integration">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <p>You can see lots of real-world applications of system integration in open source projects, like the examples given below.</p>
+ <list>
+ <item>
+ <p><em style="strong">XXX</em> is .</p>
+ <p>(<link href="xxx">Website</link> | <link href="xxx">Screenshot</link> | <link href="xxx">Source code</link> )</p>
+ </item>
+ </list>
+</section>
+</page>
diff --git a/platform-overview/C/overview-systemintegration.page b/platform-overview/C/overview-systemintegration.page
new file mode 100644
index 0000000..7b3eae4
--- /dev/null
+++ b/platform-overview/C/overview-systemintegration.page
@@ -0,0 +1,64 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="overview-systemintegration">
+ <info>
+ <link type="guide" xref="index#overview" />
+ <revision version="0.1" date="2012-02-19" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Phil Bull</name>
+ <email>philbull gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Make your app feel like an integral part of the system using the GNOME OS and hardware support layers.</desc>
+ </info>
+
+<title>System integration and hardware support</title>
+
+<list>
+ <item>
+ <p><em style="strong">Strong selling point #1</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #2</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #3</em></p>
+ </item>
+</list>
+
+<p>Marketing blurb, info on what the platform offers.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>IMAGE</p>
+</media>
+
+<section id="what">
+ <title>What can you do?</title>
+
+ <p>For <em style="strong">action</em>, use <em style="strong"><link xref="blah">technology</link></em>.</p>
+
+</section>
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>A sample we should write</p></item>
+ <item><p><link xref="samples#integration">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <p>You can see lots of real-world applications of system integration in open source projects, like the examples given below.</p>
+ <list>
+ <item>
+ <p><em style="strong">XXX</em> is .</p>
+ <p>(<link href="xxx">Website</link> | <link href="xxx">Screenshot</link> | <link href="xxx">Source code</link> )</p>
+ </item>
+ </list>
+
+</section>
+</page>
diff --git a/platform-overview/C/overview-ui.page b/platform-overview/C/overview-ui.page
new file mode 100644
index 0000000..7d55def
--- /dev/null
+++ b/platform-overview/C/overview-ui.page
@@ -0,0 +1,63 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" style="task"
+ id="overview-ui">
+ <info>
+ <link type="guide" xref="index#overview" />
+ <revision version="0.1" date="2012-02-19" status="stub"/>
+
+ <credit type="author copyright">
+ <name>Phil Bull</name>
+ <email>philbull gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Standard user interface elements, rendering, animation, and document display.</desc>
+ </info>
+
+<title>User interface and display</title>
+
+<list>
+ <item>
+ <p><em style="strong">Strong selling point #1</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #2</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #3</em></p>
+ </item>
+</list>
+
+<p>Marketing blurb, info on what the platform offers.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>IMAGE</p>
+</media>
+
+<section id="what">
+ <title>What can you do?</title>
+
+ <p>For <em style="strong">action</em>, use <em style="strong"><link xref="blah">technology</link></em>.</p>
+
+</section>
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>A sample we should write</p></item>
+ <item><p><link xref="samples#integration">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <p>You can see lots of real-world applications of system integration in open source projects, like the examples given below.</p>
+ <list>
+ <item>
+ <p><em style="strong">XXX</em> is .</p>
+ <p>(<link href="xxx">Website</link> | <link href="xxx">Screenshot</link> | <link href="xxx">Source code</link> )</p>
+ </item>
+ </list>
+</section>
+</page>
diff --git a/platform-overview/C/photo-wall/CREDITS b/platform-overview/C/photo-wall/CREDITS
new file mode 100644
index 0000000..c381ecc
--- /dev/null
+++ b/platform-overview/C/photo-wall/CREDITS
@@ -0,0 +1,16 @@
+This beautiful images images were pulled from Flickr and are licenced under a Creative Commons license.
+
+Here are links to the original photos where you'll also find information pertaining to the photographer and the license.
+
+berlin_01.jpg: http://www.flickr.com/photos/29487767 N02/2904087529/
+berlin_02.jpg: http://www.flickr.com/photos/an_untrained_eye/1185704829/
+berlin_03.jpg: http://www.flickr.com/photos/werkunz/3848863160/
+berlin_04.jpg: http://www.flickr.com/photos/96dpi/4119691598/in/photostream/
+berlin_05.jpg: http://www.flickr.com/photos/seier/2584820865/in/photostream/
+berlin_06.jpg: http://www.flickr.com/photos/johnspooner/3205333317/in/photostream/
+berlin_07.jpg: http://www.flickr.com/photos/42311564 N00/275686244/in/photostream/
+berlin_08.jpg: http://www.flickr.com/photos/extranoise/383181110/in/photostream/
+berlin_09.jpg: http://www.flickr.com/photos/extranoise/155896930/in/photostream/
+berlin_10.jpg: http://www.flickr.com/photos/bcnbits/533496990/in/photostream/
+berlin_11.jpg: http://www.flickr.com/photos/bcnbits/870365081/in/photostream/
+berlin_12.jpg: http://www.flickr.com/photos/werkunz/3892782592/in/photostream/
diff --git a/platform-overview/C/photo-wall/berlin_images/berlin_01.jpg b/platform-overview/C/photo-wall/berlin_images/berlin_01.jpg
new file mode 100644
index 0000000..5e0d8ee
Binary files /dev/null and b/platform-overview/C/photo-wall/berlin_images/berlin_01.jpg differ
diff --git a/platform-overview/C/photo-wall/berlin_images/berlin_02.jpg b/platform-overview/C/photo-wall/berlin_images/berlin_02.jpg
new file mode 100644
index 0000000..41db896
Binary files /dev/null and b/platform-overview/C/photo-wall/berlin_images/berlin_02.jpg differ
diff --git a/platform-overview/C/photo-wall/berlin_images/berlin_03.jpg b/platform-overview/C/photo-wall/berlin_images/berlin_03.jpg
new file mode 100644
index 0000000..fdf2ac8
Binary files /dev/null and b/platform-overview/C/photo-wall/berlin_images/berlin_03.jpg differ
diff --git a/platform-overview/C/photo-wall/berlin_images/berlin_04.jpg b/platform-overview/C/photo-wall/berlin_images/berlin_04.jpg
new file mode 100644
index 0000000..394200f
Binary files /dev/null and b/platform-overview/C/photo-wall/berlin_images/berlin_04.jpg differ
diff --git a/platform-overview/C/photo-wall/berlin_images/berlin_05.jpg b/platform-overview/C/photo-wall/berlin_images/berlin_05.jpg
new file mode 100644
index 0000000..014c19d
Binary files /dev/null and b/platform-overview/C/photo-wall/berlin_images/berlin_05.jpg differ
diff --git a/platform-overview/C/photo-wall/berlin_images/berlin_06.jpg b/platform-overview/C/photo-wall/berlin_images/berlin_06.jpg
new file mode 100644
index 0000000..92145c5
Binary files /dev/null and b/platform-overview/C/photo-wall/berlin_images/berlin_06.jpg differ
diff --git a/platform-overview/C/photo-wall/berlin_images/berlin_07.jpg b/platform-overview/C/photo-wall/berlin_images/berlin_07.jpg
new file mode 100644
index 0000000..a824100
Binary files /dev/null and b/platform-overview/C/photo-wall/berlin_images/berlin_07.jpg differ
diff --git a/platform-overview/C/photo-wall/berlin_images/berlin_08.jpg b/platform-overview/C/photo-wall/berlin_images/berlin_08.jpg
new file mode 100644
index 0000000..b37d85a
Binary files /dev/null and b/platform-overview/C/photo-wall/berlin_images/berlin_08.jpg differ
diff --git a/platform-overview/C/photo-wall/berlin_images/berlin_09.jpg b/platform-overview/C/photo-wall/berlin_images/berlin_09.jpg
new file mode 100644
index 0000000..c6d9992
Binary files /dev/null and b/platform-overview/C/photo-wall/berlin_images/berlin_09.jpg differ
diff --git a/platform-overview/C/photo-wall/berlin_images/berlin_10.jpg b/platform-overview/C/photo-wall/berlin_images/berlin_10.jpg
new file mode 100644
index 0000000..9c35593
Binary files /dev/null and b/platform-overview/C/photo-wall/berlin_images/berlin_10.jpg differ
diff --git a/platform-overview/C/photo-wall/berlin_images/berlin_11.jpg b/platform-overview/C/photo-wall/berlin_images/berlin_11.jpg
new file mode 100644
index 0000000..b08ebf6
Binary files /dev/null and b/platform-overview/C/photo-wall/berlin_images/berlin_11.jpg differ
diff --git a/platform-overview/C/photo-wall/berlin_images/berlin_12.jpg b/platform-overview/C/photo-wall/berlin_images/berlin_12.jpg
new file mode 100644
index 0000000..90f9a8d
Binary files /dev/null and b/platform-overview/C/photo-wall/berlin_images/berlin_12.jpg differ
diff --git a/platform-overview/C/photo-wall/photo-wall.c b/platform-overview/C/photo-wall/photo-wall.c
new file mode 100644
index 0000000..63fc045
--- /dev/null
+++ b/platform-overview/C/photo-wall/photo-wall.c
@@ -0,0 +1,153 @@
+#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 FOCUS_DEPTH 100.0
+#define UNFOCUS_DEPTH 0.0
+
+#define IMAGE_DIR_PATH "./berlin_images/"
+
+static GSList *actor_list = NULL;
+static GSList *img_path_list = NULL;
+
+typedef struct Position
+{
+ float x;
+ float y;
+}
+Position;
+
+static Position origin = {0, 0};
+
+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;
+ }
+
+ 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);
+ img_path_list = g_slist_prepend(img_path_list, path);
+ }
+ filename = g_dir_read_name(dir);
+ }
+}
+
+static void
+foreach_set_focus_state(gpointer data, gpointer user_data)
+{
+ ClutterActor *actor = CLUTTER_ACTOR(data);
+ gboolean is_reactive = *((gboolean*)user_data);
+
+ clutter_actor_set_reactive(actor, is_reactive);
+}
+
+static gboolean
+actor_clicked_cb(ClutterActor *actor,
+ ClutterEvent *event,
+ gpointer user_data)
+{
+ /* Flag to keep track of our state. */
+ static gboolean is_focused = FALSE;
+
+ g_slist_foreach(actor_list, foreach_set_focus_state, &is_focused);
+
+ if(is_focused)
+ {
+ clutter_actor_animate(actor, CLUTTER_LINEAR, ANIMATION_DURATION_MS,
+ "x", origin.x,
+ "y", origin.y,
+ "depth", UNFOCUS_DEPTH,
+ "width", (float) THUMBNAIL_SIZE,
+ "height", (float) THUMBNAIL_SIZE,
+ NULL);
+ }
+ else
+ {
+ /*Save the current location before animating. */
+ clutter_actor_get_position(actor, &origin.x, &origin.y);
+ clutter_actor_set_reactive(actor, TRUE);
+ clutter_actor_animate(actor, CLUTTER_LINEAR, ANIMATION_DURATION_MS,
+ "x", (STAGE_WIDTH - STAGE_HEIGHT) / 2.0,
+ "y", 0.0,
+ "depth", FOCUS_DEPTH,
+ "width", (float) STAGE_HEIGHT,
+ "height", (float) STAGE_HEIGHT,
+ NULL);
+ }
+
+ /* Toggle our flag. */
+ is_focused = !is_focused;
+
+ return TRUE;
+}
+
+/* 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);
+}
+
+int
+main(int argc, char *argv[])
+{
+ ClutterColor stage_color = { 16, 16, 16, 255 };
+ ClutterActor *stage = NULL;
+
+ clutter_init (&argc, &argv);
+
+ stage = clutter_stage_get_default();
+ clutter_actor_set_size(stage, STAGE_WIDTH, STAGE_HEIGHT);
+ clutter_stage_set_color(CLUTTER_STAGE (stage), &stage_color);
+
+ load_image_path_names();
+
+ guint row = 0;
+ guint col = 0;
+ for(row=0; row < ROW_COUNT; ++row)
+ {
+ for(col=0; col < COL_COUNT; ++col)
+ {
+ GSList *img_path_node = g_slist_nth(img_path_list, (row * COL_COUNT) + col);
+ ClutterActor *actor = clutter_texture_new_from_file((gchar *)(img_path_node->data), NULL);
+ initialize_actor(actor, row, col);
+ clutter_container_add_actor(CLUTTER_CONTAINER(stage), actor);
+ actor_list = g_slist_prepend(actor_list, actor);
+ }
+ }
+
+ /* Show the stage. */
+ clutter_actor_show(stage);
+
+ /* Start the clutter main loop. */
+ clutter_main();
+
+ return 0;
+}
diff --git a/platform-overview/C/record-collection/record-collection.js b/platform-overview/C/record-collection/record-collection.js
new file mode 100644
index 0000000..a624786
--- /dev/null
+++ b/platform-overview/C/record-collection/record-collection.js
@@ -0,0 +1,148 @@
+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 ();
+ },
+
+ 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 ();
+ },
+
+ 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))");
+ }
+ },
+
+ 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>";
+ },
+
+ _showError: function (msg) {
+ var dialog = new Gtk.MessageDialog ({message_type: Gtk.MessageType.ERROR,
+ buttons: Gtk.ButtonsType.CLOSE,
+ text: msg,
+ transient_for: this.window,
+ modal: true,
+ destroy_with_parent: true});
+ dialog.run ();
+ dialog.destroy ();
+ },
+
+ _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 ();
+ },
+
+ _validateFields: function () {
+ if (this.id_entry.text == "" || this.name_entry.text == "") {
+ this._showError ("All fields are mandatory");
+ return false;
+ }
+ if (isNaN (parseInt (this.id_entry.text))) {
+ this._showError ("Enter a number");
+ this.id_entry.grab_focus ();
+ return false;
+ }
+ return true;
+ },
+
+ _clearFields: function () {
+ this.id_entry.text = "";
+ this.name_entry.text = "";
+ this.id_entry.grab_focus ();
+ }
+}
+
+Gtk.init (0, null);
+
+var demo = new Demo ();
+
+Gtk.main ();
diff --git a/platform-overview/C/sample-avahi-discoverprinter.page b/platform-overview/C/sample-avahi-discoverprinter.page
new file mode 100644
index 0000000..dfb6e24
--- /dev/null
+++ b/platform-overview/C/sample-avahi-discoverprinter.page
@@ -0,0 +1,33 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:facet="http://projectmallard.org/facet/1.0/";
+ type="topic" style="task"
+ id="sample-avahi-discoverprinter">
+
+ <info>
+ <revision version="0.1" date="2012-02-19" status="stub"/>
+
+ <facet:tag key="tech" values="avahi" />
+
+ <credit type="author copyright">
+ <name>Phil Bull</name>
+ <email>philbull gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>xxx</desc>
+ </info>
+
+<title>Discover printers on the local network with mDNS</title>
+
+<p>You can find printers on the local network using Avahi and mDNS/zeroconf.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>Avahi find printers.</p>
+</media>
+
+<code mime="text/x-python">
+import avahi
+do_something()
+</code>
+
+</page>
diff --git a/platform-overview/C/sample-telepathy-imstatus.page b/platform-overview/C/sample-telepathy-imstatus.page
new file mode 100644
index 0000000..2ed0283
--- /dev/null
+++ b/platform-overview/C/sample-telepathy-imstatus.page
@@ -0,0 +1,33 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:facet="http://projectmallard.org/facet/1.0/";
+ type="topic" style="task"
+ id="sample-telepathy-imstatus">
+
+ <info>
+ <revision version="0.1" date="2012-02-19" status="stub"/>
+
+ <facet:tag key="tech" values="telepathy" />
+
+ <credit type="author copyright">
+ <name>Phil Bull</name>
+ <email>philbull gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>xxx</desc>
+ </info>
+
+<title>Change the IM status</title>
+
+<p>Use the Telepathy API to change the user's IM status.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>Empathy instant messaging client</p>
+</media>
+
+<code mime="text/x-python">
+import telepathy
+status = telepathy.get_im_status_or_whatever()
+</code>
+
+</page>
diff --git a/platform-overview/C/samples.page b/platform-overview/C/samples.page
new file mode 100644
index 0000000..b196d6a
--- /dev/null
+++ b/platform-overview/C/samples.page
@@ -0,0 +1,33 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:facet="http://projectmallard.org/facet/1.0/";
+ type="facets" style="task"
+ id="samples">
+ <info>
+ <revision version="0.1" date="2012-02-19" status="stub"/>
+ <link xref="index#docs" type="guide" />
+
+ <facet:match key="tech" />
+ <facet:choice key="tech">
+ <facet:title>Technology</facet:title>
+ <facet:case values="telepathy">Telepathy</facet:case>
+ <facet:case values="avahi">Avahi</facet:case>
+ </facet:choice>
+
+ <credit type="author copyright">
+ <name>Phil Bull</name>
+ <email>philbull gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>Short snippets of example code to implement specific features and UI patterns.</desc>
+ </info>
+
+<title>Code samples</title>
+<p>This library of code snippets provides demonstrations of all sorts of functionality that you can add to your app with GNOME APIs.</p>
+
+<!--
+<links type="guide" groups="telepathy avahi eds">
+ <title>Communication, chat, address books</title>
+</links>-->
+
+</page>
diff --git a/platform-overview/C/tech-atk.page b/platform-overview/C/tech-atk.page
new file mode 100644
index 0000000..a8d9c4b
--- /dev/null
+++ b/platform-overview/C/tech-atk.page
@@ -0,0 +1,108 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="tech-atk">
+<info>
+ <link type="guide" xref="tech" group="atk"/>
+ <desc>Support for screen readers and other accessibility
+ tools</desc>
+ <revision pkgversion="3.0" date="2011-04-05" status="candidate"/>
+</info>
+
+<title>ATK</title>
+
+<list>
+ <item>
+ <p><em style="strong">Strong selling point #1</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #2</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #3</em></p>
+ </item>
+</list>
+
+<p>Marketing blurb, info on what this library offers developers.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>Example image</p>
+</media>
+
+
+<section id="what">
+ <title>What can you do?</title>
+
+ <p>Things that <em style="strong">you can do</em> with <em style="strong"><link xref="blah">some feature</link></em> of the library.</p>
+</section>
+
+
+<section id="docs">
+ <title>API and reference documentation</title>
+ <p></p>
+ <list>
+ <item>
+ <p><em style="strong"><link href="">Documentation Link</link></em></p>
+ <p>Brief description of the documentation. Maybe also some direct links to particularly interesting pages.</p>
+ </item>
+ </list>
+</section>
+
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>A sample we should write</p></item>
+ <item><p><link xref="samples">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <p>This library is used in lots of open source software. Take a look at some of it.</p>
+ <list>
+ <item>
+ <p><em style="strong">XXX</em> is .</p>
+ <p>(<link href="xxx">Website</link> | <link href="xxx">Screenshot</link> | <link href="xxx">Source code</link> )</p>
+ </item>
+ </list>
+</section>
+
+
+<p>Accessibility is the process of ensuring your application can be
+used by people with various disabilities. Disabilities come in many forms:
+visual impairments, movement impairments, hearing impairments, cognitive
+and language impairments, and seizure disorders. Many people have some
+sort of disability, and making your application accessibility will allow
+more people to use your application effectively.</p>
+
+<p>GNOME provides support for accessibility devices using the ATK
+framework. This framework defines a set of interfaces to which graphical
+interface components adhere. This allows, for instance, screen readers
+to read the text of an interface and interact with its controls. ATK
+support is built into GTK+ and the rest of the GNOME platform, so any
+application using GTK+ will have reasonable accessibility support for
+free.</p>
+
+<p>Nonetheless, you should be aware of accessibility issues when
+when developing your applications. Although GTK+ interfaces provide
+reasonable accessibility by default, you can often improve how well
+your program behaves with accessibility tools by providing additional
+information to ATK. If you develop custom widgets, you should ensure
+that they expose their properties to ATK. You should also avoid using
+sound, graphics, or color as the sole means of conveying information
+to the user.</p>
+
+<p>The GNOME desktop ships with a number of accessibility tools
+which enable users with disabilities to take full advantage of their
+desktop and applications. Applications that fully implement ATK will
+be able to work with the accessibility tools. GNOME's accessibility
+tools include a screen reader, a screen magnifier, an on-screen
+keyboard, and <app>Dasher</app>, an innovative
+predictive text entry tool.</p>
+
+<list style="compact">
+ <item><p><link href="http://developer.gnome.org/accessibility-devel-guide/";>GNOME Accessibility for Developers</link></p></item>
+ <item><p><link href="http://library.gnome.org/devel/atk/stable/";>ATK Reference</link></p></item>
+</list>
+</page>
diff --git a/platform-overview/C/tech-cairo.page b/platform-overview/C/tech-cairo.page
new file mode 100644
index 0000000..6d4d602
--- /dev/null
+++ b/platform-overview/C/tech-cairo.page
@@ -0,0 +1,99 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="tech-cairo">
+<info>
+ <link type="guide" xref="tech" group="cairo"/>
+
+ <desc>Modern 2D vector drawing canvas</desc>
+ <revision pkgversion="3.0" date="2011-04-05" status="candidate"/>
+</info>
+
+<title>Cairo</title>
+
+<list>
+ <item>
+ <p><em style="strong">Strong selling point #1</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #2</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #3</em></p>
+ </item>
+</list>
+
+<p>Marketing blurb, info on what this library offers developers.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>Example image</p>
+</media>
+
+
+<section id="what">
+ <title>What can you do?</title>
+
+ <p>Things that <em style="strong">you can do</em> with <em style="strong"><link xref="blah">some feature</link></em> of the library.</p>
+</section>
+
+
+<section id="docs">
+ <title>API and reference documentation</title>
+ <p></p>
+ <list>
+ <item>
+ <p><em style="strong"><link href="">Documentation Link</link></em></p>
+ <p>Brief description of the documentation. Maybe also some direct links to particularly interesting pages.</p>
+ </item>
+ </list>
+</section>
+
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>A sample we should write</p></item>
+ <item><p><link xref="samples">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <p>This library is used in lots of open source software. Take a look at some of it.</p>
+ <list>
+ <item>
+ <p><em style="strong">XXX</em> is .</p>
+ <p>(<link href="xxx">Website</link> | <link href="xxx">Screenshot</link> | <link href="xxx">Source code</link> )</p>
+ </item>
+ </list>
+</section>
+
+
+<p>Cairo is a 2D graphics library featuring a sophisticated API for
+drawing vector graphics, compositing images, and rendering anti-aliased
+text. Cairo provides support for multiple output devices, including the
+X Window System, Microsoft Windows, and image buffers, allowing you to
+write platform-independent code to draw graphics on different media.</p>
+
+<p>The Cairo drawing model is similar to those provided by PostScript
+and PDF. The Cairo API provides such drawing operations as stroking and
+filling cubic BÃzier splines, compositing images, and performing affine
+transformations. These vector operations allow for rich, anti-aliased
+graphics without using expensive pixel-based drawing in your application
+code.</p>
+
+<p>Cairo's rich drawing model allows for high-quality rendering to
+multiple media. The same API can be used to create stunning on-screen
+graphics and text, to render images, or create crisp output suitable
+for printing.</p>
+
+<p>You should use Cairo whenever you need to draw graphics in your
+application beyond the widgets provided by GTK+. Much of the drawing
+inside GTK+ is done using Cairo. Using Cairo for your custom drawing
+will allow your application to have high-quality, anti-aliased, and
+resolution-independent graphics.</p>
+
+<list style="compact">
+ <item><p><link href="http://www.cairographics.org/manual/";>Cairo Manual</link></p></item>
+</list>
+</page>
diff --git a/platform-overview/C/tech-canberra.page b/platform-overview/C/tech-canberra.page
new file mode 100644
index 0000000..138d665
--- /dev/null
+++ b/platform-overview/C/tech-canberra.page
@@ -0,0 +1,82 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="tech-canberra">
+<info>
+ <link type="guide" xref="tech" group="apps"/>
+
+ <desc>Simple audio API for notifications and events</desc>
+ <revision pkgversion="3.0" date="2011-04-05" status="incomplete"/>
+</info>
+
+<title>Canberra</title>
+
+<list>
+ <item>
+ <p><em style="strong">Strong selling point #1</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #2</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #3</em></p>
+ </item>
+</list>
+
+<p>Marketing blurb, info on what this library offers developers.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>Example image</p>
+</media>
+
+
+<section id="what">
+ <title>What can you do?</title>
+
+ <p>Things that <em style="strong">you can do</em> with <em style="strong"><link xref="blah">some feature</link></em> of the library.</p>
+</section>
+
+
+<section id="docs">
+ <title>API and reference documentation</title>
+ <p></p>
+ <list>
+ <item>
+ <p><em style="strong"><link href="">Documentation Link</link></em></p>
+ <p>Brief description of the documentation. Maybe also some direct links to particularly interesting pages.</p>
+ </item>
+ </list>
+</section>
+
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>A sample we should write</p></item>
+ <item><p><link xref="samples">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <p>This library is used in lots of open source software. Take a look at some of it.</p>
+ <list>
+ <item>
+ <p><em style="strong">XXX</em> is .</p>
+ <p>(<link href="xxx">Website</link> | <link href="xxx">Screenshot</link> | <link href="xxx">Source code</link> )</p>
+ </item>
+ </list>
+</section>
+
+
+<p>Canberra is a simple library for playing audio events and notifications,
+such as when the user has received a message or an error has occurred.
+As well as providing a convenient API, Canberra can also work with the
+accessibility features of the desktop to provide alternate notification
+for hearing-impaired users.</p>
+
+<list style="compact">
+ <item><p><link href="http://library.gnome.org/devel/libcanberra/unstable/libcanberra-canberra.html";>Canberra Reference</link></p></item>
+</list>
+
+</page>
diff --git a/platform-overview/C/tech-clutter.page b/platform-overview/C/tech-clutter.page
new file mode 100644
index 0000000..c618934
--- /dev/null
+++ b/platform-overview/C/tech-clutter.page
@@ -0,0 +1,103 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="tech-clutter">
+<info>
+ <link type="guide" xref="tech" group="clutter"/>
+ <desc>Stunning graphics and animations with a scene-graph API</desc>
+ <revision pkgversion="3.0" date="2011-04-05" status="incomplete"/>
+</info>
+
+<title>Clutter</title>
+
+<list>
+ <item>
+ <p><em style="strong">Strong selling point #1</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #2</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #3</em></p>
+ </item>
+</list>
+
+<p>Marketing blurb, info on what this library offers developers.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>Example image</p>
+</media>
+
+
+<section id="what">
+ <title>What can you do?</title>
+
+ <p>Things that <em style="strong">you can do</em> with <em style="strong"><link xref="blah">some feature</link></em> of the library.</p>
+</section>
+
+
+<section id="docs">
+ <title>API and reference documentation</title>
+ <p></p>
+ <list>
+ <item>
+ <p><em style="strong"><link href="">Documentation Link</link></em></p>
+ <p>Brief description of the documentation. Maybe also some direct links to particularly interesting pages.</p>
+ </item>
+ </list>
+</section>
+
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>A sample we should write</p></item>
+ <item><p><link xref="samples">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <p>This library is used in lots of open source software. Take a look at some of it.</p>
+ <list>
+ <item>
+ <p><em style="strong">XXX</em> is .</p>
+ <p>(<link href="xxx">Website</link> | <link href="xxx">Screenshot</link> | <link href="xxx">Source code</link> )</p>
+ </item>
+ </list>
+</section>
+
+
+<p>Clutter is a library that allows creating fast, portable, dynamic,
+compelling user interfaces.</p>
+
+<p>Clutter uses the <link href="http://www.khronos.org/opengl/";>OpenGL</link>
+and <link href="http://www.khronos.org/opengles/";>OpenGL|ES</link> industry
+standard API to access the accelerated graphical hardware on both desktop and
+mobile environments alike, without exposing the complexities of GPU pipeline
+programming.</p>
+
+<p>Clutter does not specify any visual style, and does not provide any
+pre-defined complex user interface control; it lets the developer define what
+is needed, using a flexible scene graph API, with free-form placement of the
+scene elements (or "actors") on the main viewport (or "stage").</p>
+
+<p>Clutter comes with pre-defined actors for displaying solid colors,
+image data, text and custom high-precision 2D drawing using the Cairo
+API. Clutter also provides generic classes for structuring a user interface
+using both a box-packing model like GTK+, and a series of free-form
+"constraints".</p>
+
+<p>A number of third-party libraries allow integration with other
+technologies, such as: Clutter-GTK, for embedding a Clutter stage inside a
+GTK+ application; Clutter-GStreamer, for embedding GStreamer video and audio
+pipelines; Clutter-Box2D and Clutter-Bullet, for adding physics interaction
+in both 2D and 3D environments.</p>
+
+<list style="compact">
+ <item><p><link href="http://docs.clutter-project.org/docs/clutter-cookbook/1.0/";>The Clutter Cookbook</link></p></item>
+ <item><p><link href="http://developer.gnome.org/clutter/stable";>Clutter Reference Manual</link></p></item>
+ <item><p><link href="http://www.clutter-project.org";>The Clutter web site</link></p></item>
+</list>
+
+</page>
diff --git a/platform-overview/C/tech-dbus.page b/platform-overview/C/tech-dbus.page
new file mode 100644
index 0000000..1fdf7f2
--- /dev/null
+++ b/platform-overview/C/tech-dbus.page
@@ -0,0 +1,110 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="tech-dbus">
+<info>
+ <link type="guide" xref="tech" group="d-bus"/>
+ <desc>Standard interprocess communications bus</desc>
+ <revision pkgversion="3.0" date="2011-04-05" status="candidate"/>
+</info>
+
+<title>D-Bus</title>
+
+<list>
+ <item>
+ <p><em style="strong">Strong selling point #1</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #2</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #3</em></p>
+ </item>
+</list>
+
+<p>Marketing blurb, info on what this library offers developers.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>Example image</p>
+</media>
+
+
+<section id="what">
+ <title>What can you do?</title>
+
+ <p>Things that <em style="strong">you can do</em> with <em style="strong"><link xref="blah">some feature</link></em> of the library.</p>
+</section>
+
+
+<section id="docs">
+ <title>API and reference documentation</title>
+ <p></p>
+ <list>
+ <item>
+ <p><em style="strong"><link href="">Documentation Link</link></em></p>
+ <p>Brief description of the documentation. Maybe also some direct links to particularly interesting pages.</p>
+ </item>
+ </list>
+</section>
+
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>A sample we should write</p></item>
+ <item><p><link xref="samples">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <p>This library is used in lots of open source software. Take a look at some of it.</p>
+ <list>
+ <item>
+ <p><em style="strong">XXX</em> is .</p>
+ <p>(<link href="xxx">Website</link> | <link href="xxx">Screenshot</link> | <link href="xxx">Source code</link> )</p>
+ </item>
+ </list>
+</section>
+
+
+<p>D-Bus is a cross-desktop message bus for sending events between
+various applications, the desktop, and low-level components of the system.
+D-Bus provides a simple API for sending messages to particular services
+and for broadcasting messages to all interested services. D-Bus enables
+different types of applications to communicate and integrate with each
+other and with the desktop, providing better interaction and a richer
+experience for the user.</p>
+
+<p>D-Bus provides a session and a system bus. The session bus is
+used by applications in a single user session, allowing them to share
+data and event notifications and to integrate into the user's desktop.
+For example, movie players can send a D-Bus message to prevent the
+screensaver from activating when the user is watching a movie.</p>
+
+<p>The system bus is a single message bus which runs independently of
+any user sessions. It can communicate with applications in any session,
+enabling those applications to interact with system components without
+dealing with low-level system details. The system bus is used to provide
+important functionality that users expect to work on their systems. For
+example, the system bus is used to monitor when network interfaces go up
+or down, when external drives get plugged in, and when laptop batteries
+are low.</p>
+
+<p>D-Bus is developed jointly on <link
+href="http://www.freedesktop.org/";>freedesktop.org</link>, so you can
+use it with different desktop environments and applications. Because
+D-Bus is a cross-desktop project, you use it to create portable and
+versatile software that seamlessly integrates with the user's desktop,
+regardless of which desktop it is.</p>
+
+<p>GNOME provides full support for D-Bus using the GBus and GDBus
+APIs in GIO.</p>
+
+<list style="compact">
+ <item><p><link href="http://developer.gnome.org/gio/stable/";>GIO Reference Manual</link></p></item>
+ <item><p><link href="http://dbus.freedesktop.org/doc/dbus-tutorial.html";>D-Bus Tutorial</link></p></item>
+ <item><p><link href="http://dbus.freedesktop.org/doc/dbus-specification.html";>D-Bus Specification</link></p></item>
+</list>
+
+</page>
diff --git a/platform-overview/C/tech-eds.page b/platform-overview/C/tech-eds.page
new file mode 100644
index 0000000..2be88e8
--- /dev/null
+++ b/platform-overview/C/tech-eds.page
@@ -0,0 +1,95 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="tech-eds">
+<info>
+ <link type="guide" xref="tech" group="apps"/>
+ <desc>Integration with the desktop-wide address book and calendar</desc>
+ <revision pkgversion="3.0" date="2011-04-05" status="candidate"/>
+</info>
+
+<title>Evolution Data Server</title>
+
+<list>
+ <item>
+ <p><em style="strong">Strong selling point #1</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #2</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #3</em></p>
+ </item>
+</list>
+
+<p>Marketing blurb, info on what this library offers developers.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>Example image</p>
+</media>
+
+
+<section id="what">
+ <title>What can you do?</title>
+
+ <p>Things that <em style="strong">you can do</em> with <em style="strong"><link xref="blah">some feature</link></em> of the library.</p>
+</section>
+
+
+<section id="docs">
+ <title>API and reference documentation</title>
+ <p></p>
+ <list>
+ <item>
+ <p><em style="strong"><link href="">Documentation Link</link></em></p>
+ <p>Brief description of the documentation. Maybe also some direct links to particularly interesting pages.</p>
+ </item>
+ </list>
+</section>
+
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>A sample we should write</p></item>
+ <item><p><link xref="samples">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <p>This library is used in lots of open source software. Take a look at some of it.</p>
+ <list>
+ <item>
+ <p><em style="strong">XXX</em> is .</p>
+ <p>(<link href="xxx">Website</link> | <link href="xxx">Screenshot</link> | <link href="xxx">Source code</link> )</p>
+ </item>
+ </list>
+</section>
+
+
+<p>With Evolution Data Server, GNOME provides a single address book and
+calendar that all applications can use to store and retrieve information.
+Using Evolution Data Server means that users no longer have to maintain
+separate lists of contacts in each application, or manually copy events
+to their calendar.</p>
+
+<p>People use computers increasingly to interact with their friends
+and colleagues. Applications such as email programs, instant messengers,
+and telephony and video conferencing applications are used to communicate
+with others. These applications often provide contact lists to help users.
+Using Evolution Data Server, applications can store contact information in
+a single location, allowing all applications to see all the pertinent data
+about users' contacts.</p>
+
+<p>Applications can also use Evolution Data Server to store and retrieve
+appointments on the user's calendar. For example, the clock on the panel
+shows a simple calendar when clicked. If the user has any appointments
+scheduled, they are shown alongside the calendar. This makes it easy to
+see upcoming appointments without opening a full calendar application.</p>
+
+<list style="compact">
+ <item><p><link href="http://developer.gnome.org/libebook/stable/";>Evolution API Reference: libebook</link></p></item>
+ <item><p><link href="http://developer.gnome.org/libecal/stable/";>Evolution API Reference: libecal</link></p></item>
+</list>
+</page>
diff --git a/platform-overview/C/tech-gda.page b/platform-overview/C/tech-gda.page
new file mode 100644
index 0000000..55abf19
--- /dev/null
+++ b/platform-overview/C/tech-gda.page
@@ -0,0 +1,79 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="tech-gda">
+<info>
+ <link type="guide" xref="tech" group="apps"/>
+ <desc>Common relational database access</desc>
+ <revision pkgversion="3.0" date="2011-04-05" status="incomplete"/>
+</info>
+
+<title>GDA</title>
+
+<list>
+ <item>
+ <p><em style="strong">Strong selling point #1</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #2</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #3</em></p>
+ </item>
+</list>
+
+<p>Marketing blurb, info on what this library offers developers.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>Example image</p>
+</media>
+
+
+<section id="what">
+ <title>What can you do?</title>
+
+ <p>Things that <em style="strong">you can do</em> with <em style="strong"><link xref="blah">some feature</link></em> of the library.</p>
+</section>
+
+
+<section id="docs">
+ <title>API and reference documentation</title>
+ <p></p>
+ <list>
+ <item>
+ <p><em style="strong"><link href="">Documentation Link</link></em></p>
+ <p>Brief description of the documentation. Maybe also some direct links to particularly interesting pages.</p>
+ </item>
+ </list>
+</section>
+
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>A sample we should write</p></item>
+ <item><p><link xref="samples">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <p>This library is used in lots of open source software. Take a look at some of it.</p>
+ <list>
+ <item>
+ <p><em style="strong">XXX</em> is .</p>
+ <p>(<link href="xxx">Website</link> | <link href="xxx">Screenshot</link> | <link href="xxx">Source code</link> )</p>
+ </item>
+ </list>
+</section>
+
+
+<p>GDA offers a wrapper around relational databases, allowing you to
+easily store and retrieve data in many different common database
+systems.</p>
+
+<steps>
+ <item><p><link href="http://developer-next.gnome.org/libgda/stable/";>GNOME Data Access Manual</link></p></item>
+</steps>
+
+</page>
diff --git a/platform-overview/C/tech-gdk.page b/platform-overview/C/tech-gdk.page
new file mode 100644
index 0000000..61817bb
--- /dev/null
+++ b/platform-overview/C/tech-gdk.page
@@ -0,0 +1,102 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="tech-gdk">
+<info>
+ <link type="guide" xref="tech" group="gdk"/>
+ <desc>Underlying windowing and event handling</desc>
+ <revision pkgversion="3.0" date="2011-04-05" status="candidate"/>
+</info>
+
+<title>GDK</title>
+
+<list>
+ <item>
+ <p><em style="strong">Strong selling point #1</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #2</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #3</em></p>
+ </item>
+</list>
+
+<p>Marketing blurb, info on what this library offers developers.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>Example image</p>
+</media>
+
+
+<section id="what">
+ <title>What can you do?</title>
+
+ <p>Things that <em style="strong">you can do</em> with <em style="strong"><link xref="blah">some feature</link></em> of the library.</p>
+</section>
+
+
+<section id="docs">
+ <title>API and reference documentation</title>
+ <p></p>
+ <list>
+ <item>
+ <p><em style="strong"><link href="">Documentation Link</link></em></p>
+ <p>Brief description of the documentation. Maybe also some direct links to particularly interesting pages.</p>
+ </item>
+ </list>
+</section>
+
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>A sample we should write</p></item>
+ <item><p><link xref="samples">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <p>This library is used in lots of open source software. Take a look at some of it.</p>
+ <list>
+ <item>
+ <p><em style="strong">XXX</em> is .</p>
+ <p>(<link href="xxx">Website</link> | <link href="xxx">Screenshot</link> | <link href="xxx">Source code</link> )</p>
+ </item>
+ </list>
+</section>
+
+
+<p>GDK is the low-level library used by GTK+ to interact with the
+system for graphics and input devices. Although you will rarely use
+GDK directly in application code, it contains all the necessary
+functionality to draw objects and text to the screen and to interact
+with the user with various input devices.</p>
+
+<p>GDK enables you to access events from keyboards, mice, and other
+input devices, rather than connect to the high-level signals used in
+GTK+. GDK also provides low-level routines to access drag and drop
+and clipboard data from the system. When implementing custom controls,
+you may need to access these features to implement proper user interaction
+behavior.</p>
+
+<p>GDK provides other functionality which is needed to implement
+a complete graphical toolkit like GTK+. Since GDK acts as a platform
+abstraction, allowing GTK+ to run under multiple environments, it
+provides an API for all of the system functionality needed by GTK+.
+This includes information about multi-head displays, resolution and
+color depth, colormaps, and cursors.</p>
+
+<p>You should use GDK whenever you need low-level access to the
+underlying windowing system, including low-level access to events,
+windows, and the clipboard. Using GDK for these tasks ensures that
+your code is portable and integrates with the rest of your GTK+ code.
+The simple drawing routines in GDK should generally not be used.
+Instead, you should use the extensive functionality provide by
+Cairo.</p>
+
+<list style="compact">
+ <item><p><link href="http://library.gnome.org/devel/gdk/stable/";>GDK Reference Manual</link></p></item>
+</list>
+</page>
diff --git a/platform-overview/C/tech-gio-network.page b/platform-overview/C/tech-gio-network.page
new file mode 100644
index 0000000..d08b9a8
--- /dev/null
+++ b/platform-overview/C/tech-gio-network.page
@@ -0,0 +1,84 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="tech-gio-network">
+<info>
+ <link type="guide" xref="tech" group="gio-network"/>
+ <desc>Powerful networking API built on the GIO stream classes</desc>
+ <revision pkgversion="3.0" date="2011-04-05" status="review"/>
+</info>
+
+<title>GIO Networking</title>
+
+<list>
+ <item>
+ <p><em style="strong">Strong selling point #1</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #2</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #3</em></p>
+ </item>
+</list>
+
+<p>Marketing blurb, info on what this library offers developers.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>Example image</p>
+</media>
+
+
+<section id="what">
+ <title>What can you do?</title>
+
+ <p>Things that <em style="strong">you can do</em> with <em style="strong"><link xref="blah">some feature</link></em> of the library.</p>
+</section>
+
+
+<section id="docs">
+ <title>API and reference documentation</title>
+ <p></p>
+ <list>
+ <item>
+ <p><em style="strong"><link href="">Documentation Link</link></em></p>
+ <p>Brief description of the documentation. Maybe also some direct links to particularly interesting pages.</p>
+ </item>
+ </list>
+</section>
+
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>A sample we should write</p></item>
+ <item><p><link xref="samples">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <p>This library is used in lots of open source software. Take a look at some of it.</p>
+ <list>
+ <item>
+ <p><em style="strong">XXX</em> is .</p>
+ <p>(<link href="xxx">Website</link> | <link href="xxx">Screenshot</link> | <link href="xxx">Source code</link> )</p>
+ </item>
+ </list>
+</section>
+
+
+<p>Built on top of the stream APIs used for files, GIO provides
+high-level networking APIs to communicate over TCP/IP and UNIX
+domain sockets. You can use the GIO networking APIs to connect
+to a server, listen for events, and read resources. The
+asynchronous API designs means your application doesn't block
+waiting for a response.</p>
+
+<list style="compact">
+ <item><p><link href="http://developer.gnome.org/gio/stable/";>GIO Reference Manual</link></p></item>
+ <item><p><link href="http://developer-next.gnome.org/gio/stable/networking.html";>Lowlevel network support</link></p></item>
+ <item><p><link href="http://developer-next.gnome.org/gio/stable/highlevel-socket.html";>Highlevel network functionality</link></p></item>
+</list>
+
+</page>
diff --git a/platform-overview/C/tech-gio.page b/platform-overview/C/tech-gio.page
new file mode 100644
index 0000000..2b51283
--- /dev/null
+++ b/platform-overview/C/tech-gio.page
@@ -0,0 +1,92 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="tech-gio">
+<info>
+ <link type="guide" xref="tech" group="gio"/>
+ <desc>Asynchronous file and URI handling with access
+ to file and volume info</desc>
+ <revision pkgversion="3.0" date="2011-04-05" status="review"/>
+</info>
+
+<title>GIO Files</title>
+
+<list>
+ <item>
+ <p><em style="strong">Strong selling point #1</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #2</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #3</em></p>
+ </item>
+</list>
+
+<p>Marketing blurb, info on what this library offers developers.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>Example image</p>
+</media>
+
+
+<section id="what">
+ <title>What can you do?</title>
+
+ <p>Things that <em style="strong">you can do</em> with <em style="strong"><link xref="blah">some feature</link></em> of the library.</p>
+</section>
+
+
+<section id="docs">
+ <title>API and reference documentation</title>
+ <p></p>
+ <list>
+ <item>
+ <p><em style="strong"><link href="">Documentation Link</link></em></p>
+ <p>Brief description of the documentation. Maybe also some direct links to particularly interesting pages.</p>
+ </item>
+ </list>
+</section>
+
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>A sample we should write</p></item>
+ <item><p><link xref="samples">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <p>This library is used in lots of open source software. Take a look at some of it.</p>
+ <list>
+ <item>
+ <p><em style="strong">XXX</em> is .</p>
+ <p>(<link href="xxx">Website</link> | <link href="xxx">Screenshot</link> | <link href="xxx">Source code</link> )</p>
+ </item>
+ </list>
+</section>
+
+
+<p>GIO provides APIs for asynchronously reading and writing files and
+other streams. Files are referenced by URIs, and local backends can
+provide access to more than just local files. When running under the
+GNOME desktop, GIO uses GVfs to allow access to files over SFTP, FTP,
+WebDAV, SMB, and other popular protocols. This transparent network
+file access is free to all applications using GIO.</p>
+
+<p>The GIO file APIs were designed to be used in event-driven graphical
+interfaces. The non-blocking, asynchronous design means your user interface
+doesn't hang while waiting for a file. There are also synchronous versions
+of the APIs available, which are sometimes more convenient for worker
+threads or processes.</p>
+
+<p>GIO also provides routines for managing drives and volumes, querying
+file types and icons, and finding applications to open files.</p>
+
+<list style="compact">
+ <item><p><link href="http://developer.gnome.org/gio/stable/";>GIO Reference Manual</link></p></item>
+</list>
+
+</page>
diff --git a/platform-overview/C/tech-glib.page b/platform-overview/C/tech-glib.page
new file mode 100644
index 0000000..80c7d4d
--- /dev/null
+++ b/platform-overview/C/tech-glib.page
@@ -0,0 +1,69 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" id="glib">
+<info>
+ <link type="guide" xref="tech" group="glib"/>
+ <desc>glib</desc>
+</info>
+
+<title>GLib</title>
+
+<list>
+ <item>
+ <p><em style="strong">Strong selling point #1</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #2</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #3</em></p>
+ </item>
+</list>
+
+<p>Marketing blurb, info on what this library offers developers.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>Example image</p>
+</media>
+
+
+<section id="what">
+ <title>What can you do?</title>
+
+ <p>Things that <em style="strong">you can do</em> with <em style="strong"><link xref="blah">some feature</link></em> of the library.</p>
+</section>
+
+
+<section id="docs">
+ <title>API and reference documentation</title>
+ <p></p>
+ <list>
+ <item>
+ <p><em style="strong"><link href="">Documentation Link</link></em></p>
+ <p>Brief description of the documentation. Maybe also some direct links to particularly interesting pages.</p>
+ </item>
+ </list>
+</section>
+
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>A sample we should write</p></item>
+ <item><p><link xref="samples">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <p>This library is used in lots of open source software. Take a look at some of it.</p>
+ <list>
+ <item>
+ <p><em style="strong">XXX</em> is .</p>
+ <p>(<link href="xxx">Website</link> | <link href="xxx">Screenshot</link> | <link href="xxx">Source code</link> )</p>
+ </item>
+ </list>
+</section>
+
+
+</page>
diff --git a/platform-overview/C/tech-gobject.page b/platform-overview/C/tech-gobject.page
new file mode 100644
index 0000000..3539050
--- /dev/null
+++ b/platform-overview/C/tech-gobject.page
@@ -0,0 +1,69 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" id="tech-gobject">
+<info>
+ <link type="guide" xref="tech" group="gobject"/>
+ <desc>Bindable and introspectable C object system</desc>
+</info>
+
+<title>GObject</title>
+
+<list>
+ <item>
+ <p><em style="strong">Strong selling point #1</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #2</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #3</em></p>
+ </item>
+</list>
+
+<p>Marketing blurb, info on what this library offers developers.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>Example image</p>
+</media>
+
+
+<section id="what">
+ <title>What can you do?</title>
+
+ <p>Things that <em style="strong">you can do</em> with <em style="strong"><link xref="blah">some feature</link></em> of the library.</p>
+</section>
+
+
+<section id="docs">
+ <title>API and reference documentation</title>
+ <p></p>
+ <list>
+ <item>
+ <p><em style="strong"><link href="">Documentation Link</link></em></p>
+ <p>Brief description of the documentation. Maybe also some direct links to particularly interesting pages.</p>
+ </item>
+ </list>
+</section>
+
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>A sample we should write</p></item>
+ <item><p><link xref="samples">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <p>This library is used in lots of open source software. Take a look at some of it.</p>
+ <list>
+ <item>
+ <p><em style="strong">XXX</em> is .</p>
+ <p>(<link href="xxx">Website</link> | <link href="xxx">Screenshot</link> | <link href="xxx">Source code</link> )</p>
+ </item>
+ </list>
+</section>
+
+
+</page>
diff --git a/platform-overview/C/tech-gsettings.page b/platform-overview/C/tech-gsettings.page
new file mode 100644
index 0000000..61d28c7
--- /dev/null
+++ b/platform-overview/C/tech-gsettings.page
@@ -0,0 +1,68 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" id="tech-gsettings">
+<info>
+ <link type="guide" xref="tech" group="gsettings"/>
+</info>
+
+<title>GSettings</title>
+
+<list>
+ <item>
+ <p><em style="strong">Strong selling point #1</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #2</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #3</em></p>
+ </item>
+</list>
+
+<p>Marketing blurb, info on what this library offers developers.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>Example image</p>
+</media>
+
+
+<section id="what">
+ <title>What can you do?</title>
+
+ <p>Things that <em style="strong">you can do</em> with <em style="strong"><link xref="blah">some feature</link></em> of the library.</p>
+</section>
+
+
+<section id="docs">
+ <title>API and reference documentation</title>
+ <p></p>
+ <list>
+ <item>
+ <p><em style="strong"><link href="">Documentation Link</link></em></p>
+ <p>Brief description of the documentation. Maybe also some direct links to particularly interesting pages.</p>
+ </item>
+ </list>
+</section>
+
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>A sample we should write</p></item>
+ <item><p><link xref="samples">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <p>This library is used in lots of open source software. Take a look at some of it.</p>
+ <list>
+ <item>
+ <p><em style="strong">XXX</em> is .</p>
+ <p>(<link href="xxx">Website</link> | <link href="xxx">Screenshot</link> | <link href="xxx">Source code</link> )</p>
+ </item>
+ </list>
+</section>
+
+
+</page>
diff --git a/platform-overview/C/tech-gstreamer.page b/platform-overview/C/tech-gstreamer.page
new file mode 100644
index 0000000..b5de002
--- /dev/null
+++ b/platform-overview/C/tech-gstreamer.page
@@ -0,0 +1,112 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" id="tech-gstreamer">
+<info>
+ <link type="guide" xref="tech" group="gstreamer"/>
+ <desc>Plugin-based rich multimedia creation and delivery</desc>
+ <revision pkgversion="3.0" date="2011-04-05" status="candidate"/>
+</info>
+
+<title>GStreamer</title>
+
+<list>
+ <item>
+ <p><em style="strong">Strong selling point #1</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #2</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #3</em></p>
+ </item>
+</list>
+
+<p>Marketing blurb, info on what this library offers developers.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>Example image</p>
+</media>
+
+
+<section id="what">
+ <title>What can you do?</title>
+
+ <p>Things that <em style="strong">you can do</em> with <em style="strong"><link xref="blah">some feature</link></em> of the library.</p>
+</section>
+
+
+<section id="docs">
+ <title>API and reference documentation</title>
+ <p></p>
+ <list>
+ <item>
+ <p><em style="strong"><link href="">Documentation Link</link></em></p>
+ <p>Brief description of the documentation. Maybe also some direct links to particularly interesting pages.</p>
+ </item>
+ </list>
+</section>
+
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>A sample we should write</p></item>
+ <item><p><link xref="samples">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <p>This library is used in lots of open source software. Take a look at some of it.</p>
+ <list>
+ <item>
+ <p><em style="strong">XXX</em> is .</p>
+ <p>(<link href="xxx">Website</link> | <link href="xxx">Screenshot</link> | <link href="xxx">Source code</link> )</p>
+ </item>
+ </list>
+</section>
+
+
+<p>GStreamer is a powerful multimedia library for playing, creating,
+and manipulating sound, video, and other media. You can use GStreamer
+to provide sound and video playback, record input from multiple sources,
+and edit multimedia content. GStreamer supports encoding and decoding
+numerous formats by default, and support for additional formats can be
+added with plug-ins.</p>
+
+<p>GStreamer provides a flexible architecture wherein media is
+processed through a pipeline of elements. Each element may apply
+filters to the content, such as encoding or decoding, combining
+multiple sources, or transforming the multimedia content. This
+architecture allows for an arbitrary arrangement of elements,
+so that you can accomplish virtually any effect using GStreamer.
+Furthermore, GStreamer is designed to have low overhead, so it
+can be used in applications with high demands on latency.</p>
+
+<p>While GStreamer provides a powerful API for manipulating
+multimedia, it also provides convenient routines for simple
+playback. GStreamer can automatically construct a pipeline to
+read and playback files in any supported format, allowing you
+to use sound and video in your application easily.</p>
+
+<p>The GStreamer architecture allows plugins to add encoders,
+decoders, and all sorts of content filters. Third-party developers
+can provide GStreamer plugins which will be automatically available
+to other applications using GStreamer. Plugins can provide support
+for other multimedia formats or provide additional functionality
+and effects.</p>
+
+<p>You should use GStreamer whenever you need to read or play
+multimedia content in your application, or if your application
+needs to manipulate sound or video. Using GStreamer makes your
+application development easy, and it provides you well-tested
+elements for many of your needs.</p>
+
+<p>For comprehensive information on GStreamer, see <link
+href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/index.html";>The
+GStreamer Application Development Manual</link>, <link
+href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gstreamer/html/";>The
+GStreamer 0.10 Core Reference Manual</link>, and <link
+href="http://gstreamer.freedesktop.org/documentation/";>the
+GStreamer documentation page</link>.</p>
+</page>
diff --git a/platform-overview/C/tech-gtk.page b/platform-overview/C/tech-gtk.page
new file mode 100644
index 0000000..4dab6bb
--- /dev/null
+++ b/platform-overview/C/tech-gtk.page
@@ -0,0 +1,105 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" id="tech-gtk">
+<info>
+ <link type="guide" xref="tech" group="gtk"/>
+ <desc>Graphical interfaces and core application support</desc>
+ <revision pkgversion="3.0" date="2011-04-05" status="candidate"/>
+</info>
+
+<title>GTK+</title>
+
+<list>
+ <item>
+ <p><em style="strong">Strong selling point #1</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #2</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #3</em></p>
+ </item>
+</list>
+
+<p>Marketing blurb, info on what this library offers developers.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>Example image</p>
+</media>
+
+
+<section id="what">
+ <title>What can you do?</title>
+
+ <p>Things that <em style="strong">you can do</em> with <em style="strong"><link xref="blah">some feature</link></em> of the library.</p>
+</section>
+
+
+<section id="docs">
+ <title>API and reference documentation</title>
+ <p></p>
+ <list>
+ <item>
+ <p><em style="strong"><link href="">Documentation Link</link></em></p>
+ <p>Brief description of the documentation. Maybe also some direct links to particularly interesting pages.</p>
+ </item>
+ </list>
+</section>
+
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>A sample we should write</p></item>
+ <item><p><link xref="samples">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <p>This library is used in lots of open source software. Take a look at some of it.</p>
+ <list>
+ <item>
+ <p><em style="strong">XXX</em> is .</p>
+ <p>(<link href="xxx">Website</link> | <link href="xxx">Screenshot</link> | <link href="xxx">Source code</link> )</p>
+ </item>
+ </list>
+</section>
+
+
+<p>GTK+ is the primary library used to construct user interfaces
+in GNOME. It provides all the user interface controls, or widgets,
+used in a common graphical application. Its modern, object-oriented
+API allows you to construct attractive and sophisticated user
+interfaces without dealing with the low-level details of drawing and
+device interaction.</p>
+
+<p>In addition to basic widgets, such as buttons, check boxes,
+and text entries, GTK+ also provides powerful Model-View-Controller
+(MVC) APIs for tree views, multi-line text fields, and menu and
+toolbar actions.</p>
+
+<p>Widgets in GTK+ are placed on windows using a box-packing model.
+Programmers specify only how to pack widgets together in container
+boxes, rather than position them directly with absolute coordinates.
+GTK+ ensures that windows are sized correctly to fit their contents,
+and it automatically handles window resizing.</p>
+
+<p>Because GTK+ offers a flexible API, developing additional widgets
+for use in GTK+ applications is easy. A number of third-party libraries
+exist which provide additional widgets, and many developers have created
+custom, special-purpose widgets for their applications.</p>
+
+<p>GTK+ handles the difficult details of user interfaces and user
+interaction, and provides a simple yet powerful API which allows you
+to focus on the details of your application. Applications developed
+with GTK+ will automatically follow the user's theme and font settings,
+will interact properly with accessibility technologies, and will behave
+as users expect.</p>
+
+<list style="compact">
+ <item><p><link href="http://developer.gnome.org/gnome-devel-demos/stable/image-viewer.c.html";>GTK+ demo tutorial</link></p></item>
+ <item><p><link href="http://developer.gnome.org/gtk3/stable/";>GTK+ Reference Manual</link></p></item>
+ <item><p><link href="http://gtk.org/";>The GTK+ web site</link></p></item>
+</list>
+</page>
diff --git a/platform-overview/C/gupnp.page b/platform-overview/C/tech-gupnp.page
similarity index 70%
rename from platform-overview/C/gupnp.page
rename to platform-overview/C/tech-gupnp.page
index 283a51b..3abd503 100644
--- a/platform-overview/C/gupnp.page
+++ b/platform-overview/C/tech-gupnp.page
@@ -1,14 +1,72 @@
<page xmlns="http://projectmallard.org/1.0/";
- type="topic"
- id="gupnp">
+ type="topic" id="tech-gupnp">
<info>
- <link type="guide" xref="index" group="gstreamer"/>
+ <link type="guide" xref="tech" group="gupnp"/>
<desc>An easy to use, efficient and flexible UPnP framework</desc>
<revision pkgversion="1.0" date="2011-05-17" status="candidate"/>
</info>
<title>GUPnP</title>
+<list>
+ <item>
+ <p><em style="strong">Strong selling point #1</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #2</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #3</em></p>
+ </item>
+</list>
+
+<p>Marketing blurb, info on what this library offers developers.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>Example image</p>
+</media>
+
+
+<section id="what">
+ <title>What can you do?</title>
+
+ <p>Things that <em style="strong">you can do</em> with <em style="strong"><link xref="blah">some feature</link></em> of the library.</p>
+</section>
+
+
+<section id="docs">
+ <title>API and reference documentation</title>
+ <p></p>
+ <list>
+ <item>
+ <p><em style="strong"><link href="">Documentation Link</link></em></p>
+ <p>Brief description of the documentation. Maybe also some direct links to particularly interesting pages.</p>
+ </item>
+ </list>
+</section>
+
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>A sample we should write</p></item>
+ <item><p><link xref="samples">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <p>This library is used in lots of open source software. Take a look at some of it.</p>
+ <list>
+ <item>
+ <p><em style="strong">XXX</em> is .</p>
+ <p>(<link href="xxx">Website</link> | <link href="xxx">Screenshot</link> | <link href="xxx">Source code</link> )</p>
+ </item>
+ </list>
+</section>
+
+
<p>GUPnP is an object-oriented open source framework for creating UPnP devices and control points,
written in C using GObject and libsoup. The GUPnP API is intended to be easy to use, efficient and
flexible.</p>
diff --git a/platform-overview/C/tech-keyring.page b/platform-overview/C/tech-keyring.page
new file mode 100644
index 0000000..cfb4e9b
--- /dev/null
+++ b/platform-overview/C/tech-keyring.page
@@ -0,0 +1,116 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" id="tech-keyring">
+<info>
+ <link type="guide" xref="tech" group="apps"/>
+ <desc>Secure storage for passwords and other data</desc>
+ <revision pkgversion="3.0" date="2011-04-05" status="candidate"/>
+</info>
+
+<title>Keyring</title>
+
+<list>
+ <item>
+ <p><em style="strong">Strong selling point #1</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #2</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #3</em></p>
+ </item>
+</list>
+
+<p>Marketing blurb, info on what this library offers developers.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>Example image</p>
+</media>
+
+
+<section id="what">
+ <title>What can you do?</title>
+
+ <p>Things that <em style="strong">you can do</em> with <em style="strong"><link xref="blah">some feature</link></em> of the library.</p>
+
+ <p>GNOME provides a modern and secure keyring manager to store users'
+passwords and other sensitive data. Applications can use the keyring
+manager library to store and access passwords, and users can manage
+their passwords using GNOME's <app>Seahorse</app>
+application.</p>
+
+<p>The keyring manager provides any number of keyrings, where each
+keyring can contain any number of keyring items. Items in a keyring
+store some piece of data, often a password. Each keyring is locked
+individually, and users must provide a password to unlock the keyring.
+Once a keyring has been unlocked, the user has access to all of the
+items in that keyring.</p>
+
+<p>The keyring manager provides access control lists for each keyring
+item, controlling which applications are allowed access to that item.
+If an unknown application attempts to access a keyring item, the keyring
+manager will prompt the user to allow or deny that application access.
+This helps prevent malicious or poorly-written programs from accessing
+the user's sensitive data.</p>
+
+<p>Keyring data stored on the file system is encrypted with the AES
+block cipher, and SHA1 is used for hashes of the item's attributes.
+Using the attributes hash, the keyring manager is able to look up items
+requested by applications without ever unlocking the keyring. The
+keyring has to be unlocked when a matching item is found and
+accessed.</p>
+
+<p>The keyring manager also provides a session keyring. Items in
+the session keyring are never stored on disk, and are lost as soon as
+the user's session ends. The session keyring can be used to store
+passwords to be used in the current session only.</p>
+
+<p>If you use GIO to access remote servers, you automatically
+get the benefits of the keyring manager. Whenever GVFS needs to
+authenticate the user, it provides the option to store the password,
+either in the default keyring or in the session keyring.</p>
+
+<p>You should use the keyring manager whenever your application needs
+to store passwords or other sensitive data for users. Using the keyring
+manager provides a better user experience while still keeping user data
+safe and secure.</p>
+
+</section>
+
+
+<section id="docs">
+ <title>API and reference documentation</title>
+ <p></p>
+ <list>
+ <item>
+ <p><em style="strong"><link href="http://developer.gnome.org/gnome-keyring/stable/";>gnome-keyring Reference Manual</link></em></p>
+ <p>Brief description of the documentation. Maybe also some direct links to particularly interesting pages.</p>
+ </item>
+ <item>
+ <p><em style="strong"><link href="http://developer.gnome.org/libseahorse/stable/";>libseahorse Reference Manual</link></em></p>
+ <p>Brief description of the documentation. Maybe also some direct links to particularly interesting pages.</p>
+ </item>
+ </list>
+</section>
+
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>A sample we should write</p></item>
+ <item><p><link xref="samples">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <p>This library is used in lots of open source software. Take a look at some of it.</p>
+ <list>
+ <item>
+ <p><em style="strong">XXX</em> is .</p>
+ <p>(<link href="xxx">Website</link> | <link href="xxx">Screenshot</link> | <link href="xxx">Source code</link> )</p>
+ </item>
+ </list>
+</section>
+
+</page>
diff --git a/platform-overview/C/tech-notify.page b/platform-overview/C/tech-notify.page
new file mode 100644
index 0000000..dd5c9ba
--- /dev/null
+++ b/platform-overview/C/tech-notify.page
@@ -0,0 +1,77 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" id="tech-notify">
+<info>
+ <link type="guide" xref="tech" group="apps"/>
+ <desc>Interactive notifications in the messaging tray</desc>
+ <revision pkgversion="3.0" date="2011-04-05" status="incomplete"/>
+</info>
+
+<title>Notify</title>
+
+<list>
+ <item>
+ <p><em style="strong">Strong selling point #1</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #2</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #3</em></p>
+ </item>
+</list>
+
+<p>Marketing blurb, info on what this library offers developers.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>Example image</p>
+</media>
+
+
+<section id="what">
+ <title>What can you do?</title>
+
+
+ <p>The libnotify library provides a convenient API for presenting
+notifications to the user. Notifications can be simple message or
+they can allow the user to respond. Notifications made with libnotify
+will use the appropriate interface in the environment the application
+is running in. In GNOME 3, notifications are displayed at the bottom
+of the screen and then put into the messaging tray.</p>
+
+ <p>Things that <em style="strong">you can do</em> with <em style="strong"><link xref="blah">some feature</link></em> of the library.</p>
+</section>
+
+
+<section id="docs">
+ <title>API and reference documentation</title>
+ <p></p>
+ <list>
+ <item>
+ <p><em style="strong"><link href="http://developer-next.gnome.org/libnotify/";>Libnotify Reference Manual</link></em></p>
+ <p>Brief description of the documentation. Maybe also some direct links to particularly interesting pages.</p>
+ </item>
+ </list>
+</section>
+
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>A sample we should write</p></item>
+ <item><p><link xref="samples">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <p>This library is used in lots of open source software. Take a look at some of it.</p>
+ <list>
+ <item>
+ <p><em style="strong">XXX</em> is .</p>
+ <p>(<link href="xxx">Website</link> | <link href="xxx">Screenshot</link> | <link href="xxx">Source code</link> )</p>
+ </item>
+ </list>
+</section>
+
+</page>
diff --git a/platform-overview/C/tech-pango.page b/platform-overview/C/tech-pango.page
new file mode 100644
index 0000000..92de978
--- /dev/null
+++ b/platform-overview/C/tech-pango.page
@@ -0,0 +1,106 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" id="tech-pango">
+<info>
+ <link type="guide" xref="tech" group="pango"/>
+ <desc>Fully internationalized text layout and rendering</desc>
+ <revision pkgversion="3.0" date="2011-04-05" status="candidate"/>
+</info>
+
+<title>Pango</title>
+
+<list>
+ <item>
+ <p><em style="strong">Strong selling point #1</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #2</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #3</em></p>
+ </item>
+</list>
+
+<p>Marketing blurb, info on what this library offers developers.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>Example image</p>
+</media>
+
+
+<section id="what">
+ <title>What can you do?</title>
+
+ <p>Things that <em style="strong">you can do</em> with <em style="strong"><link xref="blah">some feature</link></em> of the library.</p>
+
+ <p>Pango is the core text and font handling library in the GNOME
+platform. It is responsible for laying out and rendering text, and
+is used throughout GTK+.</p>
+<note><p>The Pango layout engine can be used with different font
+backends and drawing backends. On most GNOME systems, Pango
+will use FreeType, fontconfig, and Cairo to access fonts and
+render text. On other systems, Pango will use the native font
+systems, such as Uniscribe on Microsoft Windows and ATSUI on
+MacOS</p></note>
+
+<p>Pango has extensive support for the various writing systems
+used throughout the world. Many of the writing systems used for
+languages have complex rules for laying out glyphs and composing
+characters. With Pango, nearly all languages can be written and
+displayed correctly, allowing users everywhere to view text in their
+native languages. Pango support for multiple writing systems is
+automatic; application developers do not have to write any special
+code to support other languages.</p>
+
+<p>Pango supports the text styling used in typical documents
+and interfaces, including italics, font weights, and underlines.
+Pango uses a simple XML-like vocabulary called PangoMarkup which
+enables you to set font size, color, styles, and other text
+attributes. Using PangoMarkup, you can specify inline styles
+without manually iterating over text blocks. PangoMarkup can
+be used directly from GTK+, enabling you to style text in your
+graphical interfaces easily.</p>
+
+<p>You should use Pango directly whenever you need to lay
+text out on the screen or on a different medium. Using Pango
+will allow your text layout to work seamlessly with GTK+ and
+the rest of the GNOME platform. It will help you create
+portable code, and most importantly, it will ensure that your
+application can render text correctly in hundreds of different
+languages.</p>
+
+</section>
+
+
+<section id="docs">
+ <title>API and reference documentation</title>
+ <p></p>
+ <list>
+ <item>
+ <p><em style="strong"><link href="http://library.gnome.org/devel/pango/stable/";>Pango Reference Manual</link></em></p>
+ <p>Brief description of the documentation. Maybe also some direct links to particularly interesting pages.</p>
+ </item>
+ </list>
+</section>
+
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>A sample we should write</p></item>
+ <item><p><link xref="samples">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <p>This library is used in lots of open source software. Take a look at some of it.</p>
+ <list>
+ <item>
+ <p><em style="strong">XXX</em> is .</p>
+ <p>(<link href="xxx">Website</link> | <link href="xxx">Screenshot</link> | <link href="xxx">Source code</link> )</p>
+ </item>
+ </list>
+</section>
+
+</page>
diff --git a/platform-overview/C/tech-soup.page b/platform-overview/C/tech-soup.page
new file mode 100644
index 0000000..7304049
--- /dev/null
+++ b/platform-overview/C/tech-soup.page
@@ -0,0 +1,70 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic" id="tech-soup">
+<info>
+ <link type="guide" xref="tech" group="soup"/>
+
+ <desc>Asynchronous HTTP library with cookies, SSL, and XML-RPC</desc>
+</info>
+
+<title>Soup</title>
+
+<list>
+ <item>
+ <p><em style="strong">Strong selling point #1</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #2</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #3</em></p>
+ </item>
+</list>
+
+<p>Marketing blurb, info on what this library offers developers.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>Example image</p>
+</media>
+
+
+<section id="what">
+ <title>What can you do?</title>
+
+ <p>Things that <em style="strong">you can do</em> with <em style="strong"><link xref="blah">some feature</link></em> of the library.</p>
+</section>
+
+
+<section id="docs">
+ <title>API and reference documentation</title>
+ <p></p>
+ <list>
+ <item>
+ <p><em style="strong"><link href="">Documentation Link</link></em></p>
+ <p>Brief description of the documentation. Maybe also some direct links to particularly interesting pages.</p>
+ </item>
+ </list>
+</section>
+
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>A sample we should write</p></item>
+ <item><p><link xref="samples">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <p>This library is used in lots of open source software. Take a look at some of it.</p>
+ <list>
+ <item>
+ <p><em style="strong">XXX</em> is .</p>
+ <p>(<link href="xxx">Website</link> | <link href="xxx">Screenshot</link> | <link href="xxx">Source code</link> )</p>
+ </item>
+ </list>
+</section>
+
+
+</page>
diff --git a/platform-overview/C/tech-telepathy.page b/platform-overview/C/tech-telepathy.page
new file mode 100644
index 0000000..fda331c
--- /dev/null
+++ b/platform-overview/C/tech-telepathy.page
@@ -0,0 +1,104 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="tech-telepathy">
+<info>
+ <link type="guide" xref="tech" group="apps"/>
+
+ <desc>Unified and integrated contacts and instant messaging</desc>
+ <revision pkgversion="3.0" date="2011-04-05" status="incomplete"/>
+</info>
+
+<title>Telepathy</title>
+
+<list>
+ <item>
+ <p><em style="strong">Strong selling point #1</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #2</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #3</em></p>
+ </item>
+</list>
+
+<p>Marketing blurb, info on what this library offers developers.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>Example image</p>
+</media>
+
+
+<section id="what">
+ <title>What can you do?</title>
+
+ <p>Things that <em style="strong">you can do</em> with <em style="strong"><link xref="blah">some feature</link></em> of the library.</p>
+
+<p>Telepathy provides a powerful framework for interacting with the
+user's instant messaging contacts. With Telepathy, all accounts and
+connections are handled by a D-Bus session service that's deeply
+integrated into the GNOME desktop. Applications can tie into this
+service to communicate with contacts.</p>
+
+<p>With the Telepathy Tubes API, you can even tunnel an arbitrary
+protocol over modern instant messaging protocols like Jabber to
+create interactive applications. Create multi-player games or
+collaborative editors that integrate with the desktop-wide
+instant messaging services.</p>
+
+<p>Mission control</p>
+
+<p>Telepathy-Glib</p>
+
+</section>
+
+
+<section id="docs">
+ <title>API and reference documentation</title>
+ <p></p>
+ <list style="compact">
+ <item>
+ <p><em style="strong"><link href="http://telepathy.freedesktop.org/doc/book/";>Telepathy Developer's Manual</link></em></p>
+ <p>Comprehensive manual, including <link href="">conceptual overviews</link>, example implementations of <link href="http://telepathy.freedesktop.org/doc/book/chapter.chat-example.html";>instant messaging</link>, <link href="http://telepathy.freedesktop.org/doc/book/chapter.voip-example.html";>voice over IP</link>, and <link href="http://telepathy.freedesktop.org/doc/book/chapter.tube-example.html";>Tubes</link> clients, and a number of <link href="http://telepathy.freedesktop.org/doc/book/source-code.html";>example programs</link> in C and Python. [BROKEN; LOTS OF TODO ITEMS]</p>
+ </item>
+ </list>
+</section>
+
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>A sample we should write</p></item>
+ <item><p><link xref="samples">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <p>This library is used in lots of open source software. Take a look at some of it.</p>
+ <list>
+ <item>
+ <p><em style="strong">XXX</em> is .</p>
+ <p>(<link href="xxx">Website</link> | <link href="xxx">Screenshot</link> | <link href="xxx">Source code</link> )</p>
+ </item>
+ </list>
+</section>
+
+<section id="reading">
+ <title>Further reading</title>
+ <list style="compact">
+ <item>
+ <p><link href="http://www.aosabook.org/en/telepathy.html";>Telepathy (technical overview)</link>, <em>The Architecture of Open Source Applications</em>, Brown & Wilson, June 2011.</p>
+ </item>
+ <item>
+ <p><link href="http://gnomejournal.org/article/86/telepathy-overview";>Telepathy Overview</link>, <em>GNOME Journal</em>, Nov 2009.</p>
+ </item>
+ <item>
+ <p><link href="http://gnomejournal.org/article/84/telepathy-empathy-and-mission-control-5-in-gnome-228";>Telepathy, Empathy and Mission Control 5 in GNOME 2.28</link>, <em>GNOME Journal</em>, Nov 2009.</p>
+ </item>
+
+ </list>
+</section>
+
+</page>
diff --git a/platform-overview/C/tech-tracker.page b/platform-overview/C/tech-tracker.page
new file mode 100644
index 0000000..2796480
--- /dev/null
+++ b/platform-overview/C/tech-tracker.page
@@ -0,0 +1,71 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="tech-tracker">
+<info>
+ <link type="guide" xref="tech" group="apps"/>
+
+ <desc>Semantic data storage with RDF and SPARQL</desc>
+</info>
+
+<title>Tracker</title>
+
+<list>
+ <item>
+ <p><em style="strong">Strong selling point #1</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #2</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #3</em></p>
+ </item>
+</list>
+
+<p>Marketing blurb, info on what this library offers developers.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>Example image</p>
+</media>
+
+
+<section id="what">
+ <title>What can you do?</title>
+
+ <p>Things that <em style="strong">you can do</em> with <em style="strong"><link xref="blah">some feature</link></em> of the library.</p>
+</section>
+
+
+<section id="docs">
+ <title>API and reference documentation</title>
+ <p></p>
+ <list>
+ <item>
+ <p><em style="strong"><link href="">Documentation Link</link></em></p>
+ <p>Brief description of the documentation. Maybe also some direct links to particularly interesting pages.</p>
+ </item>
+ </list>
+</section>
+
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>A sample we should write</p></item>
+ <item><p><link xref="samples">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <p>This library is used in lots of open source software. Take a look at some of it.</p>
+ <list>
+ <item>
+ <p><em style="strong">XXX</em> is .</p>
+ <p>(<link href="xxx">Website</link> | <link href="xxx">Screenshot</link> | <link href="xxx">Source code</link> )</p>
+ </item>
+ </list>
+</section>
+
+
+</page>
diff --git a/platform-overview/C/tech-webkit.page b/platform-overview/C/tech-webkit.page
new file mode 100644
index 0000000..3029f4d
--- /dev/null
+++ b/platform-overview/C/tech-webkit.page
@@ -0,0 +1,91 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="tech-webkit">
+<info>
+ <link type="guide" xref="tech" group="webkit"/>
+
+ <desc>The power of HTML5 and the web in your application</desc>
+ <revision pkgversion="3.0" date="2011-04-05" status="incomplete"/>
+</info>
+
+<title>WebKit</title>
+
+
+<list>
+ <item>
+ <p><em style="strong">Strong selling point #1</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #2</em></p>
+ </item>
+ <item>
+ <p><em style="strong">Strong selling point #3</em></p>
+ </item>
+</list>
+
+<p>Marketing blurb, info on what this library offers developers.</p>
+
+<media type="image" mime="image/png" src="test_comm1.png" width="65%">
+ <p>Example image</p>
+</media>
+
+
+<section id="what">
+ <title>What can you do?</title>
+
+ <p>Things that <em style="strong">you can do</em> with <em style="strong"><link xref="blah">some feature</link></em> of the library.</p>
+</section>
+
+
+<section id="docs">
+ <title>API and reference documentation</title>
+ <p></p>
+ <list>
+ <item>
+ <p><em style="strong"><link href="">Documentation Link</link></em></p>
+ <p>Brief description of the documentation. Maybe also some direct links to particularly interesting pages.</p>
+ </item>
+ </list>
+</section>
+
+
+<section id="samples">
+ <title>Code samples</title>
+ <list>
+ <item><p>A sample we should write</p></item>
+ <item><p><link xref="samples">More...</link></p></item>
+ </list>
+</section>
+
+<section id="realworld">
+ <title>Real-world examples</title>
+
+ <p>This library is used in lots of open source software. Take a look at some of it.</p>
+ <list>
+ <item>
+ <p><em style="strong">XXX</em> is .</p>
+ <p>(<link href="xxx">Website</link> | <link href="xxx">Screenshot</link> | <link href="xxx">Source code</link> )</p>
+ </item>
+ </list>
+</section>
+
+
+
+<p>WebKit is a powerful, multi-platform HTML engine used in open
+source and commercial products. WebKitGTK+ is the port of WebKit
+built on <link xref="gtk">GTK+</link> and integrated into the
+GNOME developer platform. WebKitGTK+ is developed upstream as
+part of the main WebKit project, so it's always up to date with
+the latest HTML5 features.</p>
+
+<p>WebKitGTK+ makes it easy to add web functionality to your
+application, or to use HTML5 and associated technologies to
+create dynamic user interfaces quickly.</p>
+
+<list style="compact">
+ <item><p><link href="http://developer.gnome.org/gnome-devel-demos/stable/message-board.c.html";>WebKitGTK+ demo tutorial</link></p></item>
+ <item><p><link href="http://webkitgtk.org/reference/index.html";>WebKitGTK+ Reference Manual</link></p></item>
+ <item><p><link href="http://webkitgtk.org/";>The WebKitGTK+ web site</link></p></item>
+</list>
+
+</page>
diff --git a/platform-overview/C/tech.page b/platform-overview/C/tech.page
new file mode 100644
index 0000000..b5c2868
--- /dev/null
+++ b/platform-overview/C/tech.page
@@ -0,0 +1,41 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="guide" style="task"
+ id="tech">
+ <info>
+ <revision version="0.1" date="2012-02-19" status="stub"/>
+ <link type="guide" xref="index#overview" group="#last" />
+
+ <credit type="author copyright">
+ <name>Phil Bull</name>
+ <email>philbull gmail com</email>
+ <years>2012</years>
+ </credit>
+
+ <desc>See a list of all of the development libraries in GNOME.</desc>
+ </info>
+
+<title>Platform libraries</title>
+
+<p>The GNOME platform is a rich collection of libraries.</p>
+
+<links type="topic" style="linklist"
+ groups="gtk clutter webkit gstreamer">
+ <title>Graphics and Multimedia</title>
+</links>
+
+<links type="topic" style="linklist"
+ groups="gio gio-network gsettings d-bus soup gupnp">
+ <title>Core Application Support</title>
+</links>
+
+
+<links type="topic" style="linklist" groups="apps">
+ <title>Application Technologies</title>
+</links>
+
+<links type="topic" style="linklist"
+ groups="atk pango pulseaudio cairo gdk gobject glib">
+ <title>Under the Hood</title>
+</links>
+
+</page>
diff --git a/platform-overview/C/test_comm1.png b/platform-overview/C/test_comm1.png
new file mode 100644
index 0000000..a8d9937
Binary files /dev/null and b/platform-overview/C/test_comm1.png differ
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
![http://staz.be/tup/2009-06/Capture-Conversations.png"](http://staz.be/tup/2009-06/Capture-Conversations.png"){kind=link}
![https://live.gnome.org/glChess?action=AttachFile&do=get&target=glchess3d.png"](https://live.gnome.org/glChess?action=AttachFile&do=get&target=glchess3d.png"){kind=link}
![http://skss.learnfree.eu/wp-content/uploads/2009/05/rhythmbox_daap_3.png"](http://skss.learnfree.eu/wp-content/uploads/2009/05/rhythmbox_daap_3.png"){kind=link}