En esta segunda parte se utilizará el IDE QT Creator para agilizar la creación de las interfaces de usuario.
Creación de una calculadora con las operaciones básicas
Lo primero es ejecutar el Qt Creator ya sea en la línea de comando, desde el menú o desde donde se deje!
Se inicia un nuevo proyecto «Qt C++ Proyect» y luego se selecciona «Qt Gui Aplicattion»
Se continua siguiendo el asistente para crear el proyecto, se iniciará con un MainWindow vacío que es necesario llenar con los objetos que muestra a continuación:
Se necesita modificar los textos de cada componente y el nombre de cada uno de los componentes para poder hacer referencia a ellos desde python.
Y ahora si la hora de la verdad ¿cómo se va a usar este diseño desde python? y es importante mencionar que el Qt Creator no cuenta con alguna opción para crear el código python necesario.
Para poder usar el diseño creado por Qt Creator, se busca el archivo mainwindow.ui dentro de la carpeta del proyecto y se convierte a python como se muestra
$ pyuic4 mainwindow.ui -o mainwindow.py
El archivo mainwindow.py contiene todo el código necesario para mostrar todo el diseño creado con Qt Creator. A continuación se observa un segmento del código
# -*- coding: utf-8 -*- # Form implementation generated from reading ui file 'mainwindow.ui' # # Created by: PyQt4 UI code generator 4.8.2 # # 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_MainWindow(object): def setupUi(self, MainWindow): MainWindow.setObjectName(_fromUtf8("MainWindow")) MainWindow.resize(400, 300) self.centralWidget = QtGui.QWidget(MainWindow) self.centralWidget.setObjectName(_fromUtf8("centralWidget")) self.label1 = QtGui.QLabel(self.centralWidget) self.label1.setGeometry(QtCore.QRect(20, 20, 60, 16)) self.label1.setObjectName(_fromUtf8("label1")) ...
Para poder hacer uso de la clase Ui_MainWindow contenida en e archivo mainwindow.py, se crea el archivo calculadora.py y lo primero es importar la mencionada clase
from mainwindow import Ui_MainWindow
ahora se crea la clase Principal que será la encargada de usar la clase UI_MainWindow
# Se hereda de la clase QtGui.QMainWindow class Principal(QtGui.QMainWindow): # Se define el constructor de la clase __init__ def __init__(self): # Se llama al constructor de la clase padre QtGui.QMainWindow.__init__(self) # Se crea la instancia de Ui_MainWindow self.ventana = Ui_MainWindow() self.ventana.setupUi(self) # Se conectan las señales con los slots self.connect(self.ventana.bSalir, QtCore.SIGNAL('clicked()'), QtCore.SLOT('close()')) self.connect(self.ventana.bSumar,QtCore.SIGNAL('clicked()'), self.sumar) self.connect(self.ventana.bRestar,QtCore.SIGNAL('clicked()'), self.restar) self.connect(self.ventana.bMultiplicar,QtCore.SIGNAL('clicked()'), self.multiplicar) self.connect(self.ventana.bDividir,QtCore.SIGNAL('clicked()'), self.dividir)
se observa como en el constructor se conectan todas las señales con los slots correspondientes.
Se crea el código de cada uno de los slots
def sumar(self): self.ventana.edit3.setText(str(float(self.ventana.edit1.text()) + float(self.ventana.edit2.text()))) def restar(self): self.ventana.edit3.setText(str(float(self.ventana.edit1.text()) - float(self.ventana.edit2.text()))) ...
Y el resultado obtenido es como el siguiente:
El resultado obtenido es impresionante y todo lo he realizado en unos 45min, pero vaya que ya conociendo la herramienta y el lenguaje, esto lo habría hecho en unos 15 min o menos 😉
Estaba pensando como colocar un Fin Pythonesco, pero resulta que en Python no existe una instrucción de Fin, así que
excelentes tutoriales de pyqt que estas creando.
te hago una recomentacion; no es necesario usar el Qt Creator y crear un nuevo proyecto de qt. Al instalar el Qt-Sdk este debio de instalarte varios programas Qt Creator, Qt Desinger y Qt Linguist.
Abre el Qt Desinger y de ai puedes disenar la interfaz grafica sin la necesidad de hacer todo eso k hiciste.
te agrege a mo blog por si te interesa. comotinua asi con el tuto XXDDD
Hola Lycus, gracias x los ánimos y sugerencias que me has dado, he intentado encontrar el susodicho Qt Designer y no lo encontré, por esa razón he usado el Qt Creator, te comento que estoy usando OpenSuse 11.3, pero por tu comentario volveré a buscar el Qt Designer.
A también thx por agregarme a tu blog, ya lo estuve revisando tienes muy buen material, creo que tendré que agregar un blogroll también 😉
jajajajajajajaja
eso si esta raro. como lo instalaste a travez de los repositorios o con los binarios?
si es con los repo, busca el programa con el gestor de paquetes.
el programa debe de aparecerte en la categoria programacion, o busca tambien en el editor de menus. XD
Lo he instalado usando los repos y siguiendo tus sugerencias mas unas dosis de shelleadas 😀 ya he encontrado el Qt Designer, para ejecutarlo desde la línea de comando es con «designer» y el paquete que lo contiene es «libqt4-devel-4.7.1-150.2.i586» y es totalmente independiente del Qt Creator, todo esto es para una distro OpenSuse 11.3, thx man!
Buenas, este ejemplo lo hice ayer mismo (por la noche) xDD Pero lo vi de un pdf que encontré googleando…
También probaré Qt Designer a ver qué tal es 🙂
Saludos y seigue con los tutos!!!
Estoy seguro que el usar el QT Designer te va a agradar, muy bueno tu blog por cierto y a mi gusto personal me está resultando mucho mejor PyQt4 sobre todo para el desarrollo rápido!
Saludos
hey gracias! pásate cuando quieras 😉
por cierto, el que estaba utilizando era Qt Designer xD y ahora acabo de instalar Qt Creator y son parecidos, salvo que este ultimo permite editar el código fuente, debuggear, y muchas mas cosas; lo veo mas completo 🙂
hmmm segui tu tutorial usando python 2.6 y qt4, hay algunos detalles que faltan checar por ahi
por ejemplo, al principio se debe crear una instancia de QApplication
app=QtGui.QApplication(sys.argv)
Y para mostrar la ventana..
self.show()
sys.exit(self.app.exec_()
Con la ultima linea se previene que la aplicacion salga inmediatamente al mostrar la interfaz
Hola Rafuru
Gracias por la observación… eso de la última línea no lo sabía y creo faltó un cerrar un paréntesis!
Un gusto compartir esfuerzos!
Salu2+
Me encanta el final de la entrada xD
Sólo para pythoneros 😉
Gracias y muy interesante tu blog también 😉
Salu2+
saludos ya realice el ejemplo pero al ejecutarlo me sale el error: Traceback (most recent call last):
File «C:\cabs\gpy\calculadora\calculadora.py», line 4, in
from mainwindow import Ui_MainWindow
ImportError: No module named mainwindow
«Como sino que no existiera»
Y he convertido el diseño de QtDesigner al archivo de ptyhon
C:\cabs\gpy\conversor>pyuic4 mainwindow.ui -o mainwindow.py ya revise y estan los dos archivos: mainwindow.py y mainwindow.ui
Tambien instale: PyQt4-4.11.3-gpl-Py2.7-Qt4.8.6-x32.exe
Este es el codigo:
# -*- coding: utf-8 -*-
import sys
from PyQt4 import QtCore, QtGui
from mainwindow import Ui_MainWindow
class Principal(QtGui.QMainWindow):
def __init__(self):
QtGui.QMainWindow.__init__(self)
self.setWindowTitle(‘Usando un MainWindow’)
self.ventana = Ui_MainWindow()
self.ventana.setupUi(self)
self.connect(self.ventana.bSalir, QtCore.SIGNAL(‘clicked()’), QtCore.SLOT(‘close()’))
self.connect(self.ventana.bSumar,QtCore.SIGNAL(‘clicked()’), self.sumar)
self.connect(self.ventana.bRestar,QtCore.SIGNAL(‘clicked()’), self.restar)
self.connect(self.ventana.bMultiplicar,QtCore.SIGNAL(‘clicked()’), self.multiplicar)
def sumar(self):
self.ventana.edit3.setText(str(float(self.ventana.edit1.text()) + float(self.ventana.edit2.text())))
def restar(self):
self.ventana.edit3.setText(str(float(self.ventana.edit1.text()) – float(self.ventana.edit2.text())))
if __name__ == «__main__»:
app = QtGui.QApplication(sys.argv)
inicia = Principal()
inicia.show()
sys.exit(app.exec_())
Falta algun parametro, alguna sugerencia, gracias