UniversidadeFederaldoPar aCentrodeTecnologiadaInformac aoeComunica caoGrupodeTrabalhoSETTutorial PyQT416deAgostode20111Sumario1 Introducao 32 Criandoainterfacedaaplicacao 32.1 Ajanelaprincipal . . . . . . . . . . . . . . . . . . . . . . . . . . . 32.2 Adicionandooselementosnecessarios . . . . . . . . . . . . . . . . 42.3 Criandoosslots. . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Ocodigofonte 74 Consideracoesnais 1221 IntroducaoEstetutorial temporobjetivoexplicaralgunsconceitosbasicos, praticoseteoricos,deprograma caoemPythoncomQT.Para criar uma aplicacao em PyQT (aqui iremos utilizar a versao 4 do QT),enecessarioinstalaralgunspacotes. Paraisso,abraoseuterminaleexecuteoseguintecomando:sudoapt-getinstallpyqt4-dev-toolsqt4-designerCom todos os pacotes instalados, podemos comecar a pensar na nossa aplica cao.Nestetutorial, seraimplementadaumacalculadorabemsimples, aqual teraquatrofuncionalidadesbasicas: somar,subtrair,multiplicaredividir.2 Criandoainterfacedaaplicacao2.1 AjanelaprincipalPressioneAlt+F2edigitedesigner-qt4.Comoqt4-designer aberto, selecioneaop caoWidget ecliqueemCreate.Seracriadaumawidget,ajanelaondecaraainterfacedacalculadora. Antesdetudo,vamosmudaronomequeseraatribudoaoobjetoquerepresentaraa3interface no codigo fonte. Ao lado direito do qt4-designer existe uma janela comaspropriedades(eseusrespectivosvalores)dainterface. Cliqueemqualquerpartevaziadainterfaceenas propriedades objectName ewindowTitle digiteCalculadora. SalveoarquivocomonomeCalculadora.ui nodiretoriodesuapreferencia. Suajaneladever aestardestejeito:2.2 AdicionandooselementosnecessariosVamos adicionar quatro botoes `a nossa janela. No canto superior esquerdo doqt4-designer, noWidget Box, digitepushbuttonnoltrador. Cliqueearrastequatropushbuttons paraainterface. Vaposicionandoos elementos dasuacalculadoradaformaquevoceacharmaiscoerente. Cliqueduasvezesemcimado primeiro push button e atribua para o botao o smbolo de adi cao (+). AgoracliqueumaveznomesmoenapropriedadeobjectName digitepbsoma. Estenome signifca que oobjetoe umpushbutton(pb) e seraresponsavel pelafuncionalidadedasomaentredoisvalores. Realizeomesmoprocedimentoparaos outros tres botoes, mas, claro, atribuindo os valores necessarios para cada umdeles. Naoesque caquedeverahaverumbotaoquerealizarasoma(+); outroparasubtracao(-);umparamultiplicacao(*);emaisumparadivisao(/).Apos a cria cao dos botoes, vamos adicionar tres lineedit. No ltrador digiteestenomeearrastetrescaixinhasdestetipoparaainterface. CliqueumavezemcadaumadelasparamudarovalordesuaspropriedadesobjectName. Umadevera ter o nome levalor1,que representara o primeiro valor que sera passadoparaarealiza caodaopera caodesejada(reparequeolenonomedoobjetoseda pelo fato de ser um line edit); outra devera ter o nome levalor2, valor 2 paraaoperacao; ea ultimateraonomeleresultado, oresultadodaoperacaoentreovalor1eovalor2.Pararealizaraintera caocomousuario,vamosadicionartreslabels`ainter-face. Digite labelno ltrador 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 paraValor1:, Valor2: eResultado:, respectivamente. LabelsnaonecessariamenteprecisamdeumnomeparaapropriedadeobjectName, masparaquestoesdeorganizacao,mude-oparalbvalor1,lbvalor2elbresultado,respectivamente.42.3 CriandoosslotsA interface da nossa calculadora esta quase pronta. Agora, para questoes deinteracaocomocodigofontedoprograma, precisaremoscriarslotsparacadabotaoque representaumadeterminadaopera caorealizadapelacalculadora.Criarumslotsignica, basicamente, criarummetodoparaserimplementadono codigo fonte. Pressione F4 no seu teclado. Voce pode perceber que, agora, aopassaromousepeloselementosdainterface, umalinhavermelhaoscontorna.Sendoassim,cliqueemcimadobotaodasoma,segureocliqueearraste-oateumapartevaziadainterface. Umanovajanelaseraaberta.5Noladodireitodesta, clique emEdit.... Apareceraoos slots e signalsexistentes.Napartedosslots, cliquenobotaoquepossuiosinal+. Digitesomar()edeenter. CliqueemOK.Voltaraparaajanelaanterior.6Basta, entao, voce, noladoesquerdo, clicaremclicked() enoladodireitoemsomar(),edarOK.Realize o mesmo procedimento para os outros tres botoes, mas, claro, criandoosslotsquerepresentaraocadaumdeleserelacionando-osadequadamente.OBS: Emquestoesdenecessidade/curiosidade, paravoltar`aedicaodain-terfaceemsi,bastapressionarF3.Pronto! Ainterfacenoqt4-designerestacriadaepossui onomeCalcula-dora.ui.3 OcodigofonteVa ao terminal. Nele, esteja no diretorio onde esta contido o arquivo que aca-bamos de criar e execute o comando: pyuic4 Calculadora.ui -o ui Calculadora.py.Estecomandopassatodoocodigodainterfacequeestanalinguagemxml, no7arquivoCalculadora.ui, paraalinguagemdeprograma caopython, noarquivouiCalculadora.py.Conte udodoarquivouiCalculadora.py:#-*-coding: utf-8-*-#Formimplementationgeneratedfromreadingui leCalcula-dora.ui##Created: MonAug112:08:442011#by: PyQt4UIcodegenerator4.8.3##WARNING!Allchangesmadeinthislewillbelost!fromPyQt4importQtCore,QtGuitry:fromUtf8=QtCore.QString.fromUtf8exceptAttributeError:fromUtf8=lambdas: sclassUi Calculadora(object):defsetupUi(self,Calculadora):Calculadora.setObjectName(fromUtf8(Calculadora))Calculadora.resize(400,300)self.pbsoma=QtGui.QPushButton(Calculadora)self.pbsoma.setGeometry(QtCore.QRect(250,60,94,24))self.pbsoma.setObjectName(fromUtf8(pbsoma))self.pbdivisao=QtGui.QPushButton(Calculadora)self.pbdivisao.setGeometry(QtCore.QRect(250,210,94,24))self.pbdivisao.setObjectName(fromUtf8(pbdivisao))self.pbmultiplicacao=QtGui.QPushButton(Calculadora)self.pbmultiplicacao.setGeometry(QtCore.QRect(250,160,94,24))self.pbmultiplicacao.setObjectName(fromUtf8(pbmultiplicacao))self.pbsubtracao=QtGui.QPushButton(Calculadora)self.pbsubtracao.setGeometry(QtCore.QRect(250, 110, 94, 24))self.pbsubtracao.setObjectName(fromUtf8(pbsubtracao))self.levalor1=QtGui.QLineEdit(Calculadora)self.levalor1.setGeometry(QtCore.QRect(70,60,113,23))self.levalor1.setObjectName(fromUtf8(levalor1))self.levalor2=QtGui.QLineEdit(Calculadora)self.levalor2.setGeometry(QtCore.QRect(70,110,113,23))self.levalor2.setObjectName(fromUtf8(levalor2))self.leresultado=QtGui.QLineEdit(Calculadora)self.leresultado.setGeometry(QtCore.QRect(70,180,113,23))self.leresultado.setObjectName(fromUtf8(leresultado))self.lbvalor1=QtGui.QLabel(Calculadora)self.lbvalor1.setGeometry(QtCore.QRect(10,60,61,21))self.lbvalor1.setObjectName(fromUtf8(lbvalor1))self.lbvalor2=QtGui.QLabel(Calculadora)self.lbvalor2.setGeometry(QtCore.QRect(10,110,56,21))8self.lbvalor2.setObjectName(fromUtf8(lbvalor2))self.lbresultado=QtGui.QLabel(Calculadora)self.lbresultado.setGeometry(QtCore.QRect(10,180,71,21))self.lbresultado.setObjectName(fromUtf8(lbresultado))self.retranslateUi(Calculadora)QtCore.QObject.connect(self.pbsoma, QtCore.SIGNAL(fromUtf8(clicked())),Calculadora.somar)QtCore.QObject.connect(self.pbsubtracao, QtCore.SIGNAL(fromUtf8(clicked())),Calculadora.subtrair)QtCore.QObject.connect(self.pbmultiplicacao, QtCore.SIGNAL(fromUtf8(clicked())),Calculadora.multiplicar)QtCore.QObject.connect(self.pbdivisao, QtCore.SIGNAL(fromUtf8(clicked())),Calculadora.dividir)QtCore.QMetaObject.connectSlotsByName(Calculadora)defretranslateUi(self,Calculadora):Calculadora.setWindowTitle(QtGui.QApplication.translate(Calculadora,Calculadora,None,QtGui.QApplication.UnicodeUTF8))self.pbsoma.setText(QtGui.QApplication.translate(Calculadora,+,None,QtGui.QApplication.UnicodeUTF8))self.pbdivisao.setText(QtGui.QApplication.translate(Calculadora,/,None,QtGui.QApplication.UnicodeUTF8))self.pbmultiplicacao.setText(QtGui.QApplication.translate(Calculadora,*,None,QtGui.QApplication.UnicodeUTF8))self.pbsubtracao.setText(QtGui.QApplication.translate(Calculadora,-,None,QtGui.QApplication.UnicodeUTF8))self.lbvalor1.setText(QtGui.QApplication.translate(Calculadora,Valor1:,None,QtGui.QApplication.UnicodeUTF8))self.lbvalor2.setText(QtGui.QApplication.translate(Calculadora,Valor2:,None,QtGui.QApplication.UnicodeUTF8))self.lbresultado.setText(QtGui.QApplication.translate(Calculadora,Resultado:,None,QtGui.QApplication.UnicodeUTF8))Agora veremos o conte udo do arquivo que sera o executavel para a aplica cao.Este arquivo, no nosso caso, sera chamado de Calculadora.pye devera ser criadodeformaavulsa.1 #-*-coding: utf-8-*-23 fromPyQt4importQtCore,QtGui4 importsys56 fromui Calculadoraimport*78 classCalculadora(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 )91314 defsomar(self ):15 resultado = int(self.ui.levalor1.text()) + int(self.ui.levalor2.text())16 self.ui.leresultado.setText(str(resultado))17 self.ui.levalor1.clear()18 self.ui.levalor2.clear()1920 defsubtrair(self ):21 resultado = int(self.ui.levalor1.text()) - int(self.ui.levalor2.text())22 self.ui.leresultado.setText(str(resultado))23 self.ui.levalor1.clear()24 self.ui.levalor2.clear()2526 defmultiplicar(self ):27 resultado = int(self.ui.levalor1.text()) * int(self.ui.levalor2.text())28 self.ui.leresultado.setText(str(resultado))29 self.ui.levalor1.clear()30 self.ui.levalor2.clear()3132 defdividir(self ):33 resultado = int(self.ui.levalor1.text()) / int(self.ui.levalor2.text())34 self.ui.leresultado.setText(str(resultado))35 self.ui.levalor1.clear()36 self.ui.levalor2.clear()3738if name == main :39 app=QtGui.QApplication(sys.argv)40 window=Calculadora()41 window.show()42 sys.exit(app.exec())Seguemalgumasexplica coesmaisrelevantessobreocodigoprincipal:1. Na linha 3, sao adicionados dois modulos do PyQt4 (QtCore e QtGui), ne-cessarios para trabalhar com qualquer aplicacao implementada em pythoncomQT.2. Na linha 4, e importado outro modulo (sys) essencial para qualquer aplicacaotambem.3. Nalinha6, ocorreoutraimporta cao. Estadizrespeitoaoarquivo.pyque possui ocodigodainterface. Oasterisco(*) explicitaparaoin-terpretadorqueseraoimportadastodasasclassesemetodosdoarquivouiCalculadora.py. Reparequenaoenecessariocolocaro.pynonal donomedoarquivo,nestecaso.4. Apososimports, devesempresercriadoumaclassecomumnomedesuapreferencia. Mas naoesquecaqueeimportantequeaclassetenhaumnome adequadoaoassuntoque elatratanocodigoprincipal. Porisso,damosonomeCalculadora. Estaclasseseraresponsavelmaistarde10porexibirainterfacedoprogramacomtodososelementosparaqueestespossamserutilizadospelousuario.5. Alinha9possuiadeclaracaodoconstrutordaclasseCalculadora. Nesteconstrutor, um objeto chamado ui(linha 11) e criado instanciando a classeda interface, UiCalculadora que esta presente no arquivo uiCalculadora.py.DessaformaoobjetouiagorapossuiometodosetupUi,queeexecutado(linha 12). Tal execucao cria a janela principal da interface e todos os ele-mentos da mesma. Ou seja, a classe Calculadora agora possui um atributoo qual e um objeto da classe UiCalculadora, que representa a interface doprograma. Isto quer dizer que a interface agora tambem pertence `a classeCalculadora.6. Na linha 14, comecam a ser declarados os metodos para as funcionalidadesdosbotoescriados. Ometodosomar() representaoslot comomesmonome criadonoqt4-designer e que estarelacionadoaobotaode nomepbsoma. Este metodo soma os valores que estao nas duas linhas de texto(line edit), de nomes levalor1 e levalor2, e passaoresultadoparaavariavel resultado(linha15). Percebaqueolevalor1 eolevalor2 saoatributosdoobjetoui (assimcomooleresultado)equeafuncaoparaseobteroqueestaescritoemumlineedit etext().7. Nalinha16e mudadooconte udodoline edit leresultado atraves dafun cao setText(), que recebe o resultado da soma anterior como parametro.Oconte udodavariavel resultado estaraagoraneste. As funcoes int()(converteumvalordotipostringouoat, porexemplo, paraumvalordotipoint)estr()(converteumvalordotipointouoat,porexemplo,paraumvalordotipostring)saoutilizadasporquetudooqueestiveremumlineeditseraunicadoemumastring. Eparaquesepossarealizaropera coes com o valor passado, ele devera ser um valor numerico (em nossaaplicacao,asoperacoessaorealizadasapenascominteiros).8. Nas linhas 17 e 18, a fun cao clearlimpa o conte udo de levalor1e levalor2.Perceba, entao, quetodoesseprocessoocorreraquandohouver os doisvalorespassadosemlevalor1elevalor2,eobotaopbsomaforclicado.9. Omesmoprocessoocorrequandoumdosoutrostresbotoesforclicado.A unicadiferencaentre eles e ooperador, que mudade acordocomaopera caoeometodoquearepresenta.10. Nalinha38,edeclaradoometodomain, oqualeometodoprocuradoeexecutadopelointerpretadorquandooarquivoeexecutado. Aprincpiovoce nao precisa se preocupar com este metodo, pois ele tera quase sempreamesmaestruturaparaaplicacoesmaissimples. Aslinhas40e41saoasmaisrelevantes,ondeumobjetodaclasseCalculadora,querepresentaagoratodaaaplicacao, ecriado; eoseumetodoshow(), oqual temafun cao de mostrar a janela da aplicacao na tela do computador, e chamado.Estatudoimplementado! Paraexecutar asuacalculadora, bastair paraoterminal, estarnodiretorioondeestaoarquivoCalculadora.pyeexecutaroseguintecomando: pythonCalculadora.py11OBS1:E importante que todos os arquivos criados para o aplicativo estejamnomesmodiretorio.OBS2: Notequeexisteumparametropassadoemtodososmetodoscria-dosnaclasseCalculadora. Istoocorreporque, nopython, umdosparametrospassadosparaqualquermetodoexecutado eoproprioobjetooqualpossuiestemetodo. Naoentendeu?Entaovejaestarapidaefacilexplicacaocontidanesteblog.4 Considerac oesnaisOconte udodestetutorial visouintroduziraprogramacaoempythoncomQT.Casovoce,leitor,desejarseaprofundarumpoucomaisouconhecernovosrecursos do PyQT4, existe um tutorial bastante didatico e muito bem explicadonestelink.12