Software engineering and GUI design NIX SG 1

  • Slides: 46
Download presentation
Software engineering and GUI design (NIX SG 1 EBNE) Semester expectations Mid-Semester Project Graphical

Software engineering and GUI design (NIX SG 1 EBNE) Semester expectations Mid-Semester Project Graphical Interface API-s, WPF MVVM, Data Binding http: //users. nik. uni-obuda. hu/prog 4/ 1

Teaching aims • Getting to know design patterns (lecture) – Layered application development, MVVM

Teaching aims • Getting to know design patterns (lecture) – Layered application development, MVVM vs MVC – 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 ) – Getting to know the WPF and ASP. NET frameworks – (Smaller emphasis on framework-specific things) – Following the MVVM+MVC design patterns – Using XAML and Razor UI technologies – Create applications capable of data modifications (CRUD) • Planning and developing a complex game (project) 2

Schedule (lecture) 1 Expectations, UI history, MVVM/WPF intro 2 Software Management: Waterfall / V

Schedule (lecture) 1 Expectations, UI history, MVVM/WPF intro 2 Software Management: Waterfall / V / XP / Scrum / Kanban 3 Git development/branching models 4 UML 1 (uml tool + use case + wireframe) 5 UML 2 (package/component, state, activity, sequence, class) 6 Go. F 1. Creational (+ Io. C / DI methods, antipatterns) 7 Go. F 2. Behavioral 8 MVC/ASP intro 9 Go. F 3. Behavioral/Structural 10 Go. F 4. Structural 11 Other patterns (Fowler/DDD + CQRS) 12 Microservices 13 Consultation 3

Schedule (practice) 1 MVVM: WPF basics 2 MVVM: Data binding basics 3 MVVM: Data

Schedule (practice) 1 MVVM: WPF basics 2 MVVM: Data binding basics 3 MVVM: Data binding with state notifications , Item. Template 4 MVVM: Data binding with Commands (separating business logic) 5 MVVM: Messenger/Io. C, Layered WPF CRUD HW 1 6 Game: Dispatcher. Timer + Custom rendering (Pong) 7 Game: Practice exercise (Laby) 8 Game: Practice exercise (Flappy Bird) 9 MVC: Basic structure , Razor 10 MVC: Forms, Layered Web CRUD HW 2 11 MVC: Web. API, API+WPF CRUD HW 3 12 Consultation, Project defense 13 Consultation, Project defense

Expectations • For the signature : 3 x Home. Works (HF) , Project Work

Expectations • For the signature : 3 x Home. Works (HF) , Project Work (FF) • Prog 4 HF 1: Prog 3 FF + WPF CRUD (Mar. 15. 23: 55) Prog 4 HF 2: Prog 3 FF + MVC CRUD (May. 03. 23: 55) Prog 4 HF 3: Prog 3 FF + API + WPF CRUD (May. 15. 23: 55) Prog 4 HF git repo (rename the current) + git diff + 2 minutes video • 1 x HF can be re-uploaded if all else is OK • Signature retake: All HF+FF must be OK WPF/ASP practice exercise for all participants • Exam: oral exam from the lecture materials Final grade = exam + 1/3 FF 5

Project Work Expectations • Milestone deadlines in prog 4_game_requirements_en. pdf „Last Commit” Deadline: May.

Project Work Expectations • Milestone deadlines in prog 4_game_requirements_en. pdf „Last Commit” Deadline: May. 08. 23: 55 • Project work: usage and systemization of the programming knowledge you have obtained so far, by developing a bigger task – Simple 2 D 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 WPF 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 (ONLY in special cases!) 6

IGame. Model, IGame. Logic? • Principle: the game state can be described using a

IGame. Model, IGame. Logic? • Principle: the game state can be described using a Game. Model instance, this instance will be modified by the Game. Logic, and the same model instance is shown using a Game. Control in WPF – IGame. Model: describes the properties of the model – IGame. Logic: 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 – Eg. Tetris: Game. Model = the fixed game area (2 D array), the currently falling shape, the next shape, speed, points… Game. Logic = Move. Left(), Move. Right(), Rotate(), Drop. Down(), One. Tick() 7

Project Work • We expect games that is the level of 2 D games

Project Work • We expect games that is the level of 2 D games from 10 -20 years ago (tetris, breakout/arkanoid, card games , board games, atari games, mobile games, …) – From every group, we will select the best 1 or 2, these will participate in a competition instant/better final grade – Videos from previous competitions: at the prog 4 website • Project members – Connecting points defined with interfaces: IGame. Logic, IGame. Model, IRepository + Dependency Injection – Member#1: interfaces + Game. Logic + Logic. Tests – Member#2: Game. Model + Repository below the logic (save, load, highscores: db or XML) + WPF Game. Control – 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 Logic. Tests and Repository 8

FF Rules • Same way, using GIT/Bitbucket – Gitstats = true needed – 10

FF Rules • Same way, using GIT/Bitbucket – Gitstats = true needed – 10 tests (with mocked repository) – Two devs, multiple git branches (master+develop at least)! • Minimum 5 minute-long gameplay video is expected – Game rules, gameplay – What are we the proudest of (difficulty/code/functionality) – After the gameplay, you can include code screenshots • 4 x PDF – Topic, Specification, Plan/Diagrams, Game PDF • Revisit prog_tools_en. pdf + prog 4_game_requirements_en. pdf – Dotnet 5 (+ vs 2019) – Net. Analyzers instead of Fx. Cop • Display-framework: OK; Game framework: NOT OK! 9

Schedule (project work) 1 Manual Teams 2 Automatic Teams 3 Topic (Vague „concept art”

Schedule (project work) 1 Manual Teams 2 Automatic Teams 3 Topic (Vague „concept art” + rules) 4 5 Specification (Roles + Game Design Document, EXACT rules) 6 Diagrams / Planning (Use Case, Activity, Component, Sequence 7 Diagram + Interfaces (Model, Logic, Repository)) 8 9 „Alfa”: Repository, Game. Model + Game. Logic/Tests 10 11 „Beta”: Game. Control + Game. Logic/Tests 12 13 Code Freeze + minimum 5 minute-long Video + Gitstats true • The information required for the UML diagrams will be explained only on the lectures ! 10

Examples 11

Examples 11

Examples 12

Examples 12

Ex. 13

Ex. 13

Examples 14

Examples 14

Examples 15

Examples 15

Examples 16

Examples 16

Graphical Interface API-s • We don’t create Graphical User Interfaces (GUIs) from zero –

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/pointerbased, highly customizable (often not too comfortable) programmer toolkit written in C • With Windows: User 32. dll and Comctl 32. dll – Unmanaged, platform-dependent (UI was always like this) – Theoretically language-independent, but really C++ -only 17

Win. API = HWND, Message pump … 18

Win. API = HWND, Message pump … 18

Graphical Interface API-s • Instead of this low-level access, we use externally provided API

Graphical Interface API-s • Instead of this low-level access, we use externally provided API to access pre-created building blocks/tools – API: Application Programming Interface – 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 platformdependent (e. g. WPF ~ lots of Win+Direct. X dependent code) • They constantly change – According to the current programming trends and UX expectations, nowadays a combo of OOP logic + UI descriptor – The aim is the most comfortable, most flexible, fastest, nativelike application development – HUGE class hierarchies that support all OS controls structured into a meaningful system 19

Graphical Interface API-s • Old (not recommended ) – Carbon (Mac OS X, dead)

Graphical Interface API-s • Old (not recommended ) – Carbon (Mac OS X, dead) – Cocoa/Objective. C (Mac OS X, deprecated? ) – Java AWT/Swing (Java, not developed) – MFC (Windows, C++, dead) – Windows Forms (Windows XP, . NET, ? ? not developed? ? ) – Metro (Windows RT) (Windows 8, C#, C++, dead) – Universal apps (UWP) (Windows 10, C#, dead Win. UI) • Newer (accessible and recommended ) – Cocoa/Swift (Mac OS X) – Java FX/Tornado. FX (Java/Kotlin) – Borland VCL (Windows/Pascal/C++, deprecated? ) – Wx. Widgets/FLTK (Linux/Unix, C++) – QT (Linux/Unix/Windows, C++) – GTK/GTK+ (Linux/Unix/Windows, C++) – WPF (Windows XP/7, C#, ? ? ? dieing ? ? ? ) 20

Windows Forms • From the first version of the. NET framework (2002) – Truly

Windows Forms • From the first version of the. NET framework (2002) – Truly feature-ready since. NET 2. 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 21

After Windows Forms… • Windows Forms is stable, but lots of compromises/problems – Only

After Windows Forms… • Windows Forms is 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 list controls (storage and look of list elements) – Lack of resolution-dependent layout WPF (Windows Presentation Foundation) Hard start, but nowadays it is a mature, industrially accepted technology Windows Metro, Universal Windows Platform Dead end, bad strategy… UWP Win. UI 22

Windows Forms WPF Still good (and will always be good!) for simple UI apps

Windows Forms WPF Still good (and will always be good!) for simple UI apps „Rich desktop apps” Relatively restricted, one-way solutions Customizable, almost everywhere External libraries are needed for almost all non-basic UI functionality Lots of various devices/approaches have built-in, unified access and unified logical approach Very mature, old, well-known (even bugs have workarounds) Used to be under development, bugs/features are sometimes hard to find Platform-independent (Mono) Platform dependent (Windows) Easy to learn Harder to learn ( rules, tricks) 23

GUI API-s: platform-independent • XAML, C# – Telerik UI – Avalonia UI – Xamarin.

GUI API-s: platform-independent • XAML, C# – Telerik UI – Avalonia UI – Xamarin. Forms (2016: Microsoft, 2020: renamed to MAUI) – ETO. Forms – Uno. Platform • Mobile cross-platform (Web/JS-centered? ? ? ) – Flutter (DEC/2018) – Cordova, Phonegap – Ionic (Angular) – Electron. UI – React Native • Web-based – Web. Assembly – C# Blazor ( !!! ) 24

. NET CORE and UI? • . NET CORE: platform-independent, standardized; after the base

. NET CORE and UI? • . NET CORE: platform-independent, standardized; after the base classes/EF/ASP we all waited for a platform-independent UI framework usable EVERYWHERE (desktop, mobil e, web) • WPF is not the answer: MS build/connect, may/dec 2018 – „NET Core 3. 0 Preview 1 adds support for building client apps using Windows Presentation Foundation (WPF), Windows Forms, and XAML Islands. ” – „WPF, Windows Forms, and Windows UI XAML Library (Win. UI) are now open source” – UI designers in VS: 16. 5 Preview 1 -. NET CORE 3. 1: nov/dec 2019 • Platform-independent WPF probably never? – https: //github. com/dotnet/wpf/issues/48 – „It's definitely not in the current plan” – „We also do not intend to accept contributions that provide cross-platform implementations for Windows Forms or WPF” – „richlander closed this on Dec 4, 2018” – „Its closed because its not important to MS. Win. UI 3. 0 if anything will be more natively portable” • Platform-independent UI: BLAZOR and MAUI

Blazor – Now 26

Blazor – Now 26

Blazor – The Future: razor everywhere! 27

Blazor – The Future: razor everywhere! 27

GUI API-s • Why WPF/MVVM most of the framework is surely reuseable – The

GUI API-s • Why WPF/MVVM most of the framework is surely reuseable – The user interface is described using XAML, and not C# – XAML-based styles and templates ( Win. UI XAML, good) – XAML-independent Business Logic ( MVVM+data binding, very good) – WPF turned out to be a mature and useable UI technology – Problem: NOT platform-independent (mobile phones? Web? ) • Why ASP/MVC guaranteed to be a useful skill – Fully widespread, mature technology and approach – And it will not change in the future (Web. API / REST) – With the blazor / pwa line, its importance will only grow 28

2 9 Typical (classic) layers

2 9 Typical (classic) layers

3 0 Architectural patterns We talk only about these • Model-View-Controller : Classic Web

3 0 Architectural patterns We talk only about these • Model-View-Controller : Classic Web layers • Model-View. Model: „Classic” UI layers • MVVMC v 1/v 2 (combinations of the above) There are MANY alternatives • MVVMC v 3 (with Coordinator: Swift/i. OS) • Model-View-Presenter: Silverlight, Android (Activity/Fragment) • Model-View-Intent / Redux: React UI • Model-View-Update: similar to Redux „next-gen” UI (Flutter, MAUI) https: //github. com/dotnet/maui/issues/118 https: //dev. to/adammc 331/mvwtf-demystifying-architecture-patterns-ap 1 https: //thomasbandt. com/model-view-update https: //steemit. com/utopian-io/@ tensor/using-the-elm-architecture-or-the-mvu-pattern-with-dartea-inside-of-dart-s-flutter-

UI layers MV* layering

UI layers MV* layering

MVVM • Typically used in modern GUI frameworks (WPF, UWP) – User input reaches

MVVM • Typically used in modern GUI frameworks (WPF, UWP) – User input reaches the VM via events/commands from the view’s controls, then it’s relayed to the Model – Data binding between the view and the viewmodel – The model updates the vm via events. Viewmodel updates the view via events – Direct data manipulation is not suggested (bi-directional dependency is BAD) • Business Logic = Model (Model = Business Logic Model)

MVC • Typically used in : Web frameworks (ASP. NET MVC (C#), Spring (Java),

MVC • Typically used in : Web frameworks (ASP. NET MVC (C#), Spring (Java), Symfony (PHP)) – The user sends requests to the controller (via browser requests) – The controller selects a view, fills the model with data (similar to VM, validation instead of events) – The view uses the model’s data – The controller returns the view (or combination of views) to the browser • • Business Logic in the / behind the Controller Model = Data bag (filled with data required for the view) Extra layers behind the controller! Same with a REST call, the reply is a JSON instead of a view (HTML)

MVVMC v 1 • Serverside MVC , where we split the View layer into

MVVMC v 1 • Serverside MVC , where we split the View layer into a proper MVVM OR Clientside MVVM, where the Model (logic) layer is the serverside Data. Model-Controller pair • Used in: modern (Angular/Vue. js) web apps (React: not MVVM… MVC+Flux pattern = Redux) • Uses data binding and events just like with pure MVVM

WPF Hello World • Designer + XAML. CS 35

WPF Hello World • Designer + XAML. CS 35

Accessing controls • In XAML, you can specify names for the controls (in VS

Accessing controls • In XAML, you can specify names for the controls (in VS 2015, this is automatic ) – x: Name=”” or Name=”” – Same, except Automation. Properties. Name VS 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 WEEK, 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 (Text. Box. 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 36

MVVM philosophy • View. Model class: we map the data that can be displayed

MVVM philosophy • View. Model class: we map the data that can be displayed and the data that can be entered into class properties • Start as: – 1 public property in the VM class 1 public property in some control – 1 displayed data = 1 public property in the VM class – 1 requested data = 1 public property in the VM class – The View/VM properties usually have the same types • We can use 1: N mapping and different types by adding converter classes • The VM can be extended with „ Command” typed properties to handle the user interactions as well • AIM: The logic should know NOTHING about the controls we use !

MVVM – Connection View (XAML) DATA BINDING View. Model (BL) Connect the control’s property

MVVM – Connection View (XAML) DATA BINDING View. Model (BL) Connect the control’s property with a property of the VM : <Text. Box Text=“{Binding Path=Income}”. . . /> 1. Source object Data. Context One specific VM instance (unique source is possible : other control, template , …) 2. Source property Income VM. Income (public property) 3. Dest. object Text. Box (Dependency object) 4. Dest. property Text. Box. Text (Dependency property) 5. Mode (One. Way, Two. Way, One. Way. To. Source, One. Time) 6. Update source (Explicit, Property. Changed, Lost. Focus) 7. Converter (If we the source/dest property have different types) 38

MVVM – Automatic synchronization View (XAML) 0. GET 3. 2. EVENT View. Model 1.

MVVM – Automatic synchronization View (XAML) 0. GET 3. 2. EVENT View. Model 1. Modification (from anywhere) • We query the VM once when first displaying the window. And later? The window will not know when the VM changes… • The VM must implement the INotify. Property. Changed interface , that requires a Property. Changed event • The View (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 39

MVVM – Create VM View (XAML) DATA BINDING View. Model (BL) • In XAML

MVVM – Create VM View (XAML) DATA BINDING View. Model (BL) • 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 prefer the latter • Important philosophy: 1 XAML node = create instance / set property <Window. Data. Context > <local : View. Model /> </Window. Data. Context > 40

MVVM – Create VM View (XAML) DATA BINDING View. Model (BL) • In XAML

MVVM – Create VM View (XAML) DATA BINDING View. Model (BL) • In XAML we connect the control’s properties with VM properties, the VM’s getter/setter calls are automatic • Create the VM as resource <Window. Resources > <local : View. Model x: Key="VM" /> </Window. Resources >. . . <Grid Data. Context ="{Static. Resource VM}"> 41

MVVM – Create VM View (XAML) DATA BINDING View. Model (BL) • In XAML

MVVM – Create VM View (XAML) DATA BINDING View. Model (BL) • In XAML we connect the control’s properties with VM properties, the VM’s getter/setter calls are automatic • Create the VM from xaml. cs (not preferred, loses autocomplete and XAML VM support) View. Model VM = new View. Model (); this. Data. Context = VM; 42

„False” MVVM: logic in the xaml. cs View (XAML) DATA BINDING View. Model READ

„False” MVVM: logic in the xaml. cs View (XAML) DATA BINDING View. Model READ VM WRITE VM xaml. cs (BL? ) UI EVENT • Access VM created in XAML View. Model VM = Find. Resource( "VM") as View. Model ; View. Model VM = this. Data. Context as View. Model ; • Then perform operation in the event handler (xaml. cs) VM. Result = VM. Income * VM. Tax. Pct / 100 - VM. Prepaid ; NO NAMES – THE LOGIC KNOWS NOTHING ABOUT THE UI! 43

MVVM usage View (XAML + xaml. cs) DATA BINDING View. Model COMMAND + PARAMS

MVVM usage View (XAML + xaml. cs) DATA BINDING View. Model COMMAND + PARAMS EVENT/ MSG/RESULT Model (BL) • 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 parameterizable interactions (Commands) towards the logic, the logic uses result/event/message to signal 44

Full MVVM View (XAML + xaml. cs) = Decoupled Components DATA BINDING View. Model

Full MVVM View (XAML + xaml. cs) = Decoupled Components DATA BINDING View. Model COMMAND + PARAMS EVENT/ MSG/RESULT Model (BL) • The view only 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. cs is 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! 45

Thank you for your attention! Semester expectations Mid-Semester Project Graphical Interface API-s, WPF MVVM,

Thank you for your attention! Semester expectations Mid-Semester Project Graphical Interface API-s, WPF MVVM, Data Binding http: //users. nik. uni-obuda. hu/prog 4/ 46