V 1.0 Programozás III. Grafikus felület API-k és összehasonlításuk WPF Hello World Fontosabb UI-elemek UI-elemek tartalommodelljei UI-elemek öröklődési.

Az előadások a következő témára: "V 1.0 Programozás III. Grafikus felület API-k és összehasonlításuk WPF Hello World Fontosabb UI-elemek UI-elemek tartalommodelljei UI-elemek öröklődési."— Előadás másolata:

1 V 1.0 Programozás III. Grafikus felület API-k és összehasonlításuk WPF Hello World Fontosabb UI-elemek UI-elemek tartalommodelljei UI-elemek öröklődési lánca

2 V 1.0ÓE-NIK, 2014 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 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.

3 V 1.0ÓE-NIK, 2014 (Csak desktop alkalmazásokhoz alkalmas API-k vannak listázva) Grafikus felület API-k API: Application Programming Interface GUI felületeinket általában nem magunk nulláról programozzuk –A játékok gyakori ellenpélda Felépítésükhöz kívülről biztosított API-kon keresztül elérhetünk kész építőköveket/eszközöket –MFC(Windows/C++) –Windows Forms(Windows/.NET) –Java AWT/Swing(Java) –Cocoa(Mac OS X) –QT(főleg Unixok) –GTK/GTK+(főleg Unixok) –WPF(Windows/.NET) –Windows Runtime (Metro)(Windows/C#, C++) 3

4 V 1.0ÓE-NIK, 2014 Grafikus felület API-k / Windows Forms.NET 1.0-től (2002) –Gyakorlatilag csak natív Windows API elemekhez biztosít menedzselt hozzáférést. –Windows API: Windows 1.0-tól (1985) Egyszerű, klasszikus kinézetű felületek Funkcionalitás: csak GUI –Ablakok készítése és menedzselése –Ablakok felépítéséhez szükséges komponensek (gombok, szövegdobozok, scrollbar-ok stb.) –Dialógusablakok –Egér és billentyűzet input kezelése –Stb. 4

5 V 1.0ÓE-NIK, 2014 Grafikus felület API-k / WPF.NET 3.0-tól (2006) Windows Forms lecserélésére szánták –Csak félig sikeres! (2014-es állapot) Grafikus alkalmazások fejlesztésének (szinte) minden aspektusához egységes hozzáférést, logikát biztosít –Felhasználói felület felépítése (mint Windows Forms) –2D grafika –3D grafika –Multimédia/videó –Stb. 5

6 V 1.0ÓE-NIK, 2014 Grafikus felület API-k / Windows Runtime Metro: design elvek, designnyelv (Metro -> Modern - > Windows Store/Windows 8) Modális, teljes képernyőt elfoglaló, nagyon egyszerű grafikájú felületek –Elsősorban kis képernyőjű, hordozható eszközökön előnyös 6

7 V 1.0ÓE-NIK, 2014 Windows Forms vs. WPF 7 Windows FormsWPF Egyszerű grafikus alkalmazások készítéséhez „Rich desktop apps” Gazdag grafikájú, multimédiás alkalmazásokhoz Viszonylag kötött bevett megoldások Szinte mindenre többféle megoldás A nagyon alapnál több funkcionalitáshoz már külső könyvtárak igénybevétele szükséges (ezek használatának logikája teljesen eltérő lehet!) Nagyon sok eszközhöz biztosít elérést és egységes logikát Nagyon régi, kiforrott, minden hibája ismert Nemrég még jelentős fejlesztés alatt, hibák megoldására még most is alakulnak a bevett módok Könnyen tanulhatóNehezen tanulható

8 V 1.0ÓE-NIK, 2014 Melyiket? http://blog.arsanth.com/index.php/2011/09/15/what-is-and-isnt-dead-in- windows-8/ (2013. február 22.)http://blog.arsanth.com/index.php/2011/09/15/what-is-and-isnt-dead-in- windows-8/ Jelenleg a WPF a legjobb lehetőségünk asztali fejlesztéshez – WinForms, ha gyors prototipizálás kell, vagy létező projektben, vagy ha a csapat csak azt ismeri 8

9 V 1.0ÓE-NIK, 2014 Jövő (2014) ? Windows Forms támogatása örökéletűnek várható, de már nem fejlesztik WPF jövője kérdéses, fejlesztése lassú XAML viszont túlél, fejlődik A Microsoftnak a grafikus felület tervezésében tett következő lépésétől függ minden 9

10 V 1.0ÓE-NIK, 2014 WPF Hello World 10

11 V 1.0ÓE-NIK, 2014 WPF Hello World 11

12 V 1.0ÓE-NIK, 2014 WPF Hello World View -> View -> Other Windows -> 12

13 V 1.0ÓE-NIK, 2014 WPF Hello World Projektbeállítások –Fordítási beállítások –Fordítás előtti és utáni események –Parancssori argumentumok –Felhasználói/alkalmazásszintű beállítások –Stb. Hivatkozások –Keretrendszeri vagy harmadik fél által készített könyvtárakra Alkalmazás fájljai Ablak fájljai 13

14 V 1.0ÓE-NIK, 2014 App, MainWindow App osztály: –App.xaml.cs + generált bin/obj/App.g.cs = App osztály –A Main függvény alapértelmezésben ide generálódik, benne példányosít egyet ebből az osztályból és megjeleníti a főablakot –Alkalmazásunkat reprezentálja: Current statikus tagban van tárolva egy mindig elérhető példány. Startup, Exit események, Shutdown() függvény a bezáráshoz (App.Current.Shutdown()) MainWindow osztály: –Egy ablakot reprezentál (alapbeállítás szerint ez a „főablak”, de ez módosítható) –MainWindow.xaml.cs + generált bin/obj/MainWindow.g.cs = MainWindow osztály –InitializeComponent() függvény generálódik bele, amiben betölti a XAML fájlt 14

15 V 1.0ÓE-NIK, 2014 WPF Hello World Felhasználói felület XAML nyelvű leírása és designer 15

16 V 1.0ÓE-NIK, 2014 WPF Hello World Ablak mögöttes kód (code-behind) fájlja 16

17 V 1.0ÓE-NIK, 2014 WPF Hello World A kijelölt felhasználóifelületelem-példány tulajdonságai a Properties ablakban szerkeszthetők 17

18 V 1.0ÓE-NIK, 2014 Toolbox Vezérlők –Felhasználói interakcióhoz Egyszerű grafikai elemek Ablakkereteket kiegészítő elemek –Menü, eszközkészlet, státuszsor… Tartalommenedzserek –Elemek csoportosítására, méretezés kezelésére Stb. 18

19 V 1.0ÓE-NIK, 2014 Egyszerű vezérlők Button (nyomógomb) –Content tulajdonság tartalmazza a szöveget (?) –Click esemény Label (szöveg) –Content tulajdonság tartalmazza a szöveget(?) CheckBox (jelölőnégyzet) –Content tulajdonság tartalmazza a szöveget (?) –IsChecked tulajdonság tartalmazza, hogy be van-e jelölve –Checked/Unchecked események RadioButton (rádiógomb) –Content tulajdonság tartalmazza a szöveget (?) –GroupName csoportosítja, de enélkül is biztosít a csoportosításra logikát –IsChecked –Checked/Unchecked események 19

20 V 1.0ÓE-NIK, 2014 Egyszerű vezérlők TextBlock (szöveg II) –Text tulajdonságban van a szöveg TextBox (szövegbeviteli mező) –Text tulajdonságban van a szöveg –TextChanged esemény GroupBox (csoportosító doboz) –Header tartalmazza a fejléc szövegét –Content tulajdonságban van a tartalom Stb. 20

21 V 1.0ÓE-NIK, 2014 Listavezérlők ListBox (lista) –Items tulajdonság tartalmazza az elemeket –SelectionChanged esemény ComboBox (legördülő lista) –Items tulajdonság tartalmazza az elemeket –SelectionChanged esemény TreeView + TreeViewItem (fanézet) –Items tartalmazza az elemeket Ha TreeViewItem van benne, azon belül is Items tartalmazza az elemeket, Header a szöveget 21

22 V 1.0ÓE-NIK, 2014 Vezérlők tartalommodelljei ContentControl: –Egyetlen elemet tartalmazhat. (Content tulajdonság) HeaderedContentControl: egy elemet és egy fejlécet tartalmaz. ItemsControl: –Több elemet tartalmazhat. (ItemsSource / Items tulajdonságok) HeaderedItemsControl: több elemet és headereket tartalmaz. 22

23 V 1.0ÓE-NIK, 2014 UI-elemek öröklési lánca System.Windows.Media.Visual: –Renderelés támogatása, transzformációk, találattesztelés, befoglaló téglalap, koordináta- transzformációk… System.Windows.UIElement: –Input, elrendezés, fókusz támogatása, eseménykezelés System.Windows.FrameworkElement: –Adatkötés (stb.) 23

24 V 1.0ÓE-NIK, 2014 UI-elemek öröklési lánca System.Windows.Controls.Control: –Vezérlők ősosztálya: főként a vezérlők kinézetének teljes cserélhetőségét támogatja. Alapvető beállítások a vezérlőn (Background, BorderThickness, BorderBrush, FontFamily, FontSize stb), amiket a vezérlő kinézetét meghatározó ControlTemplate használ fel (Template tulajdonság). ControlTemplate hiányában a tulajdonságoknak nincs funkciója! 24

25 V 1.0ÓE-NIK, 2014 UI-elemek öröklési lánca System.Windows.Controls.ContentControl: –Felhasználóifelület-elemek lehetséges tartalommodelljeinek egyike: egyetlen elemet tartalmazhat (Content tulajdonság). A Content tetszőleges típusú lehet (Object), nagyon sokszor string vagy UIElement-utód. Felhasználóifelület-elemek egymásba építése nagyon gyakori használati mód 25

26 V 1.0ÓE-NIK, 2014 UI-elemek öröklési lánca ContentControl leszármazottak (nem feltétlenül közvetlen): –Button –CheckBox –Label –RadioButton –… –Window 26

27 V 1.0ÓE-NIK, 2014 UI-elemek öröklési lánca System.Windows.Controls.ItemsControl: –Felhasználóifelület-elemek lehetséges tartalommodelljeinek egyike: több elemet tartalmazhat (Items, ItemsSource tulajdonság). –Items: ItemCollection típusú – Object elemeket fogad –ItemsSource: IEnumerable Egyszerre csak az egyiket használjuk – ha ItemsSource-ot, akkor az Items fix méretű és read-only lesz. ItemsSource csak akkor használható, ha az Items üres. 27

28 V 1.0ÓE-NIK, 2014 UI-elemek öröklődési lánca ItemsControl leszármazottak (nem feltétlenül közvetlen): –ComboBox –ListBox –ListView –Menu –TreeView –… 28

29 V 1.0ÓE-NIK, 2014 Elemek elrendezése HorizontalAlignment –Elem vízszintes rendezése a tartalmazóján belül VerticalAlignment –Elem függőleges rendezése a tartalmazóján belül Margin: távolság az objektum körül Height, Width Ezek a beállítások kölcsönhatásban vannak, együtt alakítják ki az objektum elhelyezkedését (pl. …Alignment+Margin, Height+VerticalAlignment, Width+HorizontalAlignment…) 29

30 V 1.0ÓE-NIK, 2014 Tartalommenedzserek Céljuk az elemek meghatározott szabályok szerinti elrendezése és átméretezés kezelése – saját grafikus megjelenésük nincs! Grid (elemek rácsszerű elrendezésére) Canvas (elemek adott pixelre való elhelyezésére) DockPanel (igazított elhelyezés) StackPanel (elemek egymás utáni elhelyezése) WrapPanel (elemek egymás utáni elhelyezkedése, lapozással) –Mindegyiknek Children tulajdonsága tartalmazza az elemeket Grid: StackPanel: 30

31 V 1.0ÓE-NIK, 2014 UI-elemek öröklődési lánca System.Windows.Controls.Panel: –A tartalommenedzserek a Panel osztály utódai –Children: UIElementCollection típusú – UIElement típusú elemeket fogad 31

32 V 1.0ÓE-NIK, 2014 WPF Hello World II. 32

33 V 1.0ÓE-NIK, 2014 WPF Hello World II. Eseménykezelés –A vezérlők (később pontosítjuk!) eseményeire való feliratkozást a Properties ablakban (villám ikon) lehet megtenni –Kettős kattintással új eseménykezelő jön létre a code-behind fájlban, és megtörténik a feliratkoztatás az eseményre –Törlés és enter után a feliratkozás törlődik, a létrejött függvény nem! (Kézzel törlendő, ha már nem szükséges.) –Eseménykezelőt hozzárendelni a vezérlőn való kettős kattintással is lehet, ez az ún. alapértelmezett eseményhez rendel eseménykezelőt 33

34 V 1.0ÓE-NIK, 2014 Feladat 34