Definición: Interfaz Gráfica de Usuario (IGU)

Interfaz Gráfica de Usuario (IGU)

Paquete utilizado para crear interfaces gráficas. tkinter.

Nociones básicas

Paso 1. Importar tkinter

Para trabajar con una interfaz gráfica lo primero que hay que hacer es importar el módulo tkinter.

Sintaxis

from tkinter import *

import tkinter

Utilización

from tkinter import *
ventana = Tk() 
# damos título a la ventana
ventana.title("Mi primer Ejercicio")
# la hacemos de dimensiones fijas
ventana.resizable(False, False)
# ancho y alto de la ventana
ventana.geometry("450x250") 
# etiqueta del título del formulario (no de la ventana)
ventana.mainloop()

import tkinter

ventana = tkinter.Tk() 
# damos título a la ventana
ventana.tkinter.title("Mi primer Ejercicio")

# la hacemos de dimensiones fijas
ventana.tkinter.resizable(False, False)
# ancho y alto de la ventana
ventana.tkinter.geometry("450x250") 
# etiqueta del título del formulario (no de la ventana)
ventana.tkinter.mainloop()

Paso 2: Crear ventana principal

Es el lugar donde se van a colocar todos los componentes (widget). La ventana tiene varias ¿ como son: nombre de la ventana (=Tk()), titulo (title ), tamaño (resizable) y dimensiones(geometry).

Métodos Básicos

• geometry()

  • Establece o devuelve las dimensiones y la posición de la ventana.

  • Ejemplo: ventana.geometry("400x300+100+100") especifica un tamaño de 400x300 y la posiciona a 100 píxeles de los bordes izquierdo y superior de la pantalla.

• title()

  • Establece el título de la ventana.

  • Ejemplo: ventana.title("Mi Aplicación") asigna "Mi Aplicación" como el título de la ventana.

• mainloop()

  • Inicia el bucle de eventos de Tkinter, que es necesario para que la ventana responda a eventos como clics de botón y entradas del teclado.

  • Ejemplo: ventana.mainloop().

• destroy()

  • Destruye la ventana, lo cual termina la aplicación de Tkinter si es la ventana principal.

  • Ejemplo: ventana.destroy().

Sintaxis:

ventana = Tk()

ventana.title("Primer Ejercicio GIU")

ventana.resizable(False, False)

ventana.geometry("450x450")

ventana.mainlop()

Métodos para la Visibilidad y Estado

withdraw()

• Oculta la ventana.

• Ejemplo: ventana.withdraw().

deiconify()

• Restaura una ventana que ha sido minimizada o oculta.

• Ejemplo: ventana.deiconify().

iconify()

• Minimiza la ventana.

• Ejemplo: ventana.iconify().

Métodos para Configurar Aspectos Visuales

config() o configure()

Para configurar un objeto tkinter. Algunas de las opciones comunes incluyen: bg (background), fg (foreground), relief, font, anchor, justify y borderwidth. Su sintaxis:

widget.config(opciones)

Ejemplo: ventana.config(background='blue').

attributes()

• Modifica atributos de la ventana a un nivel más bajo, como la transparencia, si la ventana está habilitada para estar siempre encima, etc.

• Ejemplo: ventana.attributes('-alpha', 0.5) establece la ventana a 50% de transparencia.

Paso 3: Crear widget

Label

Para crear la etiqueta Label se debe dar un nombre Nombre de la etiqueta = Label(nombre de la ventana principal, text="texto que se quiera visualizar"), tipo de letra Font, tamaño, y a continuación se debe indicar su posición grid.

Sintaxis

Nombre_etiqueta = Label(ventana, text="Información que se quiere visualizar", font= "Arial ", 50))

Su posición grid, su posición fila y letra columna.

etiqueta.grid(column=0, row=0)

Button

Los botones pueden contener texto o imágenes y se les puede asociar funciones o métodos. Permite realizar , Button, puede contener texto, Text y la acción que queremos que realice command= lo que queremos realizar en caso, de que ción que necesitamos ejecutar cuando se haga click en el botón, e indicar en que lugar va a aprecer grid.

Sintaxis

boton = Button(window, text="texto a visualizar")

boton.grid(column=1, row=0)

Command

Permite llamar a funciones o métodos.

Método Destroy

command=ventana.destroy. Salir de la ventana

El método destroy es utilizado para cerrar una ventana y destruir todos los widgets que contiene. Es un método de los widgets y ventanas (que son también widgets en Tkinter), por lo tanto, puedes llamar a destroy en cualquier widget, y esto cerrará la ventana que lo contiene y todos sus subwidgets. Si destroy() se llama en la ventana raíz, se cerrarán todas las ventanas y widgets de la aplicación, lo que generalmente resulta en la terminación de la aplicación, dado que no quedan más eventos para procesar.

Método quit

El método quit() es utilizado para detener el bucle principal de Tkinter (mainloop). Cuando quit() es llamado, Tkinter finaliza el procesamiento de eventos y sale de mainloop. A diferencia de destroy(), quit() no destruye la ventana principal ni los widgets automáticamente; simplemente detiene la ejecución del bucle de eventos. Esto significa que después de llamar a quit(), la ventana aún podría mostrarse en la pantalla hasta que el programa complete su ejecución o se llame explícitamente a destroy() para limpiar los recursos de la ventana.

command=quit. Salir de la ventana

Diferencias quit y destroy

1. Objetivo Principal:

   • destroy: Destruye la ventana y los widgets, cerrando la aplicación si se llama en la ventana raíz.

   • quit: Detiene el mainloop, terminando el procesamiento de eventos sin destruir la ventana o widgets.

2. Uso Común:

   • destroy es comúnmente usado en aplicaciones donde se necesita asegurar que todos los recursos de la interfaz gráfica sean limpiados inmediatamente después de que el usuario decide cerrar la aplicación.

   • quit puede ser útil en situaciones donde necesitas detener el bucle de eventos por alguna razón, pero no necesariamente quieres cerrar la ventana de inmediato.

Entry

Permite introducir o visualizar información visualizar información, Entry(ventana,width=10) y su tamaño Width Lugar donde debe aparecer:

Sintaxis:

area=Entry(ventana,width=10)
area.pack()

Nombre= Entry(ventana,width=10)
Nombre.grid(column=1, row=0)

Listbox

Lista de elementos

lista_elementos=Listbox(ventana,width=50)
lista_elementos.pack()
#
lista_elementos=Listbox(ventana,Listvariable=datos,width=50)
lista_elementos.pack()

curselection()

Curselection() es un método de la clase Listbox de Tkinter que se utiliza para obtener una tupla con los índices (índice comienza en 0) de las filas seleccionadas en el widget. El objetivo principal del método curselection() es recuperar los índices o rangos del cuadro desplegable y usarlos para realizar acciones adicionales, como mostrar información relacionada con cada elemento.La sintaxis de curselection() es la siguiente:

listbox.curselection()

Radiobutton

Radiobutton(root,
           text="Esta es la primera opción.",
           value=1,
           variable=x)
Radiobutton.grid(colum=2,row=2)

Checkbutton

Seleccionar distintas opciones

Checkbutton(donde se crea,text="Texto a visualizar ",variable=nombre,onvalue=1, offvalue=0)

Eleccion= Checkbutton(marco,text="Automatica",variable=especialidad2,onvalue=1, offvalue=0)
Eleccion.grid(column=2,row=2)

Menú

Es la base de los menús que se pueden visualizar.

from tkinter import *

ventana = Tk()

def hola():
    print ("Hola!")

# Crear el menu principal
menubarra = Menu(ventana)

Config

Métodos del menú

add().Añadir ítems a los menús

add_cascade().Añadir los menús a la barra de menús

add_command(). Añadir ítems a los menús

ventana = Tk()

def ver():
    print ("ejemplo")

# Crear el menu principal
menubarra = Menu(ventana)
archivo=Menu(menubarra, tearoff=0)
ejemplos=Menu(menubarra, tearoff=0)
menubarra.add_command(label="Opción 1", command=ver)
menubarra.add_command(label="Opción 2", command=ver)
menubarra.add_command(label="Salir", command=ventana.destroy)
# Mostrar el menu
ventana.config(menu=menubarra)

# Mostrar la ventana
ventana.mainloop()

Marco. Frame-LabelFrame

Un marco(Frame) es un tipo especial de widget que puede contener otros widgets.

LabelFrame es un marco con una cabecera de texto y una caja rodeándolo. LabelFrame(donde quiero que aparezca,text=“Aparece“).

Paso 3. Posicionamiento de los widgets

Hay 3 métodos de posicionamiento de los widgets, pack(), grid() y place().

Los métodos pack() y grid() son dos de las formas más comunes de administrar el posicionamiento de widgets dentro de una ventana. Ambos son administradores de geometría, pero trabajan de manera bastante diferente y su uso depende del diseño específico que necesites para tu aplicación.

Método pack()

Este método visualiza y ubica los widgets en una posición. Esta se puede cambiar a través de sus atributos. Los widget se organizan de manera relativa.

Los widgets se hace teniendo en cuenta los lados de una ventana: arriba, abajo, derecha e izquierda.

Características principales:

• Automático: Coloca automáticamente los widgets uno tras otro según se definen.

• Orientación: Puedes elegir si los widgets se apilan vertical u horizontalmente usando el argumento side, que puede ser TOP, BOTTOM, LEFT, o RIGHT.

• Expansión y relleno: Permite expandir el widget para llenar el espacio adicional y especificar el relleno (interno y externo) con expand, fill, y padx/pady.

side

Este método puede ajustar los botones (side=), poniendo cuatro opciones:

“top“o TOP

“bottom" o BOTTOM

“left“ o LEFT

“right“ o RIGHT

Fill

Llenar la ventana. Para Rellenas las columnas, fill=“x“ o fill=X, filas fill=“y“ o fill=Y o bien ambas Fill=“both”

Ejemplo

ventana = tk.Tk()
ventana.geometry("300x200")

boton_x = tk.Label(ventana, text="Rellena X", bg="red", height=5)
boton_x.pack(fill="x")
boton_y = tk.Label(ventana, text="Rellena Y", bg="green", width=10)
boton_y.pack(side="left", fill="y")
ventana.mainloop()

Ejemplo

Etiqueta_area=Label(text="este es un ejemplo")
Etiqueta_area.pack()

Método grid()

Trata una ventana como si fuera una cuadrícula, formada por filas y columnas como un tablero de ajedrez, donde es posible situar mediante una coordenada (fila, columna) los widgets.

Características principales:

• Control preciso: Ofrece control sobre la fila y la columna donde se coloca el widget.

• Tamaño de las celdas: Puedes especificar cómo las celdas cambian su tamaño con el contenido utilizando rowconfigure y columnconfigure en el contenedor para manejar el peso del redimensionamiento.

• Espaciado: Permite ajustar el espacio entre widgets usando padx, pady, además de ipadx e ipady para el relleno interno.

rowspan y columnspan

Número de columnas y Filas que se desea posicionar.

pady y padx

Para crear un espacio determinado

Ejemplo

from tkinter import *

ventana = Tk()

for r in range(0, 5):
    for c in range(0, 5):
        celda = Entry(ventana, width=10)
        celda.grid(row=r, column=c)
        celda.insert(0, '({}, {})'.format(r, c))

ventana.mainloop()

sticky

Permite anclar su posición.Las opciones disponibles para sticky son las siguientes: N, S, E, W (para Norte, Sur, Este y Oeste respectivamente). Su sintaxis:

widget.grid(sticky = opción)

Diferencias pack()y grid()

1. Control de disposición: pack() es más simple y rápido para diseños lineales, mientras que grid() ofrece un control más detallado y es mejor para diseños complejos y tabulares.

2. Exclusividad: No puedes usar pack() y grid() en el mismo contenedor (como un mismo frame). Debes escoger uno de los dos métodos para administrar los widgets dentro de cada contenedor individual.

3. Flexibilidad: grid() es más flexible para diseñar interfaces que requieren una disposición precisa de múltiples elementos, como formularios.

Método place()

place() es uno de los tres administradores de geometría disponibles (los otros dos son pack() y grid()), y se utiliza para posicionar widgets en una ubicación específica dentro de un contenedor (como un Frame o la ventana principal) mediante el uso de coordenadas absolutas o relativas.

Uso Básico de place()

El método place() permite colocar un widget especificando las coordenadas x e y, que definen la posición del widget en términos de píxeles desde el borde superior izquierdo del contenedor. También ofrece opciones avanzadas para el posicionamiento y dimensionamiento relativo, lo que puede ser muy útil para interfaces que deben adaptarse a diferentes tamaños de ventana.

Parámetros Comunes de place()

• x, y: Especifica la posición del widget en términos de píxeles desde el borde superior izquierdo del contenedor.

• relx, rely: Define la posición del widget como una fracción del ancho y la altura del contenedor, respectivamente. Por ejemplo, relx=0.5 y rely=0.5 colocarían el widget en el centro del contenedor.

• anchor: Determina desde qué parte del widget se aplican las coordenadas x e y. El valor por defecto es tk.NW (noroeste), lo que significa que las coordenadas especifican la posición del borde superior izquierdo del widget. Otros valores comunes incluyen tk.CENTER (centro), tk.SE (sureste), etc.

• width, height: Establece el ancho y la altura absolutos del widget en píxeles.

• relwidth, relheight: Establece el ancho y la altura del widget como fracciones del ancho y la altura del contenedor.

Ejemplo

import tkinter as tk

def ejemplo():
    ventana = tk.Tk()
    ventana.geometry("300x200")
    ventana.title("Mi primer Ejercicio")

    # Crear un botón que se posiciona absolutamente
    btn1 = tk.Button(ventana, text="Absoluto", bg="lightblue")
    btn1.place(x=20, y=50)

    # Crear un botón que usa posicionamiento relativo
    btn2 = tk.Button(ventana, text="Relativo", bg="lightgreen")
    btn2.place(relx=0.5, rely=0.5, anchor='center')

    ventana.mainloop()

ejemplo()

Variables de control: StringVar

Son objetos especiales que se asocian a los widgets para almacenar sus valores y su utilización en otras partes del programa. Pueden ser de tipo numérico, de cadena y booleano. En el momento de declararse puede darsele un valor inicial (Variable_valor = StringVar(value="Valor inicial").

Tipo

• entero = IntVar() # Declara variable de tipo entera

• flotante = DoubleVar() # Declara variable de tipo flotante

• cadena = StringVar() # Declara variable de tipo cadena

• booleano = BooleanVar() # Declara variable de tipo booleana

Método

set()

Se asigna un valor a una variable de control. id_art.set(1)

get()

get() obtiene el valor que tenga, en un momento dado.

Sintaxis

Variable = StringVar(value="Python para impacientes")

Codigo_articulo.set(1)

trace()

Permite monitorear y reaccionar a los cambios en el estado de esa variable. Las variables de Tkinter (StringVar, IntVar, DoubleVar, y BooleanVar).

trace() se emplea para "detectar" cuando una variable es leída.

trace_add

Permite especificar tres tipos de operaciones para las cuales una traza puede ser configurada:

• "write": Se ejecuta la función cuando la variable es modificada.

• "read": Se ejecuta la función cuando la variable es leída.

• "unset": Se ejecuta la función cuando la variable es eliminada.

Los modos puedes ser "w"escritura, "r" lectura y "u" actualización

variable.trace(callback=nombre_funcion, mode='w')

variable.trace_add("write", nombre_funcion)

Ejemplo

import tkinter as tk

def cambio_texto():
    # Esta función actualiza la etiqueta con el texto del campo de entrada
    etiqueta_texto.set(entrada_texto.get())

ventana = tk.Tk()
ventana.title("Cambio de Etiqueta tiempo real")
ventana.resizable(False, False)
ventana.geometry("850x250") 

# Crear una StringVar para vincular al Entry y al Label
entrada_texto = tk.StringVar()
etiqueta_texto = tk.StringVar()

# Configurar el Entry
entrada = tk.Entry(ventana, textvariable=entrada_texto)
entrada.pack(pady=10)

# Configurar el Label
texto = tk.Label(ventana, textvariable=etiqueta_texto)
texto.pack(pady=10)

# Trace para actualizar la etiqueta cuando el texto del Entry cambia
entrada_texto.trace_add("write", cambio_texto)

ventana.mainloop()

Explicación del código

1. Importar Tkinter: Primero, importamos Tkinter para poder utilizar sus widgets y funciones.

2. Función cambio_texto: Esta función se activa cada vez que el valor de entrada_texto cambia. Usa el método get() para obtener el texto actual del Entry y lo establece como el nuevo valor de etiqueta_texto, que actualiza la etiqueta.

3. Inicialización de Tkinter: Se crea la ventana principal (ventana) y se le pone un título.

4. Variables de Control: Se crean dos StringVar:

   • entrada_texto: Vinculada al Entry, almacena el texto ingresado.

   • etiqueta_texto: Vinculada al Label, almacena el texto que se muestra en la etiqueta.

5. Widget Entry: Un campo de entrada que permite a los usuarios ingresar texto. Está vinculado a entrada_texto.

6. Widget Label: Una etiqueta que muestra texto. Está vinculada a etiqueta_texto y se actualizará automáticamente cuando entrada_texto cambie debido a la traza establecida.

7. Configurar Trace: Se añade a entrada_texto para que cuando su contenido cambie (evento "write"), se llame a cambio_texto para actualizar la etiqueta.

8. Mainloop: El loop principal de Tkinter que mantiene la ventana abierta y procesa eventos como entradas del usuario.

Paso 4. Inicializar la ventana

Para abrir la ventana y gestionar eventos se utiliza la función nombre_ventana.mainloop().

Sintaxis:

ventana.mainloop()