Configuración del contenedor de diseño 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 que dependen 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:

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

Estas tareas le permiten ver las Emulador del sitio.

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

Para permitir que el emulador admita sus páginas, debe registrar los componentes de la página. Consulte Registro de componentes de página para la 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 grupos de dispositivos especificados link-your-site-to-the-specified-device-groups

Para incluir el simulador, debe vincular el sitio a los grupos de dispositivos. Consulte Adición de la lista de dispositivos (para la IU clásica y la táctil optimizada).

Activar el modo de diseño del sitio activate-layout-mode-for-your-site

Estos procedimientos se utilizan para habilitar la variable Diseño en el sitio.

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

Puntos de interrupción:

Pueden definirse mediante CRXDE Lite o XML.

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

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

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

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>

Agregar un proveedor de información adaptable add-a-responsive-information-provider

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

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

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

Estos procedimientos son necesarios para que pueda cambiar el tamaño de los componentes en la variable Diseño en el menú contextual.

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

Para que el parsys principal de su página sea un contenedor de diseño, debe definir el parsys como:

wcm/foundation/components/responsivegrid

En:

Los dos ejemplos siguientes ilustran la definición:

Incluir el CSS adaptable include-the-responsive-css

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

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

También deberá crear un biblioteca cliente para proporcionar configuración adicional y llamadas a funciones. El siguiente extracto LESS es un ejemplo del mínimo que debe añadir 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 cuadrícula base se encuentra en:

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

Consideraciones sobre el estilo styling-considerations

Se cambiará el tamaño de los componentes que se mantengan dentro de un contenedor interactivo (junto con sus respectivos elementos DOM de HTML) según el tamaño de cuadrícula adaptable. 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 conformidad con la imagen adaptable resizing-and-adaptive-image-compliance

Cualquier cambio de tamaño de un componente dentro de la cuadrícula dará déclencheur a 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 añadir una afterEdit configure como REFRESH_PAGE al EditConfig archivo 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 al recibir 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 Contenedor de diseño en 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 cuadrículas adaptables adicionales a las páginas de contenido, debe habilitar el componente Contenedor de diseño para la página. Puede hacerlo mediante:

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: