Lista de Widgets en Tkinter y Guizero.
En este capítulo vamos a repasar algunos de los elementos más importantes que podemos encontrar en una aplicación Gráfica (GUI) y una descripción sencilla del código para generarlo tanto en Tkinter como en Guizero.
¿Que es un widget?
Un widget describe cada una de las diferentes partes que pueden ser usadas para crear una interfaz de usuario o GUI.
Aunque no te suenen sus nombre, reconocerás muchos de ellos en los diferentes programas o websites que utilizas.
El siguiente ejemplo muestra siete widgets en Guizero. Aunque sus nombres en Tkinter pueden variar un poco básicamente son los mismos, ya que recuerda que Guizero usa Tkinter para funcionar.
Vamos a ir viéndolos uno a uno junto una pequeña descripción de su uso. Luego haremos un pequeño ejemplo con ambos programas para ver como programarlos. En otros capítulos veremos las diferentes propiedades y métodos que pueden tener cada uno y entraremos más en detalle.
Tipos de Widgets.
_______________________________________________________________________________
| Nombre en Tkinter |
Nombre en Guizero |
| Frame |
Box |
Es un widget que actúa como contenedor para otros widgets. Es invisible por defecto y puede ser usado para colocar más fácilmente otros widgets dentro de la ventana y alterar su diseño. En el ejemplo crearemos una caja (llámale Frame o Box) y colocamos dos botones dentro.
Tkinter
from tkinter import *
# Creamos la aplicacion principal y su tamaño
raiz = Tk()
raiz.geometry("200x150")
# Creamos una caja alineada a la izquierda que ocupe toda la ventana y con borde
# para que podamos verlo.
frame=Frame(raiz)
frame.config(bg="lightblue")
frame.pack(side="left", fill="x", expand=1)
# Colocamos un boton dentro del Frame
button=Button(frame,text="botón")
button.pack()
# Colocamos otro boton dentro del mismo Frame
button1= Button(frame, text="Otro botón")
button1.pack()
raiz.mainloop()
Guizero
# importamos la ventana principal, una caja y un botón
from guizero import App, Box, PushButton
# Creamos la aplicación principal
app = App(width=200, height=150)
# Creamos una caja alineada a la izquierda que ocupe toda la ventana y con borde
# para que podamos verlo.
box = Box(app, align="left", width="fill", border=2)
# Colocamos un botón
button = PushButton(box)
# Colocamos otro que se pone debajo
button1 = PushButton(box, text="another button")
app.display()
_______________________________________________________
| Nombre en Tkinter | Nombre en Guizero |
| Button | PushButton |
Es un botón que se puede pulsar y que sirve para una multitud de propósitos. Es uno de los que más frecuentemente se utiliza. Una vez que se pulsa lanza alguna acción en el programa.
Tkinter
from tkinter import *
def set():
print("Hola Mundo")
root = Tk()
root.geometry("200x150")
frame = Frame(root)
frame.pack()
button = Button(frame, text = "Botón1", command = set,
fg = "red", font = "Verdana 14 underline",
bd = 2, bg = "light blue", relief = "groove")
button.pack(pady = 5)
root.mainloop()
# importamos la ventana principal, una caja y un botón
from guizero import App, Box, PushButton
def set():
print("Hola Mundo")
# Creamos la aplicación principal
app = App(width=200, height=150)
# Creamos una caja alineada a la izquierda que ocupe toda la ventana y con borde
# para que podamos verlo.
box = Box(app)
# Colocamos el botón con una serie de propiedades iniciales
button = PushButton(box, text="Botón1", command=set)
# Propiedades adicionales de los botones
button.bg="light blue"
button.text_color="red"
# incluso podemos usar directamente un método de tkinter en guizero
# <nombre>.tk.config()
button.tk.config(bd=2, relief = "groove",font = "Verdana 14 underline")
button.tk.pack(pady=5)_______________________________________________________
| Nombre en Tkinter | Nombre en Guizero |
| Entry | TextBox |
Se usa para que el usuario pueda introducir datos desde la aplicación. Es una caja de texto en donde el usuario puede introducir datos.
Tkinter
from tkinter import *
root = Tk()
root.geometry("200x150")
frame = Frame(root)
frame.pack()
my_entry = Entry(frame, width = 20)
my_entry.insert(0,'Username')
my_entry.pack(padx = 5, pady = 5)
my_entry2 = Entry(frame, width = 15)
my_entry2.insert(0,'password')
my_entry2.pack(padx = 5, pady = 5)
root.mainloop()
Guizero
from guizero import App, TextBox, Box
raiz = App(width=200, height=150)
# no existen paddings para los box en guizero
# para lograr lo mismo hay que usar tkinter o como en
# este caso meter algo por medio.
# Caja de relleno que no se ve pero esta ahí
Box(raiz, align="top", width="fill", height=5)
# Caja Principal que contiene los inputs.
box = Box(raiz)
inputA = TextBox(box, width=20,text="Username")
inputB = TextBox(box, width=15, text="Password")
raiz.display()
_______________________________________________________
| Nombre en Tkinter | Nombre en Guizero |
Check Button
| CheckBox |
Las casillas de verificación permiten al usuario escoger entre un conjunto de acciones que ya están predefinidas. El usuario puede escoger más de una opción.
Tkinter
root = Tk()
root.geometry("200x150")
frame = Frame(root)
frame.pack()
Var1 = IntVar()
Var2 = IntVar()
ChkBttn = Checkbutton(frame, width = 15, text="Opción 1", variable = Var1)
ChkBttn.pack(padx = 5, pady = 5)
ChkBttn2 = Checkbutton(frame, width = 15, text="Opción2", variable = Var2)
ChkBttn2.pack(padx = 5, pady = 5)
root.mainloop()
Guizero
from guizero import App, CheckBox, Box
# Creamos la aplicación principal
app = App(width=200, height=150)
# Creamos una contenedor
box = Box(app)
# Incorporamos las casillas de verificación.
checkbox_1 = CheckBox(box, text="Opción1")
checkbox_1 = CheckBox(box, text="Opción2")
app.display()
______________________________________________________
| Nombre en Tkinter | Nombre en Guizero |
Radio Button
| ButtonGroup |
Se muestra un conjunto de casillas de verificación redondas, en donde el usuario puede escoger una única opción.
Tkinter
from tkinter import *
root = Tk()
root.geometry("200x150")
frame = Frame(root)
frame.pack()
Var1 = StringVar()
RBttn = Radiobutton(frame, text = "Option1", variable = Var1,
value = 1)
RBttn.pack(padx = 5, pady = 5)
RBttn2 = Radiobutton(frame, text = "Option2", variable = Var1,
value = 2)
RBttn2.pack(padx = 5, pady = 5)
root.mainloop()
Guizero.
En el ejemplo usamos un ButtonGroup que muestra la selección en una caja de texto.
from guizero import App, ButtonGroup, Text, Box
def update_text():
seleccionada.value = opciones.value
app = App(width=200, height=150)
opciones = ButtonGroup(app, options=
["Opción 1",
"Opción 2"],
selected="Opción 1", command=update_text)
caja = Box(app, border=2)
seleccionada = Text(caja, "Opción 1")
app.display()
______________________________________________________
| Nombre en Tkinter | Nombre en Guizero |
| Label | Text, Picture |
Muestra un texto dentro de la aplicación que el usuario no puede modificar. Es bastante útil para poner títulos, etiquetas o instrucciones. Es muy versátil y lo podemos usar incluso para incluir imágenes.
Tkinter.
from tkinter import *
root = Tk()
root.geometry("200x150")
frame = Frame(root)
frame.pack()
var = StringVar()
var.set("Hola Mundo")
label = Label(frame, textvariable = var )
label.pack()
root.mainloop()
Guizero.
from guizero import App, Text
app = App(width=200, height=150)
texto = Text(app, text="Hola Mundo!")
app.display()
* Usamos el widget Picture si en vez de mostrar un texto queremos que se incluya una imagen.
_____________________________________________________
| Nombre en Tkinter | Nombre en Guizero |
| Menu | MenuBar |
Este wigdet muestra un menú en la parte superior de la pantalla, y cada opción del menú conduce a un submenú.
Tkinter
from tkinter import *
def save():
#Código a ser escrito
pass
def load():
#Código a ser escrito
pass
root = Tk()
root.geometry("200x150")
frame = Frame(root)
frame.pack()
mainmenu = Menu(frame)
mainmenu.add_command(label = "Save", command= save)
mainmenu.add_command(label = "Load", command= load)
mainmenu.add_command(label = "Exit", command= root.destroy)
root.config(menu = mainmenu)
root.mainloop()Guizero.
from guizero import App, MenuBar
def file_function():
pass #codigo a rellenar
def edit_function():
pass #codigo a rellenar
def exit_function():
app.destroy()
app = App(width=200, height=150)
menubar = MenuBar(app,
toplevel=["Save", "Load", "Exit"],
options=[
[ ["Guardar", file_function], ["Guardar como..", file_function] ],
[ ["Cargar", edit_function], ["Cargar archivo", edit_function] ],
[ ["Salir", exit_function]],
])
app.display()
_______________________________________________________
| Nombre en Tkinter | Nombre en Guizero |
| ComboBox | Combo |
Este objeto lo que hace es mostrar un cuadro desplegable que permite seleccionar una sola opción dentro de una lista de opciones.
Tkinter.
from tkinter import *
from tkinter import ttk
root = Tk()
root.geometry("200x150")
frame = Frame(root)
frame.pack()
vlist = ["Option1", "Option2", "Option3",
"Option4", "Option5"]
Combo = ttk.Combobox(frame, values = vlist)
Combo.set("Escoge una opción")
Combo.pack(padx = 5, pady = 5)
root.mainloop()
from guizero import App, Combo
app = App(width=200, height=150)
combo = Combo(app, options=["Opción 1", "Opción 2", "Opción 3"])
app.display()
_______________________________________________________
| Nombre en Tkinter | Nombre en Guizero |
List Box
| ListBox |
Se utiliza para mostrar una lista de opciones al usuario en donde elegir. Se puede escoger una o varias de ellas.
Tkinter.
from tkinter import *
root = Tk()
root.geometry("200x220")
frame = Frame(root)
frame.pack()
label = Label(root,text = "Escoge elementos a comprar.")
label.pack()
listbox = Listbox(root)
listbox.insert(1,"Pan")
listbox.insert(2, "Leche")
listbox.insert(3, "Carne")
listbox.insert(4, "Queso")
listbox.insert(5, "Verduras")
listbox.pack()
root.mainloop()
Guizero.
from guizero import App, ListBox, Text
app = App(width=200, height=150)
Text(app, text="lista de la compra")
listbox = ListBox(app, items=["Pan", "Leche", "Carne", "Queso"])
app.display()
______________________________________________________
| Nombre en Tkinter | Nombre en Guizero |
| Menu Button | - |
Es una combinación entre el widget de menú y el de botón. Muestra un menú desplegable con una lista de opciones cuando hacemos click en él. Este widget es único porque puede incorporar aspectos de botones de opción y de opciones de verificación.
Tkinter
from tkinter import *
root = Tk()
root.geometry("200x150")
frame = Frame(root)
frame.pack()
MenuBttn = Menubutton(frame, text = "Favourite food", relief = RAISED)
Var1 = IntVar()
Var2 = IntVar()
Var3 = IntVar()
Menu1 = Menu(MenuBttn, tearoff = 0)
Menu1.add_checkbutton(label = "Pizza", variable = Var1)
Menu1.add_checkbutton(label = "Cheese Burger", variable = Var2)
Menu1.add_checkbutton(label = "Salad", variable = Var3)
MenuBttn["menu"] = Menu1
MenuBttn.pack()
root.mainloop()
______________________________________________________
| Nombre en Tkinter | Nombre en Guizero |
| Canvas | Drawing |
Aunque no son exactamente igual en ambas librerías, nos permite dibujar formas, imágenes o texto. Es como una pizarra en la que puedes pintar o dibujar cualquier cosa.
Tkinter.
from tkinter import *
root = Tk()
frame=Frame(root,width=300,height=300)
frame.pack(expand = True, fill=BOTH)
canvas = Canvas(frame,bg='white', width = 300,height = 300)
coordinates = 20, 50, 210, 230
arc = canvas.create_arc(coordinates, start=0, extent=250, fill="blue")
arc = canvas.create_arc(coordinates, start=250, extent=50, fill="red")
arc = canvas.create_arc(coordinates, start=300, extent=60, fill="yellow")
canvas.pack(expand = True, fill = BOTH)
root.mainloop()
Guizero.
from guizero import App, Drawing
app = App(width=200, height=150)
drawing = Drawing(app)
drawing.rectangle(10, 10, 60, 60, color="blue")
app.display()
_______________________________________________________
| Nombre en Tkinter | Nombre en Guizero |
| Scala | Slider |
Este objeto muestra una barra y un selector que puede usarse para especificar un valor en un rango.
Tkinter.
from tkinter import *
root = Tk()
root.geometry("200x200")
frame = Frame(root)
frame.pack()
Scala = Scale(frame, from_=0, to=10)
Scala.pack(padx=5, pady=5)
Scala2 = Scale(frame, from_=0, to=10, orient=HORIZONTAL)
Scala2.pack(padx=5, pady=5)
root.mainloop()
Guizero.
from guizero import App, Slider
app = App(width=200, height=150)
slider = Slider(app, horizontal=False)
slider = Slider(app)
app.display()
______________________________________________________
| Nombre en Tkinter | Nombre en Guizero |
| ScrollBar | - |
Este widget nos va a permitir el desplazarnos por un ventana de Tkinter o mejor dicho habilitar el desplazamiento para ciertos widgets. Por lo general se usa cuando tienes un espacio limitado para una ventana en Tkinter pero quieres más espacio para el widget. Veámoslo con un ejemplo.
root.geometry("200x250")
mylabel = Label(root, text ='Scrollbars', font = "30")
mylabel.pack()
myscroll = Scrollbar(root)
myscroll.pack(side = RIGHT, fill = Y)
mylist = Listbox(root, yscrollcommand = myscroll.set )
for line in range(1, 100):
mylist.insert(END, "Number " + str(line))
mylist.pack(side = LEFT, fill = BOTH )
myscroll.config(command = mylist.yview)
root.mainloop()
_______________________________________________________
| Nombre en Tkinter | Nombre en Guizero |
| Toplevel | Window |
Este widget nos va a permitir nuevas ventanas.
Tkinter.
from tkinter import *
def NuevaVentana():
window = Toplevel()
window.geometry('150x150')
newlabel = Label(window, text = "Settings Window")
newlabel.pack()
root = Tk()
root.geometry('200x200')
myframe = Frame(root)
myframe.pack()
mybutton = Button(myframe, text = "Settings", command = NuevaVentana)
mybutton.pack(pady = 10)
root.mainloop()
Guizero.
from guizero import App, Window, PushButton
def open_window():
window.show(wait=True)
app = App(title="My app", height=200, width=200)
window = Window(app, title = "2nd ventana", height=150, width=150)
# La ventana esta creada pero la ocultamos para que no se vea
# hasta que se pulse el botón que la vuelva visible.
window.hide()
open=PushButton(app, text="Segunda ventana", command=open_window)
app.display()
_______________________________________________________
| Nombre en Tkinter | Nombre en Guizero |
| Notebook |
|
Este Widget nos permite seleccionar páginas de contenido haciendo clic en las pestañas.
Tkinter.
Cuando se hace clic en alguna de estas pestañas, el widget Notebook mostrará un panel secundario asociado a la pestaña seleccionada. Normalmente este panel secundario mostrado es un widget Frame de tkinter.
Para crear este widget, usamos la clase ttk.Notebook de la siguiente forma:
notebook = ttk.Notebook(contenedor, opciones**)
Por lo general el contenedor suele ser la raíz del proyecto.
Este contenedor tiene algunas opciones útiles. Por ejemplo se puede especificar las opciones height and width para especificar el alto y ancho en pixeles asociados al widget.
Además también podemos agregar algo de espacio alrededor del widget usando la opción "padding".
Métodos del Notebook.
La clase ttk.Notebook tiene varios métodos que permiten gestionar las ventanas de una manera efectiva.
Veamos los más utilizados:
add(child, Kwargs**)
El método add agrega un widget secundario a una ventana. Se le puede pasar una o más opciones.
child es el widget para agregar al Notebook o cuaderno.
La opción "text" especifica la etiqueta que aparecerá en la ventana.
La opción "image" especifica la imagen que se mostrará en la pestaña.
Si usamos ambas tenemos que describir la posición de la imagen en relación al texto. Puede ser:
tk.TOP , tk.BOTTOM, tk.LEFT, tk.RIGHT o tk.CENTER.
La opción "underline" toma como valores 0 o un número positivo. Esto subraya el caracter que le indiquemos, pero solo uno. Si ponemos underline=0, solo subrayará el primer carácter, si ponemos 1 subrayará el segundo y así sucesivamente.
hide(tabId)
Este método oculta temporalmente la pestaña identificada por el tabId del Notebook. Como siempre la primera pestaña es la 0, la siguiente la 1 y así sucesivamente.
Para volver a mostrar la ventana hay que volver a utilizar el método add() ya que en este caso no hay un método show()
forget(child)
Elimina permanentemente el widget indicado del Notebook.
El siguiente programa muestra como crear un Notebook con dos pestañas:
import tkinter as tk
from tkinter import ttk
# root window
root = tk.Tk()
root.geometry('400x300')
root.title('Ejemplo de Widget Notebook')
# create a notebook
notebook = ttk.Notebook(root)
notebook.pack(pady=10, expand=True)
# create frames
frame1 = ttk.Frame(notebook, width=400, height=280)
frame2 = ttk.Frame(notebook, width=400, height=280)
frame1.pack(fill='both', expand=True)
frame2.pack(fill='both', expand=True)
# add frames to notebook
notebook.add(frame1, text='Pestaña A', underline=1)
notebook.add(frame2, text='Pestaña B')
root.mainloop()
Guizero.
No existe un elemento especifico para crear un Notebook en guizero asi que tenemos que usar el elemento ttk.Notebook de tkinter.
from guizero import App, Box
from tkinter import ttk
from tkinter.ttk import Notebook
# set up app to use grid layout
app = App(title="Uso de ttk Notebook", layout="grid")
# set up box to use grid and place it in app at 0,0
box = Box(app, border=True, layout='grid', grid=[0,0])
# create a notebook
nb = Notebook(box.tk)
# create some frames for the tabs
pestana_a = ttk.Frame(nb)
pestana_b = ttk.Frame(nb)
# add the tabs
nb.add(pestana_a, text='Pestaña A')
nb.add(pestana_b, text='Pestaña B')
# important - add tk widget only after it is completed
box.add_tk_widget(nb, grid=[0,0])
app.display()
