Configuração do contêiner de layout e modo de layout

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

OBSERVAÇÃO

Isso pode ser comparado à variável Web móvel mecanismos que usam web design adaptável (principalmente para a interface clássica).

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

  • Componente Contêiner de layout

    Este componente fornece um sistema de parágrafo que usa grades, para que você possa adicionar e posicionar componentes dentro de uma grade responsiva . Ele pode ser usado como o parsys padrão para sua página e/ou disponibilizado para autores no navegador de componentes.

    • O padrão Contêiner de layout O componente é definido em:

      /libs/wcm/foundation/components/responsivegrid

    • É possível definir contêineres de layout:

      • Como um componente que o usuário pode adicionar a uma página.

      • Como o parsys padrão da página.

      • Ambos.

        Você pode ter o contêiner de layout como padrão para a página, permitindo que o usuário adicione outros contêineres de layout dentro desta; por exemplo, para obter o controle da coluna.

  • Modo de layout
    Depois que o contêiner de layout é posicionado na página, você pode usar a variável
    Layout modo para posicionar conteúdo na grade responsiva.

  • Emulador
    Permite criar e editar sites responsivos que reorganizam o layout de acordo com o tamanho do dispositivo ou da janela, redimensionando componentes interativamente. O usuário pode observar como o conteúdo será renderizado utilizando o Emulador.

ATENÇÃO

Embora a variável Contêiner de layout estiver disponível na interface clássica, a funcionalidade completa só estará disponível na interface habilitada para toque.

Com estes mecanismos de grade responsivos você pode:

  • Use pontos de interrupção (que indicam agrupamento de dispositivos) para definir um comportamento de conteúdo diferente com base no layout do dispositivo.
  • Ocultar componentes com base no grupo de dispositivos (definir em qual ponto de interrupção um componente ficará oculto).
  • Usar o alinhamento com a grade (colocar componentes na grade, redimensionar como necessário, definir quando devem ser recolhidos/refluir para ficarem lado a lado ou acima/abaixo).
  • Executar o controle da coluna.
OBSERVAÇÃO

Em uma instalação pronta para uso, o layout responsivo foi configurado para a variável Site de referência We.Retail. Você ainda deve ativar o componente Contêiner de layout para outras páginas.

Configuração do emulador responsivo

Essas tarefas permitem que você veja o Emulador no seu site.

Registrar os componentes da página para emulação

Para habilitar o emulador para suportar suas páginas, você deve registrar os componentes da página. Consulte Registrar componentes de página para simulação.

Especificar os grupos de dispositivos

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

Para incluir o emulador, você precisa vincular seu site aos grupos de dispositivos. Consulte Adicionar a lista de dispositivos (para a interface clássica e a interface otimizada para toque).

Ativar o modo de layout para seu site

Esses procedimentos são usados para ativar a variável Layout no seu site.

Configurar os pontos de interrupção

Pontos de interrupção:

  • São usadas em design responsivo.

  • Pode ser definido:

    • No modelo da página, de onde as configurações serão copiadas para qualquer página criada com esse modelo.
    • No nó da página, de onde as configurações serão herdadas por qualquer página secundária.
  • Defina um título e uma largura:

    • O título descreve o agrupamento genérico de dispositivos, com orientação, se necessário; por exemplo, telefone, tablet, paisagem de tablet.
    • A largura define a largura máxima em pixels para o agrupamento de dispositivos genérico. Por exemplo, se o telefone do ponto de interrupção tiver uma largura de 768, ele terá a largura máxima do layout usado para um dispositivo de telefone.
  • São visíveis como marcadores na parte superior do editor de páginas quando você está usando o emulador.

  • São herdadas da hierarquia do nó pai e podem ser substituídas como desejado.

  • Há um ponto de interrupção padrão (pronto para uso) que cobre tudo acima da última configurado ponto de interrupção.

Eles podem ser definidos usando CRXDE Lite ou XML.

OBSERVAÇÃO

Se você estiver configurando um novo projeto:

  • é necessário adicionar pontos de interrupção aos modelos.

Se você estiver migrando um projeto existente (com conteúdo existente), será necessário:

  • adicionar pontos de interrupção aos modelos

  • adicionar os mesmos pontos de interrupção às páginas existentes

    Como a herança está em operação, você pode limitar isso à página raiz do seu conteúdo.

Configuração de pontos de interrupção usando o CRXDE Lite

  1. Usando o CRXDE Lite (ou equivalente), navegue até:

    • Sua definição de modelo.
    • O jcr:content da página.
  2. Em jcr:content crie o nó :

    • Nome: cq:responsive
    • Tipo: nt:unstructured
  3. Sob isso, crie o nó :

    • Nome: breakpoints
    • Tipo: nt:unstructured
  4. No nó pontos de interrupção , é possível criar qualquer número de pontos de interrupção. Cada definição é um único nó com as seguintes propriedades:

    • Nome: <descriptive name>
    • Tipo: nt:unstructured
    • Título: String * <descriptive title seen in Emulator>*
    • Largura: Decimal * <value of breakpoint>*

Configuração de pontos de interrupção usando XML

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

Uma definição de exemplo:

<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

OBSERVAÇÃO

Isso só será necessário se o componente de página não for baseado no componente de página de base.

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

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

Ativar o redimensionamento de componentes para a página

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

Definir Contêiner de Layout como Parsys Principal

Para definir o parsys principal de sua página como um contêiner de layout, você precisa definir o parsys como:

wcm/foundation/components/responsivegrid

Em qualquer uma das situações:

  • Componente de página
  • Modelo de página (para uso futuro)

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

  • HTL:

    <sly data-sly-resource="${'par' @ resourceType='wcm/foundation/components/responsivegrid'}/>
    
  • JSP:

    <cq:include path="par" resourceType="wcm/foundation/components/responsivegrid" />
    

Inclua o CSS responsivo

CSS para pontos de interrupção usando MENOS

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

Você também precisará criar um 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ê precisa 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

Os componentes mantidos em um contêiner responsivo serão redimensionados (junto com seus respectivos elementos HTML DOM) 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:

  • Antes:

    • width=100px
  • Depois:

    • max-width=100px

Redimensionamento e conformidade com imagens adaptáveis

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

  • beforeedit

  • beforechildedit

  • afteredit

  • afterchildedit

Para redimensionar e atualizar adequadamente o conteúdo de uma imagem adaptável incluída em uma grade responsiva, é necessário adicionar um afterEdit defina como REFRESH_PAGE ouvinte no 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. Ele é ativado depois que o DOM está pronto ou ao receber um evento dedicado. Atualmente, a página deve ser atualizada para refletir adequadamente o resultado da ação do usuário.

ATENÇÃO

As clientlibs da folha de estilos personalizada devem ser carregadas como parte do cabeçalho para que funcionem corretamente no autor e na publicação.

Ativar o componente Contêiner de layout para a página

Essas tarefas permitem que os autores arraste instâncias da variável Contêiner de layout na página.

Ativar o componente do contêiner de layout para edição de página

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:

  • Ambiente de criação

    Use Modo de design para ativar o Contêiner de camada para uma página.

  • Definição do componente

    Use allowedComponent ou uma inclusão estática ao definir o componente.

Configurar a grade do Contêiner de layout

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

  1. Ambiente de criação

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

    Para fazer isso, use Modo de design, em seguida, abra a caixa de diálogo de design do contêiner necessário. Aqui, é possível especificar quantas colunas estarão disponíveis para posicionamento e dimensionamento. O padrão é 12.

  2. XML

    As definições para a grade responsiva são especificadas em:

    etc/design/<*your-project-name*>/.content.xml

    Os seguintes parâmetros podem ser definidos:

    • Número de colunas disponíveis:

      • columns="{String}8"
    • Componentes que podem ser adicionados ao componente atual:

      • components="[/libs/wcm/foundation/components/responsivegrid, ...

Nesta página