Grafische Benutzeroberfläche mit Glade und Python

Transkript

1 Grafische Benutzeroberfläche mit Glade und Python

2 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+

3 Was wird benötigt Ein Programm zum Erstellen der grafischen Benutzeroberfläche (GUI-Designer) Wir verwenden Glade-3 Ein Editor zum Erstellen des PythonProgramms zum Beispiel kwrite Eine Mini-Entwicklungsumgebung, die das Pythonprogramm an die mit Glade erstellte Oberfläche anpasst gladepygen

4 Start mit einem neuen Projekt Gladepygen starten Neues Projekt wählen

5 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.

6 GUI - erste Schritte Unter 'Oberste Ebene' das Fenster anklicken Es erscheint ein leeres Fenster in der Mitte.. In dieses Fenster einen Container platzieren, der weitere Widgets aufnehmen kann.

7 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

8 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

9 Python-Code erstellen Zurück zum Glade-Python-Generator und dort den Python-Code aktualisieren Das Programm kann jetzt ausgeführt werden.

10 Das Programm ausführen Es öffnet sich das Fenster mit dem BeendenButton als einzigem Widget. Das Programm wird aus einer Konsole (einem Kontrollfenster) gestartet. Zum Beenden (auch) das Konsole-Fenster wieder schließen.

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

12 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.

13 Python-Code anpassen Zurück zum Glade-Python-Generator Den Python-Code aktualisieren Den Python-Code bearbeiten (in einem Editor öffnen)

14 Das Programm bearbeiten Kommentarzeichen bei label1 entfernen Den Handler on_button1_clicked programmieren Speichern und Editor beenden

15 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

16 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

17 Pythoncode anpassen Pyhtoncode aktualisieren lassen danach den Code bearbeiten Beim Handler on_button2_clicked den passenden Code einfügen Speichern (und ggf. Editor schließen )

18 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.

19 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 lassen 3.Den Python-Code bearbeiten Wenn nötig, neue Widgets in Python verfügbar machen Die neu hinzugefügten Handler programmieren Speichern und testen.

20 Ende Copyright (C) 2010 Norbert Domes Veröffentlicht unter GNU FDL