Table of Contents

Techniky pro efektivní implementaci uživatelského rozhraní. Příprava uživatelského rozhraní pro testování s/bez uživatele.

B4B39IUR Webové stránky předmětu

1. Techniky pro efektivní implementaci uživatelského rozhraní

Implementace MVVM modelu

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.

Klíčové návrhové vzory použité v MVVM

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

Přizpůsobení UI komponent

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

Šablony (Templates)

Přizpůsobení komponent: UserControl vs CustomControl

Ukázky použití (XAML)

Tlačítko s obrázkem a textem: 

<Button HorizontalAlignment="Center" VerticalAlignment="Center">
  <StackPanel Orientation="Horizontal">
    <Image Source="icon.png" Height="32" Width="32"/>
    <TextBlock Text="Settings" VerticalAlignment="Center"/>
  </StackPanel>
</Button>

Styl se StaticResource: 

<Window.Resources>
      <Style x:Key="ButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="LightBlue"/>
        <Setter Property="FontWeight" Value="Bold"/>
      </Style>
  </Window.Resources>
<Button Style="{StaticResource ButtonStyle}" Content="Styled Button"/>

Trigger na `IsMouseOver`: 

<Style TargetType="Button">
  <Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
      <Setter Property="Background" Value="Yellow"/>
    </Trigger>
  </Style.Triggers>
</Style>

Custom seznam s `DataTemplate`: 

<ListBox>
  <ListBox.ItemTemplate>
    <DataTemplate>
      <StackPanel>
        <TextBlock Text="{Binding Name}"/>
        <TextBlock Text="{Binding Description}"/>
      </StackPanel>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

Použití `ContentTemplate` v tlačítku: 

<Button>
  <Button.ContentTemplate>
    <DataTemplate>
      <StackPanel Orientation="Horizontal">
        <Image Source="{Binding Image}" Width="16" Height="16"/>
        <TextBlock Text="{Binding Text}"/>
      </StackPanel>
    </DataTemplate>
  </Button.ContentTemplate>
</Button>

Skins a Themes

Validace uživatelského vstupu

Validace vstupu zajišťuje, že data zadaná uživatelem odpovídají očekávanému formátu, rozsahu či logickým podmínkám. WPF nabízí robustní validační mechanismy přímo integrované do systému data bindingu.

Metody validace

Zobrazení chyb

Principy použitelné validace

Ukázky použití

Validace pomocí výjimek 

<TextBox.Text>
  <Binding Path="Age">
    <Binding.ValidationRules>
    <ExceptionValidationRule />
  </Binding.ValidationRules>
</Binding>

Validace pomocí `IDataErrorInfo` 

<TextBox Text="{Binding Name, ValidatesOnDataErrors=True}" />

Vlastní validační pravidlo 

public class JpgValidationRule : ValidationRule {
  public override ValidationResult Validate(object value, CultureInfo cultureInfo) {
    string path = value as string;
      if (!path.EndsWith(".jpg"))
        return new ValidationResult(false, "Soubor musí být ve formátu JPG.");
    return new ValidationResult(true, null);
  }
}

Zobrazení chyby pomocí Triggeru 

<Style TargetType="TextBox">
  <Style.Triggers>
    <Trigger Property="Validation.HasError" Value="true">
      <Setter Property="ToolTip"
              Value="{Binding RelativeSource={RelativeSource Self},
                      Path=(Validation.Errors)[0].ErrorContent}" />
    </Trigger>
  </Style.Triggers>
</Style>

2. Příprava uživatelského rozhraní pro testování s/bez uživatele

Postupy pro důsledné oddělení částí systému

public void testLogin() throws Exception {
  selenium.open("/MyApp/");
  selenium.type("name=username", "tester");
  selenium.type("name=password", "1234");
  selenium.click("name=login");
  selenium.waitForPageToLoad("3000");
}

Příprava software pro uživatelské testování

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

Data mocking

Wizard-of-Oz metoda

Sběr dat z testování

Testování bez uživatele

Co testovat