../
../bastel
glade logo  

Glade Baukasten - a Human-Geek-Interface


Was erwartet dich hier?

Vielleicht hattest du schon mal den Wunsch, ein einfach zu bedienendes Programm für eine bestimmte Aufgabe zu haben. Da du nicht programmieren kannst blieb es bisher bei diesem Wunsch, dabei ist ein Computer dafür geschaffen worden, Routinearbeiten zu lösen anstatt dich mit mühseliger Kleinarbeit zu lähmen. Mittlerweile gibt es dazu auch für Nichtprogrammierer eine einfache Lösung.

Du folgst den Schritten auf dieser Seite und klickst dir in Lego-Manier eine grafische Oberfläche für dein Programm zusammen. Ganz so, wie es deinen Vorstellungen entspricht. Dann schreibst du noch einige Dinge auf, z.B. was geschehen soll, wenn ein bestimmter Knopf gedrückt wird und schickst alles zusammen an jemenschen mit Programmierkenntnissen.

Das hört sich jetzt vielleicht etwas übertrieben einfach an, deswegen solltest du vorher noch das hier lesen:

-weitere einleitende Worte-


und los geht's:

Unser Baukasten nennt sich Glade.
Das ist ein kleines Werkzeug mit dem grafische Oberflächen für Software erstellt werden können. Als erstes solltest du also eine Kopie von Glade auf deinen Rechner bringen und installieren. Die Quellen findest du hier: --Glade.Gnome.org--.
Fragen zur Installation werden dort auch beantwortet.

Nach dem Start von Glade sind mehrere Fenster zu sehen, die du im Glade Hauptfenster unter "View" an- und ausschalten kannst. Als erstes brauchst du die sogenannte Palette, die rechts abgebildet ist. Dort kannst du mit einem Klick auf das Window Symbol ein neues Fenster erstellen. Es erscheint jetzt ein grau unterlegtes Fenster mit dem Titel "window1". Dieses wird das Grundgerüst für alle weiteren Aktionen.


In der GUI (graphical user interface) Entwicklung gibt es sogenannte "container" und "widgets". Ein Widget ist ein exaktes Element, also z.B. ein Button, Icon oder ein Textfeld. Um diese Elemente zu verwenden werden sie in Containern untergebracht. Container sind also die Behälter für unsere Widgets. Das schöne an Containern ist, dass wir sie beliebig verschachteln können.

Im unteren Bereich des Paletten Fensters finden sich drei Containermodelle (horizontale Box, vertikale Box und Tabelle). Ich hab da auch schon mal was vorbereitet: Als erstes eine vertikale Box mit 3 Zeilen und dann in der untersten Zeile eine horizontale Box mit 2 Spalten.

Unser Grundgerüst steht jetzt, also können die einzelnen Elemente eingefügt werden. Um die genaue Ausrichtung und Grösseneinstellung kümmern wir uns später. In meinem Beispiel hab ich oben ein Label eingefügt, darunter ein Textfeld ganz unten zwei normale Buttons und so sieht's bisher aus:




Paletten FensterPalette
Paletten FensterContainer
Paletten FensterElemente

Feinschliff

Der Rohbau ist noch nicht gerade schick aber mit ein wenig Tuning lässt sich das schnell hinbiegen. Dazu schaltest du in dem Glade Hauptfenster unter "View" die "Widget Tree" Ansicht ein und den "Property Editor". Ich habe jetzt erstmal in der "hbox1" die Optionen "expand" und "fill" auf "no" gesetzt und "homogeneous" auf "yes". Das funktioniert stets nach dem gleichen Prinzip. Du klickst im Widget Tree auf das Element, dessen Eigenschaften du verändern willst und im Property Editor erscheinen die aktuellen Einstellungen.

     


Ein wenig Gebastel mit den verschiedenen Elementen macht jedenfalls Laune und nebenbei lernst du die anderen Widgets kennen. Bei der Gestaltung deines GUIs kannst du deiner Kreativität freien Lauf lassen, allerdings solltest du dir jetzt schon überlegt haben, welchen Zweck das GUI später erfüllen soll und wie es sich wohl bedienen lassen wird.


die Vollendung

Wenn du dein Projekt zum ersten Mal speicherst erscheint ein Dialogfenster in das du den Dateinamen eintragen kannst.



Ich habe meins "Schreibbrett" genannt und in der Datei "bsp.glade" gespeichert. Die anderen Einstellungen kannst du getrost ignorieren. Auf "OK" klicken und Glade erzeugt eine XML Datei mit deinen Einstellungen. XML ist ein universelles Format, um Strukturen zu speichern, damit hast du aber nichts weiter zu tun. (Du kannst die XML Datei natürlich mit jedem Texteditor ansehen, wenn du willst.)


so sieht's aus:

Du kannst dir folgenden Pythoncode runterladen: -Testprogramm- um die GUI deines Programms in "Reallife" zu testen. Natürlich gibt es auch hier noch kein Backend (also keine Funktionalität). Weiterhin brauchst du Glade Unterstützung für Python und GTKv2.

In einem Consolenfenster gibst du folgendes ein: gui-test.py bsp.glade (statt "bsp.glade" den, von dir gewählten Dateinamen) nach dem du Enter gedrückt hast sollte sich ein Fenster mit deiner GUI öffnen.



Glückwunsch!
Das war doch nicht schwieriger als ein Bild mit Paintbrush zu zeichnen. Andernfalls lies dir die Fehlermeldung genau durch, wahrscheinlich fehlt nur ein Paket für Python, das sich schnell installieren lässt.


Randnotizen (TODO)

Jetzt wird es aus Programmiersicht interessant. Die XML Datei (bsp.glade) kann naemlich recht bequem ausgelesen werden, unabhaengig von der verwendeten Technik (Handy, PC, Mac, ...), Programmiersprache oder Betriebssystem. Du schickst also diese .glade Datei an den Menschen, mit dem du vorher schon Kontakt aufgenommen hast und versuchst durch geeignete Methoden nochmals seine Motivation zu steigern. (ProgrammiererInnen sind prinzipiell faule Menschen, die sich das Leben so bequem wie moeglich einrichten und sich nicht einmal die Haare schneiden. Es gibt allerdings Aussnahmen - die meist mit Visual Basic zu tun haben, darum geht es hier aber nicht :) Das Prinzip, die GUI unabhaengig vom eigentlichen Programm zu entwickeln hat gleich mehrere Vorteile. Zum einen kann sich der programmierende Mensch intensiv den "eigentlichen" Dingen wie z.B. die Datenbankanbindung kuemmern, ohne dass er lange an der Gestaltung des Frontends schreibt. Zweitens ist es aeusserst muehselig eine GUI per Hand schreiben zu muessen. Ausserdem lassen sich kleinere Aenderungen am Aussehen der grafischen Oberflaeche leichter mit Programmen wie Glade bewerkstelligen, im Idealfall, ohne dass jemand mit Programmierkenntnissen zu Rate gezogen werden braucht. Ein wesentlicher Vorteil, der viel Entwicklungszeit spart, ist die einfache Anpassung des Programms an verschiedene Verwendungszwecke, bei dem der Kern des Codes wieder verwendet werden kann. (Einige unbehelligte Menschen empfinden das Fenster in dem sie rumklicken gerne als Programm. Das ist aber nur teilweise richtig. Genaugenommen meinen sie die GUI, die dazu dient, mit dem eigentlichen Programm zu interagieren - so, wie mit einem Knopf eine Maschine angeschalten werden kann, ist der Knopf hoechstens Teil der Maschine, verrichtet selbst aber keine Arbeit. Letztlich steckt die Logik irgendwo tief unter der Oberflaeche (so auch in diesem Text ;) und diese laesst sich nicht so einfach per Klick 'n Schubs erstellen. Im voelligen Gegensatz dazu halten einige ProgrammiererInnen Frontends fuer Zeitverschwendung - wichtiger sind Ihnen meist Funktionalitaet, Stabilitaet und "sauberer Code".)


Links:

--Glade Homepage (englisch)--
--PyGTK Homepage(englisch)--

--ähnlicher Artikel, wie dieser (englisch)--
--Usability Engineering (deutsch)--

TODO:

zum Python Programmers Teil diese HowTos