Curs 9

Aplicatii mobile multi-platforma -

Xamarin.Forms
Lect. dr. Florina Covaci
Aplicatii mobile
• Dezvoltarea de aplicatii mobile se bazeaza in principal pe doua SO
• iOS de la Apple
• Android de la Google
• Dezvoltarea de aplicatii native
• pentru iOS se utilizeaza limbajele Objective-C si Swift si framework-urile
Cocoa si Cocoa Touch (API Apple)
• Pentru Android se utilizeaza Java si Android Software Development Kit de la
Google
• Putem utiliza C# si XAML fara a scrie cod in limbaje de programare
diferite –Xamarin.Forms
Ce este Xamarin.Forms?
• Framework multi-platforma care permite dezvoltarea facila de
aplicatii Android, iOS,UWP utilizand cod sursa comun
• Interfetele pot fi create in XAML folosind code-behind C#.
• Elementele de interfata cross-platform sunt incarcate si convertite in
controale native alte platformei pe care ruleaza aplicatia
• Codul principal este comun, fiecare proiect specific platformei pe care
ruleaza reprezinta instructiuni care pornesc framework-ul Xamarin
Structura unei solutii Xamarin.Forms
• AwesomeApp – Proiect de tip .NET Standard library
care contine codul comun si elementele UI comune
• AwesomeApp.Android – proiect care contine cod
Android specific reprezentand punctul de intrare in
aplicatia Android
• AwesomeApp.iOS – proiect care contine cod iOS
specific reprezentand punctul de intrare in aplicatia
iOS
Clasa App
• Pentru a maximiza reutilizarea codului, aplicatiile Xamarin.Forms
contin o singura clasa App
• Este responsabila pentru instantierea primei pagini care va fi afisata
de aplicatie pe fiecare platforma

public partial class App : Application

{ public App()
{ InitializeComponent();
MainPage = new NavigationPage(new AgendaPage());
} ... } }
Lansarea aplicatiei pe iOS
• Pentru a lansa pagina initiala Xamarin.Forms in iOS, se defineste clasa
AppDelegate

public partial class AppDelegate :

global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
{ public override bool FinishedLaunching(UIApplication app, NSDictionary
options)
{ global::Xamarin.Forms.Forms.Init();
LoadApplication(new App());
return base.FinishedLaunching(app, options);
} } }
Lansarea aplicatiei pe Android
• Pentru a lansa pagina initiala Xamarin.Forms in Android, se defineste clasa
MainActivity
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
protected override void OnCreate(Bundle savedInstanceState)
{
TabLayoutResource = Resource.Layout.Tabbar;
ToolbarResource = Resource.Layout.Toolbar;

base.OnCreate(savedInstanceState);

Xamarin.Essentials.Platform.Init(this, savedInstanceState);
global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
LoadApplication(new App());
}
Crearea UI
• Pagini –ecrane de aplicatii mobile cross-platform
• View-uri –controale afisate pe interfata, cum ar fi label-uri, butoane si
text entry
• Layouts –containere utilizate pentru a grupa view-urile in structuri
logice
• Celule – elemente specializate utilizate pentru itemi intr-o lista,
pentru a descrie modul in care arata acea lista
Navigarea (I)
• Conceptul de navigare provinde de la aplicatiile web – a fost adoptat
in aplicatiile mobile
• Aplicatiile mobile suporta o arhitectura bazata pe pagini
• O aplicatie Xamarin.Forms contine mai multe pagini bazate pe clase
care deriva din ContentPage, utilizatorul putand naviga intre aceste
pagini
• Pagina principala, repezinta punctul de start al aplicatiei. Este
adeseori denumita main, home sau start page
Navigarea (II)
• Navigarea este implementata avand la baza conceptul de stiva
• Cand utilizatorul navigheaza de la o pagina la alta, noua pagina este
adaugata pe stiva si devine pagina activa. Cand cea de a doua pagina
se intoarce la cea anterioara, este scoasa de pe stiva, iar ultima pagina
de pe stiva devine pagina activa
• Aplicatia are acces la stiva de navigare pe care Xamarin.Forms o
mentine pentru aplicatie avand acces la metode pentru manipularea
stivei- adaugarea/scoaterea de pagini
Pagini (I)
• Pagini
• Modale
• Modeless
• In designul UI “modal” se refera necesitatea ca utilizatorul sa interactioneze
cu aplicatia inainte ca aplicatia sa continue
• Cand o fereastra modala este afisata utilizatorului, utilizatorul nu poate sa
se intoarca la ferestra principala, ci trebuie sa intractioneze cu fereastra
modala mai intai
• In general utilizam ferestre modale cand aplicatia are nevoie de informatii
de la utilizator si nu dorim ca utilizatorul sa se intoarca la pagina anterioara
decat dupa ce furnizeaza informatiile
• O fereastra care nu este modala se numeste fereastra modeless
Pagini (II)
• Mecanismul de navigare intre pagini din Xamarin.Forms
implementeaza pagini modale si modeless prin definirea a doua
metode care pot fi apelate de o pagina pentru a naviga catre alta
pagina
Task PushAsync(Page page) – navigheaza catre o pagina modeless
Task PushModalAsync(Page page) - navigheaza catre o pagina modala
• Pentru a naviga catre pagina anterioara sunt definite metodele:
Task<Page> PopAsync()
Task<Page> PopModalAsync()
Navigarea catre o alta pagina
• Clasa VisualElement defineste o proprietate read-only Navigation
• Putem utiliza aceste metode pentru instanta oricarei clase deriva din
VisualElement
• In general utilizam proprietatea Navigation a obiectului pagina, codul
pentru a naviga catre alta pagina va arata asa:

await Navigation.PushAsync(new MyNewPage());

await Navigation.PushModalAsync(new MyNewModalPage());
Explorarea mecanismului de navigare
• Metodele Push si Pop returneaza obiecte de tip Task.
• In general vom utiliza await pentru a apela aceste metode
await Navigation.PushAsync(new ModelessPage());

• Presupunem ca avem o instructiune in cod dupa linia de mai sus. Cand se

executa?
• La finalizarea taskului PushAsync
• Cand se finalizeaza task-ul? Dupa ce utilizatorul a apasat butonul Back din
ModelessPage ?
• Finalizarea taskului nu se refera la faptul ca procesul de navigare s-a
terminat ci indica cand este sigura obtinerea starii curente a stivei cu
paginile de navigare
Obiectul Page
Proprietati:
• NavigationStack – avem acces la paginile modeless
• ModalStack – avem acces la paginile modale

• O pagina modeless poate naviga catre o pagina modala sau modeless

• O pagina modala poate naviga doar catre o alta pagina modala
Task-uri(I)
• Clasa Task din namespace-ul System.Threading.Tasks
• Sunt gestionate de un task scheduler pentru a fi rulate pe firul de
executie din background sau firul de executie al UI
• Similare cu o comanda care contine o actiune care poate fi executata
• Spre deosebire de o comanda, task-urile pot fi executate o singura
data si nu sunt declansate de actiunea unui utilizator ci de un task
scheduler care declanseaza actiunea pe firul de executie
corespunzator
Task-uri (II)
• Implicit task-urile utilizeaza un task scheduler care ruleaza taskurile pe
un fir de executie din background
• Task scheduler-ul default detine un set de fire de executie de
background si utilizeaza urmatorul fir de executie disponibil pentru a
executa urmatorul task
Async si Await (I)
• Cuvintele cheie async si await – introduse in C# 5.0
• Acestea nu fac nimic/nu executa o actiune in termeni de cod
• Sunt folosite de compilator, codul marcat de aceste cuvinte fiind gestionat
diferit
• Async – prescurtarea de la asynchronous—se pot executa mai multe actiuni
simultan (cod multithreaded – cod asynchron)
async void OnNoteAddedClicked(object sender, EventArgs e)
{
await Navigation.PushAsync(new NotePage
{
BindingContext = new Agenda()
});
}
Async si Await (II)
• Permit modelarea urmatorului pattern “ruleaza codul x in background
apoi ruleaza codul y in contextul curent sincronizat”
• Marcam o metoda async si cand dorim sa apelam alte metode async
din aceasta metoda marcam aceste apeluri cu await
• Await specifica compilatorului ca undeva in metoda pe care o apelam,
o parte din cod se va executa pe un fir de executie din background
utilizand un task si sa astepte rularea restului de cod din metoda pana
cand metoda marcata await termina ce are de facut
• Intre timp, thread-ul curent poate procesa cealalta parte a codului si
dupa finalizarea executiei metodei marcate cu await se executa si
cealalta parte
Task in background
• Rularea taskului in background nu afecteaza rularea liniei urmatoare

public override void ViewDidLoad()

{
...
Task.Delay(TimeSpan.FromSeconds(5));
TextField.Text = "Foo";
}

Task-ul Delay task este creat ,

este pornit intr-un thread de background, UI este actualizat
Adaugam async si await
public override async void
ViewDidLoad()
{
...
await
Task.Delay(TimeSpan.FromSecon
ds(5));
TextField.Text = "Foo"; • Codul de dinainte si dupa await va rula in acelasi context de
sincronizare, dar nu neaparat pe acelasi thread.
}
• Contextul de sincronizare UI are un singur thread, deci daca
• Se iese din metoda ViewDidLoad marcam await o metoda din thread-ul UI, codul care urmeaza
dupa metoda va rula pe thread-ul UI
de indata ce metoda await este
apelata, iar restul codului se • Daca marcam await o metoda dintr-un thread de background,
codul de dupa await s-ar putea sa ruleze pe un thread diferit
executa in firul de executie original in background
Pagina de tip MasterDetail
• Gestioneaza doua pagini: pagina master este in general o colectie de
date sau o lista de item-uri, iar pagina detail afiseaza un element
particular din colectie.
• Sunt definite ca si proprietati ale paginii MasterDetail, proprietati de
tip pagina denumite Master si Detail
• Modul in care MasterDetailPage afiseaza si comuta intre cele doua
pagini depinde de sistemul de operare, dispozitiv (telefon/tableta),
orientarea portet/landscape a device-ului si setarile proprietatii
MasterBehaviour
Comportamente posibile
• split: pagina master si detail sunt afisate una langa alta;
pagina master in stanga, iar pagina detail in dreapta
• popover: pagina detail va acoperi total sau partial pagina
master
• slide: se gliseaza intre pagina master si detail
• overlap: pagina detail acopera partial pagina master
• swap: pagina detail acopera complet pagina master.
Pagina de tip Tabbed
• TabbedPage mentine o colectie de pagini copil, dintre care una
singura este in intregime vizibila la un moment dat
• Are doua proprietati care ajuta aplicatia sa retina care dintre paginile
din colectia de pagini copil este vizibila utilizatorului la un moment
dat:
• CurrentPage (de tip Page)
• SelectedItem (de tip object, adica un obiect din colectia ItemsSource)
• Defineste doua evenimente:
• PagesChanged - este declansat cand colectia ItemSource se modifica
• CurrentPageChanged – este declansat cand pagina vizibila se modifica
Pattern-uri pentru transferul de date (I)
• Necesitatea ca in cadrul unei aplicatii multi-pagina, aplicatia sa foloseasca
date comune si in mod particular o pagina sa trimita date spre alta pagina
• Argumentele constructorului – o pagina navigheaza spre alta pagina, trimite date
celei de a doua utilizand constructorul acesteia
public partial class SchoolPage : ContentPage
{ public SchoolPage()
{ …}
async void OnListViewItemSelected(object sender,
SelectedItemChangedEventArgs args) {
Student student = args.SelectedItem as Student;
if (student != null) {await Navigation.PushAsync(new
StudentPage(student)); }
Pattern-uri pentru transferul de date (II)
• Clasa MessagingCenter – clasa statica care contine trei metode Subscribe,
Unsubscribe si Send.
• Mesajele sunt identificate printr-un string si sunt insotite de un obiect
• Constructorul subscrie la un mesaj identificat prin string-ul “Infor-
mationReady.”
• Argumentele indica obiectul care primeste mesajul, numele mesajului si o
expresie Lambda
public HomePage() {
...
MessagingCenter.Subscribe<InfoPage, Information> (this,
"InformationReady", (sender, info) => {
int index = list.IndexOf(info);
if (index != -1) { list[index] = info; } else { list.Add(info); }
});
MessageCenter (II)
async void OnListViewItemSelected(object sender,
SelectedItemChangedEventArgs args)
{ if (args.SelectedItem != null)
{listView.SelectedItem = null;
InfoPage infoPage = new InfoPage();
await Navigation.PushAsync(infoPage);
MessagingCenter.Send<HomePage, Information> (this, "InitializeInfo",
(Information)args.SelectedItem); }
Metoda Send trimite mesaje care sunt primite de toti subscriberii la acel
mesaj
Argumentele metodei Send inidica obiectul care trimite mesajul, numele
mesajului si datele care sunt reprezentate de SelectedItem din ListView.