MT104 – 2019-2 Interfaces Gráficas de Usuario (GUI)

Interfaces Gráficas de Usuario (GUI)

Contenido
1. Definición.................................................................................................................................................. 2
2. Metodología de diseño ............................................................................................................................. 2
2.1. Definición de Requisitos .................................................................................................................... 2
2.2. Diseño del sistema de software......................................................................................................... 2
2.3. Implementación y prueba de unidades ............................................................................................. 3
2.4. Integración y prueba de sistema ....................................................................................................... 3
2.5. Funcionamiento y mantenimiento .................................................................................................... 3
3. Librerías para desarrollo de GUI en Python.............................................................................................. 4
4. Librería tkinter .......................................................................................................................................... 4
4.1. Comprobar funcionalidad .................................................................................................................. 4
4.2. Importar librería ................................................................................................................................ 4
5. Componentes ........................................................................................................................................... 5
5.1. Ventana raíz ....................................................................................................................................... 5
5.2. Ventanas adicionales ......................................................................................................................... 6
5.3. Cuadros de dialogo ............................................................................................................................ 6
5.3.1. Información ............................................................................................................................ 6
5.3.2. Advertencia............................................................................................................................. 6
5.3.3. Error ........................................................................................................................................ 7
5.3.4. Si o no ..................................................................................................................................... 7
5.3.5. Aceptar o cancelar .................................................................................................................. 7
5.3.6. Reintentar o cancelar ............................................................................................................. 7
5.3.7. Si, no o cancelar ...................................................................................................................... 7
5.4. Widgets .............................................................................................................................................. 8
5.4.1. Marco – Frame ....................................................................................................................... 8
5.4.2. Botón – Button ....................................................................................................................... 8
5.4.3. Etiqueta de texto – Label ........................................................................................................ 8
5.4.4. Casilla de verificación – Checkbutton ..................................................................................... 9
5.4.5. Botón de opción – Radiobutton ........................................................................................... 10
5.4.6. Caja de texto – Entry ............................................................................................................ 11
5.4.7. Cuadro combinado – Combobox .......................................................................................... 11
5.4.8. Cuadro de lista – Listbox ....................................................................................................... 12
5.4.9. Barra de desplazamiento – Scrollbar .................................................................................... 12
5.4.10. Texto – Text ...................................................................................................................... 13
5.4.11. Barra de progreso – Progressbar...................................................................................... 13
5.4.12. Control deslizante – Scale ................................................................................................ 14
5.4.13. Spinner – Spinbox ............................................................................................................. 14
5.4.14. Separador – Separator ..................................................................................................... 14
5.4.15. Marco etiquetado – Labelframe....................................................................................... 15
5.4.16. Pestañas – Notebook ....................................................................................................... 15
5.4.17. Lienzo de dibujo – Canvas ................................................................................................ 16
6. Ejemplo de uso ....................................................................................................................................... 16

1
MT104 – 2019-2 Interfaces Gráficas de Usuario (GUI)

1. Definición
Una Interfaz Gráfica de Usuario (Graphical User Interface, GUI) es un programa que permite a los
usuarios interactuar de forma sencilla mediante un entorno visual conformado de imágenes y objetos
gráficos, haciendo que el uso del programa sea amigable. A lo largo del documento se le llamará
interfaz gráfica.

2. Metodología de diseño
El diseño de interfaces gráficas se encuentra alineado al diseño de software en general. La siguiente
metodología puede ser aplicada para el diseño de interfaces gráficas.

2.1. Definición de Requisitos

Se debe tomar los elementos funcionales requeridos, perfil de usuario, forma en que se acoplará al
flujo de trabajo del usuario, conocimiento de sistemas similares y preferencias del usuario respecto a la
interfaz.

Ejemplo:

El usuario requiere un programa que permita convertir grados Celsius (°C) a grados Fahrenheit (°F) y
viceversa. El usuario solamente desea ingresar la temperatura en la escala original, presionar un botón
para aplicar el cambio y obtener la temperatura en la escala opuesta. Las temperaturas resultado solo
requieren a lo mucho un decimal de precisión.

2.2. Diseño del sistema de software

Se debe plantear la arquitectura de la información, los flujos de información y procesos del sistema.
Dentro de este punto se define el bosquejo de la GUI.

Ejemplo:

De la definición de requisitos, se pueden plantear los puntos requeridos en esta etapa. Enfocándonos
particularmente en el bosquejo de la GUI, se presentan tres opciones que no son las únicas posibles.

2
MT104 – 2019-2 Interfaces Gráficas de Usuario (GUI)

Se recomienda definir al menos dos opciones de interfaz para dar al usuario libertad en a elección, y a
lo mucho tres opciones para evitar perder el foco del resultado deseado.

2.3. Implementación y prueba de unidades

Se debe realizar un prototipo de la interfaz sobre el cual se validará las especificaciones del software,
incluyendo pruebas de uso por parte del usuario real. En base a esta se puede realizar ajustes al
prototipo hasta cumplir con lo requerido. Finalmente, se plantea la GUI en base a las correcciones
aplicadas sobre el prototipo basadas en las pruebas y mejorando el aspecto gráfico.

Ejemplo:

En base a los bosquejos planteados, se realiza un prototipo que será usado en las pruebas. Entre las
pruebas de funcionamiento, se tendrá que validar que los valores convertidos coincidan con valores de
referencia precalculados. En las pruebas de usuario, se debe ver que el llenado de datos no sea claro y
proponer mejoras en la interfaz en caso queden ambigüedades, como agregar mensajes adicionales en
pantalla o un botón de instrucciones; el hecho de tener más de una opción permite que los usuarios
escojan cual es la que más se adecua a su trabajo.

2.4. Integración y prueba de sistema

Se debe realizar pruebas adicionales para verificar que su interacción con el resto de elementos del
sistema es adecuada, y realizar se ajustes en caso de requieran. En esta etapa no se suele requerir
cambios visuales, pero si cambios en la lógica.

Ejemplo:

Es posible que el programa planteado sea un componente de un programa más amplio, por lo que se
podría requerir que, una vez aplicada la conversión, el resultado de ésta sea copiado directamente al
portapapeles o escrito en un cuadro de texto de otra ventana; dependerá bastante del resto de
componentes involucrados en la solución completa.

2.5. Funcionamiento y mantenimiento

Una vez implementado el sistema, se debe pasar a producción. Adicionalmente, se debe tener en
cuenta que el sistema es propenso a tener fallos o requerir nuevas funcionalidades, por lo que se debe
plantear una estrategia de mantenimiento del mismo.

Ejemplo:

Considerando que se quiera que el programa también permita trabajar con conversiones a Kelvin (K),
se tendría que agregar botones o replantear la interfaz presentada de forma que cumpla con las
nuevas especificaciones. Normalmente se plantearía este punto como un nuevo desarrollo

3
MT104 – 2019-2 Interfaces Gráficas de Usuario (GUI)

independiente, pero podría existir un contrato de mejora continua que incluya las modificaciones al
programa actual.

3. Librerías para desarrollo de GUI en Python

En Python existen diversas librerías que permiten el desarrollo de GUI. Las más usadas son:

Librería Corre Disponible en Licencias

sobre
Tkinter Tcl/Tk Windows, Linux, MacOSX Python
Kivy OpenGL ES Windows, Linux, MacOSX, MIT
2 Android, iOS
PyQt4 Qt4 (C++) Windows, Linux, MaxOSX GPL y
Comercial
PyQt5 Qt5 (C++)
Windows, Linux, MacOSX, GPL y
Android, iOS Comercial
PySide Qt4 (C++) Windows, Linux, MaxOSX LGPL
wxPython wxWidgets Windows, Linux, MaxOSX LGPL

Para el desarrollo de GUIs utilizaremos la librería tkinter ya viene integrada con Python en las versiones
actuales; todos los conceptos aplicados con esta librería son compatibles con el resto de librerías.

4. Librería tkinter
En una librería que permite trabajar de forma orientada a objetos sobre Tcl/Tk con soporte
multiplataforma (Windows, Linux, MacOSX).

4.1. Comprobar funcionalidad

Esta librería viene integrada por defecto a Python en sus últimas versiones. Para verificar si está
correctamente instalada, en línea de comandos utilizar el siguiente comando, el cual mostrará una
ventana demo de la librería.
python -m tkinter

4.2. Importar librería

Para incluir la librería tkinter en nuestro código, utilizamos el comando import de siempre. Se
recomienda dar un alias a la librería importada para que sea más fácil de usar. Adicionalmente, se
importar tkinter.ttk que permitirá utilizar widgets (componentes visuales) con apariencia similar a la
del sistema operativo y otras opciones de configuración.
# -*- coding: utf-8 -*-
import tkinter as tk
import tkinter.ttk as ttk

4
MT104 – 2019-2 Interfaces Gráficas de Usuario (GUI)

5. Componentes
Se muestra los componentes más comunes de la librería tkinter; sin embargo, componentes con
funcionalidades similares pueden ser encontrados en otras librerías. Además, se presenta las clases
que administran el comportamiento de estos.

5.1. Ventana raíz

La ventana raíz es un componente que se encarga de contener todos los componentes visuales de la
interfaz gráfica. Normalmente existe de forma independiente al resto de ventanas.

Para crear una ventana, utilizamos el constructor de la clase Tk de la librería. Una vez creada y
habiendo terminado la definición de todos sus componentes, el programa debe entrar a un bucle
propio donde se toman todas las interacciones que se tiene con la ventana, esto se realiza con la
función mainloop.
# -*- coding: utf-8 -*-
import tkinter as tk
import tkinter.ttk as ttk

ventana = tk.Tk()
# Aquí se agrega el resto
# de definiciones de widgets
ventana.mainloop()

Algunas propiedades básicas de la ventana raíz son:

- Dimensiones: Definido con la función geometry

- Título: Definido con la función title

# -*- coding: utf-8 -*-

import tkinter as tk
import tkinter.ttk as ttk

ventana = tk.Tk()
ventana.geometry("300x200")
ventana.title("Ventana raíz")
# Aquí se agrega el resto
# de definiciones de widgets
ventana.mainloop()

5
MT104 – 2019-2 Interfaces Gráficas de Usuario (GUI)

5.2. Ventanas adicionales

Una ventana adicional se presenta sobre la ventana raíz y se comporta de forma similar a la ventana
principal. El bucle del programa se realiza solamente sobre la ventana raíz, no sobre las ventanas
adicionales.

# -*- coding: utf-8 -*-

import tkinter as tk
import tkinter.ttk as ttk

ventana = tk.Tk()
ventana.geometry("300x200")
ventana.title("Ventana raiz")
# Aquí se agrega el resto
# de definiciones de widgets
ventanaAdicional = tk.Toplevel()
ventanaAdicional.geometry("300x100")
ventanaAdicional.title("Ventana adicional")
# Aquí se agrega el resto
# de definiciones de widgets
# de la ventana adicional
ventana.mainloop()

5.3. Cuadros de dialogo

Son ventanas especiales con una estructura predefinida que suelen ser usadas para dar información al
usuario o pedirle que tome una decisión. Para utilizarlas, se debe incluir el módulo messagebox de la
librería tkinter.
from tkinter import messagebox

5.3.1. Información

messagebox.showinfo(
message="Se termino de cargar datos.",
title="Informacion")

5.3.2. Advertencia

6
MT104 – 2019-2 Interfaces Gráficas de Usuario (GUI)

messagebox.showwarning(
message="Tiene 5 días para cambiar su contraseña.",
title="Advertencia")

5.3.3. Error

messagebox.showerror(
message="No se pudo exportar datos.",
title="Error")

5.3.4. Si o no

print(messagebox.askyesno(
message="¿Desea continuar?",
title="Título"))

5.3.5. Aceptar o cancelar

print(messagebox.askokcancel(
message="¿Desea continuar?",
title="Título"))

5.3.6. Reintentar o cancelar

print(messagebox.askretrycancel(
message="¿Desea reintentar?",
title="Título"))

5.3.7. Si, no o cancelar

print(messagebox.askyesnocancel(
message="¿Desea continuar?",
title="Título"))

7
MT104 – 2019-2 Interfaces Gráficas de Usuario (GUI)

5.4. Widgets
Un widget es cada uno de los componentes visuales que conforman la interfaz gráfica; estos permiten
interactuar de diferentes formas con el programa.
Los widgets mostrados a continuación son algunos de los más comunes y suelen estar implementados
en la mayoría de librerías para desarrollo de interfaces gráficas.
5.4.1. Marco – Frame
Es un widget que se presenta como un rectángulo y que suele usarse para agrupar widgets.

# -*- coding: utf-8 -*-

import tkinter as tk
import tkinter.ttk as ttk

ventana = tk.Tk()
ventana.geometry("180x180")
frame = tk.Frame(ventana, bd=1,
relief=tk.SUNKEN, width=160,
height = 130, padx = 10, pady = 10)
frame.pack(anchor = "center")
ventana.mainloop()

5.4.2. Botón – Button

Widget que ejecuta una acción cuando es presionado; la acción se especifica en la función que es
ingresada al parámetro de entrada command.

# -*- coding: utf-8 -*-

import tkinter as tk
import tkinter.ttk as ttk

def aceptar():
print("Aceptar")

ventana = tk.Tk()
ventana.geometry("180x100")
button = ttk.Button(ventana, text = "Aceptar", command = aceptar)
button.pack(anchor = "center")
ventana.mainloop()
5.4.3. Etiqueta de texto – Label
Widget que permite mostrar texto no modificable por el usuario. Suele utilizarse para describir otros
widgets.

8
MT104 – 2019-2 Interfaces Gráficas de Usuario (GUI)

# -*- coding: utf-8 -*-

import tkinter as tk
import tkinter.ttk as ttk

ventana = tk.Tk()
ventana.geometry("180x100")
label = ttk.Label(ventana, text = "Hola mundo")
label.pack(anchor = "center")
ventana.mainloop()

El valor de una etiqueta puede variar si se le vincula con una variable de la librería tkinter de tipo
StringVar.

# -*- coding: utf-8 -*-

import tkinter as tk
import tkinter.ttk as ttk

def cambiarLabel():
vValor.set("Hasta luego")

ventana = tk.Tk()
ventana.geometry("180x100")
vValor = tk.StringVar()
vValor.set("Hola mundo")
label = ttk.Label(ventana, textvariable=vValor)
label.pack(anchor = "center")
button = ttk.Button(
ventana, text="Cambiar Label",
command=cambiarLabel)
button.pack(anchor = "center")
ventana.mainloop()

5.4.4. Casilla de verificación – Checkbutton

Widget que puede ser activado o desactivado, suele usarse para activar condiciones en la lógica del
programa. Normalmente se le vincula a una variable de tkinter de tipo IntVar para poder consultar su
valor.

# -*- coding: utf-8 -*-

import tkinter as tk
import tkinter.ttk as ttk

def verEstado():
print(vValor.get())
9
MT104 – 2019-2 Interfaces Gráficas de Usuario (GUI)

ventana = tk.Tk()
ventana.geometry("180x100")
vValor = tk.IntVar()
checkbutton = ttk.Checkbutton(
ventana,
text = "Habilitar envio de datos",
variable = vValor)
checkbutton.pack(anchor = "center")
button = ttk.Button(
ventana, text="Ver estado",
command=verEstado)
button.pack(anchor = "center")
ventana.mainloop()

5.4.5. Botón de opción – Radiobutton

Widget que puede ser activado o desactivado, suele usarse en conjunto para definir múltiples opciones
de las cuales puede solo ser escogida una. Para vincular los botones de opción en un solo grupo y
mostrar el valor elegido, se utiliza una variable de tkinter de tipo IntVar, la cual debe ser compartida
por cada uno de los botones de opción.

# -*- coding: utf-8 -*-

import tkinter as tk
import tkinter.ttk as ttk

def mostrarEleccion():
print(vRadiobutton.get())

ventana = tk.Tk()
ventana.geometry("180x150")
label = ttk.Label(ventana, text = "Escoja tipo de carne:")
opciones = ["Pollo", "Pescado",
"Res", "Sin carne"]
vRadiobutton = tk.StringVar()
radiobuttons = []
for i in range(len(opciones)):
radiobuttons.append(
ttk.Radiobutton(
ventana, text = opciones[i],
variable = vRadiobutton, value = i)
)
button = ttk.Button(
ventana, text = "Mostrar Elección",
command = mostrarEleccion)
label.grid()
for radiobutton in radiobuttons:
radiobutton.grid(sticky=tk.NW)
button.grid()
ventana.mainloop()

10
MT104 – 2019-2 Interfaces Gráficas de Usuario (GUI)

5.4.6. Caja de texto – Entry

Widget que permite el ingreso de texto; es usado cuando se quiere ingresar información puntual.
Normalmente se le vincula a una variable de tkinter de tipo StringVar para poder consultar su valor,
pero se recomienda vincula a un DoubleVar o un IntVar si se leerá números ya que estas clases realizan
la validación automáticamente.

# -*- coding: utf-8 -*-

import tkinter as tk
import tkinter.ttk as ttk

def mostrarTexto():
print(vEntry.get())

ventana = tk.Tk()
ventana.geometry("180x100")
vEntry = tk.StringVar()
entry = ttk.Entry(ventana, textvariable = vEntry)
button = ttk.Button(
ventana, text = "Mostrar Texto",
command = mostrarTexto)
entry.pack(anchor = "center")
button.pack(anchor = "center")
ventana.mainloop()

5.4.7. Cuadro combinado – Combobox

Widget que permite elegir un elemento de una lista desplegable o ingresarlo directamente mediante la
caja de texto que tiene. Normalmente se le vincula a una variable de tkinter de tipo StringVar para
poder consultar su valor.

# -*- coding: utf-8 -*-

import tkinter as tk
import tkinter.ttk as ttk

def mostrarEleccion():
print(vCombobox.get())

ventana = tk.Tk()
ventana.geometry("180x100")
vCombobox = tk.StringVar()
combobox = ttk.Combobox(
ventana, textvariable = vCombobox,
values = ("Enero","Febrero","Marzo",
"Abril","Mayo","Junio",

11
MT104 – 2019-2 Interfaces Gráficas de Usuario (GUI)

"Julio","Agosto","Septiembre",
"Octubre","Noviembre","Diciembre")
)
button = ttk.Button(
ventana, text = "Mostrar Elección",
command = mostrarEleccion)
combobox.pack(anchor = "center")
button.pack(anchor = "center")
ventana.mainloop()

5.4.8. Cuadro de lista – Listbox

Widget que permite elegir un elemento de una lista estática. Normalmente se le vincula a una variable
de tkinter de tipo StringVar para poder consultar su valor.

# -*- coding: utf-8 -*-

import tkinter as tk
import tkinter.ttk as ttk

def mostrarEleccion():
if len(listbox.curselection()) > 0:
print(listbox.get(listbox.curselection()))

ventana = tk.Tk()
ventana.geometry("180x140")
listaVariables = tk.StringVar(
value=("Java","C++","Matlab","Python"))
listbox = tk.Listbox(
ventana, listvariable = listaVariables, height = 5)
listbox.pack(anchor = "center")
button = ttk.Button(
ventana, text = "Mostrar Elección",
command = mostrarEleccion)
button.pack(anchor = "center")
ventana.mainloop()

5.4.9. Barra de desplazamiento – Scrollbar

Permite movilizarse a través de un widget que tenga varias líneas; para esto, se debe vincular la barra
de desplazamiento al widget que será afectado por su movimiento.

# -*- coding: utf-8 -*-

import tkinter as tk
import tkinter.ttk as ttk

ventana = tk.Tk()
12
MT104 – 2019-2 Interfaces Gráficas de Usuario (GUI)

scrollbar = tk.Scrollbar(ventana)
listbox = tk.Listbox(ventana, yscrollcommand = scrollbar.set)
for numero in range(100):
listbox.insert(tk.END, "Linea número " + str(numero))
listbox.pack(side=tk.LEFT, fill=tk.BOTH)
scrollbar.pack(side=tk.RIGHT, fill=tk.Y)
scrollbar.config(command = listbox.yview)
ventana.mainloop()

5.4.10. Texto – Text

Widget que permite ingreso de texto; es usado cuando se requiere ingresar gran cantidad de
información.

# -*- coding: utf-8 -*-

import tkinter as tk
import tkinter.ttk as ttk

ventana = tk.Tk()
text = tk.Text(ventana, width = 20, height = 8)
text.insert(tk.INSERT, "Este es un texto que tiene una gran
extension")
text.insert(tk.END, "\nIncluso puede haber saltos dentro del texto")
text.pack(anchor = "center")
ventana.mainloop()

5.4.11. Barra de progreso – Progressbar

Permite mostrar el progreso de una tarea. Para poder actualizar su valor, requiere estar vinculado a
una variable de tkinter IntVar o DoubleVar.

# -*- coding: utf-8 -*-

import tkinter as tk
import tkinter.ttk as ttk

def aumentar10():
if vProgreso.get() + 10 < 100:
vProgreso.set(vProgreso.get() + 10)
else:
vProgreso.set(0)

ventana = tk.Tk()
ventana.geometry("180x100")
vProgreso = tk.IntVar()
progressbar = ttk.Progressbar(
ventana, variable=vProgreso)
label = ttk.Label(ventana, textvariable=vProgreso)

13
MT104 – 2019-2 Interfaces Gráficas de Usuario (GUI)

button = ttk.Button(
ventana, text="Avanzar 10%", command=aumentar10)
vProgreso.set(0)
progressbar.pack(anchor="center")
label.pack(anchor="center")
button.pack(anchor="center")
ventana.mainloop()

5.4.12. Control deslizante – Scale

Widget que permite establecer un valor de una escala específica usando un bloque que se desplaza
sobre una línea. Requiere estar vinculado a una variable de tkinter IntVar o DoubleVar para que pueda
leerse su valor.

# -*- coding: utf-8 -*-

import tkinter as tk
import tkinter.ttk as ttk

ventana = tk.Tk()
ventana.geometry("180x100")
vValor = tk.IntVar()
scale = ttk.Scale(ventana, variable=vValor, from_=0, to=100)
scale.pack(anchor="center")
label = ttk.Label(ventana, textvariable=vValor)
label.pack(anchor="center")
ventana.mainloop()

5.4.13. Spinner – Spinbox

Widget que permite establecer un valor de una escala específica ingresando texto o mediante
variaciones usando flechas de aumento y disminución.

# -*- coding: utf-8 -*-

import tkinter as tk
import tkinter.ttk as ttk

ventana = tk.Tk()
ventana.geometry("180x100")
spinbox = ttk.Spinbox(ventana, from_=0, to=10)
spinbox.pack(anchor="center")
ventana.mainloop()

5.4.14. Separador – Separator

Widget que permite separar visualmente widgets mediante una línea.

14
MT104 – 2019-2 Interfaces Gráficas de Usuario (GUI)

# -*- coding: utf-8 -*-

import tkinter as tk
import tkinter.ttk as ttk

ventana = tk.Tk()
ventana.geometry("180x100")
frame = ttk.Frame(ventana)
label1 = ttk.Label(frame, text="Texto 1")
label2 = ttk.Label(frame, text="Texto 2")
separator = ttk.Separator(frame, orient="vertical")
frame.pack(anchor="center")
label1.grid(column=0, row=0)
separator.grid(column=1, row=0, sticky=(tk.N,tk.S))
label2.grid(column=2, row=0)
ventana.mainloop()

5.4.15. Marco etiquetado – Labelframe

Widget que permite agrupar widgets, se diferencia del marco simple ya que tiene integrada una
etiqueta de texto.

# -*- coding: utf-8 -*-

import tkinter as tk
import tkinter.ttk as ttk

ventana = tk.Tk()
ventana.geometry("180x100")
labelframe = ttk.Labelframe(ventana, text="Datos de usuario")
label1 = ttk.Label(labelframe, text="Nombre: Luis")
label2 = ttk.Label(labelframe, text="País: Perú")
labelframe.pack(anchor="center")
label1.grid(column=0, row=0, sticky=tk.W)
label2.grid(column=0, row=2, sticky=tk.W)
ventana.mainloop()

5.4.16. Pestañas – Notebook

Widget que permite trabajar con pestañas y que es utilizado para organizar el contenido en grupos,
permitiendo variar el contenido presentado en la interfaz.

# -*- coding: utf-8 -*-

import tkinter as tk
import tkinter.ttk as ttk

ventana = tk.Tk()
ventana.geometry("200x120")
notebook = ttk.Notebook(ventana)
label1 = ttk.Label(notebook, text="Perro\nGato\nRatón")
15
MT104 – 2019-2 Interfaces Gráficas de Usuario (GUI)

label2 = ttk.Label(notebook, text="Mariposa\nAbeja\nHormiga")

notebook.add(label1, text="Animales", padding=20)
notebook.add(label2, text="Insectos", padding=20)
notebook.pack(expand = "yes", anchor = "center")
ventana.mainloop()

5.4.17. Lienzo de dibujo – Canvas

Widget que permite dibujar sobre éste mediante comandos.

# -*- coding: utf-8 -*-

import tkinter as tk
import tkinter.ttk as ttk

ventana = tk.Tk()
ventana.geometry("400x300")
canvas = tk.Canvas(width=400, height=300, bg='white')
canvas.pack(expand="yes", fill="both")
canvas.create_polygon(200, 10,
380, 280,
10, 100,
380, 100,
10, 280,
fill='yellow',
outline='blue',
dash=(5, 3))
ventana.mainloop()

6. Ejemplo de uso
Teniendo en cuenta el bosquejo de interfaz gráfica:

Se plantea el siguiente código:

# -*- coding: utf-8 -*-
import tkinter as tk
import tkinter.ttk as ttk

def celsiusAFahrenheit():
celsius = vCelsius.get()
fahrenheit = 1.8*celsius + 32
fahrenheit = round(fahrenheit + 0,1)
vFahrenheit.set(fahrenheit)

16
MT104 – 2019-2 Interfaces Gráficas de Usuario (GUI)

def fahrenheitACelsius():
fahrenheit = vFahrenheit.get()
celsius = (fahrenheit - 32)/1.8
celsius = round(celsius + 0,1)
vCelsius.set(celsius)

ventana = tk.Tk()

ventana.title("Convertir °C <-> °F")

ventana.resizable(0,0)

vCelsius = tk.DoubleVar()
vFahrenheit = tk.DoubleVar()

# Se crean widgets que serán presentados en la ventana

# marcoPrincipal será el contenedor del resto de widgets
marcoPrincipal = ttk.Frame(ventana)
textoCelsius = ttk.Entry(marcoPrincipal, textvariable=vCelsius)
etiquetaCelsius = ttk.Label(marcoPrincipal, text="°C")
botonCelsiusAFahrenheit = ttk.Button(marcoPrincipal, \
text="°C -> °F", \
command = celsiusAFahrenheit);
textoFahrenheit = ttk.Entry(marcoPrincipal, textvariable=vFahrenheit)
etiquetaFahrenheit = ttk.Label(marcoPrincipal, text="°F")
botonFahrenheitACelsius = ttk.Button(marcoPrincipal, \
text="°F -> °C", \
command = fahrenheitACelsius);

# Se configura los margenes de los widgets

marcoPrincipal.grid_configure(padx = 10, pady = 5)
textoCelsius.grid_configure(padx = 10, pady = 5)
etiquetaCelsius.grid_configure(padx = 10, pady = 5)
botonCelsiusAFahrenheit.grid_configure(padx = 10, pady = 5)
textoFahrenheit.grid_configure(padx = 10, pady = 5)
etiquetaFahrenheit.grid_configure(padx = 10, pady = 5)
botonFahrenheitACelsius.grid_configure(padx = 10, pady = 5)

# Se ubican los widgets dentro de su contenedor

marcoPrincipal.grid(column = 0, row = 0)
textoCelsius.grid(column = 0, row = 0)
etiquetaCelsius.grid(column = 1, row = 0)
botonCelsiusAFahrenheit.grid(column = 2, row = 0)
textoFahrenheit.grid(column = 0, row = 1)
etiquetaFahrenheit.grid(column = 1, row = 1)
botonFahrenheitACelsius.grid(column = 2, row = 1)

ventana.mainloop()

La ventana resultante del código es:

17