SketchFlow: behavior per la definizione e gestione di funzionalità di "Conditional Navigation" nei prototipi

Al rientro dalle vacanze e, credo anche voi come me, ormai a pieni ritmi con gli impegni di lavoro...Vi segnalo questi interessanti behavior che vi permettono di definire delle navigazioni condizionali all'interno di un'applicazione SketchFlow in Silverlight. Mi spiego meglio, partiamo dal presupposto che il vostro prototipo di applicazione debba prevedere che a seconda di una specifica interazione dell'utente- banalmente preventiviamo come esempio l'attivazione di un check box - il comportamento di un bottone all'interno dell'applicazione debba variare.



Semplificando ulteriormente la cosa, il comportamento del bottone "A" permetterà di navigare di deafult su una schermata chiamatola per ipotesi "Screen 2", mentre se l'utente interagisce con l'applicazione attivndo un check box a questo punto il comportamento del bottone varierà e l'utente potrà accedere in un'altra schermata "Screen 3". E' molto più semplice descriverla con un esempio che raccontarla.

Ho pubblicato l'anteprima dell'applicazione online che risulta fruibile attraverso uno SketchFlow Player direttamente da questo "link"

Ma vediamo velocemente come è possibile definire e gestire i behavior e questa funzionalità direttamente all'interno di Blend 3. Per prima cosa, una volta definito il progetto Silverlight SketchFlow è necessario importare i due behavior che permettono di pilotare tale funzionalità che come potrete intuire non fanno parte degli asset disponibili di default offerti da Blend. Procediamo quindi all'interno della maschera di gestione "Projects" e semplicemente facendo "tasto destro" selezioniamo l'opzione "Add Existing Item". Vi verrà lanciata la classica finestra di "File System" e selezioniamo quindi i due behavior che dovreste aver appena downlodato dai link qui sotto, lanciate quindi una build del progetto per creare le DLL (un semplice Ctrl+Shift+B da da tastiera) e a questo punto non vi resta altro che agganciare i behavior agli elementi che costituiranno l'interfaccia.

Ammetto, lo sto dando per scontato, ma come potrete intuire, prima di tutto è necessario creare le 3 schermate diverse che costituiscono il nostro semplice prototipo interagendo direttamente sul pannello "SketchFlow Map". Durante la sessione che ho tenuto lo scorso giugno a REMIX'09 dedicata a SketchFlow e Blend 3, ho spiegato in dettaglio alcune potenzialità offerte da SketchFlow, vi invito quindi a vedere la registrazione della sessione disponibile a questo link. 

Inseriti i semplici controlli che costituiscono l'interfaccia sullo "Screen 1": un bottone, un check box e alcune label testuali, a questo punto non resta che agganciare i behabior hai controlli per gestirne l'interazione. Come potete vedere nell'immagine qui sotto che rappresenta il "view tree" della schermata "Screen 1", i behavior necessari in questo semplice esempio sono #2 e nello specifico: "SetNavigationTarget" applicato a due controlli (UserControl Principale e al Chech Box)e "ConditionalNavigation" in questo caso applicato al "button" inserito nell'applicazione.
In dettaglio, il behavior "SetNavigationTarget" applicato allo "UserControl" contenitore avrà dichiarato nelle "properties" "EventName:Loaded" e come TargetScreen "Screen 2" mentre l'altro "SetNavigationTarget" sarà applicato al "check box" con sulle properties EventName:"checked" e TargetScreen:"Screen 3". Mentre al "button" sarà applicato il behavior "ConditionalNavigation" che permette di gestire lo "switch" a seconda se l'utente interagisce e attiva il "check box".



Vi riporto, qui sotto, i link al downlod dell'esempio sviluppato in Blend 3 (vi ricordo che si tratta di una funzionalità specifica per un progetto SketchFlow) ed il link ai singoli "behaviors" necessari per sviluppare questo esempio messi a disposizione da un mio collega di Corp - Christian Schormann. Vi segnalo inoltre che sul suo blog trovate anche la documentazione tecnica su come Christiann ha implementato questi behavior.