2 feb. 2017

[PYTHON] Interfacez graficas #1 con QT4/5

En esta ocasión les traigo 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)


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) LOL


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.


Ya 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 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


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




form PyQT5 import QtCore, QtGui, QWidgets

para luego importar nuestra ventana:

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:

from PyQt5 import QWidgets, QtCore, QtGui

Luego importamos nuestra ventana que creamos en QtDesigner y la pasamos a un archivo python.




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:

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:

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:

def sumar(self):
        a = self.lineEdit.displayText()
        b = self.lineEdit_2.displayText()

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