1 / 34

Graphical Interface API-s for Software Engineering and GUI Design

Explore the various Graphical Interface API-s used in software engineering and GUI design, including Windows Forms, WPF, and platform-independent options. Learn about the benefits and limitations of different API-s and their relevance in modern application development.

colella
Download Presentation

Graphical Interface API-s for Software Engineering and GUI Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Software engineering and GUI design(NIXSG1EBNE) GraphicalInterface API-s, WPF MVVM, Data Binding Semesterexpectations Mid-Semester Project http://users.nik.uni-obuda.hu/prog4/

  2. Graphical Interface API-s • We don’t create Graphical User Interfaces (GUIs) from zero • Button control, or self-made low-level button? • Games are usually low-level, due to speed reasons • With an average UI, we don’t need 24 / 60 / 100 fps • Lowest level: OS • Main task of the OS layer: GENERIC display • Should be good for game development, data input forms, or a data processing AI • Typically an uncomfortable, fast, strongly typed, but highly customizable programmer toolkit written in C • With Windows: User32.dll és Comctl32.dll • unmanaged = strongly platform-dependent • Theoretically language-independent, but really C++ -only

  3. WinAPI = HWND, Messagepump …

  4. Graphical Interface API-s • Instead of this low-level access, we use externally provided API to access pre-created building blocks/tools • API: ApplicationProgrammingInterface • The programmer accesses only the API, but the OS is always in the background – usually we don’t have to care about that • However, UI frameworks tend to be highly platform-dependent (e.g. WPF ~ lots of Win+DirectXdependent code) • They constantly change • According to the current programming trends: procedural (old, WinAPIMessagePump)  OOP (since a long time)  Functional (some say this is the future) • The aim is the most comfortable, most flexible, and most professional application development • HUGE class hierarchies that support all OS controls structured into a meaningful system

  5. Graphical Interface API-s • Old (not recommended) • Carbon (Mac OS X, dead) • Cocoa/ObjectiveC(Mac OS X, deprecated?) • Java AWT/Swing(Java, notdeveloped) • MFC (Windows, C++, dead) • Windows Forms (Windows XP, .NET, notdeveloped) • Metro (Windows RT) (Windows 8, C#, C++, dead) • Universalapps (UWP) (Windows 10, C#, dead?) • Newer (accessible and recommended) • Cocoa/Swift (Mac OS X) • Java FX/TornadoFX(Java/Kotlin) • BorlandVCL (Windows/Pascal/C++, deprecated?) • WxWidgets/FLTK (Linux/Unix, C++) • QT (Linux/Unix/Windows, C++) • GTK/GTK+ (Linux/Unix/Windows, C++) • WPF (Windows XP/7, C#)

  6. Windows Forms • From the first version of the .NET framework(2002) • Truly feature-ready since .NET2.0 (lots of controls, threading, better VS support) • Provides managed access to almost all native Windows API controls • Basically the C# rewrite of the earlier MFC system • Functionality: only GUI • Mature, VERY stable • Simple, classic-looking UI interfaces • Creation and handling of windows • Handling of components (buttons, textboxes, scrollbars… A LOT OF controls) • Dialog windows (print, open, save) • Mouse and keyboard input, user events

  7. After Windows Forms… • Windows Formsis stable, but lots of compromises/problems • Only direct events (few exceptions...) • Supports only name-based access (few exceptions...) • Only C# code for all: logic, layout, look • Lack of re-usable styles • Complex (complicated/composite) controls are overcomplicated and limited • Problems with listcontrols (storage and look of list elements) • Lack of resolution-dependent layout  WPF (Windows PresentationFoundation) Hard start, but nowadays it is a mature, industrially accepted technology  Windows Metro, Universal Windows Platform Dead end, bad strategy…

  8. GUI API-s • Why WPF  most of the framework is surely re-useable • The user interface is described using XAML, and not C# • XAML-based styles and templates ( WinUI XAML, good) • XAML-independent Business Logic ( MVVM+data binding, very good) • The WPF turned out to be a mature and useable UI technology • Problem: NOT platform-independent (mobile phones? Web?) • Windows Formsis almost fully useable in Linux systems (Mono-Project) • „At this point, no group in the Mono project has plans to implement WPF APIs”

  9. GUI API-s: platform-independent • XAML, C# • Telerik UI • Avalonia UI • Xamarin.Forms (2016: Microsoft acquiresXamarin!) • ETO.Forms • Mobile cross-platform • Flutter (DEC/2018) • Cordova • Phonegap • Ionic • Web-based • WebAssembly • Blazor • JavaScript • ElectronUI • ReactNative

  10. .NET CORE and UI? • .NET CORE: platform-independent and standardized, after the base classes/EF/ASP, we waited for the platform-independent UI that can be used EVERYWHERE (desktop, mobile, web) • MAY/2018, MS BUILDconference • https://www.i-programmer.info/news/89-net/11807-net-core-3-gets-a-gui.html • https://blogs.msdn.microsoft.com/dotnet/2018/05/07/net-core-3-and-support-for-windows-desktop-applications/ • DEC/2018, MS CONNECT conference • https://blogs.windows.com/buildingapps/2018/12/04/announcing-open-source-of-wpf-windows-forms-and-winui-at-microsoft-connect-2018/ • „NET Core 3.0 Preview 1 adds support for building client apps using Windows Presentation Foundation (WPF), Windows Forms, and XAML Islands.”  W H Y ???????????????????????? • „WPF, Windows Forms, and Windows UI XAML Library (WinUI) are now open source, so you can create experiences with the freedom you want.”  WPF will be “some time later” platform-independent? https://github.com/dotnet/winforms , this is not ready! „designer is not yet available and will be part of VS 2019”

  11. WPF Hello World • Designer + XAML + XAML.CS

  12. Accessing controls • In XAML, you can specify names for the controls (in VS2015, this is automatic) • x:Name=”” or Name=”” • Same, except AutomationProperties.NameVS x:Name • We will use x:Name, this allows us to access the control via a data field of the window class • IN THE FIRST THREE WEEKS, THEN VIEWMODEL IS OBLIGATORY! • Name-based access is not the best • Used to be everyday scenario in Windows Forms • The logic should not know where the input is coming from (TextBox.Text on the right side, or Slider.Value on the bottom?) • The logic should not know where the output is going (Label.Content on the left, or a diagram, or a dialog?) • Solution: let’s use the MVVM design pattern

  13. MVVM– Connection DATABINDING Connect the control’s property with a property of the VM: <TextBoxText=“{Binding Path=Income}” ... /> • Sourceobject DataContext One specific VM instance(unique source is possible: other control, template, …) • Sourceproperty Income  VM.Income (publicproperty) • Dest.object TextBox (Dependency object) • Dest.property TextBox.Text(Dependency property) • Mode (OneWay, TwoWay, OneWayToSource, OneTime) • Update source (Explicit, PropertyChanged, LostFocus) • Converter (If we the source/destproperty have different types) View(XAML) View-Model Model (BL)

  14. MVVM–Automaticsynchronization • We query the VM once when first displaying the window. And later? The window will not know when the VM changes… • The VM must implementtheINotifyPropertyChangedinterface, thatrequiresa PropertyChangedevent • TheView (the framework!) will subscribe to this event • We will raise this event when a property changes inside the VM • Via the data binding, the framework knows where the modified property is bound to  automatic getter call  the connected UI properties will refresh 0. GET 3. GET View(XAML) View-Model 1. Modification(from anywhere) 2. EVENT

  15. MVVM– Data comes from “somewhere” DATABINDING • In XAML we connect the control’s properties with VM properties, the VM’s getter/setter calls are automatic • VM can be created from C# or XAML code, we will use the latter: <Window.Resources> <local:ViewModel x:Key="VM" /> </Window.Resources> ... <GridDataContext="{StaticResource VM}"> View(XAML) View-Model Model (BL)

  16. „False” MVVM: logic in the xaml.cs DATABINDING View(XAML) View-Model xaml.cs(BL?) READ VM WRITE VM UI EVENT • VM creation inthe xaml.cs (not recommended) ViewModelVM = newViewModel(); this.DataContext = VM; • Access the VM created in the XAML ViewModelVM = FindResource("VM") asViewModel; • Then perform operation in the event handler (xaml.cs) VM.Result= VM.Income * VM.TaxPct / 100 - VM.Prepaid; No names – The logic knows nothing about the UI!

  17. MVVM usage COMMAND + PARAMS DATABINDING View(XAML + xaml.cs) View-Model Model (BL) EVENT/MSG/RESULT • Aim: the logic knows nothing about the controls, but the layering should be appropriate too (every layer must only communicate with the layer below, and use events to send messages upwards) • In the prev. slide, this is not true: UI EVENT, READ VM, WRITE VM • Also, the same logic can be used across multiple Uis, so the logic should NOT know anything about the VM • The VM also forwards parameterizableinteractions (Commands) towards the logic, the logic uses result/event/message to signal the completion of the operation

  18. Full MVVM = DecoupledComponents COMMAND + PARAMS DATABINDING • The viewonly knows about the VM: UI properties are connected with the VM, and they are refreshed according to the settings • The view events are also connected using data binding to the VM properties with the type ICommand. (The xaml.csis almost empty, it can only handle strictly view-only events) • The VM knows which Command should execute which logic methods, and using what parameters. One VM can use multiple business logic components, in a single/multithreaded way • The logic knows nothing about the VM: the same logic (and other layers) can be used for GUI and non-GUI applications! View(XAML + xaml.cs) View-Model Model (BL) EVENT/MSG/RESULT

  19. Teaching aims • Getting to know design patterns (lecture) • Layered application development, MVVM • OOP best practices (DRY, SOLID, DDD) • „Gang Of Four” design patterns • Martin Fowler’s Enterprise Patterns • UML modelling(lecture, project) • Tools • Diagrams • GUI application development (practice) • Working with the WPF framework • Following the MVVM design pattern (sometimes „false” MVVM) • Using the MVVM Lightframework and data binding • Creating an application capable of storing any data • Planning and developing a complex application (project)

  20. Schedule (lecture)

  21. Schedule (practice)

  22. Expectations • For the lecture: theory test, practice test, project work • Exam: oral exam from the lecture materials • Final grade = ROUND((ZH1 + ZH2 + exam)/3) • Project work: usage and systemization of the programming knowledge you have obtained so far, by developing a bigger task •  Simple 2D platform/action/puzzle game •  UML modelling, testing, display, presentation (video!) • YES, we know, WPF is not used for game development (typically due to performance issues: MVVM can be slow due to the event pipeline, and the UI itself is not fast enough either) • However, this is a nice-looking and (hopefully)interesting way to demonstrate the practical development knowledge you have • Teams of two, but it is doable alone (in special cases!)

  23. IGameModel, IGameLogic? • Principle: the game state can be described using a GameModel instance, this instance will be modified by the GameLogic, and the same model instance is shown using a FrameworkElement in WPF • IGameModel: describes the properties of the model • IGameLogic: describes the actions that will modify the model. These actions can be automatically called (timed) calls and methods called after a user interaction (keyboard, mouse) • Task of the WPF control: call the automatic actions, and based on user input, call the manual actions as well • The action modifies the model, then the new model contents can be used to re-display the game • Pl. Tetris: GameModel = the fixed game area (2D array), the currently falling shape, the next shape, speed, points… GameLogic = MoveLeft(), MoveRight(), Rotate(), DropDown(), OneTick()

  24. Project Work • We expect games that is the level of 2D games from 10-20 years ago (tetris, breakout/arkanoid, card games, boardgames, atarigames, mobile games, …) • From every group, we will select the best 1 or 2,these will participate in a competition instant/better final grade • Images from previous competitions: at the prog4 website • Project members • Connecting points defined with interfaces: IGameLogic, IGameModel, IRepository + DependencyInjection • Member#1: interfaces + GameLogic + LogicTests • Member#2: GameModel + Repository below the logic (save, load, highscores: db or XML) + WPF GameControl • Single-member project is only allowed in case of an odd group count OR the failure of a project member • In this case, we don’t want LogicTestsand Repository

  25. Schedule (project work) • The information required for the UML diagrams will be explainedonlyon the lectures!

  26. Examples

  27. Examples

  28. Ex.

  29. Examples

  30. Examples

  31. Examples

  32. Rules • Same way, using GIT/Bitbucket • Valid GITSTATS needed: Stylecop, Doxygen, minimum 10 validtests (no mockedGameModel, but yes formockedrepository) • Multiplebranches! • 4-6 minute-long gameplay video is expected, you will do your presentation using the video (https://obsproject.com/download) • Game rules, gameplay • What are we the proudest of(difficulty/code/functionality) • After the gameplay, you can include code screenshots • PDF Documentation • EXACTLY 5 LINES: short description, in English • Specification (GDD) • Diagrams, interfaces, classes • Screenshots

  33. Thankyouforyourattention! GraphicalInterface API-s, WPF MVVM, Data Binding Semesterexpectations Mid-Semester Project http://users.nik.uni-obuda.hu/prog4/

More Related