Programozás III. Grafikus felület API-k és összehasonlításuk

Az előadások a következő témára: "Programozás III. Grafikus felület API-k és összehasonlításuk"— Előadás másolata:

1 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 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 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++) A VS WPF-es (2012-től kezdve) A Paint.NET Windows Forms-os A Calendar metrós  (Csak desktop alkalmazásokhoz alkalmas API-k vannak listázva)

4 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. Funkcionalitás: a Windows Forms konkrétan csak GUI. A további szükséges holmikat a Windows API további komponensei vagy 3rd partyk biztosítják. Pl: 2d grafika a GDI/GDI+-on keresztül megy, a 3D grafikához többnyire DirectX-et használunk, videókezeléshez Media Player API, hanghoz megint más stb. (ez az összehasonlítás a következő könyvből van: Andrew Troelsen: Pro C# 5.0 and the .NET 4.5 Framework)

5 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. WinForms lecserélése sikertelen elsősorban a nagyon lassan fejlődő rossz designer támogatás (nehezen összerakható felületek, nehezen/sehogy debugolható xaml) és a nehéz tanulhatóság miatt, fej-fej mellett haladó két technológia maradtak, bár a MS nagyon nyomja a WPF-et. STB: dokumentumkezelés (XPS, pdf-szerű dokumentum) és pl gesztuskezelés, stylus A WPF ugyanúgy 3rd partykon keresztül nyújtja a szolgáltatásait részben (DirectX stb), csak egységes logikát nyújt hozzájuk.

6 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 A metró jellegű felületek készítése XAML eszközzel, a Windows Runtime API (vagyis inkább API-gyűjtemény) felé történik. Itt nem nagyon tudunk funkcionalitási felsorolást tenni, hiszen a Windows Runtime nem grafikus felület api igazából, hanem a WinAPI modern megfelelője, és persze mindenféle funkcionalitása van még a gui-n kívül. Van aki szerint a metró „designnyelv” kialakításának oka a hordozható kütyük akkujának kímélése volt.

7 Windows Forms vs. WPF Windows Forms WPF
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 Melyiket? (2013. február 22.) 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 A XAML-t mint technológiát ugye viszi tovább a Win8.

9 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

10 WPF Hello World

11 WPF Hello World

12 WPF Hello World View -> <ablak neve>
View -> Other Windows -> <ablak neve> Itt csináljatok valami egyszerű Hello World-öt talán valami gombbal és MessageBox-szal. DOCUMENT OUTLINE-t IS MUTASD MEG!!!

13 WPF Hello World Projektbeállítások Hivatkozások Alkalmazás fájljai
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

14 App, MainWindow App osztály: MainWindow 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

15 WPF Hello World Felhasználói felület XAML nyelvű leírása és designer

16 WPF Hello World Ablak mögöttes kód (code-behind) fájlja

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

18 WPF Hello World II. Ha csinálsz rá bezárás gombot is, azzal ki lehet próbálni az App.Current.Shutdown()-t.

19 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

20 Toolbox Vezérlők Egyszerű grafikai elemek
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.

21 Egyszerű vezérlők Button (nyomógomb) Label (szöveg)
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) IsChecked tulajdonság tartalmazza, hogy be van-e jelölve Checked/Unchecked események RadioButton (rádiógomb) GroupName csoportosítja, de enélkül is biztosít a csoportosításra logikát IsChecked Ezeket inkább mutasd be nekik példaprogramon! A tulajdonságaikat meg az eseményeiket nem kell részletezni, szinte mind ki lesz próbálva.

22 Egyszerű vezérlők TextBlock (szöveg II) TextBox (szövegbeviteli mező)
Text tulajdonságban van a szöveg TextBox (szövegbeviteli mező) TextChanged esemény GroupBox (csoportosító doboz) Header tartalmazza a fejléc szövegét Content tulajdonságban van a tartalom Stb.

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

24 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.)

25 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!

26 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 Az első kép: Button, benne DockPanel, benne két Rectangle. Második kép: Button, benne DateTime. Még teszek ide több képet, ha eszembe jut.

27 UI-elemek öröklési lánca
ContentControl leszármazottak (nem feltétlenül közvetlen): Button CheckBox Label RadioButton … Window Az első kép: Button, benne DockPanel, benne két Rectangle. Második kép: Button, benne DateTime. Még teszek ide több képet, ha eszembe jut.

28 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. Az első kép: Button, benne DockPanel, benne két Rectangle. Második kép: Button, benne DateTime. Még teszek ide több képet, ha eszembe jut.

29 UI-elemek öröklődési lánca
ItemsControl leszármazottak (nem feltétlenül közvetlen): ComboBox ListBox ListView Menu TreeView …

30 Elemek elrendezése HorizontalAlignment VerticalAlignment
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…) Hát, valahogy ide kéne írni, hogy az objektum beállítás nélkül a tartalmazóját kitölti, de ezt xaml nélkül nehezen tudjuk prezentálni még.

31 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: Az előzőekben említett TARTALMAZÓK. (Talán megzavaró lehet, hogy nincsenek benne a „vezérlők tartalommodelljei” részben, pedig ugyanúgy elemeket tartalmaznak. De ezek nem vezérlők.)

32 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

33 Feladat