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.

MVVM (Model–View–ViewModel) umožňuje snadnou správu UI pomocí oddělení zodpovědností: ViewModel zajišťuje logiku a stav aplikace, zatímco View zůstává co nejjednodušší.

• Observer – Design pattern, ve kterém subjekt oznamuje všem zaregistrovaným posluchačům (pozorovatelům) změnu stavu.
• Event-Delegate – Mechanismus v C# pro realizaci observer vzoru pomocí delegate a event handlerů.
• Publish-Subscribe – Nezávislá komunikace komponent pomocí zasílání zpráv přes zprostředkovatelský kanál.
• Data Binding – Umožňuje propojení View a ViewModelu tak, aby se změny v datech automaticky promítly do UI; využívá XAML syntaxi a `INotifyPropertyChanged`.
• Příkazy (`ICommand`) – Objekty, které definují logiku vykonávání akcí v UI (např. kliknutí na tlačítko) a podmínky pro jejich aktivaci.

• 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.