Cargando



Desarrollo de aplicaciones con Python y wxFormBuilder

wxFormBuilder es una aplicación de diseño de interfaces gráficas utilizando herramientas GUI wxPython, que permite la creación de aplicaciones multiplataforma. En este tutorial aprenderás con ejemplos su uso.


ene 08 2016 21:10
Profesional
ene 10 2016 12:59

El lenguaje de programación Python permite adoptar diversas librerías y framework para desarrollar interfaces gráficas. Algunas son Tinker, Wxwidget y QT, plataforma sobre la que vimos los tutoriales:

 

python.jpg

 

En este tutorial veremos como desarrollar interfaces gráficas con WxWidget y la herramienta de diseño wxFormBuilder. wxFormBuilder es una aplicación de diseño de interfaces gráficas de usuario, es libre y de código abierto permite utilizar la librerías wxWidgets, es muy utilizado para el desarrollo de aplicaciones multiplataforma.

 

wxFormBuilder es una herramienta de desarrollo visual, La gran ventaja es que puede generar código en C ++, Python, PHP, Lua y XRC mientras se va diseñando. Funciona en Windows, Linux y Mac Os.

 

Para estre tutorial haremos una instalación en Linux y en una máquina virtual con VirtualBox y Windows 7, para poder probar que podemos desarrollar la aplicación multiplataforma, de igual forma podríamos instalar en Linux y tener una maquina virtual con Linux.

 

Necesitaremos instalar las siguiente herramientas:

 

Python
Es un lenguaje de programación de alto nivel, el principal objetivo de python es facilitar la legibilidad del código y permite a los programadores desarrollar aplicaciones en menos líneas de código si comparamos con lenguajes de programación como C++, C# o Java.

 

Una de las ventajas de Python es que soporta múltiples paradigmas de programación, como ser orientación a objetos, programación imperativa y funcional o procedimiento. Podemos descargar Python desde la web oficial.

 

wxPython
Es multiplataforma, puede ejecutarse en Windows, Linux y Mac OS sin modificaciones. El resultado del diseño de interfaces es un aspecto nativo de la aplicación según en el sistema operativo que se ejecuta.

 

Es una conjunto de librerías que permiten portar y utilizar la biblioteca gráfica wxWidgets utilizando el lenguaje de programación Python. La biblioteca wxWidgets se caracteriza por ser multiplataforma.

 

Se puede descargar desde la web oficial de WxPython, en Linux viene en los repositorios o se puede añadir

 

wxpython.jpg

 

wxFormBuilder
Es un IDE gratuito, multiplataforma y de código abierto. Se utiliza para diseñar interfaces gráficas GUI wxWidgets o en este caso wxPython, permite la creación de aplicaciones multiplataforma. Así como Qt Designer, la herramienta wxFormBuilder se utiliza para el desarrollo visual.

 

wxFormbuilder permite generar código en C ++, Python, PHP, Lua y el código XRC. El codigo se va creando a media que vamos diseñando.

 

Lo podemos descargar desde su pagina oficial, debemos instalar una versión superior a la 3.4 que es la que soportar todos los lenguajes mencionados anteriormente.

 

Ejemplos de aplicaciones con wxPython y wxFormBuilder

En este tutorial desarrollaremos la aplicación bajo linux y luego la ejecutaremos también en Windows. En Linux python ya viene instalado por lo que instalaremos wxPython y wxFormbuilder, desde una ventana de terminal escribimos los siguientes comando:
sudo add-apt-repository -y ppa:wxformbuilder/wxwidgets
sudo apt-get update
sudo apt-get install libwxgtk3.0-0 libwxgtk-media3.0-0

sudo add-apt-repository -y ppa:wxformbuilder/release
sudo apt-get update
sudo apt-get install wxformbuilder
Luego debemos añadir wxpython como variable de entorno para poder utilizarlo desde cualquier directorio:
export PYTHONPATH="$PYTHONPATH":/usr/lib/python2.7/dist-packages/wx-2.8-gtk2-unicode/
A continuación abrimos wxFormbuilder desde el menú principal:

 

wxFormBuilder presenta un escritorio con una columna izquierda donde se ubicaran el proyecto o pantalla y componentes que vayamos utilizando, en el centro la pestaña de diseño y una pestaña por cada lenguaje, a la derecha tendremos las propiedades tanto del proyecto como de los componentes que utilicemos.

 

panta01.jpg

 

Lo primero que deberemos configurar sera el proyecto, para ello hacemos un clic en el nombre del proyecto y luego vamos a las propiedades donde asignaremos un nombre y el lenguaje que utilizaremos.

 

panta02.jpg

 

A continuación vamos a la pestaña Form y añadimos un formulario que sera el contenedor de la pantalla.

 

panta03.jpg

 

Luego desde las propiedades podremos modificar el nombre del formulario al que le asignamos MiForm y el titulo que será Ejemplo01- Tutorial, ademas podremos modificar muchas opciones como el color de fondo, el tamaño, el tipo de ventana y muchos mas.

 

Podemos ir a la pestaña Python y ver como se va generando el código.

 

panta04.jpg

 

Para generar el código en un archivo, primero deberemos guardar el proyecto desde el menú File > Save As, y lo guardamos como ejemplo01.fbp

 

panta05.jpg

 

A continuación vamos a la opción del menú File > Generate Code, luego vamos al directorio donde guardamos el archivo del proyecto y veremos el archivo noname.py

 

panta06.jpg

 

Este archivo noname.py contiene el código Python generado con el diseño de la interfaz, podemos renombrar el archivo a ejemplo01.py

 

A continuación debemos añadir el código para que se muestre este diseño cuando se ejecuta la aplicación.Para ello abrimos el archivo y añadimos el siguiente código debajo quedándonos de la siguiente manera:

import wx
import wx.xrc

class MiForm ( wx.Frame ):

def __init__( self, parent ):
  wx.Frame.__init__ ( self, parent, id = wx.ID_ANY, title = u"Ejemplo01 - Tutorial ", pos = wx.DefaultPosition, size = wx.Size( 500,300 ), style = wx.DEFAULT_FRAME_STYLE|wx.TAB_TRAVERSAL )
 
  self.SetSizeHintsSz( wx.DefaultSize, wx.DefaultSize )
 

  self.Centre( wx.BOTH )

def __del__( self ):
  Pass

#Fin código del diseño de Formulario

## Código que muestra la aplicación al ejecutarse
app = wx.App(False)
frame = MiForm (None)
frame.Show(True)
app.MainLoop()
Luego desde una ventana de terminal vamos al directorio de la aplicación y ejecutamos python ejemplo01.py

 

panta07.jpg

 

A continuación vamos a wxFormbuilder y comenzaremos a diseñar la pantalla. Los componentes se distribuyen en la pantalla mediante Layout y grillas, en este caso seleccionaremos un wxBoxSizer vertical, lo que hace es dividir la pantalla en tres filas, donde añadiremos los componentes.

 

panta08.jpg

 

A continuación añadiremos un menú, para ello nos vamos a la pestaña Menu/Toolbar, primer añadiremos el componente MenuBar que sera el menú principal. Luego iremos añadiendo por jerarquía un Menutitem Abrir, un separador y otro Menuitem con el nombre Salir.

 

panta09.jpg

 

Podemos ver que los objetos se van acomodando según una jerarquía donde el de más arriba abarca a los de mas abajo, podemos intercambiarlos de posición con solo arrastrar. Luego iremos a la pestaña Data y añadiremos un control wxGrid para mostrar una grilla de datos, para ellos nos situamos en el Layout asi el próximo control se ubicara debajo del menú.

 

panta010.jpg

 

Generamos el nuevo código y se modificará el archivo noname.py, podemos renombrarlo como ejemplo02.py, añadiendo los cambio realizados. Luego ejecutamos desde una ventana de terminal mediante el comando:

python ejemplo02.py

panta011.jpg

 

A continuación vamos a wxFormbuilder y añadiremos una barra separadora debajo de la grilla, desde la pestaña Common y seleccionamos el componente wxStaticLine.

 

panta012.jpg

 

A continuación crearemos campos como para hacer un maestro detalle, para ello nos situaremos en el Layout y añadiremos un componente.

 

panta013.jpg

 

Además de diseñar interfaces gráficas podemos añadir eventos, por ejemplo hacemos clic en el botón grabar y vamos a la pestaña Events, buscamos el tipo de evento, en este caso OnLeftDown, clic del botón izquierdo del mouse presionado.

 

panta014.jpg

 

En este evento escribimos el nombre de la función que invocará el evento, al generar el código solo nos creara la función luego deberemos escribir el código con la funcionalidad. Cuando hayamos generado el archivo añadiremos al final el siguiente código completo:

import wx
import wx.xrc
import wx.grid

###########################################################################
## Class MyFrame1
###########################################################################

class MiForm ( wx.Frame ):

def __init__( self, parent ):
  wx.Frame.__init__ ( self, parent, id = wx.ID_ANY, title = wx.EmptyString, pos = wx.DefaultPosition, size = wx.Size( 417,350 ), style = wx.DEFAULT_FRAME_STYLE|wx.TAB_TRAVERSAL )
 
  self.SetSizeHintsSz( wx.DefaultSize, wx.DefaultSize )
 
  bSizer1 = wx.BoxSizer( wx.VERTICAL )
 
  self.m_grid1 = wx.grid.Grid( self, wx.ID_ANY, wx.DefaultPosition, wx.DefaultSize, 0 )
 
  # Grid
  self.m_grid1.CreateGrid( 4, 4 )
  self.m_grid1.EnableEditing( True )
  self.m_grid1.EnableGridLines( True )
  self.m_grid1.EnableDragGridSize( False )
  self.m_grid1.SetMargins( 0, 0 )

  # Columns
  self.m_grid1.EnableDragColMove( False )
  self.m_grid1.EnableDragColSize( True )
  self.m_grid1.SetColLabelSize( 30 )
  self.m_grid1.SetColLabelAlignment( wx.ALIGN_CENTRE, wx.ALIGN_CENTRE )

  # Rows
  self.m_grid1.EnableDragRowSize( True )
  self.m_grid1.SetRowLabelSize( 80 )
  self.m_grid1.SetRowLabelAlignment( wx.ALIGN_CENTRE, wx.ALIGN_CENTRE )
 
  # Label Appearance
 
  # Cell Defaults
  self.m_grid1.SetDefaultCellAlignment( wx.ALIGN_LEFT, wx.ALIGN_TOP )
  bSizer1.Add( self.m_grid1, 0, wx.ALL, 5 )
 
  self.m_staticline4 = wx.StaticLine( self, wx.ID_ANY, wx.DefaultPosition, wx.DefaultSize, wx.LI_HORIZONTAL )
  bSizer1.Add( self.m_staticline4, 0, wx.EXPAND |wx.ALL, 5 )

  fgSizer1 = wx.FlexGridSizer( 0, 4, 0, 0 )
  fgSizer1.SetFlexibleDirection( wx.BOTH )
  fgSizer1.SetNonFlexibleGrowMode( wx.FLEX_GROWMODE_SPECIFIED )

  self.m_staticText1 = wx.StaticText( self, wx.ID_ANY, u"Producto", wx.DefaultPosition, wx.DefaultSize, 0 )
  self.m_staticText1.Wrap( -1 )
  fgSizer1.Add( self.m_staticText1, 0, wx.ALL|wx.ALIGN_CENTER_VERTICAL, 5 )

  self.m_textCtrl1 = wx.TextCtrl( self, wx.ID_ANY, wx.EmptyString, wx.DefaultPosition, wx.DefaultSize, 0 )
  fgSizer1.Add( self.m_textCtrl1, 1, wx.ALL|wx.EXPAND, 5 )
 
  self.m_staticText2 = wx.StaticText( self, wx.ID_ANY, u"Código", wx.DefaultPosition, wx.DefaultSize, 0 )
  self.m_staticText2.Wrap( -1 )
  fgSizer1.Add( self.m_staticText2, 0, wx.ALL|wx.ALIGN_CENTER_VERTICAL, 5 )
 
  self.m_textCtrl2 = wx.TextCtrl( self, wx.ID_ANY, wx.EmptyString, wx.DefaultPosition, wx.DefaultSize, 0 )
  fgSizer1.Add( self.m_textCtrl2, 1, wx.EXPAND|wx.ALL|wx.ALIGN_BOTTOM, 5 )

  self.m_staticText3 = wx.StaticText( self, wx.ID_ANY, u"Categoría", wx.DefaultPosition, wx.DefaultSize, 0 )
  self.m_staticText3.Wrap( -1 )
  fgSizer1.Add( self.m_staticText3, 0, wx.ALL|wx.ALIGN_CENTER_VERTICAL, 5 )

  m_comboBox1Choices = []
  self.m_comboBox1 = wx.ComboBox( self, wx.ID_ANY, u"Seleccionar", wx.DefaultPosition, wx.DefaultSize, m_comboBox1Choices, 0 )
  fgSizer1.Add( self.m_comboBox1, 0, wx.ALL, 5 )

  self.m_staticText4 = wx.StaticText( self, wx.ID_ANY, u"Fecha de ingreso", wx.DefaultPosition, wx.DefaultSize, 0 )
  self.m_staticText4.Wrap( -1 )
  fgSizer1.Add( self.m_staticText4, 0, wx.ALL|wx.ALIGN_CENTER_HORIZONTAL|wx.ALIGN_CENTER_VERTICAL, 5 )

  self.m_datePicker1 = wx.DatePickerCtrl( self, wx.ID_ANY, wx.DefaultDateTime, wx.DefaultPosition, wx.DefaultSize, wx.DP_DEFAULT )
  fgSizer1.Add( self.m_datePicker1, 1, wx.ALL|wx.EXPAND, 5 )
 

  bSizer1.Add( fgSizer1, 1, wx.EXPAND|wx.ALL, 5 )

  self.m_staticline3 = wx.StaticLine( self, wx.ID_ANY, wx.DefaultPosition, wx.DefaultSize, wx.LI_HORIZONTAL )
  bSizer1.Add( self.m_staticline3, 0, wx.EXPAND |wx.ALL, 5 )
 
  bSizer2 = wx.BoxSizer( wx.HORIZONTAL )
 

  bSizer2.AddSpacer( ( 0, 0), 1, wx.EXPAND, 5 )

  self.m_button4 = wx.Button( self, wx.ID_ANY, u"Grabar", wx.DefaultPosition, wx.DefaultSize, 0 )
  bSizer2.Add( self.m_button4, 0, wx.ALL, 5 )
 
  self.m_button5 = wx.Button( self, wx.ID_ANY, u"Eliminar", wx.DefaultPosition, wx.DefaultSize, 0 )
  bSizer2.Add( self.m_button5, 0, wx.ALL, 5 )

 
  bSizer1.Add( bSizer2, 1, wx.EXPAND|wx.ALL, 5 )
 

  self.SetSizer( bSizer1 )
  self.Layout()
  self.m_menubar1 = wx.MenuBar( 0 )
  self.m_menu1 = wx.Menu()
  self.m_menuItem1 = wx.MenuItem( self.m_menu1, wx.ID_ANY, u"Abrir", wx.EmptyString, wx.ITEM_NORMAL )
  self.m_menu1.AppendItem( self.m_menuItem1 )
 
  self.m_menu1.AppendSeparator()
 
  self.m_menuItem3 = wx.MenuItem( self.m_menu1, wx.ID_ANY, u"Salir", wx.EmptyString, wx.ITEM_NORMAL )
  self.m_menu1.AppendItem( self.m_menuItem3 )

  self.m_menubar1.Append( self.m_menu1, u"Archivos" )

  self.SetMenuBar( self.m_menubar1 )

 
  self.Centre( wx.BOTH )
 
  # evento click que invoca a la funcion grabar
  self.m_button4.Bind( wx.EVT_LEFT_DOWN, self.Grabar )

def __del__( self ):
  pass
    # creamos un cuadro de dialogo o mensaje personalizado
def Mensaje(self, msg, title, style):
  dlg = wx.MessageDialog(parent=None, message=msg,
  caption=title, style=style)
  dlg.ShowModal()
  dlg.Destroy()

# Funcion grabar que responde al evento click
def Grabar( self, event ):
    self.Mensaje("Esto es un evento click!",
						    "Información - Tutorial", wx.OK|wx.ICON_INFORMATION)
app = wx.App(False)
frame = MiForm (None)
frame.Show(True)
app.MainLoop()

panta015.jpg

 

A continuación vamos a probar la misma aplicación en una instalación de Windows 7 con Python y wxpython instalados previamente y el resultado es el siguiente:

 

panta016.jpg

 

Cuando finalizamos nuestro desarrollo completo, se puede distribuir la aplicación utilizando un software como InnoSetup como habíamos visto en los tutoriales:

 

wxFormBuilder es un entorno visual nos da la brinda de generar código Python con la plataforma wxPython, otra alternativa para desarrollar interfaces gráficas para Python quedará a elección del usuario si usar PyQt o wxPython.

 

Una de las grandes ventajas de wxFormBuilder es que contiene muchos componentes y widgets, muy personalizables inclusive mas que en otros entornos mas conocidos. Podemos ver los resultados a medida que vamos creando la aplicaciones, así podemos tener distintas versiones de la interfaz gráfica y del codigo que vayamos añadiendo. A diferencia de Qt Designer wxFormBuilder permite generar los eventos para luego invocar una funcionalidad determinada.
.


¿Te ayudó este Tutorial?


2 Comentarios

hola, muy interesante el tutorial. ¿Sería posible hacer aplicaciones para móvil con este programa?, estoy buscando la manera de convertir un programa escrito en Python a app.

Muy explicativo el tutorial. Has elaborado sistemas con el menú tipo Ribbon; si tienes algún tutorial o manual donde explique como se puede crear un menú tipo Ribbon.

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X