Skip to main content

Layouts dinâmicos

Os layouts dinâmicos são um tipo de layout que organiza os itens que você designar, como campos e controles, em um formato flexível que se ajusta automaticamente ao tamanho da tela. Os layouts dinâmicos funcionam com comportamento responsivo em diversos dispositivos, como computadores, tablets e celulares. À medida que o tamanho da tela muda, o layout dinâmico redimensiona o conteúdo na tela, agrupando os elementos na próxima linha. Esse agrupamento elimina a necessidade de se manter uma rolagem horizontal em telas menores.

Nota: Os layouts dinâmicos estão disponíveis apenas para interfaces de usuário geradas em documentos do tipo HTML5. Aplicativos criados antes da versão 7.0 da Pega não podem utilizar os recursos dinâmicos mais recentes da interface de usuário da Pega PlatformTM. Você pode utilizar a página inicial Preparação para aplicativos HTML5 (HTML5 Application Readiness) para atualizar seu aplicativo. Para obter mais informações sobre a página inicial Preparação para aplicativos HTML5, consulte o tópico de ajuda Página inicial Preparação para aplicativos HTML5.

Verifique seus conhecimentos com a interação a seguir.

Modelos de design para layouts dinâmicos

Os modelos de design são layouts pré-formatados. Muitos modelos de design oferecem uma formatação comum para layouts dinâmicos, como a organização do conteúdo em uma, duas ou três colunas. Cada modelo de design divide um layout em uma ou mais regiões. O desenvolvedor pode posicionar os campos em cada região para organizar rapidamente o conteúdo de uma visualização. Quando o modelo de design tem como base um layout dinâmico, uma mudança no tamanho da tela pode reorganizar o conteúdo da visualização.

Nota: Poucos modelos de design além dos layouts dinâmicos permitem a formatação de layouts.

A imagem a seguir ilustra alguns exemplos de modelos de design fornecidos pela Pega.

out-of-the-box layout templates

Cada visualização pode conter um modelo de design. Você pode combinar visualizações menores e modulares em uma visualização maior, para reproduzir o uso de múltiplos modelos em uma única visualização.

Por exemplo, a visualização de dados de um cliente contém informações de endereço residencial e de cobrança. O modelo padrão de visualização tem apenas uma coluna, mas os stakeholders preferem ver duas colunas: uma coluna com o endereço residencial e outra com o endereço de cobrança.

Em seguida, os stakeholders decidem que as informações do cliente devem ser subdivididas para evitar a necessidade de rolar a tela para ver todos os campos. Eles então solicitam uma alteração adicional: exibir o estado ou província e o número do telefone do cliente agrupados em uma coluna separada, junto com as demais informações do endereço residencial. O desenvolvedor cria uma visualização para o endereço residencial usando o modelo de duas colunas e referencia essa visualização na primeira coluna da visualização original, que também utiliza o modelo de duas colunas. O resultado é um modelo dentro de outro modelo.

No centro da imagem a seguir, deslize a linha vertical para ver a transição de um modelo de duas colunas para um modelo de duas colunas com um modelo de duas colunas inserido na primeira coluna.

 

Verifique seus conhecimentos com a interação a seguir.


This Topic is available in the following Module:

If you are having problems with your training, please review the Pega Academy Support FAQs.

Este conteúdo foi útil?

100% acharam esse conteúdo útil

Quer nos ajudar a melhorar esse conteúdo?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice