Organización de widgets en wxPython (Parte III)

Si has llegado aquí mediante un buscador o por simple casualidad, te cuento que estas en la tercera parte de un tutorial que empieza AQUI.

... continuando con los Flags

En la segunda parte de este tutorial, les había prometido continuar con el tema de los Flags, y esto es lo que trataremos justamente ahora.

El primer caso que veremos, será sobre el Flag de alineación wx.ALIGN_CENTER:


En la imagen podemos apreciar el Editor (Arriba) y el panel de propiedades (Abajo) de wxFormBuilder. En el Editor dibuje una grilla de color rojo, para que tengas de referencia el tamaño de cada celda. Como ya habíamos dicho, en un GridSizer todas las celdas son iguales, y de echo esto lo puedes apreciar en la imagen, pero como puedes ver, en la primera celda (Fila 0, Col. 0) el widget se encuentra con una alineación distinta a la del resto. Para lograr esto, en el Editor debes seleccionar el widget con el que quieres trabajar, y luego en el panel de propiedades desplegar la sección Flags (lo puedes ver en la parte de abajo de la imagen), y activar la opción wxALIGN_CENTER.

En la captura de pantalla, se pueden ver desplegados todos los Flags. Si quisiéramos cambiar alguno de ellos, simplemente la activamos o desactivamos desde el checkbox que tienen a la derecha.

En el siguiente ejemplo vamos a combinar algunos de ellos:


En este ejemplo vemos que cada una de los widgets posee una alineación distinta. Las opciones aplicadas en cada caso son las siguientes:

1- wx.ALIGN_CENTER

2- wx.ALIGN_BOTTOM + wx.ALIGN_RIGHT

3- wx.ALIGN_CENTER_VERTICAL

4- wx.ALIGN_CENTER_HORIZONTAL + wx.ALIGN_CENTER_BOTTOM

5- wx.ALIGN_CENTER_VERTICAL + wx.ALIGN_RIGHT

6- wx.ALIGN_BOTTOM

Si miras con detenimiento en la imagen, te puedes dar cuenta que los widgets nunca llegan hasta el borde de las “celdas virtuales” (que por claridad, yo las dibuje en rojo). Esto se debe a que el valor de la propiedad “border” esta en 5, y esta aplicado a los cuatro lados de los widgets (wx.ALL). En el ejemplo siguiente, variaremos los bordes (además de la alineación):

Las opciones de cada widget de la imagen son los siguientes:

1- border=0 + wx.ALIGN_RIGHT + wx.ALL

2- border=30 + wx.ALIGN_RIGHT + wx.RIGHT

3- border=40 + wx.LEFT + wx.TOP

4- border=30 + wx.ALIGN_LEFT

Ahora veremos un ejemplo donde usaremos los Flags wx.EXPAND, wx.SHAPED y wx.GROW.

Los Flags utilizados en cada widget de la imagen, son los siguientes:

1- border=0 + wx.ALL + wx.EXPAND

2- border=5 + wx.ALL + wx.SHAPED

3- border=20 + wx.ALL + wx.EXPAND

4- No hay widget en esta celda.

Si bien en las celdas 1 y 3 estamos usando el Flag wx.EXPAND, y por lo tanto los widgets deben ocupar la totalidad del espacio de la celda en la que estén, pareciera que en la celda 3 no se cumple, pero en realidad si. La diferencia entre las dos celdas, es que la primera tiene un borde de 0px en todos sus lados, y la celda 3 tiene un borde de 20px en todos sus lados, por lo que puedes deducir que con el Flag wx.EXPAND, el widget se expande, pero contempla los bordes especificados en la propiedad “border”.
En el caso de la celda 2, es difícil entender como funciona el Flag wx.SHAPED, así que te voy a mostrar dos imágenes donde se encuentra la misma ventana, pero en dos tamaños distintos:

En estas ultimas 2 capturas, vemos que la celda 2, al utilizar el Flag wx.SHAPED, hace que al agrandarse o achicarse la ventana, el widget lo haga también en forma proporcional. Para que lo veas aun mejor, aislé el botón de la celda 2, de las dos imágenes y aquí los tienes uno debajo del otro:

En este punto seria bueno que experimentes tu mismo combinando los distintos Flags que hemos visto. El Flag wx.GROW no se encuentra disponible en wxFormsBuilder, y esto es así porque en realidad (como dijimos antes) es lo mismo que wx.EXPAND.

Por ahora llegaremos hasta aquí. A partir de la próxima parte del tutorial, seguiremos viendo el resto de los Sizers. Si bien esta parte no fue muy extensa, era necesaria para que podamos continuar.

Recuerda que puedes dejar tus dudas, sugerencias, experiencias o lo que quieras para que todos podamos aprender de ti también.

Editado:
Ya esta disponible la parte IV.