Il documento discute le problematiche relative alla composizione dell'interfaccia utente (UI composition) e propone possibili soluzioni, evidenziando la necessità di modularizzare e gestire team distribuiti. Vengono esplorati i requisiti per un toolkit efficace e la gestione del ciclo di vita dei moduli, oltre alla comunicazione tra diversi attori. Infine, si insegna come implementare queste componenti attraverso l'uso di regioni statiche e dinamiche in WPF e XAML.

1. UI Composition
Problemi e “possibili” Soluzioni
Paolo Possanzini
Mauro Servienti

2. Agenda
• UI Composition
– Ma pecccchè?
– I problemi;
– Le possibili soluzioni;
• Toolkit:
– cosa offre il mercato;
– farselo, è pensabile?

3. È un investimento decisamente onoreso, ne vale la pena?
UI COMPOSITION: PERCHÈ?

4. Bella domanda...
• Cliente: necessità di modularizzare:
– Acquistare in configurazioni diverse;
– Installare in configurazioni diverse;
• Team: necessità di gestire e lavorare:
– Team grande o distribuito;
– Soluzione/i di dimensioni ingestibili in VS;
– Tempi di sviluppo diversi dei “moduli” che non
devono condizionarsi/bloccarsi a vicenda;
• Un esempio per tutti: Visual Studio;

5. Ok, chiaro... Ma a che costo?
UI COMPOSITION: I PROBLEMI

6. Mamma mia...
• ...oltre a tutto quello che M-V-VM si porta
dietro:
– Region management;
– La comunicazione tra attori che non si conoscono;
– Gestione del ciclo di vita del modulo/plugin;
– Obbligatorietà di IoC perchè bisogna avere a che
fare con i contratti... altrimenti ciccia plugin;

7. Semplicità, adesso è tutto così facile...
“Region... perchè sei tu region”
Toolbars e Documents sono
Region in cui poter iniettare
contenuti a runtime
xxxDetails è una Region in cui
poter iniettare contenuti
contestuali a runtime

8. Semplicità...adesso un po’ meno...
Ecco perchè per mettere M-V-VM al centro del
mondo è necessario sporcarsi le mani

9. Region: statiche e dinamiche
• Toolbars e Documents sono region “statiche”;
– Referenziabili per “nome”;
• Ma se avessimo più Window?
CustomerWindow: Instance 1
“ContentRegion”
CustomerWindow: Instance 2
“ContentRegion”
• IRegionManager.GetRegion( name ) ?
• svc.RegisterRegion( name, view );
• svc.GetManager( view ).GetRegion( name );

10. RegionService, RegionManager, Region
• Wpf e Xaml vi danno la massima libertà: lunga
vita alle Attached Property;
<ContentPresenter
rg:RegionService.Region="{rg:ContentPresenterRegion 'myRegionName'}"
/>

11. Come comunicano?
l’elemento selezionato deve
“attivare” un Command nella
toolbar
Una toolbar contestuale
compare quando visualizziamo
contenuti contestuali
La variazione di selezione deve
essere intercettata per iniettare
i contenuti contestuali

12. Il postino suona sempre 2 volte
• I vari attori, aka Module, non si conoscono ma
hanno la necessità di comunicare tra loro:
– Dobbiamo definire una lingua nota a tutti;
– Dobbiamo designare qualcuno come postino;

13. Italiani...! La shell si avvia!
• Il nostro postino trasporta messaggi:
ViewModelLoading<IShellViewModel>()
• che contengono informazioni:
var regionManager = this.regionService.GetRegionManager( this.View );
var msg = new ViewModelLoading<IShellViewModel>( this, regionManager );
this.broker.Dispatch( msg );
• che possiamo usare a nostro uso e consumo:
this.broker.Subscribe<ViewModelLoading<IShellViewModel>>( this, msg =>
{
var viewModel = this.provider.GetService( typeof( IMyContentViewModel ) )
msg.RegionManager[ "myRegionName" ].Add( viewModel.View );
} );

14. ... Si ma come è fatto?
ANATOMIA: ...DAL VIVO!

15. Struttura
• Separazione di contratto e implementazione;
– ComponentModel;
– Runtime;
• Ma...qualcuno deve conoscere il tutto:
– Bootstrapper: è l’equivalente del file di
configurazione;

16. Cosa offre il mercato?
TOOLKIT, TOOLKIT E ANCORA
TOOLKIT...

17. Realizzare un toolkit...
• ... Il gioco vale la candela?
• Che requisiti dobbiamo soddisfare:
– Gestione delle region;
– Comunicazione;
– Gestione del ciclo di vita dei moduli;
• Ma anche (ecco perchè forse ha senso):
– Un set di ViewModel di base;
– Un motore di validazione degno del suo nome;
– Localizzazione;
• e... Silverlight?

18. ... Si m... Io continuo a non capire...
DEMO

19. Fate i bravi....
NIENTE DOMANDE...? :-)