Galileo Computing < openbook > Galileo Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

Inhaltsverzeichnis
1 Einleitung
2 Überblick über Python
3 Die Arbeit mit Python
4 Der interaktive Modus
5 Grundlegendes zu Python-Programmen
6 Kontrollstrukturen
7 Das Laufzeitmodell
8 Basisdatentypen
9 Benutzerinteraktion und Dateizugriff
10 Funktionen
11 Modularisierung
12 Objektorientierung
13 Weitere Spracheigenschaften
14 Mathematik
15 Strings
16 Datum und Zeit
17 Schnittstelle zum Betriebssystem
18 Parallele Programmierung
19 Datenspeicherung
20 Netzwerkkommunikation
21 Debugging
22 Distribution von Python-Projekten
23 Optimierung
24 Grafische Benutzeroberflächen
25 Python als serverseitige Programmiersprache im WWW mit Django
26 Anbindung an andere Programmiersprachen
27 Insiderwissen
28 Zukunft von Python
A Anhang
Stichwort

Download:
- ZIP, ca. 4,8 MB
Buch bestellen
Ihre Meinung?

Spacer
 <<   zurück
Python von Peter Kaiser, Johannes Ernesti
Das umfassende Handbuch - Aktuell zu Python 2.5
Buch: Python

Python
gebunden, mit CD
819 S., 39,90 Euro
Galileo Computing
ISBN 978-3-8362-1110-9
Pfeil 24 Grafische Benutzeroberflächen
  Pfeil 24.1 Toolkits
  Pfeil 24.2 Einführung in PyQt
    Pfeil 24.2.1 Installation
    Pfeil 24.2.2 Grundlegende Konzepte von Qt
  Pfeil 24.3 Entwicklungsprozess
    Pfeil 24.3.1 Erstellen des Dialogs
    Pfeil 24.3.2 Schreiben des Programms
  Pfeil 24.4 Signale und Slots
  Pfeil 24.5 Überblick über das Qt-Framework
  Pfeil 24.6 Zeichenfunktionalität
    Pfeil 24.6.1 Werkzeuge
    Pfeil 24.6.2 Koordinatensystem
    Pfeil 24.6.3 Einfache Formen
    Pfeil 24.6.4 Grafiken
    Pfeil 24.6.5 Text
    Pfeil 24.6.6 Eye-Candy
  Pfeil 24.7 Model-View-Architektur
    Pfeil 24.7.1 Beispielprojekt: Ein Adressbuch
    Pfeil 24.7.2 Auswählen von Einträgen
    Pfeil 24.7.3 Editieren von Einträgen
  Pfeil 24.8 Wichtige Widgets
    Pfeil 24.8.1 QCheckBox
    Pfeil 24.8.2 QComboBox
    Pfeil 24.8.3 QDateEdit
    Pfeil 24.8.4 QDateTimeEdit
    Pfeil 24.8.5 QDial
    Pfeil 24.8.6 QDialog
    Pfeil 24.8.7 QGLWidget
    Pfeil 24.8.8 QLineEdit
    Pfeil 24.8.9 QListView
    Pfeil 24.8.10 QListWidget
    Pfeil 24.8.11 QProgressBar
    Pfeil 24.8.12 QPushButton
    Pfeil 24.8.13 QRadioButton
    Pfeil 24.8.14 QScrollArea
    Pfeil 24.8.15 QSlider
    Pfeil 24.8.16 QTableView
    Pfeil 24.8.17 QTableWidget
    Pfeil 24.8.18 QTabWidget
    Pfeil 24.8.19 QTextEdit
    Pfeil 24.8.20 QTimeEdit
    Pfeil 24.8.21 QTreeView
    Pfeil 24.8.22 QTreeWidget
    Pfeil 24.8.23 QWidget


Galileo Computing - Zum Seitenanfang

24.3 Entwicklungsprozess  Zur nächsten ÜberschriftZur vorigen Überschrift

In diesem Abschnitt soll der vollständige Entwicklungsprozess einer einfachen PyQt-Anwendung dargestellt werden. Auf dem hier erarbeiteten Wissen werden wir später aufbauen, wenn es an eine komplexere Anwendung geht.

Bei dem Beispielprogramm, das in diesem Kapitel entwickelt wird, handelt es sich um ein Formular, das einige persönliche Daten vom Benutzer einliest. Sie kennen ein solches Formular von anmeldepflichtigen Internetportalen.


Galileo Computing - Zum Seitenanfang

24.3.1 Erstellen des Dialogs  Zur nächsten ÜberschriftZur vorigen Überschrift

Bevor wir damit beginnen, das Programm zu schreiben, müssen wir uns Gedanken darüber machen, wie die grafische Oberfläche aussehen soll. Dazu gehört zunächst einmal die Frage, welche Informationen vom Benutzer eingelesen werden sollen.

In diesem Beispiel sollen Vorname, Nachname, Geburtsdatum und Adresse des Benutzers eingelesen und gespeichert werden. Zusätzlich soll der Benutzer die allgemeinen Geschäftsbedingungen unseres Pseudo-Portals akzeptieren müssen und optional einen Warenkatalog bestellen können.

Auf Basis dieser Voraussetzungen können wir im nächsten Schritt einen Dialog erstellen. Unter einem Dialog versteht man ein einzelnes Fenster der grafischen Benutzeroberfläche. Häufig besitzt eine Anwendung einen Hauptdialog, in dem der Großteil der Kommunikation mit dem Benutzer abläuft.

Der Hauptdialog unserer Beispielanwendung soll so aussehen wie in Abbildung 24.1.

Abbildung 24.1  Hauptdialog der Anwendung

Der Hauptdialog enthält mehrere sogenannte Widgets. Unter einem Widget (dt. Dingsbums) versteht man ein einzelnes Steuer- oder Bedienelement der grafischen Oberfläche. Ein Widget kann beliebig viele untergeordnete Widgets enthalten, sogenannte Children (dt. Kinder). Im Dialog aus Abbildung 24.1 sind beispielsweise die Eingabefelder, die ihrerseits ebenfalls Widgets sind, dem Gruppierungswidget »Persönliche Daten« untergeordnet.

Abbildung 24.2 gibt Aufschluss über die Namen und Bedeutungen der einzelnen Widgets, aus denen der Hauptdialog besteht.

Abbildung 24.2  Verschiedene Widgets

Jetzt können wir damit beginnen, den Dialog zu erstellen. Qt stellt dafür ein komfortables Entwicklungswerkzeug, den Qt Designer, bereit. Mithilfe des Qt Designers lassen sich auch komplexe Dialoge problemlos editieren.

Unter Windows finden Sie das Programm Qt Designer im Startmenü unter dem Eintrag Qt bzw. PyQt. Sollten Sie Linux oder Mac OS X einsetzen, müssen Sie den Qt Designer gegebenenfalls über den Befehl designer aus einer Shell heraus starten.

Nach dem Starten des Designers wird die Möglichkeit angeboten, ein sogenanntes Template zu laden. Wir entscheiden uns in diesem Fall für das Template »Dialog without buttons«, das einen vollständig leeren Dialog bereitstellt. Danach präsentiert sich der Qt Designer so wie in Abbildung 24.3.

Abbildung 24.3  Der Qt-Designer

Die Arbeitsfläche des Qt Designers lässt sich grob in drei Bereiche unterteilen:

  • In der Mitte finden Sie Ihre Dialogvorlage, die zu diesem Zeitpunkt noch leer ist.
  • Auf der linken Seite befindet sich eine Liste aller verfügbaren Steuerelemente. Um eines dieser Steuerelemente zum Dialog hinzuzufügen, wählen Sie es aus und ziehen es auf den Dialog. Nachdem ein Steuerelement zum Dialog hinzugefügt worden ist, kann es beliebig positioniert oder in seiner Größe verändert werden.
  • Auf der rechten Seite können die Eigenschaften des aktuell ausgewählten Steuerelements bearbeitet werden. Beachten Sie, dass diese Eigenschaften teilweise sehr speziell sind und in diesem Buch nicht zur Gänze beschrieben werden können.

Wir beginnen damit, die beiden Buttons OK und Abbrechen im Dialog zu platzieren. Dazu ziehen Sie zwei Buttons aus der Liste am linken Rand und platzieren sie im Dialog. Die Aufschrift der Buttons lässt sich durch einen Doppelklick auf den bisherigen Text verändern. Um die Schaltfläche OK zur Standardschaltfläche des Dialogs zu machen, ändern Sie die Eigenschaft »default« des Buttons in der Liste auf der rechten Seite auf »true«.

Danach sollen die Group Boxes zur Gruppierung der weiteren Steuerelemente im Dialog platziert werden. Dazu ziehen Sie zwei Group Boxes auf den Dialog und passen Größe und Position Ihren Wünschen an. Der Titel einer Group Box lässt sich durch einen Doppelklick auf den bisherigen Text anpassen (siehe Abbildung 24.4).

Abbildung 24.4  Dialog mit Group Boxes

Jetzt könnten im Prinzip weitere Widgets zum Dialog hinzugefügt werden, indem sie in eine der beiden Gruppen platziert werden. Das macht sie automatisch zu untergeordneten Widgets der jeweiligen Gruppe.

Wenn wir die Eingabefelder jedoch mitsamt erklärendem Text absolut im Dialog positionieren würden, müssten wir jedes Mal alle Steuerelemente anpassen, wenn wir die Größe des Dialogs verändern. Um dieses Dilemma zu vermeiden, unterstützt Qt sogenannte Layouts.

Ein Layout ist eine Art Container, in dem mehrere Widgets automatisch angeordnet werden. Um ein Layout zu erstellen, markieren Sie alle Widgets, die dazugehören sollen, und wählen eine dieser drei hervorgehobenen Schaltflächen aus der Toolbar (siehe Abbildung 24.5).

Abbildung 24.5  Layout-Toolbar

Ein Klick auf das erste Icon ordnet die Steuerelemente horizontal an, ein Klick auf das zweite Icon vertikal. Die beiden folgenden Icons erstellen einen sogenannten Splitter (dt. Trenner) zwischen den Steuerelementen, der später vom Benutzer verschoben werden kann. Dies ist für unseren Dialog nicht weiter wichtig und wird deshalb von uns nicht benötigt. Interessant ist allerdings noch die dritte Schaltfläche, die die markierten Steuerelemente tabellarisch anordnet. Ein Klick auf das letzte Icon löst ein bestehendes Layout auf.

Wenn Sie sich den Inhalt der Group Box »Persönliche Daten« im geplanten Dialog noch einmal ansehen, werden Sie feststellen, dass es sich um einen zweispaltigen tabellarischen Aufbau handelt, bei dem stets eine Beschreibung der anzugebenden Daten links und das entsprechende Eingabefeld rechts steht.

Abbildung 24.6  Tabellarischer Aufbau

Um diese Anordnung der Steuerelemente durch ein Layout zu erzielen, fügen wir die Steuerelemente zunächst an ihrem ungefähren Platz in den Dialog ein. Dabei finden Sie die Beschriftungen unter dem Namen Label und die Eingabefelder unter den Namen Edit Box, Date Box und Text Box im Steuerelemente-Menü des Qt Designers.

Nachdem die Steuerelemente ungefähr an ihrem Platz sind, markieren wir sie und klicken auf das oben beschriebene Icon in der Toolbar zum Aufbau eines tabellarischen Layouts. Beachten Sie, dass es egal ist, in welcher Reihenfolge die Steuerelemente zuvor markiert wurden, da Qt die Position im Layout anhand ihrer vorherigen Position im Dialog abschätzt. Kleinere Ungenauigkeiten in der Positionierung werden dabei automatisch korrigiert. Das fertige Layout wird durch einen roten Rahmen angezeigt und kann jetzt als Ganzes neu positioniert oder in der Größe verändert werden. Sie werden feststellen, dass alle enthaltenen Steuerelemente bei einer Größenänderung automatisch mit angepasst werden.

Abbildung 24.7 soll noch einmal veranschaulichen, was das Hinzufügen eines Layouts für das Arrangement der Steuerelemente bedeutet.

Abbildung 24.7  Vor dem Festlegen eines Layouts

Wenn jetzt alle Widgets markiert werden und ein tabellarisches Layout ausgewählt wird, ordnet der Qt Designer die Steuerelemente so an, wie es in Abbildung 24.8 zu sehen ist.

Abbildung 24.8  Nach dem Festlegen eines Layouts

Das Auswählen und Positionieren des Layouts kann etwas »fummelig« sein, da Sie auf den dünnen Rahmen klicken müssen.

Beachten Sie, dass dem Date Edit Widget automatisch nur so viel Platz eingeräumt wurde, wie zum Anzeigen des Datums benötigt wird. Der dahinter eingefügte Leerraum wird durch ein dünnes rotes Rechteck gekennzeichnet. Wenn Sie selbst solche Aussparungen in ein Layout einbauen möchten, können Sie dies mithilfe eines sogenannten Spacers tun, den Sie im Steuerelemente-Menü finden. Ein Spacer verhält sich wie ein Widget, wird aber im späteren Dialog nicht angezeigt.

Im nächsten Schritt müssen wir den hinzugefügten Label Widgets einen beschreibenden Text verpassen. Dazu klicken Sie, wie bei einer Group Box, doppelt auf den bisherigen Text.

Ähnlich wie eben besprochen können Sie das Hinzufügen der beiden Check Boxes angehen. Allerdings sollten Sie in diesem Fall ein vertikales Layout wählen (siehe Abbildung 24.9).

Abbildung 24.9  Check Boxes im vertikalen Layout

Damit wäre der Dialog äußerlich gestaltet, doch eine wichtige Sache fehlt noch. Jedes Steuerelement benötigt einen Namen, unter dem es nachher im Programm angesprochen werden kann. Dieser Name kann im Qt Designer festgelegt werden, und es ist auch empfehlenswert, das zu tun. Um einem Widget einen neuen Namen zu verpassen, markieren Sie es, öffnen mit einem Rechtsklick das entsprechende Kontextmenü und wählen den Menüpunkt Objektnamen ändern.

Die folgende Tabelle listet die im Beispiel vergebenen Namen für alle wichtigen Steuerelemente auf. Steuerelemente, die nur aus Layoutgründen existieren, beispielsweise die Group Boxes und Labels, müssen nicht benannt werden, da später keine Operationen mit ihnen durchgeführt werden sollen.


Tabelle 24.1  Die Namen der wichtigen Steuerelemente
Steuerelement Name

Der Dialog selbst

Hauptdialog

Das Line Edit Widget »Vorname«

vorname

Das Line Edit Widget »Nachname«

nachname

Das Date Edit Widget »Geburtsdatum«

geburtsdatum

Das Text Edit Widget »Adresse«

adresse

Das Check Box Widget »AGB«

agb

Das Check Box Widget »Newsletter«

newsletter

Das Button Widget »OK«

buttonOK

Das Button Widget »Abbrechen«

buttonAbbrechen

Nachdem alle Namen vergeben wurden, ist das Layout des Hauptdialogs fertig und kann im Projektverzeichnis gespeichert werden. Dazu wählen Sie den Menüpunkt DateiFormular Speichern. Ein mit dem Qt Designer erstellter Dialog wird als UI-Datei (*.ui) gespeichert.

Im Falle dieses Beispielprogramms soll der Dialog unter dem Dateinamen hauptdialog.ui gespeichert werden.

Die Tabulatorreihenfolge

Ein wichtiges, aber nicht essenzielles Thema ist die sogenannte Tabulatorreihenfolge. Bei grafischen Benutzeroberflächen gilt die Maxime, dass ihre Bedienung zwar für die Maus entworfen ist, jederzeit aber auch vollständig über die Tastatur erfolgen kann. Ein wichtiges Instrument dafür ist die Tabulatortaste, mit der der Eingabefokus zwischen den einzelnen Widgets eines Dialogs gewechselt werden kann. Damit dies in einer für den Benutzer nachvollziehbaren Reihenfolge funktioniert, sollten Sie im Qt Designer für jeden Dialog Ihres Projekts die Tabulatorreihenfolge festlegen.

Um die Tabulatorreihenfolge zu editieren, müssen Sie den entsprechenden Modus über das letzte Icon der Werkzeuge-Toolbar aktivieren. Der normale Editiermodus kann durch einen Klick auf das linke Icon wiederhergestellt werden.

Abbildung 24.10  Festlegen der Tabulatorreihenfolge

Nachdem Sie in den Modus zur Festlegung der Tabulatorreihenfolge gewechselt sind, klicken Sie in der Reihenfolge auf die Widgets Ihres Dialogs, in der sie nachher beim Drücken der Tabulator-Taste den Eingabefokus bekommen sollen. Die aktuelle Position eines Widgets in der Tabulatorreihenfolge wird durch eine nicht zu übersehende Zahl über dem Widget verdeutlicht. Die Tabulatorreihenfolge unseres Hauptdialogs sieht so aus wie in Abbildung 24.11.

Abbildung 24.11  Tabulatorreihenfolge im Beispieldialog

Nachdem auch die Tabulatorreihenfolge angepasst wurde, können wir uns endlich dem Schreiben der Anwendung widmen.


Galileo Computing - Zum Seitenanfang

24.3.2 Schreiben des Programms  topZur vorigen Überschrift

Bevor wir uns an das Schreiben der eigentlichen Anwendung heranwagen können, muss noch ein Schritt erledigt werden. Der gespeicherte Hauptdialog ist in Form einer UI-Datei für unser Beispielprogramm nicht zu gebrauchen. Bevor es also losgeht, muss die UI-Datei in eine Python-Klasse umgewandelt werden. Diese Klasse kann dann im Beispielprogramm eingebunden und instanziiert werden. Das Konvertieren der UI-Datei in Python-Code geschieht mit dem Kommandozeilenprogramm pyuic4, das mit PyQt installiert wurde und sich im Hauptverzeichnis von Python befindet.

Das Programm pyuic4 bekommt den Pfad zu einer UI-Datei als Kommandozeilenparameter übergeben und gibt die daraus erstellte Python-Klasse standardmäßig auf dem Bildschirm aus. Um die Ausgabe in eine Programmdatei umzulenken, kann die Kommandozeilenoption -o verwendet werden:

C:\Python25\pyuic4 -o hauptdialog.py hauptdialog.ui

Der obige Aufruf ist natürlich nur möglich, wenn das Projektverzeichnis als aktuelles Arbeitsverzeichnis ausgewählt ist und Python im Verzeichnis C:\Python25 installiert wurde. In anderen Fällen müssen Sie die Pfade entsprechend anpassen. Beachten Sie, dass das Programm pyuic4 bei vielen Linux-Distributionen nach der Installation über das Kommando pyuic4 direkt gestartet werden kann, also kein Pfad angegeben werden muss.

Nachdem das Programm durchgelaufen ist, befindet sich die Programmdatei hauptdialog.py im Projektverzeichnis. Wenn Sie diese Datei öffnen, werden Sie feststellen, dass eine Python-Klasse namens Ui_Hauptdialog erzeugt wurde, die in zwei Methoden den Python-Code enthält, der zum Erstellen unseres Hauptdialogs vonnöten ist.

Jetzt sind endlich alle Vorbereitungen erledigt, sodass wir die Programmdatei programm.py erstellen und uns ganz dem Programmieren der Beispielanwendung widmen können. Das einfachste Programm, das unseren Hauptdialog einfach nur anzeigt und sonst keine weiteren Operationen durchführt, sieht folgendermaßen aus:

import sys 
from PyQt4 import QtGui 
from hauptdialog import Ui_Hauptdialog as Dlg
class MeinDialog(QtGui.QDialog, Dlg): def __init__(self): QtGui.QDialog.__init__(self) self.setupUi(self)
app = QtGui.QApplication(sys.argv) dialog = MeinDialog() dialog.show() sys.exit(app.exec_())

Zunächst werden alle benötigten Module eingebunden. Das sind insbesondere die generierte Programmdatei hauptdialog.py sowie das Modul QtGui, in dem alle Klassen des Qt-Frameworks gekapselt sind, die thematisch mit grafischen Benutzeroberflächen zusammenhängen. Eine Übersicht darüber, welche Namensräume es innerhalb des Pakets PyQt4 gibt, finden Sie weiter unten.

Danach wird die Klasse MeinDialog erstellt, die zum einen von der Basisklasse aller Qt-Dialoge, QDialog, und zum anderen von der in hauptdialog.py implementierten Klasse Ui_Hauptdialog abgeleitet wird. Beachten Sie, dass der Klasse Ui_Hauptdialog beim Einbinden das Alias Dlg verliehen wurde.

Im Konstruktor der Klasse MeinDialog muss der Konstruktor der Klasse QDialog aufgerufen werden. Schließlich werden durch Aufruf der von Dlg geerbten Methode setupUi alle Steuerelemente des Hauptdialogs initialisiert.

Im nun folgenden Codeblock wird eine Instanz der Klasse QApplication erstellt, die den Rahmen einer Anwendung mit grafischer Benutzeroberfläche bereitstellt. Dazu gehört beispielsweise der sogenannte Main Event Loop, die Hauptschleife der Anwendung. Dem Konstruktor der Klasse QApplication werden die Kommandozeilenparameter sys.argv übergeben. Beachten Sie, dass jede Qt-Anwendung immer nur eine einzige QApplication-Instanz haben darf, unabhängig davon, wie viele Dialoge später angezeigt werden sollen.

Nachdem der Rahmen für die Qt-Anwendung erstellt worden ist, kann der Hauptdialog erzeugt werden, indem die Klasse MeinDialog instanziiert wird. Durch die von der Basisklasse QDialog vererbte Methode show wird der Dialog sichtbar. Zu guter Letzt muss der eben angesprochene Main Event Loop durch die Methode exec_ der QApplication-Instanz gestartet werden. Da wir im Moment keine weiteren Operationen durchführen möchten, nachdem der Dialog vom Benutzer geschlossen wurde, geben wir den Rückgabewert von app.exec_ direkt an sys.exit weiter und beenden damit das Beispielprogramm. Beachten Sie, dass das Programm nach Aufruf von app.exec_ in einer Endlosschleife läuft, bis der Benutzer den Hauptdialog schließt.

Dieses zugegebenermaßen ziemlich simple Programm soll im Folgenden sinnvoll erweitert werden. So sollen die vom Benutzer eingegebenen Werte ausgelesen und in das neben der Benutzeroberfläche existierende Konsolenfenster geschrieben werden. Anhand der dazu notwendigen Erweiterungen wird im Folgenden das Signal-und-Slot-Konzept von Qt erklärt.



Ihr Kommentar

Wie hat Ihnen das <openbook> gefallen? Wir freuen uns immer über Ihre freundlichen und kritischen Rückmeldungen.






 <<   zurück
  
  Zum Katalog
Zum Katalog: Python
Python
bestellen
 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: Einstieg in Python






 Einstieg in Python


Zum Katalog: Silverlight 4






 Silverlight 4


Zum Katalog: Python 3






 Python 3


Zum Katalog: JavaScript






 JavaScript


Zum Katalog: jQuery






 jQuery


Zum Katalog: CSS






 CSS


Zum Katalog: Einstieg in XML






 Einstieg in XML


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo





Copyright © Galileo Press 2008
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


[Galileo Computing]

Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de