Ignite UI Dock Manager: para layouts da Web e melhor usabilidade
Veja como é fácil criar aplicativos com várias janelas e várias telas em qualquer estrutura com Infragistics' novo Dock Manager no Angular, Blazor, React e Web Components. Experimente agora!
Radoslav Mirchev
9min de leitura
Na Infragistics, sabemos que os processos e as necessidades de desenvolvimento estão em constante evolução. Para acompanhar as expectativas do mercado e dos clientes, você deve melhorar a usabilidade, ao mesmo tempo em que adiciona novos recursos e funcionalidades.
É por isso que nunca paramos de aprimorar nosso kit de ferramentas Ignite UI, trazendo novos componentes e mais funcionalidades. E agora temos o prazer de anunciar a nova versão do Ignite UI componente Dock Manager. Essa nova ferramenta poderosa facilita a criação de aplicativos da Web com várias janelas e várias telas em qualquer estrutura.
Mas mais sobre isso daqui a pouco.
O que é um Dock Manager?
O Dock Manager é um componente da Web padrão e fácil de usar para criar layouts complexos, dividindo a visualização em layouts menores. Isso pode ser feito recursivamente para criar layouts arbitrários que podem ser manipulados e ajustados em tempo de execução. Você pode gerenciar o layout e o posicionamento de várias janelas, painéis e outros elementos da interface do usuário de maneira flexível, encaixando-os em diferentes locais dentro de um aplicativo.
Para os usuários finais, o Dock Manager significa ter a capacidade de personalizar ainda mais o layout criado por meio de recursos como fixar, redimensionar, mover, flutuar e ocultar painéis.
Quais são os benefícios de usar um Dock Manager?
Em geral, o uso do Dock Manager economiza tempo e esforço ao criar uma interface do usuário dinâmica e complexa, garantindo uma melhor experiência do usuário para os usuários finais do seu aplicativo da web. Aqui estão alguns dos benefícios:
Multiplataforma: Uma das melhores coisas sobre isso é o suporte a várias plataformas para desktop e celular. Depois, há sua compatibilidade com navegadores modernos, o que significa que você pode usar o componente Dock Manager para desenvolver soluções de software de layout responsivo para qualquer plataforma que desejar.
Arrastar e soltar integrado: Se você quiser reordenar as guias em um painel de um destino para outro, poderá fazê-lo rapidamente com a funcionalidade de arrastar e soltar que o componente fornece.
Integração perfeita: Não importa se você desenvolve aplicativos em Angular, Blazor, Web Components ou outras estruturas, o Dock Manager sempre depende da arquitetura de estrutura fornecida para integrar elementos de interface do usuário encaixáveis na lógica e nos dados do aplicativo.
Flexibilidade e ajustes personalizados: Gerenciar layouts, personalizar todos os botões usando slots e peças, encaixar coisas como painéis e janelas em diferentes posições, alterar o comportamento dos elementos da interface do usuário para atender aos requisitos do aplicativo, tudo isso é bastante simples.
Melhor UX: Fornecendo aos usuários finais a capacidade de manipular, reorganizar e redimensionar ainda mais os elementos de interface do usuário disponíveis, o componente Dock Manager de fato melhora a experiência geral com o aplicativo.
O que torna Ignite UI Dock Manager diferente?
Um dos maiores diferenciais é que Ignite UI componente Dock Manager é um componente da Web puro e livre de dependências que está disponível para Angular, Blazor, React e Web Components. Ele permite que você não apenas crie uma experiência semelhante ao Visual Studio para desktop, mas também ajuda a criar aplicativos Web melhores para qualquer setor e negócios.
Por exemplo, as empresas financeiras lidam com muitos dados e, muitas vezes, exigem painéis complexos para exibir e entender esses dados. A questão aqui é: como as empresas financeiras podem se beneficiar do uso do Ignite UI Dock Manager? Com ele, eles podem fazer várias coisas:
- Crie painéis personalizáveis que são fáceis de organizar e redimensionar com os propósitos da empresa e as necessidades de usuários individuais em mente.
- Redimensione com eficiência os elementos da interface do usuário na tela para maximizar o volume de dados financeiros visualizados de uma só vez.
- Exiba rapidamente informações super acessíveis adequadas aos usuários finais.
- Forneça uma experiência de usuário consistente em todos os dispositivos, graças à compatibilidade entre plataformas do Ignite UI Dock Manager.
Para ilustrar melhor isso, compartilharei um problema da vida real que encontramos durante nossas reuniões de design da "Ferramenta de Análise de Dados". Para usar a Ferramenta de Análise de Dados, primeiro você precisa selecionar os dados, escolher um gráfico apropriado, selecioná-lo e, em seguida, a primeira cobra na grama, você está em um aplicativo de navegador, não em um desktop.
Mas onde você visualiza esse gráfico? É uma caixa de diálogo estática que você não pode mover. Ele oculta sua visualização em grade e você fica preso lá. Se você precisar rolar para procurar outra coisa, feche a caixa de diálogo do gráfico, verifique o que precisa e comece do zero. É tão desajeitado quanto parece. Você está limitado apenas pelo navegador. É aqui que o Dock Manager se torna inestimável. Com ele, você pode criar facilmente um layout de várias telas, sem sacrificar a usabilidade e limitar o usuário final.
Aqui está um exemplo simples do Dock Manager e uma comparação visual:
Ferramenta de análise de dados sem Dock Manager:
Ferramenta de análise de dados com o Dock Manager:
Acho que é por isso que muitas pessoas, incluindo desenvolvedores profissionais, se sentem nostálgicas em relação aos aplicativos de desktop. Hoje em dia não é incomum ver dez ou mais abas abertas em uma janela do navegador. Se você precisar usar dados de n número de páginas, precisará de n número de janelas. Essa liberdade de reorganizar seu layout conforme necessário é o motivo pelo qual o componente Dock Manager é importante. Isso não é para minimizar a importância dos aplicativos de página única (SPA), mas para compartilhar outro ponto de vista.
Então, agora que sabemos o que é e por que é importante, vamos dar uma olhada nas peças e recursos básicos do Ignite UI Dock Manager:
Como usar Ignite UI Dock Manager?
Você pode incluir o Ignite UI Dock Manager Web Component em seu projeto como uma dependência usando o pacote NPM. Para instalar o pacote do Dock Manager, execute o seguinte comando:
npm install --save igniteui-dockmanager
Então é necessário importar e chamar a função defineCustomElements():
import { defineCustomElements } from 'igniteui-dockmanager/loader';
defineCustomElements();
TS
Depois que o Dock Manager for importado, você pode adicioná-lo à página:
<igc-dockmanager id="dockManager"> </igc-dockmanager>
Adicionamos etapas rápidas de instruções e informações adicionais em nosso repositório GitHub Ignite UI Dock Manager.
Algumas coisas importantes a saber sobre os principais blocos de construção no Dock Manager é que eles são chamados de painéis.
Usando painéis no Dock Manager
Os principais blocos de construção no Dock Manager são os painéis:
O painel de conteúdo representa um painel com cabeçalho e conteúdo. Ele pode ser hospedado dentro de um Painel Dividido ou de um Painel de Grupo de Guias.
O painel dividido é um painel de contêiner que empilha todos os seus painéis filho horizontal ou verticalmente com base em sua propriedade orientation.
O painel do grupo de guias exibe seus painéis de conteúdo filho como as guias de um componente de guia.
O painel flutuante é um painel dividido renderizado acima de todos os outros em uma janela flutuante.
O host do documento é uma área de guias para documentos, semelhante à do Visual Studio para edição de código e modo de design.
Aqui está outra demonstração do Dock Manager que construímos usando Ignite UI:
Personalização de temas no Ignite UI para o componente Dock Manager
O Dock Manager vem com um tema claro e escuro integrado. Usar temas prontos para uso pode ser útil, mas não é suficiente para moldar a aparência necessária para seu aplicativo, por isso oferecemos mais opções para personalizar o Ignite UI Dock Manager usando variáveis CSS e partes CSS.
Em primeiro lugar, forneça seus próprios ícones, usando os slots closeButton, maximizeButton, minimizeButton, pinButton e unpinButton.
Depois disso, use as partes expostas na folha de estilo. Dessa forma, você tem controle total do estilo do componente.
Aí está. Agora você tem um DockManager com ícones personalizados e área de guias.
Se você quiser, pode experimentá-lo com este exemplo ao vivo de stackblitz.
Customizing Layouts
Os usuários finais podem executar as seguintes ações para personalizar o layout no tempo de execução:
- Pin a pane
Você pode armazenar todo o conteúdo e painéis de guias desnecessários no momento em uma bandeja, desafixando-os. Quando você precisar deles em sua última posição encaixada - basta fixá-los.
- Redimensionar um painel
- Fechar um painel
- Float a pane
Você pode criar um painel flutuante arrastando o cabeçalho de qualquer painel. O painel flutuante é um painel dividido renderizado acima de todos os outros em uma janela flutuante. Ele se move acima de todos os outros painéis e não é limitado pela janela do Dock Manager. Ele pode ser redimensionado e encaixado ou hospedado dentro de um painel dividido ou grupo de guias.
- Navegador de painel
Indicação visual (joystick) sobre as posições disponíveis para encaixar ou painel de host que é contextual para o painel sobre o qual o cursor está posicionado no momento. É possível:
- Encaixe um painel à esquerda, direita, superior ou inferior a qualquer nível de aninhamento, incluindo o global/raiz.
- Encaixe um painel de log em tempo real na parte inferior da janela.
- Encaixe um painel com comandos e operações na parte superior da minha janela, como a faixa de opções do MS Office.
- Encaixe um painel como uma guia de outro modo de exibição sem dividir a área de conteúdo.
- Abra a bandeja e arraste um item para um painel de destino e encaixe-o em uma determinada posição.
Criar layouts personalizados e complexos pode ser complicado e extremamente irritante se você precisar recriá-los constantemente. É por isso que incluímos uma opção para salvar e carregar layouts. Agora você pode personalizar seu layout, especificamente para atender às suas necessidades atuais, e salvá-lo como padrão, reduzindo as iterações e economizando seu tempo.
Se você quiser experimentar, basta um projeto Angular, por exemplo, e pode seguir as instruções aqui.
No final, o Dock Manager fornece aos desenvolvedores da Web a capacidade de melhorar a usabilidade de aplicativos da Web complexos, oferecendo uma experiência completa de janelas na Web. Ele faz isso de forma rápida e fácil, permitindo que você seja um herói e satisfaça as necessidades de seus usuários no tempo necessário para obter sua próxima bebida com cafeína.