ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

Mvvm

•Download as PPTX, PDF•
•
Marco Buttolo
Marco Buttolo

Breve introduzione al pattern di programmazione MVVM

1 of 26
Download to read offline
MVVM A CURA DELL’ING. BUTTOLO MARCO
MVVM introduzione • MVVM è l’acronimo di ModelViewView Model • E’ un pattern software architetturale, ossia una metodologia di sviluppo di applicativi software per Microsoft. • I componenti sono: • Model -> E’ un modello dei dati dell’applicazione (strutture dati, classi,…) • View -> comprende le viste ossia le pagine dell’applicativo • View Model -> è l’intermediario tra il model e le viste.
Schema strutturale • Pagine View • Interfaccia tra viste e modelli di dati View Model • Modelli di dati Model
MVVM introduzione • In poche parole laViewModel è una classe inserita tra laView ed il Model la cui responsabilità è di esporre allaView le parti del Model di cui necessita. • MVVM è un pattern che si sposa benissimo con la tecnologiaWPF (Windows Presentation Foundation). • L’interfaccia inWPF viene creata e gestita in XAML (si pronuncia XAMEL). XAML sta per eXtensible Application Markup Language.
MVVM introduzione • Quindi MVVM (ModelViewView Model) è un pattern di programmazione nato con l’intenzione di creare programmi e scorporarli in tre differenti livelli: • 1)View -> parte UI (User Interface) • 2)ViewModel -> bridge tra la UI e la Model • 3) Model -> parte per la gestione dei dati • Qui la dipendenza è strettamente funzionale. Quindi:
MVVM introduzione • Model -> insieme di classi per l’accesso ai dati • View -> viste dell’applicazione • View Model -> punto di incontro tra la view e la model
MVVM introduzione Ogni variazione di stato dellaVIEW viene comunicata allaVIEW MODEL tramite una BIND. Se si attiva un metodo, notifico allaView Model tramite COMMAND
MVVM introduzione
MVVM introduzione • Esempio di libreria già pronta -> MVVM Light toolkit • La view model opera da device context della view, ed implementa l’interfaccia INotifyPropertyChanged. • Tramite l’interfaccia ICommand invece è piu’ semplice lavorare con i comandi. • Vantaggi uso MVVM: • 1) Piu’ efficaci gli unit test • 2) Codice piu’ leggibile
MVVM esempio con WPF • Per creare un’applicazioneWPF che sfrutta il pattern MVVM si può procedere in questo modo.AprireVisual studio e creare un nuovo progetto (per esempio inVisual C#) tipo WPF:
MVVM esempio in WPF • Creare una nuova cartella nel progetto appena costruito, come viene mostrato di seguito:
MVVM esempio in WPF • Al termine della procedura il risultato è il seguente:
MVVM esempio in WPF • Spostare il file MainWindows.xaml nella sottocartellaView appena creata:
MVVM esempio in WPF • Aprire il file App.xaml e modificare il path in cui risiede il file MainWindows.xaml, come mostrato di seguito:
MVVM esempio in WPF • Aggiungere una classe alla cartellaViewModel, come viene mostrato di seguito:
MVVM esempio in WPF • La classe appena creata nellaViewModel dovrà avere alcune caratteristiche. In particolare: • Implementare l’interfaccia INotifyPropertyChanged, in modo da essere in grado di notificare alla view gli aggiornamenti dei dati esposti
MVVM esempio in WPF • Implementare tale interfaccia significa dichiarare un evento PropertyChanged di tipo PropertyChangedEventHandler il cui delegato a gestirlo è PropertyChangedEventHandler. • Per esempio, si supponga di voler creare una textBox ed un bottone sulla vista. • L’interfaccia ed il relativo codice XAML vengono mostrati di seguito:
MVVM esempio in WPF
MVVM esempio in WPF • Codice XAML:
MVVM esempio in WPF • Si crea una nuova classe inViewModel per la gestione delle azioni:
MVVM esempio in WPF • A questo punto, esponiamo le funzionalità disponibili mediante Command, istanze di classi che implementano l’interfaccia ICommand. In sostanza esponiamo le funzionalità della nostra vista esponendo di fatto delle classi che implementano l’interfaccia Icommand, implementando: • CanExecute • Execute • Per esempio:
MVVM esempio in WPF • Esempio di implementazione ICommand:
MVVM esempio in WPF • La seguente classe è il cuore dellaViewModel:
MVVM esempio in WPF • A questo punto si crea la classe del modello:
MVVM esempio in WPF • Pertanto si ha una classe in Model, un file nelle viste, e tre classi in ViewModel. A questo punto si effettuano i legami nel codice XAML dell’interfaccia grafica sia per quanto riguarda i comandi (bottone) sia per quanto riguarda il controllo della textBox.
Grazie mille!!!

More Related Content

Mvvm

  • 2. MVVM introduzione • MVVM è l’acronimo di ModelViewView Model • E’ un pattern software architetturale, ossia una metodologia di sviluppo di applicativi software per Microsoft. • I componenti sono: • Model -> E’ un modello dei dati dell’applicazione (strutture dati, classi,…) • View -> comprende le viste ossia le pagine dell’applicativo • View Model -> è l’intermediario tra il model e le viste.
  • 3. Schema strutturale • Pagine View • Interfaccia tra viste e modelli di dati View Model • Modelli di dati Model
  • 4. MVVM introduzione • In poche parole laViewModel è una classe inserita tra laView ed il Model la cui responsabilità è di esporre allaView le parti del Model di cui necessita. • MVVM è un pattern che si sposa benissimo con la tecnologiaWPF (Windows Presentation Foundation). • L’interfaccia inWPF viene creata e gestita in XAML (si pronuncia XAMEL). XAML sta per eXtensible Application Markup Language.
  • 5. MVVM introduzione • Quindi MVVM (ModelViewView Model) è un pattern di programmazione nato con l’intenzione di creare programmi e scorporarli in tre differenti livelli: • 1)View -> parte UI (User Interface) • 2)ViewModel -> bridge tra la UI e la Model • 3) Model -> parte per la gestione dei dati • Qui la dipendenza è strettamente funzionale. Quindi:
  • 6. MVVM introduzione • Model -> insieme di classi per l’accesso ai dati • View -> viste dell’applicazione • View Model -> punto di incontro tra la view e la model
  • 7. MVVM introduzione Ogni variazione di stato dellaVIEW viene comunicata allaVIEW MODEL tramite una BIND. Se si attiva un metodo, notifico allaView Model tramite COMMAND
  • 9. MVVM introduzione • Esempio di libreria già pronta -> MVVM Light toolkit • La view model opera da device context della view, ed implementa l’interfaccia INotifyPropertyChanged. • Tramite l’interfaccia ICommand invece è piu’ semplice lavorare con i comandi. • Vantaggi uso MVVM: • 1) Piu’ efficaci gli unit test • 2) Codice piu’ leggibile
  • 10. MVVM esempio con WPF • Per creare un’applicazioneWPF che sfrutta il pattern MVVM si può procedere in questo modo.AprireVisual studio e creare un nuovo progetto (per esempio inVisual C#) tipo WPF:
  • 11. MVVM esempio in WPF • Creare una nuova cartella nel progetto appena costruito, come viene mostrato di seguito:
  • 12. MVVM esempio in WPF • Al termine della procedura il risultato è il seguente:
  • 13. MVVM esempio in WPF • Spostare il file MainWindows.xaml nella sottocartellaView appena creata:
  • 14. MVVM esempio in WPF • Aprire il file App.xaml e modificare il path in cui risiede il file MainWindows.xaml, come mostrato di seguito:
  • 15. MVVM esempio in WPF • Aggiungere una classe alla cartellaViewModel, come viene mostrato di seguito:
  • 16. MVVM esempio in WPF • La classe appena creata nellaViewModel dovrà avere alcune caratteristiche. In particolare: • Implementare l’interfaccia INotifyPropertyChanged, in modo da essere in grado di notificare alla view gli aggiornamenti dei dati esposti
  • 17. MVVM esempio in WPF • Implementare tale interfaccia significa dichiarare un evento PropertyChanged di tipo PropertyChangedEventHandler il cui delegato a gestirlo è PropertyChangedEventHandler. • Per esempio, si supponga di voler creare una textBox ed un bottone sulla vista. • L’interfaccia ed il relativo codice XAML vengono mostrati di seguito:
  • 19. MVVM esempio in WPF • Codice XAML:
  • 20. MVVM esempio in WPF • Si crea una nuova classe inViewModel per la gestione delle azioni:
  • 21. MVVM esempio in WPF • A questo punto, esponiamo le funzionalità disponibili mediante Command, istanze di classi che implementano l’interfaccia ICommand. In sostanza esponiamo le funzionalità della nostra vista esponendo di fatto delle classi che implementano l’interfaccia Icommand, implementando: • CanExecute • Execute • Per esempio:
  • 22. MVVM esempio in WPF • Esempio di implementazione ICommand:
  • 23. MVVM esempio in WPF • La seguente classe è il cuore dellaViewModel:
  • 24. MVVM esempio in WPF • A questo punto si crea la classe del modello:
  • 25. MVVM esempio in WPF • Pertanto si ha una classe in Model, un file nelle viste, e tre classi in ViewModel. A questo punto si effettuano i legami nel codice XAML dell’interfaccia grafica sia per quanto riguarda i comandi (bottone) sia per quanto riguarda il controllo della textBox.