Esta seção aborda os seguintes tópicos:
O Sobreposição de texto só estará disponível se tiver instalado AEM 6.3 Feature Pack 5 ou AEM 6.4 Feature Pack 3.
A sobreposição de texto é um recurso disponível no AEM Screens que permite criar uma experiência atraente em um Canal de sequência fornecendo um título ou uma descrição sobreposta a uma imagem.
Para saber como criar seu próprio componente personalizado, consulte Extensão de um componente do AEM Screens.
Esta seção mostra apenas como usar e aplicar o componente de pôster em um projeto do AEM Screens e usá-lo como sobreposição de texto em um de seus canais de sequência.
A seção a seguir descreve o uso de sobreposição de texto em um projeto do AEM Screens.
Pré-requisitos
Antes de implementar essa funcionalidade, certifique-se de configurar um projeto como pré-requisito para iniciar a implementação da sobreposição de texto. Por exemplo,
Criar um projeto do AEM Screens (neste exemplo, TextOverlayDemo)
Crie um canal de sequência chamado como TextSample under Canais pasta
Adicione conteúdo ao TextSample Canal
A imagem a seguir mostra o TextOverlayDemo projeto com TextSample no canal em Canais pasta.
Siga as etapas abaixo para usar a sobreposição de texto em um canal AEM Screens:
Navegar para TextOverlayDemo —> Canais —> TextSample e clique em Editar na barra de ações para abrir o editor.
Selecione a imagem e clique Configurar (ícone de chave) para abrir a caixa de diálogo propriedades.
Selecione o Sobreposição de texto na barra de navegação da caixa de diálogo, conforme mostrado na figura abaixo.
Usando as propriedades de Sobreposição de texto, você pode adicionar texto a qualquer um dos componentes do seu projeto do Screens. A seção a seguir fornece uma visão geral das propriedades que estão disponíveis em Sobreposição de texto:
É possível adicionar um texto à caixa de texto e adicionar ênfase tipográfica, como negrito, itálico e sublinhado.
Variante de cores Essa opção permite que o texto seja escuro (texto em cor preta) ou claro (texto em cor branca).
Dimensionamento e posicionamento Essa opção permite que o usuário alinhe o texto horizontalmente ou verticalmente ou também use ferramentas otimizadas para alinhamento de texto.
Para usar corretamente as ferramentas otimizadas, certifique-se de identificar a posição correta em pixels usando (px) como um sufixo, por exemplo, 200 px. O resultado dessa expressão é 200 pixels a partir do ponto inicial.
A seção a seguir descreve o uso de valores de um armazenamento de dados, por exemplo, o google sheets no componente de sobreposição de texto.
Pré-requisitos
Configurar configurações do ContextHub para seu projeto do AEM Screens.
Para saber como configurar e gerenciar alterações de ativos orientados por dados usando um armazenamento de dados, consulte Configuração do ContextHub no AEM Screens.
Depois de configurar as configurações necessárias para o seu projeto, siga as etapas abaixo para usar valores das planilhas do google:
Navegar para TextOverlayDemo —> Canais —> TextSample e clique em Propriedades na barra de ações.
Selecione o Personalização para configurar as configurações do ContextHub.
Selecione o Caminho do ContextHub as libs > configurações > cloudsettings > default > Configurações do ContextHub e clique em Selecionar.
Selecione o Caminho dos segmentos as conf > telas > configurações > wcm > segmentos e clique em Selecionar.
Clique em Salvar e fechar.
Use o ContextHub e o caminho Segmentos, onde você salvou inicialmente suas configurações e segmentos do hub de contexto.
Navegar para TextOverlayDemo —> Canais —> TextSample e clique em Editar na barra de ações para abrir o editor.
Adicione um componente de imagem e sobreposição de texto à imagem, conforme descrito em Uso da sobreposição de texto desta página.
Clique em Configurar (ícone de chave) para abrir o Imagem caixa de diálogo.
Navegue até o ContextHub na guia do Imagem caixa de diálogo. Clique em Adicionar.
Se não tiver configurado as configurações do ContextHub, essa opção estará desativada no projeto.
Enter Valor no Espaço reservado campo. Selecione a linha na qual deseja obter o valor da sua planilha do Google em Variável ContextHub. Nesse caso, o valor é recuperado da linha 2 e da coluna 1 das planilhas do Google. Agora insira o Valor padrão as 20º, como mostrado na figura abaixo. Quando terminar, clique na marca de seleção.
Para sua referência, a imagem a seguir mostra o valor que é recuperado das planilhas do google:
Navegue de volta para a Sobreposição de texto na caixa de diálogo Imagem e adicione o texto Temperatura atual {Valor}, conforme mostrado na figura abaixo.
Clique em Visualizar para exibir a saída desejada.