MVVM.Light i Xamarin.Forms

mvvmlight_xamarin
Wyrzkosytanie biblioteki MVVM light z Xamarin.Forms

W tym poście opiszę sposób przygotowania aplikacji z użyciem biblioteki MVVM.Light. Jest to kolejny post z serii konkursowych, w których mam zamiar stworzyć aplikację w Xamarin.Forms i przy okazji nauczyć się tej technologii.

Xamarin.Forms posiadają wbudowane wsparcie do tzw. Binding-u  w związku z tym ciężko się oprzeć temu aby nie skorzystać i zastosować wzorzec projektowy MVVM. Główne zalety tego wzorca to separacja logiki od tzw. widoków oraz testowalność aplikacji. Jednakże nie mam zamiaru się dziś na ten temat rozwodzić.

W Forms-ach można samemu zaimplementować dany wzorzec z wykorzystaniem interfejsu INotifyPropertyChanged. Podobnie jak opisywałem to w tym poście dla technologii WPF. Jednakże teraz mam zamiar zastosować gotową bibliotekę MVVM Light wspierającą ten wzorzec. Wspomina biblioteka jest jedną z popularniejszych bibliotek i wspiera chyba wszystkie możliwe technologie gdzie ten wzorzec ma zastosowanie. Oprócz klas wspomagających MVVM, biblioteka ta posiada również prosty kontener IOC (SimpleIOC).

Zakładając, że skończyłeś razem ze mną na poprzednim poście i masz już gotowy projekt to tutaj w poniższych krokach opiszę co należy zrobić aby przygotować projekt do pracy z biblioteką MVVM Light w Xamarin.Forms.

1. Na początek do wszystkich projektów dodajmy paczki Nuget  o nazwie MVVMLIght i MVVMLightLibs. Po dodaniu usuwamy foldery z projektów platform z wyjątkiem projektu PCL.

mvvmlight_nugets
Dodanie bibliotek MVVM Light do projektu

2. Teraz zmienimy kod konstruktora klasy App oraz dodamy stronę otwierającą aplikację. Dodajmy też property ViewModelLocator, który opiszę w następnym punkcie.

Dodajmy nowy folder w projekcie PCL o nazwie Views, w nim będziemy przechowywać widoki wspólne dla każdej platformy. Po dodaniu folderu dodajmy nową stronę XAML i dajmy jej nazwę MainPage.

mvvmlight_mainPage
Dodanie widoku MainPage

3. Przejdźmy do klasy ViewModelLocator, to właśnie tutaj będziemy rejestrować nasze ViewModele do kontenera IOC. A później także tak zwane w świecie MVVM usługi – services, ale o tym w innym wpisie.

Dobrą praktyką jest nazywanie widoków po nazwach ViewModeli gdzie np. widok Main (page) będzie miał ViewModel o nazwie MainViewModel.

W naszym przypadku mam już klasę ViewModel-u zdefiniowaną i zarejestrowaną w kontenerze IOC, więc aktualnie nie ma co tutaj robić.

4. Na koniec pozostało wiązanie widoku do ViewModel-a

5. Dodajmy testowe property w klasie MainViewModel.

Oraz zróbmy Binding to testowej kontrolki typu Label w plku MainPage.xaml:

Po skompilowaniu aplikacji powinniśmy ujrzeć napis jak na poniższym screenie.

mvvmlight_binding
Binding z MVVMLight

W ten oto sposób mamy zaimplementowany wzorzec MVVM z wykorzystaniem biblioteki MVVM Light w Xamarin.Forms.

Kod aplikacji znajdziecie pod adresem: https://github.com/xorch/WellDoneItXam

W następnych postach poruszę tematy związane z nawigacją w aplikacji.