Porovnání uživatelského rozhraní řízeného událostmi s uživatelským rozhraním vázaném na data

  • 6 min

Uživatelské rozhraní řízené událostmi je navržené kolem událostí, které ovládací prvek zveřejňuje. Tyto události můžou být přidružené k kódu obslužné rutiny události, který se vyvolá při aktivaci události. Řekněme například, že máte tlačítko, které po kliknutí provede dlouhotrvající operaci. Obslužná rutina události přiřazená k Clicked události může spustit operaci a pak nastavit vlastnost tlačítka IsEnabled na false, aby se tlačítko při spuštění operace znovu kliklo.

Uživatelské rozhraní vázané na data používá datové vazby k prezentaci a interakci s daty. Vlastnosti ovládacích prvků jsou svázané s vlastnostmi datového objektu a tyto vazby mohou detekovat změny ve vlastnostech. V předchozím příkladu zvažte tlačítko, které provádí dlouhotrvající operaci. Místo zakázání tlačítka v kódu na pozadí IsEnabled je vlastnost vázána na vlastnost datového objektu IsBusy . Pokaždé, když se datový objekt změní na zaneprázdněný, stav povoleného tlačítka se automaticky změní tak, aby odpovídal.

Výhody a nevýhody použití událostí a kódu za sebou

Použití obslužné rutiny události ovládacího prvku s kódem za kódem je rychlý a pohodlný způsob návrhu logiky aplikace pro vaše uživatelské rozhraní. Kód slouží k volání služeb pro získání dat, provádění operací s těmito daty a interakci s ovládacími prvky na stránce. Tento kód slouží k zachování synchronizace uživatelského rozhraní a dat.

Představte si příklad aplikace služby Weather Service. Následující fragment XAML obsahuje jednoduché tlačítko uživatelského rozhraní, které uživatel vybere, aby získal nejnovější data a aktualizoval uživatelské rozhraní vlhkostí.

<VerticalStackLayout Margin="10">
    <HorizontalStackLayout Spacing="20">
        <Label Text="Postal Code:" VerticalOptions="Center" />
        <Entry x:Name="PostalCode" WidthRequest="100" />
        <Button x:Name="RefreshWeatherButton" Text="Refresh" WidthRequest="200" Clicked="RefreshWeatherButton_Clicked" />
    </HorizontalStackLayout>
    <Label x:Name="Humidity" Text="Humidity: ?" />
</VerticalStackLayout>

Screenshot of a .NET MAUI app that has an entry control for a postal code, a button with the text refresh. Under those two controls is a label that represents the humidity.

V tomto příkladu jsou tři pojmenované ovládací prvky:

  • Entry control named PostalCode.
  • Button control named RefreshWeatherButton.
  • Label control named Humidity.

Má RefreshWeatherButton obslužnou rutinu události deklarovanou pro Clicked událost. Po kliknutí na tlačítko obslužná rutina události odešle dotaz na službu počasí na nejnovější předpověď počasí, pomocí dat zadaných v ovládacím PostalCode prvku pro zadávání a nastaví Humidity text popisku na aktuální vlhkost.

private void RefreshWeatherButton_Clicked(object sender, EventArgs e)
{
    WeatherService.Location = PostalCode.Text;
    WeatherService.Refresh();
    Humidity.Text = $"Humidity: {WeatherService.Humidity}";
}

V této obslužné rutině události jsou tři ovládací prvky úzce svázané s daty prostřednictvím kódu.

Tento návrh funguje skvěle pro malé uživatelské rozhraní, ale jakmile se uživatelské rozhraní stane složitým, může být obtížné udržovat úzce propojený kód za sebou. Pokud ovládací prvek odstraníte nebo změníte, musíte vyčistit veškerý kód pomocí těchto ovládacích prvků uživatelského rozhraní, které můžou zahrnovat obslužnou rutinu události. Pokud se rozhodnete přepracovat uživatelské rozhraní, budete mít také spoustu kódu, který se má refaktorovat. A když se backingová datová struktura změní, musíte se ponořit do kódu každého uživatelského rozhraní, abyste zůstali synchronizovaní.

Datová vazba pomáhá

Datové vazby se dají implementovat v XAML nebo kódu, ale v XAML jsou mnohem častější, když pomáhají zmenšit velikost souboru kódu. Nahrazením procedurálního kódu v obslužných rutinách událostí deklarativním kódem nebo kódem je aplikace zjednodušená a vysvětlená. Vzhledem k tomu, že vazby nevyžadují kód za kódem, můžete snadno vytvořit, změnit nebo přepracovat uživatelské rozhraní tak, aby odpovídalo způsobu prezentace dat.

Podívejme se na stejný příklad jako v předchozí části, ale aktualizujme ho tak, aby používala datovou vazbu:

<VerticalStackLayout Margin="10">
    <HorizontalStackLayout Spacing="20">
        <Label Text="Postal Code:" VerticalOptions="Center" />
        <Entry Text="{Binding Location, Mode=OneWayToSource}" WidthRequest="100" />
        <Button Text="Refresh" Command="{Binding RefreshWeather}" WidthRequest="200" />
    </HorizontalStackLayout>
    <Label Text="{Binding Humidity}" />
</VerticalStackLayout>

Můžete zjistit vlastnosti vázané na data, používají syntaxi {Binding ...} rozšíření XAML pro hodnotu vlastnosti. Nedělejte si starosti s konkrétními informacemi, které jsou popsané dále v tomto modulu.

Stejné tři ovládací prvky jsou deklarovány v xaml, ale žádné z nich nejsou pojmenovány, protože název není povinný:

  • Entry Ovládací prvek:

    Vlastnost tohoto ovládacího prvku Text je vázána na vlastnost s názvem Location.

  • Button Ovládací prvek:

    Vlastnost tlačítka Command je vázána na vlastnost s názvem RefreshWeather. Command je vlastnost tlačítka, která vyvolá kód při stisknutí tlačítka. Jedná se o alternativu Clicked k události, která se používá v datové vazbě.

  • Label Ovládací prvek:

    Tato Text vlastnost je vázána na vlastnost s názvem Humidity.

V tomto jednoduchém uživatelském rozhraní se eliminuje veškerý kód. Odebrání veškerého kódu není bodem datové vazby, i když je to obvykle možné. Kód má stále své místo. Kolik datových vazeb implementujete, je na vás.

Teď je uživatelské rozhraní volně svázané s datovým objektem. Proč je volně svázaný místo úzce propojených? Vzhledem k tomu, jak se vazby vyhodnocují. Každý ovládací prvek má BindingContext vlastnost. Pokud kontext není nastavený, použije se kontext nadřazeného ovládacího prvku a tak dále, dokud se nevyhodnotí kořen XAML. Při vyhodnocování vazeb je instance objektu kontextu kontrolována pro požadované vlastnosti, jako je vazba ovládacího prvku Text popisku na vlastnost kontextu Humidity . Pokud Humidity v kontextu neexistuje, nic se nestane.

Vzhledem k tomu, že je uživatelské rozhraní volně svázané, můžete uživatelské rozhraní přepracovat bez obav z porušení kódu. Funkce ale můžete přerušit. Můžete například odstranit tlačítko a aplikace se stále zkompiluje a spustí, ale nemáte způsob, jak aktualizovat počasí. Na druhou stranu můžete ovládací prvky a Button ovládací prvky nahradit Entry jedním SearchBar ovládacím prvku. Tento ovládací prvek umožňuje zadat text a vyvolat příkaz.

<SearchBar Text="{Binding Location, Mode=OneWayToSource}" SearchCommand="{Binding RefreshWeather}" />

Jak vidíte, používání datových vazeb v návrhu uživatelského rozhraní vám pomůže vyvíjet a měnit uživatelské rozhraní bez velké práce. Uživatelské rozhraní se synchronizuje s daty automaticky a logika aplikace je oddělená od uživatelského rozhraní.

Kontrola znalostí

1.

Který z následujících tvrzení popisuje, jak datová vazba zlepšuje uživatelské rozhraní?

2.

V aplikaci, která načte nejnovější počasí, je ovládací prvek popisku představující teplotu svázán s datovým objektem. Když uživatel stiskne tlačítko Získat počasí a aktivuje Clicked událost, co by kód obslužné rutiny události udělal za účelem aktualizace uživatelského rozhraní?

Kontrola odpovědí