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

Diseño adaptable es un mecanismo para realizar diseño web adaptable.: esto permite al autor del contenido 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:

Activación del emulador enabling-emulator

El tipo de archivo del proyecto y la plantilla de sitio estándar ya están habilitados para usar el emulador. Si ha desarrollado su propio contenido no basado en los componentes principales o el tipo de archivo, consulte el documento Diseño interactivo para obtener detalles sobre cómo desarrollar los componentes mientras aprovecha estas funciones.

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

El modo Diseño le permite usar el emulador para ajustar el diseño del contenido para diferentes dispositivos. El sitio de muestra WKND ya está habilitado para el modo Diseño. Siga estos pasos para habilitar su propio sitio.

Configurar puntos de interrupción configure-breakpoints

Los puntos de interrupción son vitales para un diseño interactivo y definen cómo y cuándo se ajusta el contenido al dispositivo de destino. Sin embargo, tenga cuidado, ya que cada punto de interrupción que introduzca generará trabajo adicional para que los autores se adapten al contenido. Muchas veces, dos puntos de interrupción pueden ser suficientes, incluido el punto de interrupción predeterminado, que siempre está ahí. El Adobe recomienda no crear más de tres puntos de interrupción, incluido el predeterminado, es decir, no más de dos nodos por debajo de cq:responsive/breakpoint.

Los puntos de interrupción deben tenerse en cuenta tanto para los proyectos nuevos como para los existentes.

Debido a la herencia, solo debe hacerlo para la página raíz del contenido.

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>

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

Cambiar el tamaño de los componentes en el modo Layout es una parte importante del diseño interactivo que se puede utilizar en el sitio de muestra WKND. Siga estos pasos para habilitar su propio sitio.

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.

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

Para que el diseño sea eficaz, el autor del contenido debe poder arrastrar instancias del componente Contenedor de diseño a la página. Ya está habilitado para el sitio de muestra WKND. Siga estos pasos para habilitar su propio sitio.

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 editando las plantillas de página.