Exercício - Substitua o código por ligações .NET MAUI

{númeroDeMinutos} minutos

Neste exercício, você converterá um aplicativo que usa eventos e code-behind em um que usa principalmente vinculação de dados. O aplicativo de exemplo é um aplicativo de previsão do tempo que exibe o tempo para o dia.

Abra a solução inicial

Clone ou baixe o repositório de exercícios do GitHub.

Nota

É melhor clonar ou baixar o conteúdo do exercício para um caminho de pasta curta, como C:\dev, para evitar que os arquivos gerados pela compilação excedam o comprimento máximo do caminho.
Abra a solução WeatherClient.sln da pasta inicial usando o Visual Studio ou abrindo a pasta inicial no Visual Studio Code.
Crie e execute o projeto para garantir que ele funcione. Na tela exibida, você verá alguns detalhes do tempo vazios. Introduza um código postal e selecione o botão Atualizar, e verá a atualização dos detalhes meteorológicos.

Para referência, aqui está um resumo das classes e arquivos com os quais você trabalhará neste exercício.

Ficheiro	Descrição
MainPage.xaml	Define a interface do usuário e a lógica da página inicial. O arquivo XAML define a interface do usuário usando marcação.
MainPage.xaml.cs	Define a interface do usuário e a lógica da página inicial. O arquivo code-behind associado que contém o código relacionado à interface do usuário definida por MainPage.xaml.
Serviços\WeatherService.cs	Esta aula simula um serviço de informação meteorológica. Ele contém um único método chamado `GetWeather` que retorna um `WeatherData` tipo.
Modelos\WeatherData.cs	Contém os dados meteorológicos. Este é um tipo de registro simples que fornece a temperatura, precipitação, umidade, vento e condição do dia.
Modelos\WeatherType.cs	Uma enumeração da condição meteorológica, ensolarada ou nublada.

Definir o contexto de vinculação

Você precisará editar o código subjacente do método de tratamento do evento de clique do botão Atualizar. O código atualmente obtém os dados meteorológicos e atualiza os controles diretamente. Em vez disso, obtenha os dados meteorológicos e defina-os como o contexto de ligação para a página.

Abra o arquivo de código MainPage.xaml.cs.
Analise o método btnRefresh_Clicked. Esse método executa as seguintes etapas:
- Desativa o botão e ativa o spinner "ocupado".
- Obtém a previsão do tempo do serviço meteorológico.
- Atualiza os controles na página com as informações meteorológicas.
- Ativa o botão e desativa o spinner "ocupado".

Remova o código que atualiza os controles com dados. O código do evento deve ser semelhante ao seguinte trecho:

private async void btnRefresh_Clicked(object sender, EventArgs e)
{
    btnRefresh.IsEnabled = false;
    actIsBusy.IsRunning = true;

    Models.WeatherData weatherData = await Services.WeatherServer.GetWeather(txtPostalCode.Text);

    btnRefresh.IsEnabled = true;
    actIsBusy.IsRunning = false;
}

Em vez de atribuir o resultado do método do serviço GetWeather a uma variável, atribua-o BindingContext ao da página:

private async void btnRefresh_Clicked(object sender, EventArgs e)
{
    btnRefresh.IsEnabled = false;
    actIsBusy.IsRunning = true;

    BindingContext = await Services.WeatherServer.GetWeather(txtPostalCode.Text);

    btnRefresh.IsEnabled = true;
    actIsBusy.IsRunning = false;
}

Execute o projeto. Observe que quando você seleciona o botão Atualizar e o serviço meteorológico retorna os dados, nenhum dos controles é atualizado com a previsão do tempo. Você corrigirá esse bug na próxima seção.

Criar associações em XAML

Agora que o código subjacente define o contexto de vinculação para a página, pode-se adicionar as vinculações aos controles para usar os dados no contexto.

Abra o arquivo MainPage.xaml .

Encontre o interior Grid que contém todos os Label controles.

<Grid Grid.Row="2" RowDefinitions="Auto, Auto, Auto, Auto, Auto" ColumnDefinitions="Auto, Auto" Margin="0,5,0,0">
    <Label Grid.Row="0" Grid.Column="0" Text="Condition" VerticalOptions="Center" />
    <Image x:Name="imgCondition" Grid.Row="0" Grid.Column="1" HeightRequest="25" WidthRequest="25" Source="question.png" HorizontalOptions="Start" />
    <Label Grid.Row="1" Grid.Column="0" Text="Temperature" Margin="0,0,20,0" />
    <Label x:Name="lblTemperature" Grid.Row="1" Grid.Column="1" Text="0" />
    <Label Grid.Row="2" Grid.Column="0" Text="Humidity" Margin="0,0,20,0" />
    <Label x:Name="lblHumidity" Grid.Row="2" Grid.Column="1" Text="0" />
    <Label Grid.Row="3" Grid.Column="0" Text="Precipitation" Margin="0,0,20,0" />
    <Label x:Name="lblPrecipitation" Grid.Row="3" Grid.Column="1" Text="0" />
    <Label Grid.Row="4" Grid.Column="0" Text="Wind" Margin="0,0,20,0" />
    <Label x:Name="lblWind" Grid.Row="4" Grid.Column="1" Text="0" />
</Grid>

Adicione associações a cada um dos controles nomeados Label . São quatro.

A Label.Text propriedade deve ter seu valor alterado para a {Binding PROPERTY_NAME} sintaxe onde PROPERTY_NAME é uma propriedade do Models.WeatherData tipo definido em Models\WeatherData.cs. Lembre-se, este tipo é o tipo de dados retornados pelo serviço meteorológico.

Por exemplo, o Label chamado lblWind (o último rótulo na grelha) deve ter a propriedade Text semelhante ao seguinte código:
```
<Label x:Name="lblWind" Grid.Row="4" Grid.Column="1" Text="{Binding Wind}" />
```
Dentro do conjunto <Grid> de controlos que lista todos os detalhes meteorológicos, remova todos os atributos x:Name="...".

Os nomes já não são necessários porque os controlos já não são referenciados no code-behind.

Verifique se suas associações XAML correspondem ao seguinte trecho:

<Grid Grid.Row="2" RowDefinitions="Auto, Auto, Auto, Auto, Auto" ColumnDefinitions="Auto, Auto" Margin="0,5,0,0">
    <Label Grid.Row="0" Grid.Column="0" Text="Condition" VerticalOptions="Center" />
    <Image Grid.Row="0" Grid.Column="1" HeightRequest="25" WidthRequest="25" Source="question.png" HorizontalOptions="Start" />
    <Label Grid.Row="1" Grid.Column="0" Text="Temperature" Margin="0,0,20,0" />
    <Label Grid.Row="1" Grid.Column="1" Text="{Binding Temperature}" />
    <Label Grid.Row="2" Grid.Column="0" Text="Humidity" Margin="0,0,20,0" />
    <Label Grid.Row="2" Grid.Column="1" Text="{Binding Humidity}" />
    <Label Grid.Row="3" Grid.Column="0" Text="Precipitation" Margin="0,0,20,0" />
    <Label Grid.Row="3" Grid.Column="1" Text="{Binding Precipitation}" />
    <Label Grid.Row="4" Grid.Column="0" Text="Wind" Margin="0,0,20,0" />
    <Label Grid.Row="4" Grid.Column="1" Text="{Binding Wind}" />
</Grid>

Execute o aplicativo e selecione o botão Atualizar . O aplicativo funciona quase como o original.

Observe que o ícone que representa a Condição não é atualizado do ponto de interrogação para um ícone de sol ou nuvem. Por que o ícone não muda? Porque o ícone é um recurso de imagem que foi selecionado em código com base no valor de enumeração WeatherData.Condition. O valor de enumeração não pode ser alterado para um recurso de imagem sem algum esforço extra. Você corrigirá isso no próximo exercício depois de aprender mais sobre associações.

Feedback

Esta página foi útil?