App_ListPicker_Gestione_liste

Le liste sono un componente estremamente potente, esse possono rappresentare qualsiasi cosa. Oltre alla pagina Design, in modo più flessibile, le liste possono essere gestite in Blocks Editor. In Blocks Editor, alle liste, possono essere aggiunti elementi (item) ed anche altre liste, ogni item, a sua volta, può essere modificato, eliminato e sostituito. Questa applicazione mostra come:
• Creare una lista direttamente in Blocks Editor
• Popolarla con item (voci)
• Aggiungere Item
• Controllare se c’è un Item nella lista
• Modificare Item
• Eliminare Item
• Aggiungere una Lista ad un’altra Lista
Altre operazioni possono essere ricavate dal libro "Usare App Inventor; scrivere e distribuire App per cellulari e tablet Android"
Componenti e proprietà da assegnare:

Componente

Gruppo

Nome

Proprietà

Text

Width

Horizz.

ScreenArr.

HA1

Fill Parent

Button

Basic

bPopolaListaSquadre

Popola Lista Squadre

100

ListPicker

Basic

ListaVuotaSuDesign

Lista vuota su Design

Automatic

Table

ScreenArr.

TA (3 col.. 4 righe)

Automatic

Label

Basic

lItemInLista

ID item

100

Button

Basic

bAggiungeItem

Aggiunge Item

100

TextBox

Basic

tbAggiungeItem

Aggiunge Item (Hint)

100

Button

Basic

bItemInLista

Item In Lista ?

100

TextBox

Basic

tbItemInLista

Item In Lista ?

100

TextBox

Basic

tbCambiaCon

Cambia con (Hint)

100

Label

Basic

lXVariazioni

X Variazioni

100

Button

Basic

bCambiaIn

Cambia in

100

Button

Basic

bElimina

Elimina

100

Horizz.

ScreenArr.

HA2

Fill Parent

Button

Basic

bPopolaListaNascosta

Popola Lista Nascosta

Automatic

Button

Basic

pAppendeListaNascosta

Appende ListaNascosta

Automatic
Come dovrebbero presentarsi la pagina Design e l’Emulatore:
Aprire Blocks Editor
Notare che il componente ListPicker con nome ListaVuotaSuDesign ha campo ElementsFromString vuoto.
In altre parole, facendo click su di esso, questo componente non ha una lista di Item da mostrare.
Nel Blocks Editor verrà popolato con Item e su questi saranno eseguite diverse azioni.
Definire una lista:
Fare click su Built In e poi su Definition.
Trascinare il blocco variable nell’area di lavoro.
Fare click su Lists e trascinare il blocco make a list sul precedente incastrandolo dopo la parola to.
Fare click sulla parola variable che diventa editabile. Scrivere ListaSquadre (senza spazio)
Questa è la lista, il suo nome è ListaSquadre, e per adesso è vuota.
Popolare una lista:
La lista verrà popolata al click su un pulsante.
Fare click su My Blocks e poi su bPopolaListaSquadre.
Trascinare il blocco click nell’area di lavoro.
Fare click su Built In e poi su Lists.
Trascinare il blocco add items to lists sul blocco precedente incastrandolo all’interno.
Fare click su My Blocks e poi su My Definitions.
Trascinare il blocco ListaSquadre sul blocco precedente incastrandolo dopo la
parola list. Questa è la lista che verrà popolata.
Fare click su Built-In e trascinare per tre volte il blocco text sul blocco add item to list incastrandoli dopo la parola item.
Le prese per l’incastro faranno un nuovo posto ad ogni inserimento.
In modo analogo a come fatto con il blocco variabile, fare click su ciascuna parola text e sostituirla, rispettivamente con Juventus, Fiorentina, Roma.
Questi sono gli item che popoleranno la lista.
In modo analogo a come fatto con il blocco variabile, fare click su ciascuna parola text e sostituirla, rispettivamente con Juventus, Fiorentina, Roma.
Questi sono gli item che popoleranno la lista.
Ora gli Item della lista ListaSquadre vengono assegnati al componente ListaVuotaSuDesign.
Fare click su My Blocks e poi su ListaVuotaSuDesign.
Trascinare il blocco ElementFromStrng sui blocchi precedenti incastrandolo sotto il blocco add item to list. Questo è il blocco che si occupa di inserire gli elementi text (Juventus,Fiorentina,Roma) all’interno della lista facendo in modo che siano visibili come elenco cliccabile.
Fare click su My Definitions e trascinare il blocco Lista-Squadre sul blocco precedente incastrandolo dopo la parola to.
Questo dovrebbe essere il risultato dell’assemblaggio dei blocchi.
Nell’emulatore fare click sul pulsante PopolaLista Squadre e poi sul pulsante
Lista vuota su Design
Vengono mostrati sul display gli tem inseriti in Blocks Editor perché ListaVuotaSuDesign non è più vuota.
Aggiungere Item (Voci) ad una lista:
Gli Item verranno aggiunti alla lista facendo click su di un pulsante.
Fare click su My Blocks e poi su bAggiungeItem.
Trascinare il blocco click nell’area di lavoro.
Fare click su Built-In e poi su Lists.
Trascinare il blocco add items to lists sul blocco precedente incastrandolo all’interno.
Fare click su My Blocks e poi su My Definitions.
Trascinare il blocco ListaSquadre sul blocco precedente incastrandolo dopo la parola list.
Questa è la lista a cui verranno aggiunti gli Item.
Gli item da aggiungere dovranno trovarsi nel componente TextBox il cui nome è tbAggiungeItem ed il cui Hint (testo di suggerimento) è Aggiunge Item.
Per prelevare il testo, fare click su tbAggiungeItem, e trascinare il blocco Text sul blocco add items to lists incastrandolo dopo la parola item
All’inserimento del testo nel TextBox (tbAggiungeItem) comparirà la tastiera virtuale.
Dopo inserito del testo, al click sul Button (bAggiungeItem) il testo viene prelevato dal TextBox ed inserito nella lista ListaSquadre.
La tastiera virtuale deve essere fatta scomparire.
Per fare questo, prelevare il blocco HideKeyboar (Nascondi tastiera) ed incastrarlo sotto il blocco add items to lists.
La tastiera è nascosta può ora essere cancellato dal componente TextBox il testo inserito nella lista.
Prelevare il blocco Text ed incastrarlo sotto il blocco precedente.
Fare click su Built In e trascinare il blocco text sul blocco precedente incastrandolo dopo la parola to.
Fare click su text e renderlo editabile, cancellare la parola text. In questo modo il TextBox verrà vuotato.
Adesso gli Item della lista ListaSquadre vengono assegnati al componente ListaVuotaSuDesign.
Fare click su My Blocks e poi su ListaVuotaSuDesign.
Trascinare il blocco ElementFromStrng sotto il blocco tbAggiungeItem.Text incastrandolo.
Fare click su My Definitions. Trascinare il blocco precedente incastrandolo dopo la parola to.
Questo dovrebbe essere il risultato dell’assemblaggio dei blocchi.
Al click sul TextBox si apre tastiera virtuale. Inserire del testo e fare click sul pulsante.
La tastiera scompare. Fare click su pulsante "Lista vuota su design" il testo è stato aggiunto alla lista.

Leggere una lista per trovare un Item (Voce):
Il cambiamento del testo in un Item esistente o la cancellazione del’Item medesimo avviene per la posizione dell’Item all’interno della lista, cioé per il suo Indice (Index in inglese).
Index non è altro che il numero della posizione dell’Item all’interno della lista.
La posizione Index può cambiare con l’inserimento o la cancellazione degli Item.
Per questa ragione, prima di fare un’operazione è necessario sapere dove l’Item si trova (quale Index ha).

Il sistema dispingue fra maiuscole e minuscole. Ad esempio le parole fiorentina (abitante di Firenze) e Fiorentina (squadra di calcio di Firenze) sono due parle diverse.

In questo esempio, la lettura della lista viene fatta al click sul pulsante bItemInLista (Item in Lista?) ed il risultato inserito nelle Label lItemInLista (Id item) e lXVariazioni (X Variazioni).
In lItemInLista (Id item) verrà scritto se c’è o no, in lItemInLista (Id item) l’Index per le operazioni di modifica o cancellazione.
Sarebbe potuto bastare anche solo la Label lXVariazioni (X Variazioni), ma con 2 Label, una per il risultato testuale e l’altra per il numero di Index l’esempio risulta più chiaro. Il contenuto della lista verrà testato facendo click su di un pulsante.
Fare click su My Blocks e poi su bItemInLista.
Trascinare il blocco click nell’area di lavoro.
Fare click su lXVariazioni e trascinare il blocco Text sotto il blocco lItemInLista ed incastrarlo.
Fare click su Built-In, poi su Text. Trascinare il blocco text sul blocco precedente incastrandolo dopo la parola to.
Rendere editabile la parola text ed eliminare la parola text.
Se il risultato sarà positivo il contenuto conterrà l’Index della voce testata.
Fare click si lItemInLista e trascinare il blocco Text sul precedente incastrandolo dentro.
In questo blocco verrà posto il risultato della lettura della lista.

Fare click su Built-In, poi su Text. Trascinare il blocco text sul blocco precedente incastrandolo dopo la parola to.
Rendere editabile la parola text e sostituirla con il testo: non c'è.
Se il risultato sarà positivo il contenuto verrà cambiato in modo idoneo.
Vengono ora inseriti i blocchi per il test di esistenza della Voce.
Fare click su Built In e poi su Control. Trascinare il blocco if test then-do sotto in blocco lItemInLista incastrandolo.
Fare click su Lists e trascinare il blocco is in list? (è nella lista?) sul blocco precedente incastrandolo dopo la parola list.
Fare click su My Blocks e poi su My Definitions. Trascinare il blocco ListaSquadre sul blocco
precedente incastrandolo dopo la parola list. Questa è la lista sulla quale verrà eseguito il test.
Fare click su tbItemInLista, trascinare il blocco Text sul blocco is in list? Incastrandolo dopo thing
Questo blocco corrisponde al contenuto del TextBox tbItemInLista (hint = Item in Lista ?).
Questo TextBox conterrà la voce da testare per la sua esistenza nella lista.
Se l’esito del test sarà positivo verranno eseguite le istruzioni corrispondenti ai blocchi interni.
Verrà prelevato l’Index della voce e variato il contenuto dei blocchi lItemInLista e lXVariazioni.
Fare click su lXVariazioni e trascinare il blocco Text all’interno del blocco if test then-do ed incastrarlo.
Fare click su Built-In poi su Lists e trascinare il blocco position in list sul blocco prece-dente incastrandolo dopo la parola to
Fare click su tbItemInLista, trascinare il blocco Text sul blocco precedente e incastrarlo dopo thing
Fare click su My Definitions, trascinare il blocco Lista-Squadre sul blocco position in list e incastrarlo dopo la parola list.
Con l’esecuzione dei 4 blocchi precedenti il blocco lXVariavioni conterrà l’Index della voce del test.
Ora viene inserita la risposta testuale nel blocco lItemInLista.
Fare click si lItemInLista e trascinare il blocco Text sotto al blocco lXVariavioni incastrandolo.
Fare click su Built-In e poi su Test. Trascinare il blocco join sul blocco precedente incastrandolo dopo la parola to.
Fare click su Test e trascinare il blocco text nella prima presa del blocco join. Fare click su text che diventa editabile.
Sostituire la parola text con: Trovato pos.
Fare click su Test e trascinare il blocco text nella prima presa del blocco join. Fare click su text che diventa editabile.
Sostituire la parola text con: Trovato pos.
Per mezzo di questi 4 blocchi, ad esito del test positivo, sul display potremo leggere Trovato pos. N.index
Per mezzo di questi 4 blocchi, ad esito del test positivo, sul display potremo leggere Trovato pos. N.index Effettuato il test occorre nascondere la tastiera.
Fare click su tbAggiungeItem e trascinare ilblocco HideKeyboard (Nascondi tastiera) sotto il blocco if incastrandolo.
Questo dovrebbe essere il risultato dell’assemblaggio dei blocchi per la lettura di una lista e l’identificazione dell’Index di una voce data.
All’esecuzione di questo codice e con il risultato del test positivo, si avrà sul display l’Index numerico della voce richiesta
Sostituire un Item (Voce) in una lista:
Una volta saputo la posizione (Index) dell’Item in una lista, il suo contenuto può essere modificato.
Gli Item verranno modificati facendo click su di un pulsante. Fare click su My Blocks e poi su bCambiaIn. Trascinare il blocco click nell’area di lavoro.
Fare click su Built-In e poi su Lists. Trascinare il blocco replace list item sul blocco precedente incastran-dolo dentro.
Fare click su My Blocks e poi su My Definitions. Trascinare il blocco ListaSquadre sul blocco precedente incastrandolo dopo la parola list
Fare click su lXVariazioni e trascinare il blocco Text sul blocco replace list item ed incastrarlo dopo la parola index.
Questo blocco contiene il valore index della Label lXVariazioni. Questo valore è stato inserito da una ricerca nella lista, vedere la parte “Leggere una lista per trovare un Item”.
Fare click su tbCambiaCon,trascinare il blocco Text sul blocco replace list item, incastrarlo dopo replacement
Questo blocco contiene i caratteri digitati all’interno del TextBox tbCambiaCon (Hint=Cambia con) ed andranno a sostituire quegli esistenti.
Questo blocco contiene i caratteri digitati all’interno del TextBox tbCambiaCon (Hint=Cambia con) ed andranno a sostituire quegli esistenti.
Digitato il testo e fatto la sostituzione, occorre ora nascondere la tastiera.
Fare click su tbAggiungeItem e trascinare il blocco HideKeyboard (Nascondi tastiera) sotto il blocco replace list item incastrandolo.
Questo dovrebbe essere il risultato dell’assemblaggio dei blocchi per la lettura sostituzioni di un Item (Voce) esistente all’interno di una lista.
Eliminare un Item (Voce) da una lista:
Una volta saputo la posizione (Index) dell’Item in una lista, la voce può essere eliminata.
Gli Item verranno eliminati facendo click su di un pulsante. Fare click su My Blocks e poi su bElimina. Trascinare il blocco click nell’area di lavoro.
Fare click su Built-In e poi su Lists. Trascinare il blocco remove list item sul blocco precedente incastrandolo nell’interno.
Fare click su My Definitions. Trascinare il blocco ListaSquadre sul blocco precedente incastrandolo dopo la parola list
Fare click su lXVariazioni e trascinare il blocco Text sul blocco remove list item ed incastrarlo dopo la parola index.
Questo blocco contiene il valore index della Label lXVariazioni che è stato inserito durante le ricerca nella lista, vedere la parte “Leggere una lista per trovare un Item”.
Come dovrebbero presentarsi i blocchi che eliminano un item(Voce) assemblati.
Aggiungere una Lista ad un’altra Lista :
Utilizzando lo stesso metodo della creazione di ListaSquadre provato in precedenza, costruire in Blocks Editor una lista come nell’esempio seguente.
Cercare una lista vuota di nome ListaNascosta
Prelevare l’evento click del pulsante bPopolaListana-scosta.

Popolarla (all’evento click) con le voci Torino,Firenze,Roma.
Adesso ListaNascosta verrà aggiunta a ListaSquadre.
Fare click su My Blocks e poi su pAppende-ListaNascosta.
Trascinare il blocco click nell’area di lavoro.
Fare click su Built In e poi su Lists.
Trascinare il blocco append to lists sul blocco precedente inca-strandolo dentro.
Fare click su My Blocks e poi su My Definitions. Trascinare il blocco ListaSquadre sul blocco precedente incastrandolo dopo la parola list1
Questo è la lista alla quale verrà accodata la lista di nome ListaNascosta.
Trascinare il blocco ListaNascosta sul blocco append to list ed incastrarlo dopo la parola list2
Questa è la lista che, al click sul pulsante, verrà accodata a ListaSquadre.
Come dovrebbe essere il risultato dell’assemblaggio dei blocchi che al click accodano la lista ListaNascosta alla lista ListaSquadre.

Prova nell’emulatore.

  1. Fare click sul pulsante PopolaLista squadra.
  2. Fare click sul pulsante Lista vuota su design
    La lista non è più vuota, si vedono gli item inseriti in Blocks Editor
  3. Fare click nel TextBox Aggiugi Item e digitare la parola Bari
  4. Fare click sul pulsante Aggiunge Item, la parola Bari verrà aggiunta alla lista.
  5. Fare click sul pulsante Lista vuota su design
    Adesso anche la parola Bari compare nella lista
  6. Fare click nel TextBox Item in Lista? E digitare la parola Bari.
    Prestare attenzione che il sistema distingua fra maiuscole e minuscole.
  7. Fare click sul pulsante Item in Lista?
  8. Sotto il pulsante Item in Lista compare il numero di posizione della parola bari nella lista.
  9. Fare click nel textBox Cambia Con e digitare la parola Lecce
  10. Fare click sul pulsante Cambia in
  11. Fare click sul pulsante Lista vuota su design
    Adesso al posto di Lecce compare Bari.
  12. Fare click sul pulsante Elimina
  13. Fare click sul pulsante Lista vuota su design
    La parola Bari è stata eliminata dalla lista
  14. Fare click sul pulsante popola Lista Nascosta
  15. Fare click su Appende ListaNascosta
  16. Fare click sul pulsante Lista vuota su design
  17. La lista ListaNascosta è stata accodata.

Questo programma, essendo solo dimostrativo di alcune proprietà delle liste, non prevede il controllo di quanto digitato, per questa ragione è possibile inserire Item senza testo o generare alcuni tipi di errore.