O AEM permite que você tenha um layout responsivo para suas páginas usando o Contêiner de layout componente.
Isso fornece um sistema de parágrafo que permite posicionar componentes em uma grade responsiva. Essa grade pode reorganizar o layout de acordo com o tamanho e o formato do dispositivo/janela. O componente é usado em conjunto com o Layout modo, que permite criar e editar o layout responsivo dependendo do dispositivo.
O container de layout:
Fornece a opção de encaixe horizontal na grade, juntamente com a capacidade de posicionar componentes lado a lado na grade e definir quando devem ser recolhidos/refluídos.
Usa pontos de interrupção predefinidos (por exemplo para telefone, tablet etc.) para permitir que você defina o comportamento necessário do conteúdo para dispositivos/orientação relacionados.
Pode ser aninhado para permitir o controle de coluna.
O usuário pode ver como o conteúdo será renderizado para dispositivos específicos usando o emulador.
Embora o componente de Contêiner de layout esteja disponível na interface clássica, sua funcionalidade completa só está disponível e é compatível na interface 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 O e o fornecem um sistema de parágrafo de grade para permitir 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 container de layout é posicionado na página, você pode usar o modo Layout para posicionar conteúdo na grade responsiva.
Emulador
Isso 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 ver como o conteúdo será renderizado usando o emulador.
Com esses 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 definir layouts dependendo da largura do dispositivo:
O emulador permite simular 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, você seleciona um dispositivo específico para emulação e definição de layout e o ponto de interrupção relacionado também será destacado. 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, ao selecionar o dispositivo iPhone 6 Plus (definido com uma largura de 540 pixels) para emulação e layout, o ponto de interrupção Telefone (definido como 768 pixels) também será ativado. Quaisquer alterações de layout feitas na IPHONE 6 serão aplicáveis a outros dispositivos no âmbito do Telefones ponto de interrupção, como IPHONE 5 (definido como 320 pixels).
Abra a página que deseja editar. 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:
Girar dispositivo - Permite girar um dispositivo de orientação vertical (retrato) para a orientação horizontal (paisagem) e vice-versa.
Selecionar dispositivo - defina um dispositivo específico para emular de uma lista (consulte a próxima etapa para obter detalhes)
Para selecionar um dispositivo específico para emular, você pode:
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, a variável Contêiner de layout deve ser explicitamente ativado para um sistema/página de parágrafo (por exemplo, usando Design modo).
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 container de layout. Esses componentes conterão 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):
Visto que um container de layout é um sistema de parágrafo, a exclusão do componente excluirá a grade de layout e todos os componentes (e seu conteúdo) inclusos no container.
Se você passar o mouse sobre ou tocar no 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, selecione o Pai A opção apresenta uma seleção suspensa, que permite selecionar o contêiner de layout aninhado ou seu(s) pai(s).
Ao passar o mouse sobre os nomes do container no menu suspenso, suas estruturas de tópicos serão exibidas 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.
Quando estiver no modo de layout, você poderá executar várias ações em uma grade:
Redimensione os componentes de conteúdo usando os pontos azuis. O redimensionamento sempre se ajustará à grade. Ao redimensionar a grade de plano de fundo, será mostrado para auxiliar o 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 ferramentas permite:
Pai
Permite selecionar 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 esse modo.
A barra de ferramentas terá opções diferentes dependendo do estado do componente de layout e dos componentes que pertencem a ele. Por exemplo:
Pai - seleciona o componente do pai.
Mostrar componentes ocultos - Revelar todos os componentes ou componentes individuais. O número indica quantos componentes ocultos há atualmente. o contador mostra quantos componentes estão ocultos.
Reverter layout do ponto de interrupção - reverte para o layout padrão. Ou seja, nenhum layout personalizado será imposto.
Flutuar para uma nova linha - move o componente uma posição acima, se o espaço permitir.
Ocultar componente - oculta o componente atual.
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.
Revelar componentes Selecione os componentes principais para mostrar a barra de ferramentas de ação com a opção Mostrar componentes ocultos. Neste exemplo, dois componentes estão ocultos.
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.