DesarrollandoAplicacionesGnomeconGlade

UnTutorial
EddyAhmed
http://eddy.writelinux.com
Traduccinalespaol:WaldoRamrezMontao.
Corregidopor:JosDanielMuozFras

Introduccin
EstetutorialintentaproporcionarunaguapasoapasoparacomenzaraescribiraplicacionesGnomeusando
Glade.Paraellonecesitar:

LibrerasGnome
Glade
ConocimientosbsicosdeC

Alfinalizareltutorialhabrescritounaaplicacindeltipo"HelloWorld!"conlasiguienteapariencia:

PorquusarGlade?
Gladepermitealprogramadorcrearrpiday
eficientementeuninterfazgrficodeusuariode
formavisual.Estolepermiteconcentrarseenla
implementacinrealdelprogramaenlugarde
enlosmltiplesdetallesdelainterfazdel
usuario.

Cmo?
1)Arranquegladedesdeelmengnomeosilo
prefieredesdeunterminaltecleandoglade2.
Selemostrarnlastresventanasmostradasen
laIlustracin1.
Laprimeraventanacontrolatuproyecto.La
paletatepermiteaadirwidgets(pequeos
artefactoscomobotones,cuadrosdedilogo,
etc.)atuaplicacin,mientrasquelaventanade
propiedadespermitirlamodificacinde
propiedadesdelwidgetelegidoyladefinicin
deseales(msadelanteveremosmssobre
ellas).
2)Loprimeroquenecesitaremosesunlugar
paracolocarloswidgets.Portantoenprimer

Ilustracin1:VentanasdeGlade

lugarcrearemosunaventanahaciendocliceneliconodeventanaubicadoenlapaleta.
IconodeVentana,enlapaleta.
Conestoaparecerunanuevaventanalistaparasermodificada.Mirelaspropiedadesparalaventana,en
particularqueelnombredelaventanaeswindow1.
Modifiquemosahoraelttulodeestaventana,elcualsemostrarensubarradettulo,poralgounpocoms
descriptivo.Paraello,dentrodelaventanadepropiedades,bastaconsituarseenlapestaaWidgetyenel
apartadoTtulocambiarwindow1poralgoparecidoaMiPrimeraAplicacinGnome.
3)Muybien,ahoralaventanaestlista.Acontinuacinvamosaaadiralgunosbotonesyetiquetas...pero
espera!Nopodemosaadirwidgetsan...EnlasaplicacionesGnomelosWidgetsestnempaquetados.Al
principioempaquetarwidgetspuedeparecerunacargaadicional,perorealmenteesunmtodoingenioso
parapermitirmuchascosastiles,siendolamsinmediataelcambiodetamaoautomtico.Cuandoun
usuariocambiaeltamaodeunaaplicacin,usualmentenosgustaqueloswidgetsenlaventanatambin
incrementeneltamaoparaaprovecharelaumentodeespacio,olocontrario,queseencojanconelobjetivo
depodercaberenlaventanadeacuerdoasunuevotamao.Elempaquetadopermiterealizarlo
automticamente,librandoaldesarrolladordelaescrituradelcdigoespecficoparaloscambiosde
tamao.Elempaquetadoselogracreandocajasotablas.Estoswidgetssoninvisibles,significandoqueno
puedenservistoseneltiempodeejecucin,aunquetienenunefectodirectoenlaaplicacin.
Siobservasnuevamentelaimagendelaaplicacinquecrearemos(alprincipiodeldocumento),puedesver
queesposibledividirlaventanaentresfilas:laetiquetasuperior,elcampodetextodeentradaenlamitady
losdosbotonesinferiores.PortantoloqueharemosescrearunaCajaVerticalcontresfilas.Hazclicsobre
eliconodeCajaVerticalenlapaletaydespushazclicencualquierlugardelaventanaqueacabamosde
crear.
IconodeCajaVertical,enlapaleta.
EspecificaquequieresqueseancreadastresfilasyhazclicenAceptar.Laventanaestarahoradivididaen
tresfilas,listaparaquepuedanseraadidosmswidgets.
EnestemomentoserabuenoabrirlaventanarboldeWidgeteligiendoMostrarrboldewidgetsdelmen
Ver.

Estaventanatepermitefcilmenteobtenerlavisindelajerarquadetuswidgetsytambinsuseleccin.

Ahorapodemosaadirconfacilidadnuestroswidgetsetiquetayentradadetextoenlaprimeraysegunda
filarespectivamente.ParaellobastaconhaceruncliceneliconodeEtiquetadelapaletayluegohacerun
clicenlaprimerfiladenuestraventana.Demanerasimilar,aadaunwidgetEntradadetextoenlasegunda
fila.
IconosdeEtiquetayEntradadetexto,respectivamente,enlapaleta.
Tuventanadeaplicacinyelrboldewidgetcorrespondientedeberandeversecomosigue:

Antesdequepodamosaadirlosbotonesenlatercerafiladebemoscrearunacajahorizontaldentrodela
tercerafiladelacajavertical.Lanuevacajahorizontaltendrdoscolumnas,unaparacadabotn.Hagamos
estohaciendocliceneliconodecajahorizontaldelapaletayhaciendoclicenlatercerafiladenuestra
ventana.
IconodeCajaHorizontal,enlapaleta.
EspecificadoscolumnasyhazclicenOK.Ahoralaterceracolumnasedividirhorizontalmenteendos
seccionesiguales.
Talvezesteseaunbuenmomentoparaguardarnuestroproyecto.Pordefecto,Gladesalvartuproyecto
dentrodeundirectoriodeProyectosentudirectoriohome.Daleunnombresimpleatuproyectocomopor
ejemplohola.
Sigamosconlosbotones.Cadaseccinquehemoscreadoenlatercerafilatendrunbotn.Portantovamos
aaadirunbotnacadaseccinhaciendocliceneliconodeBotnenlapaletayhaciendoclicenla
primeraseccin.Repitelaaccin,peroahoraparalasegundaseccin.
IconodeBotn,enlapaleta.
Listo,entoncesnuestrosbotonesestnah...peronosevenmuybien.Estoesporquedebemos
empaquetarlosadecuadamente.Hazlodndoleclicalprimerbotnquecreasteyenlaventanade
PropiedadesseleccionalapestaadeEmpaquetado.DalepermisoalaspropiedadesExpandiryRellenar
paraelbotnelegidoasignndolesSiaambas.Debersnotarqueelprimerbotnrellenaunpoco.Realiza
lomismoparaelsegundobotnypodrslograrquelaaplicacinseveaunpocomejor:

Podemoshacerquelascosasseveananmejor.Dentrodelaventanadepropiedadescambialosiguienteen
laspestaasWidgetdecadaunodelossiguienteswidgets(Recuerdaquepuedeselegirfcilmentealos
widgetsenlaventanarboldeWidgets):

CambialapropiedadHomogneodelwidgethbox1aSi.

CambiaelAnchodelBordedelwidgetvbox1a4.

CambiaelEspaciadodeloswidgetshbox1yvbox1a4.

CambialapropiedadEtiquetadelwidgetbutton1aOK.

CambialapropiedadEtiquetadelwidgetbutton2aCerrar.

LograndiosodeldesarrolloconGladeesquepuedesverinmediatamentecomosevertuaplicacin...Es
posiblejugaralterandolaspropiedadeshastaquelaaplicacinseveajustocomoquieras.
Faltacolocarunaltimapropiedadantesdeiniciarlaescrituradecdigo.CambialapropiedaddeEtiqueta
delabel1a"Ingresatunombre:".
Sinescribirunasolalneadecdigo,hemosrealmentecreadounaaplicacincompletamentefuncional!
DileaGladequeconstruyacdigofuentehaciendoclicenConstruirdelabarradeherramientaso
seleccionandoEscribircdigofuentedelmenArchivo.
SiahoraobservaseldirectoriodetuProyecto(recuerdaqueloguardamosen/home/[tunombrede
usuario]/Proyectos/hola)verstodoslosarchivosqueGladehacreado.
Elcdigofuenterealresideenelsubdirectorio"src".AlgunosarchivoscomoREADME,ChangeLogy
otros,probablementelosmodifiquestmismocuandodesarrollesunaaplicacinreal.Porahora,sin
embargo,podemosdejarlosvacos.ParaconstruirlosMakefilesesnecesarioabrirunterminalde
comandos,situarsedentrodeldirectoriodelproyectoyejecutar./autogen.sh.Sevisualizarnunaseriede
mensajesmientrassecompruebalaconfiguracindetuordenadorysecreanlosMakefilesadecuados.
Cuandofinalizaautogen.shpodemosconstruirnuestraaplicacinsimplementeejecutandoelcomando
make.
Sitodovabiendeberstenerunarchivoejecutableholaeneldirectoriosrc.Ejectalotecleando./hola
Voil!TuprimeraaplicacinGnome!Intentacambiardetamaosuventanaparaobservarlamagiadel

empaquetadotrabajando.
Ahorabien,todaestadiversinesbuenaybonita...peronuestraaplicacinesanalgovacoyenrealidad
nohacenadatil.Entoncesvamosempezaraescribirelcdigo!
Comoesteesslountutorialdeintroduccin,noharemosnadamuylujoso.Loquenosgustaralograres
quecuandoelusuariotecleesunombreenlaentradadetextoydespushagaclicenOK,laetiquetacambie
porunsaludoalusuario,consistiendoenunHolaseguidoporelnombrequetecle.Tambinelbotn
Cerrardeberfinalizarlaaplicacin.
Paralograrlodebesentenderelconceptodesealesyrespuestaaseal(eningls,callbacks).Unaseal
sucedeencualquiermomentoenelqueocurraunevento,talcomoelapretarunbotndelratn.Porello,
primerodebemoscrearunmanejadordeseal(eningls,signalhandler)parauneventodelcualqueramos
quesucedaalgo.Unavezquesehacreadoelmanejadordesealhacemosquecorrespondaaunafuncin
derespuestaaseal(eningls,callbackfunction).Estafuncinesloquerealmenteseejecutacadavezque
sucedeelevento.Comencemosportantoconlacreacindedosseales,unaparacadabotn.Empezaremos
conelbotnCerrar,yaqueeselmsfcildeimplementar.
SeleccionaelbotnCerrar(button2)yenlaventanadePropiedadesseleccionalapestaadeSeales.Un
botnpuedegenerarmuchasseales.Sinembargo,enestecasosloestamosinteresadosencuandosehace
clicsobreelbotn.Paraello,hazclicsobrelospuntossuspensivosqueestnacontinuacindelcampode
SealydelalistaquesemuestraseleccionaclickedydaleaOK.Elcampodelmanejadorcorrespondeal
nombredelafuncinquemodificarsparaesteeventoenparticular(sepuededejarelvalorpordefecto).
FinalmenteaadeestanuevasealhaciendoclicenAadir.

Aadamosalgodecdigotrivialanuestrorecincreadomanejador,justoparaveranuestroeventoen
accin.Todaslasrespuestassedefinenpordefectoenelarchivocallbacks.c,dentrodeldirectoriosrcdetu
proyecto.Antesdeiniciarelcdigoasegratedeconstruirtuproyectoparaactualizarnuestrosarchivoscon
elnuevomanejadorquehemoscreado.Cambiaatuterminaleingresaaldirectoriosrc.Editaelarchivo
callbacks.ccontueditordetextofavorito.Notificarsquenuestranuevafuncindelmanejadorestlista
parasertradaavida:
voidon_button2_clicked(GtkButton*button,gpointeruser_data)
{
}

Aadamosalgodecdigotrivialsloparaveranuestroeventoenaccin.Lafuncing_printseusapara
imprimirenlasalidaestndar.Escribamospuesalgodecdigoparaaveriguarqueelbotn2recibiunclic.
Modificanuestrafuncinderespuestacomosigue:
voidon_button2_clicked(GtkButton*button,gpointeruser_data)
{
g_print("Elbotn2recibiunclic\n");
}

Guardaelarchivoytecleamake,estandosituadoeneldirectoriosrc.Correelejecutable./holaydaleclic
albotnCerrar.Bien!"Elbotnrecibiunclic"semuestraenlaventanadelterminal!
Ahoraquesabemosquenuestrafuncincallbackestsiendollamada,vamosaasignarlealgomstil.
Puedesusarlafuncingtk_main_quitparafinalizarlaaplicacin.Entoncestodoloquedebeshaceres
sustituirlalneadeg_printporlasiguiente:
gtk_main_quit();

YatienesunbotnCerrarcompletamentefuncional!
RecordemosquesloquequeremosquehagaelbotnOK.Despusdequeunusuariotecleesunombreen
laentradadetexto,cambiaremoslaetiquetaparaquediga"HolaUsuario",dondeUsuarioseaelcontenido
delcampodeentradadetexto.Estoenvuelvedosconceptosbsicos:recuperacindedatosprovenientesde
unwidgetyestablecimientodepropiedadesdeunwidget.
Lasfuncionesespecficasdewidgetsestanbiendocumentadasenunsinfndelugares.Deentreotrascosas
estosrecursosdocumentanfuncionesespecficasparanuestrasnecesidadesinmediatas:etiquetasyentradas
detexto.
Loprimeroquenecesitaremosesunamaneradeobtenereltextoqueelusuariohatecleado.Estosehace
conlafuncingtk_entry_get_text().Ensegundolugar,necesitamosunamaneradeestablecerel
textoennuestraetiqueta.Estosehaceconlafuncingtk_label_set_text().Ambasfunciones
requierenensusargumentospunterosalwidgetapropiado.EnGladeestoselograconlafuncin
lookup_widget().
Portanto,ahoraquetenemoslasherramientasvamosaprepararlas.Primerodebemoscrearnuestro
manejadordesealparaelbotnOK.SeleccionaelbotnOK(button1).EnlaventanadePropiedades
seleccionalapestaadeSealesyaadeunasealclickedconelnombredeManejadorpordefecto.
Construyeelcdigofuenteyahoradeberasverunafuncinon_button1_clickedvacaentuarchivo
callbacks.c.
Ahoraloquedebemoshaceresobtenerpunterosparaloswidgetsqueestaremosusando:label1yentry1.
lookup_widgetdevuelveunpunterodetipoGtkWidget.Portanto,vamosacreardospunterosllamados
labelyentrycorrespondiendoanuestroswidgets.Elcdigodeberversealgoas:
GtkWidget*label=lookup_widget(GTK_WIDGET(button),"label1");
GtkWidget*entry=lookup_widget(GTK_WIDGET(button),"entry1");

Elprimerparmetroenlookup_widgetesunpunteroalosdatosdelwidgetquellama,enestecaso
button(fjatequeeselprimerparmetrodenuestrafuncinderespuesta(callback)
on_button1_clicked).Elsegundoparmetroeselnombredelwidgetdelcualqueremoselpuntero.
Bien,ahoraquetenemosloswidgetshagamosalgoconellos!
Antesdequecoloquemoseltextodelaetiquetanecesitaremoscrearunacadenaconloquequeramosdecir.
Recuerdaqueprimeroquedemosdecir"Hola"entoncesalgodecdigoCrpidoysucioqueseencargar
deesoes:
gcharoutput[50]="Hola";

Todoloquehicimosfuecrearunvectordecaracteresllamadooutputdetipogcharalmacenndole"Hola"y
unespacioextraparainicializarlaprimerapartedenuestromensaje.Losiguientequetendremosquehacer

esconcatenarleloquehayaenelwidgetdeentrada.Paraobtenerestetexto,llamaremosalafuncin
gtk_entry_get_textlacualsimplementedevolvercualquiertextoqueseencuentreenelwidgetde
entrada.Unavezobtenidodichotextobastaconconcatenarloanuestracadenaoutputmediantela
funcinstrcat:
strcat(output,gtk_entry_get_text(GTK_ENTRY(entry)));

Recuerdaquequeremospasarunpunteroagtk_entry_get_text.Tambindebemoshaceruncastde
tipoalpuntero,paranoobtenerwarningsduranteunmake.
Ahoraloquehacemosescolocarnuestracadenaenelwidgetdeetiquetausandolafuncin
gtk_label_set_textylisto!
gtk_label_set_text(GTK_LABEL(label),output);

Entoncesnuestrafuncincompletaes:
voidon_button1_clicked(GtkButton*button,gpointeruser_data)
{
GtkWidget*label=lookup_widget(GTK_WIDGET(button),"label1");
GtkWidget*entry=lookup_widget(GTK_WIDGET(button),"entry1");
gcharoutput[50]="Hello";
strcat(output,gtk_entry_get_text(GTK_ENTRY(entry)));
gtk_label_set_text(GTK_LABEL(label),output);
}

Estamoslistos!Ejecutaunmakeeneldirectoriosrceiniciatuaplicacin.Tecleatunombreenlaentrada
detextoyhazclicaOK.HolaUsuario!Aquenoesttanmal?

Ahoraconoptimismo,estarsencaminoaldesarrollodetuspropiasaplicacionesGnomeusandoGlade.
Inclusoconlasimplicidaddeestaaplicacin,elconocimientoquehasganadoconlaejecucindeeste
tutorialdeberasersuficienteparadesarrollaraccionesmscomplicadasytambinaplicarideassimilaresa
otroswidgets.Compruebalainfinidaddeotrosrecursosynotemasaexperimentar.Esperotehayas
divertido!
Porfavorcontctameconcualquierpregunta,comentario,cosasquedeberacambiarparahaceraltutorial
msclaro,ideas,historiasdexito,quejas,ocualquierotracosa.
EltutorialoriginaleseninglsypropiedaddeEddyAhmed.Latraduccinalespaolfuehechacon
autorizacindeEddy,respetandolosderechosdeautor.
Tutorialoriginal,EddyAhmed:eddy@writelinux.com
Traduccinyadaptacinalespaol,WaldoRamrez:waldo.ramirez@correo.unam.mx
Direccinparaeldocumentooriginaleningls:
http://eddy.writelinux.com
Contentinthisdocumenttranslatedfromtheoriginalwithpermissionfromtheauthor.
Copyright2003EddyAhmed