Show Menu
TEMAS×

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

Diseño interactivo es un mecanismo para realizar diseños web interactivos. Esto permite al usuario crear páginas web con un diseño y unas dimensiones que dependen de los dispositivos que utilizan los usuarios.
Esto se puede comparar con los mecanismos web Web para móvil móviles, que utilizan el 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:
  • 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 y/o ponerlo a disposición de los autores en el navegador de componentes.
    • El componente Diseño predeterminado de Contenedor se define en:
      /libs/wcm/foundation/components/responsivegrid
    • Puede definir contenedores de diseño:
      • Como componente que el usuario puede agregar a una página.
      • Como parámetro predeterminado para la página.
      • Ambas.
        Puede tener el contenedor de diseño como estándar para la página, a la vez que permite al usuario agregar más contenedores de diseño dentro de este; por ejemplo, para obtener el control de columna.
  • Modo ​de diseño Una vez colocado el contenedor de diseño en la página, puede utilizar el modo Diseño ​para colocar el contenido en la cuadrícula adaptable.
  • 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.
Although the Layout Container component is available in the classic UI, its full functionality is only available in the touch-enabled UI.
Estos mecanismos de cuadrícula interactiva le permiten:
  • Utilice puntos de interrupción (que indican la agrupación de dispositivos) para definir un comportamiento de contenido diferente según el diseño del dispositivo.
  • Ocultar componentes según el 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.
En una instalación lista para usar, se ha configurado un diseño interactivo para el sitio de referencia We.Retail. Aún debe activar el componente Contenedor de diseño para otras páginas.

Configuración del emulador interactivo

Estas tareas le permiten ver el emulador interactivo en su sitio.

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

Para habilitar el emulador para admitir las páginas, debe registrar los componentes de la página. Consulte Registro de componentes de página para obtener Simulaciones .

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.

Activar el modo de diseño del sitio

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

Configurar los puntos de interrupción

  • Se utilizan en diseños interactivos.
  • Se puede definir:
    • En la plantilla de página, desde donde se copiará la configuración en cualquier página creada con esa plantilla.
    • En el nodo de página, desde donde cualquier página secundaria heredará la configuración.
  • Defina un título y una anchura:
    • En el título se describe la agrupación genérica del dispositivo, con la orientación, si es necesario; por ejemplo, teléfono, tablet, 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 la anchura máxima del diseño utilizado para un dispositivo móvil.
  • Son visibles como marcadores en la parte superior del editor de páginas cuando se utiliza el emulador.
  • Se heredan de la jerarquía del nodo principal y se pueden anular a voluntad.
  • Hay un punto de interrupción predeterminado (predeterminado) que cubre todo lo que se encuentra por encima del último punto de interrupción configurado .
Se pueden definir con CRXDE Lite o XML.
Si va a configurar un nuevo proyecto:
  • debe agregar puntos de interrupción a las plantillas.
Si va a migrar un proyecto existente (con contenido existente), debe:
  • agregar 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 con CRXDE Lite

  1. Con CRXDE Lite (o equivalente), navegue hasta:
    • La definición de la plantilla.
    • El jcr:content nodo de la página.
  2. En jcr:content Crear el nodo:
    • Nombre: cq:responsive
    • Tipo: nt:unstructured
  3. En este campo, 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 <jcr:content> sección de la .context.html 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>

Añadir un proveedor de información adaptable

Esto solo es necesario si el componente de página no se basa en el componente de página de base.
Copie la siguiente estructura de cq:infoProviders nodos 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

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

Para que el parámetro principal de la página sea un contenedor de diseño, debe definir 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 MENOS

AEM utiliza MENOS para generar partes de la CSS necesaria, que deben incluirse en los proyectos.
También deberá crear una biblioteca de cliente para proporcionar configuración adicional y llamadas a funciones. 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 cuadrícula base se encuentra en:
/libs/wcm/foundation/clientlibs/grid/grid_base.less

Consideraciones sobre el estilo

Los componentes contenidos en un contenedor interactivo se cambiarán de tamaño (junto con sus respectivos elementos DOM HTML) según el tamaño de cuadrícula adaptable. Por lo tanto, en estas circunstancias, se recomienda evitar (o actualizar) definiciones de elementos DOM de ancho fijo (contenidos).
Por ejemplo:
  • Antes:
    • width=100px
  • Después:
    • max-width=100px

Cambio de tamaño y compatibilidad con imágenes adaptables

Si cambia el tamaño de un componente dentro de la cuadrícula, se activarán 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 agregar un afterEdit conjunto para REFRESH_PAGE oyente 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 mediante una secuencia de comandos que controla la selección de la imagen correcta para el tamaño actual de la ventana. Se activa cuando el DOM está listo o cuando recibe un evento dedicado. Actualmente, la página debe actualizarse para reflejar correctamente el resultado de la acción del usuario.
Los clientes 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 componente Contenedor de diseño a 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
    Utilice el modo Configurar componentes en modo Diseño Diseño para activar el componente Contenedor de capa para una página.
  • Definición de componente
    Utilice allowedComponent o una inclusión estática al definir el componente.

Configuración de la cuadrícula del Contenedor 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 el modo Configurar componentes en modo Diseño Diseño y, a continuación, abra el cuadro de diálogo de diseño para el contenedor requerido. Aquí puede especificar cuántas columnas estarán disponibles para la colocación y el tamaño. El valor predeterminado es 12.
  2. XML
    Las definiciones de la cuadrícula adaptable 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 agregar al componente actual:
      • components="[/libs/wcm/foundation/components/responsivegrid, ...