Interfaz. Python.

TkInter. Posicionamiento de componentes

Aunque hasta ahora sólo hemos utilizado el gestor geometry pack, TkInter dispone de otras opciones para posicionar los componentes o widgets en la ventana. Dedicaremos esta entrada a explicar cuáles son esta opciones y cómo se emplean. No descarto tratar estos temas más adelante.

Como referencia para tratar este tema tomaré el blog Python Para Impacientes, concretamente el segundo bloque de contenidos del índice TkInter.

Es posible utilizar los tres modelos de posicionamiento simultáneamente, bien en las diferentes ventanas que conforma una aplicación, bien en los diferentes macrocomponentes que se definan en la ventana única y principal (en este segundo caso, sólo si se definen tales componentes o frames).

Los tres modelos o formas de posicionamiento son los siguientes:

• pack, que ha sido el modelo utilizado en las entradas anteriores y que utiliza como referencia los cuatro lados de la ventana. A parte de la simplicidad de uso, tiene la ventaja de que los componentes se adaptan a los cambios en el tamaño de la ventana. Su principal inconveniente son las limitadas posibilidades que presenta de controlar la ubicación deseada.
• grid trata la ventana como si se tratara de una cuadrícula (filas-columnas), lo que permite ubicar cada widget en la posición que se desee mediante un sencillo sistema de coordinadas. También es posible expandir las filas y/o columnas que ocupa cada componente. Tiene como principal limitación sus dificultades para adaptarse a los cambios de tamaño de la ventana, siendo recomendable cuando ésta no es redimensionable.
• Finalmente, place es el método más sencillo de implementar, pero el más complicado para "acertar" con la ubicación deseada. Utiliza como referencia el valor conocido de las dimensiones de la ventana y la referencia a la posición x,y (0,0) como esquina superior izquierda. Presenta también limitaciones para las ventanas redimensionables, por lo que se recomienda que no lo sean.

Aunque ya usamos profusamente el método pack, me ha parecido necesario ilustrar de forma sistemática los distintos atributos de que dispone, así que dedicaré unas líneas a tratar y ejemplificar de nuevo el uso del método pack. Pero dedicaré más tiempo a explicar el uso de los otros dos métodos (grid y place) ya que hasta ahora no han sido empleados.

Empezaremos por el método pack.

Esta imagen reproduce el código del script en el que mostramos una etiqueta en la ventana que hemos posicionado mediante el método pack. Destacar lo siguiente:

• Líneas 1 y 2. Dos formas de importar una librería. La primera es conocida; la segunda permite concretar los componentes a importar, en este caso la librería font que empleamos primero en la asignación de contenido a la variable fuente (línea 5) y después "hereda" la etiqueta etq1 (línea 14). Tendremos ocasión de tratar el tema de los formatos de importación de librerías en otra ocasión.
• Formulación de la configuración de la etiqueta etq1 (líneas 10-15) y uso del método pack para su posicionamiento en la ventana (líneas 16-23). Se trata "desmenuzar" la identificación de atributos en un formato que facilita su visualización. Es una formulación alternativa a la lineal (digamos la clásica), por ejemplo, la de configuración de la etiqueta:

etq1=tk.Label(ventana,text=sTexto,bg="red",fg="white",font=fuente) 

• Configuración de los atributos de posicionamiento pack ()
• fill permite extender la etiqueta en el eje X, en el eje Y o en ambos (BOTH), como es el caso. Ofrece estas tres opciones: tk.X, tk.Y, tk.BOHT.
• side permite referir el posicionamiento respecto a los laterales TOP, LEFT o RIGHT de la ventana. Se presentan también estas tres opciones: tk.TOP, tk.LEFT, tk.RIGHT.
• expand es atributo booleano que admite los valores True vs. False. Como su nombre indica, permite o no expandir el componente respecto a la ventana según se haya indicado (restringido) en función del uso de fill y side.
• Además contamos con los atributos que, como sabemos, dimensionan el espacio alrededor del componente (padx, pady) y del propio componente (ipadx, ipady), en este caso (etiqueta) tomando como referencia su texto.

Este archivo contiene el código anterior te permitirá realizar los cambios que desees y observar sus implicaciones para el posicionamiento y la apariencia de etq1.

Aplico el segundo método (grid) en este script...

... en el que reproduzco parte del típico formulario de recogida de datos, aquí limitado a dos etiquetas y dos entradas.

Puedes observar las similitudes respecto al método pack y las diferencias, que se centran en dos cuestiones:

• Ahora la ventana no es modificable (línea 7)
• Y el posicionamiento de todos los elementos (las dos etiquetas y las dos entradas de datos) se realiza mediante grid(), que consta de atributos similares a los empleados con pack() (padx, pady, ipadx, ipady), pero también con otros específicos: column y row, con los que se identifican los parámetros columna-fila que sirven para posicionar los elementos.

Cuando interesa que un componte ocupe más de una fila o de una columna utilizaremos los atributos columnspan y rowspan respectivamente; por ejemplo (1):

columnspan= 2 -> El componente ocupa la columna asignada con column más la siguiente.

En este archivo encontrarás el código que he creado para trabajar con el método grid()

Para utilizar el método place() trabajaré con el mismo modelo de formulario que en el anterior, aumentando la distancia entre los componentes para que se aprecie mejor la diferencia y la incidencia del posicionamiento establecido.

En este método, como puedes ver en la imagen del código...

... utilizamos los atributos x e y para el posicionamiento del componente y eliminamos las referencias a sus bordes externos e internos. Por ejemplo, el posicionamiento de la etiqueta etq1[ etq1.place(x=10,y=30)] indica que la esquina superior izquierda del componente se ubica en la coordenada 10,30, en unidad pixel y en relación a la ventana, siendo el extremos superior izquierdo de la misma la coordinada 0,0.

En este archivo tienes el código creado empleando el método place(). Puedes probar a modificar las posiciones de los cuatro componentes del formulario para aprender a manejar las referencias x,y.

NOTA

(1) Si deseáramos que la ventana fuera modificable [ventana.rezisable(1,1)] podría interesarnos utilizar el componente sticky, que tiene como parámetros las iniciales de los puntos cardinales (N,S,E,W) y que sirve para anclar los componentes en función del/de los puntos cardinales activados. No obstante, este tratamiento requiere alguna modificación más del script, por lo que, en principio utilizaremos grid() con ventanas no modificables.