Taller WxFormBuilder

wxFormBuilder, un diseñador para wxPython

Antonio Mario Molina Saorín & Ángel Luis García García

Taller de wxFormBuilder

● Introducción al Universo de Discurso.– wxPython y wxFormBuilder

● wxFormBuilder.– Diseño y creación de interfaces

– Eventos

– Herencia y override

Universo de Discurso

● ¿Qué es wxFormBuilder?

● Breve repaso de wxPython.

– Widgets.

– Sizers.

– Eventos.● Requisitos para seguir este taller:

– Python 2.6.6

– wxPython 2.8.11

– Stani's Python Editor

– wxFormBuilder 3.2

wxFormBuilder, y 1

● Desarrollado por José Antonio Hurtado, Juan Antonio Ortega, Ryan Mulder, Ryan Pusztai, Michal Bliznak.

● Es un entorno WYSISWG para diseño gráfico de interfaces wxWidgets.

● A partir del diseño gráfico de componentes permite generar código C++, XRC y Python (para el framework wxPython).

● Intuitivo y fácil de utilizar.

● Contiene muchos widgets (NoteBook, Splitter, …)

● Utiliza sizers para posicionamiento de widgets.

wxFormBuilder, y 2

● No es un RAD propiamente dicho, como Microsoft Visual Studio.

– Es un diseñador y constructor de interfaces gráficas que utiliza wxPython como framework gráfico para Python.

– Por tanto:● En wxFormBuilder diseñamos y creamos la interfaz

gráfica.● Con una herramienta de edición de código (IDE,

editor) llamamos a las clases generadas por wxFormBuilder.

wxFormBuilder, y 3

● Sitio web: http://wxformbuilder.org/.● ¿Dónde obtener wxFormBuilder?

– Para Linux:● En repositorios.● LaunchPad.● SourceForge.

– Para Windows:● SourceForge.

wxFormBuilder, y 4

● Open Source (licencia GPL).● Alternativas a wxFormBuilder:

– wxGlade.

– BOA Constructor (un RAD al estilo de Microsoft Visual Studio).

– PythonCard.

– wxDesigner.

– VisualWx.

– DialogBlocks.

wxPython, y 1

● wxPython es un framework creado por Robin Dunn, en 1995.

● Es una librería gráfica para Python (al igual que GTK, Qt y Tkinter).

● Permite crear programas con una interfaz gráfica robusta y de gran funcionalidad, fácil y simple.

● Es un wrapper de la plataforma wxWidgets (escrita en C++).

– Una adaptación de la biblioteca wxWidgets para ser usada en Python.

● Es Open Source.

● Multiplataforma. (Windows, Unix, Mac).

● Muy documentado.

● Proyecto muy activo

– Versión estable: 2.8.12.0 (Abril 2011)

– Versión desarrollo: 2.9.1.1 (Octubre 2010)

wxPython, y 2

● Sitio web: http://www.wxpython.org/.

● Además de wxPython se recomienda la instalación de wxPython Demo:

– contiene la documentación de wxWidgets y multitud de ejemplos.

● Material bibliográfico recomendado:

wxPython, y 3

● wxPython sirve para crear aplicaciones gráficas orientadas a eventos.

● Un evento es cualquier interacción entre el agente humano y la aplicación, como puede ser un click de ratón.

– La generación de un evento provoca una respuesta en el sistema.

● A cada evento se le puede asociar un código, mediante un proceso llamado binding.

● El manejador de eventos es el código que se dispara a consecuencia de la generación de un evento.

● Una aplicación wxPython espera a que se generen eventos, asociando los mismos a un código, llamado manejador de eventos.

wxPython, y 4

● Estructura básica de una aplicación wxPython:

# Se importan las wx.

import wx

# Se instancia una aplicación wxPython.

app = wx.PySimpleApp()

# Se instancia el contenedor principal.

ventana_principal = wx.Frame(None, -1)

# Mostramos la ventana.

ventana_principal.Show()

# Esperamos a los eventos.

app.MainLoop()

wxPython, y 5

● Un widget es cualquier componente gráfico con el que interactuar en wxPython (botones, cajas de texto, calendarios, sliders, ...).

– wx.Frame es un widget contenedor, similar a una ventana de Microsoft Windows.

● Los widgets pueden disponerse con wx.Point y wx.Size, mediante coordenadas, dentro de un contenedor. Otra forma de hacerlo es mediante el uso de sizers.

wxPython, y 6

● Un sizer es un mecanismo de disposición de widgets en wxPython.

– Maneja el tamaño y posición de sus widgets, basado en un conjunto de reglas.

– Se asigna a un contenedor (wx.Panel ó wx.Frame).

– Es un algoritmo para disponer o enmarcar un grupo de widgets.

– Los subwidgets que se crean dentro de un contenedor deben de añadirse por separado al sizer.

– El sizer administra la posición de los widgets.

wxPython, y 7

● Un sizer en wxPython es un objeto con el único propósito de administrar el posicionamiento de un conjunto de widgets dentro de un contenedor.

● El sizer es la representación de un algoritmo de posicionamiento de pantalla (no un contenedor ó widget).

● Un sizer es una instancia de la clase wx.Sizer.● Un sizer puede estar incluido en otro sizer.

wxPython, y 8

● Tipos de sizers:– wx.BoxSizer

– wx.FlexGridSizer

– wx.GridSizer

– wx.GridBagSizer

– wx.StaticBoxSizer

● En este taller veremos:– wx.BoxSizer & wx.FlexGridSizer

Herramientas a utilizar

● Python 2.6.6. Es la versión, junto a la 2.7, que funciona sin ningún tipo de problemas en wxPython 2.8.X.

● wxPython 2.8.11.0. Versión estable, junto a la 2.8.12.0.

● Stani's Python Editor. Es uno de los IDE's gratuitos más potentes y livianos, multiplataforma, con completitud, indentación y coloreado de código, además de otras muchas cualidades.

● wxFormBuilder 3.2 Beta. Es la última versión.

Creación de un proyecto, y 1

Creación de un proyecto, y 2

Guardamos el proyecto con Ctrl+S, ó File/Save, ó haciendo click en botón Guardar.

wxFormBuilder: Partes

● wxFormBuilder está compuesto de 4 partes:

– Object TreeObject Tree: El árbol de objetos que compone la interfaz diseñada.

– Component PalleteComponent Pallete: Conjunto de widgets y sizers disponibles para diseñar la interfaz.

– EditorEditor. Se compone de 4 hojas:

● Designer: Diseño gráfico de la interfaz.● C++: Código C++ generado a partir del diseño en el Designer.● Python: Código Python generado a partir del diseño en el

Designer.● XRC: Código XML generado a partir del diseño en el Designer.

– Object PropertiesObject Properties: Propiedades y eventos de los componentes del Designer.

Interfaz 1

Creamos un contenedor wx.Frame.

Interfaz 1

Incluimos dentro del contenedor un wx.BoxSizer.

Interfaz 1

Incluimos un wx.StaticText; cambiamos la propiedad label, y configuramos el sizeritembase, es decir, cómo queremos que se comporte el widget dentro del sizer base (que lo contiene). Para ello activamos bandera wxALIGN_CENTER y aumentamos el borde a 25.

Interfaz 1

Incluimos 3 wx.TextCtrl.

Interfaz 1

¿Cómo redimensionar las 3 cajas de texto? Configurando su posición dentro del sizer base. Para ello hay que activar el flag wx.EXPAND.

Interfaz 1 – Código Python generado

Conforme se va diseñando la interfaz gráfica se va generando el código Python (Editor, pestaña Python). Para crear el fichero Python pulsar F8, o File/Generate Code o click en icono de generar código.

Importando la Interfaz 1

● Una vez creada la interfaz y generado el código Python, creamos el módulo que llamará a dichas clases. En dicho módulo hay que crear una aplicación wxPython, pues wxFormBuilder no lo genera (en contraposición con otros diseñadores, como wxGlade).

● Abrimos Stani's Python Editor.– Creamos un módulo: datos.py

Importando la Interfaz 1

● Creamos el módulo con el siguiente código y ejecutamos:

Ejecutando la Interfaz 1

● Se ha creado una aplicación wxPython, y toma como contenedor principal una instanciación de la clase generada en wxFormBuilder.

● Cosas a tener en cuenta:

– Si se redimensiona el widget contenedor, se redimensionan sus widgets contenidos, automáticamente.

– No se puede pasar de un widget wx.TextCtrl a otro mediante la tecla tabulador (TAB), como cabría esperar.

● ¿Solución? Usar paneles.

Modificando la Interfaz 1

Incluimos un widget wx.Panel dentro del wx.BoxSizer principal.

Modificando la Interfaz 1

Si se incluyen widgets dentro de un contenedor wx.Panel aparece la propiedad de navegación entre widgets a través del tabulador. Todo posicionamiento de widgets se realiza con sizers, por lo que será necesario crear uno dentro del wx.Panel.

Modificando la Interfaz 1

Se pueden mover los widgets wx.TextCtrl y wx.StaticText mediante la técnica de Drag & Drop, capturando y soltando los widgets de un sizer al interior de otro.

Ejecutando de nuevo la Interfaz 1

● Guardamos el proyecto y volvemos a generar el código Python.

● Volvemos a Stani's, y sin cambiar nada (en realidad no es necesario), ejecutamos. Ahora aparece la funcionalidad de navegación entre widgets con la tecla TAB.

– UTILIZAR SIEMPRE PANELES.

Eventos en wxFormBuilder

● Se ha creado la primera interfaz en wxFormBuilder, completamente funcional.

● A partir de este diseño se creará un frame con dos botones (en sentido horizontal) de ACEPTAR y CANCELAR.

● Se crearán los eventos de click en los botones anteriores.

Eventos en wxFormBuilder

Sobre MyFrame1 botón derecho/Paste y creamos una copia de Frame1

Eventos en wxFormBuilder

Eventos en wxFormBuilder

● Renombramos nuevo widget contenedor a MyFrame2, y modificamos algunos atributos.

Eventos en wxFormBuilder

Creamos un sizer horizontal, dentro del sizer principal del contenedor MyFrame2.

Fijarse en la propiedad orient, que la hemos cambiado a wxHORIZONTAL.

Eventos en wxFormBuilder

Creamos 2 wx.Button dentro del nuevo sizer.

Eventos en wxFormBuilder

Vamos a cambiar la posición de los botones ACEPTAR y CANCELAR. Los vamos a justificar a la derecha. Para ello hay que desactivar la bandera wxEXPAND del sizer contenedor de los botones y activar la bandera wxALIGN_RIGHT.

Eventos en wxFormBuilder

Cambiamos los nombres a los botones y creamos los eventos de click en botones ACEPTAR y CANCELAR. En realidad es añadir los nombres de los manejadores de eventos que se lanzarán cuando se den los eventos pertinentes.Hay 2 maneras de crear el nombre del manejador de eventos:

1) Haciendo doble click sobre el evento, y genera de manera automática el nombre del manejador de eventos.

2) Insertando el nombre directamente junto al evento que queremos tratar.

Eventos en wxFormBuilder

Podemos ver el código Python que wxFormBuilder genera automáticamente:

Eventos en wxFormBuilder

Guardamos proyecto y generamos código Python en wxFormBuilder. Volvemos a Stani. Tal como se ha visto hay que hacer override de los manejadores de eventos para darle funcionalidad. Habrá que crear una clase Frame que herede de MyFrame2, y hacer override de los manejadores de eventos.

Conclusiones...

● Conceptos vistos:– Proyecto wxFB.

– Widgets contenedores Frame y Panel.

– Posicionamiento con sizer wx.BoxSizer.

– Eventos.

– Herencia de widgets y override de manejadores de eventos.

Interfaz 2

● Vamos a crear un segundo proyecto, denominado gestion_datos, que generará el fichero Python gestion_datos_vista.py.

● Crearemos paneles como widgets contenedores, para ver la reusabilidad de los mismos.

● Veremos el uso del flag Proportion en un sizer.

Interfaz 2

Se va a diseñar el frontendfrontend de una posible aplicación de gestión, con widgets avanzados, tales como NoteBook, Splitters ó Choices. Se verá el potencial de los sizers como algoritmos de posicionamiento de widgets.

La aplicación consta de un único Frame y 3 paneles. Cada Frame contenedor de la aplicación será la instanciación del Frame generado por wxFB.

Se practicará como pasar estructuras de datos a los componentes gráficos para que muestren información.

Interfaz 2

Los conceptos de esta segunda interfaz son idénticos a la primera, a excepción que se verán nuevos widgets más complejos a la vez que útiles y sofisticados.

El proyecto wxFBwxFB, así como el código PythonPython para llamar a las clases de wxPythonwxPython están en los ficheros adjuntos a este material.

Menús en wxFormBuilder

● Como se puede observar en el Forms del Component Pallete, existen 5 componentes que se pueden instanciar sin necesidad de un contenedor padre, a saber, Panel, Frame, Dialog y los widgets de menús MenuBarMenuBar y ToolBarToolBar.

● Además en el Component Pallete está la pestaña Menu/ToolbarMenu/Toolbar, que contiene toda una colección de widgets para utilizar en menús.

● Un menú se puede crear:

– Dentro de un Frame.

– Como un contenedor, al estilo de Paneles ó Frames (es decir, se crea una clase en el código Python generado).

Menús en wxFormBuilder

Creamos un nuevo proyecto, llamado menus_wx, y el fichero Python a generar será menus_wx_vista.py.

Menús en wxFormBuilder

Diseño de un Frame con un sistema de menú integrado.

Menús en wxFormBuilder

Menús en wxFormBuilder

Menús en wxFormBuilder

Menús en wxFormBuilder

La herramienta del EditorEditor de menú da como resultado el Object Tree de widgets de menú.

Menús en wxFormBuilder

Podemos comprobar las opciones de elementos de menú tipo Radio (excluyentes).

Menús en wxFormBuilder

Y para las opciones de menú de tipo check.

Eventos en menús

Crear eventos de elementos de menú es trivial, tal como se ha visto anteriormente. Únicamente hay que seleccionar el item de menú deseado, e ir a Events (Objects Properties), para ingresar el nombre del manejador de eventos asociado al evento en cuestión, en este caso, OnMenuSelection.

NOTA:NOTA: Crear eventos OnMenuSelection para elementos de menú de Nuevo y Abrir (Archivo).

Menús en wxFormBuilder

En el código generado por wxFormBuilder encontramos los identificadores de los elementos de menú. Al crear un Tool dentro de un ToolBar hay que especificar el IDID del elemento del menú creado, para enlazar el manejador de eventos.

Menús en wxFormBuilder

Creamos un ToolBar, y dentro de él, un widget Tool (todo esto seleccionado de la pestaña Menu/ToolbarMenu/Toolbar del Component Pallete). Fijarse en el atributo id del widget Tool, que se ha cambiado por ID_ABRIR, de modo que cuando se haga click en él se lanzará el manejador de eventos asociado al elemento de menú Abrir. Además se ha creado un StatusBar, enlazando el atributo statusbar del widget Tool al mismo (automáticamente), con el texto “Abrir un documento”. Cuando se pase el ratón por encima del widget Tool aparecerá dicho texto en el widget StatusBar.

Menús en wxFormBuilder

Volvemos a Stani, y creamos el módulo menus_wx.py, con el siguiente contenido:

Ejecutamos y vemos la solución esperada...

Conclusiones...

● Hemos visto como crear menús en contenedores de tipo wx.Frame.

– Menús.

– Elementos de menús (normal, checked, radio).

– Submenús.

– Eventos en menús.

– Barra de herramientas (ToolBar).

– Elementos de la barra de herramientas (Tool).

● Asociar eventos de Tool a elementos de menús.

– Llamar a las clases generadas por wxFormBuilder desde un editor, en este caso, Stani's Python Editor, y hacer override en algunos manejadores de eventos.

Componente Custom Control en wxFB

● De lo que se trata es de generar código Python para un widget que todavía no está soportado en wxFormBuilder.

● Vamos a crear un nuevo proyecto, llamado cc_proyecto, que generará cc_proyecto_vista.py.

Componente Custom Control en wxFB

Para ver cómo funciona este widget vamos a crear un proyecto en wxFormBuilder, en donde insertaremos un widget LEDNumberCtrlLEDNumberCtrl, el cual no está soportado actualmente (en la versión 3.2) por wxFormBuilder.

Componente Custom Control en wxFB

Diseñamos un FrameFrame que contendrá un PanelPanel, que a su vez contendrá un CustomControlCustomControl.

NOTA: Darse cuenta que hemos renombrado todos los widgets, en especial el Custom Control, ahora LedControl.

Componente Custom Control en wxFB

Para generar código Python de estas propiedades solamente nos interesan 2, a saber: name (el nombre del widget, que se utiliza para añadirlo al sizer) y construction (la llamada para instanciar la clase y crear el objeto cuyo nombre ha sido declarado en name, y que tiene que ser atributo de la clase). Por tanto vamos a darle a nuestro nuevo widget como name LedControl. Y el construction será: self.LedControl = wx.gizmo.LedNumberCtrl(self, -1). Darse cuenta que el LedControl tiene que ser atributo de la clase generada (es por ello lo del self).

Modificamos las propiedades del CustomControl LedControl:

Componente Custom Control en wxFB

Configuración final de las propiedades del LedControl:

Custom Control en Stani

Creamos el módulo cc_proyecto.py en Stani, con el siguiente código:

Custom Control en Stani

¡CONSEGUIDO!¡CONSEGUIDO!

Conclusiones sobre el taller de wxFB

● Se ha introducido a la herramienta de diseño de interfaces gráficas wxFormBuilder, en especial, para la generación de código Python a partir del framework wxPython.

● Se han visto los conceptos de widget, evento y sizer.

● Se ha probado la herencia de las clases generadas por wxFB y el override de métodos (manejadores de eventos).

● Se han diseñado menús de Frames.

● Se ha comprobado el widget Custom Control.

Taller de wxFB – Caldum 2011 Universidad de Murcia

Muchas gracias a todos.

Antonio Mario Molina SaorínÁngel Luis García García