Compartilhar via

Olá, Mundo híbrida – 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 híbrido . Recomendamos que você conclua esse passo a passo antes de continuar.

Dica

Para obter um exemplo mais simples, comece com o passo a passo Criar seu primeiro aplicativo e as Olá, Mundo passo a passo subsequentes que mostram alguns recursos mais básicos do Blazor.

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 para aplicativos híbridos.

O projeto main a ser olhado é o projeto compartilhado que contém os .razor arquivos. Os projetos específicos da plataforma contêm apenas código mínimo específico para Associações De Blazor Móveis Experimentais.

Estes são os arquivos e pastas notáveis no projeto compartilhado:

Pasta raiz

  • _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 ponto de entrada da interface do usuário main do aplicativo, representado por uma classe derivada da Xamarin.Forms.Application classe base. O construtor dessa classe cria uma instância de um host, adiciona serviços ao host e usa o host para adicionar um componente Blazor chamado Main à página do aplicativo main.
  • CounterState.cs – Contém um serviço que rastreia um valor de contador e oferece APIs relacionadas. Esse serviço é usado nas partes nativas e HTML do aplicativo.
  • Main.razor– Contém o main componente de interface do usuário do Blazor do aplicativo. Ele contém alguma interface do usuário nativa e também um BlazorWebView componente que hospeda a parte HTML do aplicativo.

Pastas WebUI e wwwroot

Essas pastas contêm a Web Part do aplicativo, que é o que torna este um aplicativo híbrido. Os arquivos e pastas aqui correspondem muito ao que foi encontrado em um aplicativo Web Blazor.

  • WebUI/_Imports.razor – Contém diretivas comuns para a Web Part do aplicativo.
  • WebUI/App.razor- Contém o ponto de entrada main para a Web Part do aplicativo.
  • WebUI/Pages folder – contém páginas navegáveis criadas usando a sintaxe da Web do Blazor. Os .razor arquivos aqui renderizam HTML e compartilham o estado do aplicativo com o restante do aplicativo.
  • WebUI/Shared folder – contém componentes de interface do usuário reutilizáveis compartilhados criados usando a sintaxe da Web do Blazor. Os .razor arquivos aqui renderizam HTML e são usados em outras páginas no aplicativo. Essa pasta também contém o MainLayout componente que define a forma geral da Web Part do aplicativo.
  • wwwroot folder – contém ativos da Web estáticos usados na Web Part do aplicativo. Normalmente, são arquivos e imagens CSS.

Vamos nos aprofundar nos arquivos interessantes.

App.cs ponto de entrada

O ponto de entrada da interface do usuário do aplicativo está nesta página. Ele configura os serviços para o aplicativo e, em seguida, inicializa a interface do usuário anexando um componente Mobile Blazor Bindings ao MainPage elemento .

Dois conjuntos de serviços estão registrados:

  1. services.AddBlazorHybrid() adiciona os serviços exigidos pelo Mobile Blazor Bindings para hospedar componentes web blazor na interface do usuário nativa.
  2. services.AddSingleton<CounterState>() adiciona um serviço específico do aplicativo que pode ser consumido de qualquer lugar no aplicativo, incluindo arquivos de código, componentes blazor e outros serviços. Esse é um serviço singleton, o que significa que, no máximo, uma instância dele será criada, permitindo que o estado seja compartilhado.

Saiba mais sobre serviços e DI no tópico de injeção de dependência.

Main.razor página da interface do usuário nativa

Esta é a main página de interface do usuário nativa do aplicativo. Ele contém vários componentes nativos da interface do usuário, como <Label> e <Button>. Ele também contém um <BlazorWebView> componente que hospeda o conteúdo da Web do Blazor:

<BlazorWebView VerticalOptions="LayoutOptions.FillAndExpand">
    <FirstBlazorHybridApp.WebUI.App />
</BlazorWebView>

Algumas outras coisas interessantes:

  • A <FirstBlazorHybridApp.WebUI.App /> marca é como a parte nativa do aplicativo faz referência à Web Part do aplicativo.
  • A @inject diretiva é usada para fazer referência ao CounterState serviço.
  • Os OnInitialized métodos e Dispose são implementados para anexar/desanexar um StateChanged manipulador de eventos para que essa página de interface do usuário seja atualizada sempre que o CounterState serviço indicar que o contador foi alterado.

Serviço CounterState.cs

Essa classe define um serviço registrado em App.cs. Ele contém estado, APIs e eventos usados para rastrear e relatar o estado do contador. Vários componentes de interface do usuário no aplicativo usam esse serviço para exibir sua interface do usuário e saber quando atualizá-la,

Saiba mais sobre serviços e DI no tópico de injeção de dependência.

WebUI/App.razor ponto de entrada da Web

Esse arquivo é o ponto de entrada main Blazor para a Web Part do aplicativo. Ele usa recursos padrão do Blazor, como o Roteador. Esse componente determina qual página da Web do Blazor será exibida com base na rota atual (ou mostrará um erro se nenhuma for encontrada).

WebUI/Shared/MainLayout.razor layout da Web

Comum à maioria dos aplicativos Web Blazor, esse componente define o layout geral da Web Part do aplicativo. Aqui você pode incluir elementos comuns, como navegação, cabeçalhos e rodapés que são usados na Web Part do aplicativo.

WebUI/Pages/Index.razor página da Web

Contém uma página navegável do conteúdo da Web. A Index página geralmente é a página padrão que é carregada antes de qualquer navegação

wwwroot pasta de ativos da Web estáticos

Essa pasta contém ativos da Web estáticos usados na Web Part do aplicativo. Ou seja, esses arquivos são servidos como estão pelo componente do navegador da Web. Eles são referenciados usando o padrão de caminho de arquivo estático Blazor, que é _content/<PROJECT_NAME>/path/to/the/file.css. Por exemplo, neste projeto, um arquivo CSS localizado em wwwroot/css/bootstrap/bootstrap.min.css seria referenciado como _content/FirstBlazorHybridApp/css/bootstrap/bootstrap.min.css.

Esses arquivos são inseridos no aplicativo e são manipulados por Associações do Blazor Móvel automaticamente. Os arquivos nessa pasta podem ser lidos do código usando o IFileProvider serviço e chamando FileProvider.GetFileInfo("_content/<PROJECT_NAME>/path/to/the/file.txt"), como visto no arquivo do WebUI/Pages/FetchData.razor aplicativo.

Este projeto contém a biblioteca CSS do Bootstrap para fornecer estilos para cenários comuns de interface do usuário.

index.html arquivo nos projetos Android/iOS/macOS/Windows

Cada projeto específico da plataforma contém um index.html arquivo que é a página de contêiner da interface do usuário da Web do Blazor e inclui referências aos arquivos CSS.

O local do arquivo em cada plataforma é o seguinte:

  • Android: wwwroot/index.html
  • iOS: Resources/wwwroot/index.html
  • macOS - Resources/wwwroot/index.html
  • Windows: wwwroot/index.html

Outros arquivos

Incentivamos você a explorar todos os arquivos no aplicativo para aprender seu conteúdo e como eles interagem.