Configuración del contenedor y el modo de diseño configuring-layout-container-and-layout-mode

Diseño interactivo es un mecanismo para realizar diseño web interactivo. Esto permite al usuario crear páginas web con un diseño y dimensiones dependientes de los dispositivos que utilizan sus usuarios.

AEM realiza un diseño interactivo para sus páginas mediante una combinación de diferentes mecanismos:

Con estos mecanismos de cuadrícula adaptable puede hacer lo siguiente:

Configuración del emulador interactivo configuring-the-responsive-emulator

Esta tarea le permite ver el emulador adaptable en el sitio.

Registre los componentes de la página para su emulación register-your-page-components-for-emulation

Para permitir que el emulador admita las páginas, debe registrar los componentes de la página. Consulte Registro de componentes de página para simulación.

Especificar los grupos de dispositivos specify-the-device-groups

Para especificar los grupos de dispositivos que aparecen en la lista Dispositivos del emulador, consulte Especificación de los grupos de dispositivos.

Vincular el sitio a los grupos de dispositivos especificados link-your-site-to-the-specified-device-groups

Para incluir el emulador, vincule el sitio a los grupos de dispositivos. Consulte Agregar la lista de dispositivos (para la IU clásica y la UI táctil optimizada).

Activar el modo Diseño para su sitio activate-layout-mode-for-your-site

Estos procedimientos se utilizan para habilitar el modo Layout en el sitio.

Configuración de los puntos de interrupción configure-the-breakpoints

Puntos de interrupción:

Se pueden definir utilizando CRXDE Lite o XML.

Configuración de puntos de interrupción mediante CRXDE Lite configuring-breakpoints-using-crxde-lite

Configurar puntos de interrupción mediante XML configuring-breakpoints-using-xml

Los puntos de interrupción se encuentran dentro de la sección <jcr:content> de .context.html en la carpeta de plantilla (o contenido) adecuada.

Una definición de ejemplo:

<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>

Añadir un proveedor de información interactivo add-a-responsive-information-provider

Copie la siguiente estructura de nodos cq:infoProviders en el componente de página principal:

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

Habilitar el cambio de tamaño del componente para la página enable-component-resizing-for-the-page

Estos procedimientos son necesarios para poder cambiar el tamaño de los componentes en el modo Diseño.

Definir contenedor de diseño como parsys principal set-layout-container-as-main-parsys

Para establecer que el parsys principal de la página sea un contenedor de diseño, defina el parsys como:

wcm/foundation/components/responsivegrid

En:

Los dos ejemplos siguientes ilustran la definición:

Incluir CSS interactivo include-the-responsive-css

CSS para puntos de interrupción con LESS css-for-breakpoints-using-less

AEM Utiliza LESS para generar partes del CSS necesario, que deben incluirse para los proyectos.

También debe crear una biblioteca de cliente para proporcionar configuraciones y llamadas a funciones adicionales. El siguiente extracto LESS es un ejemplo del mínimo que debe agregar al proyecto:

@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);
  }
}

La definición de la cuadrícula base se encuentra en:

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

Consideraciones de estilo styling-considerations

Los componentes contenidos en un contenedor interactivo cambian de tamaño (junto con sus respectivos elementos DOM HTML) según el tamaño de la cuadrícula interactiva. Por lo tanto, en estas circunstancias, se recomienda evitar (o actualizar) las definiciones de elementos DOM de ancho fijo (contenidos).

Por ejemplo:

Cambio de tamaño y compatibilidad con imágenes adaptables resizing-and-adaptive-image-compliance

Cualquier cambio de tamaño de un componente dentro de la cuadrícula almacenará en déclencheur los siguientes oyentes según corresponda:

Para cambiar el tamaño y actualizar correctamente el contenido de una imagen adaptable incluida en una cuadrícula adaptable, debe agregar un objeto de escucha afterEdit establecido en REFRESH_PAGE al archivo EditConfig de cada componente contenido.

Por ejemplo:

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

El mecanismo de imagen adaptable está disponible a través de una secuencia de comandos que controla la selección de la imagen correcta para el tamaño actual de la ventana. Se activa después de que el DOM esté listo o cuando se recibe un evento dedicado. Actualmente, la página debe actualizarse para reflejar correctamente el resultado de la acción del usuario.

Habilitar el componente Contenedor de diseño para la página enable-the-layout-container-component-for-page

Estas tareas permiten a los autores arrastrar instancias del componente Contenedor de diseño a la página.

Habilitar el componente Contenedor de diseño para la edición de páginas enable-the-layout-container-component-for-page-editing

Para permitir que los autores agreguen más cuadrículas adaptables a las páginas de contenido, debe habilitar el componente Contenedor de diseño para su página. Para ello, utilice uno de los métodos siguientes:

Configuración de la cuadrícula del contenedor de diseño configure-the-grid-of-the-layout-container

Puede configurar el número de columnas disponibles para cada instancia específica del contenedor de diseño: