Publicado por Pablo Tilli a las23:58 .

Etiquetas:Python Introduccin A la hora de crear una aplicacin que posea una interface grfica basada en wxPython, disponemos de los denominados widgets. Los widgets son un conjunto de controles, que tenemos a disposicin nuestra para crear la interface de usuario. Ejemplos de widgets son las cajas de texto y los botones, por citar solo dos. Obviamente, vamos a necesitar distribuir estos widgets de distintas formas, segn las necesidades que tengamos en cada aplicacin que desarrollemos. La organizacin de los widgets, la podemos hacer de forma esttica o dinmica. Organizacin esttica En la organizacin esttica, la idea es especificar para cada uno de los widgets, una posicin y un tamao fijo. Teniendo en cuenta que una de las ventajas de utilizar wxPython, es que es multiplaforma, esta forma de organizar los widgets no nos resulta muy til ... Por que? ... simple ... veamos un ejemplo: imaginemos que creamos un botn con el texto Aceptar utilizando la fuente Ms Sans Serif de 10px, con un ancho de 70px y 35px de alto, y estamos sobre una plataforma Windows. Si ahora tomamos esta aplicacin y la corremos sobre Ubuntu (por ejemplo), como podrn imaginar, ahora nuestro texto ya no se muestra con la fuente Ms Sans Serif ya que seguramente no estar disponible, por lo tanto sera reemplazada por alguna fuente parecida, por lo tanto es probable que ya nuestro texto Aceptar no se vea como cuando lo veamos en Windows, y tal vez el texto no quepa en los 700px de ancho del botn, o en los 35px de alto y se vea incompleto. Otro inconveniente, es que cuando fijamos el tamao y la posicin de los widgets, lo hacemos para un tamao de ventana concreto, y si la redimensionamos, la disposicin de los controles seguir esttica, o sea: los controles no se adaptan al cambiar el tamao de la ventana. Para salvar estos problemas, es que existe otra forma de organizar los widgets, que es mucho mas flexible, y se denomina: organizacin dinmica. Organizacin dinmica A diferencia de lo que ocurre en la organizacin esttica, aqu los widgets se organizan en base a proporciones. Con este mtodo, no le diremos a los widgets su posicin y tamao en forma absoluta, sino que estas propiedades estarn determinadas por un algoritmo. Podramos definir, por ejemplo, que una caja de texto sea tan ancha como el ancho de la ventana, independientemente de si la ventana tiene tan solo 50px de ancho, o si esta maximizada, y tampoco importa si corre sobre Ubuntu o Windows, o cualquier otra plataforma, ya que se adaptara en forma automtica. Para lograr este dinamismo, los widgets son organizados dentro de widgets especiales denominados Sizers. Que son los Sizers?

Los sizers son un tipo especial de widget, que permiten contener a otros widgets en su interior. Los sizers permiten a su vez contener a otros sizers, con lo cual nos permite crear interfaces muy elaboradas y donde el limite es nuestra imaginacin. Existen 5 clases de sizers (y algunas variantes):

wx.GridSizer wx.BoxSizer (Vertical y Horizontal) wx.StaticBoxSizer (Vertical y Horizontal) wx.FlexGridSizer wx.GridBagSizer

Cada uno de estos Sizers, implementa un algoritmo de organizacin dinmica distinto, de modo tal, que segn en cual de ellos ubiquemos nuestros widgets, sera como estos aparecern dentro de nuestra interface. En el resto de este articulo, describiremos las caractersticas de cada unos de ellos, y veremos algunos ejemplos de como combinarlos entre si. Antes de adentrarnos en las particularidades de cada uno de los Sizers, veremos como se muestra (por defecto) un mismo conjunto de widgets en cada uno de los distintos sizers. Un mismo conjunto de widgets ... una interface distinta A continuacin podrn ver una serie de capturas de pantalla, con el fin de tener una idea inicial de como funciona cada uno de los sizers. En todos los sizers se encuentran los mismos widgets, y el orden en que se agregaron los widgets a cada sizer fue el siguiente:

stNombre (wxStaticText) tcNombre (wxTextCtrl) stApellido (wxStaticText) tcApellido (wxTextCtrl)

Los widgets en un GridSize:

Los widgets en un BoxSizer (Vertical):

Los widgets en un BoxSizer (Horizontal):

Los widgets en un StaticBoxSizer (Vertical):

Los widgets en un StaticBoxSizer (Horizontal):

Los widgets en un FlexGridSizer:

Los widgets en un GridBagSizer:

Como podemos apreciar en las capturas anteriores, segn en que sizer agreguemos nuestros widgets, ser la organizacin que obtendremos. Algunos pueden parecer muy parecidos (Por ejemplo: BoxSizer Vertical y StaticBoxSizer Vertical), otros parecen iguales (GridSizer y FlexGridSizer) e incluso podemos decir, que a simple vista, pareciera que el GridBagSizer (la ultima imagen) no tiene sentido!. En realidad todos tienen sus particularidades que lo hacen mas o menos adecuados dependiendo del tipo de interface que busquemos. Hasta aqu llegamos con esta primera parte. En otros posts, iremos viendo cuales son las caractersticas en comn y cuales las particularidades de cada uno de los sizers, para as despus comenzar a combinarlos y crear finalmente algunas interfaces de prueba con distinto grado de complejidad. Hasta la proxima! _______------------------------------------------------------____________________________________ Parte II
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.

feliz 0212-8141893 Parete III

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 izquie rda 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. Parete III

... 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. Parte IV

Organizacin de widgets en wxPython (Parte IV)

Como ya les haba anticipado, en esta oportunidad seguiremos hablando de Sizers. Hasta ahora slo hemos visto el GridSizer. En esta oportunidad veremos el BoxSizer (Vertical y Horizontal).

BoxSizer (Vertical y Horizontal)

El BoxSizer es uno de los Sizers ms simples (y mas usados). La verdadera potencia de este Sizer, se basa en la posibilidad de agregar un BoxSizer dentro de otro BoxSizer.

Este tipo de Sizer, se puede imaginar como una simple fila donde los widgets se ubican uno al lado del otro (en el caso del BoxSizer Horizontal), o como una columna donde los widgets se ubican uno debajo del otro (en el caso del BoxSizer Vertical).

BoxSizer Horizontal

BoxSizer Vertical

En las dos imgenes de arriba, se ven las dos variantes de un BoxSizer. En realidad, el BoxSizer Vertical y Horizontal son el mismo Sizer, pero tiene una propiedad que define su orientacin. Al igual que en el GridSizer, en cada celda del BoxSizer, solo podemos ubicar un solo Widget. Como ya lo haba hecho con el GridSizer, en las imgenes les remarque en color rojo, lo que seran las celdas virtuales donde se ubican los Widgets. En este caso, no podemos especificar la cantidad de filas o columnas como hacamos en el GridSizer; sino que aqu se van creando en forma automtica cada vez que agregamos un Widget al BoxSizer. Si agregamos un Widget, y el BoxSizer es Horizontal, este se agrega a la derecha de los Widgets que ya existan en el Sizer; y si el BoxSizer es Vertical, el Widget se agregar abajo de todos los que se encuentren ya contenidos en el Sizer.

Crear un BoxSizer con wxFormBuilder, es tan simple como crear el GridSizer. Si estas siguiendo las distintas partes de este tutorial, ya casi sabes como hacerlo. De todos modos, lo veremos rpidamente en 3 pasos: 1- Creamos un Frame:

Veremos en el Editor, que el Frame se ha creado :

2- Hacemos click en la solapa "Layout", y luego clickeamos el botn correspondiente para la creacin del BoxSizer:

3- Ahora agregamos algunos botones, del mismo modo que lo hicimos antes con el GridSizer. Para esto bamos a la solapa "Common", y pulsabamos el botn para agregar un "wx.button" al Sizer:

Con estos pasos, ya tenemos el BoxSizer dentro de un Frame, con algunos botones

(wx.button) adentro. Cuando creamos el BoxSizer con wxFormBuilder, la orientacin por defecto ser Vertical (wx.VERTICAL); por lo tanto cada vez que pulses el botn para c rear un wx.button (o cualquier otro widget), cada uno de estos se ubicar uno debajo de otro:

Si quisieramos que la orientacion sea Horizontal (wx.HORIZONTAL), seleccionamos el BoxSizer en el Object Tree (bSizer1), y luego en el panel de propiedades, elegimos la opcin wx.HORIZONTAL en la lista desplegable de la propiedad Orient.

El Editor con el BoxSizer (Horizontal) se veria asi:

ACLARACION: Los numeros (1, 2, 3, 4) que vez en las imgenes, fueron agregados por mi, para representar en que orden fueron apareciendo los botones a medida que eran aadidos al Sizer. Al redimensionar un BoxSizer, este toma el tamao total disponible de su contenedor (del Frame en este caso), pero 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, tal como suceda con el GridSizer. Por suerte, aqu tambin podemos jugar con los Flags, y asi lograr adaptar la interface a nuestra necesidad. El modo de trabajo es exactamente igual que antes, elegimos el widget en cuestion y editamos sus Flags en el panel de propiedades, veamos un ejemplo de lo que podemos lograr:

Las opciones aplicadas a cada widget que ves en la imagen son las siguientes: 1- border=0 + wx.ALL 2- border=5 + wx.ALL + wx.ALIGN_CENTER_VERTICAL 3- border=5 + wx.ALL + wx.EXPAND 4- border=30 + wx.BOTTOM + wx.ALIGN_BOTTOM 5- border=20 + wx.ALL + wx.EXPAND Este mismo ejemplo, pero en su versin Vertical, quedara as:

Una propiedad muy importante en este tipo de Sizer es la llamada Proportion. Esta caracterstica, nos permite determinar que hacer cuando al agregar un Widget al Sizer, nos queda espacio en blanco dentro de este. Como base para explicar este concepto (y como ya es costumbre) veamos una imagen:

Como ya hemos dicho antes, al agregar el BoxSizer dentro del Frame, el BoxSizer ocupa la totalidad del espacio del Frame. Como se ve en la imagen, puede ser que al agregar algunos widgets al BoxSizer, estos no ocupen el 100% del espacio disponible. En el ejemplo de la imagen anterior, vemos que al agregar slo 3 botones, nos queda mucho espacio libre. En algunas circunstancias puede ser que es lo que queramos, pero tambin podra darse el caso en que deseamos otro comportamiento.

Por dar un ejemplo, podramos querer que el ltimo botn ocupe el total del espacio libre. Para este tipo de situaciones, tenemos la propiedad Proportion. Esta propiedad esta definida mediante un valor entero, que por defecto es 0. Si la dejamos e n "0", los widgets tomarn su tamao por defecto. Si establecemos la propiedad Proportion de un solo widget en 1, este ocupara el 100% del espacio disponible que quede dentro del sizer. Si establecemos la propiedad proportion de dos widget en 1 dentro del mismo BoxSizer, significa que cada uno ocupara el 50% de lugar libre, y asi podemos ir combinando distintos valores, por ej: un widget en 1, otro en 2, otro en 3, etc.. En definitiva, esta propiedad especifica como se distribuye el espacio libre del Sizer. Cuanto mayor sea el valor de la propiedad proportion de un widget, mas espacio ocupara este. Veamos el caso en que el ultimo botn ocupe el total del espacio libre:

Para lograr el comportamiento que ves en la imagen, tienes dos maneras. 1- Seleccionar el ltimo botn en el Editor de wxFormBuilder, ir al panel de propiedades, y establecer el valor de Proportion en 1.

2- Seleccionar el ltimo botn en el Editor de wxFormBuilder y pulsar el botn Strech de la barra de herramientas (o pulsar ALT + S):

Al pulsar el boton Strech, lo unico que hace el IDE , es poner el valor 1 en la propiedad Proportion por nosotros. Si sobre este mismo ejemplo, establecemos tambin la propiedad Proportion del segundo botn a 1, el espacio libre se repartira dando un 50% a cada widget. El ejemplo se vera as:

Si tambin establecemos la propiedadProportion del primer botn a "1", el espacio libre quedara dividido equitativamente, dndole a cada uno de los widgets, la misma cantidad de espacio. En este caso, cada botn tendr un 1/3 del espacio total del sizer:

Veamos un ejemplo donde el primer botn tenga la propiedad Proportion en 0, el segundo en 1 y el tercero en 2. Se veria asi:

En esta imagen se puede apreciar que el primer botn (proportion="0") tiene su tamao por defecto, el segundo botn (proportion="1") ocupa 1/3 del espacio libre que quedaria en el Sizer y el tercer botn

(proportion="3") ocupa 2/3 del espacio libre. Esta propiedad suele ser un tanto difcil de entender al principio, pero realmente no es tan compleja como parece. Slo es cuestin de hacer unas cuantas pruebas, para ir viendo que resultado se obtienen al variar su valor. En las ultimas imgenes, siempre vimos BoxSizer's verticales, pero lo dicho vale tambin si la orientacin es horizontal:

En esta imagen vemos un BoxSizer con orientacin Horizontal. Los dos primeros botones tienen su propiedad Proportion establecida en 0, y el ltimo en 1; es por eso que el ultimo botn ocupa todo el espacio que quedara libre dentro del Sizer. IMPORTANTE: Una diferencia importante, referida al espacio libre en un BoxSizer, es que si este tiene una orientacion Vertical, el espacio libre se encuentra abajo de todo, y si la orientacion es Horizontal, el espacio libre se encuentra a la derecha.

Entendiendo mejor wxEXPAND y Proportion

Es muy importante entender como funcionan estas dos caracteristicas dependiendo de si el BoxSizer es Vertical u Horizontal. Si el BoxSizer es VERTICAL: 1- El Flag wx.EXPAND expande el widget para que ocupe el ancho total del Sizer, pero no afecta la altura del widget: En la imagen el primer botn tiene proportion en 0 y NO esta activo el Flag wx.EXPAND. El segundo botn tambin tiene proportion en 0, pero SI tiene activado el Flag wx.EXPAND. Se puede observar claramente que el segundo botn se expandi a lo ancho, pero el alto esta igual que en el primer botn.

2- La propiedad Proportion modifica al widget en su altura, pero no afecta la el ancho del widget:

En esta imagen, el primer botn tiene proportion en 0 y NO esta activo el Flag wx.EXPAND. El segundo botn tiene proportion en 1, y tampoco tiene activado el Flag wx.EXPAND. Se puede ver que el segundo botn se expandi a lo alto, pero el ancho es el mismo que en el primer botn. 3- Si activamos wx.EXPAND y establecemos el valor de la propiedad Proportion en un valor distinto de 0, logramos que el widget crezca en ambos sentidos (Alto y ancho):

Podemos ver en la imagen, que al combinar las 2 opciones, el botn ocupa la totalidad del espacio libre. En realidad, lo que esta sucediendo, es que al activar el Flag wx.EXPAND, el widget se expande hasta ocupar todo el ancho, y luego, al establecer la propiedad Proportion a 1, el widget crece hasta ocupar t odo el alto. Si el BoxSizer es HORIZONTAL: Si la orientacin del BoxSizer es Horizontal, todo se invierte. Veamos los 3 casos anteriores, pero con un BoxSizer Horizontal: 1- El Flag wx.EXPAND expande el widget para que ocupe el alto total del BoxSizer, pero no afecta al ancho del widget:

En la imagen, el primer botn tiene la propiedad proportion en 0 y NO esta activado el Flag wx.EXPAND. El segundo botn tambin tiene proportion en 0, pero SI tiene activado el Flag wx.EXPAND. Se puede observar claramente que el segundo botn se expandi en el alto, pero su ancho esta igual que en el primer botn. 2- La propiedad Proportion modifica al widget en su ancho, pero no afecta el alto del widget:

3- Si activamos el Flag wx.EXPAND, y establecemos el valor de la propiedad Proportion en un valor distinto de 0, logramos que el widget crezca en ambos sentidos (Alto y ancho):

En la imagen podemos ver que combinando las 2 opciones, el botn ocupa la totalidad del espacio libre del Sizer. En realidad, lo que esta sucediendo, es que al activar el Flag wx.EXPAND, el widget se expande hasta ocupar todo el alto, y luego, al establecer la propiedad Proportion a 1, el widget crece hasta ocupar todo el alto. Por el momento, dejaremos aqu, pero hemos visto bastante acerca del BoxSizer en su version Horizontal y Vertical. Hablamos de sus caracteristicas y como crearlos en wxFormBuilder. Hablamos tambien sobre la propiedad Proportion y seguimos utilizando los Flags que habiamos visto antes. Creo que hemos avanzado bastante, asi que te invito nuevamente a practicar de modo que vayas manejando con fluidez los conceptos vistos (Flags, Proportion, GridSizer, BoxSizer, etc.), y te sientas comodo utilizando wxFormBuilder. En la proxima entrega, vamos a ver una variacin del BoxSizer: el StaticBoxSizer y hablaremos tambien del FlexGridSizer. Paret V

Si has llegado aqu mediante un buscador o por simple casualidad, te cuento que estas en la quinta parte de un tutorial que empieza AQUI. En esta oportunidad hablaremos de dos Sizers: el StaticBoxSizer y el FlexGridSizer. Si ya entendiste el BoxSizer, el StaticBoxSizer no te traer ningn problema, ya que son prcticamente iguales; y el FlexGridSizer es como el GridSizer, pero con algunas novedades que lo hacen mas flexible (de ah su nombre). El StaticBoxSizer El StaticBoxSizer deriva del BoxSizer que ya hemos visto en la entrega anterior. Todo lo visto para el BoxSizer, vale para el StaticBoxSizer, es decir, tiene una versin Vertical y otra Horizontal, utiliza la propiedad Proportion para determinar que hacer con el espacio libre, etc.. La diferencia radica en que el StaticBoxSizer muestra un borde que delimita el rea correspondiente al Sizer, y le podemos poner una etiqueta para informar de que se trata este rea. Creo que en este caso, no hay duda que una imagen vale mas que mil palabras:

En la imgen puedes ver el recuadro del que te hablaba, y la etiqueta en la parte superior izquierda con el texto Ejemplo de StaticBoxSizer. Para crear este tipo de Sizer, procedemos del mismo modo que con el BoxSizer, excepto que pulsamos el botn wxStaticBoxSizer en la solapa Layout del panel de componentes de wxFormBuilder.

Por ltimo, decirles que para cambiar la etiqueta que se muestra en el recuadro del StaticBoxSizer, debemos escribir lo que queremos en la propiedad label:

Como ves, este Sizer no presenta ninguna complicacin si ya entendiste el BoxSizer. Ahora hablaremos del FlexGridSizer.

El FlexGridsizer El FlexGridSizer es una variacin del GridSizer que ya hemos visto. Al igual que el GridSizer, podemos pensar el FlexGridSizer como una grilla, donde en cada celda podemos ubicar un widget. En el caso del GridSizer, vimos que todas las celdas tenan el mismo tamao, siendo que el ancho de las columnas estaba determinado por el widget mas ancho que existiera en cualquier columna, y el alto de las filas era igual al widget mas alto que hubiera dentro del Sizer. A diferencia del GridSizer, el FlexGridSizer nos permite tener filas y columnas de distinto tamao, y en esto radica la flexibilidad de la que nos habla el nombre del Sizer. Si bien cada fila y cada columna pueden tener tamaos distintos, todas las celdas de una misma fila deben tener un mismo alto, y todas las celdas de una misma columna deben tener un mismo ancho. Veamos una imagen de ejemplo con un FlexGridSizer:

En esta imagen se puede apreciar lo que te deca en el prrafo anterior. Si te fijas bien, puedes ver que la primera fila tiene un alto distinto al de la segunda, y que la segunda columna tiene un ancho distinto al de la primera y la tercera. Pero como te deca antes, puedes ver que todas las celdas de cada fila son del mismo alto y las celdas de cada columna son del mismo ancho. Esta distribucin, no lo hubiramos podido lograr con el GridSizer tradicional. Veamos como crear el ejemplo de la imagen con wxFormBuilder. Esta vez, voy a obviar el paso de crear el Frame y agregar los botones al Sizer, ya que asumo que si has llegado hasta aqu, y vienes siguiendo el tutorial desde el principio, ya sabes como

hacerlo. Para crear el FlexGridSizer, vamos a la solapa "Layout" y pulsamos el botn wxFlexGridSizer:

Con esto ya tenemos el FlexGridSizer creado. Ahora le agregamos 6 botones y el resultado que deberas ver en el Editor de wxFormBuilder es el siguiente:

En la imagen podemos ver que si bien el FlexGridSizer ocupa todo el rea del Frame, las filas y las columnas no crecen mas all del alto y el ancho por defecto de los widgets que tienen en su interior. Recuerda que si esto fuera una GridSizer, las celdas si hubieran crecido hasta ocupar el 100% del espacio del Sizer. Como dije antes, la idea es crear el ejemplo de la imagen que vimos al principio. Para ir aproximndonos un poco mas, debemos cambiar la cantidad de columnas de 2 a 3, y as lograr dos filas de tres botones cada una. Esto lo hacemos del mismo modo que lo hacamos con el GridSizer, por lo que slo editamos los valores de las propiedades Rows y Cols:

Para lograr que las filas y las columnas "crezcan", tenemos las propiedades growablesrowsy growablescols respectivamente. Aqu es importante aclarar que los ndices de las filas y las columnas comienzan desde cero, es decir que la primera celda se encuentra en la fila 0 de la columna 0. En el ejemplo que estamos creando, la columna que crece es la 1 (la del medio) y la fila que crece es la 0 (la primera). Es por esto, que el valor degrowablesrows ser 0 y el de growablescols sera 1:

En este momento el Editor se vera as:

Una vez mas, les remarque en rojo las celdas virtuales para mayor claridad. Aqu pueden ver como realmente la fila 0 ha crecido y la columna 1 tambin. Lo nico que nos queda para terminar el ejemplo es que el botn de la fila 0 de la columna 1, ocupe todo el espacio de esta, y lo mismo para el botn de la fila 0 de la columna 2. Para lograr esto, activamos el Flag wxEXPAND de estos dos widgets, y listo:

En este ejemplo solo hicimos que crezcan la fila 0 y la columna 1, pero podramos necesitar hacerlo con mas filas y/o columnas al mismo tiempo. Para esto puedes escribir en las propiedades growablesrows y growablescols segn corresponda, los ndices de las filas o las columnas separados por coma (,). Si quisiramos que en el ejemplo tambin crezca la fila 1 y la columna 2, haramos lo siguiente:

El resultado seria este:

Para terminar con el FlexGridSizer, vamos a ver dos propiedades mas: flexibledirection ynon_flexible_grow_mode.

flexibledirection y non_flexible_grow_mode

La propiedad flexibledirection tiene tres valores posibles: wxVERTICAL: las filas que especifiquemos en la propiedad growablesrows seran flexibles. wxHORIZONTAL: las columnas especificadas en la propiedad growablescols seran flexibles. wxBOTH: Tanto las filas que especifiquemos en la propiedad growablesrows, como las columnas especificadas en la propiedad growablescols sern flexibles Si establecemos la propiedad flexibledirection con el valor wxVERTICAL o wxHORIZONTAL, debemos especificar como se deber tratar la direccin que no es flexible, utilizando la propiedad non_flexible_grow_mode. Si hemos especificado wxHORIZONTAL (columnas flexibles), debemos decir que queremos que pase con el crecimiento de las filas, y si especificamos wxVERTICAL (filas flexibles), debemos decir como tratar el crecimiento de las columnas. Aqu entra en juego la propiedad non_flexible_grow_mode. Dependiendo de que valor pongamos en la propiedad flexibledirection, tenemos tres escenarios posibles: Escenario 1: La propiedad flexibledirection tiene el valor wxHORIZONTAL En este caso debemos especificar en la propiedad growablecols las columnas que crecern. Veamos que pasara con las filas dependiendo de que valor pongamos en la propiedad non_flexible_grow_mode: wxFLEX_GROWMODE_NONE: ninguna de las filas crecera. Se ignora el valor de la propiedad growablerows.

En la imagen puedes ver que especifique que crezcan las columnas 0 y 2, y que no crezca ninguna de las filas. wxFLEX_GROWMODE_ALL: todas las filas creceran. Se ignora el valor de la propiedadgrowablerows.

En este ejemplo especifique que crezcan las columnas 0 y 2, y todas las filas.

wxFLEX_GROWMODE_SPECIFIED: creceran las filas que especifiquemos en la propiedadgrowablerows.

Aqu especifique que crezcan las columnas 0 y 2, y la fila 0.

Escenario 2: La propiedad flexibledirection tiene el valor wxVERTICAL En este caso debemos especificar las filas que crecern, en la propiedad growablerows. Veamos que pasara con las columnas dependiendo de que valor pongamos en la propiedad non_flexible_grow_mode: wxFLEX_GROWMODE_NONE: ninguna de las columnas crecera. Se ignora el valor de la propiedad growablecols.

Aqu especifique que crezcan las filas 0 y 2, y que no crezca ninguna de las columnas.

wxFLEX_GROWMODE_ALL: todas las columnas creceran. Se ignora el valor de la propiedad growablecols.

En este ejemplo crecen las filas 0 y 2, y todas las columnas.

wxFLEX_GROWMODE_SPECIFIED: creceran las columnas que especifiquemos en la propiedad growablecols.

Aqu crecen las filas 0 y 2, y la columna 1.

Escenario 3: La propiedad flexibledirection tiene el valor wxBOTH Aqu deberemos especificar tanto las filas como las columnas que crecern, haciendo uso de las propiedades growablerows y growablecols. En este escenario, el nico valor vlido para non_flexible_grow_mode es "wxFLEX_GROWMODE_SPECIFIED, ya que no hay una direccin que no crezca; por este motivo debemos informar las filas y las columnas flexibles de forma explicita. Vale aclarar que este es el escenario por defecto. wxFLEX_GROWMODE_SPECIFIED: creceran las filas y las columnas que especifiquemos en la propiedad growablerows y growablecols.

Aqu crecen las filas 0 y 2, y la columna 1.

Y as llegamos al final de esta parte. Te invito a que comentes si algo no quedo del todo claro, si encuentras algn error, o quieres hacer alguna sugerencia. Ya esta disponible la parte VI

Organizacin de widgets en wxPython (Parte VI)

El GridBagSizer
Un GridBagSizer es una versin mejorada del FlexGridSizer. Lo primero que lo hace diferente, es que el GridBagSizer nos da la posibilidad de agregar un widget en una celda especifica a travs de sus coordenadas de fila y columna. La segunda caracterstica que lo diferencia, es la posibilidad de combinar varias celdas de modo que formen una sola. Haciendo uso de un GridBagSizer, podemos lograr distribuciones de widgets como la de la siguiente imagen:

En esta imagen, quiero que noten la posibilidad que nos da el GridBagSizer de combinar las celdas. El widget de la celda (0,1) ocupa dos filas de alto; el widget de la celda (2,1) ocupa dos columnas de ancho y el widget de la celda (0,3) ocupa tres filas de alto. A continuacin, veremos como hacer el ejemplo que est en la imagen utilizando wxFormBuilder. Antes de empezar a crear el ejemplo, les voy a comentar un problema que tiene wxFormBuilder con el GridBagSizer. En todos los Sizers anteriores crebamos primero un Frame y luego el Sizer en cuestin. Si bien aqu debiera ser igual, wxFormBuilder tiene un bug que hace que si intentamos agregar un GridBagSizer directamente dentro de un Frame, simplemente no funcione. La versin de wxFormBuilder que estoy usando es la 3.0.57 (Unicode), depende de en que momento ests leyendo esto, tal ves sea una ancdota, pero por ahora tenemos que usar un pequeo truco: primero creamos el Frame,luego un BoxSizer y por ultimo el GridBagSizer; es decir que debemos agregar el GridBagSizer dentro de un BoxSizer, y de este modo ya podemos trabajar. Dicho esto, veamos como crear el ejemplo paso a paso: Crear el frame:

Crear el BoxSizer (por el bug de wxFormBuilder que te coment):

Crear el GridBagSizer:

Agregar 8 botones (wxButton), del mismo modo que lo venimos haciendo

hasta ac. El Editor de wxFormBuilder se ver as:

Para poder cambiar la ubicacin de un widget dentro de un GridBagSizer, usamos las propiedades row y column, para establecer la fila y la columna donde queremos ubicar realmente el widget. Esto lo hacemos seleccionando el widget que queremos reubicar, y cambiamos los valores de estas propiedades en el panel Object Properties. Por ejemplo, para mover el botn de la celda (0,1) a la celda (1,0) utilizando wxFormBuilder; seleccionamos el botn contenido en la celda (0,1), escribimos un 1 en la propiedad rowy establecemos la propiedad column en 0. Despus de hacer esto, el Editor quedaria as:

A continuacin, te muestro los movimientos que deberas seguir haciendo para obtener la distribucin de los botones del ejemplo: Mover el botn de la celda (0,2) a la celda (2,0):

Mover el botn de la celda (0,3) a la celda (0,1):

Mover el botn de la celda (0,4) a la celda (2,1):

Mover el botn de la celda (0,5) a la celda (0,2):

Mover el botn de la celda (0,6) a la celda (1,2):

Mover el botn de la celda (0,7) a la celda (0,3):

En este punto ya tenemos todos los botones en la ubicacin correcta. Ahora debemos combinar las celdas necesarias. Para combinar las celdas, disponemos de las propiedades rowspan y colspan. Con la propiedad rowspan logramos que una celda se combine con cierta cantidad de filas, y con la propiedad colspan combinamos una celda con una cantidad de columnas determinada. Si rowspan y colspan valen 1 (este es el valor por defecto), quiere decir que el widget ocupa solo una fila de alto y una columna de ancho. Para que se entienda mejor, iremos haciendo las combinaciones necesarias para ir terminando el ejemplo. Lo primero ser hacer que la celda (0,1) se extienda hacia la fila de abajo (rowspan=2):

Como puedes ver en la imagen, si bien rowspan vale 2 para la celda (0,1), esta no parece estar ocupando dos filas, ya que el botn que esta contenido en ella, no ocupa dos filas, sino una. En realidad si ocupa dos filas, pero por defecto los widgets dentro del GridBagSizer no crecen en forma automtica, es por eso que una ves mas debemos recurrir a los Flags, y activar el Flag wxEXPAND:

Ahora el botn (wxButton) de la celda (0,1) ocupa las dos filas. Para terminar el ejemplo, debemos combinar y expandir las siguientes celdas: La celda (2,1) debe ocupar dos columnas (colspan=2):

y por ltimo, la celda (0,3) debe ocupar tres filas (rowspan=3):

En la imagen vemos el ejemplo terminado.

Como tal ves notaste, el GridBagSizer es el Sizer mas "complejo" que hemos visto. Si bien, tambin es cierto que lo podemos definir como el "mas completo y flexible", muchas veces no es la mejor opcin a la hora de trabajar, debido a su "complejidad" que hace que las interfaces sean mas difciles de realizar y mantener, es por esto que en general se suelen usar una combinacin de los otros Sizers mas simples, para lograr el mismo comportamiento.

... y ahora: Que sigue?

Finalmente, despus de 6 entregas, estamos en condiciones de comenzar a combinar todo lo visto; as que a partir de la prxima parte del tutorial, nos meteremos de lleno en la creacin de interfaces reales.

Organizacin de widgets en wxPython (Parte VII)

Si has llegado aqu mediante un buscador o por simple casualidad, te cuento que estas en la quinta parte de un tutorial que empieza AQUI. Como les haba prometido en la ultima entrega, empezaremos a combinar todo lo visto hasta el momento. La idea ser tomar como referencia ventanas de programas reales y copiar su apariencia. Obviamente, comenzaremos con interfaces simples, y luego iremos viendo algunas con un mayor grado de complejidad. Como primer proyecto, eleg la ventana Acerca de del programa gedit.

La ventana Acerca de de gedit

Una de las cosas ms difciles al comenzar a disear una interface grfica que utilice organizacin dinmica, es determinar que Sizers usar para lograr la distribucin deseada. Incluso en este caso, que queremos copiar una interface ya creada, debemos pensar un poco antes de poder darnos cuenta. Una cosa que debes tener en cuenta, es que una misma interface puede estar creada con distintos Sizers, con lo cual quiero decir, que tal ves se te puede ocurrir otra forma de lograr el mismo diseo de manera distinta a la que yo vaya presentando, por lo que seria interesante que si esto sucede, compartas con todos tu idea a travs de los comentarios. Por si todava no imaginas que Sizers podemos utilizar para crear la ventana, voy a mostrarte la misma captura de pantalla de antes, pero con algunas pistas:

Como ves, en la imagen remarque algunas celdas en color rojo. Prestando atencin a estas pistas, podemos deducir que esta ventana la podemos lograr utilizando dos Sizers: BoxSizer (Vertical) y un GridSizer. Si todava no lo ves, no te preocupes, y sigue leyendo. Empecemos a trabajar con wxFormBuilder.

Paso 1 Hasta ahora, cuando empezbamos cualquier ejemplo, crebamos un Frame, pero en este caso crearemos un "Dialog" para obtener directamente el aspecto de un cuadro de dialogo en vez del de una ventana estndar.

Paso 2: Creamos un BoxSizer (Vertical), para luego agregar uno a uno los widget que necesitamos en cada fila de ste.

Paso 3: Cuando les hable del BoxSixer (Vertical), vimos que cada widget que agregbamos, se ubicaba debajo del ultimo widget que ya existiera en el Sizer. Teniendo en mente esto, iremos agregando los widgets de arriba hacia abajo; empezando por la imagen con el logo de gedit. Para esto, debemos agregar dentro del BoxSizer que creamos, un widget de la clase wxStaticBitmap. El StaticBitmap lo encontramos en la solapa Common de la paleta de componentes de wxFormBuilder:

Al crear el StaticBitmap, vemos que en el Editor existe un recuadro rojo con un signo de pregunta en su interior; esto nos indica que si bien el widget se cre, an no especificamos que imagen se debe mostrar. Para especificar la imagen que queremos mostrar en el StaticBitmap; desplegamos la propiedad bitmap en el panel de propiedades, y luego definimos la ruta a la imagen en file_path:

Paso 4: Debajo del logo, se encuentra el texto con la versin del programa (gedit 2.24.2). Para mostrar un texto simple (como en este caso) disponemos del StaticText. Para crearlo simplemente pulsamos sobre el botn "wxStaticText" en la solapa Common de la paleta de componentes de wxFormBuilder:

Ahora que ya creamos el StaticText debajo del logo, cambiaremos el texto MyLabel por el de la versin de gedit. El texto que se muestra en un StaticSizer, esta definido en la propiedad label, por lo que slo debemos escribir el texto gedit 2.24.2 en esta propiedad:

Con esto ya tenemos el texto debajo del logo, pero nos falta que aparezca centrado como en la ventana original; as que activamos el Flag wxALIGN_CENTER, para centrar el StaticText. Para activar este Flag, tenemos un botn en la barra de herramientas que nos agiliza el trabajo:

Para terminar este paso, cambiaremos la propiedad font del StaticText para que la fuente se parezca mas a la original. Sobre mi plataforma (Ubuntu 8.10 Intrepid Ibex) para que el tamao de la fuente se aproxime al de la ventana original, debe tener 16px y estar en negrita, as que debo poner 16 en "Point Size" y seleccionar Bold en Weight.

Paso 5: En este paso, debemos agregar un nuevo StaticText para que contenga el texto de la descripcin del programa (gedit es un editor de texto pequeo y ...). Lo creamos de la misma forma que en el paso anterior, y luego establecemos el texto en la propiedad label:

Como se ve en la imagen, el StaticText crece para adaptarse al texto que muestra, pero en la ventana original que estamos copiando, el texto ocupa dos lineas y no

una:

Para que un StaticText no se ensanche mas de lo que queremos, debemos especificar el ancho en la propiedad width. En nuestro ejemplo, haremos que tenga un ancho de 235px.

Como ves, ahora el texto ocupa dos lineas, as que ya podemos activar el Flag wxALIGN_CENTER, de modo que el StaticText quede centrado:

Si bien ya tenemos el StaticText centrado (fjate el recuadro rojo), lo que an no esta centrado, es el texto en si. Para cambiar la alineacin del texto dentro del StaticText usamos la propiedad Style con el valor wxALIGN_CENTRE:

Paso 6: Agregamos otro StaticText, para poner las tres lineas de Copyright.

En este StaticText debemos escribir 3 lineas de texto, pero a diferencia del caso anterior, cada linea debe comenzar con un Copyright distinto, independientemente del ancho del StaticText, por lo que no podemos usar simplemente la propiedad width (como en el caso anterior) ya que si por ejemplo cambiamos el tamao del texto, seguramente no quedara un Copyright abajo del otro, sino que probablemente alguno aparecera al lado del otro. En este caso, para lograr el corte de las lineas, utilizamos la secuencia de escape \n (sin comillas). Slo debemos escribir \n donde queremos que se corte la lnea. Para el ejemplo, el texto seria el siguiente : Copyright 1998-2000 Evan Lawrence, Alex Robert\nCopyright 2000-2002 Chema Celorio, Paolo Maggi\nCopyright 2003-2006 Paolo Maggi Si no quieres escribir los \n, puedes hacer que wxFormBuilder lo haga por ti, para esto debes pulsar el botn que se encuentra al final de la caja de texto de la propiedad label y te aparecer un cuadro de dialogo donde puedes escribir directamente el texto y pulsar Enter donde sea necesario, luego, al cerrar el cuadro de dialogo, wxFormBuilder har el reemplazo por ti.

Aqu tambin debemos centrar el texto estableciendo el valor wxALIGN_CENTRE en la propiedad Style. Luego de centrar el texto, el Editor se vera as :

Si miras con atencin, puedes ver que los dos primeros Copyright's hicieron que el Dialog se haga mas ancho de lo que era, y ahora podemos notar que no hemos centrado el logo de gedit. Recuerda que para centrarlo, solo debemos seleccionar el StaticBitmap que lo contiene, y activar el Flag wx.ALIGN_CENTER:

Paso 7: Aqui agregaremos el enlace hacia el sitio del programa. Para crear el enlace usamos el widget de la clase wxHyperlinkCtrl. Agregarlo es tan simple como ir a la solapa Additional de la paleta de componentes, y pulsar el botn correspondiente :

Una vez creado, lo centramos y quedara como se ve a continuacin:

Al igual que en el StaticText, para cambiar el texto de un HyperlinkCtrl, usamos la propiedad label. En este caso, el valor de la propiedad label ser http://www.gedit.com, y tambin pondremos este mismo valor en la propiedad url para que apunte a esta direccin:

Paso 8: Por ltimo, debemos agregar los botones de Crditos y Cerrar. Al principio yo les dije que bamos a usar dos Sizers: BoxSizer (Vertical) y GridSizer. Hasta este momento slo hemos usado un BoxSizer (Vertical), pero voy a cumplir con lo que te dije, y usaremos el GridSizer. Si en este punto simplemente agregramos dos botones al BoxSizer (Vertical), estos quedaran uno debajo del otro (por la naturaleza misma del Sizer). Para salvar esto, lo que haremos sera agregar un GridSizer con una fila y dos columnas, y le agregamos un botn a cada una de las celdas:

Aqu vemos como podemos ir combinando los Sizers para obtener la organizacin que necesitamos. En este caso, el widget de la ultima fila del BoxSizer (Vertical), es un GridSizer con dos botones. Ahora editamos los textos que aparecen en los botones mediante la propiedad label y por ltimo alineamos el botn Cerrar a la derecha de su celda .

Por ltimo les dejo una captura de como les debera quedar el panel "Object Tree", donde vemos claramente la jerarqua de los distintos widgets.

Conclusin: En esta parte del tutorial, creo que se habrn aclarado muchas de las dudas que tal ves tenas (y seguramente te surgieron otras tantas).

La idea de este tutorial se enfoca mas en la organizacin de los widgets que en la apariencia de los mismos, es por esto que no he hablado demasiado sobre las particularidades de cada widget que usamos (wxStaticText, wxHyperlinkCtrl, etc.). Si les interesa, luego puedo escribir otro tutorial sobre los distintos widgets que podemos usar con wxPython, y as ver mas en detalle a cada uno de ellos. En la prxima parte, continuaremos con otras interfaces mas elaboradas. Nos vemos!

Organizacin de widgets en wxPython (Parte VIII)

Siguiendo con la idea de hacer ventanas reales, hoy ser el turno de crear el cuadro de dilogo de Ajustar balance de color del programa Gimp (v. 2.6.1). Esta ventana tiene una organizacin de widgets mas compleja que la que vimos en el post anterior. Empecemos!

La ventana Ajustar balance de color de Gimp

Al igual que hicimos con la ventana de gedit, lo primera ser identificar cuales son los Sizers que debemos usar. Una tcnica que puede servir para ver que Sizers existen en la ventana, es redimensionarla y observar el comportamiento de la misma, as que veamos ahora la ventana redimensionada:

Al redimensionar la ventana, se puede ver bsicamente lo siguiente:

1- El ComboBox y los Sliders crecen a lo ancho. 2- La imagen que est en el margen superior derecho, siempre queda anclada en esa esquina. 3- Los botones Reiniciar, Cancelar y Aceptar, quedan anclados en la esquina inferior derecha; pero el botn Ayuda que esta en la misma fila, no cambia su posicin. 4- Los dos CheckBox que estn arriba del botn Ayuda, quedan siempre a la misma distancia de este botn. 5- Del botn Reiniciar el rango (inclusive) hacia arriba, la posicin de los widgets no vara en forma vertical. Para ayudarte un poco mas, y al igual que antes, te voy a mostrar la ventana original, pero con algunas pistas:

Con este anlisis inicial, vamos a empezar a crear la ventana con wxFormBuilder. Para no alargar esta parte mas de lo necesario, y ya que hemos visto como hacer muchas de las cosas que necesitaremos para realizar esta ventana (crear un Frame, un Button, un StaticText, usar Flags de alineacin, etc.), voy a obviar algunas capturas y simplemente te dir el paso concreto y te mostrare la imagen con el resultado final; por ejemplo tal vez te diga: crea dos botones, luego centralos y cambia sus textos a

'Aceptar' y 'Cancelar' respectivamente. Para que te sirva de ayuda, tambin ir mostrndote el Object Tree en cada paso, para que puedes compararlo con lo que tu vayas haciendo. Dicho esto, veamos el desarrollo paso a paso:

Paso 1: Para empezar crearemos un Frame, y luego como contenedor general usaremos un BoxSizer (Vertical), donde en cada fila iremos poniendo los widgets necesarios. Luego de crear el BoxSizer (Vertical); en la primera fila de ste, tenemos varias cosas por agregar. Debido a que debemos ubicar mas de un widget en esta fila, esta claro que no podemos simplemente agregarlos, ya que quedaran uno debajo del otro. Para cambiar este comportamiento, y dado que en realidad esta primera fila la podemos ver como una serie celdas una al lado de la otra, lo que agregaremos, ser un BoxSizer (Horizontal) y dentro de ste, los siguientes widgets: 1- En primer lugar agregaremos la imagen del icono de la ventana: . Para esto creamos un StaticBitmap y establecemos la ruta a la imagen en file_path.

2- Al lado del icono de la ventana, tenemos que crear dos filas donde habr un StaticText en cada una de ellas, as que vamos a usar un BoxSizer (Vertical), y de este modo, al agregar los dos StaticText, estos quedarn uno debajo del otro. El StaticText superior tendr el texto "Ajustar el balance de colores" con una fuente de 16px y en negrita. El StaticText inferior tendr el texto "Fondo-6 (Via.png)" con una fuente de 8px. Al agregar el BoxSizer (Vertical) y los dos StaticText con sus respectivos textos y formatos, el Editor quedara as:

3- Al final de esta fila, debemos agregar un nuevo StaticBitmap, que representa la vista previa de la imagen a la que Gimp le ajustara el balance de colores: . El StaticBitmap se lo debemos agregar al BoxSizer (Horizontal) [bsizer2], ya que la imagen esta fuera de las dos filas de la columna del medio. Al igual que antes, una vez agregado el StaticBitmap, cambiamos la ruta (file_path) para que apunte a la imagen que queremos. Presta especial atencin al Object Tree en la siguiente imagen, para que se entienda mejor lo que digo:

En esta imagen te remarque en rojo la relacin entre el Object Tree y el Editor. Puedes ver que la Fila 0 del BoxSizer contenedor (bsizer1), es un BoxSizer (Horizontal), que dentro tiene 3 columnas, done la primera y la ltima son StaticBitmaps y la del medio, es un BoxSizer (Vertical) con dos filas, que tienen un StaticText cada una. Por el momento terminamos con la primera fila, as que vamos al paso 2.

Paso 2: Ya fuera del BoxSizer (Horizontal) [bsizer2], agregaremos una simple linea divisoria. Para agregarla, debes ir a la solapa Common y clickear sobre el botn wxStaticLine:

En la imagen anterior, pueden ver que en el Object Tree, contraje el BoxSizer que representa la fila 0, y de este modo podemos notar que el StaticLine esta por fuera del BoxSizer bSizer2. Esto de ir contrayendo los Sizers en el Object Tree, es una buen a practica para lograr mayor claridad.

Paso 3: La tercera fila del BoxSizer (Vertical) [bsizer1] debe contener cuatro widgets uno al lado del otro. Una vez mas, para lograr esta distribucin, usaremos un BoxSizer (Horizontal) donde agregaremos los widgets que irn en cada columna. Los widgets que debemos agregar son los siguientes: 1- Un StaticText con el texto Ajustes prefijados:

2- Un ComboBox Este widget lo encontramos en la solapa Common. Como vimos en el pequeo anlisis del comportamiento de la ventana, al ser redimensionada, este ComboBox debe crecer a lo ancho, es por esto (y por estar contenido en un BoxSizer [Horizontal]) que debemos establecer la propiedad proportion en 1.

3- Un BitmapButton Para crear este widget lo hacemos desde la solapa Common. Una vez agregado; para establecer cual es la imagen que debe mostrar, lo hacemos igual que con el StaticBitmap, o sea en file_path. Un detalle que podemos notar, es que al crear el BitmapButton, este posee un borde que lo rodea dando la apariencia de ser un botn, pero en la ventana original, no existen bordes, sino que parecen simples imgenes. Para cambiar este aspecto, tenemos que establecer la propiedad window_style, con el valor wxNO_BORDER activado:

4- Otro BitmapButton con su respectiva imagen establecida en file_path, y sin el borde clsico de los botones:

Paso 4: En este paso agregaremos cinco widgets directamente en el sizer que hace de contenedor principal (bSizer1). Los widgets que agregaremos sern los siguientes:

1- En primer lugar crearemos un StatiText con el texto Seleccione el rango para ajustar. Para que se asimile mas a la fuente original, ponemos el texto en negrita .

2- En segundo lugar, agregamos 3 widgets de la clase RadioButton desde la solapa Common . Para cambiar el texto que muestra cada uno de ellos, lo hacemos editando el valor de la propiedad label. El primer RadioButton tendr el texto Sombras, el segundo dir Tonos medios y el tercero Puntos de luz .

3- Para terminar este paso, agregamos otro StaticText con el texto Ajustar los niveles de color, y lo ponemos en negrita.

Paso 5: En este paso usaremos un FlexGridSizer con cuatro columnas y tres filas. El FlexGridSizer lo agregaremos en el contenedor principal (bSizer1). Una vez creado, vamos a agregar los siguientes widgets:

1- Un StaticText con el texto Cian.

2- Un Slider (lo encuentras en la solapa Common) .

3- Un StaticText con el texto Rojo.

4- Un SpinControl (lo encuentras en la solapa Additional) .

5- Agregamos la misma secuencia de widgets anterior (de la 1 a la 4), pero con los textos Magenta y Verde para los StaticText .

6- Hacemos lo mismo que en el paso 5, pero con los textos Amarillo y Azul para los StaticText.

Como habrs podido notar, los sliders no crecen en forma horizontal como esperaramos, as que para que esto suceda, y dado que estn dentro de la columna 1 (la segunda) de un FlexGridSizer, lo que debemos hacer es especificar el valor 1 en

la propiedad growablecols, y luego activar el flag wxEXPAND de los 3 Sliders.

Paso 6: Agregamos un botn (fuera del Fl exGridSizer) con el texto Reiniciar el rango y lo alineamos a la derecha.

Paso 7: Agregamos dos CheckBox con los textos Conservar la luminosidad y Vista previa respectivamente (Para cambiar el texto de un checkbox, tambin lo hacemos desde la propiedad label).

Paso 8: En este paso, vamos a crear la botonera de la parte inferior. Lo primero que haremos es crear un BoxSizer (Horizontal), al cual le cambiaremos su propiedad proportion a 0. A este BoxSizer, le agregamos un botn con el texto Ayuda .

Si bien podramos agregar los otros tres botones restantes (Reinciar, Cancelar y

Aceptar) directamente dentro del BoxSizer (bSizer5), si miras nuevamente la ventana original redimensionada, estos tres botones se deben mover juntos hacia la derecha, dejando slo al de Ayuda a la izquierda. Para lograr esto, agregaremos un BoxSizer (Vertical), que si bien slo tendr una fila, aprovecharemos la posibilidad de que podemos cambiar la alineacin horizontal de los widgets que este contenga en su interior. Para mover los tres botones juntos dentro del BoxSizer (Vertical), los ubicaremos en un GridSizer de una sola fila y tres columnas. Para verlo mejor, presta atencin al Object Tree:

Ahora desactivaremos el flag wxEXPAND del GridSizer que contiene los tres botones, y tambin alineamos el GridSizer a la derecha:

Paso 9: Ya tenemos todos los widgets en su lugar, as que ahora haremos algunos ltimos retoques. 1- Establecemos la propiedad proportion en 0 del StaticBox bSizer2, para que no crezca en su altura.

2- Tambin establecemos la propiedad proportion en 0 del StaticBox bSizer4 y el del StaticBox bSizer5, para que tampoco crezcan en su altura.

Hasta aqu esta casi todo terminado excepto por un detalle: si en este momento ejecutamos la ventana (lo cual lo puedes hacer, pulsando F5 desde wxFormBuilder), y luego la redimensionamos, vers algo como esto:

Prestando atencin, si comparas esta ventana con la original, notaras que hay un error: el botn Reiniciar el rango no debe bajar al agrandarse la ventana, slo debe ubicarse a la derecha, pero no bajar. Como una solucin a este problema, ubicaremos el botn dentro de un nuevo BoxSizer (Vertical). La forma mas simple de hacer esto es seleccionar el botn (m_button1) en el Object Tree, pulsar el botn derecho del mouse, y elegir la opcin Move into a new wxBoxSizer:

Por ltimo, establecemos la propiedad proportion en 0 del FlexGridSizer.

Si ahora ejecutamos la ventana y la redimensionamos, vemos que se comporta como la ventana original:

Listo, hemos terminado con esta interface. Al igual que en la ventana que hicimos en el post anterior, he tratado de concentrarme mas en lo organizacin de los widgets que en su apariencia, as que puede que la copia no sea 100% exacta en lo que se ve. Para aproximarla mas aun a la original, puedes jugar con los bordes de los widgets y as modificar el espaciado entre estos. A continuacin les muestro el Object Tree completamente expandido :

IMPORTANTE: Si ya has estado practicando todo lo que hemos visto, o bien todava no lo hiciste pero lo quieres intentar, podrs notar que wxFormBuilder an es un poco inestable, as que deberas ir guardando tu trabajo a cada paso importante que vas dando.

Conclusin
Creo que con estos dos ejemplos, tienen los lineamientos para poder crear la interface que te propongas. De este modo, doy por terminado este tutorial, pero dejo abierta la posibilidad de crear dos ventanas de algn programa que ustedes propongan. En otro tutorial (seguramente, de varias partes) veremos como guardar estas interfaces como un archivo XML, y como cargarlas desde una aplicacin Python, tambin les mostrare como hacer interfaces con las que podamos interactuar, y otros temas relacionados. Espero que esta informacin te haya sido de utilidad. Me gustara que comentes tu experiencia, para poder mejorar los tutoriales futuros. Hasta la prxima!