WPF alkalmazások fejlesztése az M-V-VM tervezési minta alapján

Az előadások a következő témára: "WPF alkalmazások fejlesztése az M-V-VM tervezési minta alapján"— Előadás másolata:

1 WPF alkalmazások fejlesztése az M-V-VM tervezési minta alapján
Tóth László Fejlesztő, oktató

2 A WPF egyedi szemléletének bemutatása
Létezik a WPF-es gondolkodás Nem csak az Enterprise fejelsztőké a DesignPattern Az üzleti logika egyszerűen leválasztható a grafikusról

3 Amiről szó lesz… Adtkötés Master-detail Funkciókötés Kreativitás
ViewModel Az Eredmény

4 Amiről szó lesz… Adtkötés Master-detail Funkciókötés Kreativitás
ViewModel Az Eredmény

5 DataBinding Az adat fogalma Az adatkötés fogalma
Az adatkötésnek van irányultsága Egyirányú Kétirányú Egyirányú fordított Tipikus felhasználása az adatbázis tartalmának gridben való megjelenítése Adatnak tekintünk minden tulajdonságot Adatkötés az amikor két adatot egymástól teszünk függővé Az adatkötésnek van irányultsága Egyirányú a forrástól a célig Kétirányú a forrás és a cél között oda-vissza Egyirányú fordított a céltól a forrásig Tipikus felhasználása az adatbázis tartalmának gridben való megjelenítése Az adatkötés azjelenti... Az adatkötés a WPF lelke Bármit köthetünk szinte bármihez (DP) Azt talán mindenki ismeri, hogy adatbázsiból adatokat gridhez, de az is csak egy proprty-property kötés mint pl. két vezérlő közt

6 <TextBox Text=“{Binding Name}” />
Az adatkötés működése Target Csak DependencyProperty lehet. <TextBox Text=“{Binding Name}” /> Change Change Source Akármilyen objektum, de ideális esetben olyan amelyik publikálja saját állapotváltozásait (INPC). Public class Person : INPC { public string Name { get { return value; } set INPC = System.ComponentModel.INotifyPropertyChanged

7 Látványos adatkötés KAXAML binding Slider to textbox üres lapról

8 Amiről szó lesz… Adtkötés Master-detail Funkciókötés Kreativitás
ViewModel Az Eredmény

9 Amikor megindul a fantázia...
A WPF-ben szinte minden DependencyProperty Engedjük szabadra a fantáziánkat!

10 Kreatív adatkötés KAXAML binding thumbnail kezdő xaml-ből
1. <rectangle fill visualBrus visual={binding content} 2. rectangle width height to Content.ActualWidth 3. masik rectangle width height to Content.ViewportHeight/Width 4. ennek translatetransform HorizontalOffset, VerticalOffset

11 Amiről szó lesz… Adtkötés Master-detail Funkciókötés Kreativitás
ViewModel Az Eredmény

12 Az adatok elérése A DataContext örklődik lefelé a fán Window Grid
Legyen a Window DataContext-je az A objektum A Window Grid TextBox Border Button C Legyen a Border DataContext-je a B objektum A Bindighoz meg kell adni, hogy hol van az adat. Az meg a DataContextben lehet. Nem DataSource! A datacontext egy objektumfa, amiben a Binding kifejezéssel szabadon kóborolhatunk. B Legyen a Grid DataContext-je a C objektum

13 A Feladat Egyszerű szülő-gyerek megjelenítés Ez az elérendő cél.

14 Amiről szó lesz… Adtkötés Master-detail Funkciókötés Kreativitás
ViewModel Az Eredmény

15 Model-View-Presenter
Model / Business Layer View Presenter Selection Ebben az esetben a View hozza létre a Presentert A presenter első dolga, hogy elrohanjon az adatokért az üzleti réteghez és odaadja azokat megjelenítésre Ha a presenter a Viewhoz akar dumálni, akkor kell neki egy referencia, ami megnehezíti a tesztelést, ezért interfészeket szokás használni, hogy mockolható legyen Történik egy select esemény, Ezért a Presentertől elkérjük az eseménykezelőben a részletes adatokat Aztán egy Save esemény, amikor megkérjük a Presentert, hogy toljon vissza ada Rendben van, de tudunk jobbat a WPFfel. Save

16 Model-View- ViewModel Presenter {Binding} {Binding} {Binding}
Model / Business Layer View ViewModel Presenter {Binding} Selection {Binding} Mi lenne, ha valahogy optimalizálnánk a Presenter működését? Ha a Presenter az adatokat nem adja oda a Viewnak, hanem helyette propertyket tart fenn a View számára amikhez az tud adatkötni, akkor ezentúl ehhez nem kell kódot írni, sőt a Presenternek kell hívnia a View-t (és igazából a Viewnak sem kell hívni a Presentert) Mi a heyzet a Selectin eseménnyel? Ehhez viszont biztosan kell írnunk egy eseménykezelő kódot. Nem! A XAML lehetőséget nyújt nekünk erre is, ha azt szeretnénk. Na de a Save nem ilyen egyszerű, mert ott még menteni is kell. De! Ezt a részt is teljesen kiválthatjuk adatkötéssel. Ha nincs Codebehind, nincs is több sírás  Persze mindent meglehtne oldani a kódban is, de ez a modell nagyon jól és tisztán működik. Mivel ez a modell lényegét tekintve lett más mint az MVP, ezért a Presenter már ViewModel néven fut. Így alakult ki az M-V-VM. Most szemléltetésképpen elkészítek egy ViewModelt. Save {Binding}

17 ViewModel készítés Nem teljesen üres alkalmazással kezdek, hgy ne itt kelljen az unalmas részt összepakolni. A XAML layout része már elő van készítve. Van egy CD osztályom is, ahol megfigyelhetjük a propertyket, és az INotifyPropertyChanged implementációt. A databinding akkor tud naprakész lenni, ha az objektumok tudatják vele az összes adatváltozásukat. (enélkül mindig a kezdeti értéket láthatnánk) Szerencsére ez egy nagyon egyszerű interface. El is kezdem a ViewModel megírását egy új osztály definiálásával. Elsőnek INotifyPropertyChanged, hiszen a ViewModel részt fog venni adatkötésben. Aztán a konstruktorban szerzek adatokat. ObservableCollection property, amin felkínálom az adatokat adatkötésre. Ebbe paklok a konstruktorban. A View DataContextjébe bepakolok (Code) egy ViewModel példányt. Jöhetnek sorba a Binding kifejezések a XAML-be ListBox ItemsSource CDStore02 ListBox DisplayMemberPath ITT LECSUKHATOM A DESIGN NÉZETET Most működjön a details, amihez eddig a click eventre szükségünk volt A GroupBox DataContext bind to list.SelectedItem Most a TextBoxokat bindolni Ehhez már RUN A details legyen letiltva, ha nincs semmi kiválasztva (GroupBoxStyle a toolboxról) CDStore03 Ez egy nagyon gyakori pattern. Ezért van rá shortcut. KAXAML Syncron.xaml Csak írjuk be az IsSyncronizedWithCurrentItem (a listák be vannak burkolva a databindinghoz ICollectionView! Ez is egy ViewModel) Visszatörölni a DataContext bindolását IsSyncronized a ListBoxhoz (nincs is olyan, hogy nincs kiválasztva) Most a textboxok a teljes ViewModelhez vannak kötve CDs/Title CDStore04 Az ICollectionView használható Unittestben, de nem Silverlightban! (Andrást megkérdezni, mi a helyzet a 3-assal?) FOR SILVERLIGHT CurrentCD property implementálása A ListBox SelectItemje Binding CurrentCD (SyncronizeWith kidobása) Ez kétirányú A textboxok pedig CurrentCD.Title CDStore05 IDE KELLENE EGY UNITTEST Na kész vagyunk, de ezen nem látszik, hogy WPF. ListBox Template Aztán bele a progressbar 1000 – 7000 ig 100 szélesen

18 Amiről szó lesz… Adtkötés Master-detail Funkciókötés Kreativitás
ViewModel Az Eredmény

19 Funkcionalitás adatkötéssel
A propery valójában két metódus Nehogy erre használjuk! Parancskezelés ICommand

20 ICommand Átstílusozás

21 Amiről szó lesz… Adtkötés Master-detail Funkciókötés Kreativitás
ViewModel Az Eredmény

22 Amitől Presentation a WPF

23 A megjelenítési réteg

24 Amiről szó lesz… Adtkötés Master-detail Funkciókötés Kreativitás
ViewModel Az Eredmény

25 Láttuk a WPF egyedi szemléletét
Létezik a WPF-es gondolkodás Nem csak az Enterprise fejelsztőké a DesignPattern Az üzleti logika egyszerűen leválasztható a grafikusról

26 További információk terns-amp-practices-release-prism-version-2.aspx in-msdn-magazine/ px