Si has llegado aquí mediante un buscador o por simple casualidad, te cuento que estas en la quinta parte de un tutorial que empieza AQUI.
Como les había prometido en la ultima entrega, empezaremos a combinar todo lo visto hasta el momento. La idea será tomar como referencia ventanas de “programas reales” y copiar su apariencia. Obviamente, comenzaremos con interfaces simples, y luego iremos viendo algunas con un mayor grado de complejidad. Como primer proyecto, elegí la ventana “Acerca de” del programa gedit.
La ventana “Acerca de” de gedit
Una de las cosas más difíciles al comenzar a diseñar una interface gráfica que utilice organización dinámica, es determinar que Sizers usar para lograr la distribución 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 diseño de manera distinta a la que yo vaya presentando, por lo que seria interesante que si esto sucede, compartas con todos tu idea a través de los comentarios.
Por si todavía no imaginas que Sizers podemos utilizar para crear la ventana, voy a mostrarte la misma captura de pantalla de antes, pero con algunas pistas:
Como ves, en la imagen remarque algunas celdas en color rojo. Prestando atención a estas pistas, podemos deducir que esta ventana la podemos lograr utilizando dos Sizers: BoxSizer (Vertical) y un GridSizer. Si todavía “no lo ves”, no te preocupes, y sigue leyendo.
Empecemos a trabajar con wxFormBuilder.
Paso 1
Hasta ahora, cuando empezábamos cualquier ejemplo, creábamos 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 estándar.
Paso 2:
Creamos un BoxSizer (Vertical), para luego agregar uno a uno los widget que necesitamos en cada fila de éste.
Paso 3:
Cuando les hable del BoxSixer (Vertical), vimos que cada widget que agregábamos, 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ó, aún no especificamos que imagen se debe mostrar. Para especificar la imagen que queremos mostrar en el StaticBitmap; desplegamos la propiedad bitmap en el panel de propiedades, y luego definimos la ruta a la imagen en file_path:
Paso 4:
Debajo del logo, se encuentra el texto con la versión del programa (gedit 2.24.2). Para mostrar un texto simple (como en este caso) disponemos del StaticText. Para crearlo simplemente pulsamos sobre el botón "wxStaticText" en la solapa “Common” de la paleta de componentes de wxFormBuilder:
Ahora que ya creamos el StaticText debajo del logo, cambiaremos el texto “MyLabel” por el de la versión de gedit. El texto que se muestra en un StaticSizer, esta definido en la propiedad label, por lo que sólo debemos escribir el texto “gedit 2.24.2” en esta propiedad:
Con esto ya tenemos el texto debajo del logo, pero nos falta que aparezca centrado como en la ventana original; así que activamos el Flag wxALIGN_CENTER, para centrar el StaticText. Para activar este Flag, tenemos un botón en la barra de herramientas que nos agiliza el trabajo:
Para terminar este paso, cambiaremos la propiedad font del StaticText para que la fuente se parezca mas a la original. Sobre mi plataforma (Ubuntu 8.10 – Intrepid Ibex) para que el tamaño de la fuente se aproxime al de la ventana original, debe tener 16px y estar en negrita, así que debo poner “16” en "Point Size" y seleccionar “Bold” en “Weight”.
Paso 5:
En este paso, debemos agregar un nuevo StaticText para que contenga el texto de la descripción del programa (“gedit es un editor de texto pequeño y ...”). Lo creamos de la misma forma que en el paso anterior, y luego establecemos el texto en la propiedad label:
Como se ve en la imagen, el StaticText crece para adaptarse al texto que muestra, pero en la ventana original que estamos “copiando”, el texto ocupa dos lineas y no una:
Para que un StaticText no se ensanche mas de lo que queremos, debemos especificar el ancho en la propiedad width. En nuestro ejemplo, haremos que tenga un ancho de 235px.
Como ves, ahora el texto ocupa dos lineas, así que ya podemos activar el Flag wxALIGN_CENTER, de modo que el StaticText quede centrado:
Si bien ya tenemos el StaticText centrado (fíjate el recuadro rojo), lo que aún no esta centrado, es el texto en si. Para cambiar la alineación del texto dentro del StaticText usamos la propiedad Style con el valor wxALIGN_CENTRE:
Paso 6:
Agregamos otro StaticText, para poner las tres lineas de Copyright.
En este StaticText debemos escribir 3 lineas de texto, pero a diferencia del caso anterior, cada linea debe comenzar con un Copyright distinto, independientemente del ancho del StaticText, por lo que no podemos usar simplemente la propiedad width (como en el caso anterior) ya que si por ejemplo cambiamos el tamaño del texto, seguramente no quedaría un Copyright abajo del otro, sino que probablemente alguno aparecería al lado del otro. En este caso, para lograr el corte de las lineas, utilizamos la secuencia de escape “\n” (sin comillas). Sólo debemos escribir “\n” donde queremos que se corte la línea. 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 botón que se encuentra al final de la caja de texto de la propiedad label y te aparecerá un cuadro de dialogo donde puedes escribir directamente el texto y pulsar Enter donde sea necesario, luego, al cerrar el cuadro de dialogo, wxFormBuilder hará el reemplazo por ti.
Aquí también debemos centrar el texto estableciendo el valor wxALIGN_CENTRE en la propiedad Style. Luego de centrar el texto, el Editor se vera así :
Si miras con atención, puedes ver que los dos primeros Copyright's hicieron que el Dialog se haga mas ancho de lo que era, y ahora podemos notar que no hemos centrado el logo de gedit. Recuerda que para centrarlo, solo debemos seleccionar el StaticBitmap que lo contiene, y activar el Flag wx.ALIGN_CENTER:
Paso 7:
Aqui agregaremos el enlace hacia el sitio del programa. Para crear el enlace usamos el widget de la clase wxHyperlinkCtrl. Agregarlo es tan simple como ir a la solapa “Additional” de la paleta de componentes, y pulsar el botón correspondiente:
Una vez creado, lo centramos y quedaría como se ve a continuación:
Al igual que en el StaticText, para cambiar el texto de un HyperlinkCtrl, usamos la propiedad label. En este caso, el valor de la propiedad label será “http://www.gedit.com”, y también pondremos este mismo valor en la propiedad url para que apunte a esta dirección:
Paso 8:
Por último, debemos agregar los botones de “Créditos” y “Cerrar”. Al principio yo les dije que íbamos a usar dos Sizers: BoxSizer (Vertical) y GridSizer. Hasta este momento sólo hemos usado un BoxSizer (Vertical), pero voy a cumplir con lo que te dije, y usaremos el GridSizer.Si en este punto simplemente agregáramos dos botones al BoxSizer (Vertical), estos quedarían uno debajo del otro (por la naturaleza misma del Sizer). Para salvar esto, lo que haremos sera agregar un GridSizer con una fila y dos columnas, y le agregamos un botón a cada una de las celdas:
Aquí vemos como podemos ir combinando los Sizers para obtener la organización que necesitamos. En este caso, el widget de la ultima fila del BoxSizer (Vertical), es un GridSizer con dos botones.
Ahora editamos los textos que aparecen en los botones mediante la propiedad label y por último alineamos el botón “Cerrar” a la derecha de su celda.
Por último les dejo una captura de como les debería quedar el panel "Object Tree", donde vemos claramente la jerarquía de los distintos widgets.
Conclusión:
En esta parte del tutorial, creo que se habrán aclarado muchas de las dudas que tal ves tenías (y seguramente te surgieron otras tantas).La idea de este tutorial se enfoca mas en la organización de los widgets que en la apariencia de los mismos, es por esto que no he hablado demasiado sobre las particularidades de cada widget que usamos (wxStaticText, wxHyperlinkCtrl, etc.). Si les interesa, luego puedo escribir otro tutorial sobre los distintos widgets que podemos usar con wxPython, y así ver mas en detalle a cada uno de ellos.
En la próxima parte, continuaremos con otras interfaces mas elaboradas.
Nos vemos!
Editado:
Ya esta disponible la parte VIII
0 comments
Publicar un comentario