example: add settings and preference dialogs

This continues turning "example" in a real gnome-shell extension
tutorial, showing how to create GSettings using Convenience and
how to build a simple preference dialog by subclassing GtkGrid
and binding GObject properties to GSettings.

extensions/example/Makefile.am

@@ -1,3 +1,6 @@
 EXTENSION_ID = example
 
+EXTRA_MODULES = prefs.js
+
 include ../../extension.mk
+include ../../settings.mk

extensions/example/extension.js

@@ -1,3 +1,4 @@
+// -*- mode: js2; indent-tabs-mode: nil; js2-basic-offset: 4 -*-
 // Sample extension code, makes clicking on the panel show a message
 const St = imports.gi.St;
 const Mainloop = imports.mainloop;
@@ -12,11 +13,14 @@ const Me = ExtensionUtils.getCurrentExtension();
 const Convenience = Me.imports.convenience;
 
 function _showHello() {
-    let text = new St.Label({ style_class: 'helloworld-label', text: _("Hello, world!") });
+    let settings = Convenience.getSettings();
+    let text = settings.get_string('hello-text') || _("Hello, world!");
+
+    let label = new St.Label({ style_class: 'helloworld-label', text: text });
     let monitor = Main.layoutManager.primaryMonitor;
-    global.stage.add_actor(text);
-    text.set_position(Math.floor (monitor.width / 2 - text.width / 2), Math.floor(monitor.height / 2 - text.height / 2));
-    Mainloop.timeout_add(3000, function () { text.destroy(); });
+    global.stage.add_actor(label);
+    label.set_position(Math.floor (monitor.width / 2 - label.width / 2), Math.floor(monitor.height / 2 - label.height / 2));
+    Mainloop.timeout_add(3000, function () { label.destroy(); });
 }
 
 // Put your extension initialization code here

extensions/example/org.gnome.shell.extensions.example.gschema.xml.in

@@ -0,0 +1,9 @@
+<schemalist gettext-domain="gnome-shell-extensions">
+  <schema id="org.gnome.shell.extensions.example" path="/org/gnome/shell/extensions/example/">
+    <key name="hello-text" type="s">
+      <default>''</default>
+      <_summary>Alternative greeting text.</_summary>
+      <_description>If not empty, it contains the text that will be shown when clicking on the panel.</_description>
+    </key>
+  </schema>
+</schemalist>

extensions/example/prefs.js

@@ -0,0 +1,52 @@
+// -*- mode: js2; indent-tabs-mode: nil; js2-basic-offset: 4 -*-
+
+const GLib = imports.gi.GLib;
+const GObject = imports.gi.GObject;
+const Gio = imports.gi.Gio;
+const Gtk = imports.gi.Gtk;
+
+const Gettext = imports.gettext.domain('gnome-shell-extensions');
+const _ = Gettext.gettext;
+
+const ExtensionUtils = imports.misc.extensionUtils;
+const Me = ExtensionUtils.getCurrentExtension();
+const Convenience = Me.imports.convenience;
+
+function init() {
+    Convenience.initTranslations();
+}
+
+const ExamplePrefsWidget = new GObject.Class({
+    Name: 'Example.Prefs.Widget',
+    GTypeName: 'ExamplePrefsWidget',
+    Extends: Gtk.Grid,
+
+    _init: function(params) {
+	this.parent(params);
+        this.margin = this.row_spacing = this.column_spacing = 10;
+
+	// TRANSLATORS: Example is the name of the extension, should not be
+	// translated
+	let primaryText = _("Example aims to show how to build well behaved \
+extensions for the Shell and as such it has little functionality on its own.\n\
+Nevertheless it's possible to customize the greeting message.");
+
+	this.attach(new Gtk.Label({ label: primaryText, wrap: true }), 0, 0, 2, 1);
+
+	this.attach(new Gtk.Label({ label: '<b>' + _("Message:") + '</b>', use_markup: true }),
+		    0, 1, 1, 1);
+
+	let entry = new Gtk.Entry({ hexpand: true });
+	this.attach(entry, 1, 1, 1, 1);
+
+	this._settings = Convenience.getSettings();
+	this._settings.bind('hello-text', entry, 'text', Gio.SettingsBindFlags.DEFAULT);
+    }
+});
+
+function buildPrefsWidget() {
+    let widget = new ExamplePrefsWidget();
+    widget.show_all();
+
+    return widget;
+}