App_Button, pulsanti

Il Componente Button è verosimilmente il componente più utilizzato ed anche il più semplice da manipolare.
I Button sono i pulsanti che gli utenti toccano per fare eseguire una qualche azione all’applicazione.
I pulsanti hanno la capacità di rilevare questo tocco (click).
Molti aspetti dei pulsanti possono essere cambiati nella finestra Properties (di Design).
Variazioni analoghe possono essere fatte in Blocks Editor e quindi visibili nell’esecuzione dell’APP.
Questa applicazione è composta da due pulsanti.
  • Il primo ha scritto il testo “Premi qui” su fondo giallo.
    Al click sul pulsante il testo cambia in “Ciao mondo, questa è la mia prima applicazione per Android” colorato di rosso su di uno sfondo verde.
  • Il secondo resetta il tutto facendo tornare il primo pulsante allo stato iniziale.
Una volta avuto accesso alle pagine di App Inventor, fare click sulla voce My Projects, si apre la pagina con l’elenco dei progetti.
Fare click sul pulsante New e nella finestra che si apre scrivere Button facendo click si OK.
Si aprirà sa finestra Design con, all’interno, le sottofinestre Palette, Viewer, Components, Proprietes.
Sopra la parola Palette, su fondo verde il titolo del progetto, cioè Button.
Nella finestra Palette, fare click su Basic, dal sottomenù che si apre individuare il componente Button.
Con il pulsante sinistro del mouse, fare click su Button e senza rilasciare il pulsante trascinare il componente nella finestra Viewer subito al di sotto della scritta Screen1.
Ripetere l’operazione trascinando un secondo Button sotto il primo, prende il nome di Button2.
Nella finestra Components al click su Button1, in finestra Proprietes, sono visibili le proprietà di Button1.
Con questo metodo saranno visibili le proprietà di ogni componente inserito nel progetto.
Assegnare le proprietà a Button1 e Button2.
Nella finestra Components fare click su Button1 che si evidenzia, poi, più in basso, click sul pulsante Rename.
Nella finestra che si apre sostituire Button1 con Bpulsante. Questo è il nome del componente che verrà ritrovato in Blocks Editor.Fare click su OK e il componente assume il nuovo nome.
Fare la stessa cosa assegnando il nome Reset a Button2.
L’abitudine di cambiare nome ai componenti risulterà importante allorché la loro quantità sarà più numerosa. In Blocks Editor, invece di Button1, Button2, Button3 eccetera, sarà possibile leggere i nomi di componenti legati al loro scopo.
Il prefisso B utilizzato serve, in Blocks Editor, a distinguere immediatamente che si tratta di un pulsante.
Con il componente Bpulsante evidenziato rivolgere l’attenzione alla finestra Proprietes ed in questa cambiargli le proprietà come nella tabella sottostante.
Poi fare lo stesso con il componente Reset: nella tabella successiva.
Bpulsante
Facendo click sul quadrato sotto BackgroundColor selezionare Yellow (Giallo)
Il pulsante è abilitato, lasciare così
Testo in grassetto. Mettere il segno di spunta
Variante del tipo di carattere, lasciare così.
Dimensione del carattere, cambiare il valore in 22
Variante del tipo di carattere, lasciare così.
Immagine di fondo del pulsante. Facendo click su None si apre una finestra che permette di fare Upoload di immagini sul server del MIT.
Immagini che diventano disponibili nel progetto. Lasciare così.
Forma del pulsante.
Selezionare rounded, angoli del pulsante arrotondati.
Testo che appare sul pulsante.
Scrivere: Premi qui
Allineamento del testo sul pulsante.
Selezionare center (al centro)
Colore del testo
Lasciare il colore di default (Nero)
Visibile, lasciare così
Larghezza. Di default viene presentato Automatic, facendo click vengono presentate vaie opzioni. Scegliere Fill parent (tutto lo spazio disponibile in orizzontale)
Altezza, lasciare invariato
BReset
Dimensione dei caratteri, cambiare il valore in 22
Forma del pulsante.
Selezionare rounded, angoli del pulsante arrotondati.
Testo che appare sul pulsante.
Scrivere: Reset
Allineamento del testo sul pulsante.
Selezionare center (al centro)
Risultato della manipolazione in Proprietes
Fare click sul pulsante in alto a destra per aprire il Blocks Editor.
Appena fatto click sul pulsante OpenBlock Editor viene scaricato (di nuovo) il file AppInventorForAndroidCodeblocks.jnlp che è, come al solito, da mandare in esecuzione.
Dopo che il Blocks Editor si è aperto, può essere interessante lanciare subito l’Emulatore per vedere come si presentano gli componenti appena approntati.
L’Emulatore ci permette anche di seguire, in tempo reale, gli effetti delle azioni impostate in Blocks Editor.
A lato l’immagine dell’Emulatore con i componenti appena approntati.
All’avvio del Blocks Editor l’area di lavoro è completamente sgombra ed alla sinistra,attivo, il menù My Blocks.
Questo menù presenta 4 voci, My Definition e Screen1, inserite dal sistema, ed altre 2, Bpulsante e Breset che sono i due Button appena creati nella finestra Design.
Hanno il nome che è stato loro assegnato nella finestra Properties.
Facendo click su queste voci si apre un contenitore di blocchi.
I blocchi rappresentano comandi e azioni che possono essere eseguite.
Costruzione del pulsante Bpulsante (Premi qui)
Fare click sulla voce Bpulsante e dal menù che si apre trascinare i 4 blocchi seguenti nell’area di lavoro.
Sul pulsante è scritto:
when Bpulsante.Click do, che in italiano significa
quando (when) viene fatto click su Bpulsante fare (do)
Sul pulsante è scritto:
set Bpulsante.BackgroundColor to, che in italiano significa
setta sfondo (Background) di Bpulsante del colore to (a)
set Bpulsante.Text to, che in italiano significa
setta il testo (Text) a (to)
set Bpulsante.TextColor to, che in italiano significa
setta il testo (Text) a (to)
Spostare i blocchi trascinandoli su Bpulsante.Click, incastrandoli.
Quando questo avviene si sente il suono click.
Si possono ora leggere tre frasi alle quali manca, per adesso, il senso compiuto.

Rimangono da completare le tre frasi al to (a) di ciascun blocco.
Fare click sulla voce Built-In (costruito nel) del menu a sinistra, quindi click sulla voce Text.
Trascinare il blocco Text nell’area di lavoro.
Fare click sulla seconda parola text che diventa editabile.
Sostituire la parola text con:
Ciao mondo, questa è la mia prima applicazione per Android.
Sempre in Built-In fare click sulla voce Color e trascinare i 2 blocchi seguenti nell’area di lavoro.
Blocco per il colore Green (Verde)
Blocco per il colore Red (Rosso)
Trascinare i 3 blocchi ciascuno dopo la parola to (a) incastrandoli come nell’esempio.

Il pulsante è completo.

Con il pulsante sinistro del mouse fare click su esso (nell’emulatore).
L’immagine a lato mostra il risultato.

Il pulsante Bpulsante (Premi qui) è funzionante, rimane da programmare il pulsante Breset (Reset).
L’azione da far compiere al pulsante Breset è: al click rimettere le Proprietà del pulsante Bpulsante come erano in partenza.
Cioè quelle della finestra Properties dalla pagina Design.
Le proprietà sono: sfondo del pulsante giallo, testo in nero e testo “Premi qui”.
Costruzione del pulsante Breset (Reset)
Fare click su My Blocks e poi sulla voce Breset.
Dall’elenco che si apre, trascinare il blocco Breset.Click nell’area di lavoro.
Fare click sulla voce Bpulsante e dall’elenco che si apre trascinare nell’area di lavoro i blocchi.
set Bpulsante.BackgroundColor to, cioe,
setta sfondo (Background) di Bpulsante del colore to (a)
set Bpulsante.Text to,cioè,
setta il testo (Text) di a (to)
set Bpulsante.TextColor to, cioè,
setta colore del testo (TextColor) di Bpulsante a (to)
Spostare i blocchi trascinandoli su Breset.Click incastrandoli all’interno.
Quando questo avviene si sente un segnale acustico click.
Si possono leggere le tre frasi alle quali manca, per adesso, il senso compiuto.

Rimangono da completare le tre frasi al to (a)
Fare click sulla voce Built-In (costruito nel) del menu a sinistra, quindi click sulla voce Text.
Trascinare il blocco Text nell’area di lavoro.
Fare click sulla seconda parola text che diventa editabile.
Sostituire la parola text con: Premi qui
Sempre in Built-In fare click sulla voce Color e trascinare i 2 blocchi sottostanti nell’area di lavoro.
Blocco per il colore Yellow (Giallo).
Blocco per il colore Black (Nero)
Trascinare i 3 blocchi ciascuno dopo la parola to(a) incastrandoli come nell’esempio a lato.
Andando a leggere le frasi che si sono formate, traducendo in italiano:
  • Bpulsante:
    Quando viene fatto click sul pulsante Bpulsante,
    setta il testo di Bpulsante con la frase “Ciao mondo, questa è la mia prima applicazione per Android”
    setta lo sfondo di Bpulsante con il colore verde
    setta il colore del testo di Bpulsante al colore rosso
  • Breset:
    Quando viene fatto click sul pulsante Breset,
    setta il testo di Bpulsante con la frase “Premi qui”.
    setta lo sfondo di Bpulsante con il colore Giallo
    setta il colodre del testo di Bpulsante al colore Nero
Il primo programma con App Inventor è completato.