bhawk.hu – Magyar fejlesztői blog

bhawk.hu – Magyar fejlesztői blog


2024. március
h K s c p s v
« dec    
 123
45678910
11121314151617
18192021222324
25262728293031

Kategóriák


Mi fán terem az MVVM?

Gulyás GáborGulyás Gábor

“Rend a lelke mindennek”, ahogy mondani szokás. Ez a mondás pedig hatványozottan igaz a kódolás esetében. Biztosan fel tudunk eleveníteni magunkban olyan eseteket, amikor bármiféle tervezés nélkül nekifogtunk egy újabb projektnek, majd amikor már huszadszor döbbentünk rá, hogy “ez így mégsem lesz jó”, mi magunk sem találjuk a kiutat a kódból. Nélkülöz mindenféle strukturáltságot, nincsen az elrendezésében logika, kaptunk egy spagetti kódot. Az ilyen esetek elkerülése érdekében érdemes megismerni valamilyen fejlesztési mintát: itt jön képbe az MVVM!

MVVM: Model-View-ViewModel pattern

Az MVVM rövidítés a Model, View, ViewModel szavakból tevődik össze. A minta lényege, hogy alkalmazásunkat három, jól elkülöníthető részre bontsuk szét, melyek így egyrészt jobban átláthatóvá válnak, másrészt pedig a projektmenedzsment is egyszerűbbé válik. Miért érdekelné a felülettervezőt, hogy az alkalmazás a háttérben honnan kapja az adatot? És miért várjuk el tőle, hogy több száz soros kódokat hámozzon át ahhoz, hogy megtalálja, hol is írjuk át kódszinten a felületen lévő szövegeket?

Alkalmazásunkat tehát három logikai egységből fogjuk felépíteni. A View fogja tartalmazni a felületeinket, itt határozzuk meg a különböző képernyők megjelenését. A Model – szándékosan cserélem fel a sorrendet – tartalmazza a deklarációját az adategységeknek (osztályok, avagy class-ok), hogy pontosan milyen adattípusokkal is fog dolgozni az alkalmazásunk. A ViewModel pedig az utóbbi kettő összekötését oldja meg. Itt kerülnek példányosításra az objektumok, itt határozzuk meg a gyűjteményeket, melyeket valamilyen formában szeretnénk a felületen megjeleníteni.

Nézzünk egy egyszerű példát, mely most egy névjegyzék alkalmazás koncepcióterve lesz:

Az osztályok példányosítását, valamint azok gyűjteménybe helyezését követően azonban ezeket az adatokat valamilyen formában meg is kell jelenítenünk.

Adatkötés – Data Binding

Az adatkötés célja, hogy a ViewModel-ben található, példányosított objektumokat valamilyen formában megjelenítsük a felhasználó számára. Favágó módszerrel ez történhetne úgy, hogy a felületünkön (View) lévő listán megkeressük azt az adattagot, melyen keresztül beállíthatjuk a lista elemeit és azt kódszinten meghatározzuk. De mi történik ha új elemet adunk a listához? Újra meghívjuk a kódot?

Az adatkötéssel egy állandó kapcsolatot hozunk létre a vizuális elem, valamint a mögöttes tartalom között. Ez fontos számunkra, ugyanis így a gyűjteményben véghezvitt változások azonnal megjelennek a felületen is.[ecko_alert color=”gray”]Itt azonban fontos megjegyeznünk, hogy erre nem minden gyűjtemény alkalmas! Erre egy későbbi blog posztban térek majd ki![/ecko_alert]

Ahhoz, hogy az adatkötés működjön, meg kell adnunk az adattagok forrását – a ViewModelt. Ezt érdemes kódszinten, az aktuális nézet konstruktorában megadni:

[ecko_code_highlight language=”c#”]this.DataContext = new MainViewModel();[/ecko_code_highlight]

Ezután már csak az a dolgunk, hogy a listánknak átadjuk, hogy a MainViewModel mely adattagjából olvassa ki az adatokat – ezt a zöld bekeretezett részben láthatjuk is, az ItemsSource tulajdonság értékeként adtuk meg.

Tehát egy egyszerű MVVM alap elkészítésének a lépései:

A továbbiakban

Ebben az első részben az MVVM mintát alap szinten, leginkább elméleti síkon vettük át. A következő részben már kódpéldákkal együtt egy működő alkalmazást fogunk felépíteni.

 

Minden ami Microsoft technológia! Több mint 8 éve foglalkozom programozással, ez idő alatt pedig rengeteg nyelvet elsajátítottam, leginkább a C#-ot kedvelem! Jelenleg szoftverfejlesztőként dolgozom!

Comments 0
There are currently no comments.

Ez a weboldal az Akismet szolgáltatását használja a spam kiszűrésére. Tudjunk meg többet arról, hogyan dolgozzák fel a hozzászólásunk adatait..