Skip to content

Commit 5082995

Browse files
colinkiamacolinkiama
committed
Add GTK 4 Samples
Fixes #21
1 parent c7ec010 commit 5082995

File tree

10 files changed

+832
-0
lines changed

10 files changed

+832
-0
lines changed

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
GTK4 Samples
2+
============
3+
4+
.. important::
5+
6+
GTK 4 is required is required to compile and run the Vala code samples.
7+
Depending on your environment, you may need to install a gtk4 development package.
8+
9+
You can learn more about GTK and how to install GTK 4 at https://gtk.org
10+
11+
12+
Introduction
13+
------------
14+
15+
This tutorial is a subset of GTK4 Samples written in Vala.
16+
17+
This serves as an introduction to developing GTK4 Appliations in Vala.
18+
19+
Source Code
20+
-----------
21+
22+
You can view the full set of Vala GTK4 Samples in in the
23+
`Vala GTK4 Samples source code repository <https://github.com/vala-lang/gtk4-samples>`_
24+
25+
The repository includes the sample code featured in this website.
26+
27+
Samples
28+
-------
29+
30+
.. toctree::
31+
:maxdepth: 1
32+
:glob:
33+
34+
gtk4-samples/minimal-app
35+
gtk4-samples/basic-app
36+
gtk4-samples/synchronising-widgets
37+
gtk4-samples/text-file-viewer
38+
gtk4-samples/list-view
39+
gtk4-samples/list-view-check-buttons
40+
gtk4-samples/column-view
41+
gtk4-samples/clipboard
42+
gtk4-samples/entry-completion-two-cells
43+

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
Basic App
2+
=========
3+
4+
Source Code
5+
-----------
6+
7+
.. code-block:: vala
8+
9+
// BasicApp.vala
10+
11+
public class BasicAppSample : Gtk.Application {
12+
public BasicAppSample () {
13+
Object (application_id: "com.example.BasicAppSample");
14+
}
15+
16+
public override void activate () {
17+
var window = new Gtk.ApplicationWindow (this) {
18+
title = "Basic GTK4 App"
19+
};
20+
21+
var button = new Gtk.Button.with_label ("Click me!");
22+
button.clicked.connect (() => {
23+
button.label = "Thank you";
24+
});
25+
26+
window.child = button;
27+
window.present ();
28+
}
29+
30+
public static int main (string[] args) {
31+
var app = new BasicAppSample ();
32+
return app.run (args);
33+
}
34+
}
35+
36+
Compile and Run
37+
---------------
38+
39+
Compile:
40+
41+
.. code-block:: console
42+
43+
$ valac --pkg gtk4 BasicAppSample.vala
44+
45+
Run:
46+
47+
.. code-block:: console
48+
49+
$ ./BasicAppSample.vala
50+

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

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
Clipboard
2+
=========
3+
4+
Source Code
5+
-----------
6+
7+
.. code-block:: vala
8+
9+
// Clipboard.vala
10+
11+
public class ClipboardSample : Gtk.Application {
12+
private Gtk.Entry entry;
13+
private Gdk.Clipboard clipboard;
14+
private Gtk.ApplicationWindow window;
15+
16+
17+
public ClipboardSample () {
18+
Object (application_id: "com.example.ClipboardSample");
19+
}
20+
21+
public override void activate () {
22+
this.window = new Gtk.ApplicationWindow (this) {
23+
title = "Clipboard",
24+
default_width = 300,
25+
default_height = 60,
26+
};
27+
28+
this.entry = new Gtk.Entry ();
29+
entry.placeholder_text = "Type here to set the clipboard's content!";
30+
31+
this.clipboard = entry.get_clipboard ();
32+
this.clipboard.changed.connect (this.on_clipboard_changed);
33+
34+
// If the user types something ...
35+
entry.changed.connect (() => {
36+
// Set text to clipboard
37+
clipboard.set_text (entry.text);
38+
});
39+
40+
this.window.child = entry;
41+
this.window.present ();
42+
}
43+
44+
private void on_clipboard_changed () {
45+
clipboard.read_text_async.begin (null, (obj, res) => {
46+
try {
47+
var content = clipboard.read_text_async.end (res);
48+
// Only load text from clipboard when the app starts
49+
this.clipboard.changed.disconnect(this.on_clipboard_changed);
50+
this.entry.text = content;
51+
} catch (GLib.Error err) {
52+
stderr.printf ("Error: %s", err.message);
53+
}
54+
});
55+
}
56+
57+
public static int main (string[] args) {
58+
var app = new ClipboardSample ();
59+
return app.run (args);
60+
}
61+
}
62+
63+
64+
Compile and Run
65+
---------------
66+
67+
Compile:
68+
69+
.. code-block:: console
70+
71+
$ valac --pkg gtk4 Clipboard.vala
72+
73+
Run:
74+
75+
.. code-block:: console
76+
77+
$ ./Clipboard.vala
78+

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

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
ColumnView
2+
==========
3+
4+
Source Code
5+
-----------
6+
7+
.. code-block:: vala
8+
9+
// ColumnView.vala
10+
11+
public class Account : GLib.Object {
12+
public string name { get; set; }
13+
public string account_type { get; set; }
14+
public string balance { get; set; }
15+
16+
public Account (string name, string account_type, string balance) {
17+
Object (
18+
name: name,
19+
account_type: account_type,
20+
balance: balance
21+
);
22+
}
23+
}
24+
25+
public class ColumnViewSample : Gtk.Application {
26+
public ColumnViewSample () {
27+
Object (application_id: "com.example.ColumnViewSample");
28+
}
29+
30+
public override void activate () {
31+
var window = new Gtk.ApplicationWindow (this) {
32+
title = "ColumnView Sample",
33+
default_width = 375,
34+
default_height = 150
35+
};
36+
37+
var accounts = new GLib.ListStore(typeof (Account));
38+
var selection_model = new Gtk.SingleSelection (accounts) {
39+
autoselect = true
40+
};
41+
42+
accounts.append (new Account ("Visa", "Card", "102.10"));
43+
accounts.append (new Account ("Mastercard", "Card", "10.20"));
44+
45+
var name_column_factory = new Gtk.SignalListItemFactory ();
46+
name_column_factory.setup.connect (on_name_column_setup);
47+
name_column_factory.bind.connect (on_name_column_bind);
48+
49+
var account_type_column_factory = new Gtk.SignalListItemFactory ();
50+
account_type_column_factory.setup.connect (on_account_type_column_setup);
51+
account_type_column_factory.bind.connect (on_account_type_column_bind);
52+
53+
var balance_column_factory = new Gtk.SignalListItemFactory ();
54+
balance_column_factory.setup.connect (on_balance_column_setup);
55+
balance_column_factory.bind.connect (on_balance_column_bind);
56+
57+
var name_column = new Gtk.ColumnViewColumn ("Account Name", name_column_factory);
58+
name_column.expand = true;
59+
60+
var account_type_column = new Gtk.ColumnViewColumn ("Type", account_type_column_factory);
61+
62+
var balance_column = new Gtk.ColumnViewColumn ("Balance", balance_column_factory);
63+
balance_column.expand = true;
64+
65+
var column_view = new Gtk.ColumnView (selection_model);
66+
column_view.append_column(name_column);
67+
column_view.append_column(account_type_column);
68+
column_view.append_column(balance_column);
69+
70+
window.child = column_view;
71+
window.present ();
72+
}
73+
74+
private void on_name_column_setup (Gtk.SignalListItemFactory factory, GLib.Object list_item_obj) {
75+
var label = new Gtk.Label ("");
76+
label.halign = Gtk.Align.START;
77+
((Gtk.ListItem) list_item_obj).child = label;
78+
}
79+
80+
private void on_name_column_bind (Gtk.SignalListItemFactory factory, GLib.Object list_item_obj) {
81+
var list_item = (Gtk.ListItem) list_item_obj;
82+
var item_data = (Account) list_item.item ;
83+
var label = (Gtk.Label) list_item.child;
84+
label.label = item_data.name;
85+
}
86+
87+
private void on_account_type_column_setup (Gtk.SignalListItemFactory factory, GLib.Object list_item_obj) {
88+
var label = new Gtk.Label ("");
89+
label.halign = Gtk.Align.START;
90+
((Gtk.ListItem) list_item_obj).child = label;
91+
}
92+
93+
private void on_account_type_column_bind (Gtk.SignalListItemFactory factory, GLib.Object list_item_obj) {
94+
var list_item = (Gtk.ListItem) list_item_obj;
95+
var item_data = (Account) list_item.item;
96+
var label = (Gtk.Label) list_item.child;
97+
label.label = item_data.account_type;
98+
}
99+
100+
private void on_balance_column_setup (Gtk.SignalListItemFactory factory, GLib.Object list_item_obj) {
101+
var label = new Gtk.Label ("");
102+
label.halign = Gtk.Align.START;
103+
((Gtk.ListItem) list_item_obj).child = label;
104+
}
105+
106+
private void on_balance_column_bind (Gtk.SignalListItemFactory factory, GLib.Object list_item_obj) {
107+
var list_item = (Gtk.ListItem) list_item_obj;
108+
var item_data = (Account) list_item.item;
109+
var label = (Gtk.Label) list_item.child;
110+
label.label = item_data.balance;
111+
}
112+
113+
public static int main (string[] args) {
114+
var app = new ColumnViewSample ();
115+
return app.run (args);
116+
}
117+
}
118+
119+
120+
Compile and Run
121+
---------------
122+
123+
Compile:
124+
125+
.. code-block:: console
126+
127+
$ valac --pkg gtk4 ColumnView.vala
128+
129+
Run:
130+
131+
.. code-block:: console
132+
133+
$ ./ColumnView.vala
134+

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

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
Entry Completion with Two Cells
2+
===============================
3+
4+
Source Code
5+
-----------
6+
7+
.. code-block:: vala
8+
9+
// EntryCompletionTwoCells.vala
10+
11+
public class EntryCompletionTwoCellsSample : Gtk.Application {
12+
public EntryCompletionTwoCellsSample () {
13+
Object (application_id: "com.example.EntryCompletionTwoCellsSample");
14+
}
15+
16+
public override void activate () {
17+
// Prepare Gtk.Window
18+
var window = new Gtk.ApplicationWindow (this) {
19+
title = "Entry Completion - Two Cells",
20+
default_width = 350,
21+
default_height = 70,
22+
};
23+
24+
// The Entry
25+
var entry = new Gtk.Entry () {
26+
placeholder_text = "Enter a Location",
27+
};
28+
29+
// The EntryCompletion
30+
Gtk.EntryCompletion completion = new Gtk.EntryCompletion ();
31+
entry.set_completion (completion);
32+
33+
// Create, fill & register a Gtk.ListStore
34+
Gtk.ListStore list_store = new Gtk.ListStore (2, typeof (string), typeof (string));
35+
completion.set_model (list_store);
36+
completion.set_text_column (0);
37+
38+
var cell = new Gtk.CellRendererText ();
39+
completion.pack_start(cell, false);
40+
completion.add_attribute(cell, "text", 1);
41+
42+
Gtk.TreeIter iter;
43+
44+
list_store.append (out iter);
45+
list_store.set (iter, 0, "Burgenland", 1, "Austria");
46+
list_store.append (out iter);
47+
list_store.set (iter, 0, "Berlin", 1, "Germany");
48+
list_store.append (out iter);
49+
list_store.set (iter, 0, "Lower Austria", 1, "Austria");
50+
list_store.append (out iter);
51+
list_store.set (iter, 0, "Upper Austria", 1, "Austria");
52+
list_store.append (out iter);
53+
list_store.set (iter, 0, "Salzburg", 1, "Austria");
54+
list_store.append (out iter);
55+
list_store.set (iter, 0, "Styria", 1, "Austria");
56+
list_store.append (out iter);
57+
list_store.set (iter, 0, "Tehran", 1, "Iran");
58+
list_store.append (out iter);
59+
list_store.set (iter, 0, "Vorarlberg", 1, "Austria");
60+
list_store.append (out iter);
61+
list_store.set (iter, 0, "Vienna", 1, "Austria");
62+
63+
window.child = entry;
64+
window.present ();
65+
}
66+
67+
public static int main (string[] args) {
68+
var app = new EntryCompletionTwoCellsSample ();
69+
return app.run (args);
70+
}
71+
}
72+
73+
74+
Compile and Run
75+
---------------
76+
77+
Compile:
78+
79+
.. code-block:: console
80+
81+
$ valac --pkg gtk4 EntryCompletionTwoCells.vala
82+
83+
Run:
84+
85+
.. code-block:: console
86+
87+
$ ./EntryCompletionTwoCells.vala
88+

0 commit comments

Comments
 (0)