O AEM permite ter um layout responsivo em suas páginas usando o componente Contêiner de layout.
Este componente fornece um sistema de parágrafo que permite posicionar os componentes dentro de uma grade responsiva. Esta grade pode reorganizar o layout de acordo com o dispositivo/tamanho e formato da janela. O componente é utilizado em conjunto com o modo de Layout, que permite criar e editar o seu layout responsivo dependendo do dispositivo.
O contêiner de layout:
Fornece encaixe horizontal na grade, em conjunto com a capacidade de posicionar os componentes lado a lado na grade e definir quando devem se recolher/refluir.
Usa pontos de interrupção predefinidos (por exemplo para smartphone, tablet etc.) para permitir que você defina o comportamento obrigatório do conteúdo para dispositivos/orientações relacionados.
Podem ser aninhados para permitir o controle da coluna.
O usuário pode então ver como o conteúdo será processado para dispositivos específicos, usando o emulador.
Embora o componente do contêiner de layout esteja disponível na interface do usuário clássica, as suas funcionalidades estão disponíveis apenas na interface do usuário habilitada para toque.
O AEM permite um layout responsivo para suas páginas usando uma combinação de mecanismos:
Componente Contêiner de layout
Este componente está disponível no navegador de componentes e fornece um sistema de parágrafo de grade para que você possa adicionar e posicionar componentes em uma grade responsiva. Ele também pode ser definido como o sistema de parágrafos padrão na sua página.
Depois que o contêiner de layout é posicionado na página, você pode usar o modo Layout 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.
Com estes mecanismos de grade responsivos você pode:
Dependendo do projeto, o Contêiner de layout pode ser usado como o sistema de parágrafo padrão para suas páginas, ou como um componente disponível para ser adicionado à sua página por meio do navegador componente (ou ambos).
A Adobe fornece uma documentação de GitHub do layout responsivo como uma referência que pode ser fornecida para desenvolvedores front-end permitindo que usem a grade do AEM fora do AEM, por exemplo, ao criar modelos HTML estáticos para um site futuro do AEM.
O uso dos mecanismos acima é habilitado pela configuração no modelo. Consulte Configuração de layout responsivo para obter mais informações.
Ao criar o conteúdo do seu site, você quer garantir que o conteúdo seja exibido apropriadamente no dispositivo usado para exibi-lo.
O AEM permite que você defina layouts dependendo da largura do dispositivo:
O emulador permite que você emule esses layouts em vários dispositivos. Além do tipo de dispositivo, a orientação, selecionada pela opção Girar dispositivo, pode afetar o ponto de interrupção selecionado à medida que a largura muda.
Os pontos de interrupção são pontos que separam as definições de layout.
O dispositivo Desktop sem uma largura específica e que está relacionado ao ponto de interrupção padrão (isto é, todos os itens acima do último ponto de interrupção configurado).
Seria possível definir pontos de interrupção para cada dispositivo individual, mas isso aumentaria consideravelmente o trabalho necessário para a definição e a manutenção do layout.
Ao usar o emulador, é possível selecionar um dispositivo específico para emulação e definição de layout, sendo que o ponto de interrupção também será selecionado. Quaisquer alterações de layout efetuadas serão aplicáveis a outros dispositivos em que o ponto de interrupção se aplica, isto é, quaisquer dispositivos posicionados à esquerda do marcador do ponto de interrupção ativo, mas antes do próximo marcador do ponto de interrupção.
Por exemplo, com a seleção do dispositivo iPhone 6 Plus (definido com largura de 540 pixels) para emulação e layout, o ponto de interrupção Celular (definido como 768 pixels) também será ativado. Quaisquer mudanças de layout efetuadas para o iPhone 6 serão aplicáveis a outros dispositivos no ponto de interrupção Celulares, como o iPhone 5 (definido como 320 pixels).
Abra a página para edição. Por exemplo:
http://localhost:4502/editor.html/content/we-retail/us/en/experience.html
Selecione o ícone Emulador na barra de ferramentas superior:
A barra de ferramentas do emulador abre.
A barra de ferramentas do emulador exibe opções adicionais de layout:
Para selecionar um dispositivo específico a fim de emulá-lo, é possível:
Depois que um dispositivo específico é selecionado, você pode:
Um Contêiner de layout é um sistema de parágrafos que:
Se ainda não estiver disponível, o Contêiner de layout deve ser ativado explicitamente em um sistema/página de parágrafos (por exemplo, quando você usar o modo Design).
O Contêiner de layout está disponível como um componente padrão no Navegador de componentes. Aqui, você pode arrastá-lo até o local desejado na página, onde verá o espaço reservado Arrastar componentes aqui.
Em seguida, você pode adicionar componentes ao contêiner de layout. Esses componentes contêm o conteúdo real:
Assim como em outros componentes, você pode selecionar e executar ações (recortar, copiar ou excluir) em um Contêiner de layout (no modo Editar):
Como o contêiner de layout é um sistema de parágrafos, com a exclusão do componente a grade do layout e todos os componentes (e seu conteúdo) no contêiner são excluídos.
Se você tocar ou passar o mouse sobre o espaço reservado da grade, o menu de ação será exibido.
É preciso selecionar a opção Pai.
Se o componente de layout estiver aninhado, selecionar a opção Pai apresenta uma seleção suspensa, que permite que você selecione o contêiner aninhado do layout ou seus pais.
Quando você passa o mouse sobre os nomes de contêiner na lista suspensa, os contornos correspondentes serão exibidos na página.
Essa ação destacará a grade inteira e seu conteúdo. A barra de ferramentas da ação será exibida e aqui você pode selecionar uma ação, como Excluir.
Você pode definir um layout separado para cada ponto de interrupção (como determinado pelo tipo e pela orientação do dispositivo emulado).
Para configurar o layout de uma grade responsiva implementada com o Contêiner de layout, use o modo Layout.
O modo Layout pode ser iniciado de duas maneiras.
Ao usar o modo de menu na barra de ferramentas e escolher o modo Layout
Ao editar um componente individual.
No modo de layout, é possível executar várias ações em uma grade:
Redimensione os componentes do conteúdo usando os pontos azuis. O redimensionamento sempre se ajusta à grade. A grade do fundo será exibida quando você redimensionar para auxiliar no alinhamento:
As proporções e as taxas são mantidas quando os componentes como Imagens são redimensionados.
Clique/toque em um componente de conteúdo, a barra de ferramenta permite que você:
Pai
Permite que você selecione o componente do contêiner de layout inteiro para executar uma ação em tudo.
Flutuar até a nova linha
O componente será movido para uma nova linha, dependendo do espaço disponível na grade.
Ocultar componente
O componente ficará invisível (ele pode ser restaurado na barra de ferramentas do contêiner de layout).
No modo Layout, você pode tocar/clicar em Arrastar componentes aqui para selecionar o componente inteiro. Isso mostrará a barra de ferramentas para este modo.
A barra de ferramentas tem opções diferentes, dependendo do status do componente de layout e componentes que pertencem a ela. Por exemplo:
No exemplo acima, as ações flutuar e ocultar estão disponíveis porque este Contêiner de layout está aninhado em um Contêiner de layout pai.
Selecionar a opção Mostrar componentes ocultos exibirá em azul os componentes que estão ocultos no momento em suas posições originais.
Selecionar Restaurar tudo revelará todos os componentes ocultos.