Universidade Federal do Para

Centro de Tecnologia da Informacao e Comunicacao

Grupo de Trabalho SET

Tutorial PyQT4
16 de Agosto de 2011

Sum
ario
1 Introdu
c
ao

2 Criando a interface da aplica

c
ao
2.1 A janela principal . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.2 Adicionando os elementos necessarios . . . . . . . . . . . . . . . .
2.3 Criando os slots . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3
3
4
5

3 O c
odigo fonte

4 Considera
c
oes finais

12

Introdu
c
ao

Este tutorial tem por objetivo explicar alguns conceitos basicos, praticos e
te
oricos, de programac
ao em Python com QT.
Para criar uma aplicac
ao em PyQT (aqui iremos utilizar a versao 4 do QT),
e necess
ario instalar alguns pacotes. Para isso, abra o seu terminal e execute o
seguinte comando:
sudo apt-get install pyqt4-dev-tools qt4-designer
Com todos os pacotes instalados, podemos comecar a pensar na nossa aplicacao.
Neste tutorial, ser
a implementada uma calculadora bem simples, a qual tera
quatro funcionalidades b
asicas: somar, subtrair, multiplicar e dividir.

Criando a interface da aplicac

ao

2.1

A janela principal

Pressione Alt + F2 e digite designer-qt4.

Com o qt4-designer aberto, selecione a opcao Widget e clique em Create.

Ser
a criada uma widget, a janela onde ficara a interface da calculadora. Antes
de tudo, vamos mudar o nome que sera atribudo ao objeto que representara a

interface no c
odigo fonte. Ao lado direito do qt4-designer existe uma janela com
as propriedades (e seus respectivos valores) da interface. Clique em qualquer
parte vazia da interface e nas propriedades objectName e windowTitle digite
Calculadora. Salve o arquivo com o nome Calculadora.ui no diretorio de sua
preferencia. Sua janela dever
a estar deste jeito:

2.2

Adicionando os elementos necess

arios

Vamos adicionar quatro botoes `a nossa janela. No canto superior esquerdo do

qt4-designer, no Widget Box, digite push button no filtrador. Clique e arraste
quatro push buttons para a interface. Va posicionando os elementos da sua
calculadora da forma que voce achar mais coerente. Clique duas vezes em cima
do primeiro push button e atribua para o botao o smbolo de adicao (+). Agora
clique uma vez no mesmo e na propriedade objectName digite pb soma. Este
nome signifca que o objeto e um push button (pb) e sera responsavel pela
funcionalidade da soma entre dois valores. Realize o mesmo procedimento para
os outros tres bot
oes, mas, claro, atribuindo os valores necessarios para cada um
deles. N
ao esqueca que dever
a haver um botao que realizara soma (+); outro
para subtrac
ao (-); um para multiplicacao (*); e mais um para divisao (/).
Ap
os a criac
ao dos bot
oes, vamos adicionar tres line edit. No filtrador digite
este nome e arraste tres caixinhas deste tipo para a interface. Clique uma vez
em cada uma delas para mudar o valor de suas propriedades objectName. Uma
dever
a ter o nome le valor1, que representara o primeiro valor que sera passado
para a realizac
ao da operac
ao desejada (repare que o le no nome do objeto se
d
a pelo fato de ser um line edit); outra devera ter o nome le valor2, valor 2 para
a operac
ao; e a u
ltima ter
a o nome le resultado, o resultado da operacao entre
o valor 1 e o valor 2.
Para realizar a interac
ao com o usuario, vamos adicionar tres labels `a interface. Digite label no filtrador e arraste um para o lado esquerdo de cada line edit.
Clique duas vezes em cima de cada label e mude o nome que os representara para
Valor 1:, Valor 2: e Resultado:, respectivamente. Labels nao necessariamente
precisam de um nome para a propriedade objectName, mas para questoes de
organizac
ao, mude-o para lb valor1, lb valor2 e lb resultado, respectivamente.
4

2.3

Criando os slots

A interface da nossa calculadora esta quase pronta. Agora, para questoes de

interac
ao com o c
odigo fonte do programa, precisaremos criar slots para cada
bot
ao que representa uma determinada operacao realizada pela calculadora.
Criar um slot significa, basicamente, criar um metodo para ser implementado
no c
odigo fonte. Pressione F4 no seu teclado. Voce pode perceber que, agora, ao
passar o mouse pelos elementos da interface, uma linha vermelha os contorna.
Sendo assim, clique em cima do botao da soma, segure o clique e arraste-o ate
uma parte vazia da interface. Uma nova janela sera aberta.

No lado direito desta, clique em Edit.... Aparecerao os slots e signals

existentes.

Na parte dos slots, clique no botao que possui o sinal +. Digite somar()
e de enter. Clique em OK. Voltara para a janela anterior.

Basta, ent
ao, voce, no lado esquerdo, clicar em clicked() e no lado direito
em somar(), e dar OK.

Realize o mesmo procedimento para os outros tres botoes, mas, claro, criando
os slots que representar
ao cada um deles e relacionando-os adequadamente.

OBS: Em quest
oes de necessidade/curiosidade, para voltar `a edicao da interface em si, basta pressionar F3.
Pronto! A interface no qt4-designer esta criada e possui o nome Calculadora.ui.

O c
odigo fonte

V
a ao terminal. Nele, esteja no diretorio onde esta contido o arquivo que acabamos de criar e execute o comando: pyuic4 Calculadora.ui -o ui Calculadora.py.
Este comando passa todo o c
odigo da interface que esta na linguagem xml, no

arquivo Calculadora.ui, para a linguagem de programacao python, no arquivo

ui Calculadora.py.
Conte
udo do arquivo ui Calculadora.py:
# -*- coding: utf-8 -*# Form implementation generated from reading ui file Calculadora.ui
#
# Created: Mon Aug 1 12:08:44 2011
# by: PyQt4 UI code generator 4.8.3
#
# WARNING! All changes made in this file will be lost!
from PyQt4 import QtCore, QtGui
try:
fromUtf8 = QtCore.QString.fromUtf8
except AttributeError:
fromUtf8 = lambda s: s
class Ui Calculadora(object):
def setupUi(self, Calculadora):
Calculadora.setObjectName( fromUtf8(Calculadora))
Calculadora.resize(400, 300)
self.pb soma = QtGui.QPushButton(Calculadora)
self.pb soma.setGeometry(QtCore.QRect(250, 60, 94, 24))
self.pb soma.setObjectName( fromUtf8(pb soma))
self.pb divisao = QtGui.QPushButton(Calculadora)
self.pb divisao.setGeometry(QtCore.QRect(250, 210, 94, 24))
self.pb divisao.setObjectName( fromUtf8(pb divisao))
self.pb multiplicacao = QtGui.QPushButton(Calculadora)
self.pb multiplicacao.setGeometry(QtCore.QRect(250,160,94,24))
self.pb multiplicacao.setObjectName( fromUtf8(pb multiplicacao))
self.pb subtracao = QtGui.QPushButton(Calculadora)
self.pb subtracao.setGeometry(QtCore.QRect(250, 110, 94, 24))
self.pb subtracao.setObjectName( fromUtf8(pb subtracao))
self.le valor1 = QtGui.QLineEdit(Calculadora)
self.le valor1.setGeometry(QtCore.QRect(70, 60, 113, 23))
self.le valor1.setObjectName( fromUtf8(le valor1))
self.le valor2 = QtGui.QLineEdit(Calculadora)
self.le valor2.setGeometry(QtCore.QRect(70, 110, 113, 23))
self.le valor2.setObjectName( fromUtf8(le valor2))
self.le resultado = QtGui.QLineEdit(Calculadora)
self.le resultado.setGeometry(QtCore.QRect(70, 180, 113, 23))
self.le resultado.setObjectName( fromUtf8(le resultado))
self.lb valor1 = QtGui.QLabel(Calculadora)
self.lb valor1.setGeometry(QtCore.QRect(10, 60, 61, 21))
self.lb valor1.setObjectName( fromUtf8(lb valor1))
self.lb valor2 = QtGui.QLabel(Calculadora)
self.lb valor2.setGeometry(QtCore.QRect(10, 110, 56, 21))
8

self.lb
self.lb
self.lb
self.lb

valor2.setObjectName( fromUtf8(lb valor2))

resultado = QtGui.QLabel(Calculadora)
resultado.setGeometry(QtCore.QRect(10, 180, 71, 21))
resultado.setObjectName( fromUtf8(lb resultado))

self.retranslateUi(Calculadora)
QtCore.QObject.connect(self.pb soma, QtCore.SIGNAL( fromUtf8(clicked())),
Calculadora.somar)
QtCore.QObject.connect(self.pb subtracao, QtCore.SIGNAL( fromUtf8(clicked())),
Calculadora.subtrair)
QtCore.QObject.connect(self.pb multiplicacao, QtCore.SIGNAL( fromUtf8(clicked()))
Calculadora.multiplicar)
QtCore.QObject.connect(self.pb divisao, QtCore.SIGNAL( fromUtf8(clicked())),
Calculadora.dividir)
QtCore.QMetaObject.connectSlotsByName(Calculadora)
def retranslateUi(self, Calculadora):
Calculadora.setWindowTitle(QtGui.QApplication.translate(Calculadora,
Calculadora, None, QtGui.QApplication.UnicodeUTF8))
self.pb soma.setText(QtGui.QApplication.translate(Calculadora,
+, None, QtGui.QApplication.UnicodeUTF8))
self.pb divisao.setText(QtGui.QApplication.translate(Calculadora,
/, None, QtGui.QApplication.UnicodeUTF8))
self.pb multiplicacao.setText(QtGui.QApplication.translate(Calculadora,
*, None, QtGui.QApplication.UnicodeUTF8))
self.pb subtracao.setText(QtGui.QApplication.translate(Calculadora,
-, None, QtGui.QApplication.UnicodeUTF8))
self.lb valor1.setText(QtGui.QApplication.translate(Calculadora,
Valor 1:, None, QtGui.QApplication.UnicodeUTF8))
self.lb valor2.setText(QtGui.QApplication.translate(Calculadora,
Valor 2:, None, QtGui.QApplication.UnicodeUTF8))
self.lb resultado.setText(QtGui.QApplication.translate(Calculadora,
Resultado:, None, QtGui.QApplication.UnicodeUTF8))
Agora veremos o conte
udo do arquivo que sera o executavel para a aplicacao.
Este arquivo, no nosso caso, sera chamado de Calculadora.py e devera ser criado
de forma avulsa.
1 # -*- coding: utf-8 -*2
3 from PyQt4 import QtCore, QtGui
4 import sys
5
6 from ui Calculadora import *
7
8 class Calculadora(QtGui.QMainWindow,QtGui.QDialog):
9
def init (self, parent=None):
10
QtGui.QWidget. init (self, parent)
11
self.ui = Ui Calculadora()
12
self.ui.setupUi(self )
9

13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38if
39
40
41
42

def somar(self ):
resultado = int(self.ui.le valor1.text()) + int(self.ui.le valor2.text())
self.ui.le resultado.setText(str(resultado))
self.ui.le valor1.clear()
self.ui.le valor2.clear()
def subtrair(self ):
resultado = int(self.ui.le valor1.text()) - int(self.ui.le valor2.text())
self.ui.le resultado.setText(str(resultado))
self.ui.le valor1.clear()
self.ui.le valor2.clear()
def multiplicar(self ):
resultado = int(self.ui.le valor1.text()) * int(self.ui.le valor2.text())
self.ui.le resultado.setText(str(resultado))
self.ui.le valor1.clear()
self.ui.le valor2.clear()
def dividir(self ):
resultado = int(self.ui.le valor1.text()) / int(self.ui.le valor2.text())
self.ui.le resultado.setText(str(resultado))
self.ui.le valor1.clear()
self.ui.le valor2.clear()
name == main :
app = QtGui.QApplication(sys.argv)
window = Calculadora()
window.show()
sys.exit(app.exec ())

Seguem algumas explicac

oes mais relevantes sobre o codigo principal:
1. Na linha 3, s
ao adicionados dois modulos do PyQt4 (QtCore e QtGui), necess
arios para trabalhar com qualquer aplicacao implementada em python
com QT.
2. Na linha 4, e importado outro modulo (sys) essencial para qualquer aplicacao
tambem.
3. Na linha 6, ocorre outra importacao. Esta diz respeito ao arquivo .py
que possui o c
odigo da interface. O asterisco (*) explicita para o interpretador que ser
ao importadas todas as classes e metodos do arquivo
ui Calculadora.py. Repare que nao e necessario colocar o .py no final do
nome do arquivo, neste caso.
4. Ap
os os imports, deve sempre ser criado uma classe com um nome de
sua preferencia. Mas n
ao esqueca que e importante que a classe tenha
um nome adequado ao assunto que ela trata no codigo principal. Por
isso, damos o nome Calculadora. Esta classe sera responsavel mais tarde

10

por exibir a interface do programa com todos os elementos para que estes
possam ser utilizados pelo usuario.
5. A linha 9 possui a declaracao do construtor da classe Calculadora. Neste
construtor, um objeto chamado ui (linha 11) e criado instanciando a classe
da interface, Ui Calculadora que esta presente no arquivo ui Calculadora.py.
Dessa forma o objeto ui agora possui o metodo setupUi, que e executado
(linha 12). Tal execuc
ao cria a janela principal da interface e todos os elementos da mesma. Ou seja, a classe Calculadora agora possui um atributo
o qual e um objeto da classe Ui Calculadora, que representa a interface do
programa. Isto quer dizer que a interface agora tambem pertence `a classe
Calculadora.
6. Na linha 14, comecam a ser declarados os metodos para as funcionalidades
dos bot
oes criados. O metodo somar() representa o slot com o mesmo
nome criado no qt4-designer e que esta relacionado ao botao de nome
pb soma. Este metodo soma os valores que estao nas duas linhas de texto
(line edit), de nomes le valor1 e le valor2, e passa o resultado para a
vari
avel resultado (linha 15). Perceba que o le valor1 e o le valor2 sao
atributos do objeto ui (assim como o le resultado) e que a funcao para se
obter o que est
a escrito em um line edit e text().
7. Na linha 16 e mudado o conte
udo do line edit le resultado atraves da
func
ao setText(), que recebe o resultado da soma anterior como parametro.
O conte
udo da vari
avel resultado estara agora neste. As funcoes int()
(converte um valor do tipo string ou float, por exemplo, para um valor
do tipo int) e str() (converte um valor do tipo int ou float, por exemplo,
para um valor do tipo string) sao utilizadas porque tudo o que estiver em
um line edit ser
a unificado em uma string. E para que se possa realizar
operac
oes com o valor passado, ele devera ser um valor numerico (em nossa
aplicac
ao, as operac
oes sao realizadas apenas com inteiros).
8. Nas linhas 17 e 18, a funcao clear limpa o conte
udo de le valor1 e le valor2.
Perceba, ent
ao, que todo esse processo ocorrera quando houver os dois
valores passados em le valor1 e le valor2, e o botao pb soma for clicado.
9. O mesmo processo ocorre quando um dos outros tres botoes for clicado.
A u
nica diferenca entre eles e o operador, que muda de acordo com a
operac
ao e o metodo que a representa.
10. Na linha 38, e declarado o metodo main, o qual e o metodo procurado e
executado pelo interpretador quando o arquivo e executado. A princpio
voce n
ao precisa se preocupar com este metodo, pois ele tera quase sempre
a mesma estrutura para aplicacoes mais simples. As linhas 40 e 41 sao
as mais relevantes, onde um objeto da classe Calculadora, que representa
agora toda a aplicac
ao, e criado; e o seu metodo show(), o qual tem a
func
ao de mostrar a janela da aplicacao na tela do computador, e chamado.
Est
a tudo implementado! Para executar a sua calculadora, basta ir para
o terminal, estar no diret
orio onde esta o arquivo Calculadora.py e executar o
seguinte comando: python Calculadora.py

11

 importante que todos os arquivos criados para o aplicativo estejam

OBS1: E
no mesmo diret
orio.
OBS2: Note que existe um parametro passado em todos os metodos criados na classe Calculadora. Isto ocorre porque, no python, um dos parametros
passados para qualquer metodo executado e o proprio objeto o qual possui este
metodo. N
ao entendeu? Ent
ao veja esta rapida e facil explicacao contida neste
blog.

Considera
co
es finais

O conte
udo deste tutorial visou introduzir a programacao em python com
QT. Caso voce, leitor, desejar se aprofundar um pouco mais ou conhecer novos
recursos do PyQT4, existe um tutorial bastante didatico e muito bem explicado
neste link.

12