Grafische Benutzeroberfläche mit Glade und Python

Grundsätzliches

● Die grafische Benutzeroberfläche (GUI) wird getrennt von dem Programm erstellt und gespeichert.

● Zu dieser GUI-Datei wird ein passendes Python-Programm erstellt.

● Die GUI-Datei und das Python-Skript ergeben zusammen ein ausführbares Programm

● Für die grafische Benutzeroberfläche wählen wir als Toolkit GTK+

Was wird benötigt

● Ein Programm zum Erstellen der grafischen Benutzeroberfläche (GUI-Designer)→ Wir verwenden Glade-3

● Ein Editor zum Erstellen des Python-Programms → zum Beispiel kwrite

● Eine Mini-Entwicklungsumgebung, die das Pythonprogramm an die mit Glade erstellte Oberfläche anpasst → gladepygen

Start mit einem neuen Projekt

● Gladepygen starten● Neues Projekt wählen

Projekt-Daten festlegen

● Die Felder im Dialogfenster ausfüllen.● Einen Ordner auswählen, unter dem das

Projekt gespeichert werden soll.● Mit OK öffnet sich der GUI-Designer Glade mit

einer noch leeren Glade-Datei.

GUI - erste Schritte

● Unter 'Oberste Ebene' das Fenster anklickenEs erscheint ein leeres Fenster in der Mitte..

● In dieses Fenster einen Container platzieren, der weitere Widgets aufnehmen kann.

Einen Button zum Beenden

● Einen Knopf (Button) einfügen und gestalten, dieser Button soll das Programm beenden

● Den Button mit einer Aktion (einem Handler) verbinden

– Den Reiter Signale wählen

– Zum Signal clicked den Handler gtk_main_quit aus der Liste wählen

Das Hauptfenster sichtbar machen

● Das Hauptfenster window1 auswählen● Den Reiter gemeinsam wählen● Das Fenster window1 sichtbar machen.● Alle Veränderungen in Glade Speichern

Python-Code erstellen

● Zurück zum Glade-Python-Generator unddort den Python-Code aktualisieren

● Das Programm kann jetzt ausgeführt werden.

Das Programm ausführen

● Es öffnet sich das Fenster mit dem Beenden-Button als einzigem Widget.

● Das Programm wird aus einer Konsole (einem Kontrollfenster) gestartet.

● Zum Beenden (auch) das Konsole-Fenster wieder schließen.

Weitere Widgets hinzufügen

● Glade wieder öffnen ● Das Widget Beschriftung (Label) einfügen● Den Text des Labels nach Wunsch verändern

Und noch ein Button

● Den Button platzieren und gestalten● Den Reiter Signale wählen● Zum Ereignis clicked den Handler auswählen -

wir nehmen die erste Vorgabe aus der Liste● Die Veränderungen in Glade speichern.

Python-Code anpassen

● Zurück zum Glade-Python-Generator● Den Python-Code aktualisieren● Den Python-Code bearbeiten

(in einem Editor öffnen)

Das Programm bearbeiten

● Kommentarzeichen bei label1 entfernen● Den Handler on_button1_clicked

programmieren ● Speichern und Editor beenden

Veränderungen Testen

● Zurück zum Glade-Python-Generator● Das Programm ausführen● Man sieht den neuen Button● Und kann seine Wirkung ausprobieren● Programm (und Konsole) wieder schließen

Noch eine Erweiterung

● Zu Glade wechseln● Einen neuen Button hinzufügen und gestalten● Wie zuvor dem Ereignis clicked einen Handler

(die erste Vorgabe der Liste) zuordnen● Veränderungen in Glade speichern

Pythoncode anpassen

● Pyhtoncode aktualisieren lassendanach den Code bearbeiten

● Beim Handler on_button2_clicked den passenden Code einfügen

● Speichern (und ggf. Editor schließen )

Testen

● Das Programm starten● Der Button Ausschneiden entfernt wie

gewünscht den Text des Labels● Der Button Zurücksetzen fügt den Text wieder

ein.

Das Ziel ist vorläufig erreicht!Weitere Veränderungen nach dem Schema

1.In Glade neue Widgets hinzufügen und gestalten - und wenn nötig Ereignisse (Signale) mit Handlern verbinden - speichern!

2.Den Python-Code aktualisieren lassen3.Den Python-Code bearbeiten

● Wenn nötig, neue Widgets in Python verfügbar machen

● Die neu hinzugefügten Handler programmieren

● Speichern und testen.

Ende

Copyright (C) 2010 Norbert Domes <ndomes@khs-fritzlar.de> Veröffentlicht unter GNU FDL http://www.gnu.org/licenses/