A Simple Tutorial On GUI Programming Using Qt Designer With PyQt4 » Lionel's Blog
A Simple Tutorial On GUI Programming Using Qt Designer With PyQt4
Programming, Python Add comments
Apr 072010
24
I’ve been searching high and low, trying to dig out the entire internet on this subject for the past few days.
It’s either the version of the Qt designer doesn’t match with what we have,
or the PyQt that they have in the net is not the version of what we are using.
Either way, it was really a pain in the ass, especially for people like me, that are still quite new to python.
After a few days of painful process, and a few trial-and-error, I finally managed to get a grasp on the tip of the ice berg of this whole new things.
This is actually a Qt4 QtDesigner Tutorial, which is actually an upgrade for this Qt3 Tutorial.
And I guess it’s better for me to log it down in my blog, before I forget about the steps.
Here are the setups that I have…
Python version 3.1.1
PyQt4
Qt designer 4.6.0
Here are the things that I’m gonna go thru.
let’s go thru how to use the Qt designer tool to make a simple GUI.
The form has 3 widgets,
a lineEdit widget as an input
a textEdit widget as a display
a pushbutton widget as a clear button to clear the display
Next, we’ll go thru how to generate a Python module class for the GUI that we’ve just created.
Finally, how we come up with a wrapper that uses the module class and call to the form that we’ve just created.
Motivation
The small project that we are gonna achieve here is that
the lineEdit widget (at the bottom) allows us to type something.
when we press the “Enter” key, anything typed in the lineEdit widget will be transfered over and displayed in the textEdit widget.
When the “Clear” pushButton is being pressed, this will clear off any content in the display window of the textEdit.
Creating a GUI Form With Qt Designer
1. Invoke the Qt designer tool.
2. Create an empty widget.
3. This is an empty widget just created.
4. Now, let’s add some widgets to this form.
5. On the left panel, drag-and-drop the pushButton into your form (cool isn’t it? ;)
6. Do the same thing for the lineEdit and textEdit widget.
- you can double click on the widgets and adjust them to your heart’s content.
- you can even double click on them, and change their values.
- here, I’ve double clicked on my pushButton and changed the text to “Clear”
7. And this is the final form looks like.
8. At the top right corner is the Object Inspector window.
- You can change the name of your widgets here by double clicking on them.
9. One last thing to note. Because we will rely on the “Enter” pressing activity in transfering the text from the lineEdit over to the textEdit widget, we can not allow the Enter action to interfere with the default way of how the button receives signal. We should turn off this feature at the Property Editor, and set the autoDefault of the pushButton to False.
10. And we are practically done !
11. Click the File -> Save, and save your form into any name. I named mine gui.ui.
12. Noticed that the form is in a xml format.
Turning Your GUI Form Into A Python Module Class Object
1. This is easy.
2. Python comes with a bundled command called pyuic which specifically does this dirty job for you.
3. Use this script to generate the gui.ui file into a python module class file name gui.py.
4. %pyuic4 gui.ui -o gui.py
5. Take a peek into the gui.py.
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
# -*- coding: utf-8 -*-
# Form implementation generated from reading ui file 'test/untitled.ui' #
# Created: Thu Apr 8 14:03:13 2010
# by: PyQt4 UI code generator 4.7 #
# WARNING! All changes made in this file will be lost!
from PyQt4 import QtCore, QtGui
class Ui_Form(object):
def setupUi(self, Form):
Form.setObjectName("Form")
Form.setEnabled(True)
Form.resize(477, 367)
self.pushButton = QtGui.QPushButton(Form)
self.pushButton.setGeometry(QtCore.QRect(393, 333, 75, 25))
self.pushButton.setObjectName("pushButton")
self.lineEdit = QtGui.QLineEdit(Form)
self.lineEdit.setGeometry(QtCore.QRect(9, 335, 361, 21))
......
6.We don’t need to worry about this file.
7. Actually, the biggest difference in Qt3 and Qt4 design is that, Qt4 is being structured in such a way that, once we’ve completed designing out GUI form, and have it generated into a python module class object thru pyuic4, we shouldn’t be even touching/editting the file !
8. Anything additional, or scripting, should be done outside, in the wrapper. (or at least, that’s my understanding of it)
Writing A Wrapper And Using The Form Module Class
1. Now comes the final step.
2. Which took me almost the past few days banging my head over the wall searching for working methods.
3. First, let’s open a new file call run.py
4. Let’s take a look at what we’ve got here:-
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#!/usr/bin/python -d
import sys
from PyQt4 import QtCore, QtGui
from gui import Ui_Form
class MyForm(QtGui.QMainWindow):
def __init__(self, parent=None):
QtGui.QWidget.__init__(self, parent)
self.ui = Ui_Form()
self.ui.setupUi(self)
QtCore.QObject.connect(self.ui.pushButton, QtCore.SIGNAL("clicked()"), self.ui.textEdit.clear )
QtCore.QObject.connect(self.ui.lineEdit, QtCore.SIGNAL("returnPressed()"), self.add_entry)
def add_entry(self):
self.ui.lineEdit.selectAll()
self.ui.lineEdit.cut()
self.ui.textEdit.append("")
self.ui.textEdit.paste()
if __name__ == "__main__":
app = QtGui.QApplication(sys.argv)
myapp = MyForm()
myapp.show()
sys.exit(app.exec_())
5. Line 03 and 04 is the common stuff, importing other libraries into the current ones.
6. Line 05 imports the form class that we’ve generated.
7. From line 08 -> 13, that’s the standard procedure of
- creating a wrapper class which inherits from the QtGui.QMainWindow class.
- instantiating a new instances of our newly generated form object
- calling the instance’s method (setupUi) which setups our form.
8. Line 21 -> 24 is also a standard thingie.
- it starts a new window application
- instantiate a new instance to our newly created wrapper class (MyForm)
- Runs the program.
9. Basically, everything from step 7 to step 8 are standards.
10. All the lines in the run.py are standard templates that every wrapper can use, except line 12 and line 13.
11. QtCore.QObject.connect() is the built-in function that checks for the events that happens in your gui.
12. Basically, the parameters are:-
- QtCore.QObject.connect( sender_widget, signal_received, action/methods )
13. For line 12, we can see that these are the parameters:-
- sender_widget = pushButton
- signal_received = clicked()
- action/method = textEdit->clear()
14. What this means is, whenever the pushButton is being clicked, then the textEdit should be cleared.
15. Line 13 needs more than one single action, thus, we dump it into a function call add_entry.
16. We can see that, when lineEdit widget is being issues with a “returnPressed()” signal:-
- the add_entry() function is being called
- the content of the lineEdit is being selected. (line 16)
- and then cut (line 17)
- and pasted into a new line in the textEdit widget (line18-19)
17. And this is what you will get when you run your program
Honestly, now, I really think that PyQt4, which comes with Qt designer is way much a better combination compared to Perl Tk.
At least, it makes the work of all the GUI form designing more hassle free.
I’ve searched thru the net, but doesn’t seem to find any modules which comes close to the PyQt4 class which binds python so nicely with Qt. (I’m not sure though, maybe there’s one of it lying around there in the midst of the internet world)
Recommended Readings:-
http://www.cs.usfca.edu/~afedosov/qttut/
http://diotavelli.net/PyQtWiki/Tutorials
http://zetcode.com/tutorials/pyqt4/
http://wiki.python.org/moin/JonathanGardnerPyQtTutorial
http://www.rkblog.rk.edu.pl/w/p/introduction-pyqt4/
http://www.riverbankcomputing.co.uk/static/Docs/PyQt4/html/classes.html
http://www.commandprompt.com/community/pyqt/x1214