Si has llegado aquí mediante un buscador o por simple casualidad, te cuento que estas en la cuarta parte de un tutorial que empieza AQUI.
Como ya les había anticipado, en esta oportunidad seguiremos hablando de Sizers. Hasta ahora sólo hemos visto el GridSizer. En esta oportunidad veremos el BoxSizer (Vertical y Horizontal).
BoxSizer (Vertical y Horizontal)
El BoxSizer es uno de los Sizers más simples (y mas usados). La verdadera potencia de este Sizer, se basa en la posibilidad de agregar un BoxSizer dentro de otro BoxSizer.Este tipo de Sizer, se puede imaginar como una simple fila donde los widgets se ubican uno al lado del otro (en el caso del BoxSizer Horizontal), o como una columna donde los widgets se ubican uno debajo del otro (en el caso del BoxSizer Vertical).
BoxSizer Horizontal
BoxSizer Vertical
En las dos imágenes 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 orientación.
Al igual que en el GridSizer, en cada celda del BoxSizer, solo podemos ubicar un solo Widget. Como ya lo había hecho con el GridSizer, en las imágenes les remarque en color rojo, lo que serían las “celdas virtuales” donde se ubican los Widgets.
En este caso, no podemos especificar la cantidad de filas o columnas como hacíamos en el GridSizer; sino que aquí se van creando en forma automática cada vez que agregamos un Widget al BoxSizer. Si agregamos un Widget, y el BoxSizer es Horizontal, este se agrega a la derecha de los Widgets que ya existan en el Sizer; y si el BoxSizer es Vertical, el Widget se agregará abajo de todos los que se encuentren ya contenidos en el Sizer.
Crear un BoxSizer con wxFormBuilder, es tan simple como crear el GridSizer. Si estas siguiendo las distintas partes de este tutorial, ya casi sabes como hacerlo. De todos modos, lo veremos rápidamente en 3 pasos:
1- Creamos un Frame:
2- Hacemos click en la solapa "Layout", y luego clickeamos el botón correspondiente para la creación 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 botón para agregar un "wx.button" al Sizer:
Con estos pasos, ya tenemos el BoxSizer dentro de un Frame, con algunos botones (wx.button) adentro.
Cuando creamos el BoxSizer con wxFormBuilder, la orientación por defecto será “Vertical” (wx.VERTICAL); por lo tanto cada vez que pulses el botón 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 opción wx.HORIZONTAL en la lista desplegable de la propiedad Orient.
El Editor con el BoxSizer (Horizontal) se veria asi:
ACLARACION: Los numeros (1, 2, 3, 4) que vez en las imágenes, fueron agregados por mi, para representar en que orden fueron apareciendo los botones a medida que eran añadidos al Sizer.
Al redimensionar un BoxSizer, este toma el tamaño total disponible de su contenedor (del Frame en este caso), pero los widgets contenidos en cada una de las celdas, mantienen su tamaño original, y quedan “anclados” a la esquina superior izquierda de la celda en la que se encuentran, tal como sucedía con el GridSizer. Por suerte, aquí también 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 versión “Vertical”, quedaría así:
Una propiedad muy importante en este tipo de Sizer es la llamada “Proportion”. Esta característica, 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 sólo 3 botones, nos queda mucho espacio libre. En algunas circunstancias puede ser que es lo que queramos, pero también podría darse el caso en que deseamos otro comportamiento.
Por dar un ejemplo, podríamos querer que el último botón 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 tomarán su tamaño por defecto.
Si establecemos la propiedad “Proportion” de un solo widget en “1”, este ocupara el 100% del espacio disponible que quede dentro del sizer. Si establecemos la propiedad “proportion” de dos widget en “1” dentro del mismo BoxSizer, significa que cada uno ocupara el 50% de lugar libre, y asi podemos ir combinando distintos valores, por ej: un widget en “1”, otro en “2”, otro en “3”, etc.. En definitiva, esta propiedad especifica como se distribuye el espacio libre del Sizer. Cuanto mayor sea el valor de la propiedad “proportion” de un widget, mas espacio ocupara este. Veamos el caso en que el ultimo botón ocupe el total del espacio libre:
Para lograr el comportamiento que ves en la imagen, tienes dos maneras.
1- Seleccionar el último botón en el Editor de wxFormBuilder, ir al panel de propiedades, y establecer el valor de Proportion en “1”.
2- Seleccionar el último botón en el Editor de wxFormBuilder y pulsar el botón “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 también la propiedad “Proportion” del segundo botón a “1”, el espacio libre se repartiría dando un 50% a cada widget. El ejemplo se vería así:
Si también establecemos la propiedad“Proportion” del primer botón a "1", el espacio libre quedaría dividido equitativamente, dándole a cada uno de los widgets, la misma cantidad de espacio. En este caso, cada botón tendrá un 1/3 del espacio total del sizer:
Veamos un ejemplo donde el primer botón 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 botón (proportion="0") tiene su tamaño por defecto, el segundo botón (proportion="1") ocupa 1/3 del espacio libre que quedaria en el Sizer y el tercer botón (proportion="3") ocupa 2/3 del espacio libre.
Esta propiedad suele ser un tanto difícil de entender al principio, pero realmente no es tan compleja como parece. Sólo es cuestión de hacer unas cuantas pruebas, para ir viendo que resultado se obtienen al variar su valor.
En las ultimas imágenes, siempre vimos BoxSizer's verticales, pero lo dicho vale también si la orientación es horizontal:
En esta imagen vemos un BoxSizer con orientación Horizontal. Los dos primeros botones tienen su propiedad “Proportion” establecida en “0”, y el último en “1”; es por eso que el ultimo botón ocupa todo el espacio que quedaría 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.
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 botón tiene “proportion” en “0” y NO esta activo el Flag wx.EXPAND. El segundo botón también tiene “proportion” en “0”, pero SI tiene activado el Flag wx.EXPAND. Se puede observar claramente que el segundo botón se expandió a lo ancho, pero el alto esta igual que en el primer botón.
2- La propiedad “Proportion” modifica al widget en su altura, pero no afecta la el ancho del widget:
En esta imagen, el primer botón tiene “proportion” en “0” y NO esta activo el Flag wx.EXPAND. El segundo botón tiene “proportion” en “1”, y tampoco tiene activado el Flag wx.EXPAND. Se puede ver que el segundo botón se expandió a lo alto, pero el ancho es el mismo que en el primer botón.
3- Si activamos wx.EXPAND y establecemos el valor de la propiedad Proportion en un valor distinto de “0”, logramos que el widget crezca en ambos sentidos (Alto y ancho):
Podemos ver en la imagen, que al combinar las 2 opciones, el botón 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 orientación 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 botón tiene la propiedad “proportion” en “0” y NO esta activado el Flag wx.EXPAND. El segundo botón también tiene “proportion” en “0”, pero SI tiene activado el Flag wx.EXPAND. Se puede observar claramente que el segundo botón se expandió en el alto, pero su ancho esta igual que en el primer botón.
2- La propiedad Proportion modifica al widget en su ancho, pero no afecta el alto del widget:
3- Si activamos el Flag wx.EXPAND, y establecemos el valor de la propiedad Proportion en un valor distinto de “0”, logramos que el widget crezca en ambos sentidos (Alto y ancho):
En la imagen podemos ver que combinando las 2 opciones, el botón 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 variación del BoxSizer: el StaticBoxSizer y hablaremos tambien del FlexGridSizer.
Ya estamos muy cerca de comenzar con ejemplos de interfaces mas “reales” y útiles.
Suerte!
Editado:
Ya esta disponible la parte V
Al igual que en el GridSizer, en cada celda del BoxSizer, solo podemos ubicar un solo Widget. Como ya lo había hecho con el GridSizer, en las imágenes les remarque en color rojo, lo que serían las “celdas virtuales” donde se ubican los Widgets.
En este caso, no podemos especificar la cantidad de filas o columnas como hacíamos en el GridSizer; sino que aquí se van creando en forma automática cada vez que agregamos un Widget al BoxSizer. Si agregamos un Widget, y el BoxSizer es Horizontal, este se agrega a la derecha de los Widgets que ya existan en el Sizer; y si el BoxSizer es Vertical, el Widget se agregará abajo de todos los que se encuentren ya contenidos en el Sizer.
Crear un BoxSizer con wxFormBuilder, es tan simple como crear el GridSizer. Si estas siguiendo las distintas partes de este tutorial, ya casi sabes como hacerlo. De todos modos, lo veremos rápidamente 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 botón correspondiente para la creación 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 botón para agregar un "wx.button" al Sizer:
Con estos pasos, ya tenemos el BoxSizer dentro de un Frame, con algunos botones (wx.button) adentro.
Cuando creamos el BoxSizer con wxFormBuilder, la orientación por defecto será “Vertical” (wx.VERTICAL); por lo tanto cada vez que pulses el botón 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 opción wx.HORIZONTAL en la lista desplegable de la propiedad Orient.
El Editor con el BoxSizer (Horizontal) se veria asi:
ACLARACION: Los numeros (1, 2, 3, 4) que vez en las imágenes, fueron agregados por mi, para representar en que orden fueron apareciendo los botones a medida que eran añadidos al Sizer.
Al redimensionar un BoxSizer, este toma el tamaño total disponible de su contenedor (del Frame en este caso), pero los widgets contenidos en cada una de las celdas, mantienen su tamaño original, y quedan “anclados” a la esquina superior izquierda de la celda en la que se encuentran, tal como sucedía con el GridSizer. Por suerte, aquí también 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 versión “Vertical”, quedaría así:
Una propiedad muy importante en este tipo de Sizer es la llamada “Proportion”. Esta característica, 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 sólo 3 botones, nos queda mucho espacio libre. En algunas circunstancias puede ser que es lo que queramos, pero también podría darse el caso en que deseamos otro comportamiento.
Por dar un ejemplo, podríamos querer que el último botón 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 tomarán su tamaño por defecto.
Si establecemos la propiedad “Proportion” de un solo widget en “1”, este ocupara el 100% del espacio disponible que quede dentro del sizer. Si establecemos la propiedad “proportion” de dos widget en “1” dentro del mismo BoxSizer, significa que cada uno ocupara el 50% de lugar libre, y asi podemos ir combinando distintos valores, por ej: un widget en “1”, otro en “2”, otro en “3”, etc.. En definitiva, esta propiedad especifica como se distribuye el espacio libre del Sizer. Cuanto mayor sea el valor de la propiedad “proportion” de un widget, mas espacio ocupara este. Veamos el caso en que el ultimo botón ocupe el total del espacio libre:
Para lograr el comportamiento que ves en la imagen, tienes dos maneras.1- Seleccionar el último botón en el Editor de wxFormBuilder, ir al panel de propiedades, y establecer el valor de Proportion en “1”.
2- Seleccionar el último botón en el Editor de wxFormBuilder y pulsar el botón “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 también la propiedad “Proportion” del segundo botón a “1”, el espacio libre se repartiría dando un 50% a cada widget. El ejemplo se vería así:
Si también establecemos la propiedad“Proportion” del primer botón a "1", el espacio libre quedaría dividido equitativamente, dándole a cada uno de los widgets, la misma cantidad de espacio. En este caso, cada botón tendrá un 1/3 del espacio total del sizer:
Veamos un ejemplo donde el primer botón 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 botón (proportion="0") tiene su tamaño por defecto, el segundo botón (proportion="1") ocupa 1/3 del espacio libre que quedaria en el Sizer y el tercer botón (proportion="3") ocupa 2/3 del espacio libre.Esta propiedad suele ser un tanto difícil de entender al principio, pero realmente no es tan compleja como parece. Sólo es cuestión de hacer unas cuantas pruebas, para ir viendo que resultado se obtienen al variar su valor.
En las ultimas imágenes, siempre vimos BoxSizer's verticales, pero lo dicho vale también si la orientación es horizontal:
En esta imagen vemos un BoxSizer con orientación Horizontal. Los dos primeros botones tienen su propiedad “Proportion” establecida en “0”, y el último en “1”; es por eso que el ultimo botón ocupa todo el espacio que quedaría libre dentro del Sizer.IMPORTANTE:
Una diferencia importante, referida al espacio libre en un BoxSizer, es que si este tiene una orientacion Vertical, el espacio libre se encuentra abajo de todo, y si la orientacion es Horizontal, el espacio libre se encuentra a la derecha.
Entendiendo mejor wxEXPAND y Proportion
Es muy importante entender como funcionan estas dos caracteristicas dependiendo de si el BoxSizer es Vertical u Horizontal.Si el BoxSizer es VERTICAL:
1- El Flag wx.EXPAND expande el widget para que ocupe el ancho total del Sizer, pero no afecta la altura del widget:
En la imagen el primer botón tiene “proportion” en “0” y NO esta activo el Flag wx.EXPAND. El segundo botón también tiene “proportion” en “0”, pero SI tiene activado el Flag wx.EXPAND. Se puede observar claramente que el segundo botón se expandió a lo ancho, pero el alto esta igual que en el primer botón.
2- La propiedad “Proportion” modifica al widget en su altura, pero no afecta la el ancho del widget:
En esta imagen, el primer botón tiene “proportion” en “0” y NO esta activo el Flag wx.EXPAND. El segundo botón tiene “proportion” en “1”, y tampoco tiene activado el Flag wx.EXPAND. Se puede ver que el segundo botón se expandió a lo alto, pero el ancho es el mismo que en el primer botón.
3- Si activamos wx.EXPAND y establecemos el valor de la propiedad Proportion en un valor distinto de “0”, logramos que el widget crezca en ambos sentidos (Alto y ancho):
Podemos ver en la imagen, que al combinar las 2 opciones, el botón 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 orientación 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 botón tiene la propiedad “proportion” en “0” y NO esta activado el Flag wx.EXPAND. El segundo botón también tiene “proportion” en “0”, pero SI tiene activado el Flag wx.EXPAND. Se puede observar claramente que el segundo botón se expandió en el alto, pero su ancho esta igual que en el primer botón.
2- La propiedad Proportion modifica al widget en su ancho, pero no afecta el alto del widget:
3- Si activamos el Flag wx.EXPAND, y establecemos el valor de la propiedad Proportion en un valor distinto de “0”, logramos que el widget crezca en ambos sentidos (Alto y ancho):
En la imagen podemos ver que combinando las 2 opciones, el botón 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 variación del BoxSizer: el StaticBoxSizer y hablaremos tambien del FlexGridSizer.
Ya estamos muy cerca de comenzar con ejemplos de interfaces mas “reales” y útiles.
Suerte!
Editado:
Ya esta disponible la parte V
0 comments
Publicar un comentario