Download - 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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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/ -
7/22/2019 Aprender w x Build
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/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
12/95
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 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.
-
7/22/2019 Aprender w x Build
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
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
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 -
7/22/2019 Aprender w x Build
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/ -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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
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
http://2.bp.blogspot.com/_b34S9VWM3kE/SXKWmiPbbvI/AAAAAAAAAKs/qnnlEH3q0qs/s1600-h/tuto_wxpython_wxGridSizer_3X2.png -
7/22/2019 Aprender w x Build
21/95
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. 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.
-
7/22/2019 Aprender w x Build
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:
-
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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
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 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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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
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:
http://3.bp.blogspot.com/_b34S9VWM3kE/SX-r2xPyIZI/AAAAAAAAAOs/h3Ab6Jya_FI/s1600-h/tuto_org_wxphyton_boxsizer_h_4.png -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
40/95
Si has llegado aqu mediante un buscador o por simple casualidad, te cuento que estas
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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.
-
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
51/95
-
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
53/95
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):
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 -
7/22/2019 Aprender w x Build
54/95
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):
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 -
7/22/2019 Aprender w x Build
55/95
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 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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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)
Si has llegado aqu mediante un buscador o por simple casualidad, te cuento que estas
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
66/95
-
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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 -
7/22/2019 Aprender w x Build
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