Sesión 7

En la séptima sesión hemos comenzado a realizar programas con interface gráfica.

Para este cometido hemos usado el modulo que python trae por defecto y que provee de los elementos fundamentales y más comunes que se utilizan en el diseño de interfaces gráficas de usuarios: tkinter.

A lo largo de esta sesión hemos trabajado lo siguiente:

  • Diferentes formas de importar módulos en python.
  • Objetivo y funcionalidad del módulo tkinter.
  • Concepto de interface gráfica de usuario (GUI).
  • Concepto de objeto, propiedad, evento.
  • El objeto ventana y el bucle principal.
  • Algunas propiedades de las ventanas.
  • Objetos Label (etiquetas) y sus propiedades.
  • Objetos  Button (botones) y sus propiedades.

Para comprender los contenidos que hemos enumerado anteriormente se han realizado varios programas de ejemplo.

Programa 1:

El primero de ellos ha sido únicamente para mostrar las diferentes maneras de importar un módulo en python:

Por ejemplo: podemos importar el módulo math con la instrucción:

import math

Y a partir de este momento, podemos usar las funciones que contiene dicho módulo de la siguiente forma:

para usar la función sqtr, escribimos math.sqrt(25) y obtendríamos 5 como resultado.

Sin embargo, si importamos el mismo módulo math mediante la instrucción:

from math import *

A partir de este momento podemos usar todas las funciones que contiene el módulo math directamente:

sqrt(25) y obtendríamos como resultado el valor 5.

En este primer programa vamos a usar la función sqrt, el valor de la constante pi y además vamos a definir una función que calcula el área de un círculo pasándole el radio como parámetro.

from math import *

def areac(radio):
    a=pi*radio**2
    return a

print('Voy a calcular el área de un círculo')
print('El radio vale 5')
print('El area vale', areac(5))
print(areac(4))
print(areac(10))
print(areac(1))

print('La raiz de 5 es',sqrt(5))

Este ejercicio nos ha servido fundamentalmente para introducir la forma habitual de importar el módulo tkinter y para repasar la creación de funciones definidas por nosotros mismos, las cuales las usaremos para enlazarlas a los botones que vamos a crear en la interface de usuario.

Programa 2:

Este es el primer programa en el que vamos a desarrollar una interface gráfica de usuario, para lo cual usaremos el módulo tkinter que importaremos en nuestro programa de la forma: from tkinter import *

A partir de este momento creamos una variable que hemos llamado ventana que será el objeto que identificará a la ventana donde se va a desarrollar la interface del programa.

ventana=Tk() es la instrucción que hace que el programa cree la ventana.

En este momento he insistido en el bucle principal del programa dentro de una interface gráfica de usuario, es decir, en la instrucción:

ventana.mainloop()

Instrucción que hace que el programa se quede a la espera de los diferentes eventos que se puedan producir por parte del usuario.

Entre las dos instrucciones que acabamos de mostrar, iremos introduciendo los diferentes objetos que irán formando nuestra interface de usuario.

from tkinter import *

def pulsar():
    etiqueta.config(text='Hola')

ventana=Tk()
ventana.title('GUI 1 - Ejemplo')
ventana.config(bg='yellow')
ventana.geometry('600x400')

etiqueta=Label(ventana,text='Programa con interface gráfica')
etiqueta.place(x=50,y=200)

boton=Button(ventana,text='Pulsar',command=pulsar)
boton.place(x=300,y=100)

ventana.mainloop()

En el código anterior podemos observar como en primer lugar se han configurado algunas propiedades de la ventana:

Con el método title, hemos configurado el título de la ventana.

Con el método geometry, le hemos indicado las dimensiones alto x ancho.

Y con el método config, le hemos indicado que a la propiedad bg le asigne el valor ‘yellow’. Es decir, a la propiedad bg (background que es el color de fondo de la pantalla), le hemos asignado el color amarillo.

Posteriormente hemos añadido 2 objetos, una etiqueta (Label) y un botón (Button). Los cuales hemos ubicado en el emplazamiento c e y correspondientes. Hay que destacar que la x indica el desplazamiento horizontal (un valor positivo indica desplazamiento hacia la derecha), la y indica el desplazamiento vertical (un valor positivo indica desplazamiento hacia abajo). El x=0 y=0 corresponde con la esquina superior izquierda de la ventana.

El resultado que obtenemos con este código es la imagen siguiente:

Finalizamos este primer programa indicando que en el botón con la propiedad command le indicamos la función que se debe ejecutar cuando el usuario pulse el botón.

En esta ocasión la función lo único que hace es cambiar la propiedad text del objeto etiqueta.

Programa 3:

En este programa vamos a practicar con lo aprendido en el programa anterior. Vamos a desarrollar un programa con interface gráfica  que se muestre y haga lo siguiente:

  • La interface gráfica debe ser una ventana con fondo amarillo y de dimensiones 600 x 300 píxeles.
  • La ventana debe tener fondo amarillo claro (beige) y como título de la ventana el texto: Ejercicio 1 – GUI
  • En la ventana deben mostrarse 2 etiquetas y 2 botones.
  • Las etiquetas mostrarán inicialmente los textos: Números del 1 al 10 y Números del 1000 al 2000.
  • Los botones deben mostrar el texto Pulsar.
  • Al pulsar en los botones deben generarse números aleatorios y mostrarse en las etiquetas.
  • Al pulsar el botón 1 se debe generar un número aleatorio entre 1 y 10 y mostrarlo en la etiqueta 1.
  • Al pulsar el botón 2, se debe generar un número aleatorio entra 1000 y 2000 y mostrarlo en la etiqueta 2.

El aspecto que debe tener el programa debe ser similar a las imágenes siguientes:

El código de este programa es el siguiente:

from tkinter import *
from random import *

def pulsar1():
    n=randint(1,10)
    et1.config(text=n)
    
def pulsar2():
    n=randint(1000,2000)
    et2.config(text=n)
    
ventana=Tk()
ventana.title('Ejercicio 1 - GUI')
ventana.config(bg='beige')
ventana.geometry('600x300')

et1=Label(ventana,text='Números (1 al 10)',font=('Verdana',24))
et1.place(x=10,y=10)

et2=Label(ventana,text='Números (1000 al 2000)',font=('Ubuntu',24))
et2.place(x=300,y=10)

bt1=Button(ventana,text='Pulsar',command=pulsar1)
bt1.place(x=10,y=100)

bt2=Button(ventana,text='Pulsar',command=pulsar2)
bt2.place(x=300,y=100)

ventana.mainloop()

Algunas fotos de esta sesión: