Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| statnice:bakalar:b4b39iur [2025/05/18 12:47] – [Implementace MVVM modelu] zapleka3 | statnice:bakalar:b4b39iur [2025/06/06 21:22] (current) – zapleka3 | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ==== Techniky pro efektivní implementaci uživatelského rozhraní. Příprava uživatelského rozhraní pro testování s/bez uživatele. ==== | + | ====== Techniky pro efektivní implementaci uživatelského rozhraní. Příprava uživatelského rozhraní pro testování s/bez uživatele. |
| [[https:// | [[https:// | ||
| Line 15: | Line 15: | ||
| ==== Implementace MVVM modelu ==== | ==== Implementace MVVM modelu ==== | ||
| - | MVVM (Model–View–ViewModel) | + | Model–View–ViewModel |
| - | * **Observer** – Design pattern, ve kterém subjekt oznamuje | + | * **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. |
| - | * **Event-Delegate** | + | * **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. |
| - | * **Publish-Subscribe** | + | * **View** – Zobrazuje data z ViewModelu pomocí bindingu, neobsahuje žádnou aplikační logiku. Může být definována |
| - | * **Data Binding** | + | * {{: |
| - | * **Příkazy | + | |
| + | === Klíčové návrhové vzory použité v MVVM === | ||
| + | |||
| + | * **Observer Pattern** | ||
| + | * Definuje *jeden ku mnoha* závislost: když se subjekt | ||
| + | * {{: | ||
| + | |||
| + | * **Event–Delegate | ||
| + | * Delegáty | ||
| + | * `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 | ||
| + | * Zajišťuje volné provázání | ||
| + | * {{: | ||
| + | |||
| + | * **Data Binding | ||
| + | | ||
| + | * XAML bindingu (`{Binding PropertyName}`) | ||
| + | * `INotifyPropertyChanged` | ||
| + | * `DataContext` – nastavuje výchozí zdroj dat pro binding v UI | ||
| + | * *{{: | ||
| + | * {{: | ||
| + | |||
| + | * **Command Pattern | ||
| + | * Abstrahuje uživatelské akce do objektů | ||
| + | * `Execute()` definuje, co se má stát | ||
| + | * `CanExecute()` určuje, zda je příkaz aktuálně povolen | ||
| + | * Často se používá `RelayCommand` nebo `DelegateCommand` | ||
| ==== Přizpůsobení UI komponent ==== | ==== Přizpůsobení UI komponent ==== | ||
| - | * **Styly a triggery**: | + | Přizpůsobení (customization) UI komponent umožňuje upravit vzhled i chování ovládacích prvků tak, aby odpovídaly požadavkům aplikace, designéra nebo platformy. Díky tomu lze dosáhnout konzistentního vizuálního stylu, přístupnosti i přívětivosti pro uživatele. V prostředí WPF nebo MAUI se přizpůsobení realizuje pomocí stylů, šablon, triggerů a dvou typů komponent: `UserControl` a `CustomControl`. |
| - | | + | |
| - | | + | === Styly a triggery |
| - | - `DataTrigger`, `EventTrigger` | + | |
| - | * **Šablony**: | + | * **Style** |
| - | | + | |
| - | | + | * Umožňuje oddělit vzhled |
| - | | + | |
| - | * **User Control vs Custom Control**: | + | |
| - | | + | * **Triggers** |
| - | | + | * Triggery umožňují změnit vlastnosti |
| - | | + | * Typy triggerů: |
| - | - Tlačítko s obrázkem a textem. | + | - `PropertyTrigger`: |
| - | | + | - `DataTrigger`: aktivuje se při změně vázaných dat (např. hodnota z ViewModelu). |
| - | | + | - `EventTrigger`: reaguje |
| + | * Když přestanou platit podmínky triggeru, | ||
| + | |||
| + | === Šablony (Templates) === | ||
| + | |||
| + | * **DataTemplate** | ||
| + | | ||
| + | | ||
| + | * Využívá se typicky pro seznamy (`ItemsControl`, `ListView`, `ComboBox`). | ||
| + | |||
| + | * **ControlTemplate** | ||
| + | * Umožňuje kompletně | ||
| + | * Nahrazuje celý strom komponenty | ||
| + | | ||
| + | |||
| + | * **ContentTemplate** | ||
| + | * Používá se u prvků jako `ContentControl` (např. `Button`), když chceme vnořit složitější obsah (např. obrázek + text). | ||
| + | * Kombinuje různé prvky (např. `Image`, `TextBlock`) | ||
| + | |||
| + | === Přizpůsobení komponent: UserControl vs CustomControl === | ||
| + | |||
| + | * **UserControl** | ||
| + | * Kombinuje více existujících ovládacích prvků do jednoho bloku. | ||
| + | | ||
| + | * Implementace je snadná (XAML + code-behind), ale omezená: | ||
| + | |||
| + | | ||
| + | * Dědí z existující komponenty (např. `Button`) nebo vytváří zcela novou. | ||
| + | * Umožňuje | ||
| + | * Používá se pro tvorbu opakovatelně použitelných, | ||
| + | | ||
| + | |||
| + | === Ukázky použití (XAML) | ||
| + | |||
| + | **Tlačítko s obrázkem a textem**: | ||
| + | < | ||
| + | ```xaml | ||
| + | <Button HorizontalAlignment=" | ||
| + | < | ||
| + | <Image Source=" | ||
| + | | ||
| + | </ | ||
| + | </ | ||
| + | ``` | ||
| + | </ | ||
| + | |||
| + | **Styl se StaticResource**: | ||
| + | < | ||
| + | ```xaml | ||
| + | < | ||
| + | <Style x: | ||
| + | <Setter Property=" | ||
| + | <Setter Property=" | ||
| + | </ | ||
| + | </ | ||
| + | <Button Style=" | ||
| + | ``` | ||
| + | </ | ||
| + | |||
| + | **Trigger na `IsMouseOver`**: | ||
| + | < | ||
| + | ```xaml | ||
| + | <Style TargetType=" | ||
| + | <Style.Triggers> | ||
| + | | ||
| + | <Setter Property=" | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | ``` | ||
| + | </ | ||
| + | |||
| + | **Custom seznam s `DataTemplate`**: | ||
| + | < | ||
| + | ```xaml | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | ``` | ||
| + | </ | ||
| + | |||
| + | **Použití `ContentTemplate` v tlačítku**: | ||
| + | < | ||
| + | ```xaml | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | <Image Source=" | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | ``` | ||
| + | </ | ||
| + | |||
| + | === Skins a Themes === | ||
| + | |||
| + | * **Skins** | ||
| + | * Kolekce stylů | ||
| + | * Používá `DynamicResource` a přepínání zdrojů ve `ResourceDictionary`. | ||
| + | |||
| + | * **Themes** | ||
| + | * Respektují systémové nastavení (např. dark/light mode). | ||
| + | * Používají se pro přístupnost, | ||
| ==== Validace uživatelského vstupu ==== | ==== Validace uživatelského vstupu ==== | ||
| - | | + | Validace vstupu zajišťuje, |
| - | | + | |
| - | | + | === Metody validace === |
| - | | + | |
| - | * **Zobrazení chyb**: | + | |
| - | | + | |
| - | | + | * Vhodné pro základní typové |
| - | * **Principy**: | + | |
| - | - Validace má být srozumitelná, | + | * **IDataErrorInfo / INotifyDataErrorInfo** |
| + | | ||
| + | * `IDataErrorInfo` | ||
| + | * `INotifyDataErrorInfo` | ||
| + | |||
| + | * **Custom ValidationRule** | ||
| + | * Vytvořením vlastní třídy, která | ||
| + | * Třída implementuje metodu `Validate`, která vrací `ValidationResult`, | ||
| + | * Umožňuje znovupoužití pravidla pro více polí nebo v různých částech aplikace. | ||
| + | |||
| + | === Zobrazení chyb === | ||
| + | |||
| + | * **ErrorTemplate** | ||
| + | | ||
| + | | ||
| + | |||
| + | * **Style.Triggers na `Validation.HasError`** | ||
| + | * Pomocí `Trigger` lze změnit vzhled komponenty při výskytu chyby – např. zobrazit tooltip s chybou, změnit barvu okraje nebo pozadí. | ||
| + | * Dynamická prezentace chybových hlášek: např. bindingem | ||
| + | |||
| + | === Principy použitelné validace === | ||
| + | |||
| + | * Validace má být **srozumitelná** – uživatel musí pochopit, co je špatně a jak to opravit. | ||
| + | * Má být **neinvazivní** – chyba by neměla přerušit práci, ale měla by být patrná a opravitelná. | ||
| + | * Validace by měla být **integrovaná do UI** – přímo u daného vstupu, nikoliv jako oddělené hlášení. | ||
| + | |||
| + | === Ukázky použití === | ||
| + | |||
| + | **Validace pomocí výjimek** | ||
| + | < | ||
| + | ```xaml | ||
| + | < | ||
| + | <Binding Path=" | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | ``` | ||
| + | </ | ||
| + | |||
| + | **Validace pomocí `IDataErrorInfo`** | ||
| + | < | ||
| + | ```xaml | ||
| + | <TextBox Text=" | ||
| + | ``` | ||
| + | </ | ||
| + | |||
| + | **Vlastní validační pravidlo** | ||
| + | < | ||
| + | ```xaml | ||
| + | public class JpgValidationRule : ValidationRule { | ||
| + | public override ValidationResult Validate(object value, CultureInfo cultureInfo) { | ||
| + | string path = value as string; | ||
| + | if (!path.EndsWith(" | ||
| + | return new ValidationResult(false, | ||
| + | return new ValidationResult(true, | ||
| + | } | ||
| + | } | ||
| + | ``` | ||
| + | </ | ||
| + | |||
| + | **Zobrazení chyby pomocí Triggeru** | ||
| + | < | ||
| + | ```xaml | ||
| + | <Style TargetType=" | ||
| + | < | ||
| + | <Trigger Property=" | ||
| + | <Setter Property=" | ||
| + | Value=" | ||
| + | Path=(Validation.Errors)[0].ErrorContent}" | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | ``` | ||
| + | </ | ||
| ===== 2. Příprava uživatelského rozhraní pro testování s/bez uživatele ===== | ===== 2. Příprava uživatelského rozhraní pro testování s/bez uživatele ===== | ||
| Line 58: | Line 274: | ||
| * **Architektury**: | * **Architektury**: | ||
| - | | + | |
| - | - **MVP** – Presenter zajišťuje komunikaci, View pasivní. | + | * {{: |
| - | - **MVVM** – silný binding, ViewModel poskytuje logiku. | + | * **MVP** – presenter obsluhuje interakci s uživatelem a logiku, View je pasivní, vhodné pro testovatelnost, |
| - | | + | * {{: |
| - | - Wizard, Breadcrumb, Carousel, Undo, Drag& | + | * **MVVM** – silný binding, ViewModel poskytuje logiku, ViewModel je zcela oddělený od View. Spojení je dosaženo pomocí |
| - | - Deklarativní popis UI (XAML, HTML) umožňuje | + | * {{: |
| * **UI testovací skripty**: | * **UI testovací skripty**: | ||
| - | | + | * **Testovací kód (UI Test Scripts)** – Skripty automatizují interakce uživatele s UI (např. kliknutí, vyplnění polí) a ověřují očekávané chování aplikace. Test je obvykle strukturován s identifikátorem, |
| - | | + | * Ukázka v Selenium: |
| - | | + | |
| - | | + | < |
| + | ```java | ||
| + | public void testLogin() throws Exception { | ||
| + | selenium.open("/ | ||
| + | selenium.type(" | ||
| + | selenium.type(" | ||
| + | selenium.click(" | ||
| + | selenium.waitForPageToLoad(" | ||
| + | } | ||
| + | ``` | ||
| + | </ | ||
| + | |||
| + | |||
| + | | ||
| + | |||
| + | * **Automatizované | ||
| + | * počet zobrazených obrazovek, | ||
| + | * snímky obrazovky (screenshots), | ||
| + | * provedené akce (click, input, scroll...), | ||
| + | * záznam výjimek a chyb, | ||
| + | * metriky jako doba odezvy nebo dostupnost komponent. | ||
| + | |||
| + | | ||
| + | |||
| + | * **Model-based testing** – Na základě | ||
| + | |||
| + | | ||
| + | * Např. operátor `File_Open(" | ||
| + | * Plánovací algoritmus vytvoří posloupnost interakcí, která ověří, že cesta od výchozího stavu k cíli je funkční. | ||
| + | |||
| + | * **Porovnání návrhu a implementace** – Pomocí nástrojů jako Diff Checker lze porovnat očekávaný návrh UI (např. prototyp z Figma) s implementovaným rozhraním a vyhodnotit rozdíly. Toto se využívá hlavně při regresech a kontrolách konzistence vzhledu. | ||
| ==== Příprava software pro uživatelské testování ==== | ==== Příprava software pro uživatelské testování ==== | ||
| - | * **Data mocking**: | + | Aby bylo možné efektivně provádět testování s uživateli (nebo bez nich), je potřeba připravit samotné prostředí – od simulace dat přes zachytávání interakcí až po nástroje pro pokročilou analýzu chování. |
| - | - Nahrazení reálných dat fiktivními | + | |
| - | - Simulace | + | === Data mocking |
| - | * **Wizard-of-Oz**: | + | |
| - | - Simulace neexistující funkcionality | + | * Data mocking nahrazuje reálná data fiktivními, čímž umožňuje testování v situacích, kdy ještě neexistuje backend, API nebo validní datové sady. |
| - | - Umožňuje testovat | + | * Lze využít k simulaci specifických scénářů – např. |
| - | * **Sběr dat**: | + | * Umožňuje testovat UI nezávisle na aktuálním stavu backendu (lo-fi i hi-fi prototypy). |
| - | | + | |
| - | | + | === Wizard-of-Oz |
| - | * **Testování bez uživatele**: | + | |
| - | | + | * Tato metoda spočívá v tom, že části systému, které ještě nejsou implementovány (např. hlasové rozpoznání), |
| - | | + | * Uživatel je často přesvědčen, |
| - | | + | * Použití |
| - | | + | * Umožňuje testovat i náročné technologie bez nutnosti jejich okamžité realizace. |
| + | |||
| + | === Sběr dat z testování === | ||
| + | |||
| + | * **Základní | ||
| + | * Videozáznam (1st-person, 3rd-person, screen recording) | ||
| + | | ||
| + | * Dotazníky před/po testování | ||
| + | * **Pokročilé | ||
| + | * **Logy** – záznam interakcí v systému (např. kliknutí, vstupy) | ||
| + | * **Eye-tracking** – sledování fixace očí, pozornosti uživatele | ||
| + | * **Senzory** – biometrie, prostředí | ||
| + | * **KLM model (Keystroke-Level Model)** – predikce doby interakce na základě základních operací (klik, psaní, mentální pauzy) | ||
| + | * **Android Monkey** – náhodné generování uživatelských akcí pro zátěžové testování | ||
| + | |||
| + | === Testování bez uživatele | ||
| + | |||
| + | | ||
| + | |||
| + | * **Heuristická evaluace**: | ||
| + | * Hodnocení použitelnosti | ||
| + | | ||
| + | |||
| + | * **Kognitivní průchod | ||
| + | * Metoda simulující mentální proces | ||
| + | * Krok po kroku ověřuje, zda je rozhraní srozumitelné a odpovídá cílům uživatele. | ||
| + | * Klíčové otázky: | ||
| + | | ||
| + | | ||
| + | | ||
| + | * Q3: Dostane uživatel srozumitelnou zpětnou vazbu? | ||
| + | |||
| + | === Co testovat === | ||
| + | |||
| + | * **Funkčnost** – fungují prvky správně, jak bylo navrženo? | ||
| + | * **Dostupnost | ||
| + | * **Dokončení úkolů** – lze úlohy dokončit s přiměřeným úsilím? | ||
| + | * **Chybovost** – kde může dojít ke zmatku nebo chybě? | ||
| + | * **Čitelnost | ||
| + | * **Použitelnost** – celková přívětivost, | ||
