Crear plantillas personalizadas para diseños de varias zonas creating-custom-templates-multizone
Esta página muestra cómo puede crear una plantilla personalizada para un diseño de varias zonas.
Consideraciones importantes considerations
Hay dos consideraciones importantes que debe tener en cuenta antes de crear una plantilla personalizada en un diseño de varias zonas:
-
Tamaño de píxel fijo o porcentajes:
Decida si desea utilizar un tamaño de píxel fijo para diferentes zonas del diseño personalizado o si desea crear un diseño personalizado utilizando porcentajes.
note note NOTE La ventaja de utilizar percentage para establecer zonas para el diseño personalizado permite reutilizar la plantilla en varios tamaños de pantalla. -
Convención de nombres:
Ayuda a comprender cómo crear plantillas de varias zonas personalizadas para utilizarlas en un proyecto de AEM Screens. Pero primero, debe comprender el lenguaje de las plantillas que desea crear.
table 0-row-2 1-row-2 2-row-2 3-row-2 Nombre de diseño Descripción Left20-LandscapeHD3Zone
Diseño horizontal de tres zonas que le permite crear tres zonas:
* Zona 1 como 20% de la pantalla horizontal y vertical desde la izquierda
* Zona 2 como 80% de la pantalla horizontal y 20% de la pantalla vertical justificada a la derecha
* Zona 3 como 100% de la pantalla horizontal y 80% de la pantalla vertical. La relación de aspecto es de 16:9Upper20-PortraitHD2Zone
Una plantilla vertical de dos zonas que cubre el 20% de la pantalla desde la parte superior, con una relación de aspecto de 16:9 Right20-LandscapeSD3Zone
Una plantilla de tres zonas que cubre el 20 % de la pantalla desde la derecha, con una relación de aspecto de 4:3 note important IMPORTANT Es posible que las zonas definidas dentro del diseño personalizado no coincidan con la relación de aspecto general de todo el diseño. La convención de nombres que se sigue en este documento especifica la proporción de aspecto del diseño personalizado en su conjunto.
Ejemplo de caso de uso Left20-LandscapeHD3Zone
Diseño custom-template-one
Siga la sección siguiente para crear una plantilla personalizada Left20-LandscapeHD3Zone
con la configuración siguiente:
Left20
: la zona superior izquierda que cubre el 20 % del tamaño horizontal y vertical de la pantalla.Landscape
- La orientación de pantalla.HD
: la relación de aspecto es de 16:9.3Zone
: tres zonas de la pantalla.
Representación visual del diseño de varias zonas multi-layout-visual-one
El diseño Left20-LandscapeHD3Zone
le permite crear el siguiente diseño de varias zonas en su proyecto:
Creando un diseño de Left20-LandscapeHD3Zone
landscape-layout-one
Siga los pasos a continuación para crear un diseño de Left20-LandscapeHD3Zone
para un proyecto de AEM Screens.
-
Cree un proyecto de AEM Screens titulado
customtemplate
. -
Vaya a CRXDE Lite AEM desde su instancia de > Herramientas > CRXDE Lite.
-
Cree una carpeta en apps con el título
customtemplate
. Del mismo modo, cree otra carpeta con el título plantilla encustomtemplate
, como se muestra en la figura siguiente.note note NOTE Haga clic en Guardar todo en la barra de acciones de CRXDE Lite cada vez que cree, edite o copie contenido en cualquiera de los nodos. De lo contrario, no podrá confirmar las actualizaciones. -
Copie la plantilla de la izquierda de la barra de herramientas de
/libs/screens/core/templates/splitscreenchannel/lbar-left
a/apps/customtemplate/template
. -
Cambie el nombre de lbar-left (
/apps/customtemplate/template
) copiado a my-custom-layout.
-
Vaya a
/apps/customtemplate/template/my-custom-layout
y actualice las propiedadesjcr:description
a Plantilla paraLeft20-LandscapeHD3Zone
yjcr:title
paraLeft20-LandscapeHD3Zone
. -
Vaya al nodo
offline-config
desde/apps/customtemplate/template/my-custom-layout/jcr:content/offline-config
y actualicejcr:title
aLeft20-LandscapeHD3Zone
. -
Vaya a la propiedad
jcr:content
de my-custom-template desde/apps/customtemplate/template/my-custom-layout/jcr:content
y actualice la propiedadcq:cssClass
para que pueda usar aem-Layout my-custom-layout. -
En referencia al paso (4) en el que copió la plantilla de la barra izquierda, puede ver tres cuadrículas adaptables en
my-custom-layout/jcr:content
. Agregue una clase css personalizada a cada una de las cuadrículas adaptables de la propiedadcq:cssClass
; por ejemplo, my-custom-layout-top-left para el nodo r1c1.Del mismo modo, agregue my-custom-layout-top-right para r1c2 y my-custom-layout-bottom para el nodo r2c1.
note note NOTE Estas clases personalizadas se utilizan en el CSS para establecer la anchura y la altura de estas cuadrículas adaptables. note note NOTE Puede agregar o quitar las cuadrículas adaptables en función del número total de cuadrículas que desee. En este ejemplo, se muestran dos cuadrículas en la primera fila y una cuadrícula en la segunda fila, por lo que hay un total de tres cuadrículas adaptables (r1c1, r1c2, r2c1). -
Copie
/libs/settings/wcm/designs/screens
a/apps/settings/wcm/designs/
y cambie el nombre del diseño copiado a diseños de plantilla personalizados. -
Vaya a
/apps/settings/wcm/designs/custom-template-designs
y actualice la propiedadjcr:title
de custom-template-designs a customtemplate-design. -
Vaya a
/apps/settings/wcm/designs/custom-template-designs
y cree un archivo static.css. -
Copie el contenido en el archivo
static.css
:code language-shell /*my-custom-layout styles*/ .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--top-left { width:20%; height: 36%; float: left !important; } .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--top-right { width:80%; height: 36%; float: left !important; } .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--bottom { width:100%; height: 64%; }
note note NOTE Puede actualizar los porcentajes para que coincidan con los requisitos de la plantilla personalizada. -
Vaya a
/apps/<project>/templates/my-custom-layout/jcr:content
y actualice la propiedadcq:designPath
a/apps/settings/wcm/designs/customtemplate-designs
para que pueda cargar los estilos configurados en static.css.note note NOTE Escriba todos los estilos en lugar de copiarlos o pegarlos, lo que puede generar espacios en blanco que producen problemas de estilo css.
Visualización del resultado viewing-result
Siga los pasos a continuación para utilizar la plantilla personalizada anterior en su proyecto de AEM Screens:
-
Vaya al proyecto de Screens que creó en el paso (1) y haga clic en la carpeta Canales.
-
Haga clic en Crear en la barra de acciones y luego haga clic en la plantilla
Left20-LandscapeHD3Zone
del asistente Crear. -
Después de crear un canal con la plantilla personalizada, puede agregar recursos al canal desde el editor. La siguiente vista previa muestra las imágenes en una plantilla personalizada.
Inserción de una imagen como capa de fondo inserting-image
Puede insertar una imagen como capa de fondo en el diseño:
Puede ajustar la regla CSS para que utilice "data-uri" y coloque directamente en línea la imagen (Base64
codificada) en el archivo CSS que creó en (paso 13), static.css.
Esta disposición se hace de la siguiente manera:.cq-Screens-channel--multizone.my-CustomLayout { background: url('data:image/…;base64,…') no-repeat center center; }
O bien, puede seguir los pasos a continuación:
- Asegúrese de que la imagen se incluya de alguna manera en la configuración sin conexión del canal.
- Utilice un vínculo directo a la imagen en el CSS anterior, en lugar de la variante "uri de datos".
Actualizando color de fondo updating-color
Para cambiar el color de fondo, agregue el código siguiente al archivo xml (paso 13), static.css.
.cq-Screens-channel--multizone.my-CustomLayout { background-color: …; }