Compartilhar via

Interface do usuário da Web compartilhada

  • 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.

Agora que você criou um aplicativo híbrido do Mobile Blazor Bindings que incorpora a interface do usuário da Web (HTML com CSS), este passo a passo mostrará como compartilhar a interface do usuário da Web com um Aplicativo Web Blazor para que você possa fornecer a mesma interface do usuário do aplicativo na Web.

No Blazor, isso é feito colocando a interface do usuário compartilhada em um projeto da Biblioteca de Classes razor ou RCL para abreviar. Isso permite empacotar a interface do usuário da Web e o código como uma entidade reutilizável que pode ser referenciada por vários projetos em uma solução ou compartilhada de forma mais ampla distribuindo-a como um pacote NuGet. Um pacote RCL pode ser referenciado por um aplicativo Mobile Blazor Bindings e um aplicativo Web Blazor para que eles compartilhem exatamente a mesma interface do usuário.

Neste passo a passo, você criará uma interface do usuário reutilizável Email Display em uma RCL e a usará no aplicativo híbrido Mobile Blazor Binding e em um aplicativo Web Blazor.

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.

Adicionar uma RCL (Biblioteca de Classes Razor)

Para adicionar uma RCL ao seu aplicativo:

  1. Clique com o botão direito do mouse no nó Solução no Gerenciador de Soluções e selecione Adicionar/Novo Projeto.
  2. Localize o tipo de projeto Biblioteca de Classes razor e clique em Avançar.
  3. Insira um nome para o projeto, como EmailDisplayUI e clique em Criar.
  4. Na próxima caixa de diálogo, verifique se as seguintes configurações estão selecionadas: .NET Core 3.1, Sem Autenticação e sem suporte para páginas e exibições e clique em Criar.

O novo projeto contém seus próprios arquivos Razor em que você criará a interface do usuário da Web e uma wwwroot pasta para conter ativos estáticos que fazem parte desse componente.

Adicionar a interface do usuário da Web compartilhada à RCL

  1. Clique com o botão direito do mouse no projeto RCL e selecione Adicionar/Classe

  2. Insira o nome EmailData.cs e clique em Adicionar

  3. Adicionar um arquivo chamado Email.cs à RCL

  4. Substitua seu conteúdo pelo seguinte código C#:

    namespace EmailDisplayUI
{
    public class EmailData
    {
        public string From { get; set; }
        public string To { get; set; }
        public string Subject { get; set; }
        public bool IsImportant { get; set; }
        public string Body { get; set; }
    }
}

  5. Renomear Component1.razor como DisplayEmail.razor

  6. Substitua seu conteúdo pela seguinte marcação razor:

    <div class="emailDisplay">
    <div class="emailHeader">
        <div>
            <label>From:</label> @Email.From
        </div>
        <div>
            <label>To:</label> @Email.To
        </div>
        <div>
            <label>Priority:</label> @(Email.IsImportant ? "High" : "Normal")
        </div>
        <div>
            <label>Subject:</label> @Email.Subject
        </div>
    </div>
    <div class="emailBody">
        @Email.Body
    </div>
</div>

@code
{
    [Parameter] public EmailData Email { get; set; }
}

  7. Altere o conteúdo de wwwroot/styles.css para o seguinte:

    label {
    font-weight: bold;
    font-style: italic;
}

.emailDisplay {
    background-image: url('background.png');
}

.emailHeader {
    border: 2px solid #808080;
    padding: 1em;
    margin: 1em 0;
}

.emailBody {
    border: 1px solid #808080;
    padding: 1em;
    margin: 1em 0;
}

Referenciar a RCL

Para usar a RCL, você precisa referenciá-la do projeto de interface do usuário main para que a interface do usuário possa ser referenciada a partir dele. Você também precisa referenciá-lo dos projetos específicos da plataforma para que os ativos estáticos sejam detectados e incluídos nesses aplicativos.

Em cada um dos projetos FirstBlazorHybridApp, FirstBlazorHybridApp.Android, FirstBlazorHybridApp.iOS, FirstBlazorHybridApp.macOS e FirstBlazorHybridApp.Windows, faça o seguinte:

  1. Clique com o botão direito do mouse no projeto e selecione Adicionar/Referência de Projeto ou Adicionar/Referência
  2. Selecione EmailDisplayUI e clique em OK

Agora você está pronto para usar a interface do usuário de exibição Email em seu projeto:

  1. No projeto FirstBlazorHybridApp, abra o WebUI/_Imports_.razor arquivo e adicione essa linha ao final do arquivo: @using EmailDisplayUI

  2. No projeto FirstBlazorHybridApp, abra o WebUI/Pages/Index.razor arquivo

  3. Adicione o seguinte conteúdo à parte inferior do arquivo:

    <DisplayEmail Email="email" />

@code
{
    EmailData email = new EmailData { From="sender@example.com", To="recipient@example.com", IsImportant=true, Subject="Learn about Blazor", Body="Tutorials are wonderful!" };
}

  4. Adicione uma referência ao CSS de cada projeto específico da plataforma adicionando a linha <link href="_content/EmailDisplayUI/styles.css" rel="stylesheet" /> à <head> seção:

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

Executar os aplicativos para testar a interface do usuário

Agora você está pronto para testar a nova interface do usuário! Clique com o botão direito do mouse em qualquer um dos projetos android, iOS, macOS ou Windows, selecione Definir como Projeto de Inicialização e execute o aplicativo. Você deve ver o carregamento nativo da interface do usuário com a interface do usuário da Web abaixo dela e a interface do usuário da Web deve mostrar a interface do usuário de exibição de email que você criou.

No Simulador do iOS, ele deve ter esta aparência:

[ ! [Email exibir a interface do usuário em execução no Simulador do iOS[(./media/shared-web-ui/ios-shared-ui-inline.png) [(./media/shared-web-ui/ios-shared-ui-expanded.png#lightbox)

Adicionar um projeto Web Blazor

Agora você está pronto para reutilização da interface do usuário criada em um aplicativo Web!

  1. Clique com o botão direito do mouse no nó da solução no Gerenciador de Soluções e selecione Adicionar/Novo Projeto

  2. Selecione o modelo aplicativo Blazor e clique em Avançar

  3. Insira um nome, como FirstBlazorWebApp e clique em Criar

  4. Selecione a opção Aplicativo Blazor Server, .NET Core 3.1, Sem Autenticação, Sim para HTTPS e Não para Docker e clique em Criar.

  5. Clique com o botão direito do mouse no projeto FirstBlazorWebApp e selecione Adicionar/Referência de Projeto

  6. Selecione o EmailDisplayUI projeto e clique em OK

  7. Abra o Pages/_Host.cshtml arquivo e adicione a linha <link href="_content/EmailDisplayUI/styles.css" rel="stylesheet" /> à <head> seção

  8. Abra o _Imports.razor arquivo e adicione essa linha ao final do arquivo: @using EmailDisplayUI

  9. Abra o Pages/Index.razor arquivo e adicione o seguinte conteúdo à parte inferior do arquivo:

    <DisplayEmail Email="email" />

@code
{
    EmailData email = new EmailData { From="sender@example.com", To="recipient@example.com", IsImportant=true, Subject="Learn about Blazor", Body="Tutorials are wonderful!" };
}

  10. Para executar o projeto, clique com o botão direito do mouse no projeto, selecione Definir como Projeto de Inicialização e execute-o. Isso iniciará o ASP.NET Core aplicativo Web e abrirá o navegador da Web padrão para o aplicativo.

Ele deve ter esta aparência no navegador da Web:

[ ! [Email exibir a interface do usuário em execução no navegador da Web[(./media/shared-web-ui/web-shared-ui-inline.png) [(./media/shared-web-ui/web-shared-ui-expanded.png#lightbox)

Recursos adicionais

Para saber mais sobre bibliotecas de classes razor marcar estes recursos:

Resumo

Neste passo a passo, você criou um aplicativo Blazor Hybrid que usa uma RCL (Biblioteca de Classes razor) para uma parte de sua interface do usuário (a exibição de email). Em seguida, você usou essa mesma RCL para hospedar a interface do usuário em um aplicativo Web ASP.NET Core.

Este passo a passo mostrou um exemplo de uma interface do usuário somente leitura, mas as mesmas técnicas podem ser usadas para criar uma interface do usuário arbitrariamente complexa com lógica de aplicativo arbitrariamente complexa para atender a qualquer requisito de aplicativo. Você pode usar padrões como DI (injeção de dependência) para criar serviços específicos da plataforma.