[gnome-devel-docs] tutorials <javascript>: Updated button sample and tutorial page

[Tiffany Antopolski <antopolski src gnome org>]

commit 05649a96d946bcd5425ce572143056807821d5ba
Author: Taryn Fox <jewelfox fursona net>
Date:   Sat May 26 02:31:26 2012 -0400

    tutorials <javascript>: Updated button sample and tutorial page
    
    This update makes them work with Gtk.Application and Gtk.ApplicationWindow. Many thanks to Tiffany for helping.

 platform-demos/C/button.js.page    |    6 ++-
 platform-demos/C/samples/button.js |   91 +++++++++++++++++++++++++-----------
 2 files changed, 69 insertions(+), 28 deletions(-)
---
diff --git a/platform-demos/C/button.js.page b/platform-demos/C/button.js.page
index 1e39371..c57639a 100644
--- a/platform-demos/C/button.js.page
+++ b/platform-demos/C/button.js.page
@@ -51,6 +51,10 @@ theButton.connect ("clicked", function () {
 buttonWindow.show_all();
 Gtk.main();</code>
 <p>
-  In this sample we used the following widgets: <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Button.html";>Gtk.Button</link>, <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Window.html";>Gtk.Window</link>
+  In this sample we used the following:
 </p>
+<list>
+  <item><p><link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link></p></item>
+  <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html";>Gtk.ApplicationWindow</link></p></item>
+  <item><p><link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Button.html";>Gtk.Button</link></p></item>
 </page>
diff --git a/platform-demos/C/samples/button.js b/platform-demos/C/samples/button.js
index 306c659..44be8b3 100644
--- a/platform-demos/C/samples/button.js
+++ b/platform-demos/C/samples/button.js
@@ -1,31 +1,68 @@
 #!/usr/bin/gjs
 
-// Initialize GTK
-var Gtk = imports.gi.Gtk;
-Gtk.init(null, 0);
-
-// Create and set up the window
-var buttonWindow = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL});
-buttonWindow.title = "GNOME Button";
-buttonWindow.set_default_size (250,50);
-buttonWindow.connect("destroy", function(){Gtk.main_quit()});
-
-// Create the button and add it to the window
-var theButton = new Gtk.Button ({label: "Click me"});
-buttonWindow.add (theButton);
-
-/* Say what to do when the button is clicked
-   You can connect it to more useful things if you like.
-   Note that it uses the same syntax as line 11, above.
-   Instead of saying what to do when we get a "destroy"
-   signal from the window, we're saying what to do when
-   we get a "clicked" signal from the button. */
-var clicks = 0;
-theButton.connect ("clicked", function () {
-	clicks++;
-	this.theButton.set_label("Number of clicks: " + clicks + "!");
+const Gio = imports.gi.Gio;
+const GLib = imports.gi.GLib;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const ButtonExample = new Lang.Class ({
+	Name: 'Button Example',
+
+	/* Create the application itself
+	   This boilerplate code is needed to build any GTK+ application. */
+        _init: function () {
+   	     this.application = new Gtk.Application ({
+  	          application_id: 'org.example.jsbutton',
+  	          flags: Gio.ApplicationFlags.FLAGS_NONE
+   	     });
+
+	// Connect 'activate' and 'startup' signals to the callback functions
+	this.application.connect('activate', Lang.bind(this, this._onActivate));
+	this.application.connect('startup', Lang.bind(this, this._onStartup));
+	},
+
+	// Callback function for 'activate' signal presents windows when active
+	_onActivate: function () {
+		this._window.present ();
+	},
+
+	// Callback function for 'startup' signal initializes menus and builds the UI
+	_onStartup: function () {
+		this._buildUI ();
+	},
+
+
+
+
+	// Build the application's UI
+	_buildUI: function () {
+
+		// Create the application window
+        	this._window = new Gtk.ApplicationWindow  ({ application: this.application,
+                                                     	     window_position: Gtk.WindowPosition.CENTER,
+                                                     	     title: "GNOME Button",
+                                                     	     default_height: 50,
+                                                     	     default_width: 250 });
+
+		// Create the button
+		this.Button = new Gtk.Button ({label: "Click Me"});
+		this._window.add (this.Button);
+
+		// Bind it to a function that says what to do when the button is clicked
+		this.Button.connect ("clicked", Lang.bind(this, this._clickHandler));
+
+       	 	// Show the window and all child widgets
+       	 	this._window.show_all();
+	},
+
+	// Here's the function that says what happens when the button is clicked
+	_clickHandler: function () {
+		this.Button.set_label ("Clicked!");
+	}
+
+
 });
 
-// Show the window and the widget inside it, and start the application
-buttonWindow.show_all();
-Gtk.main();
+// Run the application
+let app = new ButtonExample ();
+app.application.run (ARGV);