Learn Qt With Me - First Program Part II

by Suman Kundu on April 11, 2012

So, we did created our first program using Qt and Python. We also captured user submitted data and printed them to Python console. Now we will create a GUI for preview information instead of printing on console screen. Lets start modifying our project by opening it in Eric.

In Eric Project-Viewer (Default in the left panel), there are several tabs. Open "Forms" tab; you can see the MainWindow.ui file we used earlier. Right Click inside the tab and create New Form, Select "Dialog" from drop down box and click okay. You will be asked to name the file, name it preview.ui or whatever you prefer. Open this file in Qt Designer and create the layout. I had created the following layout for my preview.ui. "Ok Cancel" buttons were rendered using a ButtonBox widget.

Preview Dialog

As I told you in my last post that we will create a class per ui file, so I created preview.py with the following code,

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

class preview: 
  def __init__(self): 
    loader = QUiLoader(); #UI loader class 
    file = QFile("preview.ui"); 
    self.ui = loader.load(file); 


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

  def accepted(self): 
    print 'accepted'; 

  def rejected(self): 
    print 'rejected'; 

  def show(self): 

Hope no further explanations are required for the above code except the show() method. In show() method, we call exec_() of the ui class instead of ui.show(). This is because show() method returns immediately to the calling function whereas the exec_() method waits until user closes the window. It is advisable to test them both to see the difference. In __init__ function I also have connected "accepted" and "rejected" signal which are raised when user click okay or cancel buttons respectively.

Now, MainWindow.py needed some modification. First modify the Address field from "Text Edit" to "Plain Text Edit" in MainWindow.ui. Modification can be easily done by right clicking on the field (in Qt Designer) and choose "Morph Into" from the context menu. Secondly, we need to modify the preview function; which will open the preview window when user submits the data from MainWindow. The preview function of MainWindow.py is modified to -

def preview(self): 
  w = preview(); 
  w.ui.name.setText(self.ui.fnameLineEdit.text() + ' ' 
+ self.ui.lnameLineEdit.text());
  w.ui.address.setText(self.ui.textEdit.toPlainText ()); 

The above code creates an object of preview and set label texts using setText() method with the values submitted by user. Run and test your code. Hope you learn something new again. Next I will try MDI before starting the actual project. Till then keep exploring Qt.

Recommended Reading:
» Learn Qt With Me - First Program
» Learn Qt With Me - Introduction
» KDE Environment Variable Configuration for Configuring Kile with TexLive 2011

Tags: Python, Qt, PySide


blog comments powered by Disqus