Organizacin de widgets en wxPython (Parte II)

Publicado por Pablo Tilli a las03:14 . Etiquetas:Python Si has llegado aqu mediante un buscador o por simple casualidad, te cuento que estas en la segunda parte de un tutorial que empieza AQUI.

Trabajando con los Sizers

Todos los sizers tienen algunas caractersticas en comn; y otras, que hacen que cada uno de ellos sea nico. Podramos ver una a una cuales son las similitudes y cuales las diferencias para luego pasar a la practica con cosas concretas, pero no quiero que tengas que leer un montn de teora antes de poder ver algo de practica, es por esto que ir intercalando la teora y la practica de manera que el tutorial no se te haga muy tedioso. Creo que va a ser mas fcil partir de un sizer en particular (el GridSizer en este caso), y luego ir explicando en que se parecen y en que se diferencian a medida que vayamos avanzando con cada uno de los otros sizers. Hay distintos enfoques a la hora de trabajar con interfaces grficas con Wxpython: 1- Escribir todo el cdigo necesario para ir generando la interface grfica; llamando a las funciones de wxPython que permiten crear los distintos widgets (botones, listas, etc.) desde la propia aplicacin que estemos desarrollando. 2- Generar un archivo XML que describe la interface grfica, y que luego podemos cargar desde la aplicacin. 3- Utilizar un IDE para disear la interface grfica. En este mtodo, trabajamos de la misma manera que en mtodo 2, excepto que es el propio IDE el que genera el archivo XML para que despus lo carguemos desde nuestra aplicacin. De los tres mtodos, vamos a empezar por el tercero. El IDE que vamos a usar serwxFormBuilder, pero existen otros como XRCed y wxGlade por nombrar slo algunos mas. Este mtodo es el mas prctico porque (al igual que en el segundo) logramos independizar la parte grfica de la aplicacin, del resto del cdigo de la

aplicacin en s. A diferencia del segundo mtodo, es mucho mas fcil delegar la tarea de escribir el archivo XML en el IDE. Mas adelante veremos el primero y segundo metodo tambien. En mi caso trabajo sobre Ubuntu Intrepid Ibex (8.10), pero wxFormBuilder es un IDE multiplataforma. Por lo menos en el caso de la mayora de las distribuciones populares de Linux, ya viene en los repositorios. Los usuarios de Windows y Mac los pueden descargar desde el sitio del proyecto. wxFormBuilder es libre y gratuito. A continuacin te muestro una captura de pantalla para que te vayas familiarizando con el programa:

Una vez que tenemos wxFormBuilder instalado en nuestro sistema, ya estamos listos para empezar a trabajar. Antes de poder crear un Sizer, debemos generar algn tipo de formulario que lo contenga. Para este ejemplo crearemos un Frame como contenedor, el cual visualmente no es mas que una clsica ventana (con su borde, botones de cerrar, minimizar y maximizar, etc). Para esto vamos a la solapa Forms de la paleta de componentes de wxFormBuilder y pulsamos el botn "Frame". Veamos una imgen para que se entienda mejor:

Luego de pulsar el botn Frame, el resultado ser el siguiente:

Ahora que tenemos creado el Frame, ya podemos agregar nuestro Sizer, que como dije antes, ser un GridSizer. Para logra esto, lo hacemos del mismo modo que agregamos el Frame, slo que ahora vamos a la solapa Layout y pulsamos el botn wxGridSizer:

El resultado lo vemos en la siguiente captura:

En la imgen se muestran resalatadas 3 cosas importantes: 1- El panel izquierdo de wxFormBuilder ("Object Tree"), nos muestra toda la interface en forma de rbol. En la imagen podemos apreciar que la raz es el proyecto en si (Proyect1 en este caso), inmediatamente despus se encuentra el Frame (llamado MyFrame2), y por ltimo, dentro del Frame esta el GridSizer que acabamos de agregar (cuyo nombre es gSizer1).

2- Si miramos bien dentro del Frame que creamos, veremos que el GridSizer esta representado por un rectngulo rojo que ocupa todo el interior del Frame. 3- El panel derecho de wxFormBuilder ("Object Properties"), nos muestra las propiedades del objeto que esta seleccionado actualmente en el Editor. Para ver como se comporta el GridSizer, iremos agregando algunos widgets dentro de ste. A modo de ejemplo, agregaremos cuatro botones. Esto realmente no tiene ninguna complejidad, ya que el modo de trabajo es el mismo que usamos hasta aqu. Ante todo, verificamos que est seleccionado "gSizer1" en el "Object Tree" de wxFormBuilder; de modo que el IDE "sepa" que los botones irn dentro del GridSizer, luego vamos a la solapaCommon y pulsamos el botn wxButton. Esto agregar el primer botn al GridSizer.

Tras pulsar el botn wxButton, el Editor quedar como se ve a continuacin:

Como podemos apreciar el botn se creo en la esquina superior izquierda del GridSizer, ahora crearemos el segundo botn. Para esto slo pulsamos nuevamente el botn wxButton, con lo cual el Editor ahora quedara as:

El segundo botn fue creado a la derecha del otro (pero con bastante espacio de por medio). Slo nos falta crear los dos botones restantes. Si has llegado hasta ac, seguramente te imaginaras como hacerlo claro, pulsas dos veces mas el botnwxbutton (recuerda que debe estar seleccionado "gSizer1" en el "Object Tree"). El resultado final que debes ver en el Editor es el siguiente:

Como te habrs dado cuenta, los ltimos dos botones se encuentran en una segunda fila (pero siempre alineados verticalmente con la primera). Tal vez todava no te hayas dado cuenta (o tal vez si), pero la distribucin que conseguimos tiene una lgica. Con la siguiente imagen tal vez lo veas mas claro:

Como muestra la imgen, y como el nombre del Sizer lo indica, un GridSizer no es mas que una grilla, donde en cada celda podemos ir agregando el widget que necesitemos. Hasta aqu hemos visto como agregar un Frame, un GridSizer y cuatro botones dentro de ste. Es importante que le vayas prestando atencin al "Object Tree" de wxFormBuilder. Este "rbol" nos da una clara visin de como se relacionan los distintos elementos de nuestra interface. Entender este rbol tambin te servir mucho si en algn momento decides trabajar con el IDE XRCed (en otro tutorial lo veremos). Veamos un poco mas en detalle el GridSizer.

Grid Sizer (wx.Grid Sizer)

Como ya hemos dicho, el GridSizer consiste en una grilla bidimensional, en la cual se organizan los distintos widgets que necesitemos. Grficamente un GridSizer no es mas que una grilla, donde en cada celda podemos posicionar un widget. El primer widget que se agrega a un GridSizer se ubica en la esquina superior izquierda de la grilla; el resto se ubican de izquierda a derecha, y al llegar a la ultima columna de una fila, se continua en la primera columna de la fila inmediatamente inferior hasta llegar a la ultima celda de la grilla, que corresponde a la esquina inferior derecha de la misma. Este comportamiento, lo habrs visto bien claro si fuiste haciendo el ejemplo de agregar cuatro botones dentro del GridSizer con wxFormBuilder; cada vez que pulsas el botn que agrega un wxButton, puedes observar donde se posiciona el botn dentro de la grilla. Si no hiciste el ejemplo, te invito a que lo hagas!. Al redimensionar un GridSizer, cada celda de este, agranda o disminuye su tamao

proporcionalmente, pero por defecto, los widgets contenidos en cada una de las celdas, mantienen su tamao original, y quedan anclados a la esquina superior izquierda de la celda en la que se encuentran. Veamos una captura, donde vemos 2 veces una misma ventana, pero antes y despus de ser redimensionada. La ventana contiene un GridSizer que tiene cuatro botones en su interior (el ejemplo que hicimos antes).

En la imagen, se puede apreciar como las cuatro celdas, crecen de manera idntica, siendo en todo momento todas las celdas del mismo alto y ancho, pero como vemos los widgets no cambiaron su tamao. Si bien todas las celdas tienen el mismo tamao, no necesariamente el alto de las filas es igual al ancho de las columnas. Como hemos visto; al crear un GridSizer con wxFormBuilder, nuestra grilla es de 2 X 2 en forma predeterminada, pero obviamente tenemos una forma de cambiar esto. Entre las propiedades particulares del GridSizer se encuentran Rows y Cols, las cuales nos permiten establecer la cantidad de filas y columnas respectivamente. Si lo deseamos, tambin podemos especificar que haya un espacio entre las distintas celdas; para esto contamos con la propiedad hgap para crear un espacio entre las filas, y vgap para lograr el espaciado entre las columnas. El valor de vgap y hgap, es un numero entero que representa el espaciado en pixeles. En la imagen siguiente, vemos una una grilla de 3 X 2, con un espacio horizontal entre las celdas de 2px y un espaciado vertical entre celdas de 3px:

Para lograrlo, simplemente seleccionamos el GridSizer ("gSizer1") desde el Object Tree y luego establecemos los valores en el panel de propiedades (rows=2, cols=3, vgap=3 y hgap=2). Si bien dijimos que todas las celdas tienen el mismo tamao, esto no quiere decir que todos los elementos que estn en cada una de ellas, tambin deban tener las mismas dimensiones ni tampoco la misma posicin dentro la celda. Como dijimos antes, al agregar un elemento en un GridSizer, por defecto ste queda posicionado en la esquina superior izquierda de la celda que le corresponda, y su tamao NO se ve afectado al cambiar el tamao del sizer. Este comportamiento puede ser modificado a travs de los Flags. Los Flags entran dentro de las caractersticas comunes a todos los widgets que se encuentren contenidos en un Sizer. Para entender mejor de que hablamos, veremos cuales son los Flags y para que sirve cada uno de ellos.

Flags para establecer la alineacin de los widgets

Las opciones disponibles para alinear los widgets que agregamos a los Sizers son las siguientes: wx.ALIGN_TOP: El widget es alineado en la parte superior de la celda en la que se encuentre, si se omite, esta es la opcion por defecto. wx.ALIGN_BOTTOM: El widget se alinea en la parte inferior de la celda en la que es insertado. wx.ALIGN_LEFT: El widget es alineado a la izquierda dentro la celda en la que se encuentre, si se omite, esta es la opcion por defecto. wx.ALIGN_RIGHT: El widget es alineado a la derecha dentro la celda en la que se encuentre. wx.ALIGN_CENTER_HORIZONTAL: El widget es centrado en forma horizontal. Se omite el valor de wx.ALIGN_LEFT y wx.ALIGN_RIGHT. wx.ALIGN_CENTER_VERTICAL: El widget es centrado en forma vertical. Se

omite el valor de wx.ALIGN_TOP y wx.ALIGN_BOTTOM. wx.ALIGN_CENTER: El widget se alinea en la centro de la celda en la que es insertado. En este caso se omiten todas las opciones anteriores. wx.EXPAND: El widget toma el mismo tamao que la celda en la que se encuentra. wx.FIXED_MINSIZE: El widget mantiene siempre su tamao mnimo (Luego volveremos sobre este punto). wx.SHAPED: El widget cambiara su tamao de forma proporcional, manteniendo su relacin de aspecto (luego lo veremos con un ejemplo, para que se entienda mejor). wx.GROW: Funciona igual que wx.EXPAND.

Flags para establecer un borde (espacio) entre los widgets

Adems de poder cambiar la alineacin de los widgets, tenemos la posibilidad de dejar un borde (espacio) entre el widget y la celda que lo contiene. Para establecer este valor, podemos combinar las siguientes opciones junto con las de alineacin que vimos anteriormente: wx.TOP: Establece que el espacio especificado en la propiedad border, sea aplicado en la parte superior del widget. wx.LEFT: Establece que el espacio especificado en la propiedad border, sea aplicado a la izquierda del widget. wx.RIGHT: Establece que el espacio especificado en la propiedad border, sea aplicado a la derecha del widget. wx.BOTTOM: Establece que el espacio especificado en la propiedad border, sea aplicado en la parte inferior del widget. wx.ALL: El espacio se establece a todos los lados del widget (Arriba, Izquierda, Derecha y Abajo). Es la suma de las cuatro opciones anteriores juntas. Luego veremos algunas imgenes donde se puedan apreciar los resultados de combinar estos valores de distintas formas.

Para que esta segunda parte no se haga mas larga, vamos a dejar aqu. En esta parte, hemos avanzado bastante, y cada vez estamos mas cerca de poder crear una interface mas real (lase til). Repasando un poco, hasta aqu dijimos que existen tres mtodos para trabajar con interfaces grficas con wxPython, y que por ahora usaremos la alternativa del IDE. Estuvimos viendo como se trabaja con wxFormBuilder, hablamos de los Flags, y tenemos una idea mas clara de como funciona el GridSizer. Para dominar de forma fluida el diseo de interfaces grficas con wxPython, se requiere mucha prctica. Al principio puede ser un poco desalentador, ya que cuesta mucho lograr lo que uno tiene en mente; y sobre todo si eres un desarrollador que viene de otros lenguajes (como Visual Basic, por ejemplo) donde la forma de trabajo es bastante distinta, pero con el tiempo te dars cuenta de las ventajas que tiene esta manera de hacer las cosas, y podras ir logrando lo que te propones. Cualquier duda o sugerencia, puedes comentar.

... continuando con los Flags

En la segunda parte de este tutorial, les haba 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 alineacin 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 tamao de cada celda. Como ya habamos 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 alineacin 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 seccin Flags (lo puedes ver en la parte de abajo de la imagen), y activar la opcin wxALIGN_CENTER. En la captura de pantalla, se pueden ver desplegados todos los Flags. Si quisiramos 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 alineacin 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 (adems de la alineacin):

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 ywx.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 estn, 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 difcil entender como funciona el Flag wx.SHAPED, as que te voy a mostrar dos imgenes donde se encuentra la misma ventana, pero en dos tamaos 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 tambin en forma proporcional. Para que lo veas aun mejor, aisl el botn de la celda 2, de las dos imgenes 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 prxima 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 tambin.