The document discusses building an MVVM architecture for Xamarin.Forms applications. It introduces MVVM as an architectural pattern based on data binding and commanding. It describes the functionalities of the Model, View, and ViewModel components in MVVM, including how the View binds to the ViewModel and displays data through bindings, while the ViewModel handles application logic and flow. It provides an example of how data binding works by binding UI elements to properties on a single object or a collection. It also discusses change notification and commanding in MVVM applications.

1. BuildinganMVVM-based
Architecturefor
Xamarin.Forms
JoTechies
www.jotechies.com
AmjadAl-Husseini
November2017

2. Amjad.alhusseini@outlook.com​
@Amjad_Husseini
/amjadhusseini
http://Amjadhusseini.com​
Amjad Al-husseini

3. JoTechies is a Tech community that
provides education, help and social
events for IT professional in Jordan and
helps you network with local IT peers.
@JoTechies
JoTechies www.JoTechies.com
JoTechies
JoTechies

4. Agenda
• What is MVVM?
• How we used to live without it.
• Functionalities of M, V and VM
• Data binding
• Commanding
• Demo

5. Hello MVVM
A rchitectural
pattern
Based on data
binding and
commanding
Popular since
X A ML (WPF,
Silverlight…)
Promotes S O C
and testability

6. Without MVVM
View
View code
Code-behind
Model

7. Architecture of MVVM
View
View code
Code-behind
View Model
Data
B inding
Change
Notifications
Model

8. Functionalities of the View
User interface
- Activity in Android
- ViewController in iOS
- XAML view inWindows
“Binds” to a view model instance
No business logic
View
View code
Code-behind

9. Glue between view and model
Expose state and operations
Handle flow of the application
Testable
No reference to UI elements
View Model
Functionalities of the View Model

10. Model
Data model and services
Return data
Functionalities of the Model

11. Data binding

12. Data binding
UI Element
UI Property
O bject
Property
Data
Binding
3
4
1
2
Binding target Binding source

13. Single object or collection
Not related to database
Part of shared code
Binding
source
Object
Property

14. Data
Binding
Removes need for code
Synchronization
Conversion

15. UI Element
Part of the Android & iOS apps
Binding
target
UI Element
UI Property

16. From: Lon d on
To: Manchester
Departure: 11:00
Save
Object
Binding to a Single Object

17. From: London
To: Manchester
Departure: 11:00
From: Manchester
To: Liverpool
Departure: 12:35
From: London
To: Oxford
Departure: 13:25
Object 1
Object 2
Object 3
Object n
…
Binding to collection

18. Change notification
From: Lon d on
To: Manchester
Departure: 12:00
Save
Object
From = "London"
To = "Manchester"
DepartureTime = "12:00"
INotifyPropertyChanged
PropertyChanged

19. Commanding

20. Demo

21. Thank You
JoTechies
www.jotechies.com

22. JoTechies
www.jotechies.com
Q&A