abp/docs/pt-BR/UI/AspNetCore/Overall.md

ASP.NET Core MVC / Razor Pages UI

Introdução

O ABP Framework oferece uma maneira conveniente e confortável de criar aplicativos da web usando o ASP.NET Core MVC / Razor Pages como framework de interface do usuário.

O ABP não oferece uma nova/forma personalizada de desenvolvimento de UI. Você pode continuar usando suas habilidades atuais para criar a UI. No entanto, ele oferece muitos recursos para facilitar o desenvolvimento e ter uma base de código mais sustentável.

MVC vs Razor Pages

O ASP.NET Core oferece dois modelos para o desenvolvimento de UI:

• MVC (Model-View-Controller) é a maneira clássica que existe desde a versão 1.0. Este modelo pode ser usado para criar páginas/componentes de UI e APIs HTTP.
• Razor Pages foi introduzido com o ASP.NET Core 2.0 como uma nova maneira de criar páginas da web.

O ABP Framework suporta ambos os modelos MVC e Razor Pages. No entanto, é sugerido criar as páginas de UI com a abordagem Razor Pages e usar o modelo MVC para construir APIs HTTP. Portanto, todos os módulos pré-construídos, exemplos e documentação são baseados nas Razor Pages para o desenvolvimento de UI, enquanto você sempre pode aplicar o padrão MVC para criar suas próprias páginas.

Modularidade

A modularidade é um dos principais objetivos do ABP Framework. Não é diferente para a UI; É possível desenvolver aplicativos modulares e módulos de aplicativos reutilizáveis com páginas e componentes de UI isolados e reutilizáveis.

O modelo de inicialização do aplicativo vem com alguns módulos de aplicativos pré-instalados. Esses módulos têm suas próprias páginas de UI incorporadas em seus próprios pacotes NuGet. Você não vê o código deles em sua solução, mas eles funcionam como esperado em tempo de execução.

Sistema de Temas

O ABP Framework fornece um completo sistema de temas com os seguintes objetivos:

• Módulos de aplicativos reutilizáveis são desenvolvidos de forma independente de temas, para que possam funcionar com qualquer tema de UI.
• O tema de UI é decidido pelo aplicativo final.
• O tema é distribuído por meio de pacotes NuGet/NPM, para que seja facilmente atualizável.
• O aplicativo final pode personalizar o tema selecionado.

Temas Atuais

Atualmente, três temas são oficialmente fornecidos:

• O Tema Básico é o tema minimalista com o estilo Bootstrap simples. É open source e gratuito.
• O Tema Lepton é um tema comercial desenvolvido pela equipe principal do ABP e faz parte da licença ABP Commercial.
• O Tema LeptonX é um tema que possui escolhas comerciais e lite.

Também existem alguns temas desenvolvidos pela comunidade para o ABP Framework (você pode pesquisar na web).

Bibliotecas Base

Existem um conjunto de bibliotecas JavaScript/CSS padrão que são pré-instaladas e suportadas por todos os temas:

• Twitter Bootstrap como o framework HTML/CSS fundamental.
• JQuery para manipulação do DOM.
• DataTables.Net para grades de dados.
• JQuery Validation para validação do lado do cliente e unobtrusive validation
• FontAwesome como a biblioteca fundamental de fontes CSS.
• SweetAlert para mostrar mensagens de alerta e caixas de diálogo de confirmação.
• Toastr para mostrar notificações de toast.
• Lodash como uma biblioteca de utilitários.
• Luxon para operações de data/hora.
• JQuery Form para formulários AJAX.
• bootstrap-datepicker para mostrar seletores de data.
• Select2 para melhores caixas de seleção/combo.
• Timeago para mostrar carimbos de data/hora fuzzy atualizados automaticamente.
• malihu-custom-scrollbar-plugin para barras de rolagem personalizadas.

Você pode usar essas bibliotecas diretamente em seus aplicativos, sem precisar importar manualmente sua página.

Layouts

Os temas fornecem os layouts padrão. Portanto, você tem layouts responsivos com os recursos padrão já implementados. A captura de tela abaixo foi tirada do Layout do Aplicativo do Tema Básico:

Consulte o documento Theming para obter mais opções de layout e outros detalhes.

Partes do Layout

Um layout típico consiste em várias partes. O sistema de temas fornece menus, toolbars, hooks de layout e mais para controlar dinamicamente o layout pelo seu aplicativo e pelos módulos que você está usando.

Recursos

Esta seção destaca alguns dos recursos fornecidos pelo ABP Framework para a UI do ASP.NET Core MVC / Razor Pages.

Proxies de Cliente de API JavaScript Dinâmico

O sistema de Proxies de Cliente de API JavaScript Dinâmico permite que você consuma suas APIs HTTP do lado do servidor a partir do seu código de cliente JavaScript, assim como chamar funções locais.

Exemplo: Obter uma lista de autores do servidor

acme.bookStore.authors.author.getList({
  maxResultCount: 10
}).then(function(result){
  console.log(result.items);
});

acme.bookStore.authors.author.getList é uma função gerada automaticamente que faz internamente uma chamada AJAX para o servidor.

Consulte o documento Proxies de Cliente de API JavaScript Dinâmico para mais informações.

Tag Helpers do Bootstrap

O ABP torna mais fácil e seguro escrever HTML do Bootstrap.

Exemplo: Renderizar um modal do Bootstrap

<abp-modal>
    <abp-modal-header title="Título do Modal" />
    <abp-modal-body>
        Uau, você está lendo este texto em um modal!
    </abp-modal-body>
    <abp-modal-footer buttons="@(AbpModalButtons.Save|AbpModalButtons.Close)"></abp-modal-footer>
</abp-modal>

Consulte o documento Tag Helpers para mais informações.

Formulários e Validação

O ABP fornece os tag helpers abp-dynamic-form e abp-input para simplificar drasticamente a criação de um formulário totalmente funcional que automatiza a localização, validação e envio AJAX.

Exemplo: Use abp-dynamic-form para criar um formulário completo com base em um modelo

<abp-dynamic-form abp-model="Movie" submit-button="true" />

Consulte o documento Formulários e Validação para obter mais detalhes.

Agrupamento e Minificação / Bibliotecas do Lado do Cliente

O ABP fornece um sistema de Agrupamento e Minificação flexível e modular para criar pacotes e minificar arquivos de estilo/script em tempo de execução.

<abp-style-bundle>
    <abp-style src="/libs/bootstrap/css/bootstrap.css" />
    <abp-style src="/libs/font-awesome/css/font-awesome.css" />
    <abp-style src="/libs/toastr/toastr.css" />
    <abp-style src="/styles/my-global-style.css" />
</abp-style-bundle>

Além disso, o sistema de Gerenciamento de Pacotes do Lado do Cliente oferece uma maneira modular e consistente de gerenciar dependências de bibliotecas de terceiros.

Consulte os documentos Agrupamento e Minificação e Gerenciamento de Pacotes do Lado do Cliente.

APIs JavaScript

As APIs JavaScript fornecem abstrações sólidas para a localização, configurações, permissões, recursos... etc. do lado do servidor. Elas também fornecem uma maneira simples de mostrar mensagens e notificações ao usuário.

Modais, Alertas, Widgets e Mais

O ABP Framework fornece muitas soluções integradas para requisitos comuns de aplicativos;

• O Sistema de Widgets pode ser usado para criar widgets reutilizáveis e criar painéis de controle.
• Os Alertas de Página facilitam a exibição de alertas ao usuário.
• O Gerenciador de Modais fornece uma maneira simples de construir e usar modais.
• A integração com Data Tables facilita a criação de grades de dados.

Personalização

Existem muitas maneiras de personalizar o tema e as UIs dos módulos pré-construídos. Você pode substituir componentes, páginas, recursos estáticos, pacotes e muito mais. Consulte o Guia de Personalização da Interface do Usuário para mais informações.