In questo articolo vedremo come utilizzare le principali potenzialità dei VisualStates per la rappresentazione dell’interazione utente/applicazione in un prototipo. In generale, le funzionalità che andrò a descrivere possono essere replicate anche in progetti di applicazioni reali Silverlight e WPF. Partiamo come sempre da un esempio, l’idea è quella di rappresentare alcune funzionalità di base per l’acquisto dei ticket e quindi simulare l’interazione dell’utente con l'applicativo nel semplice processo di acquisto. Premetto, ho semplificato molto gli step riducendo ai minimi termini le variabili da tenere in considerazione nel processo e ipotizzando che un utente sia in grado di acquistare un ticket per un film, in modo rapido direttamente dall’home page. Se riconduciamo tale obiettivo negli elementi che caratterizzano l’interfaccia, tale funzionalità sarà abilitata dal controllo “Quick Search & Buy” che in questo caso è stato definito come component screen in modo da utilizzarlo “in comune” su più applicazioni.



Gli step che caratterizzano il processo d’acquisto, saranno definiti attraverso l’impiego dei VisualStates a livello di component screen. In primis, l’utente può effettuare una prima ricerca rapida inserendo una serie di parametri di base direttamente nel controllo presente in home page. Le classiche informazioni:

- Titolo film (in autocompletamento in relazione al DB dei film attualmente in programmazione)
- Location
- Data
- Orario

Inseriti e comfermati questi parametri, il processo d’acquisto verrà guidato attraverso una serie di semplici “step” con pannelli in overlay al player Silverlight – perdonatemi la semplificazione sugli step di acquisto.
Vi invito quindi a visualizzare le funzionalità implementate nel prototipo a questo LINK.



Impostati i parametri di base (1), confermate il tutto e sare guidati negli step successivi (2) in overlay sul player Silverlight.
- scelta sala cinematografica
- scelta posti
- Modalità di pagamento
- Richiesta Login e conferma acquisto

All’interno del component screen “QuickSearch&Buy”, ho definito 4 states che contengono nello specifico gli elementi dell’interfaccia correlati ad ogni singolo step che caratterizza il processo.
L’utente interagendo con le funzionalità proposte dai controlli sarà quindi in grado di filtrare e confermare le proprie scelte per procedere all’acquisto dei biglietti.

Lato pratico, per definire un nuovo VisualStateGroup e i VisualState correlati, è sufficiente dal pannello di gestione degli States (nel caso non fosse presente di default nell’interfaccia di Blend è attivabile dal menu Window), creare un nuovo VisualStatesGruoup che conterrà al suo interno i VisualStates necessari per visualizzare gli elementi dell’interfaccia.
Come rappresentato nell’immagine qui sotto, cliccando sull’icona “1” è possibile creare il nuovo VisualStateGroup – nel nostro esempio specifico “QuickBuyStates”, mentre interagendo con l’cona “2” potrete definire gli states contenuti all’interno del VisualStatesGroup.


Definito il primo states, noterete che all’intorno dell’artboard comparirà la classica cornice “rossa” ad indicare che tutte le attività che verranno fatte in questa modalità verranno registrate. Se provate banalmente ad inserire un semplice controllo con attivata la modalità di registrazione e tornate nello states “Base” interagendo sul pannello di gestione degli states, vedrete che operando in questo modo l’oggetto inserito non verrà visualizzato. Blend nello states “base”, ha associato un valore di Opacity pari a “0”. Vi invito quindi ad andare sullo states appena creato, il controllo riapparirà e se notate il valore di Opacity nel pannello delle property sarà “100”.
Se rapportiamo queste considerazioni all’esempio dell’esercitazione, nel nostro caso in ogni states è presente un controllo di layout di tipo “canvas” in cui al suo interno sono stati inseriti i controlli che caratterizzano le funzionalità richieste per ogni singolo step che caratterizza l’acquisto.
Nel nostro esempio se lavorassimo solo sull’opacity di ogni singolo controllo di layout che contiene gli oggetti nei diversi states, ci potrebbero essere dei problemi, in quanto tutti gli states e i controlli in esso contenuti sono in sovrapposizione uno sull’altro. Per ovviare ciò, vi consiglio di lavorare sulle property “Visibility”. Come illustrato nell’immagine a seguire, in questo caso vedete attivato il visualstate “SaleCinematografiche”, se notate nel pannello delle property di ogni canvas, in questo caso risulta attivo il primo – dove sono contenuti i controlli dell’interfaccia per la scelta della sala cinematografica – mentre tutti gli altri canvas che caratterizzano gli step successivi sono momentaneamente “collapsed”. Come è facilmente intuibile negli altri 3 states, i canvas risulteranno “visible/collapsed” con la stessa logica a seconda dello step/controlli da visualizzare.



In conclusione, per la gestione della navigazione attraverso ogni states che caratterizza il processo d’acquisto, non ho fatto altro che associare/applicare ad un elemento specifico che abilita la navigazione, la visualizzazione dello stato successivo. Il tutto dietro le quinte viene gestito attraverso i behavior, ma molto più semplicemente in SketchFlow è possibile operare e definire l’attivazione dello states a livello di singolo controllo, semplicemente facendo tasto destro del mouse sul controllo e selezionando l’opzione “activate state” dove sono elencati tutti gli states definiti all’interno della pagina.



Se a questo punto provate ad accedere in un’altra pagina del protopo in cui è stato inserito il component screen “QuickSearch & Buy”, ad esempio nello screen dedicato ai film in programmazione, noterete che tutte le funzionalità associate al component screen risultano fruibili anche in questo contesto.
Vi invito quindi al download del progetto aggiornato, disponibile a questo link, e vi rimando al prossimo post dedicato alla gestione di Sample Data (Fonte dati di esempio), stay tuned!