Szoftvertechnolgia s grafikus felhasznli fellet tervezse Adatkts Commands

Szoftvertechnológia és grafikus felhasználói felület tervezése Adatkötés + Commands

Hallgatói tájékoztató A jelen bemutatóban található adatok, tudnivalók és információk a számonkérendő anyag vázlatát képezik. Ismeretük szükséges, de nem elégséges feltétele a sikeres zárthelyinek, illetve vizsgának. Sikeres zárthelyihez, illetve vizsgához a jelen bemutató tartalmán felül a kötelező irodalomként megjelölt anyag, a gyakorlatokon/előadáson szóban, illetve a táblán átadott tudnivalók ismerete, valamint a gyakorlatokon megoldott példák és az otthoni feldolgozás céljából kiadott feladatok önálló megoldásának képessége is szükséges.

„Hamis” MVVM: logika a xaml. cs-ben View (XAML) DATA BINDING View. Model READ VM WRITE VM xaml. cs (BL? ) UI EVENT • XAML-ben létrehozott VM elérése View. Model VM = Find. Resource("VM") as View. Model; View. Model VM = this. Data. Context as View. Model; • Művelet elvégzése az eseménykezelőben (xaml. cs) VM. Result = VM. Income * VM. Tax. Pct / 100 - VM. Prepaid; NINCSENEK NEVEK – A LOGIKA NEM TUD SEMMIT SEM A UI-RÓL! 3

Teljes MVVM = Decoupled Components View (XAML + xaml. cs) DATA BINDING View. Model COMMAND + PARAMS EVENT/ MSG/RESULT Model (BL) • A view csak a VM-ről tud: bizonyos UI tulajdonságok a VM-mel vannak összekötve, a beállított szabályok szerint frissülnek • A view eseményei ugyanúgy adatkötéssel, a VM valamelyik ICommand típusú tulajdonságához vannak kötve (A xaml. cs szinte üres, szigorúan csak view események lekezelésére való) • A VM tudja, hogy melyik Commandhoz melyik logikai művelet hajtandó végre, és milyen paraméterekkel. Egy VM akár több logikát is használhat, szinkron vagy aszinkron módon is akár • A logika nem tud a VM-ről: ugyanaz a logika (és alatta a többi réteg) használható GUI és nem-GUI alkalmazásban is!!! 4

Adatkötés Összefoglaló • Az adatkötésnek van célja és forrása – Az adatkötési művelet forrása maga az adat, vagy annak egy (kizárólag publikus) tulajdonsága (VM-ben, másik vezérlőben…) – A cél a GUI-elem, illetve ennek az a tulajdonsága, amely az adattartamat használja majd • Pl: • Az adatkötés célja ún. függőségi tulajdonság (Dependency Property) kell hogy legyen (a legtöbb GUIelem-tulajdonság ilyen) • Az adatkötés célja Dependency. Object-utód lehet csak – Window vezérlőin jelenjenek meg a személy adatai: • text. Box. Nev. Text személy neve – Forrás: szemely. Nev – Cél: text. Box. Nev. Text 5

Adatkötés Példák • Pl: – Hangerő slider: mellette Labelen jelenjen meg számmal, hogy mennyi az aktuális hangerő • label. Content slider. Value • Pl: – A rádiógombok csak akkor legyenek engedélyezettek, ha a checkbox be van pipálva • radio. Button. XXX. Is. Enabled check. Box. Is. Checked • Vagy, ha a rádiógombok közös tartalmazóban vannak: stack. Panel. Is. Enabled check. Box. Is. Checked 6

Adatkötés Példák • Pl: – List. Boxban egy adott tömb elemei jelenjenek meg • list. Box. Items. Source tömb • Pl: – List. Box kerete vegye fel azt a színt, amilyen ki van jelölve • list. Box. Border. Brush list. Box. Selected. Item • Adattípusok? • Pl: – Combo. Boxban kiválasztott elem adatait akarom kiírni • label. XXXX. Content combo. Box. Selected. Item. XXXX 7

Adatkötés Megadása • Megadása a XAML-ban a {Binding} markupbővítővel – Element. Name: forráselem (UI-elem) neve – Path: forráselemen belüli tulajdonság elérési útja <Check. Box Name="check. Box. Enabled" Content="Enable!"/> <Text. Box Name="text. Box. To. Enable" Is. Enabled="{Binding Element. Name=check. Box. Enabled, Path=Is. Checked}" /> – Alternatív formátum "{Binding Is. Checked, Element. Name=check. Box. Enabled}" • C# nyelvű leírás (ritkán használt) – Window konstruktorban az Initialize. Component() után, vagy Loaded eseménykezelőben… text. Box. To. Enable. Set. Binding(Text. Box. Is. Enabled. Property, new Binding("Is. Checked") { Source = check. Box. Enabled }); 8

Adatkötés - Path megadásának formái • A teljes forrás objektumot használjuk (ritka): – Path=. • Egyszerű tulajdonság elérése (a forráson belül): – Element. Name=check. Box. Enabled, Path=Is. Checked • Tulajdonságon keresztül elérhető objektum tulajdonságának elérésére: – Element. Name=list. Box, Path=Selected. Item. Nev • Indexelhető tulajdonság elemének elérésére: – Element. Name=list. Box, Path=Items[0 ] • Path elhagyható – {Binding Path=Some. Property} {Binding Some. Property} 9

Adatkötés – függőségi tulajdonságok • Adatkötés célja mindig ún. függőségi tulajdonság – WPF sajátosság, a „szabályos” tulajdonságnál többet tud – Az UI-elemek legtöbb, de nem minden tulajdonsága ilyen • A függőségi tulajdonság az értékét nem feltétlenül a „szokásos” módon kapja, hanem: – – – Adatkötésből Tartalmazó elemek tulajdonság-értékének „örökléséből” Animációból Stílusból, erőforrásból Rendszerbeállításból (témák, felhasználói beállítások) 10

Adatkötés - Data. Context • Adatkötés alapértelmezett forrása – Ha nem adunk meg Element. Name-et vagy forrást másmilyen módon, akkor a Data. Contextben lévő objektum a forrás ( = a tartalmazó Window/Grid –ben állítjuk be) • A Data. Context függőségi tulajdonság, azaz értéke a tartalmazóktól „örökölhető” – Ezt gyakran felhasználjuk olyan esetekben, amikor több UIelem ugyanannak az objektumnak tulajdonságaihoz kötődne <Stack. Panel Name="stack. Panel" Data. Context="{Binding Element. Name=combo. Box. Szemelyek, Path=Selected. Item}"> <Label Content="{Binding Nev}"/> <Label Content="{Binding Eletkor}" <Label Content="{Binding Orszag}"/> <Label Content="{Binding Varos}"/> </Stack. Panel> 11

Adatkötés - Data. Context • A Data. Contextet C# kódból is lehet állítani: – XAML kód az adatkötésre: <Stack. Panel Name="stack. Panel" > <Label Content="{Binding </Stack. Panel> Nev}"/> Eletkor}" Orszag}"/> Varos}"/> – Forrás beállítása pl. Window Loading eseményben, gombnyomásra vagy bármikor máskor: Szemely sz = new Szemely("Péter", 12, "Magyarország", "Budapest"); stack. Panel. Data. Context = sz; A pirossal keretezett Labelek voltak a közös Stack. Panelben 12

Adatkötés - Data. Context • Adatkötés akár a teljes forrásobjektumhoz is lehetséges – Nem adunk meg Path-t vagy Path=. – A teljes forrás-objektum (Data. Context) használata – Ha nincs Content. Template To. String használata… public override string To. String() //Személy osztály To. String() { return nev + " (" + szuletesi. Ev + ")"; } public Main. Window() { Initialize. Component(); this. Data. Context = new Szemely() { Nev = "Peti", Szuletesi. Ev = 1985 }; } <Label Content="{Binding}"/> 13

Adatkötés Mód • Az előző adatkötések egyirányúak voltak – Lehetséges irányok: One. Way, Two. Way, One. Way. To. Source, One. Time, Default – One. Way: a forrás változása változtatja a célt, de fordítva ez nem igaz – One. Way. To. Source: cél változtatja a forrást, fordítva nem igaz – Two. Way: a forrás változása változtatja a célt, és fordítva is – One. Time: a forrás inicializálja a célt, de a további változtatásoknak nincs hatása <Text. Box Text="{Binding Value, Element. Name=slider, Mode=Two. Way}" 14

Adatkötés Frissítés • Mikor módosítjuk a forrást? – Two. Way vagy One. Way. To. Source irányok esetén – Lost. Focus: akkor változik a forrás, ha az adatkötött UI-elem elveszítette a fókuszt (Text. Box Textnél alapértelmezés) – Property. Changed: akkor változik a forrás, ha az adatkötött UI -elem kötött tulajdonsága megváltozott (általában ez az alapértelmezés) – Explicit: a forrás változtatása kódból váltható ki az Update. Source() metódus hívásával – Default: a tulajdonság alapértelmezett viselkedését (Lost. Focus/Propery. Changed/Explicit) használja <Text. Box Text="{Binding Value, Element. Name=slider, Mode=Two. Way, Update. Source. Trigger=Property. Changed}" 15

Hibakeresés adatkötésben • A hibákról az Output ablakban kapunk értesítést akkor, amikor az adatkötés működésbe lépne (az adat tényleges lekérésekor) – A példában elrontott tulajdonságnevek szerepelnek (nem publikus tulajdonság esetén ugyanez a hibaüzenet!) 16

17

Mvvm. Light. Libs – Command • Command design pattern: a VM továbbítja az interakciót a logika felé • A xaml. cs file SZINTE ÜRES, csak view-only események • Gala. Soft. Mvvm. Light. Command. Wpf. Relay. Command • „In WPF 4. 5 or above […] please change the namespace you are using to Gala. Soft. Mvvm. Light. Command. Wpf. ” – nincs Std 10 ben 18

Feladat 19

Házi feladat - playlist manager • Minden dalhoz ezt akarjuk tárolni : Artist, Title, Length, Is. Favourite, Comment • *. txt file-ban táruljuk a dalokat (tetszőleges formátum) • 1. ablak: file-ok listája. Ha egy elemre duplán kattintunk, akkor megnyitja a második ablakot • 2. ablak: dalok listája (“Szerző: Cím”), és a kijelölt dal minden adatát megmutatja (szerkeszthetően) a List. Box vezérlő alatt • File betöltése/mentése 20

Gyakorlati feladat 21

Új ablak / process Button. Click Button. Command : ICommand. Execute(null) Relay. Command. Execute(null) • Természetesen ez lassabb, Action. Invoke(null) mintha a Click eseménybe írnánk a teljes logikát IEntry. Selector. Service. Select(x) • A User ezt nem látja!!! Selector. Via. Window. Select(x) • A rétegzés és a minőség fontosabb!!! Show Window / Start Process 22