Getting started with PyCharm and Qt 4 Designer

Hello folks!!

Its been tough switching from the comfort zone offered by vb.net in GUI development for windows to GUI development for Linux. Here i try to make a simple ‘Helloworld’ GUI application using python language which i believe is useful for a beginner to start out. The softwares i used to setup this one is as follows:

1. Linux Mint 17 Qiana
2. PyCharm Community Edition
3. Qt 4 Designer

Language used: Python

Step 1:

GUI designing is done using Qt 4 Designer. Here a simple GUI is made by first creating a blank widget. Drag in a few controls like a push button and a TextEdit control from the toolbox of the designer. I also placed a label with the text field set as ‘Hello world program’. Here i don’t want to worry about layouts just now, so just place the controls anywhere on the form.

Now press CTRL+R to preview the GUI made and save the work done. Here after saving i got a file named ‘untitled.ui’. Take note of the folder path where this is saved since we might need it later.

Selection_001Step 2:

Our GUI for the application is ready but as you can see nothing happens when you click the button. So we need to code the actions to be performed using python. Start a new project in PyCharm.
Now copy and paste the earlier gui file created using qt to the PyCharm project folder. Here the project name was ‘untitled1’ so i paste the ‘untitled.gui’ file to Home->PyCharmProjects->untitled1 folder.
Now open the terminal window from PyCharm using the alt+F12 shortcut in PyCharm and execute the following command. (This is very important)

pyuic4 untitled.ui -o test1gui.py

Now you will find a new file named test1gui.py added to your python project. This py file will contain the python code for the corresponding GUI you developed using Qt earlier.

Selection_003Step 3:
Now add a new python file to the project using file->add->python file option. Here i named the python file ‘test1’. We will use this to write our python code to make our GUI work. First we need to import some stuff.

import sys

from PyQt4 import QtCore, QtGui
from test1gui import Ui_Form

Now we will need to declare the form class and initialize it and define the click function for the push button. Use the below code for that.

class MyForm(QtGui.QMainWindow):

    def __init__(self, parent=None):
        QtGui.QWidget.__init__(self, parent)
        self.ui = Ui_Form()
        self.ui.setupUi(self)

        self.ui.pushButton.clicked.connect(self.helloworld)

    def helloworld(self):
        self.ui.textEdit.setText(“Hello world”)
        print (‘Hello world again’)

Finally we need to write the code to display the form by running the python code

if __name__ == “__main__”:
    app = QtGui.QApplication(sys.argv)
    myapp = MyForm()
    myapp.show()
    sys.exit(app.exec_())

The full code in the python file might look like this
Selection_007Now run the python code and you will see “Hello world” in the textEdit field of the GUI form as well as on the python output console.

PY Charm_008

Advertisements

3 thoughts on “Getting started with PyCharm and Qt 4 Designer

  1. awesome
    I have pycharm 4.5.1 along with qt5 designer.
    Do you know of any other resources in where i can find more tuts on this subject?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s