Programming III. GUI APIs WPF Hello World Important UI elements

Az előadások a következő témára: "Programming III. GUI APIs WPF Hello World Important UI elements"— Előadás másolata:

1 Programming III. GUI APIs WPF Hello World Important UI elements
UI elements / content models UI elements / inheritance

2 (Only the desktop APIs are listed here)
GUI APIs API: Application Programming Interface We usually do not start a GUI program from zero Common exceptions: games We use external APIs as building blocks/templates/ tools MFC (Windows/C++) Windows Forms (Windows/.NET) Java AWT/Swing (Java) Cocoa (Mac OS X) QT (mostly Unix/Linux) GTK/GTK+ (mostly Unix/Linux) WPF (Windows/.NET) Metro (Windows RT) (Windows/C#, C++) Universal apps (WRT/UWP) (Windows 10) (Only the desktop APIs are listed here) A VS WPF-es (2012-től kezdve) A Paint.NET Windows Forms-os A Calendar metrós  Universal: Windows 8 introduced the Windows Runtime (WinRT), which was an evolution of the Windows app model. It was intended to be a common application architecture. When Windows Phone 8.1 became available, the Windows Runtime was aligned between Windows Phone 8.1 and Windows. This enabled developers to create Universal Windows 8 apps that target both Windows and Windows Phone using a shared codebase. Windows 10 introduces the Universal Windows Platform (UWP), which further evolves the Windows Runtime model and brings it into the Windows 10 unified core. As part of the core, the UWP now provides a common app platform available on every device that runs Windows 10. With this evolution, apps that target the UWP can call not only the WinRT APIs that are common to all devices, but also APIs (including Win32 and .NET APIs) that are specific to the device family the app is running on. The UWP provides a guaranteed core API layer across devices. This means you can create a single app package that can be installed onto a wide range of devices. And, with that single app package, the Windows Store provides a unified distribution channel to reach all the device types your app can run on. Windows 10 introduced Universal Windows Platform 10 for developing universal apps. Apps that take advantage of this platform are developed with Visual Studio Older Metro-style apps for Windows 8.1, Windows Phone 8.1 or for both (universal 8.1) need modifications to migrate to this platform.[13][14] UWP is not distinct from WinRT; rather, it is an extension of it. Universal apps no longer indicate having been written for specific OS in their manifest; instead, they target one or more device family, e.g. desktop, mobile, Xbox or Internet of Things (IoT). They react to the capabilities that become available to the device. A universal app may run on both a small mobile phone and a tablet and provide suitable experience.

3 Windows Forms ez mondjuk valszeg inkább Win32, de mindegy.

4 Windows Forms From .NET 1.0 (2002), mature in 2.0 Simple, classic look
Provides managed access for Windows API components and controls Windows API: from Windows 1.0 (1985) Simple, classic look Functionality: basic GUI concepts Creation and management of windows Basic required controls (buttons, text boxes, scrollbars, etc.) Dialog windows Event-driven approach to handle mouse and keyboard input Etc. 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 WPF Ez meg csak részben WPF-es.

6 Windows Presentation Foundation
From .NET 3.0 (2006) As of today, almost completely replaced Windows Forms Provides a unified approach for (almost) all aspects of the visual application development’s logic UI layout (similar elements as in Windows Forms) 2D 3D Multimedia/video Etc. 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.

7 Windows Runtime, Universal

8 Windows Runtime, Universal Apps
Metro: design principles, design language (Metro -> Modern -> Windows Store/Windows 8 apps) Typography-oriented, simple graphics, relaxed layouts Usually advantageous with small resolutions / portable devices Not successful, WPF Metro toolkits can provide same design with the old WPF approaches Win 10: Universal Windows Platform 10 Same app runs on multiple platforms/devices Common functionality API: Universal Windows Platform + API parts for the distinct platforms/devices Weak spot: Windows Phone and Surface Tablets are not popular  is it really necessary? 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. Univ: Gyenge pontról: You can create Universal Windows apps using the programming languages you're most familiar with, like C# or Visual Basic with XAML, JavaScript with HTML, or C++ with DirectX and/or Extensible Application Markup Language (XAML). You can even write components in one language and use them in an app that's written in another language. Universal Windows apps use the Windows Runtime, a native API built into the operating system. This API is implemented in C++ and supported in C#, Visual Basic, C++, and JavaScript in a way that feels natural for each language.

9 Windows Runtime, Universal
Win 8: Metro -> Win8.1: almost Universal -> Win10 UWP Pro: Same app runs on multiple platforms / devices Also respecting the unique features of those (screen size, user interactions) Common functionality using the Universal Windows Platform + the platform-dependent API parts Contra: Win10 only Sandboxing / weak functionality API Currently being re-evaluated (the „mobile” devices might be less emphasized due to the failure of the WP – or more emphasized due to Android devices?) Windows Bridge for IOS, Android, Web Apps, Classic Windows Running IOS, Android, webes, and Win32 Windows apps with UWP/store Van aki szerint a metró „designnyelv” kialakításának oka a hordozható kütyük akkujának kímélése volt. Android:

10 Windows Forms problems
Event-driven approach, MANY controls Mature, but many problems with BIG programs Only direct events? (few exceptions...) Only name-based access? (even less exceptions...) Only C# code for layout and style? Reusable Styles? Complex controls? List controls (item templates)?

11 Windows Forms vs. WPF Windows Forms WPF For simple GUIs
„Rich desktop apps” and multimedia Old-fashioned solutions, many examples New approaches, several possible solutions (e.g. layout engines) Usually external libraries are required, even the MS solutions can have different usage principles Unified business logic Old and mature – few bugs, but they are known and workarounds exist Some bugs, not mature framework, not mature IDE, ”under development” feeling Easy to learn Hard to learn

12 Which one? / Future As of 2017: who knows?
MS is re-positioning and re-evaluating due to the fall of PC UWP gains a lot of attention – reasonable to use it? 2016. feb.: „MS acquires Xamarin”...

13 Which one? / Future It is 100% that we will also need non-sandboxed desktop apps in the future (WPF) The new technologies (WPF and after) share a lot of basic concepts, so there are many reusable parts The WPF is the safe choice – Windows Forms is obsolete XAML, data binding, MVVM  these WILL go on!

14 WPF Hello World

15 WPF Hello World

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

17 WPF Hello World Project settings References to DLLs
Compile/build settins Pre and post-build events Command line arguments Application settings Etc. References to DLLs Framework or third-party libraries Application-level files Files for the window

18 App, MainWindow App class: MainWindow class:
App.xaml.cs + generated bin/obj/App.g.cs = App class This is where the Main method is generated, along with the instances of the App and MainWindow classes Represents the application itself, can be accessed through a static property (e.g. App.Current.Shutdown()) MainWindow class: Represents the main window, of course it can be renamed MainWindow.xaml.cs + generated bin/obj/MainWindow.g.cs = MainWindow class InitializeComponent() is generated, which loads the XAML file

19 WPF Hello World The XAML describes the GUI, the designer allows us to edit the GUI – not mature, autocomplete is imperfect

20 WPF Hello World Code-behind for the window

21 WPF Hello World We can edit the properties and the events for the selected UI element in the Properties window

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

23 WPF Hello World II. Events
We can subscribe to events using the events section of the Properties window (“thunder” icon) When we double-click, the XAML and the code-behind are both automatically edited The event handler method is created in the code-behind, the association between the method and the control’s event is done in the XAML We can remove the association by hand; compile error if we remove the event handler method without removing the association Double clicking on the control = adding event handler for the default event

24 Toolbox Controls Simple graphical shapes (rectangle, ellipse)
For user interaction Simple graphical shapes (rectangle, ellipse) Window extension elements Menu, toolbar, status bar… Layout managers To group and align/size the elements Etc.

25 Simple controls Button Labe CheckBox RadioButton
Content property for the “text” Click event Labe CheckBox IsChecked property Checked/Unchecked events RadioButton GroupName property (if not specified: same parent = group) 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.

26 Simple controls TextBlock TextBox GroupBox Etc.
Text property for the text (!) TextBox For user input TextChanged event GroupBox Header for the text (!) Content property for the “text” (or anything else!) Etc.

27 List controls ListBox ComboBox (drop down list)
Items property for the elements SelectionChanged event ComboBox (drop down list) TreeView + TreeViewItem In a TreeViewItem: Items property for the elements, Header property for the text

28 Important events, properties, methods of UI elements
Naturally all the classes have specific properties/events on their own E.g: Button: Click event TextBox: Text property TextBox: LineCount property TextBox: SelectionStart, SelectionLength, SelectedText properties TextBox: GetLineLength(), GetLineText(), ScrollToLine() methods TextBox: Select(), Clear()… methods RadioButton: GroupName property – defines the radiobuttons that belong to one group (only one of them can be selected)

29 Control categories ContentControl: ItemsControl: Layout managers…
Button, Label, CheckBox, RadioButton, ... Window! Contains one object (Content property). The Content can be anything, often string or UIElement descendant Common use case for building composite user interfaces ItemsControl: Listbox, ComboBox, ListView, Menu ... Can contain multiple elements (Items, ItemsSource property  collection of objects) Layout managers…

30 Layout managers No display on their own, they group and align the controls within Grid (in cells, with margins) Canvas (positioned by pixel) DockPanel (dock top/bottom/left/right) StackPanel (stack controls on each other) WrapPanel (stack controls on each other + pagination) The children property contains the sub-controls 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.)

31 Alignment of controls HorizontalAlignment VerticalAlignment
Within the parent VerticalAlignment Margin: distance around the control Height, Width These properties together (along with the rules specified in the layout manager) specify the location and the size of the controls (e.g. …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.

32 Task – tax calculator