I custom states o variabili di stato sono delle informazioni che la pagina può tenere a mente, per modificare il proprio comportamento, senza dover andare a fare una scrittura database che è molto lenta.

Ti faccio un esempio.

Ipotizziamo che io in questa pagina voglio avere una sorta di menù, da cui posso scegliere senza cambiare pagine e quindi di essere molto rapido nella mia esperienza, fra due sezioni, quindi fra mostrare la sezione che hai già costruito, quella in cui puoi lasciare la mail e inviare una richiesta e una sezione di About Us, in cui ci sono delle informazioni su di noi, sulla nostra ipotetica azienda.

Andiamo a vedere passo per passo come possiamo fare a portarci in questa situazione.

Come prima cosa prendo tutti questi elementi che ho um messo sulla pagina, tranne il testo di titolo, quindi prendo l'immagine, prendo l'input mail, l'input richiesta e il bottone e tenendo per moto il tasto maiuscolo li vado a cliccare tutti uno dopo l'altro in modo da selezionarli tutti insieme.

Dopodiché faccio tasto destro e gli chiedo di raggruppare questi elementi in un column container.

Che cos'è un column container? Un contenitore responsive che va a mettere tutti gli elementi uno sotto l'altro in colonna.

Il fatto di averli tutti dentro un contenitore mi permetterà di poter dare dei comandi di mostra nascondi, al contenitore, mostrando e nascondendo di conseguenza tutti gli elementi con un'azione sola.

Vado a fare qualche piccola modifica al contenitore per renderlo un pochino più carino, ad esempio gli chiederò di applicare il gap spacing fra un elemento e l'altro, e gli dico che voglio 10 pixel fra ogni elemento.

Vedi che sono stati distanziati in modo uniforme.

Vado anche a dare un titolo.

Lo chiamo Group, lasciaci la tua mail, così mi è facile poi richiamarlo quando andrò, a creare dei workflows che vanno a mostrarlo o nasconderlo.

A questo punto vado a creare la mia sezione successiva in mo- in modo molto rapido.

Metto qua sotto un testo.

Lo metto centrato.

Quindi sto ripercorrendo tutti dei passaggi che abbiamo già visto, ma in questo modo li vedi in azione, e li consoliderai, quindi ti faccio notare, ogni tanto te lo faccio notare, a volte, ti lascio semplicemente osservare e sentiti libero di fermare la lezione tutte le volte che ne hai bisogno, in questo momento per centrarlo mi sono portato sulla, tab del layout e gli ho chiesto un allineamento orizzontale centrato.

Nell'appearance qua scriverò.

Su di noi.

Vado ad applicargli uno stile, questa è un'altra cosa che hai già visto, in quest'ottica, al posto di questo body 16 proverò ad esempio a mettergli uno stile heading 4, che è un po' più grosso.

E questo, giusto per ricordartelo, è uno degli stili pref- predefiniti che se qua vai sotto text, Vedi che trovi tutta una serie di stili predefiniti.

Ora sotto il nostro testo grosso metterò anche un testo piccolino, anche questo lo metto centrato, e gli metto dentro un bel po' di Lauren Ipsum.

Perfetto, così abbiamo il nostro pezzettino di testo fittizio.

Ora procedo a raggruppare anche questi due elementi in un secondo gruppo, anche qua, tasto destro, dopo averli selezionati tenendo per moto il tasto maiuscolo e group elements in e column container.

Qui avevo lasciato uno spazio, lo tolgo, e vado in modo più ordinato a dargli un gap spacing, anche qua gli do 10 pixel.

A questo punto cosa faccio? Do un nome più comprensibile anche a questo gruppo, quindi lo chiamerò grup su di noi.

Okay, molto bene.

Ora non ci resta che creare un gruppo, con dentro dei bottoni che ci permettono di scegliere quale sezione mostrare.

Andiamo a inserire.

due bottoni, prendendoli sempre dalla barra di sinistra e li trasciniamo dentro la pagina.

Ora quello che vogliamo fare è che appaiano uno di fianco all'altro.

Di selezione entrambi, faccio sempre tasto destro.

Group elements, questa volta in a row container, perché voglio che appaiano lateralmente uno rispetto all'altro.

Vedi che appaiono uno rispetto all'altro.

A questo punto, gli dirò che li voglio centrati.

Vado a modificare il testo contenuto dentro ciascuno di essi, cliccandoci sopra, spostandomi su appearance e cambiando la label.

Questo lo chiamerò richieste.

Questo lo chiamerò about us.

Ad esempio, adesso potrebbe disturbarti il fatto che questi bottoni abbiano l'angolo arrotondato e non sembrino un vero e proprio um elemento di scelta della tab.

Possiamo modificarlo.

Possiamo andare a sovrascrivere uno stile, anche solo in parte, quindi di fatto questo bottone continuerà ad avere come base lo stile filled Light Primary, ma possiamo dirgli che vogliamo definire in modo indipendente, Tutti i vari bordi e angoli e in questo caso che il borders top right di questo, lo vogliamo che sia 0 arrotondato, così come il bottom right, vogliamo che sia 0 arrotondato.

Lo stesso facciamo per questo.

Siamo sempre sulla tab appearance, lì diciamo che vogliamo definire i b- i bordi e gli angoli di conseguenza in modo indipendente e anche qua gli dovremmo dire invece che il top left lo vogliamo senza rotondamento e che il bottom left lo vogliamo senza rotondamento.

Okay, vedi che ora sembra un unico blocco che ci permette di scegliere quale sezione vogliamo vedere.

Ora andiamo a implementare custom state che sono il focus di questa lezione.

Scegliamo un elemento su cui montare questi custom states, e scelgo questo qua che contiene i bottoni.

Lo chiamiamo group scelta tab e cliccando sulla i, Ci appare questa opzione che dice add the new custom state.

State name, lo chiamerò tab attiva.

E lo facciamo di tipo testo.

Anche se stai facendo fatica molto probabilmente a capire dove sto andando ad operare, seguimi e vedrai che arrivando alla fine ti sarà chiaro.

Gli diamo un valore di default, come valore di default scegliamo di dargli il nome della sezione About Us.

Molto bene.

A questo punto dobbiamo far sì che cliccando questi bottoni, il valore di questo custom state venga modificato.

Il custom state non è altro che una variabile, come se fosse un piccolo database che è possibile tenere due dentro la nostra sessione di browser, quindi senza che venga inviato sui server da qualche parte, scritto, e poi letto per dare dinamicità alla pagina, rimane tutto in sessione, dando una dinamica molto molto rapida.

Di risposta alle azioni che facciamo.

Molto bene, quindi iniziamo a definire i workflow che faranno sì che il click sul bottone richieste andrà a settare il custom state nello stato richieste, mentre il click sul bottone about us viceversa, andrà a settare il custom state nello stato about us.

Aggiungiamo il workflow, e quindi il trigger viene selezionato automaticamente da Babbo e dice quando il bottone richiesto viene cliccato, che cosa fai? Set state.

Mi chiede qual è l'elemento di cui devo settare lo state? Sarà il gruppo Scelta tab, gli ho dato un nome riconoscibile, così mi è stato facile trovarlo in questo punto.

Il custom state a modificare, è la tab attiva e il valore che io voglio assegnare è richieste.

Un valore testuale totalmente arbitrario che sto scegliendo io.

L'importante è che poi dopo, nello step successivo, andremo a matcharlo esattamente, cioè gli dirò mostra questa sezione solo quando il custom state è richieste, oppure mostra quest'altra sezione solo quando il custom state è about us.

Vado a fare lo stesso, torno sulla tab design al bottone about us.

Quindi gli dico, quando il bottone about as è cliccato, set state of an element, in questo caso l'elemento da settare è il gruppo scelta tab, il custom state è la tab attiva e come valore lo setterò a About U, che ti faccio notare è il predefinito che ho messo sulla pagina.

Torno sulla sezione design.

A questo punto vado a dire alle due sezioni che voglio che di base, quando il sito viene caricato prima, che viene eletto il custom state siano non visibili e che diventino invece visibili solo nel momento in cui il valore del custom state corrisponde a quello che loro ci hanno scritto nello state condizionale, che adesso andiamo a vedere immediatamente.

Quindi ho cliccato sul gruppo che contiene tutta la prima sezione.

Vado su layout e gli dico che questo elemento non voglio che sia visibile sulla page load, e invece gli lascio fleggato questo, collassa quando nascosto, cioè quando questo elemento è hidden voglio che non occupi spazio, che non lasci dello spazio bianco.

E allo stesso modo voglio che quando la pagina viene caricata, prima di fare qualsiasi valutazione questo elemento di base sia nascosto.

A questo punto gli attivo un condizionale, quindi qua posso dirgli se succede una cosa, a livello grafico fai accadere qualcos'altro.

In questo caso La nostra valutazione andremo a farlo sul custom state.

Quindi quando il gruppo Scelta Tab, um Il suo stato tab attiva è, in questo caso è richieste, quindi testo che abbiamo definito noi.

Posso dirvi che voglio che questo elemento sia visibile, quindi sono andato qua a selezionare, La proprietà che voglio che venga modificata dell'elemento e il valore.

Per farti vedere qua puoi modificare anche um la larghezza, l'altezza, il font, lo stile, l'opacità, puoi modificare davvero tante cose.

In questo caso gli diamo semplicemente la visibilità.

Lo stesso andiamo a fare su quest'altra sezione, quindi anche qua, ci spostiamo sulle yaout, andiamo a dirgli che di base non vogliamo che sia visibile, vogliamo, che sia collassato, se non visibile e che nel momento in cui, Scelta Tab.

Il custom state tab attiva è, About as.

In questo caso voglio che l'elemento sia visibile.

A questo.

se andiamo in preview, dovrebbe funzionare tutto.

Okay, la nostra pagina è stata caricata.

Vedi che è che è visibile l'elemento su di noi.

Adesso ti faccio vedere che all'inizio erano tutti nascosti e poi ha visto che il custom state era settato su About as e quindi ha mostrato questo.

Ora se io schiaccio richieste, compare questa sezione e scompare, come puoi vedere, quella della BA, viceversa se schiaccio su Abas, comparo solo quella su di noi.

Quindi in questa lezione hai imparato tantissime cose, hai innanzitutto ripassato tutti i concetti che abbiamo visto precedentemente e li hai messi in pratica.

Dopodiché hai visto l'utilizzo dei gruppi, hai visto come.

mostrare e nascondere un gruppo di default al caricamento del sito.

Hai visto come un flusso come un workflow può andare ad agire su una variabile di Stato.

Hai visto come creare questa variabile di Stato ed associarla ad uno specifico elemento della pagina e come utilizzare questa variabile di stato per influire sul comportamento di altri elementi.

Ancora qualche passo e sarai pronto a lanciare il tuo MVP.