Использование FreshMvvm для новичков в Xamarin.Forms

07 Ноябрь

Использование FreshMvvm для новичков в Xamarin.Forms

MVVM, NuGet, Перевод Android, Forms, iOS, Windows Phone Leave a Comment

На этой неделе у меня выдалось некоторое свободное время, и я посвятил его изучению FreshMvvm. Его создателем является Майкл Ридланд из Xam Consulting.

FreshMvvm — это Mvvm-фреймворк, который специально разработан для Xamarin.Forms. Он использует существующие возможности, обеспечиваемые Xamarin.Forms, и только добавляет некоторые вещи, которых XF недостаёт. Вот лишь несколько возможностей, которые этот фреймворк предоставляет: навигация pagemodel — pagemodel, автоматическое монтирование привязки контекста и так же автоматическое монтирование событий страниц.

Давайте ознакомимся с кратким руководством по использованию этого mvvm-фреймворка.

Сначала нам нужно создать пустое XAML-приложение Xamarin.Forms под названием FreshMvvmCRM

Далее, мы должны добавить в наше решение Nuget-пакет FreshMvvm. Я уже написал статью о проблемах, с которыми я столкнулся при добавлении пакета.

Теперь нам нужно установить нужную папку, чтобы FreshMvvm начал выполнять свою работу. Создайте в PCL-проекте папки следующего вида: Models, PageModels, Pages.

Чтобы уменьшить количество кода, мы будем использовать с нашей Contact-моделью Fody PropertyChange Nuget. Удалять код можно путём установки INotifyPropertyChange в обновлениях свойства.

Теперь нам нужно создать Contact.cs в папке Models. Ниже приводится код для этого класса.

using PropertyChanged;
 
namespace FreshMvvm.CRM.Models
{
    [ImplementPropertyChanged]
    public class Contact
    {
        public string Name { get; set; }
        public string Number { get; set; }
    }
}

using PropertyChanged;

namespace FreshMvvm.CRM.Models

{

[ImplementPropertyChanged]

public class Contact

{

public string Name { get; set; }

public string Number { get; set; }

}

Далее, нам нужно создать ContactListPageModel в папке PageModels. Ниже приведен код для файла. Он будет являться viewmodel для нашего ContactListPage. FreshMvvm использует конвенцию для автоматизации datacontext между viewmodel и view.

using FreshMvvm.CRM.Models;
using System.Collections.Generic;
 
namespace FreshMvvm.CRM.PageModels
{
    public class ContactListPageModel: FreshBasePageModel
    {
        public List<Contact> ContactList { get; set; }
 
        public ContactListPageModel()
        {
 
        }
 
        public override void Init(object initData)
        {
            base.Init(initData);
 
            ContactList = new List<Contact>
            {
                new Contact {Name = "Peter", Number="239847" },
                new Contact {Name = "James", Number="239847" }
            };
 
        }
 
        public Contact SelectedContact
        {
            get { return null; }
 
            set
 
            {
                CoreMethods.PushPageModel<ContactPageModel>(value);
 
                RaisePropertyChanged();
            }
        }
    }
}

using FreshMvvm.CRM.Models;

using System.Collections.Generic;

namespace FreshMvvm.CRM.PageModels

{

public class ContactListPageModel: FreshBasePageModel

{

public List<Contact> ContactList { get; set; }

public ContactListPageModel()

{

}

public override void Init(object initData)

{

base.Init(initData);

ContactList = new List<Contact>

{

new Contact {Name = "Peter", Number="239847" },

new Contact {Name = "James", Number="239847" }

};

}

public Contact SelectedContact

{

get { return null; }

set

{

CoreMethods.PushPageModel<ContactPageModel>(value);

RaisePropertyChanged();

}

Следующим шагом нам следует создать PageModel в папке PageModels. Нише приводится код для файла. Этот код будет использоваться для XAML-страницы ContactPage, которую ContactListPageModel проталкивает в стек переходов, когда контакт становится выбранным для списка.

using FreshMvvm.CRM.Models;
using System;
 
namespace FreshMvvm.CRM.PageModels
{
    public class ContactPageModel: FreshBasePageModel
    {
        public Contact Contact { get; set; }
 
        public ContactPageModel()
        {
 
        }
 
        public override void Init(object initData)
        {
            base.Init(initData);
 
            Contact = initData as Contact;
 
        }
 
        protected override void ViewIsAppearing(object sender, EventArgs e)
        {
            base.ViewIsAppearing(sender, e);
 
            CoreMethods.DisplayAlert("Wired", "Done", "Ok");
        }
    }
}

using FreshMvvm.CRM.Models;

using System;

namespace FreshMvvm.CRM.PageModels

{

public class ContactPageModel: FreshBasePageModel

{

public Contact Contact { get; set; }

public ContactPageModel()

{

}

public override void Init(object initData)

{

base.Init(initData);

Contact = initData as Contact;

}

protected override void ViewIsAppearing(object sender, EventArgs e)

{

base.ViewIsAppearing(sender, e);

CoreMethods.DisplayAlert("Wired", "Done", "Ok");

}

Итак, переходим к созданию страниц. Сперва нам нужно создать новую страницу Xamarin.Forms под названием ContactListPage. И снова FreshMvvm автоматизирует контекст привязки данных между viewmodel и view. Так что не существует никакого кода или XAML для определения привязки datacontext.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="https://goo.gl/SkKd9T" xmlns:x="https://goo.gl/korsZp" x:Class="FreshMvvm.CRM.Pages.ContactListPage">
    <Label Text="{Binding MainText}" VerticalOptions="Center" HorizontalOptions="Center" />
    <ListView ItemsSource="{Binding ContactList}" SelectedItem="{Binding SelectedContact}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextCell Text="{Binding Name}" Detail="{Binding Number}"></TextCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ListView.ItemTemplate>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</ContentPage>

Теперь нам нужно создать ContactPage. Ниже приводится код для XAML-страницы Xamarin.Forms.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="https://goo.gl/SkKd9T" xmlns:x="https://goo.gl/korsZp" x:Class="FreshMvvm.CRM.Pages.ContactPage">
    <StackLayout>
        <Entry Text="{Binding Contact.Name}"></Entry>
        <Entry Text="{Binding Contact.Number}"></Entry>
    </StackLayout>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

</StackLayout>

</ContentPage>

Теперь требуется обновить App.xaml.cs, чтобы установить Mainpage для нашего приложения. Ниже приводится код для файла. И здесь опять FreshMvvm творит чудеса, разрешая view загружаться из контекста viewmodel. Далее, мы используем функции навигации фреймворка, чтобы управлять нашей страницей навигации с помощью FreshNavigationContainer.

using FreshMvvm.CRM.PageModels;
 
using Xamarin.Forms;
 
namespace FreshMvvm.CRM
{
    public partial class App : Application
    {
        public App()
        {
             var contactlist = FreshPageModelResolver.ResolvePageModel<ContactListPageModel>(null);
            var navContainer = new FreshNavigationContainer(contactlist);
            MainPage = navContainer;
 
        }
 
    }
}

using FreshMvvm.CRM.PageModels;

using Xamarin.Forms;

namespace FreshMvvm.CRM

{

public partial class App : Application

{

public App()

{

var contactlist = FreshPageModelResolver.ResolvePageModel<ContactListPageModel>(null);

var navContainer = new FreshNavigationContainer(contactlist);

MainPage = navContainer;

}

Нажимаем F5 для компиляции и запуска приложения. Как видите, FreshMvvm помогает сокращать излишний код, который разработчики, работающие с Xamarin, зачастую вынуждены напрасно вводить при создании своего мобильного приложения.