Superposición de texto text-overlay
Esta sección trata los siguientes temas:
- Información general
- Usando superposición de texto
- Explicación de las propiedades de superposición de texto
- Uso de valores de ContextHub en superposición de texto
Información general overview
La superposición de texto es una función disponible en AEM Screens. Permite crear una experiencia atractiva en un canal de secuencias al proporcionar un título o una descripción superpuestos sobre una imagen.
Para aprender a crear su propio componente personalizado, vea Ampliar un componente de AEM Screens.
Esta sección solo muestra cómo utilizar y aplicar el componente de póster en un proyecto de AEM Screens. También muestra cómo se utiliza como superposición de texto en uno de los canales de la secuencia.
Uso de superposición de texto using-text-overlay
En la siguiente sección se describe el uso de la superposición de texto en un proyecto de AEM Screens.
Requisitos previos
Antes de implementar esta funcionalidad, asegúrese de haber configurado un proyecto como requisito previo para comenzar a implementar la superposición de texto. Por ejemplo,
-
Cree un proyecto de AEM Screens (en este ejemplo, TextOverlayDemo)
-
Cree un canal de secuencia con el título TextSample en la carpeta Canales
-
Agregar contenido a su canal TextSample
La siguiente imagen muestra el proyecto TextOverlayDemo con el canal TextSample en la carpeta Channels.
Siga los pasos a continuación para utilizar la superposición de texto en un canal de AEM Screens:
-
Vaya a TextOverlayDemo > Canales > TextSample y haga clic en Editar en la barra de acciones.
-
Haga clic en la imagen y luego en Configurar (icono de llave inglesa) para abrir el cuadro de diálogo de propiedades.
-
Haga clic en la opción Superposición de texto de la barra de navegación del cuadro de diálogo, como se muestra en la figura siguiente.
Explicación de las propiedades de superposición de texto understanding-text-overlay-properties
Con las propiedades de Superposición de texto, puede agregar texto a cualquiera de los componentes del proyecto de Screens. En la siguiente sección se ofrece una descripción general de las propiedades disponibles en Superposición de texto:
Puede agregar un texto al cuadro de texto y agregar énfasis tipográfico como negrita, cursiva y subrayado.
Variante de color Esta opción permite que el texto sea Oscuro (texto en color negro) o Claro (texto en color blanco).
Cambiar el tamaño y la posición Esta opción permite al usuario alinear el texto horizontal o verticalmente, o usar herramientas específicas para alinear el texto.
Uso de valores de ContextHub en la superposición de texto using-text-overlay-context-hub
En la siguiente sección se describe el uso de valores de un almacén de datos, por ejemplo, hojas de Google en el componente de superposición de texto.
Requisitos previos
Configure las opciones de ContextHub para el proyecto de AEM Screens.
Para obtener información sobre cómo configurar y administrar los cambios de recursos impulsados por datos mediante un almacén de datos, consulte Configuración de ContextHub en AEM Screens.
Después de configurar las configuraciones necesarias para el proyecto, siga los pasos a continuación para utilizar los valores de las Hojas de cálculo de Google:
-
Vaya a TextOverlayDemo > Canales > TextSample y haga clic en Propiedades desde la barra de acciones.
-
Haga clic en la ficha Personalization para configurar las configuraciones de ContextHub.
-
Haga clic en la ruta de acceso de ContextHub como libs > settings > cloudsettings > default > Configuraciones de ContextHub y haga clic en Seleccionar.
-
Haga clic en la ruta de acceso de segmentos como conf > screens > settings > wcm > segments y haga clic en Select.
-
Haga clic en Guardar y cerrar.
note note NOTE Utilice ContextHub y la ruta de segmentos, donde guardó inicialmente las configuraciones y segmentos de Context Hub. 
-
-
Vaya a TextOverlayDemo > Canales > TextSample y haga clic en Editar en la barra de acciones.
-
Agregue un componente de superposición de texto e imagen a su imagen tal como se describe en la sección Usar superposición de texto de esta página.
-
Haz clic en Configurar (icono de llave inglesa) para abrir el cuadro de diálogo Imagen.
-
Vaya a la pestaña ContextHub del cuadro de diálogo Imagen. Haga clic en Agregar.
note note NOTE Si no ha definido la configuración de ContextHub, esta opción está desactivada para el proyecto. -
Escriba Value en el campo Placeholder. Haga clic en la fila de la que desee obtener el valor de la hoja Google en Variable de ContextHub. En este caso, el valor se recupera de la fila 2 y la columna 1 de las hojas de Google. Ahora, ingrese el Valor predeterminado como 20, como se muestra en la figura siguiente. Cuando haya terminado, haga clic en la marca de verificación.
note note NOTE Para su referencia, la siguiente imagen muestra el valor recuperado de las hojas de Google: 
-
Vuelva a la ficha Superposición de texto del cuadro de diálogo Imagen y agregue el texto Temperatura actual {Value}, como se muestra en la figura siguiente.
-
Haga clic en Vista previa.
