Alessandro Andreosè
Laureando in Ingegneria Informatica
   Agevolare lo sviluppo di applicazioni desktop
    ◦ MVVM
    ◦ UI Composition
    ◦ Separazione ruoli
      Designer
      Developer




                    Separazione dei ruoli tra Designer e Developer
                    nello sviluppo di applicazioni Desktop: uso di WPF
                    e del pattern Model-View-ViewModel
   Interfaccia utente
    ◦ Elevata user experience
       WPF
    ◦ Modulare
       UI Composition
    ◦ Testabile e manutenibile
       MVVM
   Applicazione Desktop
   Ambiente Client e Server Microsoft
    ◦ IIS 7.0
    ◦ Framework .NET 3.5 SP1
    ◦ SQL Server 2008
   MVVM
    ◦ MVVM Light Toolkit
       di Laurent Bugnion
    ◦ Cinch
       di Sasha Barber
    ◦ Goldlight
       di Peter O'Hanlon
    ◦ ...
   MVVM e UI Composition
    ◦ Prism
       del Team di Patterns and Practices di Microsoft
   Tecnologia di «Presentazione»
   Disponibile da Novembre 2006 (Fx 3.0)
   Andrà a sostituire la tecnologia GDI/Winforms
    ◦ GDI(circa 1985 Windows 3.0)
   DirectX
    ◦ Sfrutta l'hardware grafico
WF          Direct
                    WF   PDF          WMP            WPF
                               GDI+          3D
Interfaccia
grafica
                    X                                X
Lettura documenti
a video             X                                X
Stampa di
documenti                X                           X
Immagini                        X                    X
Media                                 X              X
Grafica 2D                      X                    X
Grafica 3D                                    X      X
Expression Blend                               Visual Studio
   XAML                                                    …
                                                            <Button Background=“Red”>

    ◦ Linguaggio di Markup
                                                             No
                                                            </Button>
                                                            …
    ◦ 1 elemento, 1 oggetto .NET
    ◦ Il nome del tag è il nome della classe
                                                                     XAML


                                             Designer                                    Developer

   Command
    ◦ Associare un comando ad un evento
    ◦ 1 evento, 1 comando
    ◦ Tanti eventi, 1 comando

   Data Binding
    ◦ Collegare un dato direttamente all'interfaccia utente
    ◦ INotifyPropertyChanged
   Separa interfaccia utente da implementazione
    ◦ DataBinding
    ◦ Command
    ◦ Minimizzare (annullare) codice nel code behind

   Variante di MVC
    ◦ MVVM ideato nel ottobre 2005 da John Grossman
    ◦ Utilizzato in Microsoft per sviluppare Expression
      Blend

   Non c'è contatto tra view e model
    ◦ Il ViewModel è sempre in mezzo
       Model – dominio applicativo
       View – UI
       ViewModel – Model of a View, astrazione della view
   View
    ◦ UI
      XAML
      Poco (o nulla) Code Behind

   ViewModel
    ◦ Model of a View
      Astrazione della View
      Specializzazione del Model
      1 user story, 1 ViewModel

   Model
    ◦ Dominio Applicativo
      Person
   Svilippo di un Toolkit per agevolare la
    realizzazione di applicazioni desktop
    ◦ Basato su MVVM
      DataBinding
      Command
      Broker
    ◦ Basato su UI Composition
      Module
      Region
      Shell
   No MVVM




   Sì MVVM
   la finestra View1 ha un bottone,
    ◦ al clic bisogna scrivere in una TextBox "Bottone
      premuto"
No MVVM




Sì MVVM
   una finestra, View1 ha un bottone
    ◦ Al clic si deve visualizzare un'altra finestra, View2




      No MVVM
VM1 conosce VM2
VM1 crea VM2 e non View2
   Attore terzo
    ◦ In mezzo tra 2 attori
      (VM1, VM2)
    ◦ Rispecchia il pattern
      evento – sottoscrizione             VM1 richiede View2



                                                      Il broker
                                                      crea VM2
   Azioni
    ◦ Dispatch messaggio
    ◦ Sottoscrizione messaggio
    ◦ Cancellazione sottoscrizione   VM2 visualizza View2
   VM
    ◦ Diaccoppia View e Model
   Command
    ◦ Disaccoppia Evento e Operazione da eseguire
    ◦ Testabilità dell'operazione
   DataBinding
    ◦ Disaccoppia UI e Dati
   Command + DataBinding
    ◦ ViewModel indipendente dalla View
   Broker
    ◦ Disaccoppia ViewModel
   Modulo                                        SHELL
    ◦ Parte di applicazione
    ◦ Generalmente visuale          REGION 1                REGION 2
   Region                       Modulo 5

    ◦ Contiene moduli             Modulo 4
                                    Modulo 3
                                                             Modulo 6

      visuali                        Modulo 2

    Shell
                                      Modulo 1

    ◦ Finestra principale       Modulo 8
                                                 REGION 3
                                                                 Modulo 9
                                                 Modulo 7
    ◦ 1 sola shell
    ◦ contiene 1 o più region
   nella finestra principale (Shell)
    ◦ si preme un bottone
    ◦ si deve inserire nella shell una view (View1)
No UI Composition




                      logica inserimento modulo        creazione modulo


Sì UI Composition
              Shell                    RegionManager         Container di IoC

             REGION
                                           View1                    …
              View1
                                                                  View1
                          Show View1                                …



                         logica inserimento modulo         creazione modulo
   Broker
    ◦ Punto di contatto tra MVVM e UI Composition
    ◦ Disaccoppia ViewModel

   RegionManager
    ◦ Disaccoppia Shell da Modulo
    ◦ Module = View + ViewModel

   IoC
    ◦ Disaccoppia creazione oggetti dal resto
      dell'applicazione
   Sviluppo di un Toolkit
    ◦ Agevolare la realizzazione di applicazioni desktop
      WPF + MVVM
        User Experience
      UI Composition
        Applicazione modulare
        La modifica di un modulo non influsce sul resto
         dell'applicazione
   Gestione palestre
    ◦ Assegnazione turni
      Società
      Palestra
      Custode
    ◦ Pagamento utilizzo palestra
      Società
      Custode
DB Server DC   Web Server




                                 Client

Client     Client    Client
   WPF è giovane (11/2006)
    ◦ Pochi controlli di terze parti
    ◦ Designer molto recente
       Expression Blend 2 SP1 (08/2008)
   MVVM è giovane (10/2005)
    ◦ Molte soluzioni diverse agli stessi problemi

   WPF, MVVM e UI Composition
    ◦ I vantaggi sono superiori agli svantaggi

   WPF vs WinForms
    ◦ User Experience
       DataBinding, Template, Style, Attached Behaviors
       Separazione dei ruoli Designer, Developer semplificata
    ◦ Microsoft non sviluppa più Windows Forms
   Toolkit
    ◦ Nuove region
    ◦ Sistema di validazione e focus
    ◦ Undo & Redo



   Applicazione (core già in produzione)
    ◦ Terminare il porting in produzione
    ◦ Bug Fixing
   DB
    ◦ 30 tabelle


   Software
    ◦ 18 progetti VisualStudio
    ◦ 500+ Unit Test
    ◦ 16.000+ righe di codice

Slide Prelaurea. Alessandro Andreosè

  • 1.
    Alessandro Andreosè Laureando inIngegneria Informatica
  • 2.
    Agevolare lo sviluppo di applicazioni desktop ◦ MVVM ◦ UI Composition ◦ Separazione ruoli  Designer  Developer Separazione dei ruoli tra Designer e Developer nello sviluppo di applicazioni Desktop: uso di WPF e del pattern Model-View-ViewModel
  • 3.
    Interfaccia utente ◦ Elevata user experience   WPF ◦ Modulare   UI Composition ◦ Testabile e manutenibile   MVVM
  • 4.
    Applicazione Desktop  Ambiente Client e Server Microsoft ◦ IIS 7.0 ◦ Framework .NET 3.5 SP1 ◦ SQL Server 2008
  • 5.
    MVVM ◦ MVVM Light Toolkit  di Laurent Bugnion ◦ Cinch  di Sasha Barber ◦ Goldlight  di Peter O'Hanlon ◦ ...  MVVM e UI Composition ◦ Prism  del Team di Patterns and Practices di Microsoft
  • 6.
    Tecnologia di «Presentazione»  Disponibile da Novembre 2006 (Fx 3.0)  Andrà a sostituire la tecnologia GDI/Winforms ◦ GDI(circa 1985 Windows 3.0)  DirectX ◦ Sfrutta l'hardware grafico
  • 7.
    WF Direct WF PDF WMP WPF GDI+ 3D Interfaccia grafica X X Lettura documenti a video X X Stampa di documenti X X Immagini X X Media X X Grafica 2D X X Grafica 3D X X
  • 8.
    Expression Blend Visual Studio  XAML … <Button Background=“Red”> ◦ Linguaggio di Markup No </Button> … ◦ 1 elemento, 1 oggetto .NET ◦ Il nome del tag è il nome della classe XAML Designer Developer  Command ◦ Associare un comando ad un evento ◦ 1 evento, 1 comando ◦ Tanti eventi, 1 comando  Data Binding ◦ Collegare un dato direttamente all'interfaccia utente ◦ INotifyPropertyChanged
  • 9.
    Separa interfaccia utente da implementazione ◦ DataBinding ◦ Command ◦ Minimizzare (annullare) codice nel code behind  Variante di MVC ◦ MVVM ideato nel ottobre 2005 da John Grossman ◦ Utilizzato in Microsoft per sviluppare Expression Blend  Non c'è contatto tra view e model ◦ Il ViewModel è sempre in mezzo  Model – dominio applicativo  View – UI  ViewModel – Model of a View, astrazione della view
  • 10.
    View ◦ UI  XAML  Poco (o nulla) Code Behind  ViewModel ◦ Model of a View  Astrazione della View  Specializzazione del Model  1 user story, 1 ViewModel  Model ◦ Dominio Applicativo  Person
  • 11.
    Svilippo di un Toolkit per agevolare la realizzazione di applicazioni desktop ◦ Basato su MVVM  DataBinding  Command  Broker ◦ Basato su UI Composition  Module  Region  Shell
  • 12.
    No MVVM  Sì MVVM
  • 13.
    la finestra View1 ha un bottone, ◦ al clic bisogna scrivere in una TextBox "Bottone premuto"
  • 14.
  • 15.
    una finestra, View1 ha un bottone ◦ Al clic si deve visualizzare un'altra finestra, View2 No MVVM
  • 16.
    VM1 conosce VM2 VM1crea VM2 e non View2
  • 17.
    Attore terzo ◦ In mezzo tra 2 attori (VM1, VM2) ◦ Rispecchia il pattern evento – sottoscrizione VM1 richiede View2 Il broker crea VM2  Azioni ◦ Dispatch messaggio ◦ Sottoscrizione messaggio ◦ Cancellazione sottoscrizione VM2 visualizza View2
  • 18.
    VM ◦ Diaccoppia View e Model  Command ◦ Disaccoppia Evento e Operazione da eseguire ◦ Testabilità dell'operazione  DataBinding ◦ Disaccoppia UI e Dati  Command + DataBinding ◦ ViewModel indipendente dalla View  Broker ◦ Disaccoppia ViewModel
  • 19.
    Modulo SHELL ◦ Parte di applicazione ◦ Generalmente visuale REGION 1 REGION 2  Region Modulo 5 ◦ Contiene moduli Modulo 4 Modulo 3 Modulo 6 visuali Modulo 2 Shell Modulo 1  ◦ Finestra principale Modulo 8 REGION 3 Modulo 9 Modulo 7 ◦ 1 sola shell ◦ contiene 1 o più region
  • 20.
    nella finestra principale (Shell) ◦ si preme un bottone ◦ si deve inserire nella shell una view (View1)
  • 21.
    No UI Composition logica inserimento modulo creazione modulo Sì UI Composition Shell RegionManager Container di IoC REGION View1 … View1 View1 Show View1 … logica inserimento modulo creazione modulo
  • 22.
    Broker ◦ Punto di contatto tra MVVM e UI Composition ◦ Disaccoppia ViewModel  RegionManager ◦ Disaccoppia Shell da Modulo ◦ Module = View + ViewModel  IoC ◦ Disaccoppia creazione oggetti dal resto dell'applicazione
  • 23.
    Sviluppo di un Toolkit ◦ Agevolare la realizzazione di applicazioni desktop  WPF + MVVM  User Experience  UI Composition  Applicazione modulare  La modifica di un modulo non influsce sul resto dell'applicazione
  • 24.
    Gestione palestre ◦ Assegnazione turni  Società  Palestra  Custode ◦ Pagamento utilizzo palestra  Società  Custode
  • 25.
    DB Server DC Web Server Client Client Client Client
  • 27.
    WPF è giovane (11/2006) ◦ Pochi controlli di terze parti ◦ Designer molto recente  Expression Blend 2 SP1 (08/2008)  MVVM è giovane (10/2005) ◦ Molte soluzioni diverse agli stessi problemi  WPF, MVVM e UI Composition ◦ I vantaggi sono superiori agli svantaggi  WPF vs WinForms ◦ User Experience  DataBinding, Template, Style, Attached Behaviors  Separazione dei ruoli Designer, Developer semplificata ◦ Microsoft non sviluppa più Windows Forms
  • 28.
    Toolkit ◦ Nuove region ◦ Sistema di validazione e focus ◦ Undo & Redo  Applicazione (core già in produzione) ◦ Terminare il porting in produzione ◦ Bug Fixing
  • 29.
    DB ◦ 30 tabelle  Software ◦ 18 progetti VisualStudio ◦ 500+ Unit Test ◦ 16.000+ righe di codice