Google+ Seguidores

sábado, 8 de noviembre de 2014

Aplicaciones graficas con Tkinter en python (parte 1)

    25

Aplicación gráfica en Python con Tkinter
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
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
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() Tkinter
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:

Listbox() Python
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).

Boton Tkinter
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 presiono\nel 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 Tkinter
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 :) .

25 comentarios:
Write comentarios
  1. Respuestas
    1. Hola Alberto, me alegro sea de tu agrado el artículo ;)
      Saludos

      Eliminar
    2. Estaría muy padre que hiciera algo con Tkinter y mysql , una pequeña aplicación gráfica con Interfaz

      Las demas entradas son excelentes, eno conocía el blog, es muy bueno.
      Saludos

      Eliminar
    3. Gracias Alberto. Una de las próximas entradas a preparar será una aplicación gráfica con PyQt y SQL Server. No estoy muy familiarizado con Tkinter, pero ya alguién va a aportar algún artículo sobre el tema. Saludos y gracias por visitar el blog ;)

      Eliminar
  2. Excelente blog para aprender de cero. Saludos Diego

    ResponderEliminar
  3. hola espero que no sea demasiado tarde para preguntar, pero esque me sale un error al ejecutar el primer ejemplo:

    Non-ASCII character '\xc2' in file C:\Users\Leonel\Desktop\Interfaz proyecto\interfaz.py on line 5, but no encoding declared; see http://python.org/dev/peps/pep-0263/ for details

    Investigue por este problema y mencionan que es sobre simbolos que no son reconocidos o algo asi (busque en foros en ingles).

    Si me pueden ayudar estari genial, de antemano muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola Leonel, gracias por visitar el blog y participar.
      En el código tienes estas líneas en la parte superior?:
      #!/usr/bin/python
      # -*- coding: utf-8 -*-

      De no ser así, agregalas y me comentas.

      Saludos

      Eliminar
    2. Tal como dice Diego, ese problema se da por que no declaraste la codificación (en este caso utf8) a tu programa y por ende no reconoce algunos caracteres dentro del mismo, poder esas dos lineas es una buena practica que siempre debemos aplicar.

      Eliminar
  4. Oigan una pregunta, estoy iniciando a realizar aplicaciones graficas con python, pero tengo windows 8 y arcgis 10.3, que necesito tener para comenzar...

    ResponderEliminar
  5. Realice con el ejemplo 2 de tkinter, un programita que con dos numeros dados, realiza las operaciones basicas, donde lo comparto en este blog o a donde lo envio para utilidad de la comunidad.... saludos!

    ResponderEliminar
    Respuestas
    1. Hola Fidel, si me lo envias por correo puedo agregarlo al final de la entrada. Saludos. Si tienes varios códigos me los envías todos juntos y hago una entrada aparte. Saludos

      Eliminar
  6. muy buen aporte gracias por la información.

    ResponderEliminar
  7. Muchos problemas en realizar el ejemplo en 3.5, podrian publicarlos en 3.5 perdon estoy empezando

    ResponderEliminar
  8. Amigo, buen articulo. Pero quisiera saber si me podrías ayudar con el código para un login en Tkinter, python 2.7

    ResponderEliminar
    Respuestas
    1. Te enviare un codigo y lo analizas, para ver si te sirve. Debes trabajar con una base de datos. Enviame una direccion de correo.

      Eliminar
  9. He hecho de este blog, mi tutorial numero uno :D

    ResponderEliminar
  10. Hola Diego, como estas, tengo un problema al llamar un sub programa, desde un menú en (Tkinter Python3), el get() no activa la lectura de un campo en una Label. Te agradezco la ayuda. hhmhonori@gmail.com

    ResponderEliminar
  11. si quiero agregar 20 comentarios tengo que crear 20 etiquetas o hacer una linea super larga con saltos de linea?
    Existe algo más eficiente? porque la verdad alguna de estas opciones es algo tedioso

    ResponderEliminar
    Respuestas
    1. Donde quieres hacer los comentarios...???

      Eliminar
    2. etiquetas seguidas sólo que como son muy largos ponerlos en una sola linea seria fatal, pues

      Eliminar
  12. Excelente aporte! Espero la parte 2!
    Existe la posibilidad de cambiar el estilo de las ventanas en con el tkinter? es que hace un tiempo estaba aprendiendo a programar en java y se podía cambiar el estilo de las ventanas ya sea aplicarle el de windows, el de java... tengo la duda si se puede hacer con el tkinter.

    PD:Muy buena páginas!!!! La visito mucho tiene muy buen material.

    ResponderEliminar
    Respuestas
    1. Hola, gracias por visitar el blog. Para profundizar un poco más con los estilos en Tkinter te recomiendo veas la documentación oficial: Ver Link
      Saludos!!!

      Eliminar

Tu comentario es importante y nos motiva a seguir escribiendo...

Entradas más recientes

© 2014 Mi diario Python. Designed by Bloggertheme9 | Distributed By Gooyaabi Templates
Powered by Blogger.