Aprender w x Build

7/22/2019 Aprender w x Build

1/95

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?
http://pablotilli.com.ar/2009/01/organizacin-de-widgets-en-wxpython.htmlhttp://pablotilli.com.ar/2009/01/organizacin-de-widgets-en-wxpython.htmlhttp://pablotilli.com.ar/2009/01/organizacin-de-widgets-en-wxpython.htmlhttp://pablotilli.com.ar/search/label/Pythonhttp://pablotilli.com.ar/search/label/Pythonhttp://pablotilli.com.ar/search/label/Pythonhttp://pablotilli.com.ar/search/label/Pythonhttp://pablotilli.com.ar/2009/01/organizacin-de-widgets-en-wxpython.html


2/95

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:
http://3.bp.blogspot.com/_b34S9VWM3kE/SW5ekYkBmmI/AAAAAAAAAIc/iKyNDsRfDnk/s1600-h/tuto_org_wxphyton_gridsizer.png


3/95

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:
http://4.bp.blogspot.com/_b34S9VWM3kE/SW5hdLJzlyI/AAAAAAAAAI8/NmiTvRNmgA0/s1600-h/tuto_org_wxphyton_staticboxsizer_h.pnghttp://3.bp.blogspot.com/_b34S9VWM3kE/SW5hc22TsbI/AAAAAAAAAI0/OU3HTel8ITY/s1600-h/tuto_org_wxphyton_staticboxsizer_v.pnghttp://1.bp.blogspot.com/_b34S9VWM3kE/SW5fma6H6BI/AAAAAAAAAIs/GL6sKmOPhW4/s1600-h/tuto_org_wxphyton_boxsizer_h.pnghttp://1.bp.blogspot.com/_b34S9VWM3kE/SW5fmdJDfTI/AAAAAAAAAIk/WhU8yhwvAFI/s1600-h/tuto_org_wxphyton_boxsizer_v.png


4/95

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 empiezaAQUI.

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
http://pablotilli.com.ar/search/label/Pythonhttp://pablotilli.com.ar/search/label/Pythonhttp://pablotilli.com.ar/search/label/Pythonhttp://pablotilli.com.ar/2009/01/organizacin-de-widgets-en-wxpython.htmlhttp://pablotilli.com.ar/2009/01/organizacin-de-widgets-en-wxpython.htmlhttp://pablotilli.com.ar/2009/01/organizacin-de-widgets-en-wxpython.htmlhttp://4.bp.blogspot.com/_b34S9VWM3kE/SW5h2DSLdvI/AAAAAAAAAJM/XIEmTx4Df58/s1600-h/tuto_org_wxphyton_gridbagsizer.pnghttp://4.bp.blogspot.com/_b34S9VWM3kE/SW5h1uG9BdI/AAAAAAAAAJE/2Qy1LLP3lCw/s1600-h/tuto_org_wxphyton_flexgridsizer.pnghttp://pablotilli.com.ar/2009/01/organizacin-de-widgets-en-wxpython.htmlhttp://pablotilli.com.ar/search/label/Python


5/95

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 comoXRCedywxGladepor 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 IDEmultiplataforma. 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 desdeel sitio del proyecto.wxFormBuilder es libre y gratuito.

A continuacin te muestro una captura de pantalla para que te vayas familiarizando

con el programa:
http://wxformbuilder.org/http://wxformbuilder.org/http://xrced.sourceforge.net/http://xrced.sourceforge.net/http://xrced.sourceforge.net/http://wxglade.sourceforge.net/http://wxglade.sourceforge.net/http://wxglade.sourceforge.net/http://wxformbuilder.org/?page_id=7http://wxformbuilder.org/?page_id=7http://wxformbuilder.org/?page_id=7http://wxformbuilder.org/?page_id=7http://wxglade.sourceforge.net/http://xrced.sourceforge.net/http://wxformbuilder.org/


6/95

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 Formsde 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
http://3.bp.blogspot.com/_b34S9VWM3kE/SXKSbshgKmI/AAAAAAAAAJk/ZFoyPXXn81Q/s1600-h/tuto_wxpython_frame_creado.pnghttp://4.bp.blogspot.com/_b34S9VWM3kE/SXKSF83YsLI/AAAAAAAAAJc/I-vOaGKTPjA/s1600-h/tuto_wxpython_crear_frame.pnghttp://3.bp.blogspot.com/_b34S9VWM3kE/SXKRVNPiTGI/AAAAAAAAAJU/yjk8AE5cV4Y/s1600-h/tuto_wxpython_iface_wxFormBuilder.png


7/95

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 Layouty 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 proyectoen 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 solapaCommony pulsamos el botn wxButton. Esto agregar

el primer botn al GridSizer.
http://3.bp.blogspot.com/_b34S9VWM3kE/SXKTMiEY6nI/AAAAAAAAAJ0/pBcGQSW7shI/s1600-h/tuto_wxpython_wxGridSizer_creado.pnghttp://4.bp.blogspot.com/_b34S9VWM3kE/SXKS6YBWZtI/AAAAAAAAAJs/BKA9Lr9kNVI/s1600-h/tuto_wxpython_crear_wxGridSizer.png


8/95

Tras pulsar el botn wxButton, el Editorquedar 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 botnwxButton, con lo cual

el Editorahora 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
http://3.bp.blogspot.com/_b34S9VWM3kE/SXKUIdSNR0I/AAAAAAAAAKM/vfyDTFG-fF0/s1600-h/tuto_wxpython_wxButton2_creado.pnghttp://4.bp.blogspot.com/_b34S9VWM3kE/SXKTy9Sc2lI/AAAAAAAAAKE/59z0iogyYVM/s1600-h/tuto_wxpython_wxButton_creado.pnghttp://3.bp.blogspot.com/_b34S9VWM3kE/SXKTlwsXzLI/AAAAAAAAAJ8/p9_u57NgUCc/s1600-h/tuto_wxpython_crear_wxButton.png


9/95

botnwxbutton(recuerda que debe estar seleccionado "gSizer1" en el "Object

Tree"). El resultado final que debes ver en el Editores 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.
http://4.bp.blogspot.com/_b34S9VWM3kE/SXKU36r49II/AAAAAAAAAKc/4iOcjeWvR8Y/s1600-h/tuto_wxpython_wxGridSizer_con_grilla_marcada.pnghttp://2.bp.blogspot.com/_b34S9VWM3kE/SXKUZgfPKcI/AAAAAAAAAKU/0rLmo8pZX5g/s1600-h/tuto_wxpython_wxButton3y4_creado.png


10/95

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 ejemplode 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 momentotodas 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 Rowsy Cols, las cuales nos
http://3.bp.blogspot.com/_b34S9VWM3kE/SXKWOYlBM_I/AAAAAAAAAKk/egcYooEIMJA/s1600-h/tuto_wxpython_wxGridSizer_resize.png


11/95

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 hgappara crear un espacio entre las filas, y vgappara

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 verticalentre 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 Flagsentran 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 Flagsy para que sirve cada uno de

ellos.

Flags para establecer la alineacin de loswidgets

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
http://2.bp.blogspot.com/_b34S9VWM3kE/SXKWmiPbbvI/AAAAAAAAAKs/qnnlEH3q0qs/s1600-h/tuto_wxpython_wxGridSizer_3X2.png


12/95

insertado.

wx.ALIGN_LEFT:El widget es alineado a la izquierda dentro la celda en la que se


wx.ALIGN_RIGHT:El widget es alineado a la derecha dentro la celda en la que seencuentre.

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 aplicadoen 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.


13/95

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


en la segunda parte de un tutorial que empiezaAQUI.

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
http://pablotilli.com.ar/2009/01/organizacin-de-widgets-en-wxpython.htmlhttp://pablotilli.com.ar/2009/01/organizacin-de-widgets-en-wxpython.htmlhttp://pablotilli.com.ar/2009/01/organizacin-de-widgets-en-wxpython.htmlhttp://pablotilli.com.ar/2009/01/organizacin-de-widgets-en-wxpython.html


14/95

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 comoXRCedywxGladepor 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 puedendescargar desdeel sitio del proyecto.wxFormBuilder es libre y gratuito.

A continuacin te muestro una captura de pantalla para que te vayas familiarizando

con el programa:
http://wxformbuilder.org/http://wxformbuilder.org/http://xrced.sourceforge.net/http://xrced.sourceforge.net/http://xrced.sourceforge.net/http://wxglade.sourceforge.net/http://wxglade.sourceforge.net/http://wxglade.sourceforge.net/http://wxformbuilder.org/?page_id=7http://wxformbuilder.org/?page_id=7http://wxformbuilder.org/?page_id=7http://3.bp.blogspot.com/_b34S9VWM3kE/SXKRVNPiTGI/AAAAAAAAAJU/yjk8AE5cV4Y/s1600-h/tuto_wxpython_iface_wxFormBuilder.pnghttp://wxformbuilder.org/?page_id=7http://wxglade.sourceforge.net/http://xrced.sourceforge.net/http://wxformbuilder.org/


15/95

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 Formsde 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 Layouty pulsamos el botn wxGridSizer:

El resultado lo vemos en la siguiente captura:
http://4.bp.blogspot.com/_b34S9VWM3kE/SXKS6YBWZtI/AAAAAAAAAJs/BKA9Lr9kNVI/s1600-h/tuto_wxpython_crear_wxGridSizer.pnghttp://3.bp.blogspot.com/_b34S9VWM3kE/SXKSbshgKmI/AAAAAAAAAJk/ZFoyPXXn81Q/s1600-h/tuto_wxpython_frame_creado.pnghttp://4.bp.blogspot.com/_b34S9VWM3kE/SXKSF83YsLI/AAAAAAAAAJc/I-vOaGKTPjA/s1600-h/tuto_wxpython_crear_frame.png


16/95

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 proyectoen 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 deste. 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 solapaCommony pulsamos el botn wxButton. Esto agregar

el primer botn al GridSizer.

Tras pulsar el botn wxButton, el Editorquedar como se ve a continuacin:
http://3.bp.blogspot.com/_b34S9VWM3kE/SXKTlwsXzLI/AAAAAAAAAJ8/p9_u57NgUCc/s1600-h/tuto_wxpython_crear_wxButton.pnghttp://3.bp.blogspot.com/_b34S9VWM3kE/SXKTMiEY6nI/AAAAAAAAAJ0/pBcGQSW7shI/s1600-h/tuto_wxpython_wxGridSizer_creado.png


17/95

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 botnwxButton, con lo cual

el Editorahora 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 "ObjectTree"). El resultado final que debes ver en el Editores el siguiente:
http://3.bp.blogspot.com/_b34S9VWM3kE/SXKUIdSNR0I/AAAAAAAAAKM/vfyDTFG-fF0/s1600-h/tuto_wxpython_wxButton2_creado.pnghttp://4.bp.blogspot.com/_b34S9VWM3kE/SXKTy9Sc2lI/AAAAAAAAAKE/59z0iogyYVM/s1600-h/tuto_wxpython_wxButton_creado.png


18/95

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).
http://2.bp.blogspot.com/_b34S9VWM3kE/SXKUZgfPKcI/AAAAAAAAAKU/0rLmo8pZX5g/s1600-h/tuto_wxpython_wxButton3y4_creado.pnghttp://4.bp.blogspot.com/_b34S9VWM3kE/SXKU36r49II/AAAAAAAAAKc/4iOcjeWvR8Y/s1600-h/tuto_wxpython_wxGridSizer_con_grilla_marcada.pnghttp://2.bp.blogspot.com/_b34S9VWM3kE/SXKUZgfPKcI/AAAAAAAAAKU/0rLmo8pZX5g/s1600-h/tuto_wxpython_wxButton3y4_creado.png


19/95

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 seorganizan 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 Rowsy 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 hgappara crear un espacio entre las filas, y vgappara

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
http://3.bp.blogspot.com/_b34S9VWM3kE/SXKWOYlBM_I/AAAAAAAAAKk/egcYooEIMJA/s1600-h/tuto_wxpython_wxGridSizer_resize.png


20/95

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 Flagsentran 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 Flagsy para que sirve cada uno deellos.

Flags para establecer la alineacin de loswidgets

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


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
http://2.bp.blogspot.com/_b34S9VWM3kE/SXKWmiPbbvI/AAAAAAAAAKs/qnnlEH3q0qs/s1600-h/tuto_wxpython_wxGridSizer_3X2.png


21/95


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. Seomite 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 (Luegovolveremos 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 aplicadoa 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.


22/95

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, serequiere 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 losFlags, y esto es lo que trataremos justamente ahora.

El primer caso que veremos, ser sobre el Flag de alineacin wx.ALIGN_CENTER:


23/95

En la imagen podemos apreciar el Editor (Arriba) y el panel de propiedades (Abajo) dewxFormBuilder. En el Editor dibuje una grilla de color rojo, para que tengas dereferencia el tamao de cada celda. Como ya habamos dicho, en un GridSizer todaslas celdas son iguales, y de echo esto lo puedes apreciar en la imagen, pero comopuedes ver, en la primera celda (Fila 0, Col. 0) el widget se encuentra con unaalineacin distinta a la del resto. Para lograr esto, en el Editor debes seleccionar elwidget con el que quieres trabajar, y luego en el panel de propiedades desplegar laseccin Flags (lo puedes ver en la parte de abajo de la imagen), y activar laopcin wxALIGN_CENTER.

En la captura de pantalla, se pueden ver desplegados todos los Flags. Si quisiramoscambiar alguno de ellos, simplemente la activamos o desactivamos desde el checkboxque tienen a la derecha.

En el siguiente ejemplo vamos a combinar algunos de ellos:
http://1.bp.blogspot.com/_b34S9VWM3kE/SXy7uuz0gvI/AAAAAAAAAMU/yX193kL7km4/s1600-h/tuto_wxpython_flags_1.png


24/95

En este ejemplo vemos que cada una de los widgets posee una alineacin distinta. Lasopciones 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 borderesta en 5, y esta aplicado a loscuatro lados de los widgets (wx.ALL). En el ejemplo siguiente, variaremos los bordes(adems de la alineacin):

Las opciones de cadawidget de la imagen son los siguientes:
http://4.bp.blogspot.com/_b34S9VWM3kE/SXy8oGrxVoI/AAAAAAAAAMk/SmI3LaJASW0/s1600-h/tuto_wxpython_flags_3.pnghttp://2.bp.blogspot.com/_b34S9VWM3kE/SXy8Pzv0hlI/AAAAAAAAAMc/ACEf-nrDpt0/s1600-h/tuto_wxpython_flags_2.png


25/95

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 losFlags wx.EXPAND, wx.SHAPEDywx.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


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 loswidgets deben ocupar la totalidad del espacio de la celda en la que estn, parecieraque 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 bordede 20px en todos sus lados, por lo que puedes deducir que con el Flag wx.EXPAND, elwidget se expande, pero contempla los bordes especificados en lapropiedad border.

En el caso de la celda 2, es difcil entender como funciona el Flag wx.SHAPED, as quete voy a mostrar dos imgenes donde se encuentra la misma ventana, pero en dostamaos distintos:
http://1.bp.blogspot.com/_b34S9VWM3kE/SXy9HE4SYAI/AAAAAAAAAMs/tNKKRA6bJqs/s1600-h/tuto_wxpython_flags_4.png


26/95
http://2.bp.blogspot.com/_b34S9VWM3kE/SXzGNJk3qwI/AAAAAAAAANc/zgzUE9H1Vnk/s1600-h/tuto_wxpython_wxshaped_2.pnghttp://4.bp.blogspot.com/_b34S9VWM3kE/SXzGNC_BufI/AAAAAAAAANU/l9Hx6Jib35A/s1600-h/tuto_wxpython_wxshaped_1.png


27/95

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.GROWno 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.
http://pablotilli.com.ar/2009/01/organizacion-de-widgets-en-wxpython.htmlhttp://pablotilli.com.ar/2009/01/organizacion-de-widgets-en-wxpython.htmlhttp://1.bp.blogspot.com/_b34S9VWM3kE/SXzBUuwEIGI/AAAAAAAAANM/1d2GZ3wEVQI/s1600-h/tuto_wxpython_wxshaped_3.pnghttp://pablotilli.com.ar/2009/01/organizacion-de-widgets-en-wxpython.htmlhttp://pablotilli.com.ar/2009/01/organizacion-de-widgets-en-wxpython.html


28/95

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.
http://2.bp.blogspot.com/_b34S9VWM3kE/SX-oBPfU2MI/AAAAAAAAANk/qIthjFH4ykg/s1600-h/tuto_org_wxphyton_boxsizer_v_1.pnghttp://3.bp.blogspot.com/_b34S9VWM3kE/SX-oBC45DnI/AAAAAAAAANs/F7jP-OSgTu0/s1600-h/tuto_org_wxphyton_boxsizer_h_1.png


29/95

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
http://2.bp.blogspot.com/_b34S9VWM3kE/SX-pYq9GUqI/AAAAAAAAAOM/yA3YlH_DBRg/s1600-h/tuto_wxpython_crear_wxButton.pnghttp://1.bp.blogspot.com/_b34S9VWM3kE/SX-pYZ_-spI/AAAAAAAAAOE/Vx9H4CJpbkk/s1600-h/tuto_wxpython_crear_wxBoxSizer.pnghttp://4.bp.blogspot.com/_b34S9VWM3kE/SX-oqVFV7eI/AAAAAAAAAN8/z9xxE4JmmiQ/s1600-h/tuto_wxpython_frame_creado.pnghttp://3.bp.blogspot.com/_b34S9VWM3kE/SX-oqOSxjFI/AAAAAAAAAN0/vYW3KTHP0jQ/s1600-h/tuto_wxpython_crear_frame.png


30/95

(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 crear 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.HORIZONTALen la lista desplegable de la propiedad Orient.

El Editor con el BoxSizer (Horizontal) se veria asi:
http://3.bp.blogspot.com/_b34S9VWM3kE/SX-q6e2QU1I/AAAAAAAAAOk/y8ZsnteEPAY/s1600-h/tuto_org_wxphyton_boxsizer_h_2.pnghttp://1.bp.blogspot.com/_b34S9VWM3kE/SX-q6aw2t1I/AAAAAAAAAOc/U8RojISjkBY/s1600-h/tuto_org_wxphyton_boxsizer_orientation.pnghttp://2.bp.blogspot.com/_b34S9VWM3kE/SX-pYqXCl1I/AAAAAAAAAOU/qepVe5ExUms/s1600-h/tuto_org_wxphyton_boxsizer_v_2.png


31/95

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


4- border=30 +wx.BOTTOM +wx.ALIGN_BOTTOM


Este mismo ejemplo, pero en su versin Vertical, quedara as:
http://3.bp.blogspot.com/_b34S9VWM3kE/SX-r2xPyIZI/AAAAAAAAAOs/h3Ab6Jya_FI/s1600-h/tuto_org_wxphyton_boxsizer_h_4.png


32/95

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.
http://3.bp.blogspot.com/_b34S9VWM3kE/SX-r3WfUQhI/AAAAAAAAAO8/IWAqirHh2Ro/s1600-h/tuto_org_wxphyton_boxsizer_v_4.pnghttp://1.bp.blogspot.com/_b34S9VWM3kE/SX-r3Da7QPI/AAAAAAAAAO0/-htSZQ_VMYQ/s1600-h/tuto_org_wxphyton_boxsizer_v_3.png


33/95

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 en "0",

los widgets tomarn su tamao por defecto.

Si establecemos la propiedad Proportion de un solo widget en 1, este ocupara el100% 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.
http://4.bp.blogspot.com/_b34S9VWM3kE/SX-sqG2CvvI/AAAAAAAAAPE/GWXauTCN8z0/s1600-h/tuto_org_wxphyton_boxsizer_v_5.png


34/95

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:
http://4.bp.blogspot.com/_b34S9VWM3kE/SYDfwTd0ONI/AAAAAAAAAPc/LRMxWuQciV4/s1600-h/tuto_org_wxphyton_boxsizer_v_6.pnghttp://2.bp.blogspot.com/_b34S9VWM3kE/SX-sqRg_daI/AAAAAAAAAPU/srtL-shH6no/s1600-h/tuto_org_wxphyton_boxsizer_strech.pnghttp://1.bp.blogspot.com/_b34S9VWM3kE/SX-sqCzLSwI/AAAAAAAAAPM/52lTKdAjJhI/s1600-h/tuto_org_wxphyton_boxsizer_proportion_1.png


35/95

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
http://2.bp.blogspot.com/_b34S9VWM3kE/SYDfwduGEWI/AAAAAAAAAPs/1UdT30CmNTo/s1600-h/tuto_org_wxphyton_boxsizer_v_8.pnghttp://2.bp.blogspot.com/_b34S9VWM3kE/SYDfwTYe6jI/AAAAAAAAAPk/Eyy1NZ0zC50/s1600-h/tuto_org_wxphyton_boxsizer_v_7.png


36/95

(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 ProportionEs 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 tieneactivado 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.
http://1.bp.blogspot.com/_b34S9VWM3kE/SYDhZ0OzDaI/AAAAAAAAAP0/yA4_hiPf2BU/s1600-h/tuto_org_wxphyton_boxsizer_h_5.png


37/95

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 Flagwx.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):
http://2.bp.blogspot.com/_b34S9VWM3kE/SYDi9yV0B8I/AAAAAAAAAQE/O4zhTDU76bA/s1600-h/tuto_org_wxphyton_boxsizer_v_10.pnghttp://3.bp.blogspot.com/_b34S9VWM3kE/SYDi92kJCOI/AAAAAAAAAP8/kmz_WCpNfEg/s1600-h/tuto_org_wxphyton_boxsizer_v_9.png


38/95

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 todo 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 estaactivado 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:
http://2.bp.blogspot.com/_b34S9VWM3kE/SYDlQsh5d5I/AAAAAAAAAQU/wQeNm0qQhww/s1600-h/tuto_org_wxphyton_boxsizer_h_6.pnghttp://4.bp.blogspot.com/_b34S9VWM3kE/SYDi9-EeT7I/AAAAAAAAAQM/oWWKESJydxo/s1600-h/tuto_org_wxphyton_boxsizer_v_11.png


39/95

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
http://2.bp.blogspot.com/_b34S9VWM3kE/SYDlQ8Jw9TI/AAAAAAAAAQk/XnC-tQhZGSU/s1600-h/tuto_org_wxphyton_boxsizer_h_8.pnghttp://3.bp.blogspot.com/_b34S9VWM3kE/SYDlQtNe-KI/AAAAAAAAAQc/OjNlqkD5MGY/s1600-h/tuto_org_wxphyton_boxsizer_h_7.png


40/95


en la quinta parte de un tutorial que empiezaAQUI.

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 algunasnovedades 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 Proportionpara 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:
http://pablotilli.com.ar/2009/01/organizacin-de-widgets-en-wxpython.htmlhttp://pablotilli.com.ar/2009/01/organizacin-de-widgets-en-wxpython.htmlhttp://pablotilli.com.ar/2009/01/organizacin-de-widgets-en-wxpython.htmlhttp://2.bp.blogspot.com/_b34S9VWM3kE/SYOqTPJATBI/AAAAAAAAAQ0/PFPh5QfnqLs/s1600-h/tuto_wxpython_crear_wxStaticBoxSizer.pnghttp://3.bp.blogspot.com/_b34S9VWM3kE/SYOqTDIJfoI/AAAAAAAAAQs/6OYqU3I4Z4Y/s1600-h/tuto_org_wxphyton_staticboxsizer_v_1.pnghttp://pablotilli.com.ar/2009/01/organizacin-de-widgets-en-wxpython.html


41/95

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, elFlexGridSizer 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
http://3.bp.blogspot.com/_b34S9VWM3kE/SYOryOGBw1I/AAAAAAAAARE/DESkzZD2ROg/s1600-h/tuto_wxpython_wxFlexGridSizer.pnghttp://3.bp.blogspot.com/_b34S9VWM3kE/SYOqTe28jaI/AAAAAAAAAQ8/1RlZDmJY93Q/s1600-h/tuto_org_wxphyton_staticboxsizer_label.png


42/95

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

propiedadesRows y Cols:
http://2.bp.blogspot.com/_b34S9VWM3kE/SYOss65FFvI/AAAAAAAAARc/JbivkyBGuwo/s1600-h/tuto_wxpython_wxFlexGridSizer_3.pnghttp://3.bp.blogspot.com/_b34S9VWM3kE/SYOryE45RCI/AAAAAAAAARU/hV8YRhPzzGE/s1600-h/tuto_wxpython_wxFlexGridSizer_2.pnghttp://1.bp.blogspot.com/_b34S9VWM3kE/SYOryJE3RGI/AAAAAAAAARM/NX5M7Y_EmTo/s1600-h/tuto_wxpython_crear_wxFlexGridSizer.png


43/95

Para lograr que las filas y

las columnas "crezcan", tenemos las

propiedades growablesrowsy growablescolsrespectivamente. 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 estamoscreando, 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 degrowablesrowsser 0 y el

de growablescolssera1:

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:
http://4.bp.blogspot.com/_b34S9VWM3kE/SYOt8hBoqpI/AAAAAAAAAR0/MINp3T_4S4Y/s1600-h/tuto_wxpython_wxFlexGridSizer_6.pnghttp://1.bp.blogspot.com/_b34S9VWM3kE/SYOstD8DYZI/AAAAAAAAARs/dGThxIReylY/s1600-h/tuto_wxpython_wxFlexGridSizer_5.pnghttp://1.bp.blogspot.com/_b34S9VWM3kE/SYOss3P045I/AAAAAAAAARk/zKvcNsx2VDk/s1600-h/tuto_wxpython_wxFlexGridSizer_4.png


44/95

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 growablesrowsy growablescolssegn corresponda, los ndices de las filaso 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: flexibledirectionynon_flexible_grow_mode.

flexibledirection ynon_flexible_grow_mode
http://2.bp.blogspot.com/_b34S9VWM3kE/SYOuhLJ0jLI/AAAAAAAAASM/iQK45XVA0AE/s1600-h/tuto_wxpython_wxFlexGridSizer_8.pnghttp://1.bp.blogspot.com/_b34S9VWM3kE/SYOuhOHTM-I/AAAAAAAAASE/bcKbOoeooR0/s1600-h/tuto_wxpython_wxFlexGridSizer_7.pnghttp://4.bp.blogspot.com/_b34S9VWM3kE/SYOuhAuSf5I/AAAAAAAAAR8/qiGzkkueT34/s1600-h/tuto_wxpython_wxFlexGridSizer.png


45/95

La propiedad flexibledirectiontiene tres valores posibles:

wxVERTICAL: las filas que especifiquemos en la propiedad growablesrowsseran

flexibles.

wxHORIZONTAL: las columnas especificadas en la propiedad growablescolsseranflexibles.

wxBOTH: Tanto las filas que especifiquemos en la propiedad growablesrows, como las

columnas especificadas en la propiedad growablescolssern flexibles

Si establecemos la propiedad flexibledirectioncon 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 lapropiedad non_flexible_grow_mode.

Dependiendo de que valor pongamos en la propiedad flexibledirection, tenemos tres

escenarios posibles:

Escenario 1: La propiedad flexibledirectiontiene el valor wxHORIZONTAL

En este caso debemos especificar en la propiedad growablecolslas 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.


46/95

En la imagen puedes verque 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.
http://3.bp.blogspot.com/_b34S9VWM3kE/SYOwI2VeEUI/AAAAAAAAASc/w8sLuuyJ12g/s1600-h/tuto_wxpython_wxFlexGridSizer_10.pnghttp://4.bp.blogspot.com/_b34S9VWM3kE/SYOwIi-AIHI/AAAAAAAAASU/IeCy7CBsPdI/s1600-h/tuto_wxpython_wxFlexGridSizer_9.png


47/95

Aqu especifique quecrezcan las columnas 0 y 2, y la fila 0.

Escenario 2: La propiedad flexibledirectiontiene 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.
http://2.bp.blogspot.com/_b34S9VWM3kE/SYOwI3FVkDI/AAAAAAAAASk/Qf6aeSbeV-o/s1600-h/tuto_wxpython_wxFlexGridSizer_11.png


48/95

Aqu especifique quecrezcan 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.
http://3.bp.blogspot.com/_b34S9VWM3kE/SYOxXxTSoOI/AAAAAAAAAS0/I3pQjK2HbGg/s1600-h/tuto_wxpython_wxFlexGridSizer_13.pnghttp://4.bp.blogspot.com/_b34S9VWM3kE/SYOxX0ZfJbI/AAAAAAAAASs/meJqZ-DQOL0/s1600-h/tuto_wxpython_wxFlexGridSizer_12.png


49/95

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 flexibledirectiontiene el valorwxBOTH

Aqu deberemos especificar tanto las filas como las columnas que crecern, haciendo

uso de las propiedades growablerows y growablecols. En este escenario, el nico valorvlido para non_flexible_grow_modees "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 growablerowsy growablecols.
http://1.bp.blogspot.com/_b34S9VWM3kE/SYOxYKPv4yI/AAAAAAAAAS8/E58dpHghu1U/s1600-h/tuto_wxpython_wxFlexGridSizer_14.png


50/95

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 laparte VI

Organizacin de widgets en wxPython (Parte VI)

El GridBagSizerUn GridBagSizer es una versin mejorada del FlexGridSizer. Lo primero que lo hacediferente, es que el GridBagSizer nos da la posibilidad de agregar un widget en unacelda especifica a travs de sus coordenadas de fila y columna. La segundacaracterstica que lo diferencia, es la posibilidad de combinar varias celdas de modoque formen una sola.

Haciendo uso de un GridBagSizer, podemos lograr distribuciones de widgets como lade la siguiente imagen:
http://pablotilli.com.ar/2009/02/organizacion-de-widgets-en-wxpython.htmlhttp://pablotilli.com.ar/2009/02/organizacion-de-widgets-en-wxpython.htmlhttp://pablotilli.com.ar/2009/02/organizacion-de-widgets-en-wxpython.htmlhttp://3.bp.blogspot.com/_b34S9VWM3kE/SYOyRniPP7I/AAAAAAAAATE/YIQM0omsE2I/s1600-h/tuto_wxpython_wxFlexGridSizer_15.pnghttp://pablotilli.com.ar/2009/02/organizacion-de-widgets-en-wxpython.html


51/95


52/95

hasta ac. El Editor de wxFormBuilder se ver as:

Para poder cambiar la ubicacin de un widget dentro de un GridBagSizer, usamos laspropiedades rowy 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. Porejemplo, para mover el botn de la celda (0,1) a la celda (1,0) utilizandowxFormBuilder; seleccionamos el botn contenido en la celda (0,1), escribimos un 1en la propiedad rowy establecemos la propiedad columnen 0. Despus de haceresto, el Editor quedaria as:

A continuacin, te muestro los movimientos que deberas seguir haciendo para obtenerla distribucin de los botones del ejemplo:

Mover el botn de la celda (0,2) a la celda (2,0):
http://1.bp.blogspot.com/_b34S9VWM3kE/SYt7K1psbgI/AAAAAAAAAUM/QTYNNKJFVLQ/s1600-h/tuto_org_wxpython_gridbagsizer_3.pnghttp://3.bp.blogspot.com/_b34S9VWM3kE/SYt7Kx3yRYI/AAAAAAAAAUE/QJHRmg5u39Y/s1600-h/tuto_org_wxpython_gridbagsizer_2.png


53/95


http://2.bp.blogspot.com/_b34S9VWM3kE/SYuBCBpw6PI/AAAAAAAAAUc/kVFEU3rB-Lg/s1600-h/tuto_org_wxpython_gridbagsizer_5.pnghttp://1.bp.blogspot.com/_b34S9VWM3kE/SYt7LFyHUBI/AAAAAAAAAUU/fLCXQL4EImE/s1600-h/tuto_org_wxpython_gridbagsizer_4.png


54/95


http://3.bp.blogspot.com/_b34S9VWM3kE/SYuBCcNkm9I/AAAAAAAAAUs/zIVP7XghlCg/s1600-h/tuto_org_wxpython_gridbagsizer_7.pnghttp://4.bp.blogspot.com/_b34S9VWM3kE/SYuBCLlqFdI/AAAAAAAAAUk/1BKuq631FDs/s1600-h/tuto_org_wxpython_gridbagsizer_6.png


55/95


En este punto ya tenemos todos los botones en la ubicacin correcta. Ahora debemoscombinar las celdas necesarias.

Para combinar las celdas, disponemos de las propiedades rowspany colspan. Con la

propiedad rowspanlogramos que una celda se combine con cierta cantidad de filas, ycon la propiedad colspancombinamos una celda con una cantidad de columnasdeterminada. Si rowspany colspanvalen 1 (este es el valor por defecto), quieredecir 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 irterminando el ejemplo. Lo primero ser hacer que la celda (0,1) se extienda hacia lafila de abajo (rowspan=2):
http://1.bp.blogspot.com/_b34S9VWM3kE/SYuCK5XsomI/AAAAAAAAAU8/IwJdiOfvkTI/s1600-h/tuto_org_wxpython_gridbagsizer_9.pnghttp://4.bp.blogspot.com/_b34S9VWM3kE/SYuBCWOlr_I/AAAAAAAAAU0/Mvy1o536WX0/s1600-h/tuto_org_wxpython_gridbagsizer_8.png


56/95

Como puedes ver en laimagen, si bien rowspanvale 2 para la celda (0,1), esta no parece estar ocupandodos filas, ya que el botn que esta contenido en ella, no ocupa dos filas, sino una. Enrealidad si ocupa dos filas, pero por defecto los widgets dentro del GridBagSizer nocrecen 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 elejemplo, debemos combinar y expandir las siguientes celdas:

La celda (2,1) debe ocupar dos columnas (colspan=2):
http://4.bp.blogspot.com/_b34S9VWM3kE/SYuCkhGMFFI/AAAAAAAAAVM/IRJ_IGDBHu8/s1600-h/tuto_org_wxpython_gridbagsizer_11.pnghttp://3.bp.blogspot.com/_b34S9VWM3kE/SYuCkVKEovI/AAAAAAAAAVE/BM6oxsNFvek/s1600-h/tuto_org_wxpython_gridbagsizer_10.png


57/95

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

En la imagen vemos el ejemplo terminado.
http://3.bp.blogspot.com/_b34S9VWM3kE/SYuClOUFCYI/AAAAAAAAAVc/IAE8o4l3Xgw/s1600-h/tuto_org_wxpython_gridbagsizer_13.pnghttp://1.bp.blogspot.com/_b34S9VWM3kE/SYuCkskxq0I/AAAAAAAAAVU/MGVWkjudon8/s1600-h/tuto_org_wxpython_gridbagsizer_12.png


58/95

Como tal ves notaste, el GridBagSizer es el Sizer mas "complejo" que hemos visto. Sibien, 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 queen 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)


en la quinta parte de un tutorial que empiezaAQUI.

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
http://pablotilli.com.ar/2009/02/organizacion-de-widgets-en-wxpython_07.htmlhttp://pablotilli.com.ar/2009/02/organizacion-de-widgets-en-wxpython_07.htmlhttp://pablotilli.com.ar/2009/01/organizacin-de-widgets-en-wxpython.htmlhttp://pablotilli.com.ar/2009/01/organizacin-de-widgets-en-wxpython.htmlhttp://pablotilli.com.ar/2009/01/organizacin-de-widgets-en-wxpython.htmlhttp://pablotilli.com.ar/2009/01/organizacin-de-widgets-en-wxpython.htmlhttp://pablotilli.com.ar/2009/02/organizacion-de-widgets-en-wxpython_07.htmlhttp://pablotilli.com.ar/2009/02/organizacion-de-widgets-en-wxpython_07.html


59/95

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:
http://4.bp.blogspot.com/_b34S9VWM3kE/SZCQ4L3xQ3I/AAAAAAAAAVk/O4OIA7cjI-A/s1600-h/tuto_org_wxpython_gedit_1.png


60/95

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 1Hasta 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.
http://2.bp.blogspot.com/_b34S9VWM3kE/SZCSltu54ZI/AAAAAAAAAV0/SFMsZGOp1D4/s1600-h/tuto_org_wxpython_gedit_3.pnghttp://1.bp.blogspot.com/_b34S9VWM3kE/SZCRRibsMCI/AAAAAAAAAVs/ArKtY3MuDZo/s1600-h/tuto_org_wxpython_gedit_2.png


61/95

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 lapropiedad bitmapen el panel de propiedades, y luego definimos la ruta a la imagen

en file_path:
http://3.bp.blogspot.com/_b34S9VWM3kE/SZCTXDUEu0I/AAAAAAAAAV8/N7NCfgEGN5w/s1600-h/tuto_org_wxpython_gedit_4.pnghttp://2.bp.blogspot.com/_b34S9VWM3kE/SZCUEWNSwhI/AAAAAAAAAWE/qQshV8E6pzA/s1600-h/tuto_wxpython_crear_wxBoxSizer.png


62/95

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:
http://3.bp.blogspot.com/_b34S9VWM3kE/SZCUuHhUn0I/AAAAAAAAAWM/Y288U2lMGug/s1600-h/tuto_org_wxpython_gedit_5.png


63/95

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:
http://2.bp.blogspot.com/_b34S9VWM3kE/SZCUubVC4SI/AAAAAAAAAWU/rsWbm9FrULk/s1600-h/tuto_org_wxpython_gedit_6.png


64/95

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:
http://4.bp.blogspot.com/_b34S9VWM3kE/SZCUuViQVfI/AAAAAAAAAWc/_AFeUIuCQAg/s1600-h/tuto_org_wxpython_gedit_7.png


65/95

Para terminar este paso, cambiaremos la propiedad fontdel 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.
http://3.bp.blogspot.com/_b34S9VWM3kE/SZCVs7ANhwI/AAAAAAAAAWk/mXuGC0MREjk/s1600-h/tuto_org_wxpython_gedit_8.png


66/95


67/95

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 de235px.

Como ves, ahora el texto ocupa dos lineas, as que ya podemos activar el Flag

wxALIGN_CENTER, de modo que el StaticText quede centrado:
http://2.bp.blogspot.com/_b34S9VWM3kE/SZCWvLvrbDI/AAAAAAAAAXE/zNQUK1o5jEw/s1600-h/tuto_org_wxpython_gedit_11.pnghttp://4.bp.blogspot.com/_b34S9VWM3kE/SZCWu71aBtI/AAAAAAAAAW8/7vbSgq0MS3E/s1600-h/tuto_org_wxpython_gedit_10.png


68/95

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 Stylecon el valor wxALIGN_CENTRE:
http://3.bp.blogspot.com/_b34S9VWM3kE/SZCXdApgarI/AAAAAAAAAXU/KRb8i7V3u_4/s1600-h/tuto_org_wxpython_gedit_13.pnghttp://1.bp.blogspot.com/_b34S9VWM3kE/SZCWvIgG0nI/AAAAAAAAAXM/daE5MdIEqHY/s1600-h/tuto_org_wxpython_gedit_12.png


69/95

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 labely 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.
http://3.bp.blogspot.com/_b34S9VWM3kE/SZCXdFL0H7I/AAAAAAAAAXc/ajKyHpVBh1g/s1600-h/tuto_org_wxpython_gedit_14.png


70/95

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 :
http://2.bp.blogspot.com/_b34S9VWM3kE/SZCXdOY7PPI/AAAAAAAAAXk/N2aSj_sTl5w/s1

Documents

Aprender w x Build