wxformbuilder, un diseñador para wxpython Antonio Mario Molina Saorín & Ángel Luis García García

Transcripción

1 wxformbuilder, un diseñador para wxpython Antonio Mario Molina Saorín & Ángel Luis García García

2 Taller de wxformbuilder Introducción al Universo de Discurso. wxpython y wxformbuilder wxformbuilder. Diseño y creación de interfaces Eventos Herencia y override

3 Universo de Discurso Qué es wxformbuilder? Breve repaso de wxpython. Widgets. Sizers. Eventos. Requisitos para seguir este taller: Python wxpython Stani's Python Editor wxformbuilder 3.2

4 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.

5 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.

6 wxformbuilder, y 3 Sitio web: Dónde obtener wxformbuilder? Para Linux: En repositorios. LaunchPad. SourceForge. Para Windows: SourceForge.

7 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.

8 wxpython, y 1 wxpython es un framework creado por Robin Dunn, en 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: (Abril 2011) Versión desarrollo: (Octubre 2010)

9 wxpython, y 2 Sitio web: 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:

10 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.

11 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()

12 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.

13 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.

14 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.

15 wxpython, y 8 Tipos de sizers: wx.boxsizer wx.flexgridsizer wx.gridsizer wx.gridbagsizer wx.staticboxsizer En este taller veremos: wx.boxsizer & wx.flexgridsizer

16 Herramientas a utilizar Python Es la versión, junto a la 2.7, que funciona sin ningún tipo de problemas en wxpython 2.8.X. wxpython Versión estable, junto a la 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.

17

18 Creación de un proyecto, y 1

19 Creación de un proyecto, y 2 Guardamos el proyecto con Ctrl+S, ó File/Save, ó haciendo click en botón Guardar.

20 wxformbuilder: Partes wxformbuilder está compuesto de 4 partes: Object Tree: Tree El árbol de objetos que compone la interfaz diseñada. Component Pallete: Pallete Conjunto de widgets y sizers disponibles para diseñar la interfaz. Editor. Editor 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 Properties: Properties Propiedades y eventos de los componentes del Designer.

21 Interfaz 1 Creamos un contenedor wx.frame.

22 Interfaz 1 Incluimos dentro del contenedor un wx.boxsizer.

23 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.

24 Interfaz 1 Incluimos 3 wx.textctrl.

25 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.

26 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.

27 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

28 Importando la Interfaz 1 Creamos el módulo con el siguiente código y ejecutamos:

29 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.

30 Modificando la Interfaz 1 Incluimos un widget wx.panel dentro del wx.boxsizer principal.

31 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.

32 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.

33 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.

34 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.

35 Eventos en wxformbuilder Sobre MyFrame1 botón derecho/paste y creamos una copia de Frame1

36 Eventos en wxformbuilder

37 Eventos en wxformbuilder Renombramos nuevo widget contenedor a MyFrame2, y modificamos algunos atributos.

38 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.

39 Eventos en wxformbuilder Creamos 2 wx.button dentro del nuevo sizer.

40 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.

41 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.

42 Eventos en wxformbuilder Podemos ver el código Python que wxformbuilder genera automáticamente:

43 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.

44 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.

45 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.

46 Interfaz 2 Se va a diseñar el frontend 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.

47 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 wxfb, wxfb así como el código Python para llamar a las clases de wxpython están en los ficheros adjuntos a este material.

48 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 MenuBar y ToolBar. ToolBar Además en el Component Pallete está la pestaña Menu/Toolbar, Menu/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).

49 Menús en wxformbuilder Creamos un nuevo proyecto, llamado menus_wx, y el fichero Python a generar será menus_wx_vista.py.

50 Menús en wxformbuilder Diseño de un Frame con un sistema de menú integrado.

51 Menús en wxformbuilder

52 Menús en wxformbuilder

53 Menús en wxformbuilder

54 Menús en wxformbuilder La herramienta del Editor de menú da como resultado el Object Tree de widgets de menú.

55 Menús en wxformbuilder Podemos comprobar las opciones de elementos de menú tipo Radio (excluyentes).

56 Menús en wxformbuilder Y para las opciones de menú de tipo check.

57 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: Crear eventos OnMenuSelection para elementos de menú de Nuevo y Abrir (Archivo).

58 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 ID del elemento del menú creado, para enlazar el manejador de eventos.

59 Menús en wxformbuilder Creamos un ToolBar, y dentro de él, un widget Tool (todo esto seleccionado de la pestaña Menu/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.

60 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...

61 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.

62 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.

63 Componente Custom Control en wxfb Para ver cómo funciona este widget vamos a crear un proyecto en wxformbuilder, en donde insertaremos un widget LEDNumberCtrl, LEDNumberCtrl el cual no está soportado actualmente (en la versión 3.2) por wxformbuilder.

64 Componente Custom Control en wxfb Diseñamos un Frame que contendrá un Panel, Panel que a su vez contendrá un CustomControl. CustomControl NOTA: Darse cuenta que hemos renombrado todos los widgets, en especial el Custom Control, ahora LedControl.

65 Componente Custom Control en wxfb Modificamos las propiedades del CustomControl LedControl: 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).

66 Componente Custom Control en wxfb Configuración final de las propiedades del LedControl:

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

68 Custom Control en Stani CONSEGUIDO!

69 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.

70 Taller de wxfb Caldum 2011 Universidad de Murcia Muchas gracias a todos. Antonio Mario Molina Saorín Ángel Luis García García