Focus on - Any component

Benvenuti 👋
siamo ancora qui a parlare di any component anche dopo il tutorial del multiscreen (ancora non lo hai visto ?? 😱  Eccolo 👉 QUI ) perché ritengo veramente che sia un componente molto interessante e potente sia per snellire il codice sia per velocizzare/automatizzare alcune procedure.
Andiamo a vedere quindi un altro codice che ho realizzato per questo tutorial e che ci permette di modificare velocemente alcuni parametri relativi ai pulsanti che abbiamo inserito nel progetto multiscreen.
Come sempre ti ricordo che queste non sono soluzioni uniche ed universali ma solo degli esempi per fare un pò di pratica; questo ci permette di capire come usare questi blocchi e soffermarci su alcuni passaggi necessari. Sarei contentissimo di sapere come userai questi componenti, le procedure che hai realizzato o usato, così potremo condividere più materiale possibile con tutti gli utenti.

Questa è la situazione che ci troviamo davanti , ho impostato degli arrangement che fungono da pseudo screen che si mostrano e nascondono opportunamente per simulare un cambio di screen, ipoteticamente infinito (parliamo degli arrangement dal numero 1 al 4).

Il quinto arrangement invece l'ho utilizzato per ordinare una serie di pulsanti che servono per muoversi tra le varie pagine.

Come possiamo notare dalla foto (Properties sul lato destro) ho impostato le dimensioni in percentuali così da far adattare le dimensioni automaticamente al cambio dello schermo su cui andremo ad aprire la nostra app, smartphone o tablet che sia!

Per gli arrangement ho usato un 98% in larghezza così da lasciare un piccolo bordino laterale che a mio avviso , se non ci sono necessità specifiche, può essere utile visto anche la tendenza ad assottigliare sempre di più le cornici degli smartphone, rendendo sempre più frequente il tocco involontario dello schermo nell' impugnatura ad una mano. Impostando la larghezza dei tre pulsanti su fill parent non solo andranno a riempire tutto lo spazio a loro disposizione (quindi il 98% dello schermo imposto dalla misura dell' arrangement) ma AppInventor imposterà la larghezza in modo da ricreare tre pulsanti perfettamente uguali ed equamente distanziati.

Per l'altezza ho impostato un 9% e per comodità un 8% per i pulsanti, vedremo il perché.

Passiamo al codice, come sempre la prima cosa da impostare sono tutte le variabili, le liste o comunque tutti quei dati, quelle impostazioni che devono essere in un determinato modo per far partire correttamente la nostra app, l' inizializzazione del nostro progetto.

Creiamo subito una nuova lista , come fatto per gli arrangement, e inseriamo al suo interno i blocchi relativi al componente button o meglio a tutti i componenti button che vogliamo controllare con la nostra procedura. Vi ricordo che il blocco in questione , di colore verde, lo troviamo nel menù relativo al singolo pulsante, quindi ci troviamo nel blocks editor sul lato sinistro e scorriamo fino a trovare il componente button back, poi home e next (nomi che ho scelto io). Cliccando sul componente si aprirà il menu contestuale con tutti i blocchi e troviamo quello di nostro interesse in ultima posizione; lo dovremo inserire nel blocco make a list per poterlo salvare nella variabile global buttons in modo che AppInventor possa gestirli secondo le nostre indicazioni.

Così facendo (immagine sul lato destro) abbiamo inizializzato una variabile al cui interno abbiamo salvato dei dati (i nostri button) sotto forma di lista, un modo potentissimo di salvare dati per poi gestirli con facilità quando servono.

Nel progetto multiscreen abbiamo usato l'evento When button click di ogni button per gestire cosa fare, nello specifico cambiare screen e aggiornare la variabile che ci permetteva di automatizzare lo spostamento tra di essi; lo stesso blocco lo ritroviamo anche in any button e ci permette di scrivere un solo codice che vale per il click di tutti i button. Immaginiamo un app con molti pulsanti, potremo  risparmiare molto tempo e organizzare meglio il nostro codice.

Sappiamo (perché abbiamo seguito il tutorial sul multiscreen 💪) che nel momento in cui inseriamo un componente nella nostra app in automatico verrà aggiunto una nuova sezione relativa ad any component , quindi andando sempre sul lato sinistro , alla fine di tutto l'elenco troviamo any component e, espandendo l'elenco se troviamo il più (+) , al suo interno possiamo ritrovare any button. Un bel click e entriamo nel menu per andare a selezionare When any button click. 

Questo evento porta con se , nella parte alta in colore aragosta ?? 😂   boh , rosso chiaro, degli elementi che possono essere duplicati ed usati semplicemente passandoci sopra con il mouse e prelevandoli. In questo modo abbiamo la possibilità di captare il component che ha ricevuto il click , quindi il pulsante premuto, oppure NotAlreadyHandled che ci informa se non è stato ancora utilizzato un dato pulsante. In questo esempio useremo solo component per individuare facilmente il pulsante cliccato in quel momento.

Facciamo il punto della situazione, per ora abbiamo creato la nostra lista con i componenti che identificano i nostri pulsanti, trovato l'evento che identifica il click sul pulsante ed individuato un blocco che ci permette facilmente di individuare il pulsante cliccato.

Vediamo anche cosa andremo a scrivere con i nostri blocchetti. Ad ogni click (when any button click) su un pulsante entreremo nella lista dei pulsanti e per ogni elemento al suo interno (for each item in list global buttons) andremo ad effettuare le seguenti operazioni : se il componente cliccato è diverso da quello che stiamo controllando in quel momento prelevandolo dalla lista (if component ≠ item then) , quindi non è quello cliccato, allora cambieremo il suo colore di sfondo in celeste e se necessario (se la sua altezza è 52 px) andremo anche a modificare l'altezza diminuendola di 5 px.

In alternativa (else) modificheremo il suo colore di sfondo in verde e se necessario (se la sua altezza è 47 px) andremo ad aumentare la sua altezza di 5 px. In questo modo ad ogni click avremo che il pulsante cliccato diventerà verde e un pò più grande degli altri, mentre quelli non cliccati saranno sempre di colore celeste e della dimensione originale, vediamolo blocco per blocco e ragioniamo sulla procedura che ho eseguito.

Prima di tutto andiamo in control per prelevare un for each perchè la mia idea è controllare tutti i pulsanti, ad ogni click , e riuscire a capire come settarli senza dover scrivere un codice per ognuno di loro; questo ciclo mi permette di selezionare automaticamente tutti gli elementi della lista buttons e scegliere di compiere delle azioni.

Subito dopo infatti grazie all' if then else potrò introdurre delle condizioni per verificare se il componente cliccato è uguale o meno a quello prelevato dalla lista di riferimento, se è diverso entrerò nella prima parte del mio codice altrimenti nella seconda parte.

In questo momento il mio ciclo ha preso un componente dalla lista ed ha verificato se è diverso dal componente cliccato e supponiamo che la risposta sia vera, quindi entriamo nella parte then del codice dove abbiamo inserito il blocco per settare il colore di sfondo del pulsante. Questo blocco è stato sempre preso in any component così da poter funzionare per tutti i pulsanti contemporaneamente e per fare questo useremo come discriminante proprio item, che altro non è che un elemento della lista buttons , in questo modo ad ogni passaggio del ciclo avremo al suo interno un pulsante differente. Non essendo quello cliccato in questo momento imposteremo sul celeste il suo colore (lo troviamo nella sezione colors dove troviamo anche i comandi per creare tonalità particolari impostando i valori RGB). 

Per lo stesso pulsante (item) imposto anche il comando per diminuire la sua altezza di 5 px perchè quando verrà cliccato ho impostato invece il suo aumento di 5 px, ecco quindi l'importanza della condizione altezza = 52 che mi permette di effettuare questa modifica solo in questo specifico caso. Infatti io non voglio che questo avvenga sempre ma solo se il pulsante era stato cliccato al passaggio precedente. Qui possiamo notare due cose molto importanti, il nuovo blocco verde chiaro, con forma differente e quindi può essere inserito portando con se l'informazione dell'altezza del componente in questione , e qui la seconda cosa importante , il componente è sempre item. Quindi il termine item durante ogni passaggio del ciclo è sempre lo stesso ma sempre diverso ad ogni nuovo passaggio e viene utilizzato per manipolare le varie impostazioni o valori di quel componente.

Perfetto, se siamo entrati nella parte then il nostro passaggio del ciclo termina qui e non entreremo anche nella parte else, a questo punto il ciclo andrà a prendere il prossimo elemento dalla lista salvandolo nel termine item per iniziare un nuovo passaggio.

Nel nostro caso abbiamo solo tre pulsanti quindi sicuramente un altro  elemento farà lo stesso percorso prima descritto e uno solo invece supererà il test per permettere di entrare nella parte else della nostra istruzione condizionale.

Nel momento in cui , scorrendo la lista, troveremo il pulsante cliccato in quel momento quindi component ≠ item ritorna falso in risposta , entreremo nella parte else andando a impostare il colore verde di sfondo e aumentare la sua altezza di 5 px. Anche qui naturalmente impostando la condizione altezza = 47 eviterò che questa modifica avvenga ad ogni click ma solo nel momento in cui il click avverrà sul pulsante stesso. Provate il codice senza questa condizione per capire meglio cosa succede.

Ottimo anche questo tutorial è terminato, fatemi sapere cosa ne pensate.

Alla prossima

 Hai apprezzato il mio lavoro?Se ti va puoi offrirmi un bel caffè 😍