No limits (designer editor)

Benvenuti,
è veramente tanto che non ci sentiamo ma meglio tardi che mai e torno a bomba con una bella fiaba 😂.
C'era una volta un ragazzo fermo a letto con la febbre molto alta e allora decise di spararsi tutti i tutorial di AppInventor che trovava in rete. La febbre era sempre molto alta, non riusciva nemmeno ad alzarsi dal letto, e i tutorial diventavano sempre meno.
Una volta finiti i video degli Youtuber più esperti del settore aveva acquisito il potere necessario per domare la forza oscura di AppInventor, milioni di app frullavano nella sua testa pronte per essere scritte.
Ecco che i vari blocchi si avvicendano uno dopo l'altro, procedure su procedure , screen dopo screen e ..... 😱😱  sono finiti gli screen, il sogno di sbancare con le mille app svanisce in un secondo.
Questo immagino sia il dramma di tutti quelli , come me, che alle prime armi arrivano alla creazione  di app, pensano di avere poteri infiniti e invece non hanno nemmeno il minimo sindacale 😅.
Bene oggi vedremo come superare questo piccolo problema del limite di screen utilizzabili da AppInventor, naturalmente questo è uno dei metodi possibili, e mentre cercavo di aiutare un'amica ho preso spunto per introdurre questo argomento che immagino possa essere molto interessante.


Quindi basta con le stupidaggini e cerchiamo di introdurre un po' di contenuti.
L'immagine in alto rappresenta quello che ci troviamo davanti mentre stiamo lavorando con la parte grafica della nostra app, siamo infatti nel designer editor e qui possiamo introdurre tutti i componenti della nostra app, vedere una piccola anteprima e modificare le impostazioni di base di ogni componente.
Sul lato destro possiamo vedere la parte Components dove, oltre a rinominare i componenti per ritrovarli facilmente, possiamo avere un colpo d'occhio per individuare la struttura dell'app e quindi capire la posizione dei componenti. Ogni volta che individuiamo uno spostamento verso destra rispetto all'allineamento normale vuol dire che quei componenti sono compresi all'interno del componente capofila che è anche contrassegnato con un quadratino e un simbolo (+ o -) che permette di espandere o ridurre la visualizzazione.
Nel nostro caso tutto è compreso all'interno di Screen1, Label 2 , Label 3 e gli arrangement sono allo stesso livello infatti volendo potrebbero essere tutti visibili contemporaneamente, mentre Label 1 e i button sono ad un livello più interno, compresi all'interno di altri componenti.
Ho lascito visibile Horizontal Arrangement 1 come a simulare uno screen della mia app e poi anche i pulsanti di navigazione in basso (contenuti in Arrangement 5) e i quadratini in verde che altro non sono che delle label , la 2 e la 3, che servono come distanziatori per organizzare meglio gli spazi (naturalmente bisogna lasciarli trasparenti per avere l'effetto desiderato).
Properties ci permette di modificare subito delle impostazioni: l'allineamento orizzontale e verticale di quello che metterò all'interno dell' arrangement , il colore di sfondo, le dimensioni che ho voluto gestire in percentuale così che si possano modificare in automatico a seconda dello schermo su cui verrà visualizzata l'app, l'introduzione di un'immagine di sfondo (che deseleziona il colore sfondo) e la possibilità di rendere visibile o meno il componente.
Ogni componente avrà proprietà differenti da modificare.
Che fine hanno fatto gli altri arrangement? Tutti gli altri sono settati invisibili all'avvio dell'app in modo da renderli visibili al momento giusto e nascondere quello opportuno, in questo modo andiamo a simulare un cambio si screen.
Ecco svelato il funzionamento di questo metodo, partendo da uno pseudo screen 1 visibile, con i pulsanti in basso andremo a nascondere quello visibile in quel momento e far comparire quello corretto, tutto ciò verrà gestito da una variabile indice e una lista componenti che conterrà i vari componenti che andremo a gestire con dei blocchi molto potenti che troviamo in any component adesso che passeremo a lavorare con il codice nel blocks editor.
Per ora vi lascio giocare con il designer editor, sbirciare le varie proprietà che si possono modificare e prendere dimestichezza con la posizione dei vari componenti all'interno dello screen, vi ricordo sempre che AppInventor, come tutti gli ambienti simili, oggi dà la possibilità di vedere in tempo reale sia la parte grafica che il funzionamento dell'app.
Grazie all'utilizzo dell'AI Companion e l'applicazione scaricabile del playstore, usando una connessione wifi, possiamo mandare in esecuzione sul nostro smartphone android l'app che stiamo realizzando e controllare il nostro operato, tutte le modifiche avverranno in tempo reale.
Buon divertimento, nel prossimo articolo vedremo la parte relativa al codice per gestire i vari cambiamenti.

Continua con la seconda parte QUI

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

Commenti

Ciao, spero ti piaccia il blog. Se ti fa piacere qui puoi offrirmi un caffè!

Post popolari in questo blog

GOOGLE SCRIPT & KODULAR READ, WRITE, UPDATE, DELETE

Tu lo conosci THUNKABLE?