Hello world in pyqt?

Question

Currently I'm using pycharm to develop python web application. I want to develop desktop application with QT framework. I've installed pyqt. I've searched about hello world in pyqt and find this:

from PyQt4 import QtGui, QtCore

class Window(QtGui.QWidget):
    def __init__(self):
        QtGui.QWidget.__init__(self)
        self.button = QtGui.QPushButton('Test', self)
        self.button.clicked.connect(self.handleButton)
        layout = QtGui.QVBoxLayout(self)
        layout.addWidget(self.button)

    def handleButton(self):
        print ('Hello World')

if __name__ == '__main__':

    import sys
    app = QtGui.QApplication(sys.argv)
    window = Window()
    window.show()
    sys.exit(app.exec_())

But I don't know where to put this code? this is my pyqt designer looks like:

Is it possible to tell me where to write code and how to handle a button click?

Answer 1

It looks like the code you posted was copied from this answer of mine. That code is a simple, hand-written example that doesn't involve using Qt Designer at all.

A "Hello World" example using Qt Designer would start off with a ui file like this:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Window</class>
 <widget class="QWidget" name="Window">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>171</width>
    <height>61</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Hello World</string>
  </property>
  <layout class="QVBoxLayout" name="verticalLayout">
   <item>
    <widget class="QPushButton" name="button">
     <property name="text">
      <string>Test</string>
     </property>
    </widget>
   </item>
  </layout>
 </widget>
 <resources/>
 <connections/>
</ui>

This file can be saved as helloworld.ui and opened in Qt Designer.

The first thing to understand about Qt Designer, is that it is not an IDE - it is only used for designing the GUI, not the main program logic. The program logic is written separately and connected to the GUI afterwards.

There are two ways to do this. The first is to load the ui file directly, using the uic module:

import sys, os
from PyQt4 import QtGui, QtCore, uic

DIRPATH = os.path.join(os.path.dirname(os.path.abspath(__file__)))

class Window(QtGui.QWidget):
    def __init__(self):
        QtGui.QWidget.__init__(self)
        uic.loadUi(os.path.join(DIRPATH, 'helloworld.ui'), self)
        self.button.clicked.connect(self.handleButton)

    def handleButton(self):
        print('Hello World')

if __name__ == '__main__':

    app = QtGui.QApplication(sys.argv)
    window = Window()
    window.show()
    sys.exit(app.exec_())

This injects the GUI into the local Window class, which is a subclass matching the top-level GUI class from Qt Designer (which in this case is also called "Window", but can be anything you like). The other GUI widgets become attributes of the subclass - so the QPushButton is available as self.button.

The other way to connect the GUI with the program logic, is to use the pyuic tool to generate a python module from the ui file:

pyuic4 --output=helloworld.py helloworld.ui

which can then be be imported into the main application:

import sys
from PyQt4 import QtGui, QtCore
from helloworld import Ui_Window

class Window(QtGui.QWidget, Ui_Window):
    def __init__(self):
        QtGui.QWidget.__init__(self)
        self.setupUi(self)
        self.button.clicked.connect(self.handleButton)

    def handleButton(self):
        print('Hello World')

if __name__ == '__main__':

    app = QtGui.QApplication(sys.argv)
    window = Window()
    window.show()
    sys.exit(app.exec_())

The setupUi method is inherited from the generated Ui_Window class, and does exactly the same thing as uic.loadUi.