Auf Mastodon ansehen
Wer auf Linux unterwegs ist, benutzt in aller Regel eine GTK- oder Qt-basierte Desktop-Umgebung. GTK und Qt sind Widget-Toolkits. Sie bestimmen weitgehend darüber, wie Widgets wie Fenster, Knöpfe, Textfelder, Dateidialoge etc. aussehen und funktionieren und verleihen damit der Desktop-Umgebung ihren Charakter. Nebst GNOME setzen z.B. auch Cinammon, Xfce, Budgie, Mate und Pantheon auf GTK. Wer also eine Linux-App oder eine plattformübergreifende App schreiben will, tut gut daran, sich mit GTK auseinanderzusetzen. Doch wie findet man den Einstieg in GTK und GNOME Technologie?
Dazu ist GNOME Workbench sehr zu empfehlen. Dieses Tool wurde bereits in einem früheren Artikel von Ralf kurz vorgestellt. Es handelt sich dabei um einen Werkzeugkasten, der alles bietet, um sich mit GNOME Technologie vertraut zu machen. GNOME ergänzt GTK mit der Libadwaita Bibliothek, welche weitere Widgets anbietet, dabei die GNOME Richtlinien für Benutzeroberflächen umsetzt und GNOME Apps ihr charakteristisches Aussehen verleiht. In Workbench gibt es mehr als hundert Demos für die Verwendung der einzelnen Elemente von GTK 4 und Libadwaita, wobei UI-Design durch Code, CSS Stylesheets und einen Live-Preview begleitet werden. Der Code ist dabei in Javascript, Python, Rust und Vala verfügbar, sodass sich auch Vergleiche zwischen den verschiedenen Programmiersprachen anstellen lassen. Auch für Fortgeschrittene ist Workbench wohl die beste Quelle, um ihr Wissen über einzelne Elemente von GTK 4 und Libadwaita aufzufrischen.
In der kürzlich veröffentlichten Version 47 gibt es in Workbench eine Funktion für automatische Vervollständigungs-Vorschläge und Anzeige dazu passender Dokumentation beim Tippen. In diesem Artikel soll diese Funktion an einem kleinen Beispiel illustriert werden. In einem Folgeartikel wird dann eine komplette App mit Hilfe von Python entwickelt. Wer Workbench noch nicht installiert hat, möge dies über Flathub nachholen.
Wir beginnen mit einem neuen (leeren) Projekt. Dies erhält man über das Hamburger-Menü oder mittels der Tastenkombination Ctrl+N. Was im UI-Panel geschrieben wird, ist in der Auszeichnungssprache Blueprint geschrieben. Im Vergleich zum herkömmlichen sperrigen XML-Format (siehe dazu ein Beispiel in Ralfs Artikel zum Ende von Glade) ist es viel kompakter und lesbarer. Während das Schreiben von XML nur besonders versierten Anwender:innen zu empfehlen war, ist das Blueprint-Format auch Anfänger:innen zugänglich.
Jede Blueprint UI-Definition beginnt mit der Zeile:
using Gtk 4.0;Beginnt man nur schon das erste Wort zu tippen, erhält man prompt die ganze Zeile vorgeschlagen.
Sollen zudem Libadwaita Widgets eingesetzt werden, folgt noch die Zeile
using Adw 1;Danach definieren wir die Widget-Hierarchie. Als Haupt-Behälter können wir etwa ein Fenster, einen Dialog oder eine Status-Seite verwenden. Letzteres ist besonders geeignet für das Experimentieren, da damit eine Live-Vorschau möglich ist, wo jede Änderung an der UI-Definition direkt ersichtlich wird. Eine Status-Seite wird auch in den meisten Demos aus der Bibliothek verwendet. So schreiben wir also
Adw.StatusPage {
}wobei der Inhalt noch zu füllen ist. Wenn wir den Vervollständigungs-Vorschlag nach dem Tippen der ersten Buchstaben dafür mittels Enter quittieren, sehen wir auch gleich welche Eigenschaften so eine Seite hat.
Diese Vorschläge lassen sich auch später noch mit Hilfe der Tastenkombination Ctrl+Space anzeigen. Wir setzen also mal einen Titel und eine Beschreibung:
Adw.StatusPage {
title: "Experiment";
description: "Wir experimentieren mit Gnome-Technologie";
}Auch hier hilft die Autovervollständigung, da etwa bei Quittierung der Eigenschaft "title" bereits der Doppelpunkt, die Gänsefüsschen und das Semikolon geschrieben werden, so dass nur noch der eigentliche Titel eingefügt werden muss. Hier die aktuelle Übersicht mit dem UI-Panel links und der Vorschau rechts.
Jetzt wollen wir die Status-Seite natürlich noch mit etwas Inhalt befüllen. Wie wäre es mit einer Auswahl der Lieblings-Desktopumgebung und einer Bewertung derer auf einer Skala von 0-10, sowie einem Knopf zum Absenden der Antwort? Wer die GTK-Widgets noch nicht kennt, kann die Demo-Bibliothek aufrufen und schauen, welche Elemente wir hier brauchen und wie sie in Blueprint definiert werden können. Dabei ist auch an das Layout zu denken, denn die Elemente liessen sich auf verschiedene Art auf der Seite anbringen.
Für die Auswahl verwenden wir ein DropDown, für die Skala einen SpinButton, für die Beschriftungen Labels, für den Knopf einen Button und das Ganze arrangieren wir mit Hilfe einer Box und eines Grid, so dass die Beschriftungen und Auswahlmöglichkeiten in einem Gitter angeordnet sind und diese Tabelle oberhalb des Knopfs erscheint.
Wir definieren zuerst mal die einzelnen Elemente und kümmern uns danach um die Anordnung. Zuerst die Labels:
Label {
label: "Welches ist deine Lieblings-Desktopumgebung?";
}
Label {
label: "Wie bewertest du deine Lieblings-Desktopumgebung?";
}Dann das DropDown (vergleiche DropDown Demo):
DropDown {
model: StringList {
strings [
"GNOME",
"KDE",
"Cinnamon",
"Xfce",
"Mate",
"Budgie",
"Pantheon",
"Deepin"
]
};
}
und der SpinButton (vergleiche SpinButton Demo):
SpinButton {
numeric: true;
adjustment: Adjustment {
lower: 0;
upper: 10;
step-increment: 1;
value: 5;
};
}
und zuletzt der Button:
Button {
halign: center;
label: "Senden!";
}
Damit wir diese Elemente überhaupt in der Vorschau sehen, packen wir das Ganze mal in eine vertikale Box, und zentrieren diese horizontal. Dazu fügen wir oberhalb des ersten Elements die Zeilen
Box {
orientation: vertical;
halign: center;
hinzu und schliessen die geschweifte Klammer nach dem letzten der Elemente. Nun sieht es so aus:
Jetzt packen wir die beiden Labels, das DropDown und den SpinButton noch in ein Gitter (Grid), in welchem links übereinander die Labels stehen und rechts die entsprechenden Auswahlmöglichkeiten. Dafür fügen wir oberhalb des ersten der vier Elemente eine Zeile
Grid {ein und schliessen die geschweifte Klammer nach dem letzten der vier Elemente. Um die Positionen der vier Elemente zu definieren, fügen wir zu jedem der Elemente die layout-Eigenschaft mit passenden Werten für Zeile und Spalte ein, also z.B.
layout {
column: 0;
row: 1;
}für das zweite Label.
Da die einzelnen Elemente noch etwas sehr aufeinanderhocken, fügen wir noch etwas Abstände ein. Bei der Box:
spacing: 12;
beim Grid:
row-spacing: 12;
column-spacing: 12;
Schon sieht das Ganze recht ordentlich aus:
Hier noch die ganze UI-Definition:
using Gtk 4.0;
using Adw 1;
Adw.StatusPage {
title: "Experiment";
description: "Wir experimentieren mit Gnome Techonologie";
Box {
orientation: vertical;
halign: center;
spacing: 12;
Grid {
row-spacing: 12;
column-spacing: 12;
Label {
label: "Welches ist deine Lieblings-Desktopumgebung?";
layout {
column: 0;
row: 0;
}
}
Label {
label: "Wie bewertest du deine Lieblings-Desktopumgebung?";
layout {
column: 0;
row: 1;
}
}
DropDown {
layout {
column: 1;
row: 0;
}
model: StringList {
strings [
"GNOME",
"KDE",
"Cinnamon",
"Xfce",
"Mate",
"Budgie",
"Pantheon",
"Deepin"
]
};
}
SpinButton {
numeric: true;
layout {
column: 1;
row: 1;
}
adjustment: Adjustment {
lower: 0;
upper: 10;
step-increment: 1;
value: 5;
};
}
}
Button {
halign: center;
label: "Senden!";
}
}
}
Wir könnten das Ganze noch mit etwas Code bereichern, der ausgeführt wird, wenn der Button gedrückt wird. Aber das lasse ich aus Platzgründen mal weg. In einem Folgeartikel werde ich zeigen, wie sich eine ganze App in Workbench schreiben lässt. Dort steht dann der Code im Zentrum.
Fazit:
Workbench und Blueprint sind eine Power-Kombination, mit der sich neuerdings ziemlich einfach GTK 4 / Libadwaita Benutzeroberflächen erstellen lassen. Vorbei sind die Zeiten, in welchen GTK 4 und Libadwaita nur einem Kreise von Eingeweihten zugänglich waren. Die Vervollständigungs-Vorschläge und dazu passend angezeigte Dokumention helfen sowohl Anfängern als auch Fortgeschrittenen und ersparen vielfach den Gebrauch der Suchmaschine.
Quellen:
Sehr spannender und interessanter Artikel. Gut gemacht, vielen Dank