Vous êtes sur la page 1sur 70

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. Python +.,., wxPython +.-... &tani/s Python Editor wxFormBuilder 0.+

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


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. &ourceFor%e.

Para $indows*

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 wx$BoxSi#er Q wx$FlexGridSi#er

En este taller veremos*

%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* Hree El 7rAol de oAOetos )ue com#one la interfa' diseada. 8om#onent Pallete* 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. P t!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* 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,-0 GA/.

.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' 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(, asD como el cdi%o -yt,on para llamar a las clases de 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 y .oolBar. 2dem7s en el 2om3onent Pallete est7 la #estaa 1enu4.ool ar3 )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 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 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 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 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, el cual no est: soportado actualmente 'en la versin 4.5( por wxForm(uil'er.

'omponente 'ustom 'ontrol en wxFB


8ise9amos un Frame &ue contendr: un -anel, &ue a su ve" contendr: un +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


?odi$icamos las propiedades del +ustom+ontrol Le'+ontrolB

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

'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!

'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

Vous aimerez peut-être aussi