[gnome-devel-docs] tutorials <javascript>: Improved markup on chapter three of the JavaScript tutorial

[Tiffany Antopolski <antopolski src gnome org>]

commit 8fce432a95a6934c0366cfbb97918765dd857a62
Author: Taryn Fox <jewelfox fursona net>
Date:   Tue Aug 14 10:19:12 2012 -0400

    tutorials <javascript>: Improved markup on chapter three of the JavaScript tutorial

 platform-demos/C/03_getting_the_signal.js.page |   80 ++++++++++++++----------
 1 files changed, 47 insertions(+), 33 deletions(-)
---
diff --git a/platform-demos/C/03_getting_the_signal.js.page b/platform-demos/C/03_getting_the_signal.js.page
index 0a431af..c45c5c9 100644
--- a/platform-demos/C/03_getting_the_signal.js.page
+++ b/platform-demos/C/03_getting_the_signal.js.page
@@ -29,8 +29,8 @@
 
   <section id="application">
     <title>A basic application</title>
-    <p>In GNOME, widgets that you can interact with, like Buttons and Switches, send out signals when they are clicked on or activated. A Button, for instance, sends out the <input>clicked</input> signal when somebody clicks on it. When this happens, GNOME looks for the part in your code that says what to do.</p>
-    <p>How do we write that code? By connecting that Button's <input>clicked</input> signal to a callback function, which is a function you write just to handle that signal. So whenever it gives off that signal, the function connected to that signal is run.</p>
+    <p>In GNOME, widgets that you can interact with, like Buttons and Switches, send out signals when they are clicked on or activated. A Button, for instance, sends out the "clicked" signal when somebody clicks on it. When this happens, GNOME looks for the part in your code that says what to do.</p>
+    <p>How do we write that code? By connecting that Button's "clicked" signal to a callback function, which is a function you write just to handle that signal. So whenever it gives off that signal, the function connected to that signal is run.</p>
     <p>Here is an extremely basic example:</p>
 
     <media type="image" mime="image/png" src="media/03_jssignal_01.png"/>
@@ -69,13 +69,13 @@ const GettingTheSignal = new Lang.Class({
         this._buildUI ();
     },
 ]]></code>
-    <p>Take a look at the part that uses our application's <input>connect</input> method and <input>Lang.bind</input>, to connect its <input>activate</input> and <input>startup</input> signals to the functions that present the window and build the UI. We're going to do the same thing with our Button when we get to it, except that we're going to connect its <input>clicked</input> signal instead.</p>
+    <p>Take a look at the part that uses our application's connect method and Lang.bind, to connect its activate and startup signals to the functions that present the window and build the UI. We're going to do the same thing with our Button when we get to it, except that we're going to connect its "clicked" signal instead.</p>
   </section>
 
   <section id="button">
     <title>Click the button</title>
 
-    <p>As usual, we'll put all the code to create our Button and other widgets inside the <input>_buildUI</input> function, which is called when the application starts up.</p>
+    <p>As usual, we'll put all the code to create our Button and other widgets inside the _buildUI function, which is called when the application starts up.</p>
     <code mime="text/javascript"><![CDATA[
     // Build the application's UI
     _buildUI: function() {
@@ -91,15 +91,15 @@ const GettingTheSignal = new Lang.Class({
             default_width: 400,
             title: "Click the button to get a cookie!"});
 ]]></code>
-    <p>Note that we've set its <input>default_height</input> and <input>default_width</input> properties. These let us control how tall and wide the ApplicationWindow will be, in pixels.</p>
-    <p>Next, we'll create the Label that shows us the number of cookies. We can use the <input>cookies</input> variable as part of the Label's <input>label</input> property.</p>
+    <p>Note that we've set its default_height and default_width properties. These let us control how tall and wide the ApplicationWindow will be, in pixels.</p>
+    <p>Next, we'll create the Label that shows us the number of cookies. We can use the cookies variable as part of the Label's label property.</p>
     <code mime="text/javascript"><![CDATA[
         // Create the label
         this._cookieLabel = new Gtk.Label ({
             label: "Number of cookies: " + cookies });
 ]]></code>
 
-    <p>Now we'll create the Button. We set its <input>label</input> property to show the text that we want on the Button, and we connect its <input>clicked</input> signal to a function called <input>_getACookie</input>, which we'll write after we're done building our application's UI.</p>
+    <p>Now we'll create the Button. We set its label property to show the text that we want on the Button, and we connect its "clicked" signal to a function called _getACookie, which we'll write after we're done building our application's UI.</p>
     <code mime="text/javascript"><![CDATA[
         // Create the cookie button
         this._cookieButton = new Gtk.Button ({ label: "Get a cookie" });
@@ -107,7 +107,7 @@ const GettingTheSignal = new Lang.Class({
         // Connect the cookie button to the function that handles clicking it
         this._cookieButton.connect ('clicked', Lang.bind (this, this._getACookie));
 ]]></code>
-    <p>Finally, we create a Grid, attach the Label and Button to it, add it to the window and tell the window to show itself and its contents. That's all we need inside the <input>_buildUI</input> function, so we close it with a bracket, as well as a comma that tells GNOME to go on to the next function. Note that even though we wrote the code for the Label first, we can still attach it to the Grid in a way that will put it on the bottom.</p>
+    <p>Finally, we create a Grid, attach the Label and Button to it, add it to the window and tell the window to show itself and its contents. That's all we need inside the _buildUI function, so we close it with a bracket, as well as a comma that tells GNOME to go on to the next function. Note that even though we wrote the code for the Label first, we can still attach it to the Grid in a way that will put it on the bottom.</p>
     <code mime="text/javascript"><![CDATA[
         // Create a grid to arrange everything inside
         this._grid = new Gtk.Grid ({
@@ -127,8 +127,8 @@ const GettingTheSignal = new Lang.Class({
 
     },
 ]]></code>
-    <p>Now, we write the <input>_getACookie</input> function. Whenever our Button sends out its <input>clicked</input> signal, the code in this function will run. In this case, all it does is increase the number of cookies by 1, and update the Label to show the new number of cookies. We do this using the Label's <input>set_label</input> method.</p>
-    <note style="tip"><p>Many widgets have the same properties and methods. Both Labels and Buttons, for instance, have a <input>label</input> property that says what text is inside them, and <input>get_label</input> and <input>set_label</input> methods that let you check what that text is and change it, respectively. So if you learn how one widget works, you'll also know how others like it work.</p></note>
+    <p>Now, we write the _getACookie function. Whenever our Button sends out its "clicked" signal, the code in this function will run. In this case, all it does is increase the number of cookies by 1, and update the Label to show the new number of cookies. We do this using the Label's set_label method.</p>
+    <note style="tip"><p>Many widgets have the same properties and methods. Both Labels and Buttons, for instance, have a label property that says what text is inside them, and get_label and set_label methods that let you check what that text is and change it, respectively. So if you learn how one widget works, you'll also know how others like it work.</p></note>
     <code mime="text/javascript"><![CDATA[
     _getACookie: function() {
 
@@ -151,7 +151,7 @@ app.application.run (ARGV);
 
   <section id="switch">
     <title>Flip the switch</title>
-    <p>Buttons aren't the only input widgets in our Gtk+ toolbox. We can also use switches, like the one in this example. Switches don't have a <input>label</input> property, so we have to create a separate Label that says what it does to go next to it.</p>
+    <p>Buttons aren't the only input widgets in our Gtk+ toolbox. We can also use switches, like the one in this example. Switches don't have a label property, so we have to create a separate Label that says what it does to go next to it.</p>
 
     <media type="image" mime="image/png" src="media/03_jssignal_02.png"/>
 
@@ -167,13 +167,13 @@ app.application.run (ARGV);
         this._cookieSwitch = new Gtk.Switch ();
 ]]></code>
 
-    <p>We don't actually need to connect the Switch to anything. All we need to do is write an <input>if</input> statement in our <input>_getACookie</input> function, to check to see if the Switch is turned on. If we wanted to make something happen as soon as you flip the Switch, though, we would connect its <input>notify::active</input> signal, like so:</p>
+    <p>We don't actually need to connect the Switch to anything. All we need to do is write an if statement in our _getACookie function, to check to see if the Switch is turned on. If we wanted to make something happen as soon as you flip the Switch, though, we would connect its notify::active signal, like so:</p>
     <code mime="text/javascript"><![CDATA[
         // Connect the switch to the function that handles it
         this._cookieSwitch.connect ('notify::active', Lang.bind (this, this._cookieDispenser));
 ]]></code>
 
-    <p>A Switch is set to the off position by default. If we wanted the Switch to start out turned on, we would set the value of its <input>active</input> property to <input>true</input> when we create it.</p>
+    <p>A Switch is set to the off position by default. If we wanted the Switch to start out turned on, we would set the value of its active property to true when we create it.</p>
     <code mime="text/javascript"><![CDATA[
         this._cookieSwitch = new Gtk.Switch ({ active: true });
 ]]></code>
@@ -205,8 +205,8 @@ app.application.run (ARGV);
         this._grid.attach (this._cookieLabel, 0, 2, 1, 1);
 ]]></code>
 
-    <p>Now we change the <input>_getACookie</input> function so that it checks to see if the cookie dispenser is turned on. We do that by using the Switch's <input>get_active</input> method. It returns <input>true</input> if the Switch is turned on, and <input>false</input> if the Switch is turned off.</p>
-    <note style="tip"><p>When a method is used in an <input>if</input> statement like this, the code inside the <input>if</input> statement is executed if the method returns <input>true</input>.</p></note>
+    <p>Now we change the _getACookie function so that it checks to see if the cookie dispenser is turned on. We do that by using the Switch's get_active method. It returns true if the Switch is turned on, and false if the Switch is turned off.</p>
+    <note style="tip"><p>When a method is used in an if statement like this, the code inside the if statement is executed if the method returns true.</p></note>
     <code mime="text/javascript"><![CDATA[
     _getACookie: function() {
 
@@ -231,7 +231,7 @@ app.application.run (ARGV);
 
     <media type="image" mime="image/png" src="media/03_jssignal_03.png"/>
 
-    <p>First off, let's change our ApplicationWindow's name and increase its <input>border_width</input> property, so that our widgets aren't packed in too tightly. The <input>border_width</input> is the number of pixels between any widget and the edge of the window.</p>
+    <p>First off, let's change our ApplicationWindow's name and increase its border_width property, so that our widgets aren't packed in too tightly. The border_width is the number of pixels between any widget and the edge of the window.</p>
     <code mime="text/javascript"><![CDATA[
         // Create the application window
         this._window = new Gtk.ApplicationWindow({
@@ -243,7 +243,7 @@ app.application.run (ARGV);
             title: "Choose the one that says 'cookie'!"});
 ]]></code>
 
-    <p>After that, we create the RadioButtons. Remember how they're created in groups? The way we do that, is we set each new RadioButton's <input>group</input> property to the name of another RadioButton.</p>
+    <p>After that, we create the RadioButtons. Remember how they're created in groups? The way we do that, is we set each new RadioButton's group property to the name of another RadioButton.</p>
     <code mime="text/javascript"><![CDATA[
         // Create the radio buttons
         this._cookieButton = new Gtk.RadioButton ({ label: "Cookie" });
@@ -262,8 +262,8 @@ app.application.run (ARGV);
         this._radioGrid.attach (this._notCookieTwo, 0, 2, 1, 1);
 ]]></code>
 
-    <p>Normally, the RadioButton that's selected by default is the one that's the name of the group. We want the first "Not cookie" button to be selected by default, though, so we use its <input>set_active</input> method.</p>
-    <note style="tip"><p>We could also set its <input>active</input> property to <input>true</input> when we create it.</p></note>
+    <p>Normally, the RadioButton that's selected by default is the one that's the name of the group. We want the first "Not cookie" button to be selected by default, though, so we use its set_active method.</p>
+    <note style="tip"><p>We could also set its active property to true when we create it.</p></note>
     <code mime="text/javascript"><![CDATA[
         // Set the button that will be at the top to be active by default
         this._notCookieOne.set_active (true);
@@ -277,7 +277,7 @@ app.application.run (ARGV);
         this._grid.attach (this._cookieLabel, 0, 2, 1, 1);
 ]]></code>
 
-    <p>And then we change our <input>_getACookie</input> function to test to see if the cookie button is the one that's selected.</p>
+    <p>And then we change our _getACookie function to test to see if the cookie button is the one that's selected.</p>
     <code mime="text/javascript"><![CDATA[
     _getACookie: function() {
 
@@ -316,8 +316,8 @@ app.application.run (ARGV);
         this._grid.attach (this._cookieLabel, 0, 2, 1, 1);
 ]]></code>
 
-    <p>And now we modify <input>_getACookie</input>'s <input>if</input> statement again, using the Entry's <input>get_text</input> method to retrieve the text that you entered into it and see if you spelled "cookie" right. We don't care whether you capitalize "cookie" or not, so we use JavaScript's built-in <input>toLowerCase</input> method to change the Entry's text to all lower case inside the <input>if</input> statement.</p>
-    <note style="tip"><p>An Entry widget doesn't have a <input>label</input> property, which is a set text string that the user can't change. (You can't normally change the <input>label</input> on a Button, for instance.) Instead, it has a <input>text</input> property, which changes to match what the user types in.</p></note>
+    <p>And now we modify _getACookie's if statement again, using the Entry's get_text method to retrieve the text that you entered into it and see if you spelled "cookie" right. We don't care whether you capitalize "cookie" or not, so we use JavaScript's built-in toLowerCase method to change the Entry's text to all lower case inside the if statement.</p>
+    <note style="tip"><p>An Entry widget doesn't have a label property, which is a set text string that the user can't change. (You can't normally change the label on a Button, for instance.) Instead, it has a text property, which changes to match what the user types in.</p></note>
     <code mime="text/javascript"><![CDATA[
     _getACookie: function() {
 
@@ -345,17 +345,31 @@ app.application.run (ARGV);
   <section id="complete">
     <title>Complete code samples</title>
 
-<media type="image" mime="image/png" src="media/03_jssignal_01.png"/>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/03_getting_the_signal_01.js" parse="text"><xi:fallback/></xi:include></code>
-
-<media type="image" mime="image/png" src="media/03_jssignal_02.png"/>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/03_getting_the_signal_02.js" parse="text"><xi:fallback/></xi:include></code>
-
-<media type="image" mime="image/png" src="media/03_jssignal_03.png"/>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/03_getting_the_signal_03.js" parse="text"><xi:fallback/></xi:include></code>
-
-<media type="image" mime="image/png" src="media/03_jssignal_04.png"/>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/03_getting_the_signal_04.js" parse="text"><xi:fallback/></xi:include></code>
+    <links type="section" />
+
+    <section id="buttonsample">
+      <title>Code sample with Button</title>
+      <media type="image" mime="image/png" src="media/03_jssignal_01.png"/>
+      <code mime="text/javascript" style="numbered"><xi:include href="samples/03_getting_the_signal_01.js" parse="text"><xi:fallback/></xi:include></code>
+    </section>
+
+    <section id="switchsample">
+      <title>Code sample with Switch</title>
+      <media type="image" mime="image/png" src="media/03_jssignal_02.png"/>
+      <code mime="text/javascript" style="numbered"><xi:include href="samples/03_getting_the_signal_02.js" parse="text"><xi:fallback/></xi:include></code>
+    </section>
+
+    <section id="radiobuttonsample">
+      <title>Code sample with RadioButton</title>
+      <media type="image" mime="image/png" src="media/03_jssignal_03.png"/>
+      <code mime="text/javascript" style="numbered"><xi:include href="samples/03_getting_the_signal_03.js" parse="text"><xi:fallback/></xi:include></code>
+    </section>
+
+    <section id="entrysample">
+      <title>Code sample with Entry</title>
+      <media type="image" mime="image/png" src="media/03_jssignal_04.png"/>
+      <code mime="text/javascript" style="numbered"><xi:include href="samples/03_getting_the_signal_04.js" parse="text"><xi:fallback/></xi:include></code>
+    </section>
 
   </section>