Pontos de interrupção responsivos

Saiba como configurar novos pontos de interrupção responsivos para o Editor de página responsivo AEM.

Criar pontos de interrupção de CSS

Primeiro, crie pontos de interrupção de mídia no CSS da Grade responsiva do AEM ao qual o site responsivo do AEM adere.

No arquivo /ui.apps/src/main/content/jcr_root/apps/[app name]/clientlibs/clientlib-grid/less/grid.less, crie seus pontos de interrupção para serem usados junto com o emulador móvel. Anote o max-width para cada ponto de interrupção, pois isso mapeia os pontos de interrupção de CSS para os pontos de interrupção responsivos do Editor de página do AEM.

Personalizar os pontos de interrupção do modelo

Abra o arquivo ui.content/src/main/content/jcr_root/conf/<app name>/settings/wcm/templates/page-content/structure/.content.xml e atualize cq:responsive/breakpoints com suas novas definições de nó de ponto de interrupção. Cada ponto de interrupção de CSS deve ter um nó correspondente em breakpoints com sua propriedade width definida como max-width do ponto de interrupção de CSS.

Criar emuladores

Os emuladores de AEM devem ser definidos para permitir que os autores selecionem a visualização responsiva para editar no Editor de páginas.

Criar nós de emuladores em /ui.apps/src/main/content/jcr_root/apps/<app name>/emulators

Por exemplo, /ui.apps/src/main/content/jcr_root/apps/wknd-examples/emulators/phone-landscape. Copie um nó do emulador de referência de /libs/wcm/mobile/components/emulators no CRXDE Lite para e atualize a cópia para expedir a definição do nó.

Criar grupo de dispositivos

Agrupar os emuladores para disponibilizá-los no Editor de Páginas do AEM.

Crie a estrutura do nó /apps/settings/mobile/groups/<name of device group> em /ui.apps/src/main/content/jcr_root.

Crie um arquivo .content.xml em /apps/settings/mobile/groups/<device group name> e defina
os novos emuladores usando um código semelhante ao abaixo:

Atualizar o grupo de dispositivos do modelo

Por fim, mapeie o grupo de dispositivos de volta ao modelo de página para que os emuladores estejam disponíveis no Editor de páginas para páginas criadas com base nesse modelo.

Abra o arquivo ui.content/src/main/content/jcr_root/conf/[app name]/settings/wcm/templates/page-content/structure/.content.xml e atualize a propriedade cq:deviceGroups para fazer referência ao novo grupo móvel (por exemplo, cq:deviceGroups="[mobile/groups/customdevices]")