B4B39IUR Webové stránky předmětu

• Techniky pro efektivní implementaci uživatelského rozhraní:
  1. Implementace MVVM modelu – pomocí návrhových vzorů (např. observer, event-delegate, publish-subscribe). Řešení vztahu View-ViewModel pomocí návrhového vzoru “Data Binding”.
  2. Přizpůsobení (customization) UI komponent – pomocí šablon (DataTemplate, ControlTemplate), stylů a triggerů. Vytváření tzv. User Control a Custom Control.
  3. Validace uživatelského vstupu – pomocí validačních pravidel a interfaců (Data source exception, data error interface), případně vlastní validační třídou. Prezentace chyb pomocí šablon a triggerů.
• Příprava uživatelského rozhraní pro testování s/bez uživatele:
  1. Postupy pro důsledné oddělení jednotlivých částí software – podle vzoru MVC/MVP/MVVM. Vytváření UI test skriptu (testovací kód, nahrávání interakce, GUI ripping).
  2. Příprava software pro uživatelské testování – data mocking, podpora metody Wizard-of-Oz, sběr dat z chování software a interakce s uživatelem.

Model–View–ViewModel (MVVM) je architektonický vzor navržený pro moderní GUI aplikace (zejména WPF, .NET MAUI, Xamarin). Jeho hlavní výhodou je důsledné oddělení prezentační logiky od vzhledu (UI), což usnadňuje údržbu, testování a opětovné použití kódu.

• Model – Obsahuje samotná data a logiku aplikace. Může zahrnovat přístup k databázi, validaci či výpočty. Je zcela nezávislý na UI.
• ViewModel – Představuje most mezi UI a Modelem. Obsahuje data upravená pro View, implementuje `INotifyPropertyChanged` pro upozornění na změny a definuje příkazy (`ICommand`) pro reakce na uživatelské akce.
• View – Zobrazuje data z ViewModelu pomocí bindingu, neobsahuje žádnou aplikační logiku. Může být definována v XAML, přičemž `DataContext` odkazuje na odpovídající ViewModel.
• 

MVVM vychází z předchozích vzorů, jako jsou MVC a MVP:

• MVC – Controller zpracovává vstup a mění stav Modelu; View ho pouze zobrazuje. Často dochází k prolínání zodpovědností mezi View a Controllerem.
  • 
• MVP – Presenter obsluhuje interakci s uživatelem a logiku, View je pasivní. Vhodné pro testovatelnost, ale tight-coupling může ztížit správu.
  • 
• MVVM – ViewModel je zcela oddělený od View. Spojení je dosaženo pomocí *data bindingu* a příkazů, což usnadňuje testování i vývoj.
  • 

• Observer Pattern
  • Definuje *jeden ku mnoha* závislost: když se subjekt (např. Model) změní, informuje všechny zaregistrované pozorovatele (např. ViewModel). Tento vzor pomáhá oddělit Model od View/ViewModelu, čímž se zvyšuje modularita. V C# se často realizuje pomocí `INotifyPropertyChanged`.
  • 

• Event–Delegate Mechanismus (C#)
  • Delegáty a eventy implementují observer pattern. `event` je seznam metod (delegátů), které jsou spuštěny při určité události (např. změna hodnoty).
  • `delegate` definuje typ metody pro zpracování události
  • `event` reprezentuje událost (např. kliknutí na tlačítko)
  • `EventHandler` a `PropertyChangedEventArgs` jsou běžně používané standardizované typy

• Publish–Subscribe Pattern
  • Zajišťuje volné provázání komponent: *publishers* posílají zprávy, *subscribers* se přihlásí k typům zpráv, které je zajímají. Obě strany o sobě navzájem neví. To usnadňuje rozšiřitelnost a škálovatelnost, i když složitost správy zpráv může být vyšší.
  • 

• Data Binding Pattern

Umožňuje synchronizaci dat mezi View a ViewModel. Implementuje se pomocí:

• XAML bindingu (`{Binding PropertyName}`)
• `INotifyPropertyChanged` (vlastnosti ve ViewModelu vyvolávají notifikace)
• `DataContext` – nastavuje výchozí zdroj dat pro binding v UI
• *
• 

• Command Pattern (`ICommand`)
  • Abstrahuje uživatelské akce do objektů – například kliknutí na tlačítko nespouští metodu přímo, ale přes `ICommand`.
  • `Execute()` definuje, co se má stát
  • `CanExecute()` určuje, zda je příkaz aktuálně povolen
  • Často se používá `RelayCommand` nebo `DelegateCommand` pro jednoduchou implementaci bez nutnosti psát nové třídy pro každou akci

• Styly a triggery:
  1. `Style` – kolekce setterů, separace vzhledu od logiky.
  2. `Trigger` – mění vlastnosti na základě stavu (např. `IsMouseOver`).
  3. `DataTrigger`, `EventTrigger` – specifické reakce na změny dat a události.
• Šablony:
  1. `DataTemplate` – vizualizace datových objektů (např. ListBox).
  2. `ControlTemplate` – změna vizuálního stromu komponenty.
  3. `ContentTemplate` – kombinace obrázků a textu v tlačítkách.
• User Control vs Custom Control:
  1. *User Control* – složení komponent, snadné, nelze stylovat.
  2. *Custom Control* – pokročilé přizpůsobení, stylování a šablonování.
• Ukázky použití (z XAML):
  1. Tlačítko s obrázkem a textem.
  2. Styl s `StaticResource`.
  3. Triggery pro zvýraznění při hoveru.

• Metody validace:
  1. `ExceptionValidationRule` – validace přes výjimky.
  2. `IDataErrorInfo` / `INotifyDataErrorInfo` – chybová zpráva per vlastnost.
  3. Custom ValidationRule – dědění a vlastní logika validace.
• Zobrazení chyb:
  1. `ErrorTemplate` – šablona zobrazení chybového stavu.
  2. `Style.Triggers` na `Validation.HasError` – tooltipy, změna barvy rámečku.
• Principy:
  1. Validace má být srozumitelná, neinvazivní, integrovaná do UI.

• Architektury:
  1. MVC – klasické oddělení logiky, prezentace a dat. Uživatel interaguje i s View.
  2. MVP – Presenter zajišťuje komunikaci, View pasivní.
  3. MVVM – silný binding, ViewModel poskytuje logiku.
• Designové vzory pro interakci:
  1. Wizard, Breadcrumb, Carousel, Undo, Drag&Drop.
  2. Deklarativní popis UI (XAML, HTML) umožňuje lepší udržovatelnost.
• UI testovací skripty:
  1. Manuální – přesně dané kroky.
  2. Automatizované – Selenium, QTP.
  3. Model-based testing – generování scénářů na základě UI struktury.
  4. GUI ripping – automatické mapování komponent a jejich vlastností.

• Data mocking:
  1. Nahrazení reálných dat fiktivními daty.
  2. Simulace chybových stavů nebo absence backendu.
• Wizard-of-Oz:
  1. Simulace neexistující funkcionality člověkem.
  2. Umožňuje testovat např. hlasové ovládání bez jeho implementace.
• Sběr dat:
  1. Základní – videozáznamy, dotazníky, pozorování.
  2. Pokročilé – logy, eye-tracking, senzory, KLM model, Android Monkey.
• Testování bez uživatele:
  1. Heuristická evaluace – podle pravidel (např. Nielsen).
  2. Kognitivní průchod – simulace mentálního modelu uživatele krok po kroku.
• Co testovat:
  1. Funkčnost, dostupnost komponent, dokončení úkolů, chybovost, čitelnost.