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

  • 5 minutos

Tech logo.

Suponha que você trabalhe para uma empresa de designer de roupas personalizadas e queira criar um aplicativo que ajude seus clientes a selecionar seus materiais ou cores favoritos. O nome do usuário, a lista de cores que eles podem escolher e suas cores favoritas selecionadas são todos dados. Esses são dados que o usuário digita, seleciona e analisa 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:

  • Interface do usuário (UI): os rótulos, botões, caixas de texto, controles deslizantes, gráficos e todos os outros controles que apresentam informações ao usuário. Isso também inclui os controles que permitem que o usuário interaja com o aplicativo inserindo dados, selecionando opções ou dando comandos.
  • Dados: As informações em que o aplicativo está trabalhando. Para um aplicativo de calculadora básica, pode ser o número exibido atualmente, 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 de armas e outros objetos. Para um aplicativo corporativo, 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 nas cores que a interface do usuário exibe.
  • Lógica: A construção que se comunica com recursos externos (como 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 a entrada do usuário da interface do usuário e age de acordo com as informações inseridas ou os comandos fornecidos. Em nosso exemplo, a lógica atualiza o relógio, cria 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 Plataforma Universal do Windows (UWP) e o Windows Presentation Foundation (WPF) incorporaram um método extremamente eficiente e versátil de transferência de dados de e para a interface do usuário chamado vinculação de dados.

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

  • Exiba e atualize automaticamente dados de texto simples (exibindo o relógio no aplicativo).
  • Atualize automaticamente as propriedades do C# quando a interface do usuário receber entrada (inserindo o nome do usuário).
  • Reflita automaticamente as alterações de dados na interface do usuário (cumprimentar o usuário, exibir 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 práticas recomendadas para uma boa separação entre interface do usuário e lógica. Separar a interface do usuário e a lógica ajuda você a testar cada componente separadamente e identificar erros com mais facilidade. Ele também reduz muito a quantidade de código clichê que você tem que 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 tirar o máximo proveito deste 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 de layout XAML básicos, incluindo StackPanel e Grid.