[Tutorial]Aprende PyQT4 con RootCodes !

[Parte1]
Hola, buen da. En esta ocasin vengo a ensear un poco sobre lo que es la aplicacin de QT4 en nuestro siempre querido Python. En esta gua pretendo explicar la base para crear un formulario y los distintos widgets a utilizar, como dar funcin a un botn, obtener datos de campos QLineEdit(), insertar datos en diferentes tipos de widgets, tales como QLineEdit, QPlainText, QTextBrowser, etc. Y pues ya lo dems es saber lo bsico de Python, pero en ves de pedir los datos va raw_input() estos son reemplazados por los ya mencionados QLineEdit, para imprimir un dato por pantalla podemos usar QLabel. Ya lo dems es saber programar en Python nada ms ! Bien, antes que todo, veamos que es QT, segn la conocida Wikipedia : Qt es una biblioteca multiplataforma ampliamente usada para desarrollar aplicaciones con una interfaz grfica de usuario as como tambin para el desarrollo de programas sin interfaz grfica como herramientas para la lnea de comandos y consolas para servidores. Ya, vamos al grano Qu necesito para programar en PyQT4 ? Necesitas obviamente tener instalado Python: ? 1sudo apt-get install python Una vez instalado, debemos instalar las libreras QT4: ? 1sudo apt-get install python-qt4 Esto es opcional, es el QT4 Designer, que nos ayuda a crear la interfaz grfica, pero en C++ ? 1sudo apt-get install qt4-designer Y lo siguiente, es para traducir el cdigo C++ a PyQT4, en caso de usar el QT4 Designer: ? 1sudo apt-get install pyqt4-dev-tools Aclaro que yo a lo largo del tutorial solo usar el QT4 Designer para saber las dimensiones de los widgets, tamaos y propiedades. Bueno, volvamos al tema Vamos a empezar ! La base de todos los programas en PyQT4 debe ser: ?

# -*- coding: utf-8 -*1 from PyQt4 import QtCore, QtGui 2 import sys 3 4 class Mi_Programa(QtGui.QWidget): 5 6 def __init__(self, parent=None): 7 8 QtGui.QWidget.__init__(self, parent) 9 self.resize(200,200) #Dimensiones del formulario 10 11 aplicacion = QtGui.QApplication(sys.argv) 12 formulario = Mi_Programa() # Instanciamos la clase de nuestro 13 programa 14 15 formulario.show() # Mostramos el Formulario aplicacion.exec_() # Ejecutamos Si has copiado y pegado bien, la salida debe ser:

Genial, nuestra primera mini aplicacin en PyQT4, en la segunda parte empezaremos a utilizar los widgets QLineEdit(), QLabel() y QPushButton()

[Tutorial]Aprende PyQT4 con RootCodes ! [Parte2]

Hola nuevamente ! Siguiendo con el tutorial, pasar a explicar como implementar un QLineEdit() y un QPushButton(), para que tengan una idea de que les hablo : Ello mismo, pero en PyQT4. Bien, para poder insertar nuestro QLineEdit, debemos aadir bajo la lnea del self.resize(200,200): ? 1self.mi_qlinedit = QtGui.QLineEdit(self) Quedando as en nuestro form: ?

# -*- coding: utf-8 -*1 from PyQt4 import QtCore, QtGui 2 import sys 3 4 class Mi_Programa(QtGui.QWidget): 5 def __init__(self, parent=None): 6 7 QtGui.QWidget.__init__(self, parent) 8 self.resize(200,200) #Dimensiones del formulario 9 10 self.mi_qlinedit = QtGui.QLineEdit(self) # aadimos el 11 QLineEdit 12 13 aplicacion = QtGui.QApplication(sys.argv) 14 formulario = Mi_Programa() # Instanciamos la clase de nuestro 15 programa 16 formulario.show() # Mostramos el Formulario aplicacion.exec_() # Ejecutamos Y Pues para aadir un botn: ? 1self.mi_boton = QtGui.QPushButton("Hola, soy un boton!", self) Nuestro formulario quedara as: ? # -*- coding: utf-8 -*1 from PyQt4 import QtCore, QtGui 2 import sys 3 4 class Mi_Programa(QtGui.QWidget): 5 def __init__(self, parent=None): 6 7 QtGui.QWidget.__init__(self, parent) 8 self.resize(200,200) #Dimensiones del formulario 9 10 self.mi_boton = QtGui.QPushButton("Hola, soy un boton!", 11 self) 12 13 aplicacion = QtGui.QApplication(sys.argv) 14 formulario = Mi_Programa() # Instanciamos la clase de nuestro 15 programa 16 formulario.show() # Mostramos el Formulario aplicacion.exec_() # Ejecutamos

Nota: Podemos utilizar cualquier variable, siempre anteponiendo el self., solo que yo us mi_boton para darle un nombre descriptivo. Bien, ya sabemos como insertar nuestros primeros Widgets en PyQT4, pero vers que al mezclar ambos, solo muestra un widget, esto sucede porque no le hemos dado una ubicacin, por lo que ambos se posicin en las coordenadas X = 0; Y = 0 , as uno se sobre pone del otro.

Entonces, Cmo ubico mi widget donde yo quiera ? Sencillo ! , debemos utilizar la propiedad setGeometry(X,Y,Width, Height) , Donde X ser la ubicacin hacia los costados e Y arriba y abajo. Aqu es donde yo recomiendo usar el QT Designer, pues nos ayudar a ubicar nuestro Widget de manera correcta y no dir en que ubicacin se encuentra. Recomiendo utilizar en el botn, el height 27, que es la altura de un botn normal. El width depender del ancho del texto de nuestro botn. (width = ancho ; height = altura) En lo que respecta el QLineEdit, recomiendo usar tambin el height = 27 As quedando la mezcla: ? # -*- coding: utf-8 -*from PyQt4 import QtCore, QtGui import sys

1 2 class Mi_Programa(QtGui.QWidget): 3 4 def __init__(self, parent=None): 5 6 QtGui.QWidget.__init__(self, parent) 7 self.resize(200,200) #Dimensiones del formulario 8 self.mi_boton = QtGui.QPushButton("Boton", self) # Creo el 9 QPushButton() 10 self.mi_boton.setGeometry(10,40,92,27) #X = 10 ; Y = 15 ; 11 Width = 92 ; Height = 27 12 self.mi_qlinedit = QtGui.QLineEdit(self) # Creo el 13 QLineEdit() 14 self.mi_qlinedit.setGeometry(10,10,92,27) # X = 10 ; Y = 15 10 ; Width = 92 ; Height = 27 16 17 18 aplicacion = QtGui.QApplication(sys.argv) 19 formulario = Mi_Programa() # Instanciamos la clase de nuestro programa formulario.show() # Mostramos el Formulario aplicacion.exec_() # Ejecutamos Un ScreenShot:

En la siguiente parte, explicar como darle funcin a un botn e implementar un QLabel() con un resultado posterior !

[Tutorial]Aprende PyQT4 con RootCodes ! [Parte3]

Hola ! , en la pasa ocasin quedaron pendientes un par de puntos : Dar funcin a un botn Crear un QLabel() Nuestro primer Hola mundo en PyQT4 Bien, manos a la obra, para quienes no sepan que es un Label, dejar un Screenshot , es algo bien sencillo:

Sencillo no ? , nos servir para imprimir resultados por pantalla, como dije en la primera parte, como un reemplazo al print de la versin Python en Consola. Bueno Y cmo uso el QLabel ? Nada ms que esto: ? 1self.mi_label = QtGui.QLabel("Mi texto", self) Luego pueden cambiar las coordenadas con el ya mencionado self.objeto.setGeometry() (donde objeto puede ser un QLabel, QLineEdit, etc) Siguiendo con algo ms til, pasar a explicar como dar vida a los famosos Botones. Para poder crear acciones al dar clic en un botn, usaremos self.connect(), pero antes de ello, debemos tener una funcin creada para que al dar clic, esta se ejecute La sintaxis del self.connect ser esta: ? self.connect(self.mi_boton, QtCore.SIGNAL("clicked()"<img src="http://rootcodes.com/wp-content/themes/greyopaque/plugins/lazy-load/images/1x1.trans.gif" data-lazy1 src="http://rootcodes.com/wp-content/themes/greyopaque/images/smilies/icon_wink.gif" alt="Smilie: ;)" title="Smilie: ;)">, self.respuesta) Paso a explicar: self.connect(self.mi_boton = Eso indica que la funcin self.respuesta solo ser ejecutada al dar clic en el botn self.mi_boton QtCore.SIGNAL(clicked() , quiere decir que ser ejecutado al ser clickeado self.respuesta) es la funcin que se ejecuta al ser clickeado el botn Osea, en nuestros programas, la nica parte que debera cambiar seran self.mi_boton y self.respuesta, veamos como queda el cdigo: ?

1 2 class Mi_Programa(QtGui.QWidget): 3 4 def __init__(self, parent=None): 5 6 QtGui.QWidget.__init__(self, parent) 7 self.resize(200,200) #Dimensiones del formulario 8 self.mi_boton = QtGui.QPushButton("Boton", self) # Creo el 9 QPushButton() 10 self.mi_boton.setGeometry(10,10,92,27) #X = 10 ; Y = 15 ; 11 Width = 92 ; Height = 27 12 self.connect(self.mi_boton, QtCore.SIGNAL('clicked()'), 13 self.respuesta) 14 self.mi_label = QtGui.QLabel('', self)#Lo definimos sin 15 texto, luego le damos un valor 16 self.mi_label.setGeometry(10,40,92,27) 17 18 19 aplicacion = QtGui.QApplication(sys.argv) 20 formulario = Mi_Programa() # Instanciamos la clase de nuestro programa formulario.show() # Mostramos el Formulario aplicacion.exec_() # Ejecutamos Bien hasta ah Pero algo falta La funcin respuesta ! Haremos algo sencillo, que al dar clic en el botn, nos cree un QLabel con una respuesta: ? 1 def respuesta(self): 2 self.mi_label.setText('Gracias !') Pero que es eso ! ? , setText() ? S, es la propiedad que usaremos para definir un texto en el QLabel(), siempre y cuando el QLabel() ya haya sido creado. Entonces nuestro cdigo ser el siguiente, ya terminado: ? 1 # -*- coding: utf-8 -*2 from PyQt4 import QtCore, QtGui 3 import sys 4 5 class Mi_Programa(QtGui.QWidget): 6 7 def __init__(self, parent=None): 8 9 QtGui.QWidget.__init__(self, parent) 10 self.resize(200,200) #Dimensiones del formulario 11 self.mi_boton = QtGui.QPushButton("Boton", self) # Creo el 12 QPushButton() 13 self.mi_boton.setGeometry(10,10,92,27) #X = 10 ; Y = 15 ; 14 Width = 92 ; Height = 27 15 self.connect(self.mi_boton, QtCore.SIGNAL('clicked()'), 16

# -*- coding: utf-8 -*from PyQt4 import QtCore, QtGui import sys

self.respuesta) self.mi_label = QtGui.QLabel('', self) self.mi_label.setGeometry(10,40,92,27) 17 18 def respuesta(self): self.mi_label.setText('Gracias !') #Defino un texto al dar 19 20 clic en self.mi_boton 21 22 aplicacion = QtGui.QApplication(sys.argv) 23 formulario = Mi_Programa() # Instanciamos la clase de nuestro programa formulario.show() # Mostramos el Formulario aplicacion.exec_() # Ejecutamos Genial ! , ya tenemos nuestro primer programa en PyQT4. Nos aparecer el formulario con el botn y al dar clic aparecer el mensaje: Gracias !

Los puntos : Dar funcin a un botn Crear un QLabel() Nuestro primer Hola mundo en PyQT4 Ya fueron tratados en esta 3era parte En la siguiente parte explicar como obtener los datos ingresados en un QLineEdit(), mostrarlos en un QLabel() al dar clic en un QPushButton(). Ya con eso podrn empezar a crear vuestras aplicaciones !

[Tutorial]Aprende PyQT4 con RootCodes [Parte4]

Hola nuevamente ! En la [Parte3] dej pendiente hablar sobre como obtener los datos de un QLineEdit(), voy a ir directo al grano .

Pondr un ejemplo sencillo, tenemos el QLineEdit(): ? 1self.input_datos = QtGui.QLineEdit(self) Entonces para obtener lo que ingresamos, usamos la propiedad .text() acompaada de un str() para que no devuelva el objeto y si el valor:

? 1variable = str(self.input_datos.text()) Entonces solo bastara poner dicha lnea en la funcin del botn(self.connect): ? 1 def funcion(self): 2 recibo_datos = str(self.input_datos.text()) Y con ello ya tendremos en nuestras manos el valor del QLineEdit() en la variable. Ahora con ella podemos hacer lo mismo que hacemos en nuestros cdigos Python normales, a nuestro antojo. Pero como qued pendiente en la pasada parte sobre utilizar el valor del QLineEdit() en el QLabel(), con lo que hemos visto ya deberamos saber hacerlo el cdigo con comentarios : ? , de todas formas dejar

# -*- coding: utf-8 -*1 from PyQt4 import QtCore, QtGui 2 import sys 3 4 class Mi_Programa(QtGui.QWidget): 5 def __init__(self, parent=None): 6 7 QtGui.QWidget.__init__(self, parent) 8 self.resize(200,134) 9 #Creamos los Labels,label_mensaje "Mensaje:", 10 label_resultado el mensaje de "Resultado:" 11 #Y el tercero mostrar el texto ingresado. 12 self.label_mensaje = QtGui.QLabel("Mensaje:", self) 13 self.label_mensaje.setGeometry(3,14,59,17) 14 self.label_resultado = QtGui.QLabel("Resultado:", self) 15 self.label_resultado.setGeometry(5,80,71,17) 16 self.label_show = QtGui.QLabel("",self) 17 self.label_show.setGeometry(80,80,111,17) 18 19 #Creamos el QLineEdit para pedir datos 20 self.input_datos = QtGui.QLineEdit(self) 21 self.input_datos.setGeometry(60,10,113,27) 22 #Creamos el Boton 23 self.mi_boton = QtGui.QPushButton("Dame Clic", self) 24 self.mi_boton.setGeometry(60,40,92,27) 25 #Le damos funcin al botn 26 self.connect(self.mi_boton, QtCore.SIGNAL('clicked()'), 27 self.show_message) 28 29 def show_message(self): 30 mensaje = str(self.input_datos.text()) 31 self.label_show.setText(mensaje) 32 aplicacion = QtGui.QApplication(sys.argv) 33 formulario = Mi_Programa() 34 formulario.show() aplicacion.exec_() Explico un poco:

Al dar clic en el botn, llamamos a la funcin show_message() en la cual obtendremos el dato de self.input_datos, posteriormente guardamos el valor en la variable mensaje y como ya vimos, usamos setText(mensaje) para darle el nuevo valor al QLabel(). Supongo que ya no hay temas pendientes con QLineEdit, QLabel, QPushButton veamos el uso de otros Widgets, el siguiente es QPlainTextEdit(). Como dice su nombre, es para insertar un texto plano, a diferencia del QLineEdit, este es multilneas. La manera de utilizacin es la siguiente : ? 1self.texto_plano = QtGui.QPlainTextEdit("", self) Como ya sabemos, usamos la propiedad setGeometry() para dar posicin, ancho y altura. Para obtener los datos que se insertan en dicho widget, usaremos la propiedad toPlainText(), que es el equivalente al .text() del QLineEdit. Para insertar datos en un QPlainTextEdit(), debemos usar setPlainText(Msj Un pequeo ejemplo de lo que he escrito en cdigo : ? . ,

# -*- coding: utf-8 -*from PyQt4 import QtCore, QtGui 1 import sys 2 3 class Mi_Programa(QtGui.QWidget): 4 def __init__(self, parent=None): 5 6 QtGui.QWidget.__init__(self, parent) 7 self.resize(400,319) # Tamao 8 #Creamos el primer PlainTextEdit que luego enva los datos 9 10 al segundo self.texto_plano = QtGui.QPlainTextEdit("", self) 11 self.texto_plano.setGeometry(10,10,191,271) 12 #Creamos el botn 13 self.transcribir = QtGui.QPushButton("Transcribir", self) 14 self.transcribir.setGeometry(10,285,95,27) 15 #Creamos el segundo PlainTextEdit que recibir el primer 16 17 contenido 18 self.nuevo_txt = QtGui.QPlainTextEdit("", self) 19 self.nuevo_txt.setGeometry(206,10,191,271) 20 #Le damos la funcin al botn y llamamos al def transcribe 21 self.connect(self.transcribir, QtCore.SIGNAL('clicked()'), 22 self.transcribe) 23 24 def transcribe(self): 25 #Obtenemos el contenido del primer QPlainTextEdit 26 contenido = self.texto_plano.toPlainText() 27 #Escribimos el contenido del primer QPlainTextEdit en el 28 segundo 29 #Usando setPlainText 30 self.nuevo_txt.setPlainText(contenido) 31 32 aplicacion = QtGui.QApplication(sys.argv) 33 formulario = Mi_Programa() formulario.show() aplicacion.exec_()

Luego seguir con el QTextBrowser(), que nos permite ingresar cdigo HTML en el campo de escritura