3.1   I quattro compiti fondamentali della programmazione «UI»

Quando si sviluppa una interfaccia-utente («user interface», «UI») c'è un insieme standard di compiti da eseguire:

1. Si deve specificare l'aspetto dell'interfaccia. Ossia, bisogna scrivere del codice che determina ciò che l'utente vedrà sullo schermo dell'elaboratore.
2. Si deve decidere il funzionamento dell'interfaccia. Ossia, bisogna scrivere del codice che realizzi i compiti del programma.
3. Si deve accoppiare l'aspetto con il funzionamento. Ossia, bisogna scrivere del codice che associ ciò che l'utente vede al codice che è stato scritto per eseguire i compiti del programma.
4. Infine, bisogna scrivere del codice che rimanga in attesa di ingresso dall'utente.

3.2   Un po' di lessico GUI

La programmazione GUI ha uno speciale lessico attinente ai compiti fondamentali sopra descritti:

1. Si specifica l'aspetto dell'interfaccia-utente mediante la descrizione dei widget che si vogliono presentare, nonché le loro relazioni spaziali (ossia, se un widget sta sopra o sotto, o a destra o a sinistra, di altri widget).
2. Le parti di codice che concretamente realizzano il lavoro dell'interfaccia si chiamano gestori di eventi («event handlers»). Gli eventi sono gli ingressi, come le pressioni dei tasti dei dispositivi di puntamento (o «topi», o «mouse») o della tastiera. Queste parti si chiamano «gestori» in quanto «gestiscono» (nel senso che «reagiscono a») tali eventi.
3. L'accoppiamento fra un gestore di eventi e un widget si dice collegamento (o «binding»). Grossomodo, il processo di collegamento implica l'associazione di tre diverse entità:
   1. un tipo di evento (ad esempio la pressione del tasto sinistro del dispositivo di puntamento, oppure la pressione del tasto [Invio] sulla tastiera),
   2. un widget (ad esempio un pulsante), e
   3. del codice di gestione degli eventi.

Per esempio, si potrebbe collegare (a) una singola pressione del tasto sinistro del dispositivo di puntamento al (b) pulsante «CHIUDI» sullo schermo e al (c) codice denominato «chiudiProgramma», il quale chiude la finestra e termina il programma.

4. Il codice che attende l'ingresso si chiama ciclo degli eventi («event loop»).

3.3   A proposito del ciclo degli eventi

In certi film americani, in ogni piccola città c'è una vecchietta che passa tutto il suo tempo a guardare dalla finestra. Ella osserva tutto ciò che accade nel vicinato. Quasi tutto quello che vede è di scarso interesse, ovviamente - solo gente che va e viene per strada. Ma qualcosa di interessante c'è - tipo una bella lite fra gli sposini al di là della strada. Quando qualcosa di interessante accade, la nostra vecchina da guardia va immediatamente a telefonare al giornale o alla polizia oppure ai vicini.

Il ciclo degli eventi assomiglia a questa vecchietta. Il ciclo degli eventi passa tutto il tempo a osservare gli eventi che vanno e vengono, e li vede tutti. Gran parte di essi sono privi di interesse, perciò quando li vede lui li ignora. Ma se vede qualcosa di interessante - un evento che lui sa essere interessante in quanto ad esso è stato collegato un gestore di eventi - allora il ciclo subito chiama a rapporto il gestore di eventi e gli notifica l'avvenimento.

4.1   Funzionamento del programma

Il programma che segue introduce elementarmente alla programmazione UI mostrando in che modo i concetti fondamentali suesposti possano essere realizzati in maniera estremamente semplice. Il programma non usa Tkinter né alcun altro tipo di tecnica GUI. Semplicemente presenta un menù sulla console e preleva un ingresso elementare da tastiera. In ogni caso, come è evidente, esso realizza i quattro compiti fondamentali della programmazione UI.

4.2   Codice sorgente del programma

# ---- compito 2:  definizione del codice di gestione degli eventi
def gestisci_A():
  print "Sbagliato! Prova ancora!"

def gestisci_B():
  print "Bravissimo! Il ranuncolo è un fiore!"
         
def gestisci_C():
  print "Sbagliato! Prova ancora!"

# ---- compito 1: definizione dell'aspetto sullo schermo
print "\n"*100   # pulisci lo schermo
print "             UN QUIZ ESTREMAMENTE APPASSIONANTE"
print "==========================================================="
print "Premere il tasto corrispondente alla risposta, poi [Invio]."
print
print "    A.  Animale"
print "    B.  Vegetale"
print "    C.  Minerale"
print
print "    X.  Termina questo programma"
print
print "==========================================================="
print "Che cos'è un 'Ranuncolo'?"
print

# ---- compito 4: ciclo degli eventi. Ciclo infinito, in attesa di eventi
while 1:

  # Osserva il successivo ingresso
  risposta = raw_input().upper()

  # ---------------------------------------------------------
  # compito 3: associare eventi della tastiera 'interessanti'
  # con i gestori di eventi. Una semplice forma di
  # collegamento
  # ---------------------------------------------------------
  if risposta == "A":
    gestisci_A()
  if risposta == "B":
    gestisci_B()
  if risposta == "C":
    gestisci_C()
  if risposta == "X": 
    # pulisce lo schermo e termina il ciclo degli eventi
    print "\n"*100
    break

  # Si noti che tutti gli altri eventi sono giudicati non
  # interessanti, e percio` ignorati

5.1   Funzionamento del programma

Quando si esegue il programma, grazie alla libreria Tk si vede la finestra principale automaticamente decorata con widget per minimizzare, massimizzare e chiudere la finestra. Possono essere provati per verificarne il funzionamento previsto:

Attivando il widget di chiusura («close», rappresentato dalla «x» nel riquadro alla sinistra della barra del titolo) si genera un evento destroy. Tale evento termina il ciclo principale, e poiché non ci sono altre istruzione di seguito a radice.mainloop() il programma non ha altri compiti da eseguire e termina.

5.2   Codice sorgente del programma

from Tkinter import *   ### (1)

radice = Tk()           ### (2) 
radice.mainloop()       ### (3)

6.1   Funzionamento del programma

Eseguendo il programma, esso apparirà molto simile al precedente, a parte il fatto che si vede di meno. Questo accade in quanto...

6.2   I quadri sono «elastici»

Un quadro è in sostanza un contenitore. L'interno di un contenitore - lo «spazio» dentro il contenitore - si chiama cavità (si tratta di un termine tecnico mutuato dalla libreria Tk).

La cavità è «elastica», come la gomma. Se non si specifica una dimensione minima o massima per il quadro, la cavità si adatterà a ciò che nel quadro è contenuto.

Nel programma precedente, poiché non vi era stato messo nulla, la radice veniva presentata con le sue dimensioni predefinite.

Ma nel programma in esame è stato messo qualcosa nella cavità della radice - è stato inserito mioContenitore1. Sicché la cavità della radice si stringe per adattarsi alle dimensioni di mioContenitore1. Ma poiché non è stato messo alcun widget in mioContenitore1, e non avendo specificato una dimensione minima per mioContenitore1, la cavità della radice si stringe fino a sparire. Ecco il motivo per cui non si vede nulla sotto la barra del titolo.

Nei programmi successivi si porranno dei widget e altri contenitori in mioContenitore1, e si osserverà come mioContenitore1 si espande per adattarsi ad essi.

6.3   Codice sorgente del programma

from Tkinter import *

radice = Tk()

mioContenitore1 = Frame(radice)  ### (1)
mioContenitore1.pack()           ### (2)

radice.mainloop()       

7.1   Alcuni utili termini tecnici

La relazione che intercorre fra un contenitore e i widget in esso contenuti è talvolta definita «genitore/figlio», altre volte «padrone/schiavo» («master/slave»).

7.2   Funzionamento del programma

Avviando il programma si osserva che Container1 ora contiene un pulsante verde con il testo «Ciao, Mondo!». Attivando il pulsante non accade nulla, poiché non è stato specificato cosa debba accadere in tal caso (verrà specificato in seguito):

Per il momento si deve chiudere la finestra - come già visto - attivando l'icona di chiusura sulla barra del titolo.

Si noti altresì come mioContenitore1 abbia adattato le sue dimensioni a pulsante1.

7.3   Codice sorgente del programma

from Tkinter import *

radice = Tk()

mioContenitore1 = Frame(radice)
mioContenitore1.pack()

pulsante1 = Button(mioContenitore1)   ### (1)
pulsante1["text"] = "Ciao, Mondo!"    ### (2)
pulsante1["background"] = "green"     ### (3)
pulsante1.pack()                      ### (4)

radice.mainloop()

8.1   A che scopo strutturare un'applicazione come una classe?

Uno dei motivi per usare le classi in un programma è semplicemente allo scopo di controllare meglio il programma stesso. Un programma organizzato in classi probabilmente è più facile da capire - specie se il programma non è piccolo.

Ma la considerazione più importante è forse che l'uso delle classi consente di evitare le variabili globali. Durante la crescita di un programma in sviluppo a un certo punto occorre quasi sempre condividere informazioni fra diversi gestori di eventi. Ciò è possibile mediante l'uso di variabili globali, ma si tratta di una tecnica inelegante. Un modo migliore è quello di usare le istanze (mediante le variabili self. ¹²), e quindi risulta necessario attribuire all'applicazione una struttura di classe. ⁸

8.2   Funzionamento del programma

All'esecuzione il programma appare esattamente identico al precedente. Nessuna funzionalità è stata aggiunta - solo il codice è stato ristrutturato.

8.3   Codice sorgente del programma

from Tkinter import *

class MiaApp:                         ### (1)
  def __init__(self, mioGenitore):    ### (1a)
    self.mioContenitore1 = Frame(mioGenitore)
    self.mioContenitore1.pack()
                
    self.pulsante1 = Button(self.mioContenitore1) 
    self.pulsante1["text"] = "Ciao, Mondo!"     
    self.pulsante1["background"] = "green"      
    self.pulsante1.pack()                              
                

radice = Tk()
miaApp = MiaApp(radice)  ### (2)
radice.mainloop()        ### (3)

9.1   Funzionamento del programma

Eseguendo il programma si osserva che mioContenitore1 ora contiene - oltre al pulsante verde - altri tre pulsanti:

9.2   Codice sorgente del programma

from Tkinter import *

class MiaApp:
  def __init__(self, genitore):
    self.mioContenitore1 = Frame(genitore)
    self.mioContenitore1.pack()

    self.pulsante1 = Button(self.mioContenitore1)
    self.pulsante1["text"] = "Ciao, Mondo!"   ### (1)
    self.pulsante1["background"] = "green"    ### (1) 
    self.pulsante1.pack()       

    self.pulsante2 = Button(self.mioContenitore1)
    self.pulsante2.configure(text = "Andiamo a fare un giro!") ### (2)
    self.pulsante2.configure(background = "tan")               ### (2)
    self.pulsante2.pack()       


    self.pulsante3 = Button(self.mioContenitore1)
    self.pulsante3.configure(text = "Vieni con me?",
                             background = "cyan")  ### (3)
    self.pulsante3.pack()       

    self.pulsante4 = Button(self.mioContenitore1,
                            text = "Addio!",
                            background = "red")    ### (4)
    self.pulsante4.pack()       
        

radice = Tk()
miaApp = MiaApp(radice)
radice.mainloop()

10.1   Perché i pulsanti impilati nel precedente programma?

Si ricordi che nel precedente programma i pulsanti erano stati impacchettati senza specificare l'opzione side, e di conseguenza essi risultavano impilati. Ciò avveniva a causa del fatto che per predefinizione side ha valore TOP.

Di conseguenza, impacchettando pulsante1, esso veniva impacchettato sopra la cavità interna a mioContenitore1. Ciò lasciava la cavità interna a mioContenitore1 posizionata sotto pulsante1. In seguito, impacchettando pulsante2, esso veniva impacchettato sopra la cavità, ossia immediatamente al di sotto di pulsante1, lasciando la cavità posizionata al di sotto di pulsante2.

Se i pulsanti fossero stati impacchettati in un diverso ordine - per esempio, prima pulsante2 e poi pulsante1 - le loro posizioni sarebbero state invertite, e pulsante2 sarebbe stato sopra.

Sicché risulta evidente che uno dei modi per controllare l'aspetto del GUI è attraverso l'ordine in cui si impacchettano i widget nei contenitori.

10.2   Terminologia tecnica: «orientazione»

Con «orientazione verticale» si intende i lati TOP e BOTTOM. Con «orientazione orizzontale» si intende i lati LEFT e RIGHT.

Durante l'impacchettamento è possibile mischiare le orientazioni. Ad esempio si sarebbe potuto impacchettare un pulsante in verticale (ad esempio TOP) e l'altro in orizzontale (ad esempio LEFT).

Ma mischiare così le orientazioni in un contenitore non è una buona idea. Usando orientazioni miste è difficile prevedere quale sarà il risultato visivo, con risultati particolarmente sorprendenti in caso di ridimensionamento della finesta.

Dunque è una buona pratica il non mischiare le orientazioni nel medesimo contenitore. Il modo corretto per gestire GUI complicati, in cui è effettivamente necessario avere orientazioni multiple, è attraverso l'annidamento dei contenitori. ⁹

10.3   Funzionamento del programma

Eseguendo il programma si noteranno i pulsanti affiancati:

10.4   Codice sorgente del programma

from Tkinter import *

class MiaApp:
  def __init__(self, genitore):
    self.mioContenitore1 = Frame(genitore)
    self.mioContenitore1.pack(side = LEFT)

    self.pulsante1 = Button(self.mioContenitore1)
    self.pulsante1["text"] = "Ciao, Mondo!"   ### (1)
    self.pulsante1["background"] = "green"    ### (1) 
    self.pulsante1.pack(side = LEFT)       

    self.pulsante2 = Button(self.mioContenitore1)
    self.pulsante2.configure(text = "Andiamo a fare un giro!") ### (2)
    self.pulsante2.configure(background = "tan")               ### (2)
    self.pulsante2.pack(side = LEFT)       


    self.pulsante3 = Button(self.mioContenitore1)
    self.pulsante3.configure(text = "Vieni con me?",
                             background = "cyan")  ### (3)
    self.pulsante3.pack(side = LEFT)       

    self.pulsante4 = Button(self.mioContenitore1,
                            text = "Addio!",
                            background = "red")    ### (4)
    self.pulsante4.pack(side = LEFT)       

        
radice = Tk()
miaApp = MiaApp(radice)
radice.mainloop()

11.1   Funzionamento del programma

All'esecuzione si osservano due pulsanti:

Premendo il pulsante «Conferma» se ne varia il colore:

Premendo «Annulla» si termina l'applicazione.

Inoltre, se si preme il tasto [Tab] sulla tastiera. si può notare che il cosiddetto «fuoco» si alterna fra i due pulsanti. Tuttavia la pressione del tasto [Invio] non sortisce alcun effetto. Ciò accade in quanto si sono realizzati i collegamenti coi widget solo per le pressioni dei tasti del dispositivo di puntamento (e non per gli eventi relativi alla tastiera). Tra breve la lacuna sarà colmata.

Si noti anche che le dimensioni dei pulsanti seguono la larghezza del testo in essi contenuto, il che non è esteticamente soddisfacente. Anche in questo caso si provvederà nei successivi esempi.

11.2   Codice sorgente del programma

from Tkinter import *

class MiaApp:
  def __init__(self, genitore):
    self.mioGenitore = genitore  ### (7) ricorda: il genitore e` radice
    self.mioContenitore1 = Frame(genitore)
    self.mioContenitore1.pack()

    self.pulsante1 = Button(self.mioContenitore1)
    self.pulsante1.configure(text = "Conferma", background = "green")
    self.pulsante1.pack(side = LEFT)  
    self.pulsante1.bind("<Button-1>", self.pulsante1Premuto) ### (1)

    self.pulsante2 = Button(self.mioContenitore1)
    self.pulsante2.configure(text = "Annulla", background = "red")   
    self.pulsante2.pack(side = RIGHT)
    self.pulsante2.bind("<Button-1>", self.pulsante2Premuto) ### (2)
                
  def pulsante1Premuto(self, evento):           ### (3)
    if self.pulsante1["background"] == "green": ### (4)
      self.pulsante1["background"] = "yellow"
    else:
      self.pulsante1["background"] = "green"
        
  def pulsante2Premuto(self, evento):  ### (5)
    self.mioGenitore.destroy()         ### (6)

                
radice = Tk()
miaApp = MiaApp(radice)
radice.mainloop()

12.1   Il concetto di fuoco

Chi conosce la mitologia greca saprà chi erano le Arpìe. Erano tre vecchie le quali avevano il controllo dei destini degli esseri umani. Ogni vita umana era un filo nelle loro mani, e quando esse lo tagliavano la vita finiva.

La particolarità delle Arpìe era che esse avevano un solo occhio in tre. Quella delle tre che aveva l'occhio vedeva, e comunicava alle altre due ciò che vedeva. L'occhio veniva passato dall'una all'altra, sicché esse vedevano a turno. Ovviamente se qualcuno riusciva a rubare l'occhio otteneva un consistente vantaggio per poter trattare con le Arpìe.

Il fuoco è ciò che consente ai widget del GUI di vedere gli eventi di tastiera. Il fuoco è per i widget ciò che l'occhio era per le Arpìe.

Solamente un widget alla volta può essere a fuoco; il widget che «è a fuoco» è quello che vede, e reagisce a, gli eventi di tastiera. «Mettere a fuoco» un widget è il processo di dare il fuoco al widget.

Nel programma in esame, ad esempio, il GUI ha due pulsanti: «Conferma» e «Annulla». Si supponga di premere [Invio]. Tale pressione corrisponderà ad un evento intercettato dal pulsante «Conferma», il che indicherà che l'utente ha accettato l'opzione? Oppure sarà inviato al pulsante «Annulla», il che indicherà che l'utente ha interrotto l'operazione? La risposta dipende da chi ha il fuoco, ossia da quale dei due pulsanti (eventualmente) è a fuoco.

Come l'occhio delle Arpìe, che passa dall'una all'altra, il fuoco può passare da un widget all'altro. Ci sono molte maniere di spostare il fuoco da un widget all'altro. Si può fare mediante il dispositivo di puntamento. È possibile mettere a fuoco un widget utilizzando il tasto sinistro del dispositivo di puntamento.

Un altra maniera di spostare il fuoco è mediante utilizzo della tastiera. L'insieme dei widget che sono in grado di ricevere il fuoco viene mantenuto in una lista circolare (detta «ordine di attraversamento») nella sequenza in cui i widget sono stati creati. Premendo il tasto [Tab] si sposta il fuoco dalla posizione attuale (eventualmente nessuna) al successivo widget della lista. Al termine della lista il fuoco ritorna al widget in testa alla lista. La combinazione [Maiuscole]+[Tab] sposta il fuoco in senso opposto all'interni della lista.

Quando un pulsante è e fuoco si nota una piccola cornice tratteggiata attorno al pulsante oppure al testo del pulsante. Per verificarlo si esegua il precedente programma. All'avvio nessuno dei pulsanti è a fuoco, perciò non si vede nessuna cornice tratteggiata. Se si preme [Tab] si osserva che appare la cornice attorno al pulsante a sinistra, il che indica che è stato messo a fuoco. Premendo ripetutamente [Tab] il fuoco passa al pulsante successivo, e quando raggiunge l'ultimo torna al primo. (In realtà il programma ha solamente due pulsanti, perciò il fuoco si alterna fra essi.)

Nel programma, per fare in modo che il pulsante «Conferma» sia a fuoco sin dall'inizio (0), si usa il metodo focus_force(), che forza il fuoco sul pulsante «Conferma». All'esecuzione del programma si osserverà che il pulsante «Conferma» è a fuoco dal momento in cui l'applicazione inizia a funzionare.

12.2   Eventi di tastiera

Nel programma precedente i pulsanti reagivano solo a un evento di tastiera - la pressione del tasto [Tab] - il quale provocava l'alternarsi del fuoco fra i due pulsanti. Ma la pressione del tasto [Invio] non provocava alcun effetto. Ciò avveniva perché erano stati collegati solamente eventi relativi al dispositivo di puntamento - e non eventi di tastiera - ai pulsanti.

Le istruzioni (1)(2) per collegare eventi di tastiera ai pulsanti sono molto semplici - hanno lo stesso formato celle istruzioni per collegare gli eventi relativi al dispositivo di puntamento. L'unica differenza è che il nome dell'evento è quello di un evento di tastiera (in questo caso <Return>) invece di un evento relativo al dispositivo di puntamento.

Volendo che la pressione del tasto [Invio] sulla tastiera abbia lo stesso effetto della pressione del tasto sinistro del dispositivo di puntamento sul widget, si deve collegare lo stesso gestore di eventi a entrambi i tipi di evento.

Il programma illustra come sia possibile collegare più tipi di evento allo stesso widget (ad esempio un pulsante). Inoltre è possibile collegare più coppie widget/evento al medesimo gestore di evento.

Avendo collegato i pulsanti a più tipi di evento, si noti altresì come sia possibile (3)(4) ricavare informazioni a proposito di un oggetto evento. È possibile (5) passare oggetti evento a una funzione descrivi_evento la quale scriverà (6) informazioni sull'evento; le informazioni sono ottenute dagli attributi dell'oggetto evento.

12.3   Funzionamento del programma

All'esecuzione del programma si osservano due pulsanti. Premendo il sinistro, oppure premendo il tasto [Invio] quando il pulsante è a fuoco, se ne cambia il colore. Premendo il destro, oppure premendo il tasto [Invio] quando il pulsante è a fuoco, si termina l'applicazione. In ciascuno dei casi si dovrebbe poter vedere in console un messaggio che riporta il tempo e il tipo dell'evento.

12.4   Codice sorgente del programma

from Tkinter import *

class MiaApp:
  def __init__(self, genitore):
    self.mioGenitore = genitore
    self.mioContenitore1 = Frame(genitore)
    self.mioContenitore1.pack()

    self.pulsante1 = Button(self.mioContenitore1)
    self.pulsante1.configure(text = "Conferma", background = "green")
    self.pulsante1.pack(side = LEFT)
    self.pulsante1.focus_force()  ### (0)
    self.pulsante1.bind("<Button-1>", self.pulsante1Premuto)
    self.pulsante1.bind("<Return>", self.pulsante1Premuto)  ### (1)

    self.pulsante2 = Button(self.mioContenitore1)
    self.pulsante2.configure(text = "Annulla", background = "red")
    self.pulsante2.pack(side = RIGHT)
    self.pulsante2.bind("<Button-1>", self.pulsante2Premuto)
    self.pulsante2.bind("<Return>", self.pulsante2Premuto)  ### (2)

  def pulsante1Premuto(self, evento):
    descrivi_evento(evento)  ### (3)
    if self.pulsante1["background"] == "green":
      self.pulsante1["background"] = "yellow"
    else:
      self.pulsante1["background"] = "green"

  def pulsante2Premuto(self, evento):
    descrivi_evento(evento)  ### (4)
    self.mioGenitore.destroy()

def descrivi_evento(evento):  ### (5)
  """Scrive una descrizione dell'evento, in base ai suoi attributi
  """
  nome_evento = {"2": "Pressione tasto tastiera",
                 "4": "Pressione pulsante GUI"}
  print "Tempo:", str(evento.time)  ### (6)
  print "Tipo di evento: " + str(evento.type),\
    "(" + nome_evento[str(evento.type)] + ")",\
    "-- Id. widget collegato a evento: " + str(evento.widget),\
    "-- Simbolo tasto collegato a evento: " + str(evento.keysym)


radice = Tk()
miaApp = MiaApp(radice)
radice.mainloop()

13.1   Funzionamento del programma

All'esecuzione, i pulsanti appaiono identici ai precedenti programmi... ma il comportamento è diverso.

Si confronti il comportamento relativo a un evento ButtonPress su uno dei pulsanti; ad esempio, si ponga il puntatore sopra il pulsante «Conferma», poi si prema il tasto sinistro del dispositivo di puntamento senza però rilasciarlo.

Nell'esempio precedente il gestore pulsante1Premuto sarebbe stato immediatamente innescato e si sarebbe visto un messaggio in console. Ma nel programma in esame nulla accade... fino al rilascio del tasto. Al rilascio del tasto si osserva un messaggio in console.

Un'ulteriore differenza si rileva confrontando il comportamento in relazione alla pressione di [Spazio] e [Invio]. Per esempio si usi [Tab] per mettere a fuoco il pulsante «Conferma», poi si prema [Spazio] oppure [Invio].

Nel programma precedente (in cui il pulsante «Conferma» era collegato all'evento <Return>) la pressione di [Spazio] non aveva effetto alcuno, mentre la pressione di [Invio] provocava la variazione cromatica del pulsante. Nel programma in esame, invece, il comportamento è opposto: la pressione di [Invio] provoca la variazione, mentre la pressione di [Invio] non ha effetto.

Nel seguito anche queste questioni saranno esaminate più approfonditamente.

13.2   Codice sorgente del programma

from Tkinter import *

class MiaApp:
  def __init__(self, genitore):
    self.MioGenitore = genitore
    self.MioContenitore1 = Frame(genitore)
    self.MioContenitore1.pack()

    self.pulsante1 = Button(self.MioContenitore1,
                            command=self.pulsante1Premuto)  ### (1)
    self.pulsante1.configure(text = "Conferma", background = "green")
    self.pulsante1.pack(side = LEFT)
    self.pulsante1.focus_force()

    self.pulsante2 = Button(self.MioContenitore1,
                            command=self.pulsante2Premuto)  ### (2)
    self.pulsante2.configure(text = "Annulla", background = "red")
    self.pulsante2.pack(side = RIGHT)

  def pulsante1Premuto(self):  ### (3)
    print "Gestore di eventi 'pulsante1Premuto'"
    if self.pulsante1["background"] == "green":
      self.pulsante1["background"] = "yellow"
    else:
      self.pulsante1["background"] = "green"

  def pulsante2Premuto(self):  ### (4)
    print "Gestore di eventi 'pulsante2Premuto'"
    self.MioGenitore.destroy()


radice = Tk()
miaApp = MiaApp(radice)
radice.mainloop()

14.1   A quali eventi è collegato command?

Nel programma precedente, se si usa [Tab] per mettere a fuoco il pulsante «Conferma», la pressione di [Spazio] determina una variazione cromatica nel pulsante, mentre [Invio] non ha effetto.

Ciò accade perché l'opzione command per un pulsante fornisce al widget sensibilità sia agli eventi relativi alla tastiera che a quelli relativi al dispositivo di puntamento. In effetti il pulsante rimane in ascolto di pressioni di [Spazio], non di [Invio]. Sicché il collegamento di comando comporta una variazione cromatica al pulsante «Conferma», mentre [Invio] non ha effetto.

Si tenga presente, inoltre, che no tutti i widget hanno l'opzione command. I vari tipi di pulsanti (RadioButton, CheckButton, ecc.) ce l'hanno. Altri widget prevedono opzioni simili (ad esempio scrollcommand). In ogni caso è bene approfondire lo studio dei diversi tipi di widget per stabilire il relativo supporto del collegamento di comando. Conoscere a fondo l'opzione command dei widget usati permette di migliorare il funzionamento del GUI (e semplifica la vita del programmatore).

14.2   Usare il collegamento di evento assieme al collegamento di comando

Si è già fatto notare come il collegamento di comando, a differenza del collegamento di evento, non passa automaticamente un oggetto evento come parametro effettivo. Questa situazione rende le cose un po' complicate nel caso si desideri collegare un gestore di eventi a un widget utilizzando entrambi i tipi di collegamento.

Ad esempio, nel programma in esame vorrebbe che i pulsanti reagissero sia a [Invio] che a [Spazio]. Per far ciò è necessario collegare (1) l'evento <Return>, come nel penultimo programma.

Il fatto è che il collegamento di comando non prevede il passaggio di un oggetto evento come parametro effettivo, mentre il collegamento di evento lo prevede. E allora come si può scrivere il gestore di eventi?

Ci sono varie soluzioni possibili a questo problema, ma la più semplice è probabilmente quella di scrivere due gestori di eventi.

Il gestore vero (2) verrà utilizzato per il collegamento di comando, e non si aspetta il passaggio di alcun oggetto evento.

L'altro gestore (3) è solo un involucro (o «wrapper») attorno al gestore vero. Questo involucro si aspetta il passaggio di un oggetto evento come parametro effettivo, ma poi lo ignora, chiamando invece il vero gestore (senza oggetto evento). L'involucro avrà il medesimo nome del vero gestore di eventi, con l'aggiunta di un suffisso _a.

14.3   Funzionamento del programma

All'esecuzione, il comportamento sarà simile a quello del precedente programma, tranne per il fatto che ora i pulsanti reagiscono sia alla pressione di [Invio] che a quella di [Spazio].

14.4   Codice sorgente del programma

from Tkinter import *

class MiaApp:
  def __init__(self, genitore):
    self.mioGenitore = genitore
    self.mioContenitore1 = Frame(genitore)
    self.mioContenitore1.pack()

    self.pulsante1 = Button(self.mioContenitore1,
                            command = self.pulsante1Premuto)
    self.pulsante1.bind("<Return>", self.pulsante1Premuto_a)  ### (1)
    self.pulsante1.configure(text = "Conferma", background = "green")
    self.pulsante1.pack(side = LEFT)
    self.pulsante1.focus_force()

    self.pulsante2 = Button(self.mioContenitore1,
                            command = self.pulsante2Premuto)
    self.pulsante2.bind("<Return>", self.pulsante2Premuto_a)  ### (1)
    self.pulsante2.configure(text = "Annulla", background = "red")
    self.pulsante2.pack(side = RIGHT)

  def pulsante1Premuto(self):  ### (2)
    print "Gestore di eventi 'pulsante1Premuto'"
    if self.pulsante1["background"] == "green":
      self.pulsante1["background"] = "yellow"
    else:
      self.pulsante1["background"] = "green"

  def pulsante2Premuto(self):  ### (2)
    print "Gestore di eventi 'pulsante2Premuto'"
    self.mioGenitore.destroy()

  def pulsante1Premuto_a(self, evento):  ### (3)
    print "Gestore di eventi 'pulsante1Premuto_a' (un involucro)"
    self.pulsante1Premuto()

  def pulsante2Premuto_a(self, evento):  ### (3)
    print "Gestore di eventi 'pulsante2Premuto_a' (un involucro)"
    self.pulsante2Premuto()


radice = Tk()
miaApp = MiaApp(radice)
radice.mainloop()

15.1   Il problema

Il problema che ci si pone è che ogni gestore di eventi è una funzione separata dalle altre. Ciascun gestore di eventi ha variabili locali sue proprie che esso non può condividere con altre funzioni di gestione degli eventi, e neppure con successive invocazioni di se stesso. Quindi ecco la questione: Come può una funzione gestore di eventi condividere dei dati con altri gestori, visto che non può condividere le sue variabili locali con essi?

La soluzione, ovviamente, è che le variabili da condividere non possono essere locali alla funzione di gestione degli eventi; esse devono per forza essere conservate all'esterno della funzione stessa.

15.2   Prima soluzione: variabili globali

Una tecnica per ottenere lo scopo è rendere globali le variabili da condividere. Per esempio, in ogni gestore che necessiti di accedere alle variabili miaVariabile1 e miaVariabile2, si possono inserire le istruzioni seguenti:

global miaVariabile1, miaVariabile2

Tuttavia, l'uso di variabili globali è potenzialmente pericoloso, nonché considerato in genere una tecnica di programmazione sciatta.

15.3   Seconda soluzione: variabili di istanza

Una tecnica più elegante prevede l'uso delle variabili di istanza (ossia, variabili precedute dal prefisso self.) al fine di conservare informazioni da condividere fra gestori di eventi. A tale scopo, ovviamente, l'applicazione dev'essere stata realizzata come una classe, e non come semplice codice in linea.

Nel programma in esame, l'informazione da ricordare e condividere è molto semplice: il nome dell'ultimo pulsante invocato. L'informazione verrà conservata in una variabile di istanza denominata self.mioUltimoPulsanteInvocato (si vedano i commenti ### 1 nel sorgente).

Al fine di dimostrare che l'informazione viene realmente conservata, ogni volta che un gestore viene invocato l'informazione viene scritta in console (si vedano i commenti ### 2 nel sorgente).

15.4   Funzionamento del programma

Il programma mostra tre pulsanti:

All'esecuzione, se se ne preme uno, verrà scritto il suo nome in console, oltre al nome di quello precedentemente premuto.

Si noti che nessuno dei pulsante termina l'applicazione, pertanto, se si desidera interromperla, si deve operare sul widget di chiusura (l'icona con la «X» in un quadratino, sul lato destro della barra del titolo).

15.5   Codice sorgente del programma

from Tkinter import *

class MiaApp:
  def __init__(self, genitore):

    ### 1 -- All'inizio, nessun gestore e` stato ancora invocato.
    self.mioUltimoPulsanteInvocato = None

    self.mioContenitore1 = Frame(genitore)
    self.mioContenitore1.pack()

    self.pulsanteGiallo = Button(self.mioContenitore1,
                                 command = self.pulsanteGialloPremuto)
    self.pulsanteGiallo.configure(text = "GIALLO",
                                  background = "yellow")
    self.pulsanteGiallo.pack(side = LEFT)

    self.pulsanteRosso = Button(self.mioContenitore1,
                                command = self.pulsanteRossoPremuto)
    self.pulsanteRosso.configure(text = "ROSSO", background = "red")
    self.pulsanteRosso.pack(side = LEFT)

    self.pulsanteBianco = Button(self.mioContenitore1,
                                 command = self.pulsanteBiancoPremuto)
    self.pulsanteBianco.configure(text = "BIANCO", background = "white")
    self.pulsanteBianco.pack(side = LEFT)

  def pulsanteRossoPremuto(self):
    print "Premuto pulsante  ROSSO. Il pulsante precedentemente \
invocato era", self.mioUltimoPulsanteInvocato  ### 2
    self.mioUltimoPulsanteInvocato = "ROSSO"   ### 1

  def pulsanteGialloPremuto(self):
    print "Premuto pulsante GIALLO. Il pulsante precedentemente \
invocato era", self.mioUltimoPulsanteInvocato  ### 2
    self.mioUltimoPulsanteInvocato = "GIALLO"  ### 1

  def pulsanteBiancoPremuto(self):
    print "Premuto pulsante BIANCO. Il pulsante precedentemente \
invocato era", self.mioUltimoPulsanteInvocato  ### 2
    self.mioUltimoPulsanteInvocato = "BIANCO"  ### 1


print "\n"*100  # un metodo rozzo ma efficace per pulire lo schermo ;-)
print "Programma avviato..."
radice = Tk()
miaApp = MiaApp(radice)
radice.mainloop()
print "... Fine!"

16.1   Tre tecniche di controllo della disposizione di un GUI

Esistono tre tecniche per controllare la disposizione generale di un GUI:

• attributi dei widget
• opzioni di pack()
• annidamento dei contenitori (quadri)

Nel programma in esame si considereranno le prime due.

Si lavorerà molto coi pulsanti e il quadro che li contiene. Nelle versioni precedenti del programma, il quadro si chiamava mioContenitore1. In questo caso, invece, si utilizzerà un nome un po' più descrittivo: quadro_pulsanti.

1. Per prima cosa, al fine di assicurarsi che i pulsanti abbiano tutti la stessa larghezza, si specifica un attributo width uguale per tutti, mediante la costante larghezza_pulsante. Si noti che l'attributo width è specifico per i widget di tipo Button - non tutti i widget hanno questo attributo. Si noti altresì che l'attributo width viene specificato in unità carattere (ossia, non in pixel, pollici o millimetri). Poiché il testo più lungo («Conferma») contiene 8 caratteri, la larghezza per i pulsanti viene così fissata.

2. Poi si aggiunge dell'imbottitura ai pulsanti. L'imbottitura è spazio aggiuntivo attorno al testo, tra il testo e il bordo del pulsante. Si agisce tramite gli attributi padx e pady del pulsante (attraverso le costanti imb_pulsantex e imb_pulsantey). padx imbottisce lungo l'asse orizzontale, da sinistra a destra. padx imbottisce lungo l'asse verticale, dall'alto al basso.

   Si specifica l'imbottitura orizzontale a 2 millimetri (imb_pulsantex = "2m") e quella verticale a 1 millimetro (imb_pulsantey = "1m"). Si osservi che, a differenza dell'attributo width (che è numerico), i valori di questi attributi vengono racchiusi fra virgolette. Ciò accade in quanto le unità di imbottitura sono specificate usando il suffisso m, sicché è necessario specificare l'estensione delle imbottiture come stringhe e non come numeri.

3. Infine, si aggiunge un po' di imbottitura al contenitore (quadro_pulsanti) che contiene i pulsanti. Per il contenitore è possibile specificare quattro attributi di imbottitura: padx e pady (attraverso le costanti imb_quadro_pulsantix e imb_quadro_pulsantix) specificano l'imbottitura attorno (all'esterno) al quadro. ipadx e ipady specificano l'imbottitura interna, ossia imbottitura che avvolge ciascun widget interno al contenitore.

   Nota

   Si noti che l'imbottitura non viene specificata, per il quadro, come un attributo, ma come opzioni passate al metodo impacchettatore (4). Si capisce che l'imbottitura è un concetto un po' confuso: i quadri hanno imbottitura interna, ma pulsanti e altri widget non ce l'hanno; in certi casi l'imbottitura è un attributo del widget, mentre in altri casi si specifica come opzione del metodo pack().

16.2   Funzionamento del programma

All'esecuzione si osservano due pulsanti:

Però ora dovrebbero avere le stesse dimensioni. I bordi dei pulsanti non stringono più angustamente il testo contenuto, e i pulsanti sono circondati da una certa quantità di spazio libero attorno ad essi.

16.3   Codice sorgente del programma

from Tkinter import *

class MiaApp:
  def __init__(self, genitore):

    #------ costanti per il controllo della disposizione
    larghezza_pulsanti = 8  ### (1)

    imb_pulsantex = "2m"  ### (2)
    imb_pulsantey = "1m"  ### (2)

    imb_quadro_pulsantix = "3m"       ### (3)
    imb_quadro_pulsantiy = "2m"       ### (3)
    imb_int_quadro_pulsantix = "3m"   ### (3)
    imb_int_quadro_pulsantiy = "1m"   ### (3)
    #------------------ fine costanti -------------------

    self.mioGenitore = genitore
    self.quadro_pulsanti = Frame(genitore)

    self.quadro_pulsanti.pack(  ### (4)
      ipadx = imb_int_quadro_pulsantix,  ### (3)
      ipady = imb_int_quadro_pulsantiy,  ### (3)
      padx = imb_quadro_pulsantix,       ### (3)
      pady = imb_quadro_pulsantiy,       ### (3)
      )

    self.pulsante1 = Button(self.quadro_pulsanti,
                            command = self.pulsante1Premuto)
    self.pulsante1.configure(text = "Conferma", background = "green")
    self.pulsante1.focus_force()
    self.pulsante1.configure(
      width = larghezza_pulsanti,  ### (1)
      padx = imb_pulsantex,  ### (2)
      pady = imb_pulsantey   ### (2)
      )

    self.pulsante1.pack(side = LEFT)
    self.pulsante1.bind("<Return>", self.pulsante1Premuto_a)

    self.pulsante2 = Button(self.quadro_pulsanti,
                            command = self.pulsante2Premuto)
    self.pulsante2.configure(text = "Annulla", background = "red")
    self.pulsante2.configure(
      width = larghezza_pulsanti,  ### (1)
      padx = imb_pulsantex,  ### (2)
      pady = imb_pulsantey   ### (2)
      )

    self.pulsante2.pack(side = RIGHT)
    self.pulsante2.bind("<Return>", self.pulsante2Premuto_a)

  def pulsante1Premuto(self):
    if self.pulsante1["background"] == "green":
      self.pulsante1["background"] = "yellow"
    else:
      self.pulsante1["background"] = "green"

  def pulsante2Premuto(self):
    self.mioGenitore.destroy()

  def pulsante1Premuto_a(self, event):
    self.pulsante1Premuto()

  def pulsante2Premuto_a(self, event):
    self.pulsante2Premuto()


radice = Tk()
miaApp = MiaApp(radice)
radice.mainloop()

17.1   Funzionamento del programma

All'esecuzione del programma si osserveranno diversi quadri con differenti colori di sfondo:

17.2   Codice sorgente del programma

from Tkinter import *

class MiaApp:
  def __init__(self, genitore):

    #--- costanti per il controllo della disposizione dei
    #--- pulsanti
    larghezza_pulsanti = 8
    imb_pulsantex = "2m"
    imb_pulsantey = "1m"
    imb_quadro_pulsantix = "3m"
    imb_quadro_pulsantiy = "2m"
    imb_int_quadro_pulsantix = "3m"
    imb_int_quadro_pulsantiy = "1m"
    #--------------------- fine costanti -----------------------

    self.mioGenitore = genitore

    ### Il quadro principale si chiama 'mioContenitore1'
    self.mioContenitore1 = Frame(genitore)
    self.mioContenitore1.pack()

    ### All'interno di 'mioContenitore1' viene utilizzata
    ### l'orientazione VERTICALE (dall'alto al basso).
    ### All'interno di 'mioContenitore1', per prima cosa
    ### si crea 'quadro_pulsanti'; successivamente si creano
    ### 'quadro_alto' e 'quadro_basso': essi sono i quadri
    ### dimostrativi.

    # Il quadro dei pulsanti
    self.quadro_pulsanti = Frame(self.mioContenitore1)
    self.quadro_pulsanti.pack(
      side = TOP,
      ipadx = imb_int_quadro_pulsantix,
      ipady = imb_int_quadro_pulsantiy,
      padx = imb_quadro_pulsantix,
      pady = imb_quadro_pulsantiy,
      )

    # quadro alto
    self.quadro_alto = Frame(self.mioContenitore1)
    self.quadro_alto.pack(side = TOP,
      fill = BOTH,
      expand = YES,
      )

    # quadro basso
    self.quadro_basso = Frame(self.mioContenitore1,
      borderwidth = 5,
      relief = RIDGE,
      height = 50,
      background = "white",
      )
    self.quadro_basso.pack(side = TOP,
      fill = BOTH,
      expand = YES,
      )

    ### Adesso vengono creati altri due quadri,
    ### 'quadro_sinistra' e 'quadro_destra', all'interno di
    ### 'quadro_alto'. Dentro 'quadro_alto' si utilizza
    ### l'orientazione ORIZZONTALE (da sinitra a destra).

    # quadro sinistra
    self.quadro_sinistra = Frame(self.quadro_alto,
      background = "red",
      borderwidth = 5,
      relief = RIDGE,
      height = 250,
      width = 50,
      )
    self.quadro_sinistra.pack(side = LEFT,
      fill = BOTH,
      expand = YES,
      )

    # quadro destra
    self.quadro_destra = Frame(self.quadro_alto,
      background = "tan",
      borderwidth = 5,
      relief = RIDGE,
      width = 250,
      )
    self.quadro_destra.pack(side = RIGHT,
      fill = BOTH,
      expand = YES,
      )

    # Vengono ora aggiunti i pulsanti a 'quadro_pulsanti'

    self.pulsante1 = Button(self.quadro_pulsanti,
                            command = self.pulsante1Premuto)
    self.pulsante1.configure(text = "Conferma", background = "green")
    self.pulsante1.focus_force()
    self.pulsante1.configure(
      width = larghezza_pulsanti,
      padx = imb_pulsantex,
      pady = imb_pulsantey
      )

    self.pulsante1.pack(side = LEFT)
    self.pulsante1.bind("<Return>", self.pulsante1Premuto_a)

    self.pulsante2 = Button(self.quadro_pulsanti,
                            command = self.pulsante2Premuto)
    self.pulsante2.configure(text = "Annulla", background = "red")
    self.pulsante2.configure(
      width = larghezza_pulsanti,
      padx = imb_pulsantex,
      pady = imb_pulsantey
      )

    self.pulsante2.pack(side = RIGHT)
    self.pulsante2.bind("<Return>", self.pulsante2Premuto_a)

  def pulsante1Premuto(self):
    if self.pulsante1["background"] == "green":
      self.pulsante1["background"] = "yellow"
    else:
      self.pulsante1["background"] = "green"

  def pulsante2Premuto(self):
    self.mioGenitore.destroy()

  def pulsante1Premuto_a(self, event):
    self.pulsante1Premuto()

  def pulsante2Premuto_a(self, event):
    self.pulsante2Premuto()


radice = Tk()
miaApp = MiaApp(radice)
radice.mainloop()

18.1   Funzionamento del programma

Il programma imposta quattro finestre in successione.

Si noti che ciascuna finestra va chiusa utilizzando il widget di chiusura - la «X» nel rettangolino a destra della barra del titolo.

Nel caso 1, si osserva l'aspetto del quadro se le dimensioni vengono specificate e se non contiene widget:

Nel caso 2, si osserva il medesimo quadro con alcuni widget (in particolare, tre pulsanti) aggiunti. Si osservi che il quadro si è adattato ai tre pulsanti:

Nel caso 3, si osserva nuovamente un quadro vuoto, ma con l'utilizzo delle opzioni di geometria che controllano le dimensioni complessive della finestra. È visibile lo sfondo azzurro del quadro all'interno dell'area grigia più ampia della finestra:

Nel caso 4, si osserva nuovamente il quadro con tre pulsanti, ma questa volta con l'utilizzo delle opzioni di geometria che controllano le dimensioni complessive della finestra. Si osservi che le dimensioni della finestra sono identiche al caso 3, ma (analogamente al caso 2) il quadro si è adattato ai tre pulsanti, impedendo così la visione dello sfondo azzurro.

18.2   Codice sorgente del programma

from Tkinter import *

class App:
  def __init__(self, radice, usa_geometria, mostra_pulsanti):
    qdr = Frame(radice, width = 300, height = 200, bg = "blue")
    qdr.pack(side = TOP, expand = NO, fill = NONE)

    if usa_geometria:
      radice.geometry("600x400")  ### (1) Si noti l'uso di
                                  ### un metodo del gestore
                                  ### di finestre

    if mostra_pulsanti:
      Button(qdr, text = "Button 1", width = 10).pack(side = LEFT)
      Button(qdr, text = "Button 2", width = 10).pack(side = LEFT)
      Button(qdr, text = "Button 3", width = 10).pack(side = LEFT)


caso = 0
for usa_geometria in (0, 1):
    for mostra_pulsanti in (0,1):
        caso = caso + 1
        radice = Tk()
        radice.wm_title("Caso " + str(caso))  ### (2) Si noti
                                              ### l'uso del metodo
                                              ### 'wm_title' del
                                              ### gestore di finestre
        app = App(radice, usa_geometria, mostra_pulsanti)
        
        radice.mainloop()

19.1   I concetti che stanno alla base delle opzioni di impacchettamento

Allo scopo di comprendere come sia possibile avere il controllo dell'aspetto dei widget all'interno di un contenitore (ossia, un quadro), è necessario rammentare che il gestore di geometria impacchettatore utilizza un modello di distribuzione a cavità. Ossia, ogni contenitore contiene una cavità, e i figli vengono impacchettati in essa.

Trattando del posizionamento e della presentazione delle componenti in un contenitore, sono utili i seguenti tre concetti:

• spazio non richiesto (ossia, la cavità)
• spazio richiesto ma libero
• spazio richiesto e occupato

Quando si impacchetta un widget, ad esempio un pulsante, esso viene impacchettato sempre lungo uno dei quattro lati della cavità. L'opzione di impacchettamento side specifica quale lato usare. Per esempio, specificando side = LEFT, il widget verrà impacchettato (ossia posizionato) lungo il lato sinistro della cavità.

Quando un widget è impacchettato lungo un lato, tale widget richiede l'intero lato, anche se non necessariamente lo occupa interamente. Si supponga di impacchettare un piccolo pulsante «X» lungo il lato sinistro di una grande cavità, come nel seguente diagramma:

              -------------------
richiesto ma  |   |             |
libero -----> |   |   cavità    |
              |   | (spazio non |
              |   |  richiesto) |
richiesto e   |---|             |
occupato ---> | X |             |
              |---|             |
              |   |             |
richiesto ma  |   |             |
libero -----> |   |             |
              |   |             |
              -------------------

La cavità (lo spazio non richiesto) si trova ora alla destra del widget. Il widget «X» ha richiesto l'intero lato sinistro, in una striscia larga abbastanza da contenerlo. Però, poiché il widget «X» è piccolo, esso occupa effettivamente solo una parte dello spazio che ha richiesto, ossia solo la parte necessaria alla sua presentazione.

È evidente che il widget «X» ha richiesto solo lo spazio necessario alla sua presentazione. Se si specificasse l'opzione expand = YES, allora il widget richiederebbe tutto lo spazio disponibile. Non rimarrebbe nella cavità dello spazio non richiesto.

In tali situazioni, il widget «X» ha a sua disposizione un ampio spazio inutilizzato in cui vagare. Dove andrà a finire, all'interno di questo ampio spazio? Dipende dall'opzione di ancoraggio. Quando un widget richiede più spazio di quanto ne utilizzi, allora l'opzione anchor determina la posizione finale del widget all'interno dello spazio richiesto. I valori dell'opzione anchor corrispondono ai punti cardinali. N significa nord (ossia al centro della parte alta dello spazio richiesto); NE significa nordest (ossia nell'angolo in alto a destra dello spazio richiesto); e così via.

Se un widget richiede più spazio di quanto ne utilizzi, il widget può vagare all'interno dello spazio non utilizzato (a seconda dell'opzione anchor); oppure può «crescere» fino a riempire lo spazio non utilizzato, a seconda dell'opzione fill, la quale specifica se un widget possa o non possa crescere per utilizzare («riempire») lo spazio non utilizzato, e in quale direzione:

• fill=NONE significa che non può crescere;
• fill=X significa che può crescere lungo l'asse X (ossia, orizzontalmente);
• fill=Y significa che può crescere lungo l'asse Y (ossia, verticalmente);
• fill=BOTH significa che può crescere sia orizzontalmente che verticalmente;

19.2   Esecuzione del programma

SI provi dunque a eseguire il programma. Non è necessario leggere il codice sorgente, basta eseguire il programma e sperimentare con le varie opzioni di impacchettamento relative ai tre pulsanti dimostrativi:

Il quadro del pulsante «A» gli fornisce una cavità orizzontale in cui spostarsi - il quadro non è più alto del pulsante.

Il quadro del pulsante «B» gli fornisce una cavità verticale in cui spostarsi - il quadro non è più largo del pulsante.

Infine, il quadro del pulsante «C» gli fornisce una cavità abbastanza ampia - molto più larga e più alta del pulsante stesso - in cui vagare.

E per concludere...

19.3   Un utile trucco per la «disinfestazione»

Si sarà notato che l'impacchettamento è una procedura complicata, a causa del fatto che il posizionamento di un widget rispatto agli altri precedentemente impacchettati dipende in parte da come questi erano stati a loro volta impacchettati. Concretamente, se gli altri widget erano stati impacchettati a sinistra, allora la cavità all'interno della quale il successivo widget potrà essere impacchettato si troverà alla loro sinistra; ma se erano stati impacchettati in alto nella cavità, allora la cavità all'interno della quale il successivo widget potrà essere si troverà al di sotto di quelli. Complessivamente, le cose si confondono con estrema facilità.

Ecco allora un utile trucco per la «disinfestazione». Se nello sviluppo della disposizione ci si imbatte in qualche problema - se le cose non avvengono nel modo previsto - allora può essere utile conferire a ciascun contenitore (quadro) un diverso colore di sfondo, per esempio:

bg = "red"

oppure:

bg = "cyan"

oppure:

bg = "tan"

... oppure yellow, o blue, o red, e così via.

Così facendo è possibile osservare come effettivamente i quadri si dispongono nella finestra; questo, spesso, fornisce indicazioni utili per capire il problema.

19.4   Codice sorgente del programma

from Tkinter import *

class MiaApp:
  def __init__(self, genitore):

    #--- costanti per il controllo della disposizione
    #--- dei pulsanti
    larghezza_pulsanti = 8
    imb_pulsantex = "2m"
    imb_pulsantey = "1m"
    imb_quadro_pulsantix = "3m"
    imb_quadro_pulsantiy = "2m"
    imb_int_quadro_pulsantix = "3m"
    imb_int_quadro_pulsantiy = "1m"
    #--------------------- fine costanti -----------------------

    # impostazione delle variabili di controllo Tkinter,
    # controllate dai pulsanti radio
    self.nome_pulsante = StringVar()
    self.nome_pulsante.set("C")

    self.opzione_lato = StringVar()
    self.opzione_lato.set(LEFT)

    self.opzione_riempimento = StringVar()
    self.opzione_riempimento.set(NONE)

    self.opzione_espansione = StringVar()
    self.opzione_espansione.set(YES)

    self.opzione_ancoraggio = StringVar()
    self.opzione_ancoraggio.set(CENTER)

    #---------------

    self.mioGenitore = genitore
    self.mioGenitore.geometry("640x400")

    ### Il quadro principale si chiama 'quadro_grande'
    self.quadro_grande = Frame(genitore) ###
    self.quadro_grande.pack(expand = YES, fill = BOTH)

    ### Viene usata l'orientazione ORIZZONTALE (da sinistra a
    ### destra) all'interno di 'quadro_grande'.
    ### Dentro 'quadro_grande' si creano 'quadro_controllo' e
    ### 'quadro_dimostrativo'.

    # 'quadro_controllo' - praticamente tutto tranne la
    # dimostrazione
    self.quadro_controllo = Frame(self.quadro_grande) ###
    self.quadro_controllo.pack(side = LEFT, expand = NO, padx = 10,
                               pady = 5, ipadx = 5, ipady = 5)

    # All'interno di 'quadro_controllo' si creano un'etichetta
    # per il titolo e un 'quadro_pulsanti'

    mioMessaggio = "Questa finestra illustra l'effetto \ndelle \
opzioni di impacchettamento \n 'expand', 'fill' e 'anchor'."
    Label(self.quadro_controllo,
      text = mioMessaggio,
      justify = LEFT).pack(side = TOP, anchor = W)

    # 'quadro_pulsanti'
    self.quadro_pulsanti = Frame(self.quadro_controllo)
    self.quadro_pulsanti.pack(side = TOP, expand = NO, fill = Y,
                              ipadx = 5, ipady = 5)

    # 'quadro_dimostrativo'
    self.quadro_dimostrativo = Frame(self.quadro_grande)
    self.quadro_dimostrativo.pack(side = RIGHT, expand = YES,
                                  fill = BOTH)

    ### Dentro 'quadro_dimostrativo' vengono creati
    ### 'quadro_alto' e 'quadro_basso'.
    ### Essi saranno i quadri della dimostrazione.
    # 'quadro_alto'
    self.quadro_alto = Frame(self.quadro_dimostrativo)
    self.quadro_alto.pack(side = TOP, expand = YES, fill = BOTH)

    # 'quadro_basso'
    self.quadro_basso = Frame(self.quadro_dimostrativo,
      borderwidth = 5,
      relief = RIDGE,
      height = 50,
      bg = "cyan",
      )
    self.quadro_basso.pack(side = TOP, fill = X)

    ### Vengono aggiunti altri due quadri, 'quadro_sx' e
    ### 'quadro_dx' all'interno di 'quadro_alto'. Si utilizza
    ### l'orientazione ORIZZONTALE (da sinistra a destra)
    ### dentro 'quadro_alto'.

    # 'quadro_sx'
    self.quadro_sx = Frame(self.quadro_alto,
      background = "red",
      borderwidth = 5,
      relief = RIDGE,
      width = 50
      ) 
    self.quadro_sx.pack(side = LEFT, expand = NO, fill = Y)

    # 'quadro_dx'
    self.quadro_dx = Frame(self.quadro_alto,
      background = "tan",
      borderwidth = 5,
      relief = RIDGE,
      width = 250
      )
    self.quadro_dx.pack(side = RIGHT, expand = YES, fill = BOTH)

    # Si pone un pulsante in ciascun quadro significativo
    nomi_pulsanti = ["A", "B", "C"]
    opzioni_lato = [LEFT, TOP, RIGHT, BOTTOM]
    opzioni_riempimento = [X, Y, BOTH, NONE]
    opzioni_espansione = [YES, NO]
    opzioni_ancoraggio = [NW, N, NE, E, SE, S, SW, W, CENTER]

    self.pulsanteA = Button(self.quadro_basso, text = "A")
    self.pulsanteA.pack()
    self.pulsanteB = Button(self.quadro_sx, text = "B")
    self.pulsanteB.pack()
    self.pulsanteC = Button(self.quadro_dx, text = "C")
    self.pulsanteC.pack()
    self.pulsante_con_nome = {"A": self.pulsanteA,
      "B": self.pulsanteB,
      "C": self.pulsanteC
      }

    # Si aggiungono alcuni sottoquadri a 'quadro_pulsanti'
    self.quadro_nomi_pulsanti = Frame(self.quadro_pulsanti,
                                      borderwidth = 5)
    self.quadro_opzioni_lato = Frame(self.quadro_pulsanti,
                                     borderwidth = 5)
    self.quadro_opzioni_riempimento = Frame(self.quadro_pulsanti,
                                            borderwidth = 5)
    self.quadro_opzioni_espansione = Frame(self.quadro_pulsanti,
                                           borderwidth = 5)
    self.quadro_opzioni_ancoraggio = Frame(self.quadro_pulsanti,
                                           borderwidth = 5)

    self.quadro_nomi_pulsanti.pack(side = LEFT, expand = YES,
                                   fill = Y, anchor = N)
    self.quadro_opzioni_lato.pack(side = LEFT, expand = YES,
                                  anchor = N)
    self.quadro_opzioni_riempimento.pack(side = LEFT, expand = YES,
                                         anchor = N)
    self.quadro_opzioni_espansione.pack(side = LEFT, expand = YES,
                                        anchor = N)
    self.quadro_opzioni_ancoraggio.pack(side = LEFT, expand = YES,
                                        anchor = N)

    Label(self.quadro_nomi_pulsanti,
      text = "\nPulsante").pack()
    Label(self.quadro_opzioni_lato,
      text = "Opzione\n'side'").pack()
    Label(self.quadro_opzioni_riempimento,
      text = "Opzione\n'fill'").pack()
    Label(self.quadro_opzioni_espansione,
      text = "Opzione\n'expand'").pack()
    Label(self.quadro_opzioni_ancoraggio,
      text = "Opzione\n'anchor'").pack()

    for opzione in nomi_pulsanti:
      pulsante = Radiobutton(self.quadro_nomi_pulsanti,
                             text = str(opzione),
                             indicatoron = 1,
                             value = opzione,
                             command = self.aggiorna_pulsante,
                             variable = self.nome_pulsante)
      pulsante["width"] = larghezza_pulsanti
      pulsante.pack(side = TOP)

    for opzione in opzioni_lato:
      pulsante = Radiobutton(self.quadro_opzioni_lato,
                             text = str(opzione),
                             indicatoron = 0, 
                             value = opzione, 
                             command = self.aggiorna_dimostrazione, 
                             variable = self.opzione_lato)
      pulsante["width"] = larghezza_pulsanti
      pulsante.pack(side = TOP)

    for opzione in opzioni_riempimento:
      pulsante = Radiobutton(self.quadro_opzioni_riempimento, 
                             text = str(opzione), 
                             indicatoron = 0, 
                             value = opzione, 
                             command = self.aggiorna_dimostrazione, 
                             variable = self.opzione_riempimento)
      pulsante["width"] = larghezza_pulsanti
      pulsante.pack(side = TOP)

    for opzione in opzioni_espansione:
      pulsante = Radiobutton(self.quadro_opzioni_espansione, 
                             text = str(opzione), 
                             indicatoron = 0, 
                             value = opzione, 
                             command = self.aggiorna_dimostrazione, 
                             variable = self.opzione_espansione)
      pulsante["width"] = larghezza_pulsanti
      pulsante.pack(side = TOP)

    for opzione in opzioni_ancoraggio:
      pulsante = Radiobutton(self.quadro_opzioni_ancoraggio, 
                             text = str(opzione), 
                             indicatoron = 0, 
                             value = opzione, 
                             command = self.aggiorna_dimostrazione, 
                             variable = self.opzione_ancoraggio)
      pulsante["width"] = larghezza_pulsanti
      pulsante.pack(side = TOP)

    self.quadroPulsanteAnnulla = Frame(self.quadro_nomi_pulsanti)
    self.quadroPulsanteAnnulla.pack(side = BOTTOM, 
                                    expand = YES, 
                                    anchor = SW)

    self.pulsanteAnnulla = Button(self.quadroPulsanteAnnulla,
                                  text = "Annulla", 
                                  background = "red", 
                                  width = larghezza_pulsanti, 
                                  padx = imb_pulsantex, 
                                  pady = imb_pulsantey)
    self.pulsanteAnnulla.pack(side = BOTTOM, anchor = S)

    self.pulsanteAnnulla.bind("<Button-1>", 
      self.pulsanteAnnullaPremuto)
    self.pulsanteAnnulla.bind("<Return>", 
      self.pulsanteAnnullaPremuto)

    # Si impostano i pulsanti nella posizione iniziale
    self.aggiorna_dimostrazione()

  def aggiorna_pulsante(self):
    pulsante = self.pulsante_con_nome[self.nome_pulsante.get()]
    proprieta = pulsante.pack_info()
    self.opzione_riempimento.set(proprieta["fill"])
    self.opzione_lato.set(proprieta["side"])
    self.opzione_espansione.set(proprieta["expand"])
    self.opzione_ancoraggio.set(proprieta["anchor"])

  def aggiorna_dimostrazione(self):
    pulsante = self.pulsante_con_nome[self.nome_pulsante.get()]
    pulsante.pack(fill = self.opzione_riempimento.get(), 
      side = self.opzione_lato.get(), 
      expand = self.opzione_espansione.get(), 
      anchor = self.opzione_ancoraggio.get()
      )

  def pulsanteAnnullaPremuto(self, evento):
      self.mioGenitore.destroy()


radice = Tk()
miaApp = MiaApp(radice)
radice.mainloop()