Configuración del contenedor de diseño y el modo de diseño

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.

NOTA

Esto se puede comparar con la variable Web móvil que utilizan diseño web adaptable (principalmente para la IU clásica).

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

  • Componente Contenedor de diseño

    Este componente proporciona un sistema de párrafos de cuadrícula que le permite añadir y colocar componentes en una cuadrícula interactiva. Se puede utilizar como parsys predeterminado para la página o ponerlo a disposición de los autores en el navegador de componentes.

    • El valor predeterminado Contenedor de diseño se define en:

      /libs/wcm/foundation/components/responsivegrid

    • Puede definir contenedores de diseño:

      • Como componente que el usuario puede añadir a una página.

      • Como parsys predeterminado para la página.

      • Ambas.

        Puede tener el contenedor de diseño como estándar para la página, mientras permite al usuario agregar más contenedores de diseño dentro de esto; por ejemplo, para conseguir el control de columnas.

  • Modo de diseño
    Una vez que el contenedor de diseño esté colocado en la página, puede usar la variable
    Diseño para colocar el contenido en la cuadrícula interactiva.

  • Emulador Esta opción le permite crear y editar sitios web adaptables que reorganizan el diseño en función del tamaño del dispositivo o la ventana, mediante el redimensionado activo de los componentes. El usuario puede utilizar el emulador para ver cómo se representará el contenido.

PRECAUCIÓN

Aunque la variable Contenedor de diseño está disponible en la IU clásica; su funcionalidad completa solo está disponible en la IU táctil.

Estos mecanismos de cuadrícula interactiva le permiten:

  • Utilice puntos de interrupción (que indican la agrupación del dispositivo) para definir el comportamiento de contenido diferente en función del diseño del dispositivo.
  • Ocultar componentes en función del grupo de dispositivos (definir en qué punto de interrupción se ocultará un componente).
  • Utilizar el ajuste horizontal a la cuadrícula (colocar componentes en la cuadrícula, cambiar su tamaño según sea necesario, definir cuándo deben contraerse o redistribuirse lateralmente o arriba/abajo).
  • Realizar el control de columnas.
NOTA

En una instalación predeterminada, se ha configurado un diseño interactivo para la variable Sitio de referencia de We.Retail. Aún debe activación del componente Contenedor de diseño para otras páginas.

Configuración del emulador interactivo

Estas tareas le permiten ver las Emulador del sitio.

Registre los componentes de la página para emulación

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

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

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

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

Configuración de los puntos de interrupción

Puntos de interrupción:

  • Se utilizan en el diseño interactivo.

  • Se puede definir:

    • En la plantilla de página, desde donde se copiará la configuración a cualquier página creada con esa plantilla.
    • En el nodo de página, desde el que cualquier página secundaria heredará la configuración.
  • Defina un título y una anchura:

    • El título describe la agrupación genérica del dispositivo, con la orientación si es necesario; por ejemplo, teléfono, tableta, tabla horizontal.
    • La anchura define la anchura máxima en píxeles para esa agrupación de dispositivos genérica. Por ejemplo, si el teléfono de punto de interrupción tiene una anchura de 768, entonces es la anchura máxima del diseño utilizado para un dispositivo móvil.
  • Se pueden ver como marcadores en la parte superior del editor de páginas al usar el emulador.

  • Se heredan de la jerarquía del nodo principal y se pueden sobrescribir a voluntad.

  • Hay un punto de interrupción predeterminado (predeterminado) que cubre todo lo que está por encima del último configurado punto de interrupción.

Pueden definirse mediante CRXDE Lite o XML.

NOTA

Si está configurando un nuevo proyecto:

  • debe añadir puntos de interrupción a las plantillas.

Si está migrando un proyecto existente (con contenido existente), debe:

  • añadir puntos de interrupción a las plantillas

  • agregar los mismos puntos de interrupción a las páginas existentes

    Como la herencia está en funcionamiento, puede limitarla a la página raíz del contenido.

Configuración de puntos de interrupción mediante el CRXDE Lite

  1. Con el CRXDE Lite (o equivalente), vaya a:

    • La definición de la plantilla.
    • La variable jcr:content de su página.
  2. En jcr:content cree el nodo :

    • Nombre: cq:responsive
    • Tipo: nt:unstructured
  3. En esto, cree el nodo :

    • Nombre: breakpoints
    • Tipo: nt:unstructured
  4. En el nodo de puntos de interrupción puede crear cualquier número de puntos de interrupción. Cada definición es un nodo único con las siguientes propiedades:

    • Nombre: <descriptive name>
    • Tipo: nt:unstructured
    • Título: String * <descriptive title seen in Emulator>*
    • Anchura: Decimal * <value of breakpoint>*

Configuración de puntos de interrupción mediante 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

NOTA

Esto solo es necesario si el componente de página no se basa en el componente de página base.

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

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

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:

  • Componente de página
  • Plantilla de página (para uso futuro)

Los dos ejemplos siguientes ilustran la definición:

  • HTL:

    <sly data-sly-resource="${'par' @ resourceType='wcm/foundation/components/responsivegrid'}/>
    
  • JSP:

    <cq:include path="par" resourceType="wcm/foundation/components/responsivegrid" />
    

Incluir el CSS adaptable

CSS para puntos de interrupción que utilizan 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

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:

  • Antes:

    • width=100px
  • Después:

    • max-width=100px

Cambio de tamaño y conformidad con la imagen adaptable

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

  • beforeedit

  • beforechildedit

  • afteredit

  • afterchildedit

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.

PRECAUCIÓN

Los clientlibs de hojas de estilo personalizadas deben cargarse como parte del encabezado para que funcionen correctamente en el autor y en la publicación.

Habilitar el componente Contenedor de diseño para la página

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

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:

  • Entorno de creación

    Uso Modo de diseño para activar el Contenedor de capa para una página.

  • Definición de componentes

    Uso allowedComponent o una inclusión estática al definir el componente.

Configuración de la cuadrícula del contenedor de diseño

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

  1. Entorno de creación

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

    Para ello, utilice Modo de diseñoy, a continuación, abra el cuadro de diálogo de diseño del contenedor requerido. Aquí puede especificar cuántas columnas estarán disponibles para su colocación y ajuste de tamaño. El valor predeterminado es 12.

  2. XML

    Las definiciones de la cuadrícula interactiva se especifican en:

    etc/design/<*your-project-name*>/.content.xml

    Se pueden definir los siguientes parámetros:

    • Número de columnas disponibles:

      • columns="{String}8"
    • Componentes que se pueden añadir al componente actual:

      • components="[/libs/wcm/foundation/components/responsivegrid, ...

En esta página