Opciones

Muchos de los widgets que utilizamos y vimos hasta ahora cuentan con opciones, con el fin de no repetir la descripcion de cada uno de ellos seran vistos uno a uno en esta seccion. Esta seccion no es mas que una traduccion de la documentacion oficial de Tk sobre la libreria Tkinter con ejemplos e imagenes.

Por hacer

Enlazar con seccion para los colores

Nota

Para mas informacion sobre los colores visite la seccion “Colores” que se ve en

Pueden encontrar mas informacion desde la documentacion oficial de Tcl/Tk sobre las opciones estandar http://www.tcl.tk/man/tcl8.5/TkCmd/options.htm

Por hacer

Especificar widgets afectados por cada opcion (Ver formato de impresion)

activebackground

Con esta opcion podemos indicar que color de fondo se debera utilizar cuando el cursor del mouse se posicione sobre el widget. Para algunos elementos y en algunas plataformas solo sera visible cuando se hace click sobre el.

Acepta cualquier color en un formato valido para Tk, ver en seccion “Colores”

boton = Tkinter.Button(root, text="Hola Mundo!!!", activebackground="#F50743")
boton.pack()
Ejemplo basico de activebackground

Ejemplo sin el cursor encima

Ejemplo basico de activebackground

Ejemplo con el cursor encima

Se muestra con color ‘#F50743’ (Rojo)

activeforeground

Al igual que pasa con ‘activebackground’ con esta otra opcion podemos especificar el color en este caso de primer plano del widget cuando se posiciona el cursor sobre este.

boton = tk.Button(root, text="Hola Mundo!!!", activeforeground="#F50743")
Ejemplo basico de activeforeground

Ejemplo sin el cursor encima

Ejemplo basico de activeforeground

Ejemplo con el cursor encima

Se muestra con color ‘#F50743’ (Rojo)

anchor

Tkinter nos permite controlar de que forma se va a posicionar un texto o imagen con respecto al widget en el que se encuentra. La opcion por defecto es ‘CENTER’ que muestra el elemento centrado.

NW N NE
W CENTER E
SW S SE

NW

Posiciona el texto/imagen en la esquina superior izquierda del widget

boton = tk.Button(root, text="Hola Mundo!!!", width=20, height=10, anchor="nw")
Ejemplo anchor="nw"

N

Posiciona el texto/imagen en la parte superior del widget

boton = tk.Button(root, text="Hola Mundo!!!", width=20, height=10, anchor="n")
Ejemplo anchor="n"

NE

Posiciona el texto/imagen en la esquina superior derecha del widget

boton = tk.Button(root, text="Hola Mundo!!!", width=20, height=10, anchor="ne")
Ejemplo anchor="ne"

W

Posiciona el texto/imagen en la parte izquierda del widget

boton = tk.Button(root, text="Hola Mundo!!!", width=20, height=10, anchor="w")
Ejemplo anchor="w"

CENTER

Posiciona el texto/imagen en el centro del widget

boton = tk.Button(root, text="Hola Mundo!!!", width=20, height=10, anchor="center")
Ejemplo anchor="center"

E

Posiciona el texto/imagen en la parte derecha del widget

boton = tk.Button(root, text="Hola Mundo!!!", width=20, height=10, anchor="e")
Ejemplo anchor="e"

SW

Posiciona el texto/imagen en la esquina inferior izquierda del widget

boton = tk.Button(root, text="Hola Mundo!!!", width=20, height=10, anchor="sw")
Ejemplo anchor="sw"

S

Posiciona el texto/imagen en la parte inferior del widget

boton = tk.Button(root, text="Hola Mundo!!!", width=20, height=10, anchor="s")
Ejemplo anchor="s"

SE

Posiciona el texto/imagen en la esquina inferior derecha del widget

boton = tk.Button(root, text="Hola Mundo!!!", width=20, height=10, anchor="se")
Ejemplo anchor="se"

background (bg)

Sirve para indicar el color de fondo que tendra en area del widget cuando este se encuentre inactivo. Tambien se puede utilizar su forma abreviada ‘bg’ como podemos ver en el segundo ejemplo.

boton = tk.Button(root, text="Hola Mundo!!!", background="#38EB5C")
boton = tk.Button(root, text="Hola Mundo!!!", bg="#38EB5C")
Ejemplo basico de background

Vemos el color verde que toma el boton

bitmap

Por hacer

Ampliar documentacion

boton_error = tk.Label(root, bitmap="error").pack()
boton_gray75 = tk.Label(root, bitmap="gray75").pack()
boton_gray50 = tk.Label(root, bitmap="gray50").pack()
boton_gray25 = tk.Label(root, bitmap="gray25").pack()
boton_gray12 = tk.Label(root, bitmap="gray12").pack()
boton_hourglass = tk.Label(root, bitmap="hourglass").pack()
boton_info = tk.Label(root, bitmap="info").pack()
boton_questhead = tk.Label(root, bitmap="questhead").pack()
boton_question = tk.Label(root, bitmap="question").pack()
boton_warning = tk.Label(root, bitmap="warning").pack()
Bitmaps Predefinidos

Muestra de los bitmaps predefinidos

borderwidth (bd)

Nos da la posibilidad de especificar el ancho del borde del elemento con el que estemos trabajando, Tkinter nos permite especificar el valor en varias unidades de medida (centimetros, pulgadas, milimetros y puntos) las cuales seran vistas mas adelante en la guia. Si no se utiliza junto con la opcion ‘relief’ visualmente es similar a utilizar las opciones ‘heigth’ y ‘width’ como se puede observar en el ejemplo. El valor por defecto es de 1 pixel.

boton = tk.Button(root, text="Hola Mundo!!!", borderwidth=15)
boton = tk.Button(root, text="Hola Mundo!!!", bd=15)
Ejemplo de borderwidth

Un boton con un borde de 15 pixeles

command

Como ya lo mencionamos cuando vimos al widget Button este permite indicar la funcion o metodo que queremos que se llame cuando se preciona por ejemplo un boton, pero esta opcion tambien funciona con otros widgets de Tkinter cumpliendo la misma funcion.

>>> def callback():
>>>     print("Excelente")

>>> boton = tk.Button(root, text="Que te parece la guia?", command=callback)
'Excelente'

cursor

Por hacer

Crear seccion y enlazar

Nos da la posiblidad de indicar que cursor queremos que se muestre cuando el mouse se posiciona sobre la etiqueta. En el siguiente enlace podremos encontrar una lista con los cursores disponibles en Tkinter http://www.tcl.tk/man/tcl8.5/TkCmd/cursors.htm (Ver seccion “Anexos” para ver el listado completo).

El valor ‘none’ consigue eliminar el cursor cuando se pasa el cursor sobre el widget.

etiqueta = tk.Label(root, text="Que te parece la guia?", cursor="hand1")
Un cursor de ejemplo

Mostrando una mano a diferencia del cursor normal

compound

Especifica si el widget debe mostrar texto y mapas/imágenes al mismo tiempo, y si es así, donde el mapa de bits o imagen debe estar en relación con el texto. Debe ser uno de los valores “none”, “bottom”, “top”, “left”, “right”, o “center”. Por ejemplo, el valor (predeterminado) “none” especifica que el mapa de bits o imagen (si se ha definido en el sistema) se mostrará en lugar del texto, el valor “left” especifica que el mapa de bits o imagen se muestra a la izquierda del texto y el valor “center” especifica que el mapa de bits o imagen debe aparecer en la parte superior del texto.

compound="left"

Usando compound con el valor left

compound="right"

Usando compound con el valor right

compound="top"

Usando compound con el valor top

compound="bottom"

Usando compound con el valor bottom

compound="center"

Usando compound con el valor center

compound="none"

Usando compound con el valor none

default

Por hacer

Escribir documentacion (Opcion valida para Button)

disabledbackground

Por hacer

Escribir documentacion (Opcion valida para Spinbox)

disabledforeground

Funciona de la misma forma que foreground y activeforeground pero para elementos deshabilitados, se le puede pasar cualquier color en un formato valido, si no se le pasa una cadena vacia el color que se mostrara sera el de la opcion foreground pero con un efecto punteado.

El valor por defecto es None y obtiene el color del sistema.

boton = tk.Button(root, text="Hola Mundo!!!", state="disabled", disabledforeground=None)
disabledforeground con color por defecto

Usando disabledforeground con el color por defecto

boton = tk.Button(root, text="Hola Mundo!!!", state="disabled", disabledforeground="#F50743")
disabledforeground con valor

Usando disabledforeground con un color rojo

boton = tk.Button(root, text="Hola Mundo!!!", state="disabled", disabledforeground="")
disabledforeground sin valor

Usando disabledforeground sin darle ningun valor

exportselection

font

foreground (fg)

Por hacer

  • Enlazar Label y Entry con sus secciones
  • Ver ejemplos para widgets especificos
  • Mejorar descripcion

Si deseamos cambiar el color de primer plano usamos foreground, para explicarlo un poco mejor asi como vimos background para determinar el color de fondo del widget tambien podemos cambiar el color de la parte delantera. Por lo general por ejemplo en Label y Entry el color de foreground modifica el color de la fuente. Este color es mostrado en el estado normal del widget, completando el circulo de estados ya vistos (normal, activo y desactivado).

Permite usar la abreviatura fg como habiamos visto para background.

boton = Tkinter.Button(root, text="Hola Mundo!!!", command=funcion, foreground="#38EB5C")
boton = Tkinter.Button(root, text="Hola Mundo!!!", command=funcion, fg="#38EB5C")
Ejemplo de foreground

Mostrando una fuente verde con foreground

height

Por hacer

Opcion valida para Button

Permite indicar la altura a la que se posicionara nuestro widget en lineas no en pixeles. Si esta opcion no se especifica el tamaño del elemento se ajustara dependiendo el contenido del mismo.

Con None especificamos su valor por defecto que es 0.

boton = tk.Button(root, text="Hola Mundo!!!", height=0)
Ejemplo de height

Mostrando una altura de 0

boton = tk.Button(root, text="Hola Mundo!!!", height=5)
Ejemplo de height

Mostrando una altura de 5

boton = tk.Button(root, text="Hola Mundo!!!", height=10)
Ejemplo de height

Mostrando una altura de 10

justify

El valor por defecto es center.

CENTER

boton = tk.Button(root, text="Hola\nMundo!!!", justify="center")
Ejemplo de justify

Centrando el texto

LEFT

boton = tk.Button(root, text="Hola\nMundo!!!", justify="left")
Ejemplo de justify

Orientando el texto a la izquierda

overrelief

Por hacer

Escribir documentacion (Se aplica a Button)

Especifica un relieve alternativo para el botón, que se utilizará cuando el cursor del ratón este sobre el widget. Esta opcion puede ser usada para hacer toolbar buttons, configurando relief=”flat” y overrelief=”raised”.

La cadena vacía es el valor predeterminado.

boton = tk.Button(root, text="Hola Mundo!!!", overrelief="")
Ejemplo de overrelief

overrelief con valor None

boton = tk.Button(root, text="Hola Mundo!!!", overrelief="flat")
Ejemplo de overrelief

overrelief con valor

boton = tk.Button(root, text="Hola Mundo!!!", overrelief="raised")
Ejemplo de overrelief

overrelief con valor

boton = tk.Button(root, text="Hola Mundo!!!", relief="flat", overrelief="raised")
Ejemplo de overrelief

Estilo flat-raised sin cursor encima

Ejemplo de overrelief

Estilo flat-raised con cursor encima

relief

Por hacer

Profundizar introduccion

Especifica la apariencia de un borde decorativo alrededor del widget que simula un efecto 3D sobre el elemento, el ancho de esta sombra depende del valor que se especifique con el atributo ‘borderwidth’, los posibles valores son SUNKEN, RAISED, GROOVE, RIDGE, FLAT. El valor por defecto es FLAT que no coloca ningun borde sobre el widget.

Descripcion de los cuatro estilos:

SUNKEN

Borde hundido, que provoca que el elemento que encierra parezca que se encuentra por debajo del nivel de la superficie de la pantalla.

boton = tk.Button(root, text="Hola Mundo!!!", relief="sunken", borderwidth=5)
Ejemplo de relief

RAISED

Borde saliente, que provoca que el elemento que encierra parezca que se encuentra por encima del nivel de la superficie de la pantalla.

boton = tk.Button(root, text="Hola Mundo!!!", relief="raised", borderwidth=5)
Ejemplo de relief

GROOVE

Borde hundido, que visualmente parece que se encuentra por debajo del nivel de la superficie de la pantalla.

boton = tk.Button(root, text="Hola Mundo!!!", relief="groove", borderwidth=5)
Ejemplo de relief

RIDGE

Borde saliente, que visualmente parece que se encuentra por encima del nivel de la superficie de la pantalla.

boton = tk.Button(root, text="Hola Mundo!!!", relief="ridge", borderwidth=5)
Ejemplo de relief

FLAT

No se muestra ningún borde.

boton = tk.Button(root, text="Hola Mundo!!!", relief="flat", borderwidth=5)
Ejemplo de relief

state

Por hacer

Enlazar opciones ‘foreground’ y ‘background’

Esta opcion especifica tres estados ‘normal’, ‘active’ o ‘disabled’. En estado normal se muestra el widget usando las opciones ‘foreground’ y ‘background’, en estado ‘active’ se muestra usando las opciones ‘activeforeground’ y ‘activebackground’ y por ultimo el estado ‘disabled’ es mostrado usando ‘disabledforeground’ y ‘background’ y deshabilitando el uso del widget.

En el siguiente ejemplo se definen tres botones, las tres tienen los mismos argumentos con lo mismos valores a excepcion de la opcion ‘state’, en el resultado final podremos ver que al cambiar el valor de ‘state’ solo toma los valores que habiamos mencionado en la descripcion de la opcion ignorando el resto.

from six.moves import tkinter as tk

root = tk.Tk()
root.geometry("300x100")

foreground = "red"
background = "blue"
activeforeground = "green"
activebackground = "black"
disabledforeground = "white"

boton_normal = tk.Button(root, text="normal", state="normal",
                       foreground=foreground,
                       background=background,
                       activeforeground=activeforeground,
                       activebackground=activebackground,
                       disabledforeground=disabledforeground).pack()


boton_active = tk.Button(root, text="active", state="active",
                       foreground=foreground,
                       background=background,
                       activeforeground=activeforeground,
                       activebackground=activebackground,
                       disabledforeground=disabledforeground).pack()

boton_disabled = tk.Button(root, text="disabled", state="disabled",
                       foreground=foreground,
                       background=background,
                       activeforeground=activeforeground,
                       activebackground=activebackground,
                       disabledforeground=disabledforeground).pack()
Ejemplo state

Ejemplo de los 3 estados sin el cursor encima

Ejemplo state

Ejemplo con el cursor encima del primer boton (Estado normal)

Ejemplo state

Ejemplo con el cursor encima del segundo boton (Estado active)

Ejemplo state

Ejemplo con el cursor encima del tercer boton (Estado disabled)

text

Por hacer

Enlazar opcion compound

Este es un elemento muy importante para los widgets como Label o Button entre otros, esta opcion nos da la posibilidad de incluir un texto dentro del widget, este texto puede contener saltos de lineas en caso de ser necesario y tambien se puede utilizar una variable para indicar la cadena de texto a usar. Si se utiliza una imagen este elemento es ignorado por Tkinter salvo que usemos la opcion compound.

Ejemplo simple:

etiqueta = tk.Label(root, text="Esto es una etiqueta")

Ejemplo con una variable:

texto = "Esto es una etiqueta"
etiqueta = tk.Label(root, text=texto)
etiqueta.pack()
Ejemplo basico text

Ejemplo con salto de linea (recuerden que deben usar el caracter n para el salto de linea):

etiqueta = tk.Label(root, text="Hola \n a todos")
Ejemplo basico text

Ejemplo con tabulacion (recuerden que deben usar el caracter t para la tabulacion):

etiqueta = tk.Label(root, text="Hola \t a todos")
Ejemplo basico text