Grid Geometry Manager de Python

Vamos a hacer un pequeño editor de textos en python, pero centrándonos en cómo colocar los componentes en la ventana, en concreto usando el Grid Geometry Manager de Python

Los Geometry Manager

Cuando hacemos una ventana en python, le iremos colocando distintos componentes o widgets, como botones, cajas de texto, listas, etc. El cómo se distribuyen estos componentes en la ventana depende del Geometry Manager que usemos en la ventana. Python y en concreto su librería de componentes Tkinter nos ofrece tres Geometry Manager

• Grid Geometry Manager
• Pack Geometry Manager
• Place Geometry Manager

El Place Geometry Manager permite que coloquemos los componentes donde queramos, a base de dar las posiciones x,y,ancho y alto de cada componente.

El Pack Geometry Manger nos va apilando los componentes dentro de la ventana de arriba a abajo, de izquierda a derecha, de derecha a izquierda o de abajo a arriba, es decir, alineados y en el sentido que elijamos. Es posible hacer cosas algo retorcidas si a mitad de meter componentes decidimos cambiar el orden o sentido.

Vamos a centrarnos en el Grid Geometry Manager que es el más potente de todos y el más complejo.

Diseñando la ventana

Lo primero es diseñar la ventana. Luego dibujaremos una especie de rejilla sobre los componentes, de forma que cada componente ocupe una celda, dos celdas o lo que queramos, pero más o menos los componentes debe "cuadrar" de alguna forma dentro de las celdas de la rejilla. Para nuestro editor, podemos hacer algo como esto

Hemos puesto tres columnas, la primera para el botón "load", la segunda para el botón "save" y la tercera es para el resto de la ventana. Si estiramos horizontalmente la ventana, pretendemos que sea esta última columna la que cambie de ancho, dejando fijos los anchos de las dos primeras que corresponden a los botones.

En cuanto a filas, hemos puesto dos, una para los botones y otra para el resto. Pretendemos que sea esta segunda fila la que cambie de altura si estiramos la ventana verticalmente.

Código de la ventana

Ahora sólo nos queda ir haciendo el código python. Puedes ver el fuente completo en editor.py, aquí iremos viendo los "cachos".

Creamos la ventana

ventana = Tk()
ventana.title("Editor tonto de textos")

El botón de "Load"

botonLoad = Button(ventana, text="Load", command=cargar)
botonLoad.grid(row=0, column=0, sticky=W)

En la primera línea, al crear el botón le decimos que va a estar en la ventana, que su texto es "Load" y que la función que debe ejecutar cuando lo pulsen es cargar().

En la segunda línea le decimos que su posición en la ventana es la celda 0,0. stricky=W le está diciendo que se pegue al lado izquierdo (Oeste) de su celda. Puesto que la celda va a tener el tamaño justo del botón, en realidad este parámetro puede quitarse. Lo ponemos símplemente para mostrar que existe un parámetro que permitiría decidir dónde situar el componente dentro de su celda en el caso de que esta sea más grande que el componente.

El botón de "Save"

botonSave = Button(ventana, text="Save", command=salvar)
botonSave.grid(row=0, column=1, sticky=W)

Como el anterior, sólo cambia que está en la columna 1.

Un Label para poner el título del fichero abierto.

t = Label(ventana)
t.grid(row=0, column=2, sticky=W + E)

Como los anteriores, pero hay un detalle. El sticky hemos puesto W+E. Esto hace que la etiqueta se estire horizontalmente para ocupar todo el ancho de la celda, desde el Oeste (W) hasta el Este (E).

Finalmente, la caja de texto, un ScrolledText

contenido = ScrolledText(ventana)
contenido.grid(row=1, columnspan=3, sticky=W + E + N + S)

Este tiene un columspan=3, indicando que debe ocupar tres columnas en la fila 1. El sticky=W + E + N + S indica que debe pegarse al Norte, al Este, al Oeste y al Sur de su celda, es decir, que debe ocupar todo el hueco disponible en las celdas que le toquen.

Y finalmente nos queda un detalle, decir qué columnas y filas son las que se deben estirar cuando estiremos la ventana. Para eso hay un parámetro weight que por defecto es cero, que hace que no se estiren al estirar la ventana. Podemos poner valores más altos (1,2,3,...) y entonces sí se estirarán y lo harán en la proporción de estos números. Por ejemplo, si dos columnas tienen weight=1, entonces ambas columnas se estirarán por igual con la ventana. Si una tiene weight=1 y la otra weight=2, la segunda se estirará el doble que la primera.

Para poner este parámetro que afecta a toda la columna o fila, se hace así

ventana.grid_columnconfigure(2, weight=1)
ventana.grid_rowconfigure(1, weight=1)

Es decir, queremos que se estire la columna 2 (que es la tercera columna, ya que la primera es la cero y la segunda la 1). Y decimos que se estire la fila 1 (que es la segunda fila, ya que la primera fila es la cero)