[gnome-devel-docs] Validity fixes
- From: Shaun McCance <shaunm src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-devel-docs] Validity fixes
- Date: Wed, 6 Apr 2011 06:24:02 +0000 (UTC)
commit d0dd51d4281c81de5127c629be5d04e476688247
Author: Shaun McCance <shaunm gnome org>
Date: Wed Apr 6 02:23:02 2011 -0400
Validity fixes
platform-demos/C/getting-ready.page | 16 ++++++++--------
platform-demos/C/guitar-tuner.c.page | 22 +++++++++++-----------
platform-demos/C/guitar-tuner.cpp.page | 20 ++++++++++----------
platform-demos/C/guitar-tuner.py.page | 22 +++++++++++-----------
platform-demos/C/guitar-tuner.vala.page | 22 +++++++++++-----------
platform-demos/C/image-viewer.c.page | 14 +++++++-------
platform-demos/C/image-viewer.cpp.page | 14 +++++++-------
platform-demos/C/image-viewer.js.page | 28 ++++++++++++++--------------
platform-demos/C/image-viewer.py.page | 20 ++++++++++----------
platform-demos/C/image-viewer.vala.page | 14 +++++++-------
platform-demos/C/index.page | 4 ++--
platform-demos/C/magic-mirror.vala.page | 12 ++++++------
platform-demos/C/photo-wall.c.page | 24 ++++++++++++------------
platform-demos/C/record-collection.js.page | 20 ++++++++++----------
platform-overview/C/index.page | 3 ++-
15 files changed, 128 insertions(+), 127 deletions(-)
---
diff --git a/platform-demos/C/getting-ready.page b/platform-demos/C/getting-ready.page
index f4594e2..892c475 100644
--- a/platform-demos/C/getting-ready.page
+++ b/platform-demos/C/getting-ready.page
@@ -16,19 +16,19 @@
<title>Getting ready for GNOME development</title>
-<section>
+<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>
+<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>.
+on <link href="media/gnome-devtools.catalog">Install now</link>.</p>
</section>
-<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>.
@@ -37,17 +37,17 @@ Click on the image to go directly to the installation page for your distribution
<list>
<item><p>
<link href="http://live.gnome.org/DeveloperTools/Installation/Ubuntu";>
- <media type="image" mime="image/png" src="media/ubuntu.png"><p>Ubuntu</p></media>
+ <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"><p>Fedora</p></media>
+ <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"><p>OpenSuSE</p></media>
+ <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>
@@ -56,7 +56,7 @@ Click on the image to go directly to the installation page for your distribution
</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>
diff --git a/platform-demos/C/guitar-tuner.c.page b/platform-demos/C/guitar-tuner.c.page
index f0444bb..a59c119 100644
--- a/platform-demos/C/guitar-tuner.c.page
+++ b/platform-demos/C/guitar-tuner.c.page
@@ -36,7 +36,7 @@
<media type="image" mime="image/png" src="media/guitar-tuner.png"/>
-<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>
@@ -59,7 +59,7 @@
</steps>
</section>
-<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>
@@ -83,7 +83,7 @@
<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>
+<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>
@@ -114,7 +114,7 @@ six strings) and the orientation to vertical.</p>
</steps>
</section>
-<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
@@ -129,7 +129,7 @@ void on_button_clicked (GtkWidget* button, gpointer user_data)
<p>For now, we'll leave the signal handler empty while we work on writing the code to produce sounds.</p>
</section>
-<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>
@@ -139,7 +139,7 @@ void on_button_clicked (GtkWidget* button, gpointer user_data)
</media>
</section>
-<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>
@@ -189,7 +189,7 @@ play_sound (gdouble frequency)
</section>
-<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>
@@ -207,7 +207,7 @@ pipeline_stop (GstElement* pipeline)
<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>
+<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[
@@ -245,18 +245,18 @@ void on_button_clicked (GtkButton* button,
<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>
+<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>
+<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>
+<section id="next">
<title>Next steps</title>
<p>Here are some ideas for how you can extend this simple demonstration:</p>
<list>
diff --git a/platform-demos/C/guitar-tuner.cpp.page b/platform-demos/C/guitar-tuner.cpp.page
index dbba18f..71912c7 100644
--- a/platform-demos/C/guitar-tuner.cpp.page
+++ b/platform-demos/C/guitar-tuner.cpp.page
@@ -36,7 +36,7 @@
<media type="image" mime="image/png" src="media/guitar-tuner.png"/>
-<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>
@@ -59,7 +59,7 @@
</steps>
</section>
-<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>
@@ -79,7 +79,7 @@
<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>
+<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>
@@ -108,7 +108,7 @@ six strings) and the orientation to vertical.</p>
</steps>
</section>
-<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>
@@ -119,7 +119,7 @@ six strings) and the orientation to vertical.</p>
</media>
</section>
-<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>
@@ -193,7 +193,7 @@ bool Sound::stop_playing()
</steps>
</section>
-<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
@@ -245,18 +245,18 @@ button->signal_clicked().connect (sigc::bind<double, Sound*>(sigc::ptr_fun(&on_b
a different frequency to the handler.</p>
</section>
-<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>
+<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>
+<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
@@ -264,7 +264,7 @@ button->signal_clicked().connect (sigc::bind<double, Sound*>(sigc::ptr_fun(&on_b
in the <link href="http://library.gnome.org/devel/gstreamermm/";>GStreamermm reference documentation</link>.</p>
</section>
-<section>
+<section id="next">
<title>Next steps</title>
<p>Here are some ideas for how you can extend this simple demonstration:</p>
<list>
diff --git a/platform-demos/C/guitar-tuner.py.page b/platform-demos/C/guitar-tuner.py.page
index afec19a..24a95b5 100644
--- a/platform-demos/C/guitar-tuner.py.page
+++ b/platform-demos/C/guitar-tuner.py.page
@@ -36,7 +36,7 @@
<media type="image" mime="image/png" src="media/guitar-tuner.png"/>
-<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>
@@ -55,7 +55,7 @@ import os, sys]]></code>
</steps>
</section>
-<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>
@@ -79,7 +79,7 @@ libraries needed.</p>
<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>
+<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>
@@ -110,7 +110,7 @@ six strings) and the orientation to vertical.</p>
</steps>
</section>
-<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
@@ -123,7 +123,7 @@ def on_button_clicked (self, button):
<p>For now, we'll leave the signal handler empty while we work on writing the code to produce sounds.</p>
</section>
-<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>
@@ -133,7 +133,7 @@ def on_button_clicked (self, button):
</media>
</section>
-<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>
@@ -173,7 +173,7 @@ def play_sound(self, frequency):
</section>
-<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>
@@ -190,7 +190,7 @@ LENGTH = 500
<p>The call to <code>pipeline.set_state</code> pauses the playback of the pipeline.</p>
</section>
-<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>
@@ -217,17 +217,17 @@ def on_button_clicked(self, button):
<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>
+<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>
+<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>
+<section id="next">
<title>Next steps</title>
<p>Here are some ideas for how you can extend this simple demonstration:</p>
<list>
diff --git a/platform-demos/C/guitar-tuner.vala.page b/platform-demos/C/guitar-tuner.vala.page
index 0498e1b..522be5f 100644
--- a/platform-demos/C/guitar-tuner.vala.page
+++ b/platform-demos/C/guitar-tuner.vala.page
@@ -36,7 +36,7 @@
<media type="image" mime="image/png" src="media/guitar-tuner.png"/>
-<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>
@@ -59,7 +59,7 @@ using Gtk;]]></code>
</steps>
</section>
-<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>
@@ -80,7 +80,7 @@ using Gtk;]]></code>
<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>
+<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>
@@ -111,7 +111,7 @@ six strings) and the orientation to vertical.</p>
</steps>
</section>
-<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, open <file>guitar_tuner.vala</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
@@ -126,7 +126,7 @@ that needs special treating while linking in order to be found at runtime.</p>
<p>For now, we'll leave the signal handler empty while we work on writing the code to produce sounds.</p>
</section>
-<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>
@@ -136,7 +136,7 @@ that needs special treating while linking in order to be found at runtime.</p>
</media>
</section>
-<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>
@@ -199,7 +199,7 @@ private void play_sound(double frequency)
</section>
-<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 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-valasrc"><![CDATA[
@@ -233,24 +233,24 @@ public void on_button_clicked (Gtk.Button sender) {
<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>
+<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>
+<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>
+<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>
+<section id="next">
<title>Next steps</title>
<p>Here are some ideas for how you can extend this simple demonstration:</p>
<list>
diff --git a/platform-demos/C/image-viewer.c.page b/platform-demos/C/image-viewer.c.page
index c0d92cb..51fb7ef 100644
--- a/platform-demos/C/image-viewer.c.page
+++ b/platform-demos/C/image-viewer.c.page
@@ -30,7 +30,7 @@
<media type="image" mime="image/png" src="media/image-viewer.png"/>
-<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>
@@ -54,7 +54,7 @@
</steps>
</section>
-<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>
@@ -78,7 +78,7 @@
<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>
+<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
@@ -143,7 +143,7 @@ create_window (void)
</steps>
</section>
-<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>
@@ -210,18 +210,18 @@ on_open_image (GtkButton* button, gpointer user_data)
</list>
</section>
-<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>
+<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>
+<section id="next">
<title>Next steps</title>
<p>Here are some ideas for how you can extend this simple demonstration:</p>
<list>
diff --git a/platform-demos/C/image-viewer.cpp.page b/platform-demos/C/image-viewer.cpp.page
index e6543c6..09fd55e 100644
--- a/platform-demos/C/image-viewer.cpp.page
+++ b/platform-demos/C/image-viewer.cpp.page
@@ -30,7 +30,7 @@
<media type="image" mime="image/png" src="media/image-viewer.png"/>
-<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>
@@ -56,7 +56,7 @@
</steps>
</section>
-<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>
@@ -77,7 +77,7 @@
<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>
+<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
@@ -137,7 +137,7 @@ main (int argc, char *argv[])
</steps>
</section>
-<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>
@@ -202,18 +202,18 @@ on_open_image (Gtk::Image* image)
</list>
</section>
-<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>
+<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>
+<section id="next">
<title>Next steps</title>
<p>Here are some ideas for how you can extend this simple demonstration:</p>
<list>
diff --git a/platform-demos/C/image-viewer.js.page b/platform-demos/C/image-viewer.js.page
index 2460a04..2466c5f 100644
--- a/platform-demos/C/image-viewer.js.page
+++ b/platform-demos/C/image-viewer.js.page
@@ -40,7 +40,7 @@
<media type="image" mime="image/png" src="media/image-viewer.png"/>
-<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>
@@ -57,14 +57,14 @@
</section>
-<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>
+<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[
@@ -121,7 +121,7 @@ o.dumpProperties ();]]></code>
<guiseq><gui>Run</gui><gui>Execute</gui></guiseq> from the menu or using the toolbar.</p>
</section>
-<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[
@@ -151,7 +151,7 @@ Gtk.main ();]]></code>
</section>
-<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[
@@ -176,7 +176,7 @@ Gtk.main ();]]></code>
<p>This code is modular and can be split into multiple files easily. This makes it cleaner and easier to read.</p>
</section>
-<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[
@@ -199,7 +199,7 @@ b.connect ("clicked", function () { print ("you clicked me!"); });]]></code>
</section>
-<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>
@@ -207,7 +207,7 @@ b.connect ("clicked", function () { print ("you clicked me!"); });]]></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>
+<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>
@@ -222,7 +222,7 @@ this.window.add (main_box);]]></code>
<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>
+<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[
@@ -242,7 +242,7 @@ main_box.pack_start (open_button, false, false, 0);]]></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>
+<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>
@@ -252,7 +252,7 @@ open_button.connect ("clicked", Lang.bind (this, this._openClicked));]]></code>
<code mime="text/javascript">const Lang = imports.lang;</code>
</section>
-<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[
@@ -301,17 +301,17 @@ open_button.connect ("clicked", Lang.bind (this, this._openClicked));]]></code>
</section>
-<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>
+<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>
+<section id="next">
<title>Next steps</title>
<p>Here are some ideas for how you can extend this simple demonstration:</p>
<list>
diff --git a/platform-demos/C/image-viewer.py.page b/platform-demos/C/image-viewer.py.page
index 5c7464a..a70eda5 100644
--- a/platform-demos/C/image-viewer.py.page
+++ b/platform-demos/C/image-viewer.py.page
@@ -39,7 +39,7 @@
<media type="image" mime="image/png" src="media/image-viewer.png"/>
-<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>
@@ -60,7 +60,7 @@
</steps>
</section>
-<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[
@@ -109,7 +109,7 @@ if __name__ == "__main__":
It should show you an empty window.</p>
</section>
-<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[
@@ -121,7 +121,7 @@ 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>
+<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>
@@ -140,7 +140,7 @@ window.add (box)
<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>
+<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[
@@ -159,7 +159,7 @@ box.pack_start (button, False, False, 0)
<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>
+<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>
@@ -170,7 +170,7 @@ button.connect_after('clicked', self.on_open_clicked)
below.</p>
</section>
-<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[
@@ -215,17 +215,17 @@ def on_open_clicked (self, button):
</section>
-<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>
+<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>
+<section id="next">
<title>Next steps</title>
<p>Here are some ideas for how you can extend this simple demonstration:</p>
<list>
diff --git a/platform-demos/C/image-viewer.vala.page b/platform-demos/C/image-viewer.vala.page
index 6c44a4d..43af21b 100644
--- a/platform-demos/C/image-viewer.vala.page
+++ b/platform-demos/C/image-viewer.vala.page
@@ -34,7 +34,7 @@
<media type="image" mime="image/png" src="media/image-viewer.png"/>
-<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.
@@ -62,7 +62,7 @@ using Gtk;]]></code>
</steps>
</section>
-<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>
@@ -88,7 +88,7 @@ using Gtk;]]></code>
You only need to do this once, for the first build.</p>
</section>
-<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>Gtk.Container</code>s that can contain other widgets and even other containers.
@@ -149,7 +149,7 @@ public Main () {
</steps>
</section>
-<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.
@@ -210,7 +210,7 @@ public void on_open_image (Button self) {
</list>
</section>
-<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>
@@ -218,12 +218,12 @@ public void on_open_image (Button self) {
Finally, hit <gui>Run</gui> and enjoy!</p>
</section>
-<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>
+<section id="next">
<title>Next steps</title>
<p>Here are some ideas for how you can extend this simple demonstration:</p>
<list>
diff --git a/platform-demos/C/index.page b/platform-demos/C/index.page
index 5abb931..bb917d6 100644
--- a/platform-demos/C/index.page
+++ b/platform-demos/C/index.page
@@ -11,12 +11,12 @@
<credit type="author">
<name>Shaun McCance</name>
<email>shaunm gnome org</email>
- <years>2010</years>i
+ <years>2010</years>
</credit>
<credit type="author">
<name>Johannes Schmid</name>
<email>jhs gnome org</email>
- <years>2011</years>i
+ <years>2011</years>
</credit>
</info>
diff --git a/platform-demos/C/magic-mirror.vala.page b/platform-demos/C/magic-mirror.vala.page
index e60d2d1..5fd8638 100644
--- a/platform-demos/C/magic-mirror.vala.page
+++ b/platform-demos/C/magic-mirror.vala.page
@@ -38,7 +38,7 @@
<media type="image" mime="image/png" src="media/magic-mirror.png"/>
-<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>
@@ -66,7 +66,7 @@ using Gtk;]]></code>
</steps>
</section>
-<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>
@@ -86,7 +86,7 @@ using Gtk;]]></code>
<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>
+<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>
@@ -138,20 +138,20 @@ public class Main : Object
</steps>
</section>
-<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>
+<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>
+<section id="conclusion">
<title>Conclusion</title>
<p>
That's it, you have managed to create a full-featured webcam photo
diff --git a/platform-demos/C/photo-wall.c.page b/platform-demos/C/photo-wall.c.page
index d1ca94d..61c0b07 100644
--- a/platform-demos/C/photo-wall.c.page
+++ b/platform-demos/C/photo-wall.c.page
@@ -30,7 +30,7 @@
</list>
</synopsis>
-<section>
+<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.
@@ -40,7 +40,7 @@
</p>
</section>
-<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>
@@ -68,7 +68,7 @@
</steps>
</section>
-<section>
+<section id="look">
<title>A look at Photo Wall</title>
<p>
Our image viewer presents the user with a wall of images.
@@ -79,7 +79,7 @@
<media type="image" mime="image/png" src="media/photo-wall-focused.png"/>
</section>
-<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>:
@@ -117,7 +117,7 @@ static Position origin = {0, 0};
</code>
</section>
-<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
@@ -172,10 +172,10 @@ main(int argc, char *argv[])
</list>
</section>
-<section>
+<section id="actors">
<title>Setting up our image actors</title>
-<p>
<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[
@@ -207,7 +207,7 @@ for(row=0; row < ROW_COUNT; ++row)
</list>
</section>
-<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[
@@ -241,7 +241,7 @@ load_image_path_names()
</list>
</section>
-<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.
@@ -271,7 +271,7 @@ initialize_actor(ClutterActor *actor, guint row, guint col)
<p>At this point we've got a wall of images that are ready to be viewed.</p>
</section>
-<section>
+<section id="click">
<title>Reacting to the clicks</title>
<p>
@@ -365,7 +365,7 @@ foreach_set_focus_state(gpointer data, gpointer user_data)
</list>
</section>
-<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>
@@ -373,7 +373,7 @@ foreach_set_focus_state(gpointer data, gpointer user_data)
<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>
+<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>
diff --git a/platform-demos/C/record-collection.js.page b/platform-demos/C/record-collection.js.page
index 5e4a9bc..913ada5 100644
--- a/platform-demos/C/record-collection.js.page
+++ b/platform-demos/C/record-collection.js.page
@@ -28,7 +28,7 @@
</list>
</synopsis>
-<section>
+<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.
@@ -41,7 +41,7 @@
</p>
</section>
-<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>
@@ -57,14 +57,14 @@
</steps>
</section>
-<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>
+<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[
@@ -98,7 +98,7 @@ Gtk.main ();]]></code>
</list>
</section>
-<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[
@@ -158,7 +158,7 @@ Gtk.main ();]]></code>
</list>
</section>
-<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:
@@ -201,7 +201,7 @@ Gtk.main ();]]></code>
<p>At this point we have the database set up, and are ready to use it.</p>
</section>
-<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:
@@ -240,7 +240,7 @@ Gtk.main ();]]></code>
</list>
</section>
-<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.
@@ -280,12 +280,12 @@ Gtk.main ();]]></code>
<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>
+<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>
+<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>
diff --git a/platform-overview/C/index.page b/platform-overview/C/index.page
index df6d6d6..da5acfe 100644
--- a/platform-overview/C/index.page
+++ b/platform-overview/C/index.page
@@ -1,5 +1,5 @@
<page xmlns="http://projectmallard.org/1.0/";
- type="guide" stlye="task"
+ type="guide" style="task"
id="index">
<info>
@@ -25,6 +25,7 @@
</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
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
