Kitabı oxu: «Desarrollo de interfaces gráficas en Python 3 con Tkinter»

Unidad 7
WIDGETS

Como sabe, los widgets son los componentes gráficos proporcionados por Tkinter para el desarrollo de interfaces de usuario. Cada uno de ellos se representa mediante una clase:

•Label. Es un widget que muestra un texto corto y/o una imagen.

•Message. Similar al widget anterior, pero empleado en textos más largos, compuestos por varias líneas que pueden justificarse.

•Button. Es un botón.

•Entry. Permite introducir una línea de texto.

•Spinbox. Semejante al anterior. Se añaden dos iconos con forma de punta de flecha hacia arriba y hacia abajo, con los que el usuario también podrá seleccionar el valor de un rango.

•Listbox. Ofrece la posibilidad de elegir la opción de una lista.

•Menu, OptionMenu y Menubutton. Se utilizan para crear menús desplegables.

•Colorchooser, Messagebox y Filedialog. No se trata realmente de widgets, sino de módulos que ofrecen una serie de funciones con las que se crean ventanas de diálogo emergentes (pop-up dialogs), donde se pueden elegir colores, exponer mensajes informativos o preguntas, o abrir y guardar archivos.

•Text. Área en la que es posible editar texto con formato.

•Scrollbar. Habilita el desplazamiento por el contenido de un widget cuando este no puede verse completamente.

•Checkbutton, Radiobutton. Permiten elegir una opción de un conjunto predeterminado. Cada una de ellas es, en realidad, un botón que se puede activar o desactivar.

•Frame. Se trata de un widget contenedor, usado para agrupar otros widgets. Facilita el desarrollo de interfaces con diseños complejos.

•Panel. Son similares a los frames, pero, a diferencia de estos, es posible mover los límites entre ellos y cambiar su tamaño.

•Toplevel. También es un widget contenedor, pero, a diferencia de los anteriores, se muestra en otra ventana diferente a la principal.

•Canvas. Área donde es posible dibujar cualquier tipo de gráfico, que puede ser interactivo.

•Scale. Proporciona una barra de desplazamiento para seleccionar gráficamente un valor dentro de una escala.

En los siguientes apartados tendrá ocasión de conocer y practicar con todos estos widgets, desarrollando interfaces gráficas totalmente operativas.

7.1 LABEL Y MESSAGE

Una etiqueta es un widget que exhibe una o más líneas de texto (y/o una imagen). Un mensaje es muy similar a una etiqueta. Su principal diferencia es que el texto se divide automáticamente en líneas y se justifica, manteniendo un ancho o relación de aspecto determinado.

7.1.1 Opciones y métodos

En Tkinter, una etiqueta es un objeto de la clase Label. Su constructor es el siguiente:

Label(widget contenedor, opción, …)

El primer argumento es el widget contenedor. Si no se incluyera, se consideraría que se trata de la ventana principal. Como opciones, además de las comunes activebackground, activeforeground, anchor, bg, bitmap, bd, compound, cursor, disabledforeground, font, fg, height, highlightbackground, highlightcolor, highlightthickness, image, padx, pady, relief, takefocus y width, destacan:

•justify. Cuando la etiqueta tenga varias líneas, esta opción determina cómo se alinean. Sus valores pueden ser: LEFT (a la izquierda), CENTER (centradas, es el valor por defecto) o RIGHT (a la derecha). Si se trata de una sola línea, y esta ocupa menos espacio del disponible en la etiqueta, deberá utilizar la opción anchor para establecer su posición.

•state. De forma predeterminada, el valor de esta opción es NORMAL. Si no quiere que atienda eventos, asígnele el valor DISABLED. Cuando el ratón se sitúe sobre la etiqueta, tomará el valor ACTIVE (a no ser que esté desactivada).

•text. Cadena de texto que muestra la etiqueta. Si quiere que tenga más de una línea, utilice la secuencia de escape ‘\n’.

•textvariable. Nombre de una variable de control. El texto mostrado por la etiqueta será el correspondiente al valor de dicha variable.

•underline. Fija el carácter del texto que quiera que aparezca subrayado. Su valor es la posición que ocupa en dicho texto, empezando a contar desde 0. Se utiliza para indicar la existencia de atajos de teclado. El valor por defecto es −1, lo que significa que no habrá ningún texto subrayado.

•wraplength. Limita el ancho del texto de la etiqueta en cada línea (en píxeles). El valor por defecto es 0, lo que significa que solo se pueden añadir nuevas líneas de forma explícita.

Las listas de opciones se describirán normalmente en orden alfabético.

La forma de modificar el texto mostrado por una etiqueta es cambiando el valor del atributo text mediante el método configure() o asignando una variable de control al atributo textvariable. En este último caso, la etiqueta mostraría el valor que tuviera dicha variable en todo momento.

Por su parte, los mensajes son objetos de la clase Message, cuyo constructor es:

Además de las opciones comunes bg, bd, cursor, font, fg, highlightbackground, highlightcolor, highlightthickness, padx, pady, relief, takefocus y width, podrán utilizarse:

•aspect. Determina la relación entre el ancho y el alto como un porcentaje (aunque este widget dispone de la opción width para establecer su ancho, no tiene la opción height para hacer lo mismo con el alto); por ejemplo, un valor de 100 haría que el mensaje quedara encajado en un cuadrado. Si fuera 200, tendría el doble de ancho que de alto. El valor predeterminado es 150; es decir, el texto se muestra dentro de un rectángulo un 50 % más ancho que alto.

•justify, text, texvariable. Su significado es el mismo descrito para las etiquetas.

7.1.2 Práctica

En la siguiente práctica, desarrollará un reloj digital que muestra la hora actual:

En primer lugar, se importan las clases Tk, Label y StringVar de la librería Tkinter. Con la primera se crea la ventana principal, con la segunda se crea la etiqueta y, con la última, se crea la variable de control que contendrá la hora mostrada por dicha etiqueta. También se importa la librería time, con la que se obtendrá la hora actual:

Saltando la declaración de la función actualizar_hora(), que verá más adelante, se procede a crear la ventana principal, impidiendo que se pueda redimensionar:

Luego, se crea la variable de control que contendrá la hora actual:

variable_control = StringVar()

A continuación, se crea la etiqueta a la que se asocia la variable de control anterior con la opción textvariable. La hora se mostrará en color rojo con un tipo de fuente “Arial” de 18 píxeles (opciones fg y font). Alrededor de la etiqueta se deja un margen de 20 píxeles (opciones padx y pady). Una vez creada, se añade a la ventana principal con el método pack():

Por último, se llama a la función que actualiza el texto de la etiqueta para que muestre la hora actual:

Es el momento de describir el código de dicha función. Dentro, lo primero que se hace es llamar a la función strftime(), que devuelve la hora actual en el formato hh:mm:ss y la almacena en la variable hora:

Puesto que la etiqueta reloj muestra en todo momento el contenido de la variable de control que tiene asociada (variable_control), se le asigna dicho valor con el método set():

Una vez actualizada la hora, se invoca el método after() para que, transcurrido un segundo, se vuelva a llamar a esta misma función, que actualizará de nuevo la hora en pantalla:

El resultado de la ejecución de este programa lo puede ver a continuación:

Si quisiera mostrar la imagen de un reloj de arena junto a la hora, podría hacer uso de la que viene con Tkinter. Para ello, sustituya la sentencia

por:

Lo que se ha hecho es añadir al constructor de la etiqueta la opción bitmap, para cargar la imagen del reloj, y compound, para situarla a la izquierda del texto.

El resultado obtenido en esta ocasión será el siguiente:

7.2 BUTTON

Este widget representa un botón. Habitualmente muestran un texto, aunque también se les pueden añadir una imagen que sirva para indicar su propósito de forma gráfica:

7.2.1 Opciones y métodos

Los botones se representan como objetos de la clase Button, cuyo constructor es:

Button(widget contenedor, opción, …)

El primer argumento es el widget contenedor. Si no se incluyera, se tomaría por defecto la ventana principal. Como opciones, además de las comunes activebackground, activeforeground, anchor, bd, bg, bitmap, compound, cursor, disabledforeground, fg, font, height, highlightbackground, highlightcolor, highlightthickness, image, padx, pady, relief, takefocus, underline, width y wraplength, destacan:

•command. Función que se ejecutará cuando se pulse el botón.

•justify. Cuando el texto mostrado por el botón tenga varias líneas, esta opción determina cómo se alinean. Sus valores pueden ser: LEFT (a la izquierda), CENTER (centradas, es el valor por defecto) o RIGHT (a la derecha). Si se trata de una sola línea, y esta ocupa menos espacio del disponible en la etiqueta, deberá utilizar la opción anchor.

•default. Asigne el valor DISBALED a esta opción si quiere que el botón se cree deshabilitado (que no se pueda pulsar). Por defecto, tiene el valor NORMAL.

•overrelief. Estilo de relieve que presenta el botón cuando sitúa el ratón sobre él. Al igual que el atributo relief, puede tener los valores: FLAT, RAISED, SUNKEN, GROOVE y RIDGE. El valor predeterminado es RAISED.

•repeatdelay y repeatinterval. Normalmente, la función asociada a un botón (opción command) se ejecuta solo una vez cuando se deja de pulsar el ratón. Si desea que lo haga a intervalos regulares mientras se mantenga presionado, asigne a repeatinterval el número de milisegundos entre repeticiones, y a repeatdelay la cantidad de milisegundos que deben transcurrir antes de empezar a invocarse; por ejemplo, si el valor de repeatdelay es 500 y el de repeatinterval es 100, la función asociada al botón se ejecutará al cabo de medio segundo y, luego, cada décima de segundo, hasta que se deje de pulsar. Si no se mantuviera presionado el ratón al menos el tiempo indicado en la opción repeatdelay, la función se ejecutaría una única vez (comportamiento habitual).

•state. El valor predeterminado es NORMAL, lo que permite pulsarlo. Si quiere evitarlo, asigne a esta opción el valor DISABLED. Cuando el ratón esté sobre el botón, su valor será ACTIVE (a no ser que esté desactivado).

•text. Texto que se muestra dentro del botón.

•textvariable. Nombre de una variable de control. El texto mostrado por el botón será el correspondiente al valor de dicha variable en todo momento.

•underline. Fija el carácter del texto que quiera que aparezca subrayado. Su valor es la posición que ocupa en dicho texto, empezando a contar desde 0. Se utiliza para indicar la existencia de atajos de teclado. El valor por defecto es −1, lo que significa que no habrá ninguno subrayado.

•wraplength. Limita el ancho del texto del botón en cada línea (en píxeles). El valor por defecto es 0, lo que significa que solo se pueden añadir nuevas líneas de forma explícita.

Esta clase tiene dos métodos. El primero le hace parpadear varias veces entre los colores que tenga definidos para los estados activo y normal (establecidos en las opciones activebackground y activeforeground en el primer caso, y background y foreground en el segundo):

El segundo permite invocar la función que tenga asociada (como si se hubiera pulsado):

7.2.2 Práctica

En esta nueva práctica, va a desarrollar un cronómetro. Para ello, utilizará una etiqueta que muestre el tiempo transcurrido y dos botones: uno para ponerlo en marcha —empezando a contar a partir de cero— y otro que le permita pararlo.

El código del programa es el siguiente:

En primer lugar, se importan las clases necesarias del módulo Tkinter. Las primeras son las utilizadas para crear la ventana principal (Tk), la etiqueta que marca el tiempo transcurrido (Label) y los botones de inicio y parada (Button). Por último, la variable de control asociada a la etiqueta será un objeto de la clase StringVar:

A continuación, se declaran las variables empleadas a lo largo del programa. Las primeras (hora, minuto y segundo) serán las que lleven la cuenta de las horas, minutos y segundos transcurridos. La última (inicio) indica si el cronómetro está en marcha o no:

Saltando la declaración de las funciones, se encontrará con las sentencias que crean la ventana principal y evitan que pueda redimensionarse:

Luego, se crea la variable de control que se vinculará a la etiqueta. Será la que contenga el tiempo transcurrido en todo momento. Se le asigna inicialmente el valor “00:00:00” al arrancar el programa, utilizando la opción value:

La siguiente sentencia crea la etiqueta que muestra el tiempo transcurrido. Su código es similar al de la práctica del reloj vista anteriormente, por lo que no se dará ninguna explicación adicional:

Después, se crean los botones de arranque (boton_start) y parada (boton_ stop). El nombre de cada uno de ellos se asigna con el atributo text. Para que sean más anchos, se establece un margen interior de 10 píxeles con el atributo padx. Los colores del texto y del fondo los determina el valor de los atributos fg y bg. Por último, con la opción command, se establece la función que se llamará cuando se pulsen; en concreto, start() para el de arranque y stop() para el de parada (su código se describirá más adelante):

Una vez creados los widgets, estos se muestran en la ventana principal. La etiqueta se situará la primera y, por lo tanto, en la parte superior. En el caso de los botones, se utilizará la opción side para colocar el de la puesta en marcha del cronómetro a la izquierda y el de parada a la derecha. Además, se establece una separación de 10 píxeles alrededor de cada uno con padx y pady:

La última sentencia invoca el método mainloop(), momento a partir del cual se podrán capturar los eventos producidos cuando se pulse cualquiera de los botones, invocando la función que tengan asociada:

Pasemos a ver la declaración de estas funciones, empezando por la que actualiza el tiempo transcurrido desde que se pulsó el botón “Start”. En ella, lo primero que se hace es declarar como globales las variables que contienen el tiempo que ha pasado desde ese momento (hora, minuto y segundo), ya que serán las mismas utilizadas en las invocaciones que se realicen cada segundo a esta función. Además, como solo se actualizará el tiempo cuando el cronómetro esté en marcha, la lógica de esta función solo se llevará a cabo si la variable inicio tiene el valor True:

El primer bloque de sentencias que se ejecuta cuando se cumple la condición del if anterior actualiza el valor de la hora, minutos y segundos transcurridos. Solo se podrá llegar a contar un periodo de tiempo de 99 horas, momento a partir del cual el cronómetro se reseteará:

Las siguientes sentencias lo único que hacen es añadir un 0 delante de los números menores de 10, para que siempre se muestren con dos dígitos:

Una vez obtenido el tiempo transcurrido desde que se pulsó el botón “Start”, se muestra en la etiqueta en formato hh:mm:ss. Para ello, se modifica el valor de la variable de control que tiene asociada (variable_control) con el método set():

Por último, se invoca el método after para volver a ejecutar esta función al cabo de un segundo:

Las dos funciones que quedan por describir son las de los botones “Start” y “Stop”. Empecemos por la primera.

La función que inicia el cronómetro también declara como globales las variables hora, minuto y segundo, porque podrían modificar su valor, al igual que inicio. Como serán utilizadas fuera de esta función, se quiere evitar que se traten como locales:

Puesto que el tiempo empezará a contar únicamente cuando el cronómetro esté parado, las tareas necesarias para iniciar dicha cuenta solo se llevarán a cabo si la variable inicio tiene el valor False:

Si se cumpliera la condición anterior, se pondría a cero el cronómetro y se asignaría el valor “00:00:00” a la variable de control variable_control asociada a la etiqueta con el método set(), se iniciarían a 0 las variables con las horas, minutos y segundos transcurridos y se asignaría a la variable inicio el valor True para empezar la cuenta:

Por último, se pondría en marcha el cronómetro invocando la función actualizar_tiempo() transcurrido un segundo, con el método after():

La última función detiene la cuenta del tiempo cuando se pulsa el botón “Stop”. Para ello, asigna el valor False a la variable inicio con el fin de que deje de invocarse recursivamente la función actualizar_tiempo(), es decir, que deje de actualizarse el tiempo. Naturalmente, dicha variable deberá haber sido declarada como global, ya que será utilizada por el resto de funciones del programa:

El resultado de la ejecución del programa se puede ver a continuación. Como puede apreciar, el tiempo transcurrido se muestra en color azul, mientras que el texto de los botones aparece en blanco sobre fondo verde (“Start”) o rojo (“Stop”). Al pulsar el botón “Start”, empezaría a contar el tiempo, mientras que, pulsando “Stop”, se pararía. Si volviera a pulsar “Start”, el cronómetro se resetearía, empezando la cuenta desde cero.

7.3 ENTRY

Este widget se utiliza para mostrar un campo de entrada de texto:

Si quisiera que el usuario pudiera escribir más de una línea, el widget más adecuado sería Text (lo estudiará más adelante).

7.3.1 Opciones y métodos

En Tkinter, un campo de entrada de texto se representa por la clase Entry, cuyo constructor es el siguiente:

Entry(widget contenedor, opción, …)

El primer argumento es el widget contenedor (si no indicara este argumento, se supondría que es la ventana principal). Como opciones, además de las comunes bg, bd, cursor, disabledbackground, disabledforeground, fg, font, highlightbackground, highlightcolor, highlightthickness, relief, takefocus y width, destacan:

•exportselection. Por defecto, cuando se selecciona el texto de este campo, se copia en el portapapeles. Para evitar este comportamiento, asigne el valor False a esta opción.

•justify. Cuando el texto mostrado en el campo tiene varias líneas, esta opción determina cómo se alinean. Sus valores pueden ser: LEFT (a la izquierda), CENTER (centradas, es el valor por defecto) o RIGHT (a la derecha).

•readonlybackground. Color de fondo del campo cuando su estado es de solo lectura.

•show. En vez de los caracteres introducidos por el usuario, se muestra el asignado a esta opción; por ejemplo, si un campo de entrada de texto sirviera para introducir una contraseña y esta opción tuviera el valor ‘*’, solo se verían asteriscos.

•state. El valor predeterminado es NORMAL, lo que permite escribir en él. Si quiere evitarlo, haciendo que sea de solo lectura, asigne a esta opción el valor DISABLED. Cuando el ratón esté sobre el campo, su valor será ACTIVE (a no ser que esté desactivado).

•textvariable. Nombre de una variable de control cuyo valor es el contenido del campo en todo momento.

•validate y validatecommand. El valor de la primera opción determina cuándo se debe llamar a la función indicada en la segunda. Para conocer cómo usarlas, consulte el capítulo de validación de entradas de datos.

•xscrollcommand. Permite hacer scroll del texto introducido en el campo cuando este supera su tamaño. Toma como valor un objeto de la clase Scrollbar, que representa una barra de scroll. Cuando estudie este widget, sabrá cómo utilizarlo.

Además de las opciones descritas anteriormente, existen otras relacionadas con el cursor de inserción:

•insertbackground. Color del cursor de inserción del texto. Por defecto, es negro.

•insertborderwidth. Ancho del relieve alrededor del cursor de inserción. Si quiere que tenga un aspecto 3D con efecto RAISED, asigne a esta opción un valor que, al menos, duplique el de la opción insertwidth.

•insertofftime. De forma predeterminada, el cursor de inserción parpadea. Con esta opción puede establecer el número de milisegundos entre cada parpadeo. El valor predeterminado es 300. Si le asignara el valor 0, no parpadearía.

•insertontime. En este caso, lo que se establece es el número de milisegundos en los que el cursor de inserción se ve en cada parpadeo. El valor predeterminado es 600.

•insertwidth. Ancho del cursor de inserción. Por defecto, es de dos píxeles de grosor.

Por último, existe otro grupo de opciones relativas al texto seleccionado dentro del campo:

•selectbackground. Color de fondo del texto seleccionado.

•selectborderwidth. Ancho del borde que hay alrededor del texto seleccionado. El valor predeterminado es de un píxel.

•selectforeground. Color de primer plano del texto seleccionado (el del propio texto).

En cuanto a los métodos, únicamente se describirán tres de los que dispone este widget. El primero devuelve el texto contenido en el campo:

get()

El siguiente añade el texto incluido en el segundo argumento antes del carácter situado en la posición indicada en el primero:

insert(index, texto)

La posición dentro de un campo de texto se puede especificar de las siguientes formas:

•Un número, en el que la primera posición es el 0.

•END. Posición siguiente a la del texto existente.

•INSERT. Posición en la que se encuentra el cursor de inserción (el que indica dónde se empezaría a escribir el nuevo texto).

•ANCHOR. Primer carácter del texto seleccionado (si lo hubiera).

Por ejemplo, si quiere añadir un texto al final del existente en el campo, este método se llamaría así:

El último método permite borrar parte del texto o todo el texto del campo:

Este método elimina los caracteres contenidos entre la posición inicial y la final (sin incluir el último). Si se omitiera el segundo argumento, solo se eliminaría el carácter situado en la posición inicial.

Por ejemplo, para borrar todo el texto de un campo, la forma de invocar este método sería:

Como viene siendo habitual, también podría sustituir la constante END por la cadena "end". Si prefiere usar la constante, no se olvide de importarla.

7.3.2 Práctica

Para practicar con este nuevo widget, va a realizar un programa que muestre una ventana donde se solicite un usuario y una contraseña. Además de los campos de entrada correspondientes, habrá dos botones: “ACEPTAR” y “CANCELAR”. El primero cerrará la ventana y el segundo borrará el contenido de ambos campos.

El código del programa es el siguiente:

Lo primero que se hace es importar las clases del paquete Tkinter que se van a utilizar; en concreto, las que permitirán crear la ventana principal (Tk), las etiquetas situadas a la izquierda de cada campo de entrada (Label), los propios campos de texto (Entry) y los botones (Button):

Saltando la declaración de las funciones a las que se llamará cuando se pulsen los botones, lo primero que se hace es crear la ventana principal (root), que no podrá redimensionarse. Además, la barra de título exhibirá el nombre “Login”:

Luego, se crea la etiqueta con la que se indica que, en el campo de entrada, hay que introducir el nombre del usuario y, a continuación, dicho campo de texto. Con la opción bd se establece que el borde tenga cinco píxeles de grosor. Las otras dos opciones determinan el color (highlightcolor) y el ancho del rectángulo (highlightthickness) que rodeará el campo cuando se pulse sobre él (tenga el foco):

Por defecto, el ancho del rectángulo que aparece cuando el campo tiene el foco es de 0 píxeles, por lo que, para que se vea, siempre tendrá que asignarle un valor mayor con la opción highlightthickness.

El código que crea la etiqueta y el campo de la contraseña es similar. La única diferencia remarcable es que en el campo de texto se usa la opción show, por lo que los caracteres mostrados en pantalla cuando se escriba una contraseña serán únicamente asteriscos:

Respecto a los botones, el de aceptar tiene asociada la función aceptar() y el otro tiene asociada la función cancelar():

Una vez creados los widgets, se colocan en la ventana principal con el gestor de geometría grid.

En primer lugar, se sitúa la etiqueta “USUARIO” en la celda correspondiente a la fila 0, columna 0. El texto que contiene se ubica a la izquierda asignando el valor "W" a la opción sticky. También se establece un margen de 10 píxeles a su alrededor con las opciones padx y pady:

El campo de entrada de texto se coloca a la derecha de la etiqueta, es decir, en la misma fila pero en la siguiente columna. Además, se lleva al extremo derecho de la celda, dando el valor "E" a la opción sticky. En este caso, solo se establece un margen horizontal de 10 píxeles:

El código que ubica la etiqueta y el campo de la contraseña es similar (lo único que cambia es el número de la fila, para situarlos debajo), por lo que no se van a dar explicaciones adicionales:

El botón “ACEPTAR” se ubica en la parte izquierda de la celda para alinearlo con las etiquetas. Por eso, se asigna el valor "W" a la opción sticky:

El botón “CANCELAR” se pone a la derecha de la celda, alindándolo con los campos que tiene encima (la opción sticky toma el valor "E"):

La última sentencia permite atender los eventos generados en la interfaz; en concreto, los provocados al pulsar cualquiera de los botones:

Solo queda describir las funciones a las que se llamará cuando se pulsen dichos botones. Si fuera el de “ACEPTAR”, se ejecutaría la función aceptar(), que únicamente cerraría la ventana con el método destroy:

Si se pulsara el botón “CANCELAR”, se ejecutaría la función cancelar(), que borraría el contenido de ambos campos con el método delete():

Ejecute el programa. En la siguiente imagen puede ver el aspecto que tendría el formulario una vez introducido un usuario y una contraseña (aparece con asteriscos). Como puede observar, el foco se encuentra en este último campo, que aparece rodeado por un rectángulo de color rojo:

Si pulsara el botón “CANCELAR”, su contenido desaparecería. Con el botón “ACEPTAR”, se cerraría la ventana.

7.4 SPINBOX

Este widget también se usa para la entrada de datos, pero, a diferencia del anterior, el usuario podrá seleccionar el valor de un rango (o lista de valores), en el que podrá desplazarse con los dos iconos con forma de punta de flecha hacia arriba y hacia abajo que tiene a su derecha:

7.4.1 Opciones y métodos

Este widget se representa con la clase Spinbox, cuyo constructor es:

Spinbox(widget contenedor, opción, …)

El primer argumento es el widget contenedor. Si no lo incluyera, se consideraría que se trata de la ventana principal. En el segundo argumento, además de las opciones comunes activebackground, bg, bd, cursor, disabledbackground, disabledforeground, fg, font, highlightbackground, highlightcolor, highlightthickness, relief, takefocus y width, también dispone de las siguientes:

•command. Nombre de la función a la que se llamará cuando el usuario haga clic en una de las puntas de flecha. Dicha función no se invocará cuando el usuario edite directamente el valor en el propio campo de texto.

•exportselection. Por defecto, cuando se selecciona texto dentro de un widget de entrada de datos, se copia automáticamente en el portapapeles. Para evitarlo, asigne el valor False a esta opción.

•format. Expresión que determina el formato de los valores numéricos de las opciones from_ y to (los verá a continuación); por ejemplo, el valor:

‘%4.2f’

mostraría los valores con cuatro dígitos, dos de los cuales serían decimales.

•from_. Valor inicial del rango. Será el que se muestre inicialmente en el campo de entrada.

•increment. Cantidad en la que aumentan o disminuyen los valores del rango establecido entre from_ y to, cuando se pulsan las puntas de flecha hacia arriba o hacia abajo.

•justify. Controla la posición del texto en el campo de entrada del widget. Por defecto, este se justifica a la izquierda (LEFT). Si deseara otro comportamiento, podría cambiar el valor de esta opción por CENTER (centrado) o RIGHT (a la derecha).

•readonlybackground. Color de fondo del botón cuando su estado es de solo lectura (‘readonly’).

•repeatdelay y repeatinterval. La primera opción (repeatdelay) especifica cuánto tiempo debe mantenerse pulsado el botón del ratón antes de que empiecen a cambiar los valores del campo de forma automática, mientras que la segunda (repeatinterval) determina la frecuencia con la que estos se incrementan/decrementan. Los tiempos predeterminados son 400 y 100 milisegundos, respectivamente.

•state. Puede tomar los valores NORMAL (por defecto) o DISABLED, en cuyo caso el campo no será editable. Si una vez introducida la información en el campo, quisiera evitar que pudiera modificarse, asigne el valor ‘readonly’ (la constante READONLY equivalente no existe). El valor de este atributo será ACTIVE cuando se sitúe el ratón sobre el campo (a no ser que esté desactivado).

•textvariable. Variable de control asociada al campo.

•to. Valor final del rango (el inicial se estableció con la opción from_).

•validate y validatecommand. El valor de la primera opción determina cuándo se debe llamar a la función indicada en la segunda. La forma de utilizarlas se explicará en el capítulo dedicado a la validación de entrada de datos.

•values. Hay dos formas posibles de especificar los valores de este widget: mediante un rango de valores (opciones from_ y to) o mediante una tupla de strings, que es la que se daría a esta opción. En ese caso, al pulsar las flechas superior e inferior, se irían mostrando los elementos de dicha tupla.

•wrap. Normalmente, si se pulsa la punta de flecha hacia arriba cuando el campo contiene el valor más alto del rango, no tendrá ningún efecto. Y, al revés, si tuviera el valor más bajo, sería la punta de flecha hacia abajo la que no funcionaría. Para cambiar este comportamiento, asigne el valor True a esta opción. De esa forma, al llegar al valor más alto, si siguiera pulsando la punta de la flecha hacia arriba, aparecería de nuevo el valor más bajo. Igualmente, al alcanzar el valor inferior del rango, si presionara la punta de la flecha hacia abajo, vería el valor más alto. Por lo tanto, esta opción permite seleccionar los valores de un rango de forma cíclica.

•xscrollcommand. Permite hacer scroll del texto introducido en el campo cuando este supera su tamaño. Su valor es un objeto del tipo Scrollbar (lo verá más adelante, junto con la manera de utilizar esta opción).

Además, relacionados con el cursor de inserción, esta clase dispone de los atributos insertbackground, insertborderwidth, insertofftime, insertontime, e insertwidth, cuyo significado es el mismo descrito en el campo de entrada de texto.

Con dicho widget también comparte las opciones selectbackground, selectborderwidth y selectforeground.

Otro grupo de atributos que podría resultarle interesante es aquel relativo a los botones con los que se puede mover hacia arriba/abajo entre los valores del rango establecido con las opciones from_ y to, o en la tupla de strings asignada al atributo values. Se trata de los siguientes:

•buttonbackground. Color de fondo de las puntas de flecha (gris, por defecto).

•buttoncursor. Imagen que muestra el cursor cuando el ratón está sobre las puntas de flecha. Su valor puede ser cualquiera de los utilizados para el atributo estándar cursor.

•buttondownrelief. Estilo del relieve asignado a la punta de flecha hacia abajo. Puede tomar cualquiera de los valores del atributo estándar relief (por defecto, RAISED).

•buttonuprelief. Similar al anterior, pero referente al botón con la punta de flecha hacia arriba (por defecto, RAISED).

Aunque este widget tiene sus propios métodos, los más habituales son los descritos anteriormente para los campos de texto (Entry), estudiados en el apartado anterior.

7.4.2 Práctica

En esta ocasión, va a crear un formulario para solicitar al usuario su nombre, dirección y edad. Este último campo será un spinbox en el que se pueda seleccionar un valor entre 18 y 65 años.

El formulario tendrá dos botones. El botón “CANCELAR” borrará la información introducida en los campos “nombre” y “dirección”, volviendo a reflejar la edad inicial (18). El botón “CONFIRMAR” mostrará, en la parte inferior de la ventana, una etiqueta con el valor introducido en cada uno de ellos.

Más abajo se muestra el aspecto que tendrá el formulario. Como puede ver, el tamaño del campo “edad” es inferior a los dos anteriores. Además, al modificar el ancho de la ventana, los campos “nombre” y “dirección” crecerán en tamaño —cosa que no sucederá con el campo “edad”, que mantendrá el que tiene—. No tendría sentido que cambiara su tamaño, porque el margen de edades posibles solo puede contener dos dígitos (a diferencia del nombre o la dirección, cuya longitud es arbitraria).

El código utilizado para desarrollar este formulario es el siguiente:

En primer lugar, se importan las clases de la librería Tkinter necesarias, que en este caso serán las correspondientes a la ventana principal (Tk), las etiquetas (Label), los campos de texto (Entry), el spinbox (Spinbox) y los botones (Button):

Las siguientes sentencias establecen el rango de edades que se podrán seleccionar en el spinbox:

Las funciones que se ejecutan al pulsar los botones se describirán más adelante. Por lo tanto, salte a las sentencias que crean la ventana principal, establecen el texto que aparecerá en su barra de título (“Formulario”), su tamaño mínimo (300 × 100) y la posibilidad de modificarlo únicamente en sentido horizontal:

Luego, se encuentran las sentencias encargadas de crear todos los widgets que conformarán el formulario. En primer lugar, la etiqueta y el campo en el que se introducirá el nombre y, a continuación, los correspondientes para la dirección. Las opciones utilizadas en los constructores de cada uno de ellos ya las conoce de la práctica anterior (la del usuario y contraseña), por lo que no se darán explicaciones adicionales:

Donde sí nos vamos a detener es en la sentencia con la que se crea el spinbox, después de la etiqueta que se situará a su izquierda. El constructor de dicho widget, además de las opciones ya conocidas, comunes a los campos de entrada anteriores, incluye las que fijan el valor mínimo y máximo del rango de edades (opciones from_ y to), así como la que establece su ancho en tres caracteres (width). Como verá más adelante, será el que tenga siempre, aunque modifique el tamaño de la ventana:

Por último, se crea la etiqueta donde se mostrará el nombre, la dirección y la edad introducidos en cada uno de estos campos cuando se pulse el botón “CONFIRMAR”. Inicialmente estará vacía (no se utiliza la opción text). Como el texto que muestre tendrá varias líneas, con la opción justify se indica que todas empiecen a la misma altura por la izquierda:

Una vez creados los widgets, se sitúan en la ventana principal utilizando un gestor de geometría grid. Las celdas en las que irán situados se establecen con las opciones row y column. Para mantener una distancia de separación entre ellos, se utilizan las opciones padx y pady. Por último, con sticky se indica la posición que tendrán dentro de cada celda. En este sentido, todas las etiquetas y el spinbox lo hacen en la parte izquierda (valor "w"), manteniendo sus dimensiones, independientemente de las que tenga la celda. Por el contrario, como se quiere que los campos de entrada del nombre y la dirección cambien de tamaño con el de la celda, estos deberán ocupar todo el ancho que tenga, por lo que el valor de la opción sticky deberá ser "ew":

Precisamente, la siguiente sentencia es la que permite que el ancho de la segunda columna —y, por lo tanto, el de todas sus celdas— siga el de la ventana cuando se modifique. El valor que ponga en la opción weight es indiferente, al tratarse de la única columna que puede cambiar de tamaño. Sin embargo, es imprescindible incluirlo en el método:

La sentencia que hay a continuación añade la etiqueta donde se mostrará el contenido de cada campo (inicialmente vacía). La única opción que puede llamar la atención es columnspan, que asigna dos columnas a este widget. Esto se hace así para que ocupe todo el ancho de la ventana:

Las dos sentencias que le siguen son las que añaden los botones “ACEPTAR” y “CANCELAR” a ambos lados de la parte inferior de la ventana. Su código es el mismo que el de la práctica anterior, por lo que no se ofrecerá ninguna aclaración adicional:

Como siempre, la última sentencia es necesaria para empezar a atender los eventos que se produzcan en la interfaz:

Ha llegado el momento de describir las funciones que se ejecutarán cuando se pulsen los botones, empezando por aceptar(), que es la vinculada al botón “ACEPTAR”. En ella, primero se inicializa la variable en la que se almacenará un mensaje con la información introducida en los campos del formulario:

La manera de obtener el contenido de dichos campos es mediante el método get():

Las siguientes sentencias componen la cadena que se mostrará en la etiqueta de resultados (selecciones) a partir de los valores anteriores, añadiendo un texto de inicio previo a cada uno de ellos (si se hubiera introducido alguno) y separándolos en líneas independientes con el carácter de escape "\n":

Por último, el texto que se acaba de componer se asigna a la opción text de la etiqueta (selecciones_label) utilizando el método genérico config(), con el fin de mostrarlo:

Otra forma de hacer esto mismo es mediante una variable de control.

Por último, la función cancelar() se ejecutará cuando se pulse el botón “CANCELAR”. En ella, se borra el contenido de todos los campos con el método delete():

Además, al spinbox se le asigna de nuevo el valor inicial que tenía al arrancar la aplicación con el método insert():

Por último, se borra el contenido de la etiqueta que mostraba la información introducida por el usuario al pulsar el botón “ACEPTAR”. Para ello, se emplea de nuevo el método config(), con el fin de asignar la cadena vacía a la opción text:

Ejecute el programa para verificar que su aspecto coincide con el esperado. Compruebe que el tamaño de la ventana solo se puede modificar en sentido horizontal y que los únicos campos que se ajustan a dicho tamaño son el del nombre y el de la dirección. Luego, rellene los campos con los datos que quiera y pulse el botón “ACEPTAR”. La información que acaba de introducir debe aparecer en la parte inferior.

Si pulsara el botón “CANCELAR”, los campos con el nombre y la dirección quedarían vacíos, mientras que el de la edad mostraría el valor inicial (18).