Grafische Oberflächen

Transkript

1 Eine grafische Benutzeroberfläche (graphical user interface) oder GUI ist eine Software, die die Benutzung eines Programms über grafische Elemente, Tastatur und Zeigergeräte ermöglicht. (Und vereinfachen soll... ) Verwendet werden dazu Fenster (window) Schaltflächen (button) Werkzeugleisten (toolbar) Schieberegler (slider) Dialoge (dialog) Menus (menu) und viele, viele mehr... Diese werden von Bibliotheken zur Verfügung gestellt. Nicht selber programmieren! Wir werden hier nur eine Oberflächen-Bibliothek anschauen, aber es gibt zu Python einige konkurrierende: Tkinter wxpython PyQt/PySide anygui Bei Zeiten sollte jeder die für Ihn passende sich einmal raussuchen... Es handelt sich stets um Klassen--Bibliotheken. Also objektorientiert. PRG, SS 12 June 28,

2 Verwenden heute PyQt, Version 4. Verfügbar für alle Betriebssyteme (Windows, Unix, MacOS) und nahezu gleich. Und LGPL. Qt (gesprochen cute, süß, nett) ist nahezu ein Industriestandard (Nokia). Ursprünglich für C++. PyQt erste Anbindung für Python. Aktuelle Neuentwicklung durch Nokia: PySide. Siehe PyQt4 stellt viele Widgets (window gadgets) zur Verfügung. Sortiert in Unter-Modulen: QAxContainer, ActiveX Unterstützung QtAssistant, QtCore, Kernfunktionalitäten QtGui, Grafische Elemente QtHelp, QtNetwork, Netzwerkprotokolle QtOpenGL, 3D Unterstützung QtScript, QtScriptTools, QtSql, SQL Unterstützung (SQLite) QtSvg, Vektorgrafiken QtTest, QtWebKit, Webbrowser QtXml, SAX, DOM Unterstützung QtXmlPatterns, phonon, Multimedia Unterstützung Und Hilfsprogramme: Qt Designer, Qt Linguist. Hilfe unter (C++), oder (PySide), oder in der PythonXY Dokumentation. Widgets Widgets Besserer Überblick auf die vorhandenen Widgets (direkt von der C++--Seite): Basic: QCheckBox: Checkbox with a text label QComboBox: Combined button and popup list QCommandLinkButton: Vista style command link button QDateEdit: Widget for editing dates based on the QDateTimeEdit widget QDateTimeEdit: Widget for editing dates and times QDial: Rounded range control (like a speedometer or potentiometer) QDoubleSpinBox: Spin box widget that takes doubles QFocusFrame: Focus frame which can be outside of a widget s normal paintable area QFontComboBox: Combobox that lets the user select a font family QLCDNumber: Displays a number with LCD-like digits QLabel: Text or image display QLineEdit: One-line text editor QMenu: Menu widget for use in menu bars, context menus, and other popup menus QProgressBar: Horizontal or vertical progress bar PRG, SS 12 June 28,

3 Widgets Basic: (continue) QPushButton: Command button QRadioButton: Radio button with a text label QScrollArea: Scrolling view onto another widget QScrollBar: Vertical or horizontal scroll bar QSizeGrip: Resize handle for resizing top-level windows QSlider: Vertical or horizontal slider QSpinBox: Spin box widget QTabBar: Tab bar, e.g. for use in tabbed dialogs QTabWidget: Stack of tabbed widgets QTimeEdit: Widget for editing times based on the QDateTimeEdit widget QToolBox: Column of tabbed widget items QToolButton: Quick-access button to commands or options, usually used inside a QToolBar QWidget: The base class of all user interface objects Widgets Advanced: QCalendarWidget: Monthly based calendar widget allowing the user to select a date QColumnView: Model/view implementation of a column view QDataWidgetMapper: Mapping between a section of a data model to widgets QDesktopWidget: Access to screen information on multi-head systems QListView: List or icon view onto a model QTableView: Default model/view implementation of a table view QTreeView: Default model/view implementation of a tree view QUndoView: Displays the contents of a QUndoStack PRG, SS 12 June 28,

4 Widgets Organizer: QButtonGroup: Container to organize groups of button widgets QGroupBox: Group box frame with a title QSplitter: Implements a splitter widget QSplitterHandle: Handle functionality of the splitter QStackedWidget: Stack of widgets where only one widget is visible at a time QTabWidget: Stack of tabbed widgets Abstract: QAbstractButton: The abstract base class of button widgets, providing functionality common to buttons QAbstractScrollArea: Scrolling area with on-demand scroll bars QAbstractSlider: Integer value within a range QAbstractSpinBox: Spinbox and a line edit to display values QDialog: The base class of dialog windows QFrame: The base class of widgets that can have a frame Auch zuviele, um sie alle durchzuspielen. Wählen einige aus... Layout Layout Widgets einer GUI müssen angeordnet werden. Dazu verwendet Qt verschiedene Layouts. QBoxLayout: Lines up child widgets horizontally or vertically QButtonGroup: Container to organize groups of button widgets QFormLayout: Manages forms of input widgets and their associated labels QGridLayout: Lays out widgets in a grid QGroupBox: Group box frame with a title QHBoxLayout: Lines up widgets horizontally QLayout: The base class of geometry managers QLayoutItem: Abstract item that a QLayout manipulates QSizePolicy: Layout attribute describing horizontal and vertical resizing policy QSpacerItem: Blank space in a layout QStackedLayout: Stack of widgets where only one widget is visible at a time QStackedWidget: Stack of widgets where only one widget is visible at a time QVBoxLayout: Lines up widgets vertically QWidgetItem: Layout item that represents a widget PRG, SS 12 June 28,

5 Grundstruktur eines Qt-Scripts Grundstruktur eines Qt-Scripts Die Grundstruktur eines Qt-Skripts in Python lautet: import sys import QtCore, QtGui # Eigene Widget-Klassen-Definitionen.. def main(): app = QtGui.Application() # Aufbau und Aufruf der grafischen Oberfläche.. sys.exit(app.exec_()) Die Instanz app der QApplication--Klasse ist für den organisatorischen Betrieb der grafischen Oberfläche zuständig. Die GUI wird gestartet mit der exec_--methode dieses Objekts. Beginn einer Endlosschleife. Das Skript endet, wenn das Hauptfenster geschlossen wird oder die quit--methode von app explizit aufgerufen wird. Hello, World! Hello, World! src/qt/hello.py import sys from PyQt4 import QtGui app = QtGui.QApplication(sys.argv) lab = QtGui.QLabel("Hello, World!") lab.show() # <----sys.exit(app.exec_()) important! Verwenden ein QLabel, um Text anzuzeigen (Bilder wären auch möglich). Ergebnis ist Man erhält ein neues Windows 7--Fenster mit dem gewünschten Inhalt. Zum Schliessen muss auf das x oben rechts geklickt werden. PRG, SS 12 June 28,

6 Hello, World! Nochmal mit einigen Änderungen. src/qt/hello2.py import sys from PyQt4 import QtCore, QtGui app = QtGui.QApplication(sys.argv) lab = QtGui.QLabel() lab.setstylesheet("background-color: yellow") lab.settext("<font color= darkred size= 7 ><b>hello, World!</b></font>") lab.setalignment(qtcore.qt.alignhcenter QtCore.Qt.AlignVCenter) lab.show() sys.exit(app.exec_()) Hello, World! Und als eigene Klasse. src/qt/hello3.py import sys from PyQt4 import QtCore, QtGui class MyWidget(QtGui.QLabel): def init (self, text="world", parent=none): super(mywidget, self). init (parent) self.setstylesheet("background-color: yellow; color: darkred") label = "<font size= 7 ><b>hello, %s!</b></font>" % (text, ) self.settext(label) self.setalignment(qtcore.qt.alignhcenter QtCore.Qt.AlignVCenter) return app = QtGui.QApplication(sys.argv) lab = MyWidget("MT-4") lab.show() sys.exit(app.exec_()) PRG, SS 12 June 28,

7 Knöpfe und Aktionen Knöpfe und Aktionen Grafische Elemente können auch Aktionen auslösen. Dazu müssen deren Signale mit Funktionen/Methoden (Slots) verbunden werden. class MyWidget(QtGui.QWidget): def init (self, parent=none): super(mywidget, self). init (parent) self.createwidgets() def createwidgets(self): btn1 = QtGui.QPushButton( Quit, self) btn2 = QtGui.QPushButton( Hi!, self) self.connect(btn1, QtCore.SIGNAL( clicked() ), QtGui.qApp, QtCore.SLOT( quit() )) self.connect(btn2, QtCore.SIGNAL( clicked() ), self.hello) grid = QtGui.QGridLayout() grid.addwidget(btn1, 0, 0) grid.addwidget(btn2, 0, 1) self.setlayout(grid) def hello(self): print "Hello, World!" Knöpfe und Aktionen Signale für Knöpfe sind clicked(), wenn der Knopf gedrückt (und wieder losgelassen wurde), pressed(), wenn der Knopf gedrückt ist, released(), wenn der Knopf losgelassen wurde, toggled(), wenn der Knopf QRadioButton, QCheckBox seinen Status ändert. Und diese können dann als Auslöser für Aktionen in Methoden verwendet werde. PRG, SS 12 June 28,

8 Schöne Knöpfe Schöne Knöpfe Neben Text können auch kleine Bilder oder Icons auf Knöpfe (und Label) gelegt werden. def createwidgets(self): btn1 = QtGui.QPushButton( Quit, self) btn2 = QtGui.QPushButton( Hi!, self) btn2.seticon(qtgui.qicon( qt-logo.png )) btn2.seticonsize(qtcore.qsize(60,60)) # <---! #<---! self.connect(btn1, QtCore.SIGNAL( clicked() ), QtGui.qApp, QtCore.SLOT( quit() )) self.connect(btn2, QtCore.SIGNAL( clicked() ), self.hello) grid = QtGui.QGridLayout() grid.addwidget(btn1, 0, 0) grid.addwidget(btn2, 0, 1) self.setlayout(grid) QMainWindow stellt einen Rahmen für eine Anwendung zur Verfügung mit Platz für eine Menuleiste, eine Werkzeugleiste, eine Statusleiste und ein zentrales Fenster. Bauen uns eine kleine Anwendung... PRG, SS 12 June 28,

9 Etwas mit einem Label und einer Eingabezeile. class MyWidget(QtGui.QMainWindow): def init (self, parent=none): super(mywidget, self). init (parent) self.setwindowtitle( Kleine Anwendung ) self.setwindowicon(qtgui.qicon( qt-logo.png )) self.createwidgets() def createwidgets(self): label = QtGui.QLabel( Name:, self) edit = QtGui.QLineEdit(self) grid = QtGui.QGridLayout() grid.addwidget(label, 0, 0) grid.addwidget(edit, 0, 1) widget = QtGui.QWidget() widget.setlayout(grid) self.setcentralwidget(widget) app = QtGui.QApplication(sys.argv) win = MyWidget() win.show() sys.exit(app.exec_()) Jetzt noch mit einer Menuleiste mit File und Help. class MyWidget(QtGui.QMainWindow): def init (self, parent=none): self.resize(250, 100) self.createactions() self.createmenubar() self.createwidgets() def createactions(self): icon = QtGui.QIcon( qt-logo.png ) self.exitact = QtGui.QAction(icon, Exit, self) self.connect(self.exitact, QtCore.SIGNAL( triggered() ), QtGui.qApp, QtCore.SLOT( quit() )) self.helpact = QtGui.QAction(icon, Help, self) self.connect(self.helpact, QtCore.SIGNAL( triggered() ), self.help) self.aboutqtact = QtGui.QAction(icon, About Qt, self) self.connect(self.aboutqtact, QtCore.SIGNAL( triggered() ), QtGui.qApp, QtCore.SLOT( aboutqt() )); und... PRG, SS 12 June 28,

10 class MyWidget(QtGui.QMainWindow): def createmenubar(self): menubar = self.menubar() file = menubar.addmenu( &File ) file.addaction(self.exitact) help = menubar.addmenu( &Help ) help.addaction(self.helpact) help.addaction(self.aboutqtact) def help(self): print "Help!!!" Nun noch eine Statusleiste. class MyWidget(QtGui.QMainWindow): def init (self, parent=none): self.createstatusbar() def createwidgets(self): label.setstatustip("a simple label").. edit.setstatustip("enter some text") def createactions(self): self.exitact.setstatustip("exit the application") self.helpact.setstatustip("show some application help") self.aboutqtact.setstatustip("show the Qt library s About box") def createstatusbar(self): statusbar = self.statusbar() statusbar.showmessage( Ready ) PRG, SS 12 June 28,

11 Und zuletzt eine Werkzeugleiste. class MyWidget(QtGui.QMainWindow): def init (self, parent=none): self.createtoolbar() def createtoolbar(self): toolbar = self.addtoolbar( Tools ) toolbar.addaction(self.exitact) toolbar.addaction(self.helpact) Bisher werden beim Aufruf eines Qt-Python-Skripts myscript.py mindestens zwei Fenster geöffnet: 1. das Widget-Fenster der Qt-Anwendung und 2. ein Windows-Anwendungsfenster. In dem Anwendungsfenster landen alle Ausgaben des Skripts, die über print Anweisungen ausgegeben werden. Braucht man das nicht, dann stört das Anwendungsfenster. Benennt man das Skript um zu myscript.pyw, dann wird keine Konsole (Anwendungsfenster) geöffnet. PRG, SS 12 June 28,

12 TicTacToe PRG, SS 12 June 28,