App Builder lançamento com suporte a gráficos e muito mais
O que esperar de App Builder no lançamento deste mês? Novo gráfico de categorias, gráfico de pizza e muito mais.
Zdravko Kolev
5min de leitura
A atualização de junho do App Builder TM está aqui e inclui atualizações significativas. Se esta é a primeira vez que você aprende sobre App Builder, deixe-me compartilhar rapidamente por que você deve considerá-lo como uma ferramenta fundamental no processo de desenvolvimento de aplicativos para sua organização:
- Um construtor de aplicativos visuais – a plataforma unificada para gerentes de produto, designers e desenvolvedores.
- Ferramenta de arrastar e soltar WYSIWYG baseada em nuvem que ajuda as empresas a projetar e criar aplicativos de negócios completos 80% mais rápido do que nunca.
- Uma ferramenta low-code que produz Angular brilhantes, Blazor ou código Web Components (React em breve) a partir de seus arquivos de design Sketch ou Figma.
Tudo o que há de novo e empolgante no App Builder low-code
Gráfico de categorias
O Gráfico de Categorias (também conhecido como Gráfico de Colunas ou Gráfico de Barras Verticais) estava entre os componentes mais procurados como parte do App Builder. Este é um gráfico usado para comparar rapidamente a frequência, a contagem, o total ou a média dos dados em diferentes categorias com dados codificados por colunas com larguras iguais, mas alturas diferentes. Este gráfico enfatiza a quantidade de mudança ao longo de um período de tempo ou compara vários itens.
Os tipos de gráfico disponíveis são Automático, Coluna, Linha, Spline, Área, Área de spline, Linha de etapa e Área de etapa. O menu suspenso Dados especifica a fonte de dados do gráfico. Você pode usar a caixa de diálogo Seletor de séries para alterar quais campos de categoria e valor serão mostrados. Se você quiser usar uma paleta diferente (personalizada também), poderá usar o seletor de paleta. A propriedade Title está disponível para o Eixo Horizontal, o Eixo Vertical e o próprio Gráfico, bem como a capacidade de alterar o ângulo do Rótulo do Eixo H e o Intervalo e Intervalo do Eixo V.
Gráfico de pizza
O gráfico de pizza, outro ótimo componente agora disponível na caixa de ferramentas, é um gráfico de parte para todo que mostra como as categorias (partes) de um conjunto de dados somam um valor total (inteiro). As categorias são renderizadas como seções em um gráfico circular ou em forma de pizza. Cada seção, ou fatia de pizza, tem um comprimento de arco proporcional ao seu valor de dados subjacente. As categorias são mostradas em proporção a outras categorias com base em sua porcentagem de valor em relação ao valor total que está sendo analisado, como partes de 100 ou 100%.
Mais detalhes sobre as funcionalidades. Escolha uma fonte de dados diferente por meio do menu suspenso Dados e altere o valor do rótulo se quiser mostrar campos diferentes. Para ver uma paleta diferente, você pode usar o seletor de paleta. A posição dos rótulos pode ser alterada para melhor se ajustar ao gráfico, estar na extremidade externa ou em qualquer outra opção disponível. Você também pode alterar facilmente a categoria "Outros", alterar seu tipo de Número para Porcentagem ou atualizar o texto do rótulo. "Outros" está combinando as categorias com valor menor que o limite como uma única categoria "Outros". Digite "0" para desativar isso.
Acesso a dados de rede local
As versões anteriores do App Builder só suportavam acesso a dados baseados em nuvem por meio de endpoints JSON, REST ou Swagger. Com essa atualização, agora você pode adicionar fontes de dados que apontam para o host local e a fonte de dados local, assim como faria com uma fonte de dados na nuvem! Para que isso funcione, sua fonte de dados deve dar suporte a CORS (Cross-Origin Requests). Se você estiver criando uma API Web do .NET, isso será possível habilitando o CORS no arquivo program.cs da seguinte forma:
if (app.Environment.IsDevelopment())
{
app.UseCors(x => x.AllowAnyOrigin());
}
Para obter detalhes adicionais de segurança, configuração e configuração, confira os documentos e, se você tiver algum problema, comente o problema do GitHub.
Atualizar o GitHub sem reverter as alterações do usuário
Como você sabe, com a integração do GitHub, App Builder usuários têm a opção de publicar o código gerado pelo aplicativo no GitHub. Adicionamos um novo ponto de integração que agora respeita as modificações do usuário na ramificação principal/mestre fora App Builder. Você pode notar as seguintes alterações:
- Avisos quando alterações externas são feitas no branch associado de uma solicitação de pull.
- Avisos e orientações quando conflitos são encontrados.
- Avisos quando um repositório correspondente a outro aplicativo ou plataforma é escolhido.
- Capacidade de ir e voltar entre diferentes repositórios usados no histórico de um aplicativo.
Observe que essas alterações são uma interação unidirecional com o GitHub (ou seja, as alterações do Github não podem voltar ao AppBuilder).
Suporte a peças de sombra CSS
Durante a geração de código para Blazor, os estilos agora terão como alvo partes específicas delineadas pelo componente. Essas partes também serão levadas em consideração ao agrupar estilos em classes CSS.
CSS Shadow Parts permite estilizar um elemento dentro de uma árvore de sombra. Os componentes Blazor da interface do usuário do Ignite também estão usando partes contornadas para estilização e isso agora está disponível no código gerado para qualquer aplicativo Blazor. Essas partes também serão levadas em consideração ao agrupar estilos em classes CSS.
.button_ {
margin: 0 16px
}
.button_1::part(ba
color: hsla(var(--igc-surface-500));
}
Embrulhar
Resumidamente, esses são todos os novos recursos e componentes que você verá na atualização de junho do App Builder. Se precisar de mais detalhes, recomendamos que você confira nosso:
