Jak zacząć z FreshMVVM

Jak zacząć z FreshMVVM w Xamarin Forms

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

<?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>

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

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();
        }
    }
}

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

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; }
    }
}

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ę

MainPage = FreshMvvm.FreshPageModelResolver.ResolvePageModel<TodoItemPageModel>();

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?

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *