Introdução aos modelos de coluna de grade App Builder

Imagine que você tenha uma fonte de dados com campos diferentes para detalhes de nome, sobrenome e endereço, como rua, cidade e código postal. Com a versão mais recente do App Builder ^TM  Ultimate 23.1, você pode combiná-los todos em um valor de exibição de célula e reduzir as colunas visíveis. E neste App Builder tutorial de instruções sobre Modelos de Coluna, demonstraremos como lidar com coisas semelhantes e passar de uma grade básica para uma grade com modelos – um modelo de exibição.

Vamos começar.

Introdução às grades básicas vs. grades com modelos

Uma "grade" normalmente se refere a uma estrutura de layout que organiza o conteúdo ou os elementos da interface do usuário em um padrão bidimensional semelhante a uma grade. Ele divide o layout de um aplicativo em linhas e colunas contendo dados diferentes, dependendo da finalidade do aplicativo. Para os fins deste tutorial, estamos começando com uma grade básica que vem com alguns modelos padrão. Ele também implementa recursos como filtragem, classificação e fixação, que são muito fáceis de habilitar e usar na parte superior da grade.

Para transformá-lo em uma grade mais avançada e personalizada, também usaremos:

• Modelo de uma coluna para a exibição.
• E outro que lida com a aparência quando você está editando uma célula específica.

O que é um modelo de coluna?

Os modelos de coluna de grade são usados para criar layouts e conteúdo personalizados dentro de uma coluna específica. Ao criar um aplicativo, seja um aplicativo Web ou um aplicativo móvel com uma interface do usuário baseada na Web, o uso de Modelos de Coluna de Grade pode trazer vários benefícios:

• Alcançar a capacidade de resposta e definir o comportamento das colunas em diferentes tamanhos de tela.
• Estabelecer uma estrutura de grade mais consistente e fácil de manter com uma experiência visual coerente.
• Ter um uso mais eficiente do espaço dentro do layout com larguras de coluna ajustáveis que correspondem a qualquer resolução de tela.
• Fornecendo flexibilidade e controle preciso sobre a aparência visual do aplicativo quando se trata de organizar elementos complexos da interface do usuário e alinhar diferentes itens.
• Melhorar a legibilidade e a manutenção do código configurando nomes mais claros para áreas de grade.
• Solicitando a reutilização, permitindo que você crie layouts modulares.
• Suporte a layout de várias colunas, o que é extremamente útil para interfaces de usuário ou painéis com muito conteúdo.

O que mais você pode fazer com o novo recurso de modelo de coluna no App Builder?

• Os campos de dados de URL agora podem ser associados a um componente de imagem personalizado.
• Mostre um componente Classificação e dê uma pista visual sobre determinados valores numéricos.
• Forneça uma maneira mais visual de indicar que determinada coluna contém números de telefone.

Introdução aos modelos de coluna de grade App Builder

Colocando imagens na grade

A maneira mais rápida é voltar ao editor no App Builder (Editar experiência de tempo na grade) e, para cada uma das grades, todos os elementos filhos são colunas, e você pode selecionar a URL do seu avatar, que exibe a propriedade da coluna da grade. Outra opção é selecionar "imagem" no "Formato de exibição", que a substitui automaticamente por uma imagem que pode ser personalizada para ter um avatar com nome e sobrenome.

No nosso caso, vamos mostrar o avatar, o nome e o sobrenome. O que precisamos, então, é apenas "exibir", então temos que habilitá-lo dentro do App Builder. Há uma dica para soltar conteúdo no canto superior esquerdo. Você pode arrastar e soltar o componente Avatar da caixa de ferramentas e adicioná-lo no lugar.

Em seguida, continue editando o modelo de exibição de célula, adicione dois elementos de texto e defina um determinado tamanho. Em seguida, vincule o primeiro elemento de texto ao "nome", o segundo elemento de texto ao "sobrenome" e, para o Avatar, você pode escolher entre um ícone e selecionar a imagem, que expõe a opção de vinculação. Na opção de vinculação, essa fonte de dados específica tem o URL de Avatar necessário que simplesmente conectamos.

Controlando o layout

Por padrão, o modelo não fornece nenhuma direção de layout. Portanto, para controlar o layout, você precisará adicionar seu próprio layout interno e, em seguida, começar a descartar componentes ou fazê-lo após o fato.

Em seguida, obtemos o contêiner Flex padrão, onde você pode especificar o alinhamento, a propriedade da lacuna, as margens, etc.

Componente de encadernação e chip

A outra coisa rápida que faremos agora é colocar um componente de chip dentro de um número de telefone. Vá em frente e selecione seu designer, clique no endereço do telefone e nomeie-o e altere o modelo de exibição da célula dentro da coluna. Vai ficar em branco. Em seguida, solte um componente de chip e adicione a funcionalidade do telefone escolhendo um item. O conteúdo real do chip (que aparecerá com uma ligação padrão), você pode especificá-lo ainda mais para "número de telefone".

Alterando a área do título para mostrar uma caixa de seleção

O processo é praticamente o mesmo. Você seleciona um título, alterna entre exibir e editar que aparecem na parte superior da célula. Ao editar, solte uma caixa de seleção limpa lá. Depois disso, você pode selecionar suas opções. No final, você tem um modelo de exibição e um modelo de edição em sua grade com uma caixa de seleção bonita e limpa.

E você está tudo pronto. Clique em Visualizar para ver o que você criou.

Embrulhar...

Neste rápido tutorial de App Builder instruções, mostramos como usar um modelo de exibição para criar um layout personalizado e como modificar o modelo de edição para criar um componente diferente. Dessa forma, você pode criar um layout personalizado para todas as suas grades e experimentar a grade com o mesmo desempenho, mas agora com o benefício dos modelos.

Você também pode assistir ao webinar que demonstra todas as etapas.