CAPTURAS DE PANTALLA DE

LOS INTERFACES GRÁFICAS

CON TKINTER
MARGARITA LUIS OROZCO
POO BIOMED_05_01
INTERFACES GRAFICAS
CON TKINTER
TK (RAÍZ)
Como se vio en la introducción del tema de interfaces graficas que son
medios visuales, más fáciles de manejar se podrían decir que una
terminal de texto para los usuarios, para que puedan interactuar y
realizar tareas gráficamente.
Tkinter tiene una serie de componentes gráficos llamados Widgets, con
los cuales se puede diseñar las interfaces.
Los widgets deben seguir una jerarquía a la hora de añadirse a la
interfaz. Por ejemplo, un Marco (frame) forma parte del objeto raíz Tk. Y
a su vez, un botón (button) puede formar parte de un contenedor como
la raíz o un marco.
Tk: Contenedor base o raíz de todos los widgets que forman la
interfaz. No tiene tamaño propio, sino que se adapta a los widgets
que contiene.
COMENTARIO:
Lo que se realizó en el código siguiente fue Crear la raíz
root = Tk()y Comenzamos el bucle de aplicación, es como un while True

EJEMPLO_0
 RESULTADO

COMENTARIO:
Lo que se realizo en el siguiente código es que se agregaron opciones
como son:
Título de la ventana
Icono de la ventana, en ico o xbm en Linux
Desactivar redimensión de ventana
EJEMPLO_1
RESULTADO
 WIDGET FRAME (MARCO)
Como se vio y se aprendió en la introducción al tema anterior los
Frames son marcos contenedores de otros widgets. Pueden tener
tamaño propio y posicionarse en distintos lugares de otro contenedor
(ya sea la raíz u otro marco):

COMENTARIO:
En el siguiente código se realizó un Frame, todos los widgets aceptan
estos parámetros visuales, incluso la raíz: son tipos de marcos. Que
pueden posicionarse en diferentes partes de la pantalla.
EJEMPLO_2

RESULTADO
COMENTARIO:
En este código se realizo un frame del lado inferior derecho de la
pantalla.
EJEMPLO_41

RESULTADO

LABEL (ETIQUETA DE TEXTO)

 El widget label es utilizado para mostrar textos. Suele ser texto
estático, de ahí que se llame label o etiqueta de texto.
COMENTARIO:
En el anterior código se realizó un widget label que se utiliza para mostrar
textos. Suele ser texto estático.

EJEMPLO_3

RESULTADO

COMENTARIO:
 En este código es similar al código anterior del widget label, pero
También se puede añadir directamente a la raíz y empaquetarla.

EJEMPLO_40

RESULTADO

COMENTARIO:
Este cogido es el seguimiento de los códigos anteriores de widget
label, pero con mas etiquetas.
EJEMPLO_4

RESULTADO

COMENTARIO:
Como se muestran las tres etiquetas están una encima de otra
porque al hacer pack() por defecto se posicionan así, y se puede
cambiar su distribución:
EJEMPLO_5

RESULTADO

COMENTARIO:
También tienen distintos parámetros visuales, para cambiar el color
en primer plano, el del fondo, la fuente y su tamaño como se muestra
en el resultado del código anterior.
EJEMPLO_6

RSULTADO

COMENTARIO:
En este código se implementa lo visto anteriormente en algunas de
las etiquetas que se realizan.
EJEMPLO_7

RESULTADO

COMENTARIO:
En este código se realizo con etiquetas que pueden contener
imágenes, pero en formato .ico.
EJEMPLO_8

RESULTADO

ENTRY (TEXTO CORTO)

 Lo que se vio en este subtema es que los campos de texto sirven
generalmente para que el usuario escriba un valor. vendría siendo
similar a la función input() pero gráficamente.
COMENTARIO:
Lo que se realizó en el código anterior fue poder integrar muchos
métodos que le nos permiten desde borrar el texto a desactivar el
campo.
EJEMPLO_9

RESULTADO

TEXT (TEXTO LARGO)

Este subtema es para trabajar con un campo de texto multilínea.
COMENTARIO:
En este código se realizo para tener como resultado un Widget
llamado Text para escribir textos mar largos.
EJEMPLO_10

RESULTADO

BUTTON (BOTÓN)
Los botones son posiblemente considerados los componentes más
importantes en el diseño de interfaces gráficas. Ya que gracias a los
botones se pueden añadir comportamientos dinámicos a las interfaces.

COMENTARIO:
En este código se creó una interfaz para realizar una suma a partir de
dos campos y un tercero no editable para el resultado: fue una
calculadora con operaciones básicas.
EJEMPLO_11
RESULTADO
 RADIOBUTTON (RADIAL)
Otro componente básico de los formularios para las interfaces
graficas son los botones radiales. Se utilizan cuando quieres ofrecerle
al usuario la posibilidad de elegir una opción entre varias.
COMENTARIO:
Los radiobutton Se utilizan cuando quieres ofrecerle al usuario la
posibilidad de elegir una opción entre varias y Si se quiere reiniciar el
formulario se añade un botón y establecer los valores iniciales como
se ve en el resultado del siguiente código.
EJEMPLO_12

RESULTADOS
COMENTARIO:
Este código es similar al anterior, pero sin un botón de reiniciar.
EJEMPLO_13

RESULTADO
CHECKBUTTON (SELECCIONABLE)
Con los radiobutton vimos que el usuario puede marcar una opción de
entre varias, pero si queremos simplemente proponer una única
opción es mejor utilizar un botón de selección. Son bastante
parecidos.
COMENTARIO:
En el código siguiente se realizó un código con un par de
checkbuttons para, por ejemplo, pedir a un usuario como quiere que
le sirvan un café, él tendrá que marcar si quiere leche, y también si
quiere azúcar.
EJEMPLO_14

RESULTADO
COMETARIO:
Con las checkbuttons que se realizaron anteriormente en el circuito
anterior se le agregó la imagen que tenemos.
EJEMPLO_15

RESULTADO
COMENTARIO:
En el siguiente código se creó una función y añadir un comando a los
checkbuttons para mostrar el resumen de nuestro café en una label.
EJEMPLO_16

RESULTADO
MENU (MENÚ)
En este subtema se aprenderá a crear un menú superior de toda la vida
con varias secciones.

COMENTARIO:

El primer widget menú que creamos hace referencia a la barra de menú,

de ahí que se le suele llamar menubar:

EJEMPLO_17

RESULTADO

COMENTARIO:
Después de la realización del menubar se crea una barra para
comenzar a añadir submenús y comandos. Empezando con los
submenús.

EJEMPLO_18

RESULTADO

COMENTARIO:
Ya tenemos los submenús, pero todavía nos falta añadirlos a la barra de
menú:
EJEMPLO_19

RESULTADO

COMENTARIO:
También podemos agregar un separador y un comando de salir con
root.quit.
EJEMPLO_20

RESULTADO

COMENTARIO:
 Del código anterior se crea una funcionalidad para cada comando.
EJEMPLO_21

RESULTADO
DIALOGS (DIÁLOGOS)
Las ventanas emergentes, cuadros de diálogo o simplemente Pop Ups,
sirven para mostrar o pedir información rápida al usuario. Reciben ese
nombre porque no forma parte de la ventana principal, sino que
aparecen de golpe encima.

La ventana emergente por excelencia es la MessageBox, que sirve para

mostrar un icono y un mensaje, pero tiene algunas variantes. Desde la
clásico ventana con la opción de aceptar, la de alerta para informar de
excepciones o errores, y las de aceptar o rechazar algo.

COMENTARIO:
El ShowInfo sirve para mostrar un diálogo de más información, como se
muestra en el código siguiente.

EJEMPLO_22

RESULTADO
 COMENTARIO:

El ShowWarning Sirve para mostrar un diálogo con un mensaje de

alerta, como se muestra en el código siguiente.

EJEMPLO_23

RESULTADOS
 COMENTARIO:

El ShowError Sirve para mostrar un diálogo con un mensaje de error

como se puede observar en el resultado del código anterior.

EJEMPLO_24

RESULTADO
 COMENTARIO:

El AskQuestion Sirve para mostrar un diálogo con una pregunta de Sí/No

al usuario como se muestra en el siguiente código.

EJEMPLO_25

RESULTADO
 _

COMENTARIO:

El AskOkCancel Sirve para mostrar un diálogo con una pregunta de

Ok/Cancelar al usuario.

EJEMPLO_26
 RESULTADO

COMENTARIO:

El AskRetryCancel Sirve para mostrar un diálogo con una pregunta de

Reintenar/Cancelar al usuario.

EJEMPLO_27
 RESULTADO

COMENTARIO:
El AskColorayuda al usuario a elegir un color de entre varios. Para
este código se utilizó una clase llamada colorchooser:

EJEMPLO_28
RESULTADO

COMENTARIO:
El AskOpenFile es la clase FileDialog, que nos permite realizar varias
tareas como conseguir la ruta de un fichero para poder abrirlo, o para
guardarlo, como se muestra en el código siguiente.
EJEMPLO_29
RESULTADO

COMENTARIO:
En este código aparte de tener lo visto anteriormente se le puede
agregar también podemos establecer otras opciones, por ejemplo, un
directorio inicial y un filtro de extensiones.
EJEMPLO_30
 RESULTADO

COMENTARIO:

El AskSaveAsFile también s puede hacer lo mismo para buscar un

directorio donde guardar un fichero. Este proceso equivaldría a abrir un
fichero de texto plano con open (ruta, ‘W'), y que nos da una extensión
por defecto.

EJEMPLO_31
RESULTADO
 EDITOR DE TEXTO
Este subtema se trabaja con un pequeño editor de texto, que será una
forma de trabajar en conjunto varios de los widgets que se han ido
aprendiendo.

COMENTARIO:

Lo primero es tener claro el diseño del programa que vamos a crear. A

parte del menú superior para gestionar las funcionalidades, nos viene
como anillo al dedo un widget Text para manejar todo el contenido, así
que vamos a comenzar por crear esta estructura:

EJEMPLO_32
RESULTADO

COMENTARIO:
 En este código en cada cara a abrir y guardar ficheros se muestra un
poco de información en la parte inferior. En este ejemplo se añade
una label abajo a la izquierda.
EJEMPLO_33
RESULTADO

COMENTARIO:
En este código se complementa el código anterior con el diseño base.
EJEMPLO_34

RESULTADO

COMENTARIO:
Este código nos enseña a como guardar y abrir un fichero desde el
diseño base.
EJEMPLO_35
RESULTADOS
COMENTARIO:
En este circuito te muestra como resultado del código la ventana con
el inicio del diseño base.
EJEMPLO_36
RESULTADOS
COMENTARIO:
En este código muestra como resultado la ventana con el diseño de
base del inicio de un nuevo fichero.
EJEMPLO_37
RESULTADOS

COMENTARIO:
En este código se visualiza la forma de como guardar un fichero con
sus atributos.
EJEMPLO_38

RESULTADOS