Share via

Olá, Mundo - como funciona?

  • Artigo

Importante

Este projeto é uma versão experimental. Esperamos que você experimente associações blazor móveis experimentais e forneça comentários em https://github.com/xamarin/MobileBlazorBindings.

Observação

Esta página é uma continuação do passo a passo Criar seu primeiro aplicativo . Recomendamos que você conclua esse passo a passo antes de continuar.

Vamos dar uma olhada no projeto inicial que foi criado no passo a passo anterior para entender mais sobre como usar associações blazor móveis experimentais.

O projeto main a ser olhado é o projeto compartilhado que contém os .razor arquivos. Os projetos android e iOS não contêm nenhum código específico para Associações Blazor Móveis Experimentais.

Estes são os arquivos no projeto compartilhado:

  • _Imports.razor – Contém diretivas comuns que são aplicadas a todos os outros .razor arquivos nesta pasta e suas subpastas. As subpastas podem ter seus próprios _Imports.razor arquivos com diretivas adicionais. O tipo de diretiva mais comum nesse arquivo é a @using diretiva , que é usada para importar um namespace para .razor arquivos, exatamente o mesmo que uma instrução C# using .
  • App.cs- Contém o main ponto de entrada da interface do usuário do aplicativo, representado por uma classe derivada da Xamarin.Forms.Application classe base. O construtor dessa classe cria uma instância de um Host Genérico, adiciona serviços ao host (o projeto padrão não tem nenhum) e usa o host para adicionar um componente Blazor chamado HelloWorld ao elemento de aplicativo (this).
  • Counter.razor - Contém um componente Blazor chamado Counter.
  • HelloWorld.razor - Contém um componente Blazor chamado HelloWorld.

Vamos nos aprofundar nos dois Componentes blazor para ver como eles funcionam.

Componente Blazor do Contador

Esse componente contém duas seções:

  1. A marcação que define os elementos da interface do usuário e suas propriedades associadas e manipuladores de eventos:

    <Frame CornerRadius="10" BackgroundColor="Color.LightBlue">

    <StackLayout Orientation="StackOrientation.Horizontal" HorizontalOptions="LayoutOptions.Center">

        <Button Text="Increment" OnClick="IncrementCount" />

        <Label Text="@("The button was clicked " + count + " times")"
            FontAttributes="FontAttributes.Bold"
            VerticalTextAlignment="TextAlignment.Center" />

    </StackLayout>

</Frame>

    As marcas semelhantes a HTML representam componentes de interface do usuário que correspondem aos componentes do Xamarin.Forms e suas propriedades e eventos. Algumas propriedades têm valores computados, como a Label propriedade do Text componente, que tem seu valor definido como um valor calculado pelo código C#, que é indicado pelo @( ... ) bloco de expressão.

    Quando um manipulador de eventos é executado, como o Button evento do OnClick componente, o componente é renderizado automaticamente, o que permite que a interface do usuário seja atualizada sem nenhuma lógica adicional. Cenários mais avançados podem controlar quais componentes são renderizados novamente e quando.

  2. O código que implementa qualquer manipulador de eventos ou outra funcionalidade de componente, encapsulado em um @code { ... } bloco:

    int count;

void IncrementCount()
{
    count++;
}

    Esse código incrementa o count campo , que também é usado como o valor computado da Label propriedade do Text componente. Depois que o IncrementCount() manipulador de eventos for executado, o novo valor de count será usado quando a interface do usuário for renderizada novamente.

Componente Blazor HelloWorld

O componente HelloWorld contém apenas marcação:

<ContentView>
    <StackLayout Margin="new Thickness(20)">

        <Label Text="Hello, World!"
               FontSize="40" />

        <Counter />

    </StackLayout>
</ContentView>

Observe que o Counter componente é referenciado neste componente referenciando-o como uma marca <Counter />.

Cada Componente Blazor é compilado em uma classe com o mesmo nome que o arquivo. O namespace é o namespace raiz do projeto, além dos nomes de pasta, se houver, separados por pontos (.). O tipo pode ser referenciado por outro código C# por meio de seu nome de tipo (não comum) ou em um .razor arquivo usando-o como uma marca.