Académique Documents
Professionnel Documents
Culture Documents
Taller de wxFormBuilder
wxPython y wxFormBuilder
wxFormBuilder.
Universo de Discurso
$id%ets. &i'ers. Eventos. 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
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
Para Cinux*
Para $indows*
wxFormBuilder, y
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<.
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
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.
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 ...<.
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 "
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*
%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
wxFormBuilder) Partes
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.
*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.
*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.
*mportando la *nter+a& 1
./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.
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.
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.
.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
.ventos en wxFormBuilder
.ventos en wxFormBuilder
.ventos en wxFormBuilder
Creamos un si"er hori"ontal, dentro del si"er principal del contenedor ?yFrame1.
.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
'onclusiones111
5enPs. Elementos de menPs ;normal3 chec6ed3 radio<. &uAmenPs. Eventos en menPs. Barra de herramientas ;HoolBar<. Elementos de la Aarra de herramientas ;Hool<.
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.
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.
)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.
%!TA2 8arse cuenta &ue hemos renombrado todos los wid%ets, en especial el Custom Control, ahora Le'+ontrol.
)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(.
CONSEGUIDO!
&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.