IN1007 – Programación

Interfaz Gráfica de Usuario – Modulo tkinter

Raúl Valenzuela
[email protected]

Instituto de Ciencias de la Ingenierı́a

Universidad de O’Higgins

Presentación diseñada por Alex Baumgartner

Interfaz Gráfica de Usuario tkinter

A menudo, los programas usan interfaces gráficas para interactuar con el

usuario de una manera más conveniente.
Python ofrece múltiples opciones para hacer interfaces gráficas:
PyGObject
PySide2
tkinter
wxPython
...
De todas las opciones, tkinter es el método más utilizado.
tkinter es estándar en Python para el kit de interfaz gráfica Tk.
Usar el Modulo tkinter tkinter

Para crear una interfaz gráfica con tkinter tenemos que hacer1 :
1 Importar el módulo tkinter.
2 Crear la ventana principal.
3 Agregue cualquier número de widgets a la ventana principal.
4 Definir el evento (una función retrollamada) para cada widget.
Por ejemplo: que debe pasar si el usuario pulsa el botón.
5 Esperar hasta que la ventana principal se cierre.

1
Hay excepciones.
Hacer una Ventana Genérica tkinter

Una ventana vacı́a sin ningún widget:

1 # i m p o r t a r e l mó d u l o t k i n t e r
2 import t k i n t e r
3 # c r e a r una v e n t a n a p r i n c i p a l
4 v e n t a n a = t k i n t e r . Tk ( )
5 # e s p e r a r hasta e l u s u a r i o c i e r r e l a ventana
6 ventana . mainloop ()

El tı́tulo por defecto es tk. Lo podemos cambiar:

1 import t k i n t e r
2 v e n t a n a = t k i n t e r . Tk ( )
3 # Dar a l a v e n t a n a un t ı́ t u l o
4 v e n t a n a . t i t l e ( " Hola " )
5 # Anchura y a l t u r a de l a v e n t a n a
6 v e n t a n a . g e o m e t r y ( "200x100" )
7 ventana . mainloop ()
Hacer un Botón tkinter

Un botón esta representado por la clase Button. Las clases que

representan componentes de la interfaz gráfica llamamos widgets.
Vamos a utilizar un ejemplo para explicar como funciona:

1 import t k i n t e r as t k # ” a s ” p a r a d e f i n i r una a b r e v i a t u r a
2 v = t k . Tk ( )
3 v . t i t l e ( 'Mi ventana ' )
4
5 d e f hola ( ) : # d e f i n i r e l evento ( retrollamada )
6 p r i n t ( " Hola Mundo " )
7 b= t k . B ut to n ( v , t e x t='¡ Di hola ! ' , w i d t h=3 0 , command=hola )
8 b . pack() # p o s i c i o n a r e l b o t ón en l a v e n t a n a
9
10 v . mainloop ()

Hay diferentes posibilidades para organizar los widgets en las ventanas principales:
pack(): organizar los widgets en bloques.
grid(): organizar los widgets en una tabla.
place(): organizar los widgets en posiciones especı́ficas.
Un Evento Más Complejo tkinter

El evento puede hacer cualquiera causa, incluso cerrar la ventana:

1 import t k i n t e r a s t k
2 v = t k . Tk ( )
3 v . t i t l e ( 'Mi ventana ' )
4
5 def hola ( ) :
6 p r i n t ( " Hola Mundo " )
7 f = open ( " adios . txt " , "w" )
8 f . w r i t e ( " Adios !" )
9 f . close ()
10 v. destroy () # La c l a s e Tk o f r e c e e l metodo d e s t r o y
11
12 b= t k . B ut to n ( v , t e x t='¡ Di hola ! ' , w i d t h=3 0 , command=h o l a )
13 b . pack ( )
14
15 v . m a i n l o o p ( )
16
17 # E s t e c ó d i g o s e e j e c u t a d e s p u é s de c e r r a r l a v e n t a n a
18 p r i n t ( " Listo " )
El Widget Button (Botón) tkinter

El widget Button ofrece los siguientes opciones para configurar el botón:

command: el evento que ocurre cuando el usuario presiona el botón.
width: el ancho del botón.
height: la altura del botón.
image: para poner una imagen en el botón.
font: la fuente en la etiqueta del botón.
bg: el color de fondo.
activeforeground: el color de la fuente cuando el botón está activado.
activebackground: el color de fondo cuando el botón está activado.
Mensajes Estándar tkinter

El modulo tkinter ofrece unos mensajes estándares para facilitar la

interacción con el usuario. Los tipos de mensajes son:
showinfo( "tı́ tulo " , " mensaje " , opciones. . . )
showwarning( "tı́ tulo " , " mensaje " , opciones. . . )
showerror( "tı́ tulo " , " mensaje " , opciones. . . )
askquestion( "tı́ tulo " , " mensaje " , opciones. . . )
askokcancel( "tı́ tulo " , " mensaje " , opciones. . . )
askyesno( "tı́ tulo " , " mensaje " , opciones. . . )
askretrycancel( "tı́ tulo " , " mensaje " , opciones. . . )

Para usar mensajes estándares hay que importar por separado:

1 from t k i n t e r import m e s s a g e b o x
Ejemplo Con un Mensaje Estándar tkinter

El evento puede hacer cualquiera causa, incluso generar mensajes:

1 import t k i n t e r a s t k
2 from t k i n t e r import m e s s a g e b o x
3
4 v= t k . Tk ( )
5 v . t i t l e ( 'Mi ventana ' )
6
7 def hola ( ) :
8 i f m e s s a g e b o x . a s k y e s n o ( ' Confirmar ' , '¿ Cerrar app ? ' ) :
9 m e s s a g e b o x . s h o w i n f o ( ' Adios ' , ' Hasta la proxima ! ' )
10 v . destroy ()
11
12 b= t k . B ut to n ( v , t e x t='¡ Di hola ! ' , w i d t h=3 0 , command=h o l a )
13 b . pack ( )
14
15 v . mainloop ()
Mensajes Estándar Sin Ventana Principal tkinter

Se puede esconder la ventana principal y usar un mensaje estándar solo.

Eso es una excepción y funciona diferente:
1 import t k i n t e r
2 from t k i n t e r import m e s s a g e b o x
3
4 r a i z = t k i n t e r . Tk ( )
5 r a i z . withdraw ( ) # esconder l a ventana p r i n c i p a l
6
7 # m o s t r a r m e n s a j e s e s t á n d a r
8 m e s s a g e b o x . s h o w e r r o r ( " Error " , " Mensaje de error " )
9 m e s s a g e b o x . s h o w w a r n i n g ( " Atenci ón" , " Mensaje de alarma " )
10 m e s s a g e b o x . s h o w i n f o ( " Informaci ón" , " Una informaci ón" )
11
12 # l a s s i g u i e n t e s p r e g u n t a s d e v u e l v e n un v a l o r b o o l e a n o
13 x = m e s s a g e b o x . a s k y e s n o ( ' Pregunta ' , 'Una pregunta ' )
14 x = m e s s a g e b o x . a s k o k c a n c e l ( ' Pregunta ' , 'Una pregunta ' )
15 x = m e s s a g e b o x . a s k r e t r y c a n c e l ( ' Pregunta ' , 'Una pregunta ' )
16
17 # a s k q u e s t i o n d e v u e l v e un s t r i n g
18 z = m e s s a g e b o x . a s k q u e s t i o n ( ' Pregunta ' , 'Una pregunta ' )
Mostrar Texto tkinter

Para mostrar texto en una ventana se usa la clase Message:

1 import t k i n t e r a s t k
2 v = t k . Tk ( )
3 v . t i t l e ( ' Rancagua ' )
4
5 t = " Rancagua es una ciudad de Chile y el capital de la \
6 regi ón del Libertador General Bernardo O ' Higgins "
7 m e s sa g e V a r = Message ( v , t e x t=t , w i d t h=2 2 0 )
8 m e s sa g e V a r . c o n f i g ( bg=' lightyellow ' )
9 m e s sa g e V a r . pack ( )
10
11 b = t k . Bu tt on ( v , t e x t=' Cerrar ' , command=v . d e s t r o y )
12 b . pack ( )
13
14 v . mainloop ()

Nota 1: se puede utilizar la barra invertida (backslash) \ para usar más de una
lı́nea para comandos largos o texto largo.
Nota 2: en tkinter el método config puede ser utilizado para definir y
reemplazar argumentos opcionales.
Mostrar Etiqueta (Label) tkinter

Para mostrar una etiqueta se usa la clase Label:

1 from t k i n t e r import ∗
2 v = Tk ( )
3 v . t i t l e ( ' Rancagua ' )
4
5 w = L a b e l ( v , t e x t=' Pulsar el bot ón: ' , w i d t h=3 0 , a n c h o r='e ' )
6 w . g r i d ( row=0 , column=0 ) # o r g a n i z a r w i d g e t s en una t a b l a
7
8 def a c c i o n ( ) :
9 w [ ' text ' ] = ' Otra vez : '
10
11 b = Butt on ( v , t e x t='¡ Di hola ! ' , w i d t h=3 0 , command=a c c i o n )
12 b . g r i d ( row=0 , column=1 ) # o r g a n i z a r w i d g e t s en una t a b l a
13
14 v . mainloop ()

Nota: se puede definir la alineación del texto con el atributo anchor.

Posibles valores son: n, ne, e, se, s, sw, w, nw, center
(n = north, e = east, s = south, w = west)
Entrada del Usuario tkinter

Se puede mostrar un cuadro de entrada para solicitar al usuario que

ingrese texto. Para generar un cuadro de entrada se utiliza la clase Entry:
1 from t k i n t e r import ∗
2 v = Tk ( )
3 e = E n t r y ( v , w i d t h=5 0 )
4 e . pack ( )
5 v . mainloop ()

La clase Entry ofrezca unos métodos importantes:

e . d e l e t e ( 0 , END)
e . i n s e r t ( 0 , " valor por defecto " )
s = e . get ()
En vez de s = e . g e t ( ) se puede usar StringVar:
1 sv = S t r i n g V a r ( )
2 E n t r y ( v , show="*" , t e x t v a r i a b l e=sv ) . pack ( )
3 ...
4 s = sv . g e t ( ) # Obtener l a entrada .

Se puede hacer un cuadro de entrada de una clave con la opción show="*"

Ejemplo: Entrada del Usuario tkinter

1 from t k i n t e r import ∗
2 v = Tk ( )
3 v . t i t l e ( ' Precio Alimento ' )
4
5 L a b e l ( v , t e x t=' Alimento : ' ) . g r i d ( row=0 )
6 L a b e l ( v , t e x t=' Precio : ' ) . g r i d ( row=1 )
7
8 nombre = E n t r y ( v )
9 p r e c i o = Entry ( v )
10 nombre . g r i d ( row=0 , column=1 )
11 p r e c i o . g r i d ( row=1 , column=1 )
12
13 def a c c i o n ( ) :
14 p r i n t ( nombre . g e t ( ) + ': ' + p r e c i o . g e t ( ) )
15 nombre . d e l e t e ( 0 , END)
16 p r e c i o . d e l e t e ( 0 , END)
17 b = Butt on ( v , t e x t=' Listo ' , w i d t h=3 0 , command=a c c i o n )
18 b . g r i d ( row=2 , c o l u m n s p a n=2 )
19
20 v . mainloop ()
Casilla de Verificación (Checkbox) tkinter

Es un elemento de interacción que permite hacer selecciones múltiples de un

conjunto de opciones. Cada opción esta representada por un objeto Checkbutton.
Para verificar si una opción esta seleccionada podemos usar BooleanVar de la
misma forma que se usa StringVar para obtener una entrada arbitraria.

1 from t k i n t e r import ∗
2 v = Tk ( )
3 v . t i t l e ( ' Seleccionar Alimentos ' )
4 v . g e o m e t r y ( "200x100" )
5
6 o1 = B o o l e a n V a r ( )
7 C h e c k b u t t o n ( v , t e x t='pan ' , v a r i a b l e=o1 ) . pack ( )
8 o2 = B o o l e a n V a r ( )
9 C h e c k b u t t o n ( v , t e x t=' leche ' , v a r i a b l e=o2 ) . pack ( )
10 o3 = B o o l e a n V a r ( )
11 C h e c k b u t t o n ( v , t e x t=' jugo ' , v a r i a b l e=o3 ) . pack ( )
12
13 v . mainloop ()
14
15 p r i n t ( o1 . g e t ( ) , o2 . g e t ( ) , o3 . g e t ( ) )
La Ancla (anchor) tkinter

Se puede definir la alineación con el atributo anchor. Por ejemplo:

1 from t k i n t e r import ∗
2 v = Tk ( )
3 v . t i t l e ( ' Seleccionar Alimentos ' )
4 v . g e o m e t r y ( "200x100" )
5
6 o1 = B o o l e a n V a r ( )
7 C h e c k b u t t o n ( v , t e x t='pan ' , v a r i a b l e=o1 ) . pack ( a n c h o r='w ' )
8 o2 = B o o l e a n V a r ( )
9 C h e c k b u t t o n ( v , t e x t=' leche ' , v a r i a b l e=o2 ) . pack ( a n c h o r='w ' )
10 o3 = B o o l e a n V a r ( )
11 C h e c k b u t t o n ( v , t e x t=' jugo ' , v a r i a b l e=o3 ) . pack ( a n c h o r='w ' )
12
13 v . mainloop ()
14
15 p r i n t ( o1 . g e t ( ) , o2 . g e t ( ) , o3 . g e t ( ) )

Posibles valores para anchor son: n, ne, e, se, s, sw, w, nw, center
(n = north, e = east, s = south, w = west)
Botón de opción (Radio button) tkinter

Es un elemento de interacción al usuario elegir una de un conjunto de opciones.

Cada opción esta representada por un objeto Radiobutton.
Para determinar cual opción esta seleccionada usamos IntVar de la misma forma
que se usa BooleanVar. El valor de la variable corresponde al valor de la opción
seleccionada definido por v a l u e = . . .

1 from t k i n t e r import ∗
2 v = Tk ( )
3 v . t i t l e ( ' Seleccionar un Alimento ' )
4 v . g e o m e t r y ( "200x100" )
5
6 o = IntVar ()
7 R a d i o b u t t o n ( v , t e x t='pan ' , v a r i a b l e=o , v a l u e=1 ) . pack ( )
8 R a d i o b u t t o n ( v , t e x t=' leche ' , v a r i a b l e=o , v a l u e=2 ) . pack ( )
9 R a d i o b u t t o n ( v , t e x t=' jugo ' , v a r i a b l e=o , v a l u e=3 ) . pack ( )
10
11 v . mainloop ()
12
13 print (o . get () )

Nota: por ser caso que el usuario no selecciona ninguna opción el valor sera 0.
Otros Elementos de Interacción tkinter

Hay otros elementos de interacción:

Frame
Listbox
Menu
Scale
Scrollbar
Text

El último widget que veremos se llama canvas y parece una hoja para dibujar.
Se usa para dibujar objetos geométricos.
Una Hoja para Dibujar tkinter

El widget Canvas es como una hoja de papel.

Hay que definir el tamaño de la hoja. Por ejemplo:
1 from t k i n t e r import ∗
2 v = Tk ( )
3 c = Canvas ( v , w i d t h=2 4 0 , h e i g h t=1 0 0 )
4 c . pack ( )

La hoja c que se queda adentro de la ventana v se ve ası́:

(0, 0)

(240, 100)
Dibujar una Linea tkinter

1 from t k i n t e r import ∗
2 v = Tk ( )
3 c = Canvas ( v , w i d t h=2 4 0 , h e i g h t=1 0 0 )
4 c . pack ( )

Si queremos dibujar una linea, tenemos que dar la coordenada (x1 , y1 ) donde
empieza la linea y la coordenada (x2 , y2 ) donde termina la linea:
1 c . c r e a t e l i n e ( 40 , 30 , 200 , 70 )

La hoja c con la linea dibujada:

(0, 0)

(40, 30)

(200, 70)

(240, 100)
Dibujar Objetos Geométricos tkinter

El widget Canvas nos da la posibilidad de dibujar objetos geométricos:

1 from t k i n t e r import ∗
2 v = Tk ( )
3 v . t i t l e ( 'IN1007' )
4
5 c = Canvas ( v , w i d t h=2 4 0 , h e i g h t=1 0 0 )
6 c . pack ( )
7
8 c . c r e a t e l i n e ( 20 , 20 , 220 , 80 )
9 c . c r e a t e l i n e ( 20 , 80 , 220 , 20 , f i l l =" blue " , d a s h =(4 , 4 ) )
10
11 c . c r e a t e r e c t a n g l e ( 80 , 40 , 160 , 60 , f i l l ="# ffaaff " )
12
13 Button ( v , t e x t=' cerrar ' , command=v . d e s t r o y ) . pack ( )
14
15 v . mainloop ()
Dibujar Objetos Geométricos tkinter

El widget Canvas nos da la posibilidad de dibujar objetos geométricos:

1 from t k i n t e r import ∗
2 v = Tk ( )
3 v . t i t l e ( 'IN1007' )
4
5 c = Canvas ( v , w i d t h=2 4 0 , h e i g h t=1 0 0 )
6 c . pack ( )
7
8 c . c r e a t e r e c t a n g l e ( 80 , 40 , 160 , 60 , f i l l ="# ffaaff " )
9
10 c . c r e a t e l i n e ( 20 , 20 , 220 , 80 )
11 c . c r e a t e l i n e ( 20 , 80 , 220 , 20 , f i l l =" blue " , d a s h =(4 , 4 ) )
12
13 Button ( v , t e x t=' cerrar ' , command=v . d e s t r o y ) . pack ( )
14
15 v . mainloop ()
Dibujar Objetos Geométricos tkinter

El widget Canvas nos da la posibilidad de dibujar objetos geométricos:

1 from t k i n t e r import ∗
2 v = Tk ( )
3 v . t i t l e ( 'IN1007' )
4
5 c = Canvas ( v , w i d t h=2 4 0 , h e i g h t=1 0 0 )
6 c . pack ( )
7
8 c . c r e a t e o v a l ( 80 , 40 , 160 , 60 , f i l l ="# ffaaff " )
9
10 c . c r e a t e l i n e ( 20 , 20 , 220 , 80 )
11 c . c r e a t e l i n e ( 20 , 80 , 220 , 20 , f i l l =" blue " , d a s h =(4 , 4 ) )
12
13 Button ( v , t e x t=' cerrar ' , command=v . d e s t r o y ) . pack ( )
14
15 v . mainloop ()
El Widget Canvas tkinter

El widget Canvas ofrece los siguientes opciones:

width: el ancho del canvas.
height: la altura del canvas.
bg: el color de fondo.
bd: el ancho del borde en pı́xeles.
Ítemes para dibujar: (x1 , y1 )
create text(x, y, text= " ... " , opciones. . . )
create line(x1 , y1 , x2 , y2 , opciones. . . )
create rectangle(x1 , y1 , x2 , y2 , opciones. . . )
create oval(x1 , y1 , x2 , y2 , opciones. . . ) (x2 , y2 )
create polygon(x1 , y1 , x2 , y2 , x3 , y3 , . . . , xn , yn , opciones. . . )
img = PhotoImage(file= " ... " , opciones. . . )
create image(x, y, image=img, opciones. . . )
En el caso de create text, la coordinada (x, y) define el centro del texto.
No tiene sentido poner el centro del texto en la coordinada (0, 0), ya que el texto
se cortará.
Más Información tkinter

Se puede encontrar más información sobre tkinter en las siguientes paginas:

https://wiki.python.org/moin/TkInter
https://anzeljg.github.io/rin2/book2/2405/docs/tkinter/index.html
https://www.geeksforgeeks.org/python-gui-tkinter/