wxFormBuilder, un diseador para

wxPython
Antonio Mario Molina Saorn & ngel Luis Garca Garca

Taller de wxFormBuilder

Introduccin al Universo de Discurso.

wxPython y wxFormBuilder

wxFormBuilder.

Diseo y creacin de interfaces

Eventos

Herencia y override

Universo de Discurso

u! es wxFormBuilder"

Breve re#aso de wxPython.

$id%ets.

&i'ers.

Eventos.

(e)uisitos #ara se%uir este taller*

Python +.,.,

wxPython +.-...

&tani/s Python Editor

wxFormBuilder 0.+

wxFormBuilder, y 1

Desarrollado #or 1os! 2ntonio Hurtado3 1uan 2ntonio 4rte%a3

(yan 5ulder3 (yan Pus'tai3 5ichal Bli'na6.

Es un entorno WYSISWG #ara diseo %r7fico de interfaces

wx$id%ets.

2 #artir del diseo %r7fico de com#onentes #ermite %enerar

cdi%o 8993 :(8 y Python ;#ara el framewor6 wxPython<.

Intuitivo y f7cil de utili'ar.

8ontiene muchos wid%ets ;=oteBoo63 &#litter3 ><

?tili'a si'ers #ara #osicionamiento de wid%ets.

wxFormBuilder, y 2

No es un RAD #ro#iamente dicho3 como 5icrosoft

@isual &tudio.

Es un diseador y constructor de interfaces %r7ficas

)ue utili'a wxPython como framewor6 %r7fico
#ara Python.

Por tanto*

En wxFormBuilder diseamos y creamos la interfa'

%r7fica.

8on una herramienta de edicin de cdi%o ;IDE3

editor< llamamos a las clases %eneradas #or
wxFormBuilder.

wxFormBuilder, y 3

&itio weA* htt#*BBwxformAuilder.or%B.

Dnde oAtener wxFormBuilder"

Para Cinux*

En re#ositorios.

CaunchPad.

&ourceFor%e.

Para $indows*

&ourceFor%e.

wxFormBuilder, y

4#en &ource ;licencia DPC<.

2lternativas a wxFormBuilder*

wxDlade.

B42 8onstructor ;un (2D al estilo de 5icrosoft @isual &tudio<.

Python8ard.

wxDesi%ner.

@isual$x.

Dialo%Bloc6s.

wxPython, y 1

wxPython es un framewor6 creado #or (oAin Dunn3 en .EEF.

Es una liArerGa %r7fica #ara Python ;al i%ual )ue DHI3 t y H6inter<.

Permite crear #ro%ramas con una interfa' %r7fica roAusta y de %ran funcionalidad3 f7cil y
sim#le.

Es un wra##er de la #lataforma wx$id%ets ;escrita en 899<.

?na ada#tacin de la AiAlioteca wx$id%ets #ara ser usada en Python.

Es 4#en &ource.

5ulti#lataforma. ;$indows3 ?nix3 5ac<.

5uy documentado.

Proyecto muy activo

@ersin estaAle* +.-..+.J ;2Aril +J..<

@ersin desarrollo* +.E.... ;4ctuAre +J.J<

wxPython, y 2

&itio weA* htt#*BBwww.wx#ython.or%B.

2dem7s de wxPython se recomienda la instalacin de wxPython Demo:

contiene la documentacin de wxWidgets y multitud de ejemplos.

5aterial AiAlio%r7fico recomendado*

wxPython, y 3

wxPython sirve #ara crear a#licaciones %r7ficas orientadas a eventos.

?n evento es cual)uier interaccin entre el a%ente humano y la a#licacin3 como

#uede ser un clic6 de ratn.

Ca %eneracin de un evento #rovoca una res#uesta en el sistema.

2 cada evento se le #uede asociar un cdi%o3 mediante un #roceso llamado

indin!.

El mane"ador de eventos es el cdi%o )ue se dis#ara a consecuencia de la

%eneracin de un evento.

Una aplicacin wxPython espera a que se generen eventos, asociando los mismos
a un cdigo, llamado manejador de eventos.

wxPython, y

Estructura A7sica de una a#licacin wxPython*

K &e im#ortan las wx.
im#ort wx
K &e instancia una a#licacin wxPython.
a## L wx.Py&im#le2##;<
K &e instancia el contenedor #rinci#al.
ventanaM#rinci#al L wx.Frame;=one3 N.<
K 5ostramos la ventana.
ventanaM#rinci#al.&how;<
K Es#eramos a los eventos.
a##.5ainCoo#;<

wxPython, y !

?n wid!et es cual)uier com#onente %r7fico con el

)ue interactuar en wxPython ;Aotones3 caOas de
texto3 calendarios3 sliders3 ...<.

wx.Frame es un wid%et contenedor3 similar a una

ventana de 5icrosoft $indows.

Cos wid%ets #ueden dis#onerse con wx.Point y

wx.&i'e3 mediante coordenadas3 dentro de un
contenedor. 4tra forma de hacerlo es mediante el
uso de si#ers.

wxPython, y "

?n si#er es un mecanismo de dis#osicin de

wid%ets en wxPython.

5aneOa el tamao y #osicin de sus wid%ets3 Aasado

en un conOunto de re%las.

&e asi%na a un contenedor ;wx.Panel wx.Frame<.

Es un al%oritmo #ara dis#oner o enmarcar un %ru#o

de wid%ets.

Cos suAwid%ets )ue se crean dentro de un contenedor

deAen de aadirse #or se#arado al si'er.

El si'er administra la #osicin de los wid%ets.

wxPython, y #

?n si'er en wxPython es un oAOeto con el Pnico

#ro#sito de administrar el #osicionamiento de un
conOunto de wid%ets dentro de un contenedor.

El si'er es la re#resentacin de un al%oritmo de

#osicionamiento de #antalla ;no un contenedor
wid%et<.

?n si'er es una instancia de la clase wx.&i'er.

?n si'er #uede estar incluido en otro si'er.

wxPython, y $

Hi#os de si'ers*

wx.Box&i'er

wx.FlexDrid&i'er

wx.Drid&i'er

wx.DridBa%&i'er

wx.&taticBox&i'er

En este taller veremos*

wx$BoxSi#er Q wx$FlexGridSi#er

%erramientas a utili&ar

Python %$&$&. Es la versin3 Ounto a la +.R3 )ue funciona sin

nin%Pn ti#o de #roAlemas en wxPython +.-.:.

wxPython %$'$(($). @ersin estaAle3 Ounto a la +.-..+.J.

Stani*s Python +ditor. Es uno de los IDE/s %ratuitos m7s

#otentes y livianos3 multi#lataforma3 con com#letitud3
indentacin y coloreado de cdi%o3 adem7s de otras muchas
cualidades.

wxFormBuilder ,$% Beta. Es la Pltima versin.

'reaci(n de un proyecto, y 1

'reaci(n de un proyecto, y 2
Guardamos el proyecto con Ctrl+S, File/Save, haciendo click en botn Guardar.

wxFormBuilder) Partes

wxFormBuilder est7 com#uesto de S #artes*

4AOect Hree 4AOect Hree* El 7rAol de oAOetos )ue com#one la interfa' diseada.

8om#onent Pallete 8om#onent Pallete* 8onOunto de wid%ets y si'ers dis#oniAles #ara disear
la interfa'.

Editor Editor. &e com#one de S hoOas*

Designer* Diseo %r7fico de la interfa'.

C++* 8di%o 899 %enerado a #artir del diseo en el Desi%ner.

Pt!on* 8di%o Python %enerado a #artir del diseo en el

Desi%ner.

"#C* 8di%o :5C %enerado a #artir del diseo en el Desi%ner.

4AOect Pro#erties 4AOect Pro#erties* Pro#iedades y eventos de los com#onentes del

Desi%ner.

*nter+a& 1
Creamos un contenedor wx.Frame.

*nter+a& 1
ncluimos dentro del contenedor un wx.!oxSi"er.

*nter+a& 1
ncluimos un wx.StaticText# cambiamos la propiedad label, y con$i%uramos el sizeritembase, es decir,
cmo &ueremos &ue se comporte el wid%et dentro del si"er base '&ue lo contiene(. )ara ello activamos
bandera wx*+G,-C.,/.0 y aumentamos el borde a 12.

*nter+a& 1
ncluimos 3 wx./extCtrl.

*nter+a& 1
4Cmo redimensionar las 3 ca5as de texto6 Con$i%urando su posicin
dentro del si"er base. )ara ello hay &ue activar el $la% wx..7)*,8.

*nter+a& 1 , '(di-o Python -enerado
Con$orme se va dise9ando la inter$a" %r:$ica se va %enerando el cdi%o )ython '.ditor, pesta9a
)ython(. )ara crear el $ichero )ython pulsar F;, o File/Generate Code o click en icono de %enerar
cdi%o.

*mportando la *nter+a& 1

?na ve' creada la interfa' y %enerado el cdi%o

Python3 creamos el mdulo )ue llamar7 a dichas
clases. En dicho mdulo hay )ue crear una
a#licacin wxPython3 #ues wxFormBuilder no lo
%enera ;en contra#osicin con otros diseadores3
como wxDlade<.

2Arimos Stani*s Python +ditor.

8reamos un mdulo* datos.#y

*mportando la *nter+a& 1

8reamos el mdulo con el si%uiente cdi%o y

eOecutamos*

./ecutando la *nter+a& 1

&e ha creado una a#licacin wxPython3 y toma como

contenedor #rinci#al una instanciacin de la clase %enerada
en wxFormBuilder.

8osas a tener en cuenta*

&i se redimensiona el wid%et contenedor3 se

redimensionan sus wid%ets contenidos3
autom7ticamente.

=o se #uede #asar de un wid%et wx.Hext8trl a otro

mediante la tecla taAulador ;H2B<3 como caArGa
es#erar.

&olucin" ?sar #aneles.

0odi+icando la *nter+a& 1
ncluimos un wid%et wx.)anel dentro del wx.!oxSi"er principal.

0odi+icando la *nter+a& 1
Si se incluyen wid%ets dentro de un contenedor wx.)anel aparece la propiedad de
nave%acin entre wid%ets a trav<s del tabulador. /odo posicionamiento de wid%ets se
reali"a con si"ers, por lo &ue ser: necesario crear uno dentro del wx.)anel.

0odi+icando la *nter+a& 1
Se pueden mover los wid%ets wx./extCtrl y wx.Static/ext mediante la t<cnica de 8ra% =
8rop, capturando y soltando los wid%ets de un si"er al interior de otro.

./ecutando de nuevo la *nter+a& 1

Duardamos el #royecto y volvemos a %enerar el

cdi%o Python.

@olvemos a &tani/s3 y sin camAiar nada ;en realidad

no es necesario<3 eOecutamos. 2hora a#arece la
funcionalidad de nave%acin entre wid%ets con la
tecla H2B.

-.I/I0AR SI+1PR+ PAN+/+S$

.ventos en wxFormBuilder

&e ha creado la #rimera interfa' en wxFormBuilder3

com#letamente funcional.

2 #artir de este diseo se crear7 un frame con dos

Aotones ;en sentido hori'ontal< de 28EPH2( y
82=8EC2(.

&e crear7n los eventos de clic6 en los Aotones

anteriores.

.ventos en wxFormBuilder
Sobre MyFrame1 botn derecho/)aste y creamos una copia de Frame>

.ventos en wxFormBuilder

.ventos en wxFormBuilder

(enomAramos nuevo wid%et contenedor a 1yFrame%3 y

modificamos al%unos atriAutos.

.ventos en wxFormBuilder
Creamos un si"er hori"ontal, dentro del si"er principal del contenedor ?yFrame1.
Fi5arse en la propiedad orient, &ue la hemos cambiado a wx!"#$!%TAL.

.ventos en wxFormBuilder
Creamos 1 wx.!utton dentro del nuevo si"er.

.ventos en wxFormBuilder
@amos a cambiar la posicin de los botones *C.)/*0 y C*,C.+*0. +os vamos a
5usti$icar a la derecha. )ara ello hay &ue desactivar la bandera wx.7)*,8 del si"er
contenedor de los botones y activar la bandera wx*+G,-0GA/.

.ventos en wxFormBuilder
Cambiamos los nombres a los botones y creamos los eventos de click en botones
*C.)/*0 y C*,C.+*0. .n realidad es a9adir los nombres de los mane5adores de
eventos &ue se lan"ar:n cuando se den los eventos pertinentes.
Aay 1 maneras de crear el nombre del mane5ador de eventosB
>( Aaciendo doble click sobre el evento, y %enera de manera autom:tica el
nombre del mane5ador de eventos.
1( nsertando el nombre directamente 5unto al evento &ue &ueremos tratar.

.ventos en wxFormBuilder
)odemos ver el cdi%o )ython &ue wxForm!uilder %enera autom:ticamenteB

.ventos en wxFormBuilder
Guardamos proyecto y %eneramos cdi%o )ython en wxForm!uilder. @olvemos a Stani. /al como se ha visto hay
&ue hacer override de los mane5adores de eventos para darle $uncionalidad. Aabr: &ue crear una clase Frame
&ue herede de ?yFrame1, y hacer override de los mane5adores de eventos.

'onclusiones111

8once#tos vistos*

Proyecto wxFB.

$id%ets contenedores Frame y Panel.

Posicionamiento con si'er wx.Box&i'er.

Eventos.

Herencia de wid%ets y override de maneOadores de

eventos.

*nter+a& 2

@amos a crear un se%undo #royecto3 denominado %estionMdatos3 )ue

%enerar7 el fichero Python %estionMdatosMvista.#y.

8rearemos #aneles como wid%ets contenedores3 #ara ver la reusaAilidad de

los mismos.

@eremos el uso del fla% Proportion en un si'er.

*nter+a& 2
Se va a dise9ar el &ronten' &ronten' de una posible aplicacin de %estin, con wid%ets avan"ados,
tales como %ote(oo), S*litters +,oices. Se ver: el potencial de los si"ers como
al%oritmos de posicionamiento de wid%ets.
+a aplicacin consta de un Cnico Frame y 3 paneles. Cada Frame contenedor de la
aplicacin ser: la instanciacin del Frame %enerado por wxF!.
Se practicar: como pasar estructuras de datos a los componentes %r:$icos para &ue
muestren in$ormacin.

*nter+a& 2
+os conceptos de esta se%unda inter$a" son id<nticos a la primera, a excepcin &ue se
ver:n nuevos wid%ets m:s comple5os a la ve" &ue Ctiles y so$isticados.
.l proyecto wxF( wxF(, asD como el cdi%o -yt,on -yt,on para llamar a las clases de wx-yt,on wx-yt,on
est:n en los ficheros adjuntos a este material.

0en2s en wxFormBuilder

8omo se #uede oAservar en el Forms del 2om3onent Pallete3

existen F com#onentes )ue se #ueden instanciar sin necesidad de
un contenedor #adre3 a saAer3 Panel3 Frame3 Dialo! y los wid%ets
de menPs 1enuBar 1enuBar y .oolBar .oolBar.

2dem7s en el 2om3onent Pallete est7 la #estaa 1enu4.oolar 1enu4.oolar3

)ue contiene toda una coleccin de wid%ets #ara utili'ar en menPs.

?n menP se #uede crear*

Dentro de un Frame.

8omo un contenedor3 al estilo de Paneles Frames ;es decir3

se crea una clase en el cdi%o Python %enerado<.

0en2s en wxFormBuilder
Creamos un nuevo proyecto, llamado menus.wx, y el $ichero -yt,on a %enerar ser:
menus.wx./ista.*y.

0en2s en wxFormBuilder
8ise9o de un Frame con un sistema de menC inte%rado.

0en2s en wxFormBuilder

0en2s en wxFormBuilder

0en2s en wxFormBuilder

0en2s en wxFormBuilder
+a herramienta del .ditor .ditor de menC da como resultado el !b0ect Tree de wid%ets de menC.

0en2s en wxFormBuilder
)odemos comprobar las opciones de elementos de menC tipo 0adio 'excluyentes(.

0en2s en wxFormBuilder
E para las opciones de menC de tipo c,ec).

.ventos en men2s
Crear eventos de elementos de menC es trivial, tal como se ha visto anteriormente.
Fnicamente hay &ue seleccionar el item de menC deseado, e ir a 1/ents '!b0ects
-ro*erties(, para in%resar el nombre del mane5ador de eventos asociado al evento en
cuestin, en este caso, !nMenuSelection.
%!TA2 %!TA2 Crear eventos Gn?enuSelection para elementos de menC de ,uevo y *brir '*rchivo(.

0en2s en wxFormBuilder
.n el cdi%o %enerado por wxForm(uil'er encontramos los identi$icadores de los
elementos de menC. *l crear un Tool dentro de un Tool(ar hay &ue especi$icar el #3 #3 del
elemento del menC creado, para enla"ar el mane5ador de eventos.

0en2s en wxFormBuilder
Creamos un Tool(ar, y dentro de <l, un wid%et Tool 'todo esto seleccionado de la pesta9a
?enu//oolbar ?enu//oolbar del +om*onent -allete(. Fi5arse en el atributo i' del wid%et Tool, &ue se ha cambiado
por #3.A("#", de modo &ue cuando se ha%a click en <l se lan"ar: el mane5ador de eventos asociado
al elemento de men Abrir. *dem:s se ha creado un Status(ar, enla"ando el atributo statusbar del
wid%et Tool al mismo 'autom:ticamente(, con el texto H*brir un documentoI. Cuando se pase el ratn
por encima del wid%et Tool aparecer: dicho texto en el wid%et Status(ar.

0en2s en wxFormBuilder
@olvemos a Stani, y creamos el mdulo menus.wx.*y, con el si%uiente contenidoB
.5ecutamos y vemos la solucin esperada...

'onclusiones111

Hemos visto como crear menPs en contenedores de ti#o wx.Frame.

5enPs.

Elementos de menPs ;normal3 chec6ed3 radio<.

&uAmenPs.

Eventos en menPs.

Barra de herramientas ;HoolBar<.

Elementos de la Aarra de herramientas ;Hool<.

2sociar eventos de Hool a elementos de menPs.

Clamar a las clases %eneradas #or wxFormBuilder desde un editor3 en este

caso3 &tani/s Python Editor3 y hacer override en al%unos maneOadores de
eventos.

'omponente 'ustom 'ontrol en wxFB

De lo )ue se trata es de %enerar cdi%o Python #ara

un wid%et )ue todavGa no est7 so#ortado en
wxFormBuilder.

@amos a crear un nuevo #royecto3 llamado

ccM#royecto3 )ue %enerar7 ccM#royectoMvista.#y.

'omponente 'ustom 'ontrol en wxFB
)ara ver cmo $unciona este wid%et vamos a crear un proyecto en wxForm(uil'er, en
donde insertaremos un wid%et L13%umber+trl L13%umber+trl, el cual no est: soportado actualmente
'en la versin 4.5( por wxForm(uil'er.

'omponente 'ustom 'ontrol en wxFB
8ise9amos un Frame Frame &ue contendr: un -anel -anel, &ue a su ve" contendr: un +ustom+ontrol +ustom+ontrol.
%!TA2 8arse cuenta &ue hemos renombrado todos los wid%ets, en especial el Custom
Control, ahora Le'+ontrol.

'omponente 'ustom 'ontrol en wxFB
)ara %enerar cdi%o )ython de estas propiedades solamente nos interesan 1, a saberB
name 'el nombre del wid%et, &ue se utili"a para a9adirlo al si"er( y construction 'la
llamada para instanciar la clase y crear el ob5eto cuyo nombre ha sido declarado en
name, y &ue tiene &ue ser atributo de la clase(. )or tanto vamos a darle a nuestro nuevo
wid%et como name +edControl. E el construction ser:B sel$.+edControl J
wx.%i"mo.+ed,umberCtrl'sel$, K>(. 8arse cuenta &ue el Le'+ontrol tiene &ue ser
atributo de la clase %enerada 'es por ello lo del self(.
?odi$icamos las propiedades del +ustom+ontrol Le'+ontrolB

'omponente 'ustom 'ontrol en wxFB
Con$i%uracin $inal de las propiedades del +edControlB

'ustom 'ontrol en 3tani
Creamos el mdulo cc.*royecto.*y en Stani, con el si%uiente cdi%oB

'ustom 'ontrol en 3tani
CONSEGUIDO!
CONSEGUIDO!

'onclusiones so4re el taller de wxFB

&e ha introducido a la herramienta de diseo de interfaces

%r7ficas wxFormBuilder3 en es#ecial3 #ara la %eneracin de
cdi%o Python a #artir del framewor6 wxPython.

&e han visto los conce#tos de wid%et3 evento y si'er.

&e ha #roAado la herencia de las clases %eneradas #or wxFB y el

override de m!todos ;maneOadores de eventos<.

&e han diseado menPs de Frames.

&e ha com#roAado el wid%et 8ustom 8ontrol.

Taller de wxFB , 'aldum 2511
Universidad de 0urcia
Muchas gracias a todos.
*ntonio ?ario ?olina SaorDn
Ln%el +uis GarcDa GarcDa