Aplicaciones graficas con Tkinter en python (parte 1)

Aplicación gráfica en Python con Tkinter

En esta entrada aprenderemos a crear Aplicaciones Gráficas (GUI) paso a paso con python, utilizando como herramienta gráfica Tkinter.

Los objetivos de la entrada son:

* Dominar las técnicas más comunes a la hora de trabajar con gráficos (widgets de diseño, limitaciones de la GUI, etc)
* Comprender todos los métodos y parámetros utilizados en los ejemplos.

* Que la entrada sirva como base para construir sus propias aplicaciones GUI.

 Aprenderemos:

* A construir una aplicación con interfaz gráfica.
* Creación de Widgets.
* Manipular el valor de los Widgets

Como instalar Tkinter:

Generalmente Tkinter viene integrado con python, pero por las dudas dejo las instrucciones:

En Ubuntu/Debian (Linux):

En consola: sudo apt-get install python python-tk idle python-pmw python-imaging

En Fedora:

En consola: yum install tkinter
En consola: yum install python-imaging
En consola: yum install python-tools

Los usuarios de windows y MAC pueden fijarse en este enlace: http://tkinter.unpythonic.net/wiki/How_to_install_Tkinter

Primer ejemplo con Tkinter

Crearemos una simple ventana con un título "Aplicacion grafica en python", una etiqueta (Label) que dirá "Hola Mundo!!!", y un botón que dirá "OK!!". Nuestra primera aplicación no tendrá ninguna funcionalidad, solo servirá como primer ejemplo.

Consejo: no ponerle a la aplicación el nombre Tkinter. Cuando arranque a practicar con Tkinter tuve muchos problemas con mi primera aplicación, y luego de quemarme las pestañas descubrí que le había puesto el mismo nombre que el módulo. Cambie el nombre y asunto solucionado 🙂 .

Todo los ejemplos fueron creados y probados en un sistema Linux (Ubuntu)

Ejemplo 1 de Python y Tkinter

Código:

#!/usr/bin/python
# -*- coding: utf-8 -*-
# www.pythondiario.com

from Tkinter import *

app = Tk()
app.title("Aplicacion grafica en python")
etiqueta = Label(app, text="Hola mundo!!!")
boton = Button(app, text="OK!!")

etiqueta.pack()
boton.pack()
app.mainloop() 

Análisis:

Lo primero que hacemos es importar todo lo que está dentro del módulo Tkinter.

from Tkinter import *

Luego creamos un objeto (app) con la clase Tk() (esto crea un Widgets que va a ser nuestra ventana principal).

app = Tk()

A continuación creamos el titulo de nuestra ventana de la siguiente manera:

app.title("Aplicacion grafica en python")

Para crear una etiqueta con "Hola mundo!!!" y un Botón con "OK!" hacemos lo siguiente:

etiqueta = Label(app, text="Hola mundo!!!")
boton = Button(app, text="OK!!")

Luego tenemos que llamar al método pack() para que nuestro botón y etiqueta sean visibles en la aplicación. Es un error muy común olvidarse llamar el método pack() y por lo tanto no ver lo deseado en la aplicación.

etiqueta.pack()
boton.pack()

Por último llamamos al método mainloop() que se encargará de tener activa nuestra aplicación (entrará en un loop o bucle).

app.mainloop() 

Segundo ejemplo con Tkinter

Está sencilla aplicación tendrá una etiqueta, un botón y un campo para ingresar texto. El campo de texto solo espera números y al dar clic en OK devolverá el número ingresado multiplicado por 5. En caso de no ingresar un número devolverá una excepción.

Ejemplo 2 de Python y Tkinter

Código:

#!/usr/bin/python
# -*- coding: utf-8 -*-
# www.pythondiario.com

import sys
from Tkinter import *

def hacer_click():
 try:
  _valor = int(entrada_texto.get())
  _valor = _valor * 5
  etiqueta.config(text=_valor)
 except ValueError:
  etiqueta.config(text="Introduce un numero!")


app = Tk()
app.title("Mi segunda App Grafica")

#Ventana Principal
vp = Frame(app)
vp.grid(column=0, row=0, padx=(50,50), pady=(10,10))
vp.columnconfigure(0, weight=1)
vp.rowconfigure(0, weight=1)

etiqueta = Label(vp, text="Valor")
etiqueta.grid(column=2, row=2, sticky=(W,E))

boton = Button(vp, text="OK!", command=hacer_click)
boton.grid(column=1, row=1)

valor = ""
entrada_texto = Entry(vp, width=10, textvariable=valor)
entrada_texto.grid(column=2, row=1)

app.mainloop()

Análisis:

Lo primero que hacemos como siempre es importar los módulo con los que vamos a trabajar.
Luego creamos el método hacer_click() que interactúa con el botón, pero más adelante explicaré como funciona.

Creamos nuestro objeto (app) como en la primera aplicación y le damos un titulo a la ventana:

app = Tk()
app.title("Mi segunda App Grafica")

Ahora crearemos nuestra ventana principal con el método Frame(). Este método se utiliza para organizar y dar formato al contenido de una ventana. Por lo tanto crearemos nuestra ventana principal con un Frame(app) y la llamaremos "vp".

#Ventana Principal
vp = Frame(app)

Ahora le daremos formato a nuestra ventana, para eso utilizaremos el método grid(). Este método nos permite posicionar los elementos gráficos en nuestra ventana. Nuestro formato de ventana va a tener column=0 y row=0 para que quede centrado. Otro parámetro que utilizaremos será el margen: padx=(50,50) que son 50 píxeles del lado izquierdo y 50 del derecho. Luego pady=(10,10) que son 10 píxeles en la parte superior y 10 en la parte inferior.

vp.grid(column=0, row=0, padx=(50,50), pady=(10,10))

Luego utilizaremos los métodos columnconfigure() y rowconfigure() que nos servirán para dar un peso relativo al ancho y alto de todos los elementos que se añadan a la ventana.

vp.columnconfigure(0, weight=1)
vp.rowconfigure(0, weight=1)

Creamos una etiqueta que llamamos "Valor" y la posicionamos con el método grid().

etiqueta = Label(vp, text="Valor")
etiqueta.grid(column=2, row=2, sticky=(W,E))

Creamos un botón que llamamos "OK!" y lo posicionamos con el método grid(). También crearemos un evento que llamaremos (hacer_click), para eso utilizamos un parámetro llamado (command) que se ejecutará cuando hagamos clic en el botón.

boton = Button(vp, text="OK!", command=hacer_click)
boton.grid(column=1, row=1)

Creamos una variable (valor). También crearemos un campo de texto para ingresar nuestros datos (entrada_texto) con un objeto Entry que tendrá nuestro contenedor (vp), un ancho (width=10) y otro elemento (textvariable=valor) que guardará lo que se deposite en la variable (valor) creada en un principio. Por último posicionamos nuestra entrada de texto.

valor = ""
entrada_texto = Entry(vp, width=10, textvariable=valor)
entrada_texto.grid(column=2, row=1)

Para finalizar, como vimos en el primer ejemplo, llamamos al método mainloop().

app.mainloop()

El método o función hacer_click() se ejecutará cada ves que hagamos click en el botón OK! de nuestra ventana y es ahí donde cambiará el "valor".
El método tiene una variable (_valor) que captura la entrada de texto de (entrada_texto) con el método get(). Luego multiplica lo capturado por 5 y con (etiqueta.configure) modifica la etiqueta por el valor de (_valor).

def hacer_click():
 try:
  _valor = int(entrada_texto.get())
  _valor = _valor * 5
  etiqueta.config(text=_valor)
 except ValueError:
  etiqueta.config(text="Introduce un numero!")

Otros ejemplos sencillos con Tkinter y Python

Crearemos un sencillo Listbox() y le pasaremos una lista de nombres:

Listbox()

Código:

#!/usr/bin/python
# -*- coding: utf-8 -*-
# www.pythondiario.com

from Tkinter import *           # Importamos el módulo Tkinter
root = Tk()                     # Creamos la ventana de fondo
                                # Creamos una lista con nombres
li = 'Diego Matias Martin Carla Lorena Roberto'.split()
listb = Listbox(root)           # Creamos un Widgets Listbox
for item in li:                 # Insertamos los nombres de la lista en el Listbox
    listb.insert(0,item)

listb.pack()                    # Hacemos el pack del widget
root.mainloop()                 # Ejecutamos el bucle

Ahora crearemos dos Listbox, uno con nombres y el otro con películas:

Dos Listbox()

Código:

#!/usr/bin/python
# -*- coding: utf-8 -*-
# www.pythondiario.com

from Tkinter import *           # Importamos el módulo Tkinter
root = Tk()                    # Creamos una ventana de fondo
                                # Creamos dos listas
li     = ["Diego", "Matias", "Lorena", "Roberto", "Rosario"]
movie  = ["El padrino", "Naruto", "La gran estafa", "Los juegos del hambre"]
listb  = Listbox(root)          # Creamos dos Listbox
listb2 = Listbox(root)
for item in li:                 # Insertamos los nombres en el primer Listbox
    listb.insert(0,item)

for item in movie:              # Insertamos las peliculas en el segundo Listbox
    listb2.insert(0,item)

listb.pack()                    # Hacemos el pack() de los dos Listbox
listb2.pack()
root.mainloop()                 # corremos el loop

Ahora crearemos una ventana con un botón. Al presionar el botón saldrá una etiqueta diciendo que hemos apretado el botón (este cambiará al color azul).

Ejemplo

Código:

#!/usr/bin/python
# -*- coding: utf-8 -*-
# www.pythondiario.com

from Tkinter import *


def Call(): # Definimos la funcion
        lab= Label(root, text = 'Usted presiononel boton')
        lab.pack()
        boton['bg'] = 'blue' # Al presionar queda azul
        boton['fg'] = 'white' # Si pasamos el Mouse queda blanco

root = Tk() # Ventana de fondo
root.geometry('100x110+350+70') # Geometría de la ventana
boton = Button(root, text = 'Presionar', command = Call) 
boton.pack()

root.mainloop()

Como último ejemplo, crearemos un botón, que al presionarlo agregará todos los nombres de una lista en un Listbox.

Ejemplo

Código:

#!/usr/bin/python
# -*- coding: utf-8 -*-
# www.pythondiario.com

from Tkinter import *           # Importamos el modulo Tkinter


def DrawList(): # Creamos una lista con algunos nombres
        plist = ['Diego','Matilde','Ramon']

        for item in plist: # Insertamos los items en un Listbox
                listbox.insert(END,item);
                
        
root = Tk()                     # Creamos una ventana de fondo

listbox = Listbox(root)
boton = Button(root,text = "Presionar",command = DrawList)

boton.pack()
listbox.pack()                  # Hacemos los pack() del boton y el Listbox
root.mainloop()                 # Entramos en el loop

-----------------------------------------------------------------------------------------------------------------
Puedes pasar por el Tutorial Tkinter Completo

Espero que esta entrada les sirva como una introducción a Tkinter y pueden comenzar a realizar sus propias aplicaciones gráficas. En una segunda parte agregare más ejemplos funcionales. Cualquier duda, sugerencia o lo que se les ocurra, pueden dejarlas al final de la entrada en los comentarios. Gracias por visitar el blog 🙂 .