In questo post vedremo come è possibile attraverso gli “states” gestire lo stato di un  “button” all’interno di un menù di navigazione – component screen. Mi spiego meglio, nel post precedente ho descritto come attraverso i component screen sia possibile creare e gestire in modo centralizzato la navigazione di un prototipo. Nello specifico, attraverso il controllo component screen – “MainMenu”, si gestiva in modo centralizzato la navigazione all’interno delle aree che caratterizzavano il prototipo.



A questo punto l’idea è di rendere un minimo dinamico il menu, utilizzando gli states e i behavior, in modo che se un utente naviga all’interno delle pagine del prototipo, risulti attivo il “button” che corrisponde all’area/pagina in cui si è deciso di navigare. In questo caso specifico, all’interno del MainMenu, definito come component screen, sono stati definiti degli “states” – uno per ciascun controllo “button” – che ne esplicitano le proprietà associate allo stato button attivo. Una volta inserito il “MainMenu” in ogni pagina, sarà richiesto all’applicazione, attraverso l’impiego di un behavior, di attivare il corrispondente “states” associato alla pagina.
Per semplicità, vediamo il tutto applicato al nostro prototipo di esempio.
Come rappresentato nell’immagine qui sotto, all’interno del component screen – MainMenu – sono state definiti 7 states in cui sono state modificate alcune properties associate ad ogni singolo button; in modo da simularne l’attivazione – il classico effetto “positivo/negativo”. Per intenderci ad ogni states, corrisponde l’attivazione attraverso la modifica di alcune properties (background e foreground) del button corrispondente.



A questo punto, è sufficiente associare in ogni screen che caratterizza il prototipo il behavior che permette di gestire l’attivazione degli states – “GoToStateAction” al loading della pagina.
Se notate, nel pannello “Objects and Timeline” al controllo Grid – “LayoutRoot” risulta associato il behavior, e nelle properties del behavior è stato associato all’EventName “loaded” della pagina il caricamento dello “StateName” – Coming definito all’interno del component screen – MainMenu.


Particolare attenzione alle altre possibili opzioni disponibili nel pannello properties del behavior, che vi permettono di specificare e definire il comportamento e l’interazione associata. Nel nostro caso specifico il tutto dovrà essere associato in questo modo, tranne che per l’opzione StateName che varierà a seconda della pagina in cui è stato inserito il MainMenu.

- SourceName: LayoutRoot
- EventName: Loaded
- TargetName: MainMenu
- StateName: Coming

Inoltre, vi ricordo che il presente behavior – “GoToStateAction”, è disponibile nell’Asset Library tra i behavior proposti di default da Expression Blend 3, nel progetto sono stati importati una serie di behavior “custom” che verranno impiegati negli step successivi dell’esercitazione. Il tutto è stato poi replicato per ogni pagina in cui è presente il MainMenu, attivando lo stato corrispondente.



Operando in questo modo sarete in grado di gestire a livello di component screen, l’attivazione dei button che caratterizzano il menu in relazione alle pagine in cui è stato inserito, funzionalità molto utile per l’utente in modo da aver sempre ben presente la navigazione all’interno del prototipo.

In questo caso specifico, si è scelto di impiegare gli states e i “visual states” per una funzionalità molto specifica, come vedremo nei prossimi post, l’impiego degli states, può essere molto utile per visualizzare e rappresentare particolari funzionalità che devono essere sviluppate all’interno di un’applicazione.

Per tutti quelli che mi hanno richiesto via mail di avere il progetto Blend SketchFlow, a questo link, trovate disponibile al DOWNLOAD il progetto del prototipo SketchFlow (9 Mbytes) >>
(N.B. Nel progetto sono presenti delle funzionalità aggiuntive che verranno descritte nel corso dei prossimi post.)