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

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

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

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

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

<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

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

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

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

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

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

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

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

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

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

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}

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

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

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

ICommand Átstílusozás

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

Amitől Presentation a WPF

A megjelenítési réteg

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

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

További információk http://msmvps.com/blogs/theproblemsolver/archive/2009/02/18/pat terns-amp-practices-release-prism-version-2.aspx http://www.infoq.com/news/2009/02/PRISM-2-Silverlight http://www.infoq.com/interviews/Prism-Glenn-Block http://joshsmithonwpf.wordpress.com/2009/01/27/my-mvvm-article- in-msdn-magazine/ http://msdn.microsoft.com/en-us/magazine/dd419663.aspx http://blogs.msdn.com/johngossman/archive/2005/10/08/478683.as px http://msdn.microsoft.com/en-us/magazine/cc785479.aspx http://www.code-magazine.com/Article.aspx?quickid=0811041 http://www.orbifold.net/default/?cpage=1&p=1013