Universidade Federal do Pará Centro de Tecnologia da Informação e Comunicação Grupo de Trabalho SET. Tutorial PyQT4

Transcrição

1 Universidade Federal do Pará Centro de Tecnologia da Informação e Comunicação Grupo de Trabalho SET Tutorial PyQT4 16 de Agosto de

2 Sumário 1 Introdução 3 2 Criando a interface da aplicação A janela principal Adicionando os elementos necessários Criando os slots O código fonte 7 4 Considerações finais 12 2

3 1 Introdução Este tutorial tem por objetivo explicar alguns conceitos básicos, práticos e teóricos, de programação em Python com QT. Para criar uma aplicação em PyQT (aqui iremos utilizar a versão 4 do QT), é necessário 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 começar a pensar na nossa aplicação. Neste tutorial, será implementada uma calculadora bem simples, a qual terá quatro funcionalidades básicas: somar, subtrair, multiplicar e dividir. 2 Criando a interface da aplicação 2.1 A janela principal Pressione Alt + F2 e digite designer-qt4. Com o qt4-designer aberto, selecione a opção Widget e clique em Create. Será criada uma widget, a janela onde ficará a interface da calculadora. Antes de tudo, vamos mudar o nome que será atribuído ao objeto que representará a 3

4 interface no código 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 diretório de sua preferência. Sua janela deverá estar deste jeito: 2.2 Adicionando os elementos necessários Vamos adicionar quatro botões à 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. Vá posicionando os elementos da sua calculadora da forma que você achar mais coerente. Clique duas vezes em cima do primeiro push button e atribua para o botão o símbolo de adição (+). Agora clique uma vez no mesmo e na propriedade objectname digite pb soma. Este nome signifca que o objeto é um push button (pb) e será responsável pela funcionalidade da soma entre dois valores. Realize o mesmo procedimento para os outros três botões, mas, claro, atribuindo os valores necessários para cada um deles. Não esqueça que deverá haver um botão que realizará soma (+); outro para subtração (-); um para multiplicação (*); e mais um para divisão (/). Após a criação dos botões, vamos adicionar três line edit. No filtrador digite este nome e arraste três caixinhas deste tipo para a interface. Clique uma vez em cada uma delas para mudar o valor de suas propriedades objectname. Uma deverá ter o nome le valor1, que representará o primeiro valor que será passado para a realização da operação desejada (repare que o le no nome do objeto se dá pelo fato de ser um line edit); outra deverá ter o nome le valor2, valor 2 para a operação; e a última terá o nome le resultado, o resultado da operação entre o valor 1 e o valor 2. Para realizar a interação com o usuário, vamos adicionar três labels à 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 representará para Valor 1:, Valor 2: e Resultado:, respectivamente. Labels não necessariamente precisam de um nome para a propriedade objectname, mas para questões de organização, mude-o para lb valor1, lb valor2 e lb resultado, respectivamente. 4

5 2.3 Criando os slots A interface da nossa calculadora está quase pronta. Agora, para questões de interação com o código fonte do programa, precisaremos criar slots para cada botão que representa uma determinada operação realizada pela calculadora. Criar um slot significa, basicamente, criar um método para ser implementado no código fonte. Pressione F4 no seu teclado. Você pode perceber que, agora, ao passar o mouse pelos elementos da interface, uma linha vermelha os contorna. Sendo assim, clique em cima do botão da soma, segure o clique e arraste-o até uma parte vazia da interface. Uma nova janela será aberta. 5

6 No lado direito desta, clique em Edit.... existentes. Aparecerão os slots e signals Na parte dos slots, clique no botão que possui o sinal +. Digite somar() e dê enter. Clique em OK. Voltará para a janela anterior. 6

7 Basta, então, você, no lado esquerdo, clicar em clicked() e no lado direito em somar(), e dar OK. Realize o mesmo procedimento para os outros três botões, mas, claro, criando os slots que representarão cada um deles e relacionando-os adequadamente. OBS: Em questões de necessidade/curiosidade, para voltar à edição da interface em si, basta pressionar F3. Pronto! A interface no qt4-designer está criada e possui o nome Calculadora.ui. 3 O código fonte Vá ao terminal. Nele, esteja no diretório onde está contido o arquivo que acabamos de criar e execute o comando: pyuic4 Calculadora.ui -o ui Calculadora.py. Este comando passa todo o código da interface que está na linguagem xml, no 7

8 arquivo Calculadora.ui, para a linguagem de programação python, no arquivo ui Calculadora.py. Conteúdo do arquivo ui Calculadora.py: # -*- coding: utf-8 -*- # Form implementation generated from reading ui file Calculadora.ui # # Created: Mon Aug 1 12:08: # by: PyQt4 UI code generator # # 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

9 self.lb valor2.setobjectname( fromutf8( lb valor2 )) self.lb resultado = QtGui.QLabel(Calculadora) self.lb resultado.setgeometry(qtcore.qrect(10, 180, 71, 21)) self.lb 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údo do arquivo que será o executável para a aplicação. Este arquivo, no nosso caso, será chamado de Calculadora.py e deverá 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

10 13 14 def somar(self): 15 resultado = int(self.ui.le valor1.text()) + int(self.ui.le valor2.text()) 16 self.ui.le resultado.settext(str(resultado)) 17 self.ui.le valor1.clear() 18 self.ui.le valor2.clear() def subtrair(self): 21 resultado = int(self.ui.le valor1.text()) - int(self.ui.le valor2.text()) 22 self.ui.le resultado.settext(str(resultado)) 23 self.ui.le valor1.clear() 24 self.ui.le valor2.clear() def multiplicar(self): 27 resultado = int(self.ui.le valor1.text()) * int(self.ui.le valor2.text()) 28 self.ui.le resultado.settext(str(resultado)) 29 self.ui.le valor1.clear() 30 self.ui.le valor2.clear() def dividir(self): 33 resultado = int(self.ui.le valor1.text()) / int(self.ui.le valor2.text()) 34 self.ui.le resultado.settext(str(resultado)) 35 self.ui.le valor1.clear() 36 self.ui.le valor2.clear() 37 38if name == main : 39 app = QtGui.QApplication(sys.argv) 40 window = Calculadora() 41 window.show() 42 sys.exit(app.exec ()) Seguem algumas explicações mais relevantes sobre o código principal: 1. Na linha 3, são adicionados dois módulos do PyQt4 (QtCore e QtGui), necessários para trabalhar com qualquer aplicação implementada em python com QT. 2. Na linha 4, é importado outro módulo (sys) essencial para qualquer aplicação também. 3. Na linha 6, ocorre outra importação. Esta diz respeito ao arquivo.py que possui o código da interface. O asterisco (*) explicita para o interpretador que serão importadas todas as classes e métodos do arquivo ui Calculadora.py. Repare que não é necessário colocar o.py no final do nome do arquivo, neste caso. 4. Após os imports, deve sempre ser criado uma classe com um nome de sua preferência. Mas não esqueça que é importante que a classe tenha um nome adequado ao assunto que ela trata no código principal. Por isso, damos o nome Calculadora. Esta classe será responsável mais tarde 10

11 por exibir a interface do programa com todos os elementos para que estes possam ser utilizados pelo usuário. 5. A linha 9 possui a declaração do construtor da classe Calculadora. Neste construtor, um objeto chamado ui (linha 11) é criado instanciando a classe da interface, Ui Calculadora que está presente no arquivo ui Calculadora.py. Dessa forma o objeto ui agora possui o método setupui, que é executado (linha 12). Tal execução cria a janela principal da interface e todos os elementos da mesma. Ou seja, a classe Calculadora agora possui um atributo o qual é um objeto da classe Ui Calculadora, que representa a interface do programa. Isto quer dizer que a interface agora também pertence à classe Calculadora. 6. Na linha 14, começam a ser declarados os métodos para as funcionalidades dos botões criados. O método somar() representa o slot com o mesmo nome criado no qt4-designer e que está relacionado ao botão de nome pb soma. Este método soma os valores que estão nas duas linhas de texto (line edit), de nomes le valor1 e le valor2, e passa o resultado para a variável resultado (linha 15). Perceba que o le valor1 e o le valor2 são atributos do objeto ui (assim como o le resultado) e que a função para se obter o que está escrito em um line edit é text(). 7. Na linha 16 é mudado o conteúdo do line edit le resultado através da função settext(), que recebe o resultado da soma anterior como parâmetro. O conteúdo da variável resultado estará agora neste. As funções 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) são utilizadas porque tudo o que estiver em um line edit será unificado em uma string. E para que se possa realizar operações com o valor passado, ele deverá ser um valor numérico (em nossa aplicação, as operações são realizadas apenas com inteiros). 8. Nas linhas 17 e 18, a função clear limpa o conteúdo de le valor1 e le valor2. Perceba, então, que todo esse processo ocorrerá quando houver os dois valores passados em le valor1 e le valor2, e o botão pb soma for clicado. 9. O mesmo processo ocorre quando um dos outros três botões for clicado. A única diferença entre eles é o operador, que muda de acordo com a operação e o método que a representa. 10. Na linha 38, é declarado o método main, o qual é o método procurado e executado pelo interpretador quando o arquivo é executado. A princípio você não precisa se preocupar com este método, pois ele terá quase sempre a mesma estrutura para aplicações mais simples. As linhas 40 e 41 são as mais relevantes, onde um objeto da classe Calculadora, que representa agora toda a aplicação, é criado; e o seu método show(), o qual tem a função de mostrar a janela da aplicação na tela do computador, é chamado. Está tudo implementado! Para executar a sua calculadora, basta ir para o terminal, estar no diretório onde está o arquivo Calculadora.py e executar o seguinte comando: python Calculadora.py 11

12 OBS1: É importante que todos os arquivos criados para o aplicativo estejam no mesmo diretório. OBS2: Note que existe um parâmetro passado em todos os métodos criados na classe Calculadora. Isto ocorre porque, no python, um dos parâmetros passados para qualquer método executado é o próprio objeto o qual possui este método. Não entendeu? Então veja esta rápida e fácil explicação contida neste blog. 4 Considerações finais O conteúdo deste tutorial visou introduzir a programação em python com QT. Caso você, leitor, desejar se aprofundar um pouco mais ou conhecer novos recursos do PyQT4, existe um tutorial bastante didático e muito bem explicado neste link. 12