Organización de widgets en wxPython (Parte I)

Introducción

A la hora de crear una aplicación que posea una interface gráfica basada en wxPython, disponemos de los denominados widgets. Los widgets son un conjunto de controles, que tenemos a disposición 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, según las necesidades que tengamos en cada aplicación que desarrollemos.
La organización de los widgets, la podemos hacer de forma estática o dinámica.

Organización estática

En la organización estática, la idea es especificar para cada uno de los widgets, una posición y un tamaño 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 botón 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 aplicación y la corremos sobre Ubuntu (por ejemplo), como podrán 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 veíamos en Windows, y tal vez el texto no quepa en los 700px de ancho del botón, o en los 35px de alto y se vea incompleto.
Otro inconveniente, es que cuando fijamos el tamaño y la posición de los widgets, lo hacemos para un tamaño de ventana concreto, y si la redimensionamos, la disposición de los controles seguirá estática, o sea: los controles no se adaptan al cambiar el tamaño de la ventana.
Para salvar estos problemas, es que existe otra forma de organizar los widgets, que es mucho mas flexible, y se denomina: organización dinámica.

Organización dinámica

A diferencia de lo que ocurre en la organización estática, aquí los widgets se organizan en base a proporciones. Con este método, no le diremos a los widgets su posición y tamaño en forma absoluta, sino que estas propiedades estarán determinadas por un algoritmo.
Podríamos 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 automática.
Para lograr este dinamismo, los widgets son organizados dentro de widgets especiales denominados Sizers.

¿Que son los Sizers?

Los sizers son un tipo especial de widget, que permiten contener a otros widgets en su interior. Los sizers permiten a su vez contener a otros sizers, con lo cual nos permite crear interfaces muy elaboradas y donde el limite es nuestra imaginación. 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 organización dinámica distinto, de modo tal, que según en cual de ellos ubiquemos nuestros widgets, sera como estos aparecerán dentro de nuestra interface. En el resto de este articulo, describiremos las características 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 continuación podrán ver una serie de capturas de pantalla, con el fin de tener una idea inicial de como funciona cada uno de los sizers. En todos los sizers se encuentran los mismos widgets, y el orden en que se agregaron los widgets a cada sizer fue el siguiente:

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

Los widgets en un GridSize:

Los widgets en un BoxSizer (Vertical):


Los widgets en un BoxSizer (Horizontal):


Los widgets en un StaticBoxSizer (Vertical):


Los widgets en un StaticBoxSizer (Horizontal):


Los widgets en un FlexGridSizer:


Los widgets en un GridBagSizer:


Como podemos apreciar en las capturas anteriores, según en que sizer agreguemos nuestros widgets, será la organización 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 características en común y cuales las particularidades de cada uno de los sizers, para así después comenzar a combinarlos y crear finalmente algunas interfaces de prueba con distinto grado de complejidad.

Hasta la proxima!

Editado:
Ya esta disponible la parte II