Learn Qt With Me - First Program

by Suman Kundu on April 04, 2012

Today I am going to create a sample screen to start with. These first few programs are just to test the environment, before starting the actual project.

First thing we need is an interface. Here we will use the screen designer application installed earlier. Open Qt Designer and create a screen of type MainWindow.Qt Designer Qt Designer have three panel, left, right and main panel. "Widget Box" in the left panel contain widgets for the UI screens. Right panel contains an Object Inspector, Property Editor and Resource Browser. Main panel shows the layouts. Upon selecting the layout, Object Inspector lists all the objects in a tree structures. Upon selecting an widget its properties are listed in the Property Editor.

Lets start designing. I created a simple form to take user details. The users of the application will have the following details, First Name, Last Name, Address and Phone Number. "Line Edit" can be found in the Input Widgets set and Label can be found in the Display Widget. For address I use Text Edit, which can also be found in Input Widgets. Hope the reader already have knowledge about such designing application. If not, it is pretty easy, you can drag and arrange the layout. To align you can use Ctrl + arrow keys to finely moving the element within the layout. When you are satisfied, save it to with a name. It saves the layout in a xml file. The extension of this design file is ui. We will use this in our program later. Do create a Submit button as well so that we can so something with the data entered.

Adding a Label: Click on the Label widget and add it to the layout. To change the label text, change the value of the text property in the Property Editor or you can double click on the label and change the text.

Now we have our UI ready to use. Open eric, click project >> new project. Put a project name, set programming language to python; then in the project type drop down box choose PySide GUI, cahoose  project folder, preferably the same folder we saved our UI file and click okay. The UI file created in the earlier step needs to be in the same folder. If they are in different folder then copy the ui file into the project folder. N00ote: You may be asked to choose the version control system, skip this for now with none in the option.

Create a new python file in eric. We will use it to load our UI file and the same file will contain the event handlers. For class name, I prefer same name as of the UI file. Name of my ui file is MainWindow.ui so do the python file is named MainWindow.py.

In the python class we need to import few packages,

  from PySide.QtCore import *
  from PySide.QtGui import *
  from PySide.QtUiTools import *

PySide.QtUiTools package is required to load *.ui file dynamically. Other two packages are the python binder to Qt. Code for the MainWindow is -

class MainWindow:
    def __init__(self):
        loader = QUiLoader(); 		
	# Initialization of UI Loader class
        file = QFile("MainWindow.ui");	
	# Initializing the UI file
	# Open UI file in ReadOnly mode
        self.ui = loader.load(file);	
	# This function loads the UI and set it to the veriable self.ui
        file.close();			# File close
        # Following line connects the slot function to the clicked signal

    def __del__ ( self ):
        self.ui = None;

    def preview(self):
        print self.ui.fnameLineEdit.text();

    def show(self):

Class MainWindow have four functions namely __init__, __del__, preview and show. Function show() is use to display the UI, it calls the show() functions of the UI Object. __del__ function disposes the UI Object. For now the preview function is simply prints the text from the fnameLineEdit box to the terminal. We will modify this function further to preview user submitted data in a more convenient user interface.

The __init__ function does the most of the works for now. It first loads the UI from the file object and then it is assigned to self.ui variable. As I already told you, I have prior experience in other languages like C#, Java where button clicks or other such events are called Events and corresponding functions are called event handlers. But here in Qt, it is called signals and slots. Signals are send by the producer objects and the consumer objects uses slot functions to handle the signals. Here preview function is a slot which had been mapped to a signal raised by the button click using the following line of code -


It is the new way to assign a signal to a slot. Now that we completed our coding for the python file. Only remaining part is to write the main.py which will initialize the application. The following code shows the main.py -

import sys

from PySide.QtCore import *
from PySide.QtGui import *

from MainWindow import MainWindow

if __name__ == '__main__':

    # create application
    app = QApplication(sys.argv)

    # create widget
    w = MainWindow();

    # connection
    QObject.connect(app, SIGNAL('lastWindowClosed()'), app,

    # execute application

The main file creates an application, then it creates a object of MainWindow we created earlier. Then we connect the lastWindowClosed() to the applications quit() slot. This ensures that the application quits when the last open window is closed. All other codes are self explainable. Run the application by typing python main.py in a terminal. Type something in the fnameLineEdit box and click submit. You can see the same text appears in the terminal as our preview method echos the text in the terminal.

In this encounter we have learn to create simple UI and showing the UI using PySide. In the next encounter we will modify the preview function. Till then bye.

Recommended Reading:
» Learn Qt With Me - Introduction
» Dont Panic! KDE font looks ugly suddenly
» KDE Environment Variable Configuration for Configuring Kile with TexLive 2011

Tags: Python, Qt, PySide


blog comments powered by Disqus