Laborator 9 – Aplicații mobile

Laborator 9
Experiența dezvoltatorului Xamarin.Forms implică de obicei crearea unei interfețe de
utilizator în XAML și apoi adăugarea unui cod în spate care funcționează pe interfața de utilizator.
Pe măsură ce aplicațiile sunt modificate și cresc în dimensiune și domeniu, pot apărea probleme
complexe de întreținere. Aceste probleme includ cuplarea strânsă între controalele UI și logică,
care crește costul efectuării modificărilor UI și dificultatea testării unitare a unui astfel de cod.
Modelul Model-View-ViewModel (MVVM) ajută la separarea logicii de partea de
interfața cu utilizatorul (UI). Menținerea unei separări între logica aplicației și interfața de utilizare
ajută la soluționarea numeroaselor probleme de dezvoltare și poate face o aplicație mai ușor de
testat, întreținut și evoluat. De asemenea, poate îmbunătăți considerabil oportunitățile de reutilizare
a codului și le permite dezvoltatorilor și proiectanților de interfețe să colaboreze mai ușor atunci
când își dezvoltă părțile respective ale unei aplicații

View
Vizualizarea este responsabilă pentru definirea structurii, aspectului și aspectului a ceea ce
utilizatorul vede pe ecran. În mod ideal, fiecare vizualizare este definită în XAML, cu un cod
limitat în spate care nu conține logică de afaceri. Cu toate acestea, în unele cazuri, codul din spate
ar putea conține o logică UI care implementează un comportament vizual greu de exprimat în
XAML, cum ar fi animațiile.

ViewModel
Modelul de vizualizare implementează proprietăți și comenzi la care vizualizarea se poate
lega de date și notifică vizualizarea oricăror modificări de stare prin evenimente de notificare a
modificărilor. Proprietățile și comenzile pe care le oferă modelul de vizualizare definesc
funcționalitatea care trebuie oferită de interfața de utilizare, dar vizualizarea determină modul în
care trebuie afișată acea funcționalitate.

Model
Clasele model sunt clase non-vizuale care încapsulează datele aplicației. Prin urmare,
modelul poate fi considerat ca reprezentând modelul de domeniu al aplicației, care include de
obicei un model de date împreună cu logica de afaceri și de validare. Exemplele de obiecte model
includ obiecte de transfer de date (DTO), obiecte Plr Old Old CLR (POCOs) și obiecte generate
de entități și proxy.

1
 Laborator 9 – Aplicații mobile

Clasele de modele sunt de obicei utilizate împreună cu servicii sau depozite care
încapsulează accesul la date și stocarea în cache.
Există trei componente de bază în modelul MVVM: modelul, vizualizarea și modelul de
vizualizare. Fiecare are un scop distinct.

Modelele de vizualizare pot fi conectate la vizualizări utilizând funcțiile de legare a datelor

ale Xamarin.Forms. Există multe abordări care pot fi utilizate pentru a construi vizualizări și a
vizualiza modele și a le asocia în timpul rulării. Aceste abordări se împart în două categorii,
cunoscute sub denumirea de prima compoziție, și de prima vedere a compoziției modelului.
Alegerea între prima compoziție de vizualizare și prima compoziție a modelului de vizualizare este
o problemă de preferință și complexitate. Cu toate acestea, toate abordările au același scop, care
este ca vizualizarea să aibă un model de vizualizare atribuit proprietății sale BindingContext.

Se va crea un proiect nou de tip cross-platform. Proiectul este de tip Xamarin Forms după care se
va alege un template gol “Blank” pentru aplicație.

2
 Laborator 9 – Aplicații mobile

Inițial aplicația va arăta ca în figura de mai jos. Se observă cele două fișiere noi
XamFormPrj1.Android și XamFormPrj1.iOS, în partea din dreapta, în zona Solution Explorer.

3
 Laborator 9 – Aplicații mobile

Se creează două clase noi, cu numele Product.cs și MainViewModel.cs.

În noua clasă creată Product.cs se declară un șir de caractere public Title:

În clasa MainViewModel.cs se creează constructorul clasei iar în interior se va inițializa un obiect

listă Products ce va conține trei elemente de tip Product. Elementele vor primi titlurile Tema1,
Tema2 și Tema3. De asemenea va trebui să se adauge o noua bibliotecă și să se declare lista de
elemente de tip Product.
4
 Laborator 9 – Aplicații mobile

În fișierul MainPage.xaml, se crează o legătură cu MainViewModel

Se va sterge elementul <StackLayout> și conținutul acestuia după care se va insera din toolbox un
element de tip ListView prin dublu-click.

Ca prim pas pentru completarea elementului ListView cu date, se va seta sursa de date și anume
lista de elemente deja inițializată cu cele 3 elemente. Fiecare celulă a listei va avea propriul format,
din acest motiv elementul ViewCell va avea în interior un element StackLayout ce va conține la
rândul său un Label și un Button. Se va rula aplicația.

5
 Laborator 9 – Aplicații mobile

Se va implementa o nouă funcționalitate și anume afișarea butonului doar atunci când eticheta a
fost apăsată. Pentru aceasta, clasei Product i se va adăuga o funcție nouă, iar atributul butonului
va fi actualizat prin apelarea acestei funcții. Modificarea se va face în fisierul MainPage.xaml

Aplicația va urmări momentul în care o etichetă este apasată și va face vizibil butonul. Se va adăuga
un nou atribut pentru elementul ListView și anume ItemTapped. Deocamdata nu există o funcție
care să fie apelată pentru aceasta acțiune așadar se va alege opțiunea oferită de IDE pentru
generarea ei. Funcția va fi generată în fișierul MainPage.xaml.cs.

6
 Laborator 9 – Aplicații mobile

În acest moment, funcția HideOrShowProduct nu există. Ea va trebui declarată și implementată în

interiorul modelului și anume în fișierul MainViewModel.cs. De asemenea se va crea și funcția
UpdateProducts care are rolul de a actualiza elementul (practic, un element va fi scos din listă și
reintrodus la în aceeași poziție).