wxPython: Diseñar un mantenimiento con FoldPanelBar y wxFormBuilder

Hola. En este artículo vamos a ver como diseñar un mantenimiento sofisticado en wxPython, con la ayuda del componente de wxPython, el FoldPanelBar, y el diseñador wxFormBuilder.

¿Qué es un FoldPanelBar? Es un conjunto de paneles colapsables, para presentar la información en un Frame de manera parcial, activando y desactivando paneles colapsables. Es lo más parecido a wx.CollapsiblePane, pero en vez de un panel puede haber varios. Tenéis un ejemplo completo en el wxPython 2.8 Docs Demos and Tools, que se puede obtener de http://www.wxpython.org/download.php#stable.

Como podemos ver este componente está dentro de un SplitterWindow, que es un Frame que se puede dividir en zonas, tal como se ve en la imagen. La cuestión es hacer un mantenimiento de datos, que utilice dicho componente de paneles colapsables. El diseño del FoldPanelBar se hará en base al código que está disponible en la documentación de wxPython. Lo único que nos falta es diseñar el contenido de los paneles colapsables. Para ello vamos a utilizar wxFormBuilder. ¿Cómo? Pues diseñando cada panel según los datos que queremos que aparezcan. Esto lo podemos resumir en el siguiente gráfico:

Con wxFormBuilder vamos a construir gráficamente todos los paneles necesarios, cuya sintaxis Python generada se guardará en el fichero design_vista_usuarios.py. En el fichero vista_usuarios.py crearemos una instancia del componente FoldPanelBar e importaremos los paneles creados que están en el fichero design_vista_usuarios.py. Una vez realizado esto, simplemente incluiremos los paneles en su lugar correspondiente dentro del FoldPanelBar, ...y ¡listo!, ya lo tendremos todo hecho.

¿Por qué así? ¿Por qué no crear el FoldPanelBar dentro de design_vista_usuarios.py? Pues por la sencilla razón que si queremos cambiar en wxFormBuilder algo y volvemos a generar el código cabe la posibilidad de eliminar las modificaciones pertinentes. Además, trabajar con herencia es algo fundamental en el diseño de aplicaciones wxPython, ya que nos ahorramos código y tiempo. Es decir, podemos volver a generar el código en el diseñador, sin tocar otras partes que ya están hechas y funcionan.

NOTA: Vamos a crear un mantenimiento de gestión de usuarios de una aplicación genérica. 

wxFormBuilder

Lo primero de todo es crear un proyecto. Después se especifica el fichero que contendrá el código Python generado, y a continuación, ¡¡¡a diseñar!!!.

Como podemos observar en el árbol de objetos (Object Tree), nuestro diseño se basa en un Frame, barra de menú, un menú y una serie de paneles, que contienen cada uno de ellos más widgets (botones, cajas de texto, etc.), todos ellos dispuestos posicionalmente mediante Sizers.

A continuación, diversas capturas de pantalla del diseño de paneles y demás widgets:

NOTA: Los iconos que aparecen en el menú de herramientas los he bajado de http://www.iconspedia.com/.

NOTA2: Como podéis observar en la imagen hay un panel llamado PanelUsuario. A este panel no hay que hacerle caso, es una prueba que realicé y se me ha colado ahí. Disculpadme.

Una vez realizados todos los diseños de los paneles, frames y menús se genera el código Python, guardándose en el fichero especificado en el proyecto, design_vista_usuarios.py.

Heredando el diseño...

Bien, ya tenemos prácticamente terminado nuestro viaje. Únicamente nos falta crear una clase que instancie el componente FoldPanelBar de wxPython, e incluir los paneles generados por wxFormBuilder en su sitio. Aunque al lector le parezca un trabajo en exceso o demasiado enrevesado, en realidad no lo es... es más, es la mejor forma de cambiar código con la mínima repercusión. El contenido del fichero vista_usuarios.py es el siguiente:

import wx
import wx.lib.agw.foldpanelbar as fpb
from design_vista_usuarios import FrameGenerico, BarraMenuGenericoPersona
from design_vista_usuarios import MenuGenerico, PanelUsuarioNick
from design_vista_usuarios import PanelUsuarioLocalizacion, PanelUsuarioExtra
from design_vista_usuarios import PanelUsuarioPersona

class frame_usuario(FrameGenerico):
    def __init__(self):
        # Llamamos al constructor del FrameGenerico.
        FrameGenerico.__init__(self, None )
        # Incluimos título al frame.
        FrameGenerico.SetTitle(self, u"Gestión de usuarios")
        # Creamos una barra de herramientas en el frame.
        self.SetToolBar(BarraMenuGenericoPersona(self))
        # Creamos menú generico.
        menu = MenuGenerico()
        # E incluimos dicho menú en el frame.
        self.SetMenuBar(menu)
        # Creamos un Fold Panel Bar.
        self.panel = fpb.FoldPanelBar(self, wx.ID_ANY, wx.DefaultPosition,
        wx.DefaultSize, agwStyle=fpb.FPB_VERTICAL)
        # Creamos subpanel de datos de identificación del usuario.
        subpanel = self.panel.AddFoldPanel(u"Identificación", collapsed=False)
        # Incluimos panel de nick, foto y contraseña de usuario.
        panel = PanelUsuarioNick(subpanel)
        self.panel.AddFoldPanelWindow(subpanel, panel, fpb.FPB_ALIGN_WIDTH)
        # Creamos subpanel de datos personales del usuario.
        subpanel = self.panel.AddFoldPanel(u"Datos personales", collapsed=True)
        # Incluimos panel de datos personales.
        panel = PanelUsuarioPersona(subpanel)
        self.panel.AddFoldPanelWindow(subpanel, panel, fpb.FPB_ALIGN_WIDTH)
        # Creamos subpanel de datos de localización del usuario.
        subpanel = self.panel.AddFoldPanel(u"Dirección", collapsed=True)
        # Incluimos panel de dirección personal.
        panel = PanelUsuarioLocalizacion(subpanel)
        self.panel.AddFoldPanelWindow(subpanel, panel, fpb.FPB_ALIGN_WIDTH)
        # Creamos subpanel para datos extra.
        subpanel = self.panel.AddFoldPanel(u"Teléfono y correo electrónico",
        collapsed=True)
        # Incluimos panel de teléfonos y correos electrónicos.
        panel = PanelUsuarioExtra(subpanel)
        self.panel.AddFoldPanelWindow(subpanel, panel, fpb.FPB_ALIGN_WIDTH)

# Lanzamos aplicación.
aplicacion = wx.PySimpleApp()
frame_usuario = frame_usuario()
frame_usuario.Show()
aplicacion.MainLoop()

Y listo!!!! Con solo ejecutar python vista_usuarios.py ya tenemos nuestro diseño de mantenimiento de gestión de usuarios genérico. Darse cuenta de las pocas líneas de código que hemos tenido que escribir, ya que la mayoría del trabajo ha sido diseñado en wxFormBuilder, generándose el código Python automáticamente.

wxPython: FoldPanelBar

Como se puede observar hemos creado un mantenimiento bastante "moderno" con un componente, el FoldPanelBar, que nos da bastante juego en la presentación de datos, ofreciendo más por menos. Los paneles, diseñados con wxFormBuilder, contienen todos los widgets mínimos necesarios, dispuestos con sizers (BoxSizer y FlexGridSizer). Trabajar con sizers nos ahorra tiempo... con wxFormBuilder es un juego, os lo aseguro.

Todo el código, tanto del proyecto wxFormBuilder (usuarios.fbp), como los ficheros Python design_vista_usuarios.py (código generado por wxFormBuilder) y vista_usuarios.py los podéis encontrar en un ZIP, FoldPanelBar.zip,en el repositorio de este blog:

https://sites.google.com/site/elviajedelnavegante/codigo

Una pequeña observación... ó dos...

• wxFormBuilder está disponible tanto para Windows, Linux como Mac. La versión con la que yo trabajo de wxFormBuilder es 3.1.70. Os lo digo por si intentáis abrir el fichero del proyecto y os dice que nada de nada. En Ubuntu Lucid la versión disponible es la 3.1.59-beta, con lo que necesitaréis instalaros desde su web la más reciente.

• No está mal recordar que el proyecto de wxFormBuilder genera un fichero .py específico en una ruta determinada. Es decir, si quieres volver a generar el código Python del diseño no estaría mal cambiar la ruta donde tengas tu fichero .py.

Espero pueda serviros. Saludos.