Capitolo 17 — Finestre e Leo Studio

Tutto quello che abbiamo scritto finora vive nel terminale: testo che entra, testo che esce. È il modo giusto per imparare, ed è anche il modo giusto per molti strumenti veri. Ma prima o poi vorrai una finestra con pulsanti e caselle — un'interfaccia grafica. Leo la costruisce con un modello collaudato da decenni: disegni la finestra, e scrivi il codice che reagisce a ciò che fa l'utente.

Dal terminale alle finestrelle

Prima ancora delle finestre vere e proprie, due funzioni fanno il ponte: aprono finestrelle quando la grafica è disponibile, e si comportano come testo quando non lo è (per esempio in un terminale puro).

messaggio("Benvenuto nel programma!")
variabile ok = domanda("Vuoi continuare?")
scrivi "Hai risposto: {ok}"

Eseguito in un terminale senza grafica, rispondendo «s», stampa:

[Leo] Benvenuto nel programma!
[Leo] Vuoi continuare? [s/n] Hai risposto: vero

messaggio(testo) mostra un avviso con un pulsante OK; domanda(testo) pone una domanda sì/no e restituisce vero o falso. Sono il modo più rapido per dare un tocco interattivo a un programma, senza ancora disegnare nulla.

Leo Studio: disegnare invece di descrivere

Le finestre complete, con pulsanti, caselle, elenchi e grafici, non si scrivono a mano: si disegnano. Lo strumento per farlo è Leo Studio, l'ambiente visuale di Leo, nello spirito dei vecchi Visual Basic e Delphi. Trascini un pulsante dove lo vuoi, imposti le sue proprietà in un pannello, e Leo Studio registra tutto in un file .maschera. Tu scrivi solo la parte interessante: cosa succede quando l'utente agisce.

Leo Studio richiede PySide6 (la libreria grafica) e si avvia con il comando leo studio o dal menu del sistema operativo. Un programma con finestre è una cartella — un progetto — con un file progetto.toml che lo descrive, un file .maschera per ogni finestra (i controlli e il loro aspetto) e un file .leo per ogni finestra (il codice degli eventi). La cosa bella: un progetto disegnato sul computer gira identico sul telefono, e viceversa, perché il formato è lo stesso.

🦁 Curiosità — La madre di tutte le demo

Mouse, finestre e puntatore sullo schermo furono mostrati al mondo da Douglas Engelbart il 9 dicembre 1968, in una presentazione passata alla storia come «la madre di tutte le demo». L'idea di costruire interfacce trascinando i componenti si diffuse poi tra il grande pubblico con strumenti come Visual Basic. Quando trascini un pulsante in Leo Studio, stai ripetendo un gesto che ha più di mezzo secolo.

Gli eventi: reagire con quando

Il cuore di un programma a finestre è il gestore di eventi, introdotto dalla parola quando. Si legge come una frase: «quando il pulsante riceve un clic, fai...». Ecco il codice reale del progetto di esempio «Saluto», che trovi in esempi/progetto_saluto/:

quando Finestra1.apertura fai
    Etichetta1.testo = "Benvenuto! Come ti chiami?"
fine

quando PulsanteSaluta.clic fai
    se vuota(CasellaNome.testo) allora
        messaggio("Scrivi prima il tuo nome")
    altrimenti
        Etichetta1.testo = "Ciao, {CasellaNome.testo}!"
    fine
fine

Due gestori, due momenti. Il primo scatta all'apertura della finestra e imposta il testo di un'etichetta. Il secondo scatta al clic del pulsante: legge quello che l'utente ha scritto nella casella (CasellaNome.testo), e se è vuoto protesta con un messaggio, altrimenti saluta. I controlli sono oggetti: leggi e cambi le loro proprietà con il punto, come hai fatto con gli oggetti del Capitolo 11.

💡 L'idea — Il campanello

Un evento come quando PulsanteSaluta.clic fai è come il campanello di casa: il programma se ne sta tranquillo, senza fare nulla, finché qualcuno non suona. Solo allora esegue la risposta che hai preparato. Non devi stare tu a controllare di continuo se c'è qualcuno alla porta: ci pensa il campanello ad avvisarti al momento giusto.

La regola d'oro delle finestre

C'è un principio che all'inizio confonde e poi diventa ovvio. Il codice «fuori» dai gestori (il blocco inizio, le variabili) gira una volta sola, all'apertura. Per reagire a ciò che l'utente fa dopo, serve un quando. Questo codice, per esempio, non funziona come ci si aspetterebbe:

inizio
    se CasellaTesto1.testo == "Rosso" allora
        Finestra1.colore = "rosso"
    fine
fine

All'apertura la casella è vuota, la condizione è falsa, e non viene mai più ricontrollata. La versione giusta mette il controllo dentro un gestore che scatta ogni volta che la casella cambia:

quando CasellaTesto1.cambio fai
    se CasellaTesto1.testo == "Rosso" allora
        Finestra1.colore = "rosso"
    fine
fine

Leo è così attento a questo errore che, se nel blocco iniziale leggi una proprietà che l'utente può cambiare, ti avvisa all'avvio suggerendoti l'evento giusto. Tienilo a mente: nelle finestre, il tempo passa, e il codice che reagisce deve stare dentro un quando.

Più finestre nello stesso progetto

Un programma può avere più finestre, e ognuna vede i controlli di tutte. Con apri_finestra("Nome") e chiudi_finestra("Nome") passi dall'una all'altra. L'esempio esempi/login_programma/ mostra uno schema ricorrente — una schermata di accesso che, se le credenziali sono giuste, apre la finestra del programma vero e proprio:

quando PulsanteAccedi.clic fai
    se CasellaUtente.testo == UTENTE e CasellaSegreta.testo == PAROLA_SEGRETA allora
        EtichettaErrore.testo = ""
        apri_finestra("Programma")
    altrimenti
        EtichettaErrore.testo = "Utente o password non corretti. Riprova."
    fine
fine

Un'accortezza importante, spiegata nei commenti dell'esempio: non si chiude la finestra iniziale (quella del login), perché chiudere la finestra iniziale termina il programma. La si lascia aperta «sotto» e si apre la nuova sopra; per tornare indietro si chiude quella nuova e la prima riricompare.

Il grande catalogo dei controlli

Leo Studio mette a disposizione oltre centoquaranta controlli, raccolti in schede tematiche: dalle basi (etichette, pulsanti, caselle) ai contenitori, dai dati (tabelle, grafici, alberi) al disegno, dai media (suono, video, fotocamera) ai controlli «Italia» (codice fiscale, IBAN, targa, calendario delle festività), fino a una scheda «Giochi» con sprite, fisica e scene, e una scheda «Telefono» con bussola, GPS e sensori. Non c'è spazio qui per elencarli; l'elenco completo, con le proprietà e gli eventi di ciascuno, è nella Guida al linguaggio e nella scheda STUDIO.md. La cosa da ricordare è che, quando ti servirà un certo mattone dell'interfaccia, quasi certamente c'è già.

Prova tu

Per questi esercizi serve Leo Studio installato (con PySide6).

1. Apri Leo Studio, crea un progetto nuovo e ricostruisci il «Saluto»: una casella di testo, un pulsante e un'etichetta che saluta per nome al clic.
2. Aggiungi al tuo «Saluto» un secondo pulsante «Pulisci» che svuota la casella e l'etichetta.
3. Parti dall'esempio login_programma, cambia le credenziali e aggiungi alla finestra del programma un contatore di note salvate che cresce a ogni Salva.