Introdução à interface do usuário e aos dados

  • 5 minutos

Tech logo.

Vamos supor que você trabalhe para uma empresa de criação de roupas personalizadas e queira criar um aplicativo que ajude seus clientes selecionar os materiais ou cores favoritas. O nome do usuário, a lista de cores para escolha e as cores favoritas selecionadas são dados. Esses são os dados que o usuário insere, seleciona e revisa por meio de uma variedade de controles exibidos na interface do usuário: caixas de texto, listas suspensas, listas, botões e assim por diante. Tudo isso é controlado pela lógica do aplicativo.

A maioria dos aplicativos tem três componentes principais:

  • UI (Interface do usuário): Os rótulos, os botões, as caixas de texto, os controles deslizantes, os gráficos e todos os outros controles que apresentam informações ao usuário. Também estão incluídos os controles que permitem que o usuário interaja com o aplicativo inserindo dados, selecionando as opções ou fornecendo comandos.
  • Dados: as informações nas quais o aplicativo está trabalhando. Para um aplicativo básico de calculadora, pode ser o número exibido no momento, o resultado da operação anterior ou o valor armazenado na memória. Para um jogo, os dados podem incluir o status e a posição do jogador e dos inimigos, o layout e o comportamento do ambiente ou as propriedades das armas e de outros objetos. Para um aplicativo empresarial, os dados podem ser o banco de dados de funcionários, o histórico de pedidos e assim por diante. Para o aplicativo da empresa de roupas em nosso exemplo, os dados são armazenados nos objetos reais que representam a hora atual, ou as cores exibidas pela interface do usuário.
  • Lógica: a construção que se comunica com os recursos externos (por exemplo, armazenamento, bancos de dados, serviços online ou outros aplicativos), executa operações nos dados e atualiza a interface do usuário para refletir as alterações nos dados. A lógica também recebe entrada do usuário pela interface do usuário e age de acordo com as informações inseridas ou comandos fornecidos. Em nosso exemplo, a lógica atualiza o relógio, compila a lista de cores disponíveis e armazena e recupera as preferências de cores do usuário.

A conexão entre a lógica do aplicativo e a interface do usuário é essencial. Estruturas como o SDK de Aplicativo do Windows, a UWP (Plataforma Universal do Windows) e o WPF (Windows Presentation Foundation) incorporaram um método extremamente eficiente e versátil de transferência de dados de/para a interface do usuário chamado de associação de dados.

Neste módulo, você aprenderá a usar a associação de dados para:

  • Exibir e atualizar automaticamente dados de texto simples (exibindo o relógio no aplicativo).
  • Atualizar automaticamente as propriedades de C# quando a interface do usuário recebe uma entrada (inserção do nome do usuário).
  • Refletir automaticamente as alterações de dados na interface do usuário (saudando o usuário, exibindo o relógio).
  • Mostrar e editar uma lista de estruturas de dados mais complexas (listando as cores disponíveis e favoritas).

Também abordaremos algumas melhores práticas para uma boa separação de interface do usuário e lógica. A separação da interface do usuário e da lógica ajuda a testar cada componente separadamente e identifique erros com mais facilidade. Isso também reduz bastante a quantidade de código clichê que você precisa escrever. Menos código clichê significa menos erros, menos bugs e mais tempo para se concentrar nas coisas importantes que você deseja realizar com seu aplicativo.

Pré-requisitos

Para aproveitar ao máximo este módulo, você deve estar familiarizado com:

  • Criação de novos projetos UWP ou WPF no Visual Studio.
  • A linguagem C#.
  • Conceitos básicos de marcação XAML.
  • Controles básicos do layout XAML, incluindo StackPanel e Grid.