Lucrarea 9—LINQ si Windows Presentation Foundation (Continuare) Resurse necesare ‘© Sistem de calcul dotat cu sistemul de operare Windows 10 sati Windows, 7 in configurajia monitor, mouse, tastaturd; © Mediu de dezvoltare Visual Studio 2019 sau Visual Studio 2017 instalat. Obiective © Exersarea metodelor instrumentului LIN@ipentru manipularea datelor; © Comparatie intre instrumente NET™$ instrumente importate, cu exemplificare pe constfuire grafives ‘+ Transmiterea de valoti intre dona ferestre de lucru; ‘+ Implementarea unui insthifient pe baza documentatici {n cadrul acestui laborator se.va gontifua aplicatia dezvoltata in laboratorul numarul 8. Aplicatia 1. Se cere siise implementeze urmitoarele actiuni a, Sa se adauge un byfon care calculeaza o serie de statistci © Cate produse éxista pentru fiecare brand identificat in lista de produse; (© Cite produse exista pentru fiecare tip de procesor existent in lista de produse; © Cite produse exist pentru fiecare interval de pret = 0~ 1000 RON; = 1000-2000 RON: + 2000-3000 RON: b, Si se adauge un buton care implementeazi comparatia grafica a prejului pentru produsele listate (presupunand ca s-a aplicat o listare filtrata); Rezolvarea. Pentru implementarea prim: se vor parcurge urmitoarele etape: - Se adauga o fereastra de lucru de tip Windows Forms care se va deschide la click pe butonul Statistici din feteastra principal. Pentru adaugarea ferestrei, se realizeaza click dreapta pe numele proiectului in meniul Solution Explorer > Add > New Item...» Form (Windows Forms) > Se completeazai Name: Statistici.es > Se apasit butonul Add, conform figurii 9.1. Motival pentru care s-a optat pentru utilizarea unei componente de tip Form provine din necesitatea exemplificarii integrarii unui controler de tip grafic pentru reprezentarea datelor (Ghartade tip -NET), comparativ cu. o component tot de tip grafic a unui instrument exten instalat in proiect; rr ~ ‘suntan . “Searen cr Pe oon Dy commen ee Ecce teeta a EF comer ne = D) comaven vos ve EF owmtsonie eece Meare 0089 Dy svontee Vnsce [ime EJ cmos : +0 twine ine D wo aman oe Down soe So wnt — —— (eee ig, 9.1. Adaugarea in proiect a unei ferestre pentru implementarea statisticilor. ~ Se construieste interfata graficd, adugand urmatoarele elemente: © Unobiect Label cu proprietatea Text: Statistici producatori; © Un obiect ListBox in care se vor lista statisticile referitoare la numarul de produse identificate pentru fiecare producator. Obiectul se numeste listBox © Unobiect Label cu proprietatea Text: Statistici procesor;,Produs p © Unobiect Chart numit chartProcesor utilizat pentru statisticile referitoare la numarul de produse identificate pentru fiecare procesor. Pentru acest obiect, se vor seta in sectiunea Series: © Chart > ChartType: Pie; Data > Name: procSeries; Un obicet Chart numit char¢/ utilizat pentru statisticile referitoare la numarul de produse identificate pentru fiecare interval de pret. Pentru acest obiect se vor seta in sectiunea Series: © Chart > ChartType: Column; ‘+ Data > Name: categoriePret; Figura 9.2 prezinta dispunerea elementelor prezentate anterior im interféta grafica ied a ferestrei de lucru, ene Tene] Fig)9.2. Construirea interfetei grafice a ferestrei pentru implementarea statisticilor. Se genereaza evenimentul Load, care va executa urmatoarele instructitini: (© Se construiste lista cu produse numita listaProduse;, yew Produs(); LsteProdus> listaProduse = p.prelatista();tor, in Pentra implementarea numirului de produse care apartin unui anumit produ metoda Load) se continua cu urmatoarele instructiuni: © Se construieste lista cu numele produeatorilor numita producatori: © Se declara o variabild numiti globalCn¢ care contorizeaza cate produse aparfin producatorilor din lista producatori. Produsele care nu au producitori din aceasta lista vor fi contorizate in categoria iti producatori. (©. Se parcurge lista producatorilor element cu element: Se numéri folosind metoda Count() cate produse contin iw’niméle de produs producatorul aflat in elementul curent. Reultatul e8te depus in variabila local nrCnt, * Dacii au fost identificate produse care apartin produeatofului curent, deci nrCnt are 0 valoare mai mare ca zero, aftinei se Bfiseazz obiectul listBor numele producdtorului sate prodduse apartin acestuia; Se adauga numarul produselor ideritificat@}ea apartinind producdtorului curent la valoarea Watiabilei globalCnt; ‘o. in final, daca diferenta dintre numatul tetal We produse si numarul produselor contorizate ca apartinand unui producdtor din lista producator este mai mare ca zero, atnei = in obiectul listBoxl, se va afisa mesajul "Alti producatori: ", {impreund c& numarul produselor care nu apartin niciunei categorii din lista producatori Listestring> producatori = new List(); producatori.Add("Lenovo"}; producatori.Add("HP"); producatori.Add("ASUS"); producatori.Add("Dell”); producatori.Add(“Acer producatori.Add("Toshib: producatori Add("Huawrei"); producatorisadd(’ts" 1 Numara gate produse apartin fiecarui producator int globalCnt foreach (string b in producatori) { int nrCnt = listaProduse.Where(c => c.numeProdus.ToUpper().Contains(b.ToUpper()}.Count|); if (nrcnt> 0) listBoxd.ttems.Add(b +": "+ nrCnt}; globalent += nrCnt;if ({istaProduse.Count() - globalCnt) >0) listBox1. Items. Add{"Alti producatori:" + (listaProduse.Count() -globalCnt); Pentru implementarea numarului de produse care apartin unui anumit procesor, in metoda Load() se continu cu urmatoarele instruetiuni: © Se construieste lista cu numele procesoarelor numita procesor ©. Se reinifializeaza cu zero variabila numiti globalCnt care va confori7acate produse apartin fiecdrui tip de procesor din lista procesor. Produsele care ‘nu au un procesor din aceasta listd, vor fi contorizate.in categori@tdlte procesoare; © Se dezactiveaza afisarea etichetelor pe grafic, deoarece dénumtirile sunt prea lungi si se afiseaza inestetic, ele fiind deja afigatelin legend; © Se parcurge Se numara folosind metoda Count() cAteiprodise contin in numele de produs tipul de procesor aflat in clementul curent. Rezultatal este depus in variabila local nrCnts * Dacii au fost identificate produse Gare apartin procesorului curent, deci nrCnt are o valoare mai'maré ca zero, atuni © Se declari obieetul nismita punct, de tip DataPoine, pentru care se vor Seta proprietatile necesare reprezentrii pe graficul de tip Pies ‘Se yOFiseta coordonatele X si Y. Pentru coordonata X se va utiliza deftumirea tipului de procesor, iar pentru coordonata Y numa de produs care apartin acestui tip; + Wentru punctul curent se va seta proprietatea ToolTip care permite ca la MouseOver si se afigeze numarul produselor; + Se adaugi punctal construit anterior in obiectul ‘chartProcesor, pentru seria procSeries. © Se adaugi numirul produselor identificate ca apartinind procesorului curent la valoarea variabilei globalCnt; ©, infinal, daca diferenta dintre numatul total de produse gi numarul produselor contorizate ca apartinand procesoarelor din lista procesor este mai mare ca zero, atunei + Se construieste un punct care va avea pe Ox valoarea Alte procesoare, iar pe Oy diferenta dintre numérul total de produse gi valoarea variabilei globalCnt. Punctul se adauga la graficul chartProcesor de tip Pie. sta procesoarelor element cu eleshents Lstestring> procesor = new Listestring> { "13", "15", "I7", "Ryzen 3", "Ryzen 5", “Ryzen 7", "Ryzen 9" };slobalcnt = 0; chartPracesor Series{"procSeries"I["PieLabelstyle"] foreach (string proc in procesor) ( isabled"; int nrCnt = listaProduse.Where(e => ‘c.numeProdus.ToUpper().Cantains(proc.ToUpper()}.Count(); if (nrcnt> 0) { DataPoint punct = new DataPoint(); punct.SetValueXY(proc, nrCnt); unct. ToolTip = nrCnt.Tostringt); chartProcesor Series{"procSeries" |Points.Add{punct); y slobalcnt += nrCnt; ) if ((istaProduse.Count() -globalcnt) > 0) 4 DataPoint punct = new DataPoint(); punct SetValueXY("Alte procesoare’,(listaProdus® Count()= globalCnt)); ;punct.TootTip = listaProduse.Count() -globalCt).Tostring|); chartProcesor Series|"procSeries"|-Points.Add (punt); ) Pentra implementarea numarului de produse care apartin unui interval de pret, in metoda Load) se continua cu urmatoarele instrucfiini ©. Se identific’ produsalteu pretul maxim, iar valoarea se depune in variabila mumitd pretMaixim: © Folosind o Structura repetitiva cu contor, pentru care pasul este de 1000 de unititi; st se pl€aca de la valoarea zero pani la valoarea variabilei pretMaxim folosind variabila i: ‘(Se uffird cate produse au pretul in intervalul i— (i+ 1); +__Daci numarul de produse apartinnd intervalului este mai mare ca zero, atunci + Pe graficul chartl, pentru seria categoriePret, se adaugit punetul cu valorile i + "=" + (i+ 1000) pe axa Ox si numarul de produse apartinand intervalului pe axa Oy. double pretMaxim = listaProduse.Select(c => c.pretProdus).Max(); fot (int i= 0;1 <= pretMaxim; |= 1+ 1000) 4 int if (nr> 0) chart Series{"categoriePret"].Points.AddXY(i+*-" + (I+ 1000), nr}; aProduse.Count(c => c.pretProdus >i && c.pretProdus <= i +1000);- Se adauga in programul principal MainWindow.xaml.cs, la click pe butonul de statistici, deschiderea ferestrei de statistici: private void statBtn_click(object sender, RoutedEventArgs e) 4 Statistici s= new Statistici); s.show); ) in figura 9.3a este marcat butonul care permite deschiderea ferestrei de vidllilizarea statisticilor, iar figura 9.3b prezinta afisarea statisticilor referitoaré!la - Numarul de produse care apartine unui anumit produeators - Numirul de produse care apartine unui anumit tip de procesory = Numarul de produse care apartine fiecirui interval de pref 7 (eee - x] cae ) En aa p cove Lee eee nee aaa = E sane a>) Fig, 9.3, Executia aplicafiei: a) Butonul pentru deschiderea ferestrei de statistici; b) Afisarea statisticilor. in aceasta implementare, s-a exemplificat utilizarea unui instrument .NET, reprezentat de controlerul Chart. in scrierea codului, s-a remarcat utilizatea metodelor instrumentului LINQ care a permis 0 seriere compactata si usor de ingeles. b. Pentru implementarea comparatiei intre produsele selectate dim obiectal dataGridFilter se vor analiza urmitoarele aspecte: i, Preluarea elementelor selectate de utilizator; ii, Necesitatea de a crea 0 noua fereastra de lucru, de Weeasta data se va ‘opta pentru Window (WPF) astfel incét si.se anfalizeze avantajele gi dezavantajele acestei componente in raport Gu Windows Forms (utilizata la cerinfa anterioara); iii, Modalitatea de trimitere a datelot dinsfereastra principald citre fereastra care implementeaz}-comparatia; iv, Alegerea si integrarealunui instrument extern pe baza unei documentat Pentru implementarea cerintei, se vor parcurge trmatoarele etape: - Se adauga o nous fercastrdide Iucru realizénd click dreapta pe numele proiectului in Solution Explorer > Add > New Item...> Window (WPF) > Se completeazd Name: Compara.es > Se apa Plural Add. = Pentru construirea interfetei gratice, se cauta in Toolbox elementul Chart si constata cA acesta ligseste, Motivul absentei acestui controler provine din faptul ci reprezentarea datel6r in interiorul graficelor nu este o practic’ de uz general, iar comporienta de sistem existenta in template-ul Form nu oferd suficiente facilitati de Feprezentare Din aceste considerente, acest controler a fost integrat ca_un instrument auxiliar de citre diferiti dezvoltatori, Pentru variantele de baz’, acestea Sunt disponibile gratuit, iar pentru functii de prelucrare avansati ele sunt disponibile contfa cost. Cele mai utilizate instrumente de tip Chart sunt: Live Charts, OxyPlot si SconPiot. Aceste instrumente pot fi utilizate in cadrul diverselor template-uri. in continuare se va prezenta modalitatea de integrare a instrumentului Live Charts, celelalte urmand acelasi sablon de utilizare, Se acceseaza pagina de documentatia pentru integrarea unui grafic de tip coloandi: https://Iveharts.net/App/examples/v/Wppt/Column- inexemplul analizat in documentatie, se poate observa ci sunt prezentate dowd serii adaugate pe obiectul Chart. Pentru implementarea cerintei b) este necesatd o singurd setie, deci se va utiliza doar o serie, pentru care: © Labelurile (adica ceea ce se reprezint’ pe axa Ox) reprezinté numele produsului, Deoarece numele produsului este prea lung, se va utiliza prescurtarea P1, P2, etc, iar in legendi se va serie Pl ~numele produsului 1, P2 —numele produsului 2, etc ©. Titlul seriei va fi Premuri; © Valorile scrise explicit in exemplul oficial, vor fi inlocuite cu /prefitrile produsclor selectate; © Devarece a doua serie existent in exemplu a fost ex¢li8s, mi mai este necesara nici formatarea, deci obiectul Formatter din exémpli’nu va mai fi utilizat; © Oalta observatie importanta este aceea ca in pagihiade Désign, obiectele sunt populate cu valore cu ajutorul Binding-ului, care permite specificarea numelui obiectului care va popula obigcwtl. AStfel, dupi ce obiectul este construit in pagina *.xaml.es, deci_pagina care implementeazi logica aplicatici, el completeaza cu element stitsa obiectului grafic. Sintaxa este { Binding NUME_OBIECP‘. Aceastd populare se poate realiza si din cod, dupa cum s-a procedat in cazul obigctului dataGrid numit dataGridPilter. Pentru implementare se yor parcurge urmiatoatfele etape: ~ Se instaleaza libraria LiveCharis folosind instrumentul NuGet, conform figurii 9.4. user acuge anager aps Ul OSE seca =e = rena ~ | : Fig, 9.4, Instalarea instrumentului LiveCharts. - Se adauga conform documentatiei secventa de cod XAML care permite adaugarea gtaficului in interiorul tag-urilor , Obiectul grafic CartesianChart va fi populat cu continutul obiectului C# puncteReprezentare, Legenda va fi afigata in partea sting a graficului si va contine textulPreturi. Pe axa Oy vor fi reprezentate valorile produselor, in timp ce pe axa Oy vor fi reprezentate denumirile de produse construite cu ajutorul obiectului C# denumireProdus De asemenea, se adaugi si un obiect de tip TextBox pentru afisarea legendei, Obiectul ‘TextBox va purta numele legendaTxt ‘TextBox x:Name="legendaTxt” HorizontalAlignment="Left” Margin="10,314,0)0" VerticalAlignment="Top” Helght="96" Width="774"/> (Binding puncteReprezentare}” LegendLocation="Left" Margin="0,0,- = Se adauga in fisieral Compara.xaml namespace-ul pentru insirumentul LiveChars: xmlns:Ive="elr-namespace:LiveCharts. Wpfassembly=LiveCharts. Wp" =n figicrul Compara.xaml.es, se vor parcufge ufinatorii pag (©. Se transmite constructorultii Compara lista de produse din pagina MainWindow: public Compara(list Ip) © Se declara de tipppublic obiectele puncteReprezentare de tip colectie de seri si denumirePtodts de tip vector de string-uri, conform documentatici public SeriesCollection puincteReprerentare { get; public string[] denumireProdus { get; set; } ) (© Bupa initialiZirea componentelor, se construiese valorile de reprezentare pe gfafic intr-o structura specifica bibliotecii LiveCharts numita ChartVatues cuelemente de tip double printr-o parcurgere element cu element a Tistei de produse /p transmis prin intermediul constructorului din pagina principals MainWindow; © Se construieste seria care va contine valorile de reprezentare pe grafic gi titlul seriei, respectiv Preturis (© Denumirile de produs se construiese prin concatenarea caracterului P cu pozitici produsului in vectorul produselor; co In textBox se afigeazd Denumirile de produs cu numele real al produsului; oo In DataContext se depun obiectele instantiate in interiorul clasei curente pentru a putea realiza legatura cu elementele grafice (deci Binding-ul,public Seriesollection puncteReprezentare ( get: set; public string[] denumireProdus (get; set; } public Comparalist Ip) { izeComponenti); CChartValues valorl = new ChartValues(); foreach(Produs vin Ip) { valori.Add(v.pretProdus); "(i+ 1)))-ToArray(); legendaTxt-Text = String.Join("\n", IpSelect((ci)=>(°P" + (i+ 1) +) DataContext = this; ++ cnumeProdus})); in MainWindow.xaml.cf, la'elick pe butonul de comparatie, se execut urmatoarele instructiuni © Se preia lista elenientelor selectate de utilizator din obiectul dataGridFilter © Se consthuiesteilista de produse parr; © Se apele@Zi eonstructorul Compara cu parametrul p_arr; © S€deSchidé fereastra care implementeazi comparatia produselor: privaté void comparaBtn_Click(object sender, RoutedEventArgs e) 4 lataGridFilter Selectedltems; List p_arr = new List(); foreach(Produs curent in lista) « Produs p = new Produs(}; .numeProdus = curent.numeProdus;Compara = new Comparalp_art); ‘eshow(); ) Figura 9.5a prezinta selectia mai multor produse inainte de apasarea butonului Compara preturi. Pentru a realiza selectia mai multor produse, se va tine apasat butonul Cir] si se vor alege produsele dorite prin click pe acestea, Dupai apasarea butonului Comparr preturi, se va deschide fereastra pentru comparatia produselor, care va afisagraficul prefurilor produselor (figura 9.5b), ie Sou os — — — a a) corse [SMES agen < —T @rew Cy @ Preus 136 [i Lgtoo ie 22a reer tl ereiD-TTSG pana L10GHE TS FINO, 968 S'2GD SED) nl LHD Gp Fee DOS '23.Lato Goring Vieusty HP 16-064 naupocesar AMD zen 53600, 16, uD 1b GB 51268 SD. NVDIA GeForce TE SISO 46k Fea 0S Nice Se {212 Laptop HP 250 Gc proceorinel Coe 1SCi, 15. Ful, 86, 51269 SS, NDI Geforce 0208, Fee BOS Sher [AA Leto HP 155 fa20ne cu rose Coe 11357 ean 420 Gi 185, Ful HO, 8, 1255552, Windon 10 Home %)Fig. 9.5, Executia aplicatici: a) Selectia produselor supuse comparatiei de prefuri; b) Fereastra de comparatie efectiva a produselor selectate Analizind exemplele prezentate anterior, se poate observa ci desi implementarea instrumentului LiveCharts este mai greu de realizat decat in cazul componentei de sistem, acesta are avantajul unei grafici stilizate, care ofera facilitati modeme implicite, cum este cazul hover-ului pe element, De asemenea, posibilitatea utilizarii instrumentului Ling ofera avantajul preluctarii rapide gi usoare a datelor. in cadrul acestei lucrari, au fost prezentate modalitatile de reprezentare a datlor ficadrul obiectelor de tip grafic (Chart), cu scopul de exemplificare a médalititii de integrare a instrumentelor grafice externe, De asemenea, s-a pus in evident necesitatea instrumentelor Ling in procesarea rapida a datelor.