[gnome-devel-docs] tutorials <javascript>: Added Gtk.CheckButton code sample and documentation page

[Tiffany Antopolski <antopolski src gnome org>]

commit 02df7ef14bbaefe11e3075d48cf8607348cf852e
Author: Taryn Fox <jewelfox fursona net>
Date:   Wed Jun 13 07:47:26 2012 -0400

    tutorials <javascript>: Added Gtk.CheckButton code sample and documentation page

 platform-demos/C/checkbutton.js.page    |  141 +++++++++++++++++++++++++++++++
 platform-demos/C/samples/checkbutton.js |   76 +++++++++++++++++
 2 files changed, 217 insertions(+), 0 deletions(-)
---
diff --git a/platform-demos/C/checkbutton.js.page b/platform-demos/C/checkbutton.js.page
new file mode 100644
index 0000000..d4239d6
--- /dev/null
+++ b/platform-demos/C/checkbutton.js.page
@@ -0,0 +1,141 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+      xmlns:xi="http://www.w3.org/2001/XInclude";
+      type="guide" style="task"
+      id="checkbutton.js">
+  <info>
+    <link type="guide" xref="beginner.js#buttons"/>
+    <revision version="0.1" date="2012-06-12" status="draft"/>
+
+    <credit type="author copyright">
+      <name>Taryn Fox</name>
+      <email>jewelfox fursona net</email>
+      <years>2012</years>
+    </credit>
+
+    <desc>A box which can be checked or unchecked</desc>
+  </info>
+
+  <title>CheckButton</title>
+  <media type="image" mime="image/png" src="media/checkbutton.png"/>
+  <p>This application has a CheckButton. Whether the box is checked dictates whether the window's title bar shows anything.</p>
+  <p>A CheckButton sends the "toggled" signal when it's checked or unchecked. While it's checked, the "active" property is true. While it's not, "active" tests as false.</p>
+    <links type="section" />
+
+  <section id="imports">
+    <title>Libraries to import</title>
+    <code mime="text/javascript"><![CDATA[
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+]]></code>
+    <p>These are the libraries we need to import for this application to run. Remember that the line which tells GNOME that we're using Gjs always needs to go at the start.</p>
+    </section>
+
+  <section id="applicationwindow">
+    <title>Creating the application window</title>
+    <code mime="text/javascript"><![CDATA[
+const CheckButtonExample = new Lang.Class({
+    Name: 'CheckButton Example',
+
+    // Create the application itself
+    _init: function() {
+        this.application = new Gtk.Application({
+            application_id: 'org.example.jscheckbutton',
+            flags: Gio.ApplicationFlags.FLAGS_NONE
+        });
+
+    // Connect 'activate' and 'startup' signals to the callback functions
+    this.application.connect('activate', Lang.bind(this, this._onActivate));
+    this.application.connect('startup', Lang.bind(this, this._onStartup));
+    },
+
+    // Callback function for 'activate' signal presents window when active
+    _onActivate: function() {
+        this._window.present();
+    },
+
+    // Callback function for 'startup' signal builds the UI
+    _onStartup: function() {
+        this._buildUI ();
+    },
+]]></code>
+    <p>All the code for this sample goes in the CheckButtonExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link> for our widgets and window to go in.</p>
+    <code mime="text/javascript"><![CDATA[
+    // Build the application's UI
+    _buildUI: function() {
+
+        // Create the application window
+        this._window = new Gtk.ApplicationWindow({
+            application: this.application,
+            window_position: Gtk.WindowPosition.CENTER,
+            default_height: 100,
+            default_width: 300,
+            border_width: 10,
+            title: "CheckButton Example"});
+]]></code>
+    <p>The _buildUI function is where we put all the code to create the application's user interface. The first step is creating a new <link href="GtkApplicationWindow.js.page">Gtk.ApplicationWindow</link> to put all our widgets into.</p>
+  </section>
+
+  <section id="button">
+    <title>Creating the checkbutton</title>
+    <code mime="text/javascript"><![CDATA[
+        // Create the check button
+        this._button = new Gtk.CheckButton ({label: "Show Title"});
+        this._window.add (this._button);
+
+        // Have the check button be checked by default
+        this._button.set_active (true);
+
+        // Connect the button to a function that does something when it's toggled
+        this._button.connect ("toggled", Lang.bind (this, this._toggledCB));
+]]></code>
+    <p>This code creates the checkbutton itself. The label next to the checkbutton is created by giving the checkbutton the "label" property and assigning a string value to it. Since this checkbutton toggles whether the window title is on or off, and the window title will be on to start with, we want the box to be checked by default. Whenever the user checks or unchecks the box, we call the ._toggledCB function.</p>
+    <code mime="text/javascript" style="numbered"><![CDATA[
+        // Show the window and all child widgets
+        this._window.show_all();
+    },
+]]></code>
+    <p>This code finishes up creating the UI, by telling the window to show itself and all child widgets (which is just the checkbutton in this case).</p>
+  </section>
+
+  <section id="function">
+    <title>Function which handles the checkbutton's toggling</title>
+    <code mime="text/javascript"><![CDATA[
+    _toggledCB: function () {
+
+        // Make the window title appear or disappear when the checkbox is toggled
+        if (this._button.get_active() == true)
+            this._window.set_title ("CheckButton Example");
+        else
+            this._window.set_title ("");
+
+    }
+
+});
+]]></code>
+    <p>If the checkbutton is toggled from on to off, we want the window title to disappear. If it's toggled from off to on, we want it to reappear. We can tell which way it was toggled by testing to see whether it's active (checked) or not afterwards. A simple if / else statement which calls the checkbutton's get_active() method will work for this.</p>
+    <code mime="text/javascript"><![CDATA[
+// Run the application
+let app = new CheckButtonExample ();
+app.application.run (ARGV);
+]]></code>
+    <p>Finally, we create a new instance of the finished CheckButtonExample class, and set the application running.</p>
+  </section>
+
+  <section id="complete">
+    <title>Complete code sample</title>
+<code mime="text/javascript" style="numbered"><xi:include href="samples/checkbutton.js" parse="text"><xi:fallback/></xi:include></code>
+  </section>
+
+  <section id="in-depth">
+    <title>In-depth documentation</title>
+<list>
+  <item><p><link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link></p></item>
+  <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+  <item><p><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.CheckButton.html";>Gtk.CheckButton</link></p></item>
+</list>
+  </section>
+</page>
diff --git a/platform-demos/C/samples/checkbutton.js b/platform-demos/C/samples/checkbutton.js
new file mode 100644
index 0000000..835e7d5
--- /dev/null
+++ b/platform-demos/C/samples/checkbutton.js
@@ -0,0 +1,76 @@
+#!/usr/bin/gjs
+
+const Gio = imports.gi.Gio;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const CheckButtonExample = new Lang.Class({
+    Name: 'CheckButton Example',
+
+    // Create the application itself
+    _init: function() {
+        this.application = new Gtk.Application({
+            application_id: 'org.example.jscheckbutton',
+            flags: Gio.ApplicationFlags.FLAGS_NONE
+        });
+
+    // Connect 'activate' and 'startup' signals to the callback functions
+    this.application.connect('activate', Lang.bind(this, this._onActivate));
+    this.application.connect('startup', Lang.bind(this, this._onStartup));
+    },
+
+    // Callback function for 'activate' signal presents window when active
+    _onActivate: function() {
+        this._window.present();
+    },
+
+    // Callback function for 'startup' signal builds the UI
+    _onStartup: function() {
+        this._buildUI ();
+    },
+
+
+
+    // Build the application's UI
+    _buildUI: function() {
+
+        // Create the application window
+        this._window = new Gtk.ApplicationWindow({
+            application: this.application,
+            window_position: Gtk.WindowPosition.CENTER,
+            default_height: 100,
+            default_width: 300,
+            border_width: 10,
+            title: "CheckButton Example"});
+
+        // Create the check button
+        this._button = new Gtk.CheckButton ({label: "Show Title"});
+        this._window.add (this._button);
+
+        // Have the check button be checked by default
+        this._button.set_active (true);
+
+        // Connect the button to a function that does something when it's toggled
+        this._button.connect ("toggled", Lang.bind (this, this._toggledCB));
+
+        // Show the window and all child widgets
+        this._window.show_all();
+    },
+
+
+
+    _toggledCB: function () {
+
+        // Make the window title appear or disappear when the checkbox is toggled
+        if (this._button.get_active() == true)
+            this._window.set_title ("CheckButton Example");
+        else
+            this._window.set_title ("");
+
+    }
+
+});
+
+// Run the application
+let app = new CheckButtonExample ();
+app.application.run (ARGV);