Configurar o contêiner de layout e o modo de layout configuring-layout-container-and-layout-mode

Layout Responsivo é um mecanismo para realizar o design responsivo da Web. Isso permite que o usuário crie páginas da Web com um layout e dimensões dependentes dos dispositivos que seus usuários usam.

O AEM permite um layout responsivo para suas páginas usando uma combinação de mecanismos:

Com esses mecanismos de grade responsivos, você pode:

Configurar o emulador responsivo configuring-the-responsive-emulator

Esta tarefa permite que você veja o Emulador responsivo em seu site.

Registrar os componentes da página para emulação register-your-page-components-for-emulation

Para permitir que o emulador dê suporte às páginas, você deve registrar os componentes da página. Consulte Registrando Componentes de Página para Simulação.

Especificar os Grupos de Dispositivos specify-the-device-groups

Para especificar os grupos de dispositivos que aparecem na lista Dispositivos do emulador, consulte Especificando os Grupos de Dispositivos.

Vincular o site aos grupos de dispositivos especificados link-your-site-to-the-specified-device-groups

Para incluir o emulador, vincule seu site aos grupos de dispositivos. Consulte Adicionando a Lista de Dispositivos (para a interface clássica e a interface otimizada para toque).

Ativar modo de layout para o site activate-layout-mode-for-your-site

Estes procedimentos são usados para habilitar o modo Layout no site.

Configurar os pontos de interrupção configure-the-breakpoints

Pontos de interrupção:

Eles podem ser definidos usando CRXDE Lite ou XML.

Configurar pontos de interrupção usando o CRXDE Lite configuring-breakpoints-using-crxde-lite

Configurar pontos de interrupção usando XML configuring-breakpoints-using-xml

Os pontos de interrupção estão localizados dentro da seção <jcr:content> de .context.html na pasta de modelo (ou conteúdo) apropriada.

Um exemplo de definição:

<cq:responsive jcr:primaryType="nt:unstructured">
  <breakpoints jcr:primaryType="nt:unstructured">
    <phone jcr:primaryType="nt:unstructured" title="{String}Phone" width="{Decimal}768"/>
    <tablet jcr:primaryType="nt:unstructured" title="{String}Tablet" width="{Decimal}1200"/>
  </breakpoints>
</cq:responsive>

Adicionar um provedor de informações responsivo add-a-responsive-information-provider

Copie a seguinte estrutura de nó cq:infoProviders no componente da página pai:

/libs/foundation/components/page/cq:infoProviders/responsive

Ativar o redimensionamento de componentes para a página enable-component-resizing-for-the-page

Esses procedimentos são necessários para que você possa redimensionar componentes no modo Layout.

Definir contêiner de layout como parsys principal set-layout-container-as-main-parsys

Para definir o parsys principal da página para ser um contêiner de layout, defina o parsys como:

wcm/foundation/components/responsivegrid

Em:

Os dois exemplos a seguir ilustram a definição:

Incluir o CSS responsivo include-the-responsive-css

CSS para pontos de interrupção usando MENOS css-for-breakpoints-using-less

O AEM usa MENOS para gerar partes do CSS necessário, que precisam ser incluídas em seus projetos.

Você também deverá criar uma biblioteca do cliente para fornecer configuração e chamadas de função adicionais. A seguinte extração MENOS é um exemplo do mínimo que você deve adicionar ao seu projeto:

@import (once) "/libs/wcm/foundation/clientlibs/grid/grid_base.less";

/* maximum amount of grid cells to be provided */
@max_col: 12;

/* default breakpoint */
.aem-Grid {
  .generate-grid(default, @max_col);
}

/* phone breakpoint */
@media (max-width: 768px) {
  .aem-Grid {
    .generate-grid(phone, @max_col);
  }
}

/* tablet breakpoint */
@media (min-width: 769px) and (max-width: 1200px) {
  .aem-Grid {
    .generate-grid(tablet, @max_col);
  }
}

A definição da grade base pode ser encontrada em:

/libs/wcm/foundation/clientlibs/grid/grid_base.less

Considerações sobre estilo styling-considerations

Os componentes mantidos em um contêiner responsivo são redimensionados (juntamente com seus respectivos elementos DOM de HTML) de acordo com o tamanho da grade responsiva. Portanto, nessas circunstâncias, é recomendável evitar (ou atualizar) definições de elementos DOM de largura fixa (contidos).

Por exemplo:

Conformidade com redimensionamento e imagem adaptável resizing-and-adaptive-image-compliance

Qualquer redimensionamento de um componente na grade acionará os seguintes ouvintes, conforme apropriado:

Para redimensionar e atualizar corretamente o conteúdo de uma imagem adaptável incluída em uma grade responsiva, é necessário adicionar um conjunto afterEdit definido como ouvinte REFRESH_PAGE no arquivo EditConfig de cada componente contido.

Por exemplo:

<cq:listeners jcr:primaryType="cq:EditListenersConfig" afteredit="REFRESH_PAGE" />

O mecanismo de imagem adaptável é disponibilizado por meio de um script que controla a seleção da imagem correta para o tamanho atual da janela. Ela é ativada depois que o DOM está pronto ou ao receber um evento dedicado. Atualmente, a página deve ser atualizada para refletir corretamente o resultado da ação do usuário.

Ativar o componente de Contêiner de layout para a página enable-the-layout-container-component-for-page

Essas tarefas permitem que os autores arrastem instâncias do componente Contêiner de layout para a página.

Ativar o componente de Contêiner de layout para edição de página enable-the-layout-container-component-for-page-editing

Para permitir que os autores adicionem outras grades responsivas às páginas de conteúdo, é necessário ativar o componente Contêiner de layout para a página. Você pode fazer isso usando:

Configurar a grade do contêiner de layout configure-the-grid-of-the-layout-container

Você pode configurar o número de colunas disponíveis para cada instância específica do container de layout: