Desarrollorpidodeaplicaciones GrficasconPythonyGTK+

LorenzoGilSnchez<lgs@sicem.biz>
SICEm(SoftwareIntegradoparaelControldelaEmpresa)

ArturoGonzlezFerrer<arturogf@ugr.es>
CEVUG(CentrodeEnse anzasVirtualesUniversidaddeGranada)

Objetivosdidcticosdeltaller

ComprendercomofuncionaGlade Ventajasdesepararlafuncionalidaddel programadelainterfazdeusuario ModelodeeventosdeGTK+ Uni ndeloanteriorconPythonylibglade Contodoestodesarrollaremosunaaplicaci n deejemplocompleta

Aplicacindeejemplo:PyEMICA

Editordemetainformaci ndecanciones. SoportarMP3peroserfcildeextenderpara quesoporteOGG. Permitirtantovisualizarcomoeditartodoslos camposquedefineelestndarID3v1.1 Multiplataformaydefciluso.

1.EsbozodelainterfazenGlade
1. CreamosunproyectoGTK+nuevo 2. Creamosunaventana 3. Dentrometemosunacajaverticalde tamao2 4. Enlapartedearribametemosuna barrademensyenlapartedeabajo unacajahorizontaldetamao2 5. Enlaparteizquierdametemosun controldetipoListayenlaparte derechaunacajaverticaldetamao7 6. Guardamoselproyectocomo pyemica.glade

2.CargadelainterfazdesdePython
1. Enunficherodetextoescribiremos nuestroprimerprogramaPyGTK 2. Importamoslaslibreriasnecesarias 3. Creamoslaclasequeser nuestro programaprincipal 4. Cargamoselarchivogladeque creamosenelpasoanteriorenel constructordelaclase 5. Ejecutamoselprogramallamandoal m todorun() 6. Problema:nohayformadesalirsedel programa

3.Mejorandolaventanaprincipal
1. Vamosaponerlenombre,unttulo,unaposicininicialyuntamaoinicialanuestraventana. 2. EnlapestaaSe alesaadiremosunmanejadorparalaseal destroydeGtkObject.

4.Manejodeseales

Cuandoelusuariocierranuestraventanaseproducelaseal destroysobreesaventana. Podemosconectarunmanejadoradichasealqueseencarguedecerrarlaaplicacin correctamente. Paraellousamoselm todosignal_autoconnectdelaclasegtk.glade.XMLconla instanciadelobjetocomoprimerargumento. Esimportantequenuestraclasetengadefinidounmanejadorconelmismonombreque pusimosenGlade.

5.Controlesdeedicin

1. Enlapartederechadenuestraventanametemosunacajahorizontaldetamao2por cadacontroleditablequeusaremos:entotal7 2. Encadaunadeestascajasmetemosuna EtiquetayunaEntradadeTextoexceptoen eldelGneroqueusaremosunaCajaCombo. 3. EditamoslaspropiedadesdelasetiquetasNombre,EtiquetayAlineacionX.Las etiquetassonT tulo,Artista,Disco,Ao,G nero,ComentarioyPista.

6.AccediendoaloscontrolesdesdePython

Paraquetodaslasetiquetasocupenlomismousamosungtk.SizeGroup Accedemosacadaetiquetausandoelm todoget_widgetconelnombredelcontrol comoargumento(hayqueacordarsedecmollamamosalasetiquetasenGlade) PorltimoaadimoselcontrolEtiquetacorrespondienteanuestroSizeGroupquese encargar dequetodastenganelmismoancho

7.Arreglandolalistadecanciones

ElcontrolTreeViewdeGTK+usauna arquitecturaMVC:Potente,flexibleperoalgo complicadoalprincipio Lavista(TreeView)tieneasociadounmodelo (ListStore)queeselquecontienelosdatos Lavistatieneunaom scolumnas (TreeView)quecogenlosdatosdelmodeloy losvisualizanconlaayudadelos visualizadores(CellRenderer )

ModeloVistaControlador TreeView TreeViewTreeView Colum Colum TreeModel (ListStore)

Cadaelementodenuestromodelotendrdos CellRenderer campos:unoparaelnombredelficheroyotro paralarutacompleta Acordarosdeponerleelnombrecorrectoal TreeView:trvwCanciones

CellRenderer

CellRenderer

8.Editandolosmenus

GladedisponedeuncmodoeditordeMens. CrearemosunmenArchivocondosopciones:AbrirySalir Ojoconlapropiedadmanejadorporquedefineelm todoquesellamar cuandoel usuarioseleccioneesaopcin.

9.Losmanejadoresdemens

Elm todoon_mnSalir_activateesbastanteautodescriptivo Enelm todoon_mnAbrir_activateabriremosundilogodeseleccindeficherosysi elusuariopulsaenelbotnOk,llamamosalm todocarga_canciones(porescribir)con eldirectorioseleccionado. Lalineaself._widgets.get_widget('vbxEditor').set_sensitive(gtk.FALSE) es opcionalysirveparadesactivarlacajadeloscontrolesdeedicinparaqueelusuario nolospuedausara n.

10.Lacargadecanciones

Rellenamoselmodelodenuestralistadecancionesconlosficherosconextension mp3deldirectorioencuestin.Paracadaelementoguardamoselnombredela cancinylarutacompleta. Paraellousamoselm duloglobytambi nlafuncinbasenamedelm duloos.path. Estossonm dulosdelalibreraest ndardePython. Porltimoleponemoscomottuloalacolumnadelalistaelnombredeldirectorio.

11.Leyendolametainformacinde lascanciones

Cuandoelusuarioseleccionaunacanci ndelalistadecanciones hacemoslosiguiente: 1. Leemoslametainformacinasociadaaesacancin 2. Activamosloscamposeditables 3. Rellenamosloscamposeditablesconlametainformacindela cancin

Paraleerlametainformacinusaremoselm duloID3: http://id3py.sourceforge.net/ Todoestolohacemosenelm todolee_canci n() Utilizaremosundiccionario,almacenadoenlaclase,conla correspondenciaentreloscamposdeID3ynuestroscontroles editables.

11.Leyendolascanciones(2)

Aquivemoseldiccionario quevamosautilizarpara enlazarcamposID3con nuestroscontrolesde edicin. Noolvideisllamara vuestroscontrolesasidesde Glade.Elcombodebe llamarsecmbGenero

Nadiellamaalm todolee_cancin!! tenemosquedetectaralgneventoenlalistade cancioneseinvocarnuestrom todoensu Noolvideishacerel importID3alprincipiodel manejador programa

Vemosquenuestrom todo lee_cancintambenle cambiaelttuloala ventanaprincipal

Peronosfaltaalgo,no?

11.Leyendolascanciones(3)

EnGlade,tenemosqueaadirun manejadoralasealcursor_changed denuestralistadecanciones

Yasolonosfaltaescribir dichomanejador.Es bastantesencillo,como sepuedeverenlafigura deladerecha

12.Guardandoloscambios

Paraguardarnuestroscambiosprimerotenemosquesabersiha habidoalgncambio Paraelloutilizamoslaseal changed delasentradasdeTexto (incluidalacajacombo) Podemosconectarunmanejadoradichasealyguardarla metainformacincuandodetectemosalg ncambio.Noesmuy eficienteperoessimpleyfunciona:) Cuidadoconelm todolee_cancinporqueestmodificandolos controlesylase al changed seremitida.Solucin:usaruna variabledeestadoparasabersiestamosenesecaso.

12.Guardandoloscambios(2)

Vamosallamaralmanejadordela sealchangedigualparatodoslas entradasdetexto:on_campo_changed

Yaslonosfalta escribirelm todo escribe_cancion()

12.Guardandoloscambios(3)

Elmtodoescribe_cancinessencillo,slohayquetenercuidado conelgneroycomprobarqueelusuariohayaintroducidoun gnerovlido

13.Lasealchangedseemite demasiadasveces

Elproblemaradicaenqueelm todolee_cancinvaa desencadenarvariasemisionesdelasealchangedquenoson deseadas. Unaposiblesolucinesusarunavariabledeestado: self._leyendo.Hagamosestoscambios:

Inicializamosself._leyendo=0enelconstructor Enlee_cancion()ponemosself._leyendoa1alprincipioylo volvemosaponera0alfinal. Enon_campo_changed()comprobamoselvalordel self._leyendoysies1nohacemosnadams

Cdigocompleto:slo140lineas!!

ElmismoprogramaenChubieransidoalmenos5vecesm selnmerodelineas Nohemostenidoquecompilarnienlazarelprogramaniunasolavezyporesoeldesarrolloha sidom sf cily gil Laseparacinentrefuncionalidadeinterfazesbastantenotable