Vai al contenuto
Leo

03 Sezione 3 di 15

Il tuo primo programma

In questa sezione costruisci, un clic alla volta, un vero programma con una finestra: un'etichetta, un pulsante e una casella in cui scrivere il nome. Alla fine saprai già come funziona ogni programma con le finestre.

  • 5 minuti di lettura
  • Livello: base
  • 4 esempi verificati

Che cosa costruiamo#

Un programma con una finestra che saluta: premi il pulsante e l'etichetta cambia. Poi lo miglioriamo con una casella in cui scrivere il proprio nome.

Passo 1 — Crea il progetto#

Un programma con le finestre, in Leo, è un progetto: una cartella che contiene le finestre e il loro codice.

  1. In Leo Studio scegli File → Nuovo progetto… (oppure Ctrl+N, o Applicazione vuota nella schermata di benvenuto).

  2. Scegli la cartella in cui creare il progetto, per esempio Documenti.

  3. Scrivi il nome del progetto: Saluto. Premi OK.

Al centro compare Finestra1, vuota: è la finestra del tuo programma.

Passo 2 — Metti un'etichetta e un pulsante#

  1. Nella barra dei controlli in alto apri la categoria Base.

  2. Trascina un'Etichetta sulla finestra, in alto. Si chiama Etichetta1.

  3. Trascina un Pulsante sotto l'etichetta. Si chiama Pulsante1.

  4. Sistema posizione e dimensioni con il mouse: le guide rosse ti aiutano ad allineare.

Passo 3 — Cambia le scritte#

Seleziona il pulsante e, nel pannello Proprietà a destra, cambia testo in Saluta. Fai lo stesso con l'etichetta: Premi il pulsante. Le modifiche si vedono subito sulla finestra.

Passo 4 — Scrivi il codice del clic#

Fai doppio clic sul pulsante. Leo Studio apre l'editor del codice e scrive per te lo scheletro del gestore, cioè il pezzo di codice che parte quando il pulsante riceve un clic:

Finestra1.leocontrollato con Leo
quando Pulsante1.clic fai fine

Si legge come una frase: «quando Pulsante1 riceve un clic, fai…». Il cursore è già sulla riga vuota: scrivi l'istruzione che cambia il testo dell'etichetta.

Finestra1.leoprovato con Leo
quando Pulsante1.clic fai    Etichetta1.testo = "Ciao! Benvenuto in Leo."fine
Risultato (controlli simulati)
Etichetta1.testo = "Ciao! Benvenuto in Leo."

Etichetta1.testo vuol dire «la proprietà testo di Etichetta1»; il segno = le dà un nuovo valore. Il testo va sempre tra virgolette.

Passo 5 — Esegui con F5#

Premi F5 (o ESEGUI nella barra a sinistra). Leo Studio salva e apre la tua finestra: premi Saluta e l'etichetta cambia. Per chiudere il programma usa la ✕ della finestra oppure STOP (Maiusc+F5).

Il primo programma con le finestre è pronto: una finestra, un controllo e un gestore d'evento. Ogni programma con le finestre, anche il più grande, segue questo stesso schema.

Passo 6 — Miglioralo: chiedi il nome#

Ora facciamo salutare per nome, e contiamo quante volte si preme il pulsante.

  1. Dalla categoria Inserimento trascina una CasellaTesto sotto l'etichetta.

  2. Con la casella selezionata premi F2: nel pannello Proprietà si seleziona il suo nome. Scrivi CasellaNome e premi Invio. Un nome che dice a che cosa serve il controllo rende il codice più facile da leggere (e se il nome compare già nel codice, Leo Studio lo cambia anche lì).

  3. Scrivi il codice qui sotto al posto di quello di prima.

Finestra1.leoprovato con Leo
variabile clic = 0 quando Finestra1.apertura fai    Etichetta1.testo = "Come ti chiami?"fine quando Pulsante1.clic fai    se vuota(CasellaNome.testo) allora        messaggio("Scrivi prima il tuo nome")    altrimenti        aumenta clic        Etichetta1.testo = "Ciao, {CasellaNome.testo}! Clic numero {clic}."    finefine
Risultato (controlli simulati)
Etichetta1.testo = "Ciao, Ada! Clic numero 2."

Che cosa c'è di nuovo:

  • variabile clic = 0 crea una variabile, una scatola con un nome che ricorda un valore;
  • quando Finestra1.apertura fai parte una volta sola, quando la finestra si apre;
  • se … allora … altrimenti … fine sceglie che cosa fare: se la casella è vuota mostra un messaggio, altrimenti saluta;
  • aumenta clic aggiunge 1 alla variabile;
  • dentro un testo, {CasellaNome.testo} e {clic} vengono sostituiti dal loro valore.

Qui sopra, nel riquadro del risultato, vedi che cosa succede con Ada nella casella dopo due clic: il manuale ha eseguito davvero questo codice con i controlli simulati.

Dove finisce il tuo lavoro#

Ctrl+S salva. Nella cartella Saluto trovi tre file:

Cartella del progetto
Saluto/
    progetto.toml        nome del progetto, finestra iniziale, stile del codice
    Finestra1.maschera   posizione e proprietà dei controlli (la scrive Leo Studio)
    Finestra1.leo        il codice degli eventi, scritto da te

Per riaprire il progetto usa File → Apri progetto… (Ctrl+O) o i progetti recenti della schermata di benvenuto. Per darlo a chi non ha Leo puoi trasformarlo in un file .exe: vedi Creare il .exe.

E senza finestre?#

Non tutti i programmi hanno bisogno di una finestra. Un programma testuale scrive e legge nel terminale: in Leo Studio l'uscita compare nel pannello Uscita. È il modo più rapido per imparare il linguaggio.

principale.leoeseguito con Leo
inizio    variabile nome = chiedi("Come ti chiami? ")    stampa("Ciao, {nome}!")    se lunghezza(nome) > 5 allora        stampa("Che nome lungo!")    finefine
Uscita
Come ti chiami? Beatrice
Ciao, Beatrice!
Che nome lungo!
  • chiedi fa una domanda e restituisce quello che l'utente scrive;
  • stampa scrive una riga;
  • inizio … fine racchiude il programma principale, il codice che parte subito (è facoltativo, ma rende il programma più ordinato).

Un progetto testuale si crea dalla riga di comando con leo nuovo MioProgramma --testuale; un singolo file .leo si esegue con leo programma.leo. Nella prossima sezione impari tutte le basi del linguaggio con programmi come questo.