Desarrollo de interfaces gráficas en Python 3 con Tkinter

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).