Add GTK 4 Samples

Fixes #21

source/tutorials/gui-programming/gtk4-samples.rst

@@ -0,0 +1,43 @@
+GTK4 Samples
+============
+
+.. important::
+
+   GTK 4 is required is required to compile and run the Vala code samples.
+   Depending on your environment, you may need to install a gtk4 development package.
+
+   You can learn more about GTK and how to install GTK 4 at https://gtk.org
+
+
+Introduction
+------------
+
+This tutorial is a subset of GTK4 Samples written in Vala.
+
+This serves as an introduction to developing GTK4 Appliations in Vala.
+
+Source Code
+-----------
+
+You can view the full set of Vala GTK4 Samples in in the
+`Vala GTK4 Samples source code repository <https://github.com/vala-lang/gtk4-samples>`_
+
+The repository includes the sample code featured in this website.
+
+Samples
+-------
+
+.. toctree::
+   :maxdepth: 1
+   :glob:
+
+   gtk4-samples/minimal-app
+   gtk4-samples/basic-app
+   gtk4-samples/synchronising-widgets
+   gtk4-samples/text-file-viewer
+   gtk4-samples/list-view
+   gtk4-samples/list-view-check-buttons
+   gtk4-samples/column-view
+   gtk4-samples/clipboard
+   gtk4-samples/entry-completion-two-cells
+

source/tutorials/gui-programming/gtk4-samples/basic-app.rst

@@ -0,0 +1,50 @@
+Basic App
+=========
+
+Source Code
+-----------
+
+.. code-block:: vala
+
+   // BasicApp.vala
+
+   public class BasicAppSample : Gtk.Application {
+       public BasicAppSample () {
+           Object (application_id: "com.example.BasicAppSample");
+       }
+
+       public override void activate () {
+           var window = new Gtk.ApplicationWindow (this) {
+               title = "Basic GTK4 App"
+           };
+
+           var button = new Gtk.Button.with_label ("Click me!");
+           button.clicked.connect (() => {
+               button.label = "Thank you";
+           });
+
+           window.child = button;
+           window.present ();
+       }
+
+       public static int main (string[] args) {
+           var app = new BasicAppSample ();
+           return app.run (args);
+       }
+   }
+
+Compile and Run
+---------------
+
+Compile:
+
+.. code-block:: console
+
+   $ valac --pkg gtk4 BasicAppSample.vala
+
+Run:
+
+.. code-block:: console
+
+   $ ./BasicAppSample.vala
+

source/tutorials/gui-programming/gtk4-samples/clipboard.rst

@@ -0,0 +1,78 @@
+Clipboard
+=========
+
+Source Code
+-----------
+
+.. code-block:: vala
+
+   // Clipboard.vala
+
+   public class ClipboardSample : Gtk.Application {
+       private Gtk.Entry entry;
+       private Gdk.Clipboard clipboard;
+       private Gtk.ApplicationWindow window;
+   
+   
+       public ClipboardSample () {
+           Object (application_id: "com.example.ClipboardSample");
+       }
+   
+       public override void activate () {
+           this.window = new Gtk.ApplicationWindow (this) {
+               title = "Clipboard",
+               default_width = 300,
+               default_height = 60,
+           };
+   
+           this.entry = new Gtk.Entry ();
+           entry.placeholder_text = "Type here to set the clipboard's content!";
+   
+           this.clipboard = entry.get_clipboard ();
+           this.clipboard.changed.connect (this.on_clipboard_changed);
+   
+          // If the user types something ...
+           entry.changed.connect (() => {
+               // Set text to clipboard
+               clipboard.set_text (entry.text);
+           });
+   
+           this.window.child = entry;
+           this.window.present ();
+       }
+   
+       private void on_clipboard_changed () {
+           clipboard.read_text_async.begin (null, (obj, res) => {
+               try {
+                   var content = clipboard.read_text_async.end (res);
+                   // Only load text from clipboard when the app starts
+                   this.clipboard.changed.disconnect(this.on_clipboard_changed);
+                   this.entry.text = content;
+               } catch (GLib.Error err) {
+                   stderr.printf ("Error: %s", err.message);
+               }
+           });
+       }
+   
+       public static int main (string[] args) {
+           var app = new ClipboardSample ();
+           return app.run (args);
+       }
+   }
+
+
+Compile and Run
+---------------
+
+Compile:
+
+.. code-block:: console
+
+   $ valac --pkg gtk4 Clipboard.vala
+
+Run:
+
+.. code-block:: console
+
+   $ ./Clipboard.vala
+

source/tutorials/gui-programming/gtk4-samples/column-view.rst

@@ -0,0 +1,134 @@
+ColumnView
+==========
+
+Source Code
+-----------
+
+.. code-block:: vala
+
+   // ColumnView.vala
+
+   public class Account : GLib.Object {
+       public string name { get; set; }
+       public string account_type { get; set; }
+       public string balance { get; set; }
+   
+       public Account (string name, string account_type, string balance) {
+           Object (
+               name: name,
+               account_type: account_type,
+               balance: balance
+           );
+       }
+   }
+   
+   public class ColumnViewSample : Gtk.Application {
+       public ColumnViewSample () {
+           Object (application_id: "com.example.ColumnViewSample");
+       }
+   
+       public override void activate () {
+           var window = new Gtk.ApplicationWindow (this) {
+               title = "ColumnView Sample",
+               default_width = 375,
+               default_height = 150
+           };
+   
+           var accounts = new GLib.ListStore(typeof (Account));
+           var selection_model = new Gtk.SingleSelection (accounts) {
+               autoselect = true
+           };
+   
+           accounts.append (new Account ("Visa", "Card", "102.10"));
+           accounts.append (new Account ("Mastercard", "Card", "10.20"));
+   
+           var name_column_factory = new Gtk.SignalListItemFactory ();
+           name_column_factory.setup.connect (on_name_column_setup);
+           name_column_factory.bind.connect (on_name_column_bind);
+   
+           var account_type_column_factory = new Gtk.SignalListItemFactory ();
+           account_type_column_factory.setup.connect (on_account_type_column_setup);
+           account_type_column_factory.bind.connect (on_account_type_column_bind);
+   
+           var balance_column_factory = new Gtk.SignalListItemFactory ();
+           balance_column_factory.setup.connect (on_balance_column_setup);
+           balance_column_factory.bind.connect (on_balance_column_bind);
+   
+           var name_column = new Gtk.ColumnViewColumn ("Account Name", name_column_factory);
+           name_column.expand = true;
+   
+           var account_type_column = new Gtk.ColumnViewColumn ("Type", account_type_column_factory);
+   
+           var balance_column = new Gtk.ColumnViewColumn ("Balance", balance_column_factory);
+           balance_column.expand = true;
+   
+           var column_view = new Gtk.ColumnView (selection_model);
+           column_view.append_column(name_column);
+           column_view.append_column(account_type_column);
+           column_view.append_column(balance_column);
+   
+           window.child = column_view;
+           window.present ();
+       }
+   
+       private void on_name_column_setup (Gtk.SignalListItemFactory factory, GLib.Object list_item_obj) {
+           var label = new Gtk.Label ("");
+           label.halign = Gtk.Align.START;
+           ((Gtk.ListItem) list_item_obj).child = label;
+       }
+   
+       private void on_name_column_bind (Gtk.SignalListItemFactory factory, GLib.Object list_item_obj) {
+           var list_item = (Gtk.ListItem) list_item_obj;
+           var item_data = (Account) list_item.item ;
+           var label = (Gtk.Label) list_item.child;
+           label.label = item_data.name;
+       }
+   
+       private void on_account_type_column_setup (Gtk.SignalListItemFactory factory, GLib.Object list_item_obj) {
+           var label = new Gtk.Label ("");
+           label.halign = Gtk.Align.START;
+           ((Gtk.ListItem) list_item_obj).child = label;
+       }
+   
+       private void on_account_type_column_bind (Gtk.SignalListItemFactory factory, GLib.Object list_item_obj) {
+           var list_item = (Gtk.ListItem) list_item_obj;
+           var item_data = (Account) list_item.item;
+           var label = (Gtk.Label) list_item.child;
+           label.label = item_data.account_type;
+       }
+   
+       private void on_balance_column_setup (Gtk.SignalListItemFactory factory, GLib.Object list_item_obj) {
+           var label = new Gtk.Label ("");
+           label.halign = Gtk.Align.START;
+           ((Gtk.ListItem) list_item_obj).child = label;
+       }
+   
+       private void on_balance_column_bind (Gtk.SignalListItemFactory factory, GLib.Object list_item_obj) {
+           var list_item = (Gtk.ListItem) list_item_obj;
+           var item_data = (Account) list_item.item;
+           var label = (Gtk.Label) list_item.child;
+           label.label = item_data.balance;
+       }
+   
+       public static int main (string[] args) {
+           var app = new ColumnViewSample ();
+           return app.run (args);
+       }
+   }
+
+
+Compile and Run
+---------------
+
+Compile:
+
+.. code-block:: console
+
+   $ valac --pkg gtk4 ColumnView.vala
+
+Run:
+
+.. code-block:: console
+
+   $ ./ColumnView.vala
+

source/tutorials/gui-programming/gtk4-samples/entry-completion-two-cells.rst

@@ -0,0 +1,88 @@
+Entry Completion with Two Cells 
+===============================
+
+Source Code
+-----------
+
+.. code-block:: vala
+
+   // EntryCompletionTwoCells.vala
+
+   public class EntryCompletionTwoCellsSample : Gtk.Application {
+       public EntryCompletionTwoCellsSample () {
+           Object (application_id: "com.example.EntryCompletionTwoCellsSample");
+       }
+   
+       public override void activate () {
+           // Prepare Gtk.Window
+           var window = new Gtk.ApplicationWindow (this) {
+               title = "Entry Completion - Two Cells",
+               default_width = 350,
+               default_height = 70,
+           };
+   
+           // The Entry
+           var entry = new Gtk.Entry () {
+               placeholder_text = "Enter a Location",
+           };
+   
+           // The EntryCompletion
+           Gtk.EntryCompletion completion = new Gtk.EntryCompletion ();
+           entry.set_completion (completion);
+   
+           // Create, fill & register a Gtk.ListStore
+           Gtk.ListStore list_store = new Gtk.ListStore (2, typeof (string), typeof (string));
+           completion.set_model (list_store);
+           completion.set_text_column (0);
+   
+           var cell = new Gtk.CellRendererText ();
+           completion.pack_start(cell, false);
+           completion.add_attribute(cell, "text", 1);
+   
+           Gtk.TreeIter iter;
+   
+           list_store.append (out iter);
+           list_store.set (iter, 0, "Burgenland", 1, "Austria");
+           list_store.append (out iter);
+           list_store.set (iter, 0, "Berlin", 1, "Germany");
+           list_store.append (out iter);
+           list_store.set (iter, 0, "Lower Austria", 1, "Austria");
+           list_store.append (out iter);
+           list_store.set (iter, 0, "Upper Austria", 1, "Austria");
+           list_store.append (out iter);
+           list_store.set (iter, 0, "Salzburg", 1, "Austria");
+           list_store.append (out iter);
+           list_store.set (iter, 0, "Styria", 1, "Austria");
+           list_store.append (out iter);
+           list_store.set (iter, 0, "Tehran", 1, "Iran");
+           list_store.append (out iter);
+           list_store.set (iter, 0, "Vorarlberg", 1, "Austria");
+           list_store.append (out iter);
+           list_store.set (iter, 0, "Vienna", 1, "Austria");
+   
+           window.child = entry;
+           window.present ();
+       }
+   
+       public static int main (string[] args) {
+           var app = new EntryCompletionTwoCellsSample ();
+           return app.run (args);
+       }
+   }
+
+
+Compile and Run
+---------------
+
+Compile:
+
+.. code-block:: console
+
+   $ valac --pkg gtk4 EntryCompletionTwoCells.vala
+
+Run:
+
+.. code-block:: console
+
+   $ ./EntryCompletionTwoCells.vala
+