V 1.0 Programozás III. XML XAML Adatkötés I.

V 1.0ÓE-NIK, 2014 XML (w3schools.com) Hierarchikus adatleíró formátum XML deklarációk + elemek + attribútumok –Elemek:,, … –Attribútumok: -ban category=„…” … 2 Everyday Italian Giada De Laurentiis Learning XML Erik T. Ray

V 1.0ÓE-NIK, 2014 XML Felépítését szigorú szabályok korlátozzák –Első sor: opcionális formátumspecifikáció, kiegészíthető karakterkódolással: –Mindegyik elem alá lehet rendelni alelemeket –Mindegyik elemnek lehet szöveges tartalma és attribútumai, amelyek az adott elemhez adnak meg tulajdonságokat –Kötelezően kell lennie egy gyökérelemnek, ami az egész dokumentumot közrefogja ( elem) –Minden elem lezárása kötelező ( vagy ) Az egymásba ágyazás lezárásainak megfelelő sorrendben kell történniük Rosszul formázott: Jól formázott: –A kis- és nagybetűk különbözőek 3

V 1.0ÓE-NIK, 2014 XML Egy objektum leírását a beágyazott elemek és attribútumok szolgáltatják Ugyanígy (a beágyazással) hierarchia, tartalmazás is reprezentálható! – XML értelmezésétől függ 4 Everyday Italian Giada De Laurentiis

V 1.0ÓE-NIK, 2014 XAML (eXtensible Application Markup Language) XML-alapú deklaratív nyelv, amelyben.NET objektumok hierarchiáját és állapotukat írhatjuk le (valamilyen szinten funkcionalitást is) –Nem absztrakt és alapértelmezett konstruktort tartalmazó típusok használhatók WPF-ben a felhasználói felület felépítésére használjuk Minden, ami XAML-ban leírható, C# kóddal is kifejezhető Mi történik a XAML kóddal? –„Compiled XAML” – msbuild.exe bináris adatra fordítja, erőforrásként az assemblybe épül –.g.cs ->.baml –„Loose XAML” – XML formátumban is maradhat, kódból betölthető Ha így akarjuk használni, nem tartalmazhat x:Class-t, forráskódot és nem megengedett kód kibocsátása semmilyen módon –Az ablak XAML-ját az InitializeComponent() tölti be a konstruktorban 5

V 1.0ÓE-NIK, 2014 XAML XAML formátumú leírás: C# nyelvű leírás: A XAML leírásban az elemek.NET típusokból való példányosítást jelentenek Az attribútumokkal a példány tulajdonságait vagy eseményeit állítjuk 6 <CheckBox Content="Automatikus mentés" Name="checkBox1" IsChecked="True" Checked="checkBox1_Checked"/> CheckBox checkBox1 = new CheckBox(); checkBox1.Content = "Automatikus mentés"; checkBox1.IsChecked = true; checkBox1.Checked += checkBox1_Checked;

V 1.0ÓE-NIK, 2014 XAML Content beállítása – explicit beállítás: Tulajdonságelem-szintaxis: alelem Implicit beállítás: A XAML specifikációja szerint: minden osztály deklarálhat „tartalom- tulajdonságot” (Content Property) – ekkor a közvetlen gyermekelem ennek a beállítására szolgál. A ContentControloknál ez a „tartalom-tulajdonság” a Content… 7 <CheckBox Content="Automatikus mentés" Name="checkBox1" IsChecked="True"/> Automatikus mentés Automatikus mentés

V 1.0ÓE-NIK, 2014 XAML … az ItemsControloknál a tartalomtulajdonság az Items… … a Paneleknél (tartalommenedzserek) a tartalomtulajdonság a Children –(a … kihagyott, a mostani téma szempontjából nem fontos részeket jelöl) 8 Gyűjteményszintaxis (Collection Syntax)

V 1.0ÓE-NIK, 2014 XAML Gyűjteményszintaxis (Collection Syntax) –A XAML feldolgozó enged több gyermekelemet egymás után megadni, ha az éppen beállítandó tulajdonság egy gyűjtemény (IList, Array, IDictionary) –Az előző példánál pl. a ListBox Items-énél és a Grid Children- jénél használtuk ezt: 9

V 1.0ÓE-NIK, 2014 XAML Implicit megadás / komplex(ebb) tartalom Tulajdonságelem megadás / komplex(ebb) tartalom Szintaktikai hiba – NEM ContentControl utód, nincs Contentje (és nincs más tartalomtulajdonsága sem) 10 Automatikus mentés Automatikus mentés Automatikus mentés

V 1.0ÓE-NIK, 2014 XAML További (egyelőre kevésbé fontos) szintaktikai lehetőségek... –Csatolttulajdonság-szintaxis (Attached Property Syntax) –Stb. 11

V 1.0ÓE-NIK, 2014 XAML névterek A névterek adják meg a XAML-dokumentumunkban (az adott elemen belül) használható kulcsszavak körét 12 <Window x:Class="WpfApplication4.MainWindow” xmlns=" xmlns:x=" Title="MainWindow" Height="350" Width="525">

V 1.0ÓE-NIK, 2014 XAML névterek WPF-központú.NET névtereket képez le, és a.xaml fájl rendelkezésére bocsátja azokat: –System.Windows –System.Windows.Controls –System.Windows.Data –System.Windows.Media –System.Windows.Navigation... stb. Ez az alapértelmezett névtér, az ebből érkező kulcsszavakat nem kell névtérnévvel ellátni: 13 <Window x:Class="WpfApplication4.MainWindow” xmlns=" xmlns:x=" <Window x:Class="WpfApplication4.MainWindow” xmlns=" xmlns:x=" Title="MainWindow" Height="350" Width="525">

V 1.0ÓE-NIK, 2014 XAML névterek XAML-specifikus kulcsszavakat (és a System.Windows.Markup.NET névtér néhány típusát) tartalmazza: –Class, Null, Static, Array, ClassModifier, FieldModifier, DynamicResource, StaticResource, Key, Name, Code, … Mindegyik speciális kulcsszó használata sajátos, néhányat fogunk csak tanulni Ennek a névtérnek a neve hagyományosan x, az ebből érkező kulcsszavakat x: prefixszel kell ellátni 14 <Window x:Class="WpfApplication4.MainWindow” xmlns=" xmlns:x=" <Window x:Class="WpfApplication4.MainWindow” x:ClassModifier="internal" xmlns=" xmlns:x=" Title="MainWindow" Height="350" Width="525"> <Button Content="START!" Name="buttonStart” x:FieldModifier="public"/>

V 1.0ÓE-NIK, 2014 XAML névterek Tetszőleges.NET-es névterek használata: –clr-namespace: a névtér neve –assembly: az assembly neve, amely a megadott névteret (vagy egy részét) tartalmazza. Tipikusan a.dll vagy.exe fájl neve, a kiterjesztés nélkül. –Gyári.NET névterek esetében általában benne van a dokumentációban, pl IEnumerable interfész MSDN dokumentációja: 15 <Window x:Class="WpfApplication4.MainWindow"... xmlns:System="clr-namespace:System;assembly=mscorlib”> Hello World

V 1.0ÓE-NIK, 2014 XAML markupbővítők A XAML értelmezők számára az attribútumhoz való értékrendelés többnyire egy új string vagy stringből konvertálható primitív/objektum létrehozását jelenti Időnként más viselkedésre van szükség: –Null értéket akarunk hozzárendelni –Már létező objektumot akarunk hozzárendelni –Statikus objektumot akarunk hozzárendelni –Nem alapértelmezett konstruktorral létrehozott objektumot akarunk hozzárendelni –Stb. Formátum: Egyedileg kell megtanulni a használatát 16 Tulajdonság="{…}"

V 1.0ÓE-NIK, 2014 Adatkötés I. GUI-elemek valamelyik tulajdonságának kapcsolása egy másik objektumhoz –Célok lehetnek: Amikor az objektum adatai változnak, az a GUI-elemen is automatikusan látszódjon Ha a GUI-elemben változtatunk, az objektum adatai is automatikusan változzanak Pl: –Window vezérlőin jelenjenek meg a személy adatai: textBoxNev.Text  szemely.Nev checkBoxSzabadsagon.IsChecked  szemely.Szabadsagon checkBoxBeteg.IsChecked  szemely.Beteg 17

V 1.0ÓE-NIK, 2014 Adatkötés I. 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 radioButtonXXX.IsEnabled  checkBox.IsChecked Vagy, ha a rádiógombok közös tartalmazóban vannak: stackPanel.IsEnabled  checkBox.IsChecked 18

V 1.0ÓE-NIK, 2014 Adatkötés I. Pl: –ListBoxban egy adott tömb elemei jelenjenek meg listBox.ItemsSource  tömb Pl: –ListBox kerete vegye fel azt a színt, amilyen ki van jelölve listBox.BorderBrush  listBox.SelectedItem Pl: –ComboBoxban kiválasztott elem adatait akarom kiírni labelXXXX.Content  comboBox.SelectedItem XXXX tulajdonsága 19

V 1.0ÓE-NIK, 2014 Adatkötés I. 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 –A cél a GUI-elem, illetve ennek az a tulajdonsága, amely az adattartamat használja majd 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 DependencyObject-utód lehet csak 20 Pl: –Window vezérlőin jelenjenek meg a személy adatai: textBoxNev.Text  személy neve –Forrás: szemely.Nev –Cél: textBoxNev.Text

V 1.0ÓE-NIK, 2014 Adatkötés I. – függőségi tulajdonságok A WPF rendelkezik olyan szolgáltatásokkal, amelyekkel kiterjeszthetőek egy „szabályos” tulajdonság képességei (=függőségi tulajdonság) A függőségi tulajdonság értéke (a szokásos módon kívül) többféle forrásból származhat: –Adatkötés –Tartalmazó elemek tulajdonság-értékének „öröklése” –Animáció –Stílus, erőforrás –Rendszerbeállítás (témák, felhasználói beállítások) Függőségi tulajdonságot csak DependencyObject utód definiálhat –Az UI-elemek mind ilyenek… –… és az UI-elemek legtöbb tulajdonsága függőségi tulajdonság 21

V 1.0ÓE-NIK, 2014 Adatkötés I. – függőségi tulajdonságok A függőségi tulajdonságoknak a dokumentációban (MSDN) van egy „Dependency Property Information” fejezetük Pl. FrameworkElement.Width: 22

V 1.0ÓE-NIK, 2014 Adatkötés I. Megadása a XAML-ban a {Binding} markupbővítővel –ElementName: forráselem (UI-elem) neve –Path: forráselemen belüli tulajdonság elérési útja –Alternatív formátum C# nyelvű leírás (gyakorlatilag soha nem használjuk) –Window konstruktorban az InitializeComponent() után, vagy Loaded eseménykezelőben… 23 <TextBox Name="textBoxToEnable" IsEnabled="{Binding ElementName=checkBoxEnabled, Path=IsChecked}" /> textBoxToEnable.SetBinding(TextBox.IsEnabledProperty, new Binding("IsChecked") { Source = checkBoxEnabled }); "{Binding IsChecked, ElementName=checkBoxEnabled}"

V 1.0ÓE-NIK, 2014 Adatkötés I. - Path megadásának formái Egyszerű tulajdonság elérése: –ElementName=checkBoxEnabled, Path=IsChecked Tulajdonságon keresztül elérhető objektum tulajdonságának elérésére: –ElementName=listBox, Path=SelectedItem.Nev Indexelhető tulajdonság elemének elérésére: –ElementName=listBox, Path=Items[0] További szintaktikai változatok is léteznek 24

V 1.0ÓE-NIK, 2014 Feladat 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 radioButtonXXX.IsEnabled  checkBox.IsChecked Vagy, ha a rádiógombok közös tartalmazóban vannak: stackPanel.IsEnabled  checkBox.IsChecked 25

V 1.0ÓE-NIK, 2014 Adatkötés I. - DataContext Adatkötés forrásának beállítására mód a DataContext tulajdonság használata is A DataContext függőségi tulajdonság, azaz értékét megkapják a tartalmazott elemek Ezt gyakran felhasználjuk olyan esetekben, amikor több UI-elem ugyanannak az objektumnak tulajdonságaihoz kötődne 26 <Label Content="{Binding Eletkor}"

V 1.0ÓE-NIK, 2014 Adatkötés I. – DataContext A DataContextet C# kódból is gyakran állítjuk: –XAML kód az adatkötésre: –Forrás beállítása pl. Window Loading eseményben, gombnyomásra vagy bármikor máskor: 27 <Label Content="{Binding Eletkor}" Szemely sz = new Szemely("Péter", 12, "Magyarország", "Budapest"); stackPanel.DataContext = sz; A pirossal keretezett Labelek voltak a közös StackPanelben

V 1.0ÓE-NIK, 2014 Adatkötés I. – DataContext Adatkötés nemcsak egy forrásobjektum valamely tulajdonságához, hanem a teljes forrásobjektumhoz is lehetséges –XAML kód az adatkötésre: ItemControloknál az Items nem állítható ilyen módon – nincs elérhető setter –Forrás beállítása a kódban: –(Az ItemsSource tulajdonság C# kódból való sima beállítása is alkalmas lenne a fenti feladatra) 28 listBoxArray.DataContext = new int[] { 1, 2, 3, 4, 5 };

V 1.0ÓE-NIK, 2014 Adatkötés I. Pl: –ComboBoxban kiválasztott elem adatait akarom kiírni labelXXXX.Content  comboBox.SelectedItem XXXX tulajdonsága Pl: –ListBoxban egy adott tömb elemei jelenjenek meg listBox.ItemsSource  tömb 29

V 1.0ÓE-NIK, 2014 Adatkötés I. Az előző adatkötések egyirányúak voltak –Lehetséges irányok: OneWay, TwoWay, OneWayToSource, OneTime –OneWay: a forrás változása változtatja a célt, de fordítva ez nem igaz –OneWayToSource: cél változtatja a forrást, fordítva nem igaz –TwoWay: a forrás változása változtatja a célt, és fordítva is –OneTime: a forrás inicializálja a célt, de a további változtatásoknak nincs hatása 30 <TextBox Text="{Binding Value, ElementName=slider, Mode=TwoWay}"

V 1.0ÓE-NIK, 2014 Adatkötés I. Mikor módosítjuk a forrást? –TwoWay vagy OneWayToSource irányok esetén –LostFocus: akkor változik a forrás, ha az adatkötött UI-elem elveszítette a fókuszt (TextBox Textnél alapértelmezés) –PropertyChanged: 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 UpdateSource() metódus hívásával –Default: a tulajdonság alapértelmezett viselkedését (LostFocus/ProperyChanged/Explicit) használja 31 <TextBox Text="{Binding Value, ElementName=slider, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"

V 1.0ÓE-NIK, 2014 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!) 32

V 1.0ÓE-NIK, 2014 Feladat 33

V 1.0ÓE-NIK, 2014 Házi feladat Karakterszerkesztő (játékhoz) – egy Karakter típusú objektum legyen, aminek fegyvereket, ruhákat stb. lehet beállítani listboxokból Closing-kor írjuk ki a karakter teljes leírását konzolba 34