[Python3] Interfaces graficas #1 con QT4/5

  • 3 Respuestas
  • 3282 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Conectado noxonsoftwares

  • *
  • Ex-Staff
  • *****
  • Mensajes: 324
  • Actividad:
    16.67%
  • Country: 00
  • Reputación 7
  • Ayudar es Crecer, Crecer es Mejorar
  • Skype: noxonsoftwares
    • Ver Perfil
    • NOXONSOFTWARES

[Python3] Interfaces graficas #1 con QT4/5

  • en: Septiembre 25, 2017, 08:52:35 pm
En esta ocasión veremos un pequeño tutorial de python3 y QT4/5 para crear nuestras aplicaciones con interfaz gráfica. Para ello necesitaremos tener instalado la versión de python 3.X y QT-Designer en nuestro ordenador, ya sea windows o linux (pero en este caso el tutorial se realizara sobre Linux, que también puede servir para windows).

Primeros pasos:

Lo primero que haremos claro como todo buen programador (si usamos un IDE) sera abrirlo para poder codear nuestra aplicación (en este caso me encuentro usando PyCharm como IDE) o directamente desde cualquier editor de texto como puede ser notepad (en windows) o tu editor preferido en linux.




Una vez abierto el IDE creamos un nuevo proyecto con el nombre que ustedes prefieran (yo en este caso lo he llamado calculo).

Una ves hecho esto lo que haremos sera crear nuestro archivo.py (que puede llamarse calculo.py)





Diseñando nuestra ventana:

Ya teniendo preparado el IDE para poder comenzar a codear lo que haremos sera abrir el QT-Designer para crear la interfaz de nuestro programa (o mejor dicho la ventanita de nuestro programa) y creamos un nuevo Widget como muestra la siguiente imagen.



Una ves que creamos la ventana lo que haremos sera agregarle dos cajas de texto (lineEdit), un botón (pushButton) y un label (Label). La orientación de los controles puede ser a su gusto, yo lo deje como la siguiente imagen:



Una vez que tengamos la ventana armada lo que haremos sera guardarla, en ese momento seleccionamos el directorio donde se guardara nuestra GUI (ventana que creamos) la cual yo le pondre el nombre de ventan.ui ya que *.ui es la extensión por defecto.



a con la ventana editada y guardada lo que debemos hacer es convertirla a codigo python mediante una herramienta que se llama PYUIC4 o PYUIC5 dependiendo de la version de QT que tengan instalada. Todo esto mediante el siguiente comando
Código: [Seleccionar]
pyuic -o nombre_nuevo.py ventana.ui


Esto nos generara un archivo python el cual contiene la información de nuestra ventana.



Bien,  hasta ahora tenemos nuestra ventana que funciona en python lo que nos faltaría es que al ejecutarla se muestre en pantalla. Para que esto suceda deberemos crear una nueva clase de python a la que podríamos llamar "main.py" yo en mi caso la llame "gui.py" como la imagen a continuación. Ahora pasaremos a ver el código...





Importando nuestra ventana:

Como se puede observar en la imagen de arriva lo primero que hacemos el importar las dependencias de QT4/5:

Código: [Seleccionar]
form PyQT5 import QtCore, QtGui, QWidgets
Código: [Seleccionar]
form ventana import Ui_Form  #(donde Ui_form es el nombre de la clase de nuestra ventana)

Una vez que todo esta importado creamos una clase que sera la encargada de cargar nuestra ventana y también contendrá los eventos de los controles como por EJ: mostrar un mensaje al presionar un botón.



Ahora analizaremos el código:

Bien lo primero que hacemos es importar los modulos de QT para ello las siguientes lineas:

Código: [Seleccionar]
from PyQt5 import QWidgets, QtCore, QtGui
Luego importamos nuestra ventana que creamos en QtDesigner y la pasamos a un archivo python.

Código: [Seleccionar]
form ventana import Ui_Form
A mi en lo particular cuando trabajo con QT me gusta crear una clase para mi GUI (o en simples palabras para mi ventana) asi que crearemos la clase de la ventana:

Código: [Seleccionar]
class window(Ui_Form):
    def __init__(self, dialog):
        Ui_Form.__init__(self)
        self.setupUi(dialog)

bien con eso ya tenemos declarado para que se muestre nuestra ventana pero para ello tenemos que invocarla de la siguiente manera:

Código: [Seleccionar]
if __name__ == '__main__':
    app = QWidgets.QApplication(sys.argv)
    dialog = QWidgets.QDialog()
    prog = window(dialog)
    dialog.show()
    sys.exit(app.exec_())



Ejecutamos para ver si todo esta bien damos F9 (claro si estas usando PyCharmIDE)



El resultado de nuestro programa es el siguiente:



Claro que si en el codigo anterior en lugar de introducir números introducimos letras este nos tirara un error. Para ello podriamos hacerlo de la siguiente manera, claro que podemos hacer que solo acepte numeros pero en esta entrada solo saltaremos esa parte modificando el fragmento de codigo para que quede de la siguiente manera:

Código: [Seleccionar]
def sumar(self):
        a = self.lineEdit.displayText()
        b = self.lineEdit_2.displayText()

        try:
            resultado = int(a) + int(b)
            self.label.setNum(resultado)
        except: pass


« Última modificación: Septiembre 25, 2017, 08:54:36 pm por noxonsoftwares »

Desconectado MonsterSlayer

  • *
  • Underc0der
  • Mensajes: 1
  • Actividad:
    0%
  • Reputación 0
    • Ver Perfil

Re:[Python3] Interfaces graficas #1 con QT4/5

  • en: Noviembre 29, 2017, 05:22:26 pm
En la parte final de codigo de gui.py :

Código: (python) [Seleccionar]
if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    dialog = QtWidgets.QDialog()
    prog = window(dialog)
    dialog.show()
    sys.exit(app.exec_())

[i]me tira el error:[/i]
Traceback (most recent call last):
  File "C:\Users\Ricardo\Documents\py projects\interfacez graficas con qt\gui.py", line 24, in <module>
    prog = window(dialog)
TypeError: object() takes no parameters
si le quito el dialog dentro de window() no me lanza el error en cambio se ve una ventana vacía :/
alguna solucion?
???
« Última modificación: Noviembre 30, 2017, 10:34:01 am por Gabriela »

Desconectado n1sendev

  • *
  • Underc0der
  • Mensajes: 75
  • Actividad:
    0%
  • Reputación 0
  • No sabes lo que tienes hasta que lo pierdes.
    • Ver Perfil

Re:[Python3] Interfaces graficas #1 con QT4/5

  • en: Noviembre 29, 2017, 09:23:37 pm
buen tutorial, pero no hay una forma de hacerlo sin PyCharm? No uso Pycharm por que cuesta un dineral, se que existe la version comunity que es gratis, pero te carcome toda la memoria RAM y mi pc solo tine 2GB, constantemente se cuelga por quedarse sin memoria.

Desconectado Once

  • *
  • Ex-Staff
  • *****
  • Mensajes: 391
  • Actividad:
    0%
  • Reputación 0
  • Twitter: @don_once
    • Ver Perfil
    • El blog de Once

Re:[Python3] Interfaces graficas #1 con QT4/5

  • en: Noviembre 30, 2017, 04:00:53 am
buen tutorial, pero no hay una forma de hacerlo sin PyCharm? No uso Pycharm por que cuesta un dineral, se que existe la version comunity que es gratis, pero te carcome toda la memoria RAM y mi pc solo tine 2GB, constantemente se cuelga por quedarse sin memoria.

Como menciona al inicio del post, se puede usar cualquier otro IDE. Es indiferencte a la hora de programar en Python. Ahora, si lo preguntas por el diseñador, ese es un software completamente diferente que no tiene nada que ver con el IDE. Si usas Windows, acá te dicen cómo instalarlo: https://stackoverflow.com/questions/30222572/how-to-install-qtdesigner si usas Linux, lo más seguro es que esté en los respositorios de la distroq ue estés usando.

Saludos!