Tomás Domínguez Mínguez - Desarrollo de interfaces gráficas en Python 3 con Tkinter

En la primera práctica que realizará con este tipo de atributos comunes, modificará el programa ¡Hola Mundo! inicial para no tener que añadir los retornos de carro ni los espacios antes y después del texto, con el fin de evitar que este quede pegado a los bordes de la ventana. Su código ahora es el siguiente:

Como puede observar, el único cambio está en el constructor de la clase Label, ya que ahora se utilizan los atributos padx y pady para añadir un espacio adicional de 10 píxeles alrededor de la etiqueta:

Ejecute el programa y observe que el resultado es similar al utilizado de base.

El segundo bloque de atributos tiene que ver con el color. Tkinter representa los colores con cadenas. Hay dos formas de especificarlos:

•Por su nombre en inglés: "white", "black", "red", "green", "blue", "cyan", “yellow", “orange", y "magenta". Dependiendo de su instalación, podría disponer de otros adicionales.

•Indicando la intensidad de los colores rojo, verde y azul en dígitos hexadecimales.

Para entender esta última forma de expresar los colores, primero debe saber que al rojo, al verde y al azul se los considera primarios porque el resto de colores se pueden obtener a partir de una composición de estos tres colores primarios. El valor de intensidad mínimo que pueden tener es 0 y el máximo es 255.

Ejemplos de especificación de colores utilizando la nomenclatura RGB:

•Blanco: (255, 255, 255)

•Negro: (0, 0, 0)

•Rojo: (255, 0, 0)

•Verde: (0, 255, 0)

•Azul: (0, 0, 255)

•Amarillo: (255, 255, 0)

•Púrpura: (255, 0, 255)

•Cian: (0, 255, 255)

Dicha notación es la decimal. En hexadecimal, un color se representa con una almohadilla #, seguida de seis caracteres hexadecimales (0-9 y A-F). Estos caracteres se dividen en tres parejas de dos caracteres cada una para representar los colores R, G y B (en dicho orden). La intensidad máxima de un color es FF (255 en decimal) y la mínima es 00 (0 en decimal).

Así, por ejemplo, el color rojo se expresaría como “#FF0000” porque los dos primeros caracteres representan la intensidad máxima de este color (FF, la máxima), los dos siguientes la del verde (00, la mínima) y los dos últimos la del azul (00, la mínima). Por el mismo motivo, el color verde se especificaría como “#00FF00” y el azul como “#0000FF”. El blanco se representaría como “#FFFFFF” (es la suma de los tres colores básicos) y el negro como “#000000” (no hay ningún color).

Los principales atributos (opciones) relacionados con el color son:

•background o bg. Color de fondo con el que se muestra el widget en su estado habitual.

•activebackground. Color de fondo cuando el widget está activo, es decir, cuando el cursor del ratón se encuentra sobre él (y no está inactivo).

•activeforeground. Color de primer plano cuando el widget está activo.

•disabledbackground. Color de fondo del widget cuando está inactivo, es decir, cuando no se puede actuar sobre él.

•disabledforeground. Color de primer plano cuando el widget está inactivo.

•foreground o fg. Color de primer plano con el que se muestra el widget en su estado habitual.

•highlightbackground. Color del rectángulo que rodea el widget cuando no tiene el foco. Debe utilizarse junto con highlightthickness.

•highlightcolor. Color del rectángulo que rodea el widget cuando tiene el foco. Debe utilizarse junto con highlightthickness.

Al igual que se indicó en las opciones anteriores, cuando alguna tenga varios nombres, puede haber widgets que solo admitan uno de ellos. El nombre más largo suele ser el más admitido comúnmente (background en vez de bg, foreground en vez de fg, borderwidth en vez de bd, etc.).

Modifique la sentencia del programa anterior, donde se creaba la etiqueta:

Debe quedar como sigue:

Se ha asignado un color de fondo amarillo y otro azul de primer plano (el del texto) con los atributos bg y fg, respectivamente. El resultado lo puede ver a continuación:

Ahora quite las opciones padx y pady del constructor de la etiqueta y páselas al método pack(). El programa quedaría así:

En este caso, ahora ambas opciones hacen referencia al interior de los bordes de la ventana principal, por lo que la etiqueta se separa de estos 10 píxeles:

Si quisiera que dentro de la etiqueta también hubiera ese margen interno, debería añadir de nuevo las opciones padx y pady a su constructor, o incluir las opciones ipadx e ipady al método pack(). Quedaría así:

Como puede apreciar en esta nueva imagen, ahora existe un espacio de 10 píxeles tanto en el interior como en el exterior de la etiqueta:

A diferencia del método pack(), el constructor de la etiqueta no tiene las opciones ipadx e ipady. Además, recuerde que las opciones padx y pady de dicho método hacen referencia al borde interno de la ventana principal (o widget contenedor), no al de la etiqueta. Por eso, las opciones ipadx e ipady del método pack() tienen el mismo efecto que padx y pady en los widgets que contienen.

Una de las características compartidas por los controles gráficos que muestran o permiten la entrada de textos es la fuente (tipo de letra). Una fuente se describe como una tupla con el siguiente formato:

( familia, tamaño )

Opcionalmente, se puede añadir un elemento más, consistente en una cadena que contiene uno o más modificadores de estilo para indicar si el texto va en negrita, cursiva, subrayado o tachado (bold, italic, underline u overstrike); por ejemplo, para que un texto use la fuente Times New Roman con un tamaño de 24 píxeles en itálica y negrita, la tupla que debería utilizar es: