No limits (blocks editor)
Eccoci con la seconda parte dove vedremo il codice utilizzato per simulare questo multiscreen in AppInventor , spostiamoci quindi nel blocks editor per poter lavorare con i nostri blocchetti.
Sul lato sinistro abbiamo a disposizione il menu con tutti i vari comandi che possiamo usare e anche qui si può notare la presenza dei quadratini per poter ampliare la visualizzazione dei vari componenti che riportano la solita conformazione che ci fa subito capire dove sono posizionati nell'app.
I comandi built-in sono quelli sempre presenti mentre tutti gli altri compariranno nel momento in cui aggiungiamo il componente nella nostra app e in automatico verranno create , in fondo, anche le sezioni all'interno di any component, blocchi che ci permettono di controllare più componenti contemporaneamente o di organizzare il codice per controllare componenti diversi in occasioni diverse senza dover riscrivere il codice.
La prima cosa da fare è creare una variabile indice che useremo per gestire le pagine da visualizzare, la inizializzeremo ad 1 , e una lista componenti nella quale andremo a salvare i componenti che andremo ad utilizzare o meglio a modificare , in questo caso dobbiamo caricare gli Horizontal Arrangement che useremo come screen.
Andando sul lato sinistro , ho contratto volutamente il menu Screen1, premendo sul (+) comparirà tutto quello che ho inserito al suo interno potendo visualizzare tutti gli arrangement e cliccando su ognuno di loro introdurmi nell'elenco di tutti i comandi presenti e andare a prendere l'ultimo blocco verde della lista , quello che identifica il componente e che andrà nella lista (foto 1).
Make a list lo ritroviamo nella sezione relativa alle liste (ti rimando all'articolo specifico se non lo hai già letto QUI ) e ci permette di creare una lista con gli elementi che inseriamo e farla confluire all'interno della variabile creata. Quindi per usare questo metodo dobbiamo avere una lista con i componenti che dovremo andare a modificare, in questo caso modificheremo la loro proprietà di visibilità.
Dalla sezione Screen1 andiamo a prelevare il blocco when screen1 initialize per impostare cosa fare nel momento in cui lo screen viene inizializzato, quindi viene caricato, e semplicemente impostiamo l' arrangement 1 visibile. Il blocchetto set arrangement 1 visible lo troviamo nella sezione relativa all' arrangement 1 mentre true lo troviamo nella sezione Logic. Questa non è un 'azione necessaria ma questo progetto è estrapolato dal contesto quindi l'ho inserito solo per fissare l'importanza di alcuni passaggi come inizializzare alcuni comandi quando lo screen parte, magari nel passaggio precedente la nostra app prevede la visualizzazione di altri componenti che dovranno essere nascosti per dare visibilità ad altri.
Adesso dobbiamo andare nella sezione relativa ad any component (foto 2) e selezionare quello con la scritta any horizontal arrangement che ci farà accedere a tutti i comandi e trovare quello relativo alla proprietà visible e guardando il blocco subito ci accorgiamo che dovremo specificare due informazioni importanti: of component cioè specificare di quale componente dobbiamo modificare la visibilità e to cioè il valore che dovrà avere quella proprietà, nel nostro caso true o false per indicare visibile si (true) o visibile no (false).
Sul lato sinistro abbiamo a disposizione il menu con tutti i vari comandi che possiamo usare e anche qui si può notare la presenza dei quadratini per poter ampliare la visualizzazione dei vari componenti che riportano la solita conformazione che ci fa subito capire dove sono posizionati nell'app.
I comandi built-in sono quelli sempre presenti mentre tutti gli altri compariranno nel momento in cui aggiungiamo il componente nella nostra app e in automatico verranno create , in fondo, anche le sezioni all'interno di any component, blocchi che ci permettono di controllare più componenti contemporaneamente o di organizzare il codice per controllare componenti diversi in occasioni diverse senza dover riscrivere il codice.
La prima cosa da fare è creare una variabile indice che useremo per gestire le pagine da visualizzare, la inizializzeremo ad 1 , e una lista componenti nella quale andremo a salvare i componenti che andremo ad utilizzare o meglio a modificare , in questo caso dobbiamo caricare gli Horizontal Arrangement che useremo come screen.
Andando sul lato sinistro , ho contratto volutamente il menu Screen1, premendo sul (+) comparirà tutto quello che ho inserito al suo interno potendo visualizzare tutti gli arrangement e cliccando su ognuno di loro introdurmi nell'elenco di tutti i comandi presenti e andare a prendere l'ultimo blocco verde della lista , quello che identifica il componente e che andrà nella lista (foto 1).
Make a list lo ritroviamo nella sezione relativa alle liste (ti rimando all'articolo specifico se non lo hai già letto QUI ) e ci permette di creare una lista con gli elementi che inseriamo e farla confluire all'interno della variabile creata. Quindi per usare questo metodo dobbiamo avere una lista con i componenti che dovremo andare a modificare, in questo caso modificheremo la loro proprietà di visibilità.
Dalla sezione Screen1 andiamo a prelevare il blocco when screen1 initialize per impostare cosa fare nel momento in cui lo screen viene inizializzato, quindi viene caricato, e semplicemente impostiamo l' arrangement 1 visibile. Il blocchetto set arrangement 1 visible lo troviamo nella sezione relativa all' arrangement 1 mentre true lo troviamo nella sezione Logic. Questa non è un 'azione necessaria ma questo progetto è estrapolato dal contesto quindi l'ho inserito solo per fissare l'importanza di alcuni passaggi come inizializzare alcuni comandi quando lo screen parte, magari nel passaggio precedente la nostra app prevede la visualizzazione di altri componenti che dovranno essere nascosti per dare visibilità ad altri.
 |
| Foto 1 |
 |
| Foto 2 |
Questo è il blocco più importante, è anonimo ,a differenza dei soliti blocchi, e ci permette di inserire dei valori per specificare il componente o il valore da modificare e vedremo come.
All'inizio abbiamo inserito dei pulsanti che ci servono per andare avanti e indietro tra i nostri fake screen e abbiamo anche capito che per ogni componente abbiamo dei comandi da poter usare; andando nell'elenco dei blocchi presenti per il button next e button back (bn=button ho abbreviato) dobbiamo introdurre l'evento relativo al click , quindi when bn_next o back click per specificare cosa succede al click sui vari pulsanti.
Nel momento il cui clicchiamo il pulsante la prima cosa da fare è verificare se posso o devo far lavorare il mio codice, quindi dovrò introdurre un if then prelevato dalla sezione control. Infatti tutto il codice che andremo a scrivere non dovrà funzionare sempre ma solo se ho effettivamente altri screen da presentare a video, sia se sto andando avanti nella visualizzazione sia se sto utilizzando back per tornare agli screen precedenti.
Per controllare se effettivamente posso procedere mi farò aiutare dalla mia variabile indice che una volta dovrà essere minore di 4 mentre premo il pulsante next e invece dovrà essere maggiore di uno mentre premo il pulsante back. Perchè? Premendo next io vado avanti nelle mie pagine virtuali quindi il numero 4, per come ho organizzato il mio codice, mi indica il massimo numero di pagine che ho inserito, viceversa 1 è il limite inferiore oltre il quale non posso andare perchè è il primo screen. Volendo con una piccola modifica si potrebbe impostare anche la visualizzazione circolare quindi dopo la quarta pagina in automatico si raggiunge la prima o al contrario dalla prima premendo back si va alla 4, prova a fare questa modifica al codice in autonomia o se ti interessa richiedilo in un commento. 👍
Quindi prelevando in Math gli operatori necessari componiamo il codice per verificare i vari limiti che dovrà rispettare la nostra variabile. Cosa dobbiamo fare adesso? Vediamo cosa ho scritto.
Quando si clicca il pulsante next se la variabile indice è minore di 4 imposto un arrangement invisibile (visible to false) poi cambio il mio indice di uno set global indice to global indice +1 (voglio andare avanti , next) e poi imposto visibile un'altro arrangement (visible to true), quindi spengo quello attivo e accendo quello spento e nello specifico quello successivo perché sto premendo next. Easy 😜 Si, ma quale devo scegliere ? e come posso dirlo ad AppInventor e alla mia app?
Per fare questo ed automatizzare il tutto dobbiamo usare la nostra variabile e la potenza delle liste.
Alla voce of component andiamo ad inserire il componente che dobbiamo modificare e lo andremo a prendere dalla lista dei componenti che preventivamente abbiamo riempito rispettando la posizione giusta, il numero 1 nella prima posizione , il numero 2 nella seconda posizione e così via.
In questo modo se devo rendere visibile il primo componente dovrò andare a prelevare il primo elemento della lista e in quel momento il mio indice dovrà valere proprio 1.
Facciamo un esempio: quando partiamo indice = 1 e l' arrangement 1 è visibile, premo il pulsante next , controllo che indice è minore di 4 ( 1<4 è vero, quindi ho ancora screen da visualizzare ) entro nel blocco set horizontal arrangement visible e tramite il mio indice vado a selezionare dove? Ma nella lista componenti e cosa? Ma l'elemento numero 1. Quindi select list item mi permette di andare nella list lista_componenti e andare a prendere l'elemento nella posizione index , questa posizione mi viene passata dal valore salvato nella variabile indice. Questo elemento è proprio il componente horizontal arrangement 1 è verrà impostato invisibile (to false).
Continuando con il codice setto la mia variabile indice ad un valore ben preciso e cioè al valore che ha adesso più un unità, ho incrementato il suo valore avendo come riferimento quello che ha adesso; in questo modo il codice è generalizzato e le mie variabili aggiornandosi andranno a selezionare elementi diversi a seconda del caso specifico.
Se il mi indice era 1 adesso sarà passato a 2 e subito mi trovo davanti un altro blocco per impostare la visibilità di un arrangement e andiamo a scoprire quale: of component grazie al blocchetto lista select list item mi farà selezionare dalla list global lista componenti un elememento che si trova nella posizione index che mi viene suggerita dal valore della variabile global indice che adesso vale 2. Andando nella lista a prendere il secondo elemento e quindi l' horizontal arrangement 2 posso impostare la sua visibilità su vero ( to true ).
Con tre blocchi di codice ho spento lo screen visibile in quel momento e acceso quello successivo e se premo il pulsante back tornerò indietro spegnendo quello acceso (il numero 2) e accendendo questa volta il numero global incide -1 infatti i codici dei due pulsanti si differenziano solo per la verifica all'interno del se e per l'impostazione crescente o decrescente della variabile. Questo codice lavora in autonomia utilizzando il valore dell'indice per selezionare gli arrangement da modificare.
In basso vi lascio un breve video dell'effetto finale con gli screen che cambiano , li ho lasciati di colore differenti per evidenziare il passaggio , e si può notare che eventuali click sui pulsanti non hanno effetto se mi trovo sulle pagine estreme; quindi se clicco back sulla prima pagina aperta oppure se clicco next con l'ultima pagina in visualizzazione .
Spero vi sia piaciuto questo tutorial e possa essere utile non solo per creare un ipotetico multiscreen infinito per la nostra app ma anche per imparare ad utilizzare questi blocchi molto potenti ( any component ) in unione con le liste e le variabili.
Al prossimo tutorial 👋
Continuando con il codice setto la mia variabile indice ad un valore ben preciso e cioè al valore che ha adesso più un unità, ho incrementato il suo valore avendo come riferimento quello che ha adesso; in questo modo il codice è generalizzato e le mie variabili aggiornandosi andranno a selezionare elementi diversi a seconda del caso specifico.
Se il mi indice era 1 adesso sarà passato a 2 e subito mi trovo davanti un altro blocco per impostare la visibilità di un arrangement e andiamo a scoprire quale: of component grazie al blocchetto lista select list item mi farà selezionare dalla list global lista componenti un elememento che si trova nella posizione index che mi viene suggerita dal valore della variabile global indice che adesso vale 2. Andando nella lista a prendere il secondo elemento e quindi l' horizontal arrangement 2 posso impostare la sua visibilità su vero ( to true ).
Con tre blocchi di codice ho spento lo screen visibile in quel momento e acceso quello successivo e se premo il pulsante back tornerò indietro spegnendo quello acceso (il numero 2) e accendendo questa volta il numero global incide -1 infatti i codici dei due pulsanti si differenziano solo per la verifica all'interno del se e per l'impostazione crescente o decrescente della variabile. Questo codice lavora in autonomia utilizzando il valore dell'indice per selezionare gli arrangement da modificare.
In basso vi lascio un breve video dell'effetto finale con gli screen che cambiano , li ho lasciati di colore differenti per evidenziare il passaggio , e si può notare che eventuali click sui pulsanti non hanno effetto se mi trovo sulle pagine estreme; quindi se clicco back sulla prima pagina aperta oppure se clicco next con l'ultima pagina in visualizzazione .
Spero vi sia piaciuto questo tutorial e possa essere utile non solo per creare un ipotetico multiscreen infinito per la nostra app ma anche per imparare ad utilizzare questi blocchi molto potenti ( any component ) in unione con le liste e le variabili.
Al prossimo tutorial 👋
Se volete 👉 QUI 👈 vi lascio il file in formato .aia per poter vedere meglio tutti i componenti utilizzati.
Hai apprezzato il mio lavoro?Se ti va puoi offrirmi un bel caffè 😍
Commenti
Posta un commento