Archiwum kategorii: MVVM

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?