Interfacce grafiche con Glade - Agentgroup

RAD in Python: GladeLinguaggi dinamici – A.A. 2010/20111

GladeGraphical Interface Designer per GNOMEMemorizzazione della gerarchia dei widget inun file XMLIntegrabile con IDE moderni (Anjuta, Eclipse) Language-independent Storia1998: v0.12006: v3.02011: v3.10.1Linguaggi dinamici – A.A. 2010/20112

Una applicazione testuale ESEMPI:tutcli.pyPartiamo da una applicazione testuale, tutcli.pyTale applicazione implementa una classe addercon i seguenti metodisomma di due numeri interistampa il risultatoVogliamo trasformare questa applicazionetestuale in una applicazione grafica, tutgui.pyVogliamo usare Glade per la creazionedell'interfaccia graficaLinguaggi dinamici – A.A. 2010/20113

Prima fase: sketch interfacciaL'interfaccia grafica di una applicazione vasempre abbozzata (sketched) e prototipatasu cartatramite strumenti informatici MotivazioniProgettazione dei diversi use case (scenari diutilizzo dell'applicazione); una GUI non è unasola schermata!Piazzamento dei widget secondo criteri diusabilità (human interface guidelines)Strumenti per il GUI prototyping:http://c2.com/cgi/wiki?GuiPrototypingToolsLinguaggi dinamici – A.A. 2010/20114

Seconda fase: creazione GUIInseriamo una label nella prima boxselezionando la prima icona nella terza filasotto il tab “Controllo e visualizzazione”cliccando il primo elemento della boxInseriamo una tabella 2 colonne x 3 righe nellaseconda boxselezionando la terza icona nella prima filasotto il tab “Contenitori”cliccando il secondo elemento della boxLinguaggi dinamici – A.A. 2010/20118

Seconda fase: creazione GUIConsideriamo la box orizzontale Inseriamouna box orizzontale nell'elemento di sinistra,contenenteun'immagine alla sinistrauna label alla destrauna casella di pulsanti orizzontali con dueelementi nell'elemento di destra, contenenteun bottone alla sinistraun bottone alla destraLa casella di pulsanti orizzontali è raggiungibiletramite la quinta icona nella seconda riga sottoil tab “Contenitori”Linguaggi dinamici – A.A. 2010/201111

Seconda fase: creazione GUIPopoliamo le label dei due numeri e del risultatocon del testoUsiamo l'area delle proprietà alla destradell'area di design; cerchiamo l'elemento“Etichetta” e modifichiamoloSelezioniamo l'immagine ed individuiamo,nell'area delle proprietà, il campo “IDdell'oggetto nello stock”Scegliamo l'icona “Avvertimento”Scriviamo un testo di warning nella label vicinaall'immagineLinguaggi dinamici – A.A. 2010/201113

Seconda fase: creazione GUISelezioniamo il bottone più a sinistra nellacasella dei pulsantiAbilitiamo il radio button “Pulsante stock” (cheattiva una delle azioni predefinite)Selezioniamo l'icona “Esci”Selezioniamo il bottone più a destra nellacasella dei pulsantiAbilitiamo il radio button “Pulsante stock”Selezioniamo l'icona “Aggiungi”Linguaggi dinamici – A.A. 2010/201114

Seconda fase: creazione GUIApplichiamo dei correttivi estetici all'interfacciaLe label e le caselle di testo sono troppo alteperché si espandono in verticale sulladimensione della box che le contieneSelezioniamole, andiamo nel tab“Posizionamento”, identifichiamo l'elemento“Opzioni verticali” e togliamo “espandi”Le label Number1, Number2, Result sono troppolarghe → togliamo anche l'”espandi”orizzontaleLinguaggi dinamici – A.A. 2010/201116

Seconda fase: creazione GUISelezioniamo l'elemento window1 (la finestracontenitrice) nell'area in alto a destraSelezioniamo il tab “Generale” in basso adestraDiamo un identificatore più sensato allafinestra: scriviamo “windowMain” nel campo“Nome”Diamo un titolo alla finestra: “Latty's AmazingAdder!”Linguaggi dinamici – A.A. 2010/201118

Seconda fase: creazione GUISelezioniamo il tab “Segnali” della finestracontenitriceSelezioniamo l'evento GtkObject → destroyClicchiamo sulla tendina nella colonna“Gestore”Selezioniamo l'handler on_windowMain_destroyAbbiamo appena scelto il callback da invocarequando chiudiamo la finestraLinguaggi dinamici – A.A. 2010/201119

Seconda fase: creazione GUIDiamo un identificatore sensato al bottone diquit: buttonQuitScegliamo l'handler dell'evento “clicked” per ilbottone Quit: on_buttonQuit_clickedTale metodo sarà mappato al metodo quit()della classe adderDiamo un identificatore sensato al bottone diAdd: buttonAddScegliamo l'handler dell'evento “clicked” per ilbottone Add: on_buttonAdd_clickedTale metodo sarà mappato al metodo add()della classe adderLinguaggi dinamici – A.A. 2010/201120

Seconda fase: creazione GUIDiamo un identificatore sensato alle caselle ditestoEntryNumber1, entryNumber2, entryResultDiamo un identificatore sensato alla label diwarning hboxWarningLinguaggi dinamici – A.A. 2010/201121

Seconda fase: creazione GUIRendiamo inizialmente invisibile il warningClicchiamo sulla label contenente la frase diwarningSelezioniamo il tab “Comuni” nell'area a destraCerchiamo l'opzione “Visibile” ed impostiamolaa “No”Non vogliamo rendere editabile la casella ditesto “Result”Clicchiamo sulla terza casella di testoSelezioniamo il tab “Comuni” nell'area a destraCerchiamo l'opzione “Sensibile” edimpostiamola a “No”Linguaggi dinamici – A.A. 2010/201122

Seconda fase: creazione GUIRendiamo inizialmente visibile l'intera finestraIdentifichiamo il widget windowMain nel tab inalto a destraSelezioniamo il tab “Comuni” nell'area a destraCerchiamo l'opzione “Visibile” ed impostiamolaa “Si”Abbiamo finito!Con la GUI, almeno...Linguaggi dinamici – A.A. 2010/201123

Terza fase: modifica codice ESEMPI:tutgui.pyModifichiamo ora il codice sorgentedell'applicazione in modo tale dainizializzare il modulo software gladecaricare il file XML contenente la descrizionedella GUIaggiungere i callback per gli eventi abilitatinella GUILinguaggi dinamici – A.A. 2010/201124

Terza fase: modifica codice ESEMPI:tutgui.pyInizializzazione modulo gladeDeve essere importato il modulo gtk.gladeimport systry:import pygtkpygtk.require("2.0")except:passtry:import gtkimport gtk.gladeexcept:print("GTK Not Availible")sys.exit(1)Linguaggi dinamici – A.A. 2010/201125

Terza fase: modifica codice ESEMPI:tutgui.pyAggiungiamo una classe per l'attivazione dellainterfaccia graficaclass guiadder:wTree = NoneStruttura gerarchica dei widget(Window Tree).def __init__( self ):self.wTree = gtk.glade.XML( "main.glade" )dic = {"on_buttonQuit_clicked" : self.quit,"on_buttonAdd_clicked" : self.add,"on_windowMain_destroy" : self.quit,}self.wTree.signal_autoconnect( dic )gtk.main()Traduzione delfile XML in unWindow Tree.Associazionedei segnali aicallback.Linguaggi dinamici – A.A. 2010/201126

Terza fase: modifica codice ESEMPI:tutgui.pyAggiungiamo alla classe adder il callback add()per l'evento clicked del bottone buttonAddwTree.get_widget(name) → handle a widget dinome namedef add(self, widget):try:Thistime =adder( self.wTree.get_widget("entryNumber1").get_text(),self.wTree.get_widget("entryNumber2").get_text() )except ValueError:self.wTree.get_widget("hboxWarning").show()self.wTree.get_widget("entryResult").set_text("ERROR")return 0self.wTree.get_widget("hboxWarning").hide()self.wTree.get_widget("entryResult").set_text(thistime.giveResult())Linguaggi dinamici – A.A. 2010/201127

Terza fase: modifica codice ESEMPI:tutgui.pyAggiungiamo alla classe adder il callback quit()per l'evento clicked del bottone buttonQuitdef quit(self, widget):sys.exit(0)Linguaggi dinamici – A.A. 2010/201128