Xamarin Forms cu Reactive UI

Xamarin Forms este suficient de versatil pe cont propriu. Combinați-l cu Reactive UI și obțineți aplicațiile cele mai elegante și modulare pe orice platformă mobilă sau desktop.

Am început să scriu aplicații Android folosind Xamarin Forms acum câteva luni și m-am îndrăgostit imediat de această platformă. Totodată, deoarece aveam experiență cu MVVM, am decis că ar fi o abordare bună și de această dată. Prin urmare, am ales să lucrez cu Reactive UI, un framework MVVM care permite utilizarea Reactive Extensions pentru .NET Framework în Xamarin Forms. În opinia mea, Reactive UI schimbă total modul de lucru și deschide o abordare diferită și interesantă.

Nu voi intra în detalii despre MVVM sau Reactive Programming, veți găsi link-uri în ultimul paragraf al acestui articol pentru mai multe informații. Luați-le ca și concepte care vor face tutorialul meu mai ușor de urmărit. Cu toate acestea, înțelegerea completă a acestor concepte nu este o cerință.

Xamarin Forms permite dezvoltarea pentru mai multe platforme începând cu Android, iOS, diferite versiuni de Windows Phone și Windows UWP. Eu voi pune accentul pe Android. Am luat această decizie doar pentru a păstra lucrurile cât mai simple. În plus, aceasta este o platformă în care Xamarin Forms se comportă relativ bine.

Aplicația demo expusa in acest tutorial dorește să fie o listă simplă de persoane, cu posibilitatea de a vizualiza detaliile unei anumite persoane. Aceasta va acoperi elementele MVVM de bază ale Reactive UI și modul în care funcționează navigația.

Ca întotdeauna, codul sursă complet pentru acest tutorial este disponibil la https://github.com/levifuksz/xamarin-reactiveui

Înainte de a începe

Am încercat să păstrez lucrurile cât mai simple și am îndreptat acest tutorial spre începători. Totuși, sunt necesare câteva cunoștințe de bază. Presupun că știți un pic de C# și că aveți habar de interfețele cu utilizatorul bazate pe XAML. Experiență prealabilă în dezvoltarea de aplicații Android nu este necesară. Puteți începe să scrieți direct cod sursă în C# fără a cunoaște Java.

De asemenea, presupun că ați instalat Visual Studio împreună cu platforma Xamarin. Puteți descărca versiunea Visual Studio 2017 Community, gratuit, de pe site-ul Microsoft.
https://www.visualstudio.com/

Asigurați-vă că, atunci când instalați Visual Studio 2017, instalați de asemenea platforma Xamarin așa cum se vede în imaginea de mai jos.

Platforma Xamarin se poate instala și separat în cazul în care aveți deja Visual Studio. Luați-o de pe site-ul lor de la adresa https://www.xamarin.com/platform

Inițializarea proiectului Xamarin Forms

Deschideți Visual Studio și mergeți la File > New > Project. De asemenea, puteți apăsa combinația de taste Ctrl + Shift + N pentru a obține același rezultat.

În fereastra nouă, pe ierarhia din partea stângă, navigați la Installed > Templates > Visual C# > Cross-Platform și selectați Cross Platform App (Xamarin Forms or Native). De asemenea, nu uitați să alegeți un nume pentru proiect. Continuați făcând clic pe OK . Vedeți imaginea de mai jos.

În următorul dialog, asigurați-vă că alegeți Portable Class Library la setarea Code Sharing Strategy. Lăsați restul setărilor neschimbate ca în imagine. La sfârșit, dați clic pe OK.

În funcție de alte platforme de dezvoltare pe care le-ați instalat, pot apărea câteva ferestre suplimentare în timpul creării unui proiect. Este în regulă să ignorați orice setări care țin de iOS, Windows Phone sau Universal Windows Platform. Lăsați aceste setări neschimbate, deoarece ne vom concentra doar pe Android.

Trecerea la Reactive UI

După generarea proiectului, putem adăuga pachetul NuGet „Reactive UI” la soluție. Știu că tocmai am presupus că sunteți familiarizat cu NuGet Package Manager, dar nu e vorba de nimic complicat. Este doar un instrument pentru adăugarea pachetelor, sau a bibliotecilor de program, dacă preferați această denumire, la proiectele pe care lucrați. Vom folosi acest instrument pentru a instala Reactive UI.

În timp ce există un mod „vizual” de a adăuga pachete NuGet la proiectele noastre, aleg modul de lucru „consolă”, pentru a menține acest articol mai scurt. Prin urmare, accesați Tools > NuGet Package Manager > Package Manager Console. În noua fereastră de consolă, care a apărut în partea de jos a ferestrei Visual Studio, scrieți:

Get-Project -All | Install-Package reactiveui-xamforms

Această comandă PowerShell va enumera toate proiectele din soluție și va instala pachetul NuGet „reactiveui-xamforms” în ele.

Crearea datelor

Toate fișierele pe care le adăugăm sau le modificăm în acest articol vor fi amplasate în proiectul Portable. Nu vom lucra deloc în proiectul Android. Puțină atenție când se vor adăuga fișiere

Înainte de a putea afișa persoanele pentru exemplul nostru, trebuie să le modelăm. De asemenea, datele trebuie să vină de undeva. În mod normal aceste datele vin de la un serviciu dar în cazul nostru vor fi hard-codate în aplicație.

Începeți prin adăugarea unei noi clase numite Person la proiectul Portable. O persoană va avea un nume, o descriere, un site Web și un handle de Twitter. Adăugați aceste proprietăți la clasă. În final, clasa ar trebui să arate ca și codul de mai jos.

public class Person
{
    public string Name { get; set; }        
    public string Description { get; set; }
    public string Website { get; set; }
    public string TwitterHandle { get; set; }
}

Lista Persoanelor, așa cum am menționat, va fi hard-codată de dragul simplității. Să creăm în acest scop o clasă numită PersonsProvider. Această clasă trebuie să aibă o listă de persoane ca cea de mai jos. Nu uitați să adăugați mai multe persoane. Fiți inventivi.

private List<Person> _persons = new List<Person>()
{   
	new Person()
	{
		Name = "Levente Fuksz",
		Description = "Coder and InfoSec Enthusiast",
		TwitterHandle = "@levifuksz",
		Website = "https://blog.iamlevi.net"
	}
};

public async Task<List<Person>> GetPersons(string search)
{
	// Simulate some loading time
	return await Task.Delay(800)
		.ContinueWith((task) =>
		{
			return string.IsNullOrEmpty(search) ?
				_persons :
				_persons.Where(p => p.Name.IndexOf(search, StringComparison.OrdinalIgnoreCase) != -1).ToList();
		});
}

public string UrlPathSegment => "Persons";

public IScreen HostScreen { get; set; }

private string _searchTerm;
public string SearchTerm
{
    get { return _searchTerm; }
    set { this.RaiseAndSetIfChanged(ref _searchTerm, value); }
}

public ReactiveCommand<string, List<Person>> Search { get; set; }

private ObservableAsPropertyHelper<List<Person>> _searchResults;

public List<Person> Persons => _searchResults.Value;

private Person _selectedPerson;

public Person SelectedPerson
{
    get { return _selectedPerson; }
    set { this.RaiseAndSetIfChanged(ref _selectedPerson, value); }
}

private ObservableAsPropertyHelper<bool> _isSearching;

public bool IsSearching => _isSearching.Value;

this.HostScreen = Locator.Current.GetService<IScreen>();

this.Search = ReactiveCommand.CreateFromTask<string, List<Person>>(async (search) =>
{
    var personsProvider = new PersonsProvider();
    return await personsProvider.GetPersons(search);
});

this.WhenAnyValue(vm => vm.SearchTerm)
    .Throttle(TimeSpan.FromMilliseconds(500), RxApp.MainThreadScheduler)
    .Select(s => s?.Trim())
    .DistinctUntilChanged()
    .InvokeCommand(this.Search);

this._isSearching = this.Search.IsExecuting
    .ToProperty(this, vm => vm.IsSearching, false);

_searchResults = this.Search.ToProperty(this, vm => vm.Persons, new List<Person>());

this.Search.Execute(string.Empty).Subscribe();

public partial class MainPage : ContentPage, IViewFor<MainPageViewModel>

BindableProperty ViewModelPoperty = BindableProperty.Create(nameof(ViewModel), typeof(MainPageViewModel), typeof(MainPage));

public MainPageViewModel ViewModel
{
    get { return (MainPageViewModel)GetValue(ViewModelPoperty); }
    set { SetValue(ViewModelPoperty, value); }
}

object IViewFor.ViewModel
{
    get { return ViewModel; }
    set { ViewModel = (MainPageViewModel)value; }
}

this.WhenAnyValue(v => v.ViewModel).BindTo(this, v => v.BindingContext);

public class DetailsPageViewModel : ReactiveObject, IRoutableViewModel
{
    public Person CurrentPerson { get; private set; }

    public string UrlPathSegment => $"{CurrentPerson.Name} - Details";
    public IScreen HostScreen { get; set; }

    public DetailsPageViewModel(Person currentPerson)
    {
        this.CurrentPerson = currentPerson;
        this.HostScreen = Locator.Current.GetService<IScreen>();
    }
}

public ReactiveCommand ShowDetails { get; set; }

this.ShowDetails = ReactiveCommand.CreateFromTask<Person>(async (person) =>
{
    await this.HostScreen.Router.Navigate.Execute(new DetailsPageViewModel(person));
    this.SelectedPerson = null;
});

this.WhenAnyValue(vm => vm.SelectedPerson)
    .Where(p => p != null)
    .InvokeCommand(this.ShowDetails);

public partial class App : Application, IScreen
{
    public RoutingState Router { get; set; }
...

this.Router = new RoutingState();

Locator.CurrentMutable.RegisterConstant(this, typeof(IScreen));

Locator.CurrentMutable.Register(() => new MainPage(), typeof(IViewFor<MainPageViewModel>));
Locator.CurrentMutable.Register(() => new DetailsPage(), typeof(IViewFor<DetailsPageViewModel>)); 

this.Router.Navigate.Execute(new MainPageViewModel());

MainPage = new RoutedViewHost();