Jak zacząć z FreshMVVM w Xamarin Forms

Jak zacząć z FreshMVVM

W post 7 framework-ów MVVM jakie możecie wybrać przedstawiłem wam kilka możliwych opcji do wyboru jeżeli chodzi o MVVM. Dzisiaj chciałbym przedstawić jeden z nich FreshMVVM.

Jak zacząć z FreshMVVM w Xamarin Forms? FreshMVVM jest prostym i mały framework-iem stworzonym specjalnie na potrzeby Xamarin Forms. Jego autorem jest Michael Ridland.

Naszym przykładem jaki wykorzystam będzie prosta aplikacja Todo.

Jak zacząć z FreshMVVM w Xamarin Forms`

A więc zaczynamy.

FreshMVVM struktura

FreshMVVM stosuje koncepcję „Convetion over Configuration” dlatego też ważna jest struktura naszego projektu.

Koncepcje jakie są ważne to:

  • Page – nasza strona, którą tworzymy w XAML
  • PageModel – nasz ViewModel, który odpowiada za całą obsługę całej logiki aplikacji

A więc tworzymy nasz projekt przez File -> New -> Project lub CTRL+SHIFT+N, wybieramy szablon Blank Xaml App (Xamarin.Forms Portable).

Pobieramy z NuGet pakiety FreshMVVM i PropertyChanged.Fody. Uruchamiamy konsolę Package Manager Console i piszemy

Install-Package FreshMvvm -ProjectName FreshTodoApp
Install-Package PropertyChanged -ProjectName FreshTodoApp

Kolejnym krokiem jest stworzenie struktury projektu

Jak zacząć z FreshMVVM w Xamarin Forms - Struktura

Tworzymy katalogi Models, PageModels i Pages będą nam one potrzebne do trzymania się konwencji jaka jest używana w FreshMVVM.

  • Models – tutaj trzymamy nasze klasy POCO np. pobrane przez HTTP
  • PageModels – tutaj trzymamy nasze klasy VM
  • Pages – tutaj trzymamy nasze strony

Trochę kodu

A więc tworzymy naszą pierwszą stronę TodoItemPage wybieramy folder w Solution Explorer i Add -> New Item -> wybieramy szablon Forms Xaml Page lub CTRL + SHIFT + A.

Strona TodoItemPage wygląda jak na listingu

[code lang=”csharp”]
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="FreshTodoApp.Pages.TodoItemPage">
<StackLayout Margin="20" VerticalOptions="FillAndExpand">
<Label Text="Name" />
<Entry Text="{Binding Todo.Name}" />
<Label Text="Note" />
<Editor Text="{Binding Todo.Note}" VerticalOptions="FillAndExpand" />
<Label Text="Done" />
<Switch IsToggled="{Binding Todo.Done}" />
<Button Text="Save" Command="{Binding SaveCommand}"/>
<Button Text="Cancel" />
<Button Text="Delete" />
</StackLayout>
</ContentPage>
[/code]

Jak widzicie mamy stworzone już Binding-i w naszym kodzie XAML. Teraz zajmiemy się naszym PageModel.

Jak poprzednio w katalogu PageModels dodajemy pustą klasę C# TodoItemPageModel, ważne jest tutaj nazewnictwo żeby zadziałał nam automatyczny binding. Musi ona dziedziczyć po FreshBasePageModel.

Klasa TodoItemPageModel listing

[code lang=”csharp”]
using FreshMvvm;
using FreshTodoApp.Models;
using Xamarin.Forms;
using PropertyChanged;

namespace FreshTodoApp.PageModels
{
[ImplementPropertyChanged]
public class TodoItemPageModel : FreshBasePageModel
{
public TodoItem Todo { get; set; }

public Command SaveCommand
{
get
{
return new Command(async () =>
{
await CoreMethods.DisplayAlert("Info", $"Create task with name {Todo.Name}", "Ok");
});
}
}

public override void Init(object initData)
{
Todo = initData as TodoItem;
if (Todo == null)
Todo = new TodoItem();
}
}
}
[/code]

Dla formalności TodoItem wygląda następująco

[code lang=”csharp”]
using PropertyChanged;

namespace FreshTodoApp.Models
{
[ImplementPropertyChanged]
public class TodoItem
{
public int Id { get; set; }
public string Name { get; set; }
public string Note { get; set; }
public bool Done { get; set; }
}
}
[/code]

FreshPageModelResolver

Żeby to wszystko zadziałało z pomocą przychodzi nam FreshPageModelResolver. Odpowiada on za powiązanie PageModel z odpowiednim Page.
W App.xaml.cs dodajemy linijkę

[code lang=”csharp”]
MainPage = FreshMvvm.FreshPageModelResolver.ResolvePageModel<TodoItemPageModel>();
[/code]

Więc jak widzicie w całkiem szybki sposób otrzymujemy działającą aplikację zgodną ze wzorcem MVVM. Pytanie takie do was czy używaliście gdzieś produkcyjnie FreshMVVM?

Share