Wprowadzenie do interfejsu użytkownika i danych

  • 5 min

Tech logo.

Załóżmy, że pracujesz dla niestandardowej firmy projektanta odzieży i chcesz utworzyć aplikację, która pomaga klientom wybierać ulubione materiały lub kolory. Nazwa użytkownika, lista kolorów, które mogą wybrać, a wybrane ulubione kolory to wszystkie dane. Są to dane wprowadzane przez użytkownika, wybiera i przeglądane za pomocą różnych kontrolek wyświetlanych w interfejsie użytkownika: pola tekstowe, listy rozwijane, listy, przyciski itd. Wszystko to jest kontrolowane przez logikę aplikacji.

Większość aplikacji ma trzy główne składniki:

  • Interfejs użytkownika: etykiety, przyciski, pola tekstowe, suwaki, wykresy i wszystkie inne kontrolki, które przedstawiają użytkownikowi informacje. Obejmuje to również kontrolki, które umożliwiają użytkownikowi interakcję z aplikacją przez wprowadzanie danych, wybieranie opcji lub nadawanie poleceń.
  • Dane: informacje, nad którymi pracuje aplikacja. W przypadku podstawowej aplikacji kalkulatora może to być aktualnie wyświetlana liczba, wynik poprzedniej operacji lub wartość przechowywana w pamięci. W przypadku gry dane mogą obejmować stan i pozycję gracza oraz wrogów, układ i zachowanie środowiska albo właściwości broni i innych obiektów. W przypadku aplikacji dla przedsiębiorstw dane mogą być bazą danych pracowników, historią zamówień itd. W przypadku aplikacji firmy odzieżowej w naszym przykładzie dane są przechowywane w rzeczywistych obiektach reprezentujących bieżący czas lub kolory wyświetlane przez interfejs użytkownika.
  • Logika: Konstrukcja, która komunikuje się z zasobami zewnętrznymi (takimi jak magazyn, bazy danych, Usługi online lub inne aplikacje), wykonuje operacje na danych i aktualizuje interfejs użytkownika w celu odzwierciedlenia zmian w danych. Logika odbiera również dane wejściowe użytkownika z interfejsu użytkownika i działa zgodnie z wprowadzonymi informacjami lub podanymi poleceniami. W naszym przykładzie logika aktualizuje zegar, tworzy listę dostępnych kolorów oraz przechowuje i pobiera preferencje dotyczące kolorów użytkownika.

Połączenie między logiką aplikacji a interfejsem użytkownika jest niezbędne. Struktury takie jak Zestaw SDK aplikacji systemu Windows, platforma uniwersalna systemu Windows (UWP) i Windows Presentation Foundation (WPF) zawierały niezwykle wydajną i wszechstronną metodę przesyłania danych do i z interfejsu użytkownika nazywanego powiązaniem danych.

W tym module dowiesz się, jak używać powiązania danych do:

  • Wyświetlanie i automatyczne aktualizowanie prostych danych tekstowych (wyświetlanie zegara w aplikacji).
  • Automatycznie aktualizuj właściwości języka C#, gdy interfejs użytkownika odbiera dane wejściowe (wprowadzając nazwę użytkownika).
  • Automatycznie odzwierciedla zmiany danych w interfejsie użytkownika (witając użytkownika, wyświetlając zegar).
  • Pokaż i edytuj listę bardziej złożonych struktur danych (lista dostępnych i ulubionych kolorów).

Omówimy również niektóre najlepsze rozwiązania dotyczące dobrego oddzielenia interfejsu użytkownika i logiki. Oddzielenie interfejsu użytkownika i logiki ułatwia testowanie poszczególnych składników i łatwiejsze identyfikowanie błędów. Znacznie zmniejsza również ilość kodu kociołowego, który trzeba napisać. Mniej standardowy kod oznacza mniej błędów, mniej błędów i więcej czasu na skupienie się na ważnych rzeczach, które chcesz osiągnąć w aplikacji.

Wymagania wstępne

Aby jak najlepiej wykorzystać ten moduł, należy zapoznać się z następującymi informacjami:

  • Tworzenie nowych projektów platformy UWP lub WPF w programie Visual Studio.
  • Język C#.
  • Podstawowe pojęcia dotyczące znaczników XAML.
  • Podstawowe kontrolki układu XAML, w tym StackPanel i Grid.