Thread: Windows Python and Qt in 30 mins
View Single Post
fatalsaint is offline fatalsaint
2010-02-08 , 01:45
Posts: 3,428 | Thanked: 2,856 times | Joined on Jul 2008
#59
Ok, here's a quick tutorial on creating your first app and connecting some signals. The OP shows you how to set everything up so this is going to assume you already have Qt Designer and pyuic4 setup correctly. Screenshots are from the Ubuntu Virtual Machine with the SDK.. but same logic would apply to windows or anything.

So here we go, open up QT designer and create a Main Window:



Lets set the Main Window size to 800x400:


Now we want to create a "Quit" menu item just to show how they work later on in python code.


Now, using the widget selector screen


We click and drag 2 ListWidgets, on either side of the Main Window, and then 5 pushbuttons and a LineEdit in between them. I named the two listWidgets "listRight", and "listLeft" as so:


Using the same screens, I named the buttons:
"btnAdd", "btnAllAdd", "btnRemove", "btnAllRemove", "btnAddNew" and the LineEdit to "lineNew".

Because I like to make things expandable to fit the screen (in case it needs to be resized or is run on something other than a static 800x400 window), we are going to do some grouping too (this is all just for show case). So we add a vertical spacer widget select all the buttons in the middle with the Line Edit and do a Layout Vertically, as so:


Then add two Vertical Spacer widgets to the top and bottom, select them all, and do a layout vertically again.


Now add the Horizontal Spacer widgets shown above to either side, right click on the background Main Window page, and do a "Layout in a Grid". What we end up with is:


Now we're done with QT Designer! So we want to save, and I called it "list_example.ui":


This gives us a standard QT .ui file which would normally be used by a C++ app. But we want python code, so, doing what the OP and every other tutorial tells us to we use pyuic4:

Code:
pyuic4 -o list_example_ui.py list_example.ui
That gives us new python file. Unfortunately, we can't run that file directly as all it is is the GUI - we need to launch it somehow, so we create the main python app and I called it "list_example.py" with the following code:
Code:
#!/usr/bin/python2.5
import sys
from PyQt4 import QtGui,QtCore
from list_example_ui import *

class MyForm(QtGui.QMainWindow):
        def __init__(self, parent=None):
                #build parent user interface
                QtGui.QWidget.__init__(self, parent)
                self.ui = Ui_MainWindow()
                self.ui.setupUi(self)

if __name__ == "__main__":
        #This function means this was run directly, not called from another python file.
        app = QtGui.QApplication(sys.argv)
        myapp = MyForm()
        myapp.show()
        sys.exit(app.exec_())


Now we can run list_example.py directly. If it's on the N900, use "python list_example.py", if you're in the SDK/Scratchbox and want to see it show up properly in Xephyr you use "run-standalone.sh python list_example.py" and voila! We get:


But, of course, nothing works! So we close out and decide we want those buttons to actually do something. We know we have 5 buttons, and 1 menu item, so we know we are going to need 6 connects. So lets try some:
Code:
class MyForm(QtGui.QMainWindow):
        def __init__(self, parent=None):
                #build parent user interface
                QtGui.QWidget.__init__(self, parent)
                self.ui = Ui_MainWindow()
                self.ui.setupUi(self)

                #connect buttons
                QtCore.QObject.connect(self.ui.btnAdd, QtCore.SIGNAL('clicked()'), self.doAdd)
                QtCore.QObject.connect(self.ui.btnAllAdd, QtCore.SIGNAL('clicked()'), self.doAllAdd)
                QtCore.QObject.connect(self.ui.btnRemove, QtCore.SIGNAL('clicked()'), self.doRemove)
                QtCore.QObject.connect(self.ui.btnAllRemove, QtCore.SIGNAL('clicked()'), self.doAllRemove)
                QtCore.QObject.connect(self.ui.btnAddNew, QtCore.SIGNAL('clicked()'), self.doAddNew)
                QtCore.QObject.connect(self.ui.actionQuit, QtCore.SIGNAL('triggered()'), QtGui.qApp, QtCore.SLOT('quit()'))
Now, we've connected all 6 items to something. But python has no idea what the things like "self.doAdd" and "self.doAllAdd" are. The only one of those connects that will work is the last one for the "Quit" menu item because we connected it to a built-in qt "quit" slot.

So, now we create various functions (also called methods) that correspond to the names we connected the buttons to:
Code:
        #Create Sub's
        def doAdd(self):
                add = 1
                for i in range(self.ui.listRight.count()): #let's not create duplicates, so lets do a search.
                        if self.ui.listRight.item(i).text() == self.ui.listLeft.currentItem().text():
                                add = 0
                if add: #Okay, it wasn't found.  Let's add it.
                        self.ui.listRight.addItem(self.ui.listLeft.currentItem().text())

        def doAllAdd(self): #This ones easy, just clear the right one, go through all the left items and add them.
                self.ui.listRight.clear() 
                for i in range(self.ui.listLeft.count()):
                        self.ui.listRight.addItem(self.ui.listLeft.item(i).text())

        def doRemove(self): #Easy again, just remove the selected item.
                self.ui.listRight.takeItem(self.ui.listRight.currentRow())

        def doAllRemove(self): #Super Easy.
                self.ui.listRight.clear()

        def doAddNew(self): #Pretty easy, just add to the left what is in the text box, then clear it out.
                self.ui.listLeft.addItem(self.ui.lineNew.text())
                self.ui.lineNew.clear()
So, we put it all together and we have (without the above comments):
Code:
#!/usr/bin/python2.5
import sys
from PyQt4 import QtGui,QtCore
from list_example_ui import *

class MyForm(QtGui.QMainWindow):
	def __init__(self, parent=None):
		#build parent user interface
		QtGui.QWidget.__init__(self, parent)
		self.ui = Ui_MainWindow()
		self.ui.setupUi(self)

		#connect buttons
		QtCore.QObject.connect(self.ui.btnAdd, QtCore.SIGNAL('clicked()'), self.doAdd)
		QtCore.QObject.connect(self.ui.btnAllAdd, QtCore.SIGNAL('clicked()'), self.doAllAdd)
		QtCore.QObject.connect(self.ui.btnRemove, QtCore.SIGNAL('clicked()'), self.doRemove)
		QtCore.QObject.connect(self.ui.btnAllRemove, QtCore.SIGNAL('clicked()'), self.doAllRemove)
		QtCore.QObject.connect(self.ui.btnAddNew, QtCore.SIGNAL('clicked()'), self.doAddNew)
		QtCore.QObject.connect(self.ui.actionQuit, QtCore.SIGNAL('triggered()'), QtGui.qApp, QtCore.SLOT('quit()'))

		#Create Sub's
	def doAdd(self):
		add = 1
		for i in range(self.ui.listRight.count()):
			if self.ui.listRight.item(i).text() == self.ui.listLeft.currentItem().text():
				add = 0
		if add:
			self.ui.listRight.addItem(self.ui.listLeft.currentItem().text())

	def doAllAdd(self):
		self.ui.listRight.clear()
		for i in range(self.ui.listLeft.count()):
			self.ui.listRight.addItem(self.ui.listLeft.item(i).text())

	def doRemove(self):
		self.ui.listRight.takeItem(self.ui.listRight.currentRow())

	def doAllRemove(self):
		self.ui.listRight.clear()

	def doAddNew(self):
		self.ui.listLeft.addItem(self.ui.lineNew.text())
		self.ui.lineNew.clear()

if __name__ == "__main__":
	app = QtGui.QApplication(sys.argv)
	myapp = MyForm()
	myapp.show()
	sys.exit(app.exec_())
And our final application:


Yay, not the most useful app.. this is entirely just a "look, it works".. leave it up to you guys to make something useful.

I don't know if anyone will actually *find* any of this any more/less useful than other tutorials.. but maybe some of the images can be used for whoever does the wiki article.
__________________
If I've helped you or you use any of my packages feel free to help me out.
-----------------------------------------------------------------------------------
Maintaining:
pyRadio - Pandora Radio on your N900, N810 or N800!
 

The Following 42 Users Say Thank You to fatalsaint For This Useful Post: