Sobreposição de texto text-overlay

Esta seção abrange os seguintes tópicos:

  • Visão geral
  • Uso de sobreposição de texto
  • Noções básicas sobre propriedades de sobreposição de texto
  • Utilização de valores do ContextHub na sobreposição de texto
CAUTION
A variável Sobreposição de texto Este recurso só estará disponível se você tiver instalado o AEM 6.3 Feature Pack 5 ou o AEM 6.4 Feature Pack 3.

Visão geral overview

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 sobre 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.

Uso de sobreposição de texto using-text-overlay

A seção a seguir descreve o uso de sobreposição de texto em um projeto do AEM Screens.

Pré-requisitos

Antes de começar a implementar essa funcionalidade, configure um projeto como pré-requisito para começar a implementar a sobreposição de texto. Por exemplo,

  • Criar um projeto do AEM Screens (neste exemplo, DemonstraçãoDeSobreposiçãoDeTexto)

  • Criar um canal de sequência com o título TextSample em Canais pasta

  • Adicionar conteúdo ao seu TextSample Canal

A imagem a seguir mostra o DemonstraçãoDeSobreposiçãoDeTexto projeto com TextSample entrada de canal Canais pasta.

screen_shot_2018-12-16at75908pm

Siga as etapas abaixo para usar a sobreposição de texto em um canal do AEM Screens:

  1. Navegue até DemonstraçãoDeSobreposiçãoDeTexto —> Canais —> TextSample e clique em Editar na barra de ações para abrir o editor.

    screen_shot_2018-12-16at80017pm

  2. Selecione a imagem e clique em Configurar (ícone de chave inglesa) para abrir a caixa de diálogo de propriedades.

    screen_shot_2018-12-16at80221pm

  3. Selecione o Sobreposição de texto opção na barra de navegação da caixa de diálogo, conforme mostrado na figura abaixo.

    screen_shot_2018-12-16at80424pm

Noções básicas sobre propriedades de sobreposição de texto understanding-text-overlay-properties

Usando as propriedades de Sobreposição de texto, é possível adicionar texto a qualquer um dos componentes no 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:

texto

É possível adicionar um texto à caixa de texto e adicionar ênfase tipográfica, como negrito, itálico e sublinhado.

Variante de cor Essa opção permite que o texto seja Escuro (texto na cor preta) ou Claro (texto na cor branca).

Dimensionamento e posicionamento Essa opção permite que o usuário alinhe o texto horizontal ou verticalmente ou também use ferramentas refinadas para alinhamento de texto.

NOTE
Para usar ferramentas otimizadas corretamente, identifique a posição correta em pixels usando (px) como sufixo, por exemplo, 200 px. O resultado dessa expressão é 200 pixels a partir do ponto inicial.

Utilização de valores do ContextHub na sobreposição de texto using-text-overlay-context-hub

A seção a seguir descreve o uso de valores de um armazenamento de dados, por exemplo, google sheets em componente de sobreposição de texto.

Pré-requisitos

Defina as configurações do ContextHub para o seu projeto do AEM Screens.

Para saber como configurar e gerenciar alterações de ativos orientadas por dados usando um armazenamento de dados, consulte Configuração do ContextHub no AEM Screens.

Depois de definir as configurações necessárias para o seu projeto, siga as etapas abaixo para usar valores das planilhas do google:

  1. Navegue até DemonstraçãoDeSobreposiçãoDeTexto —> Canais —> TextSample e clique em Propriedades na barra de ações.

  2. Selecione o Personalização para definir as configurações do ContextHub.

    1. Selecione o Caminho do ContextHub as libs > configurações > cloudsettings > padrão > Configurações do ContextHub e clique em Selecionar.

    2. Selecione o Caminho de segmentos as conf > telas > configurações > wcm > segmentos e clique em Selecionar.

    3. Clique em Salvar e fechar.

      note note
      NOTE
      Use o ContextHub e o caminho Segmentos, onde você salvou inicialmente as configurações e os segmentos do seu hub de contexto.

      image1

  3. Navegue até DemonstraçãoDeSobreposiçãoDeTexto —> Canais —> TextSample e clique em Editar na barra de ações para abrir o editor.

    image1

  4. Adicione um componente de sobreposição de imagem e texto à imagem, conforme descrito em Uso de sobreposição de texto seção desta página.

  5. Clique em Configurar (ícone de chave inglesa) para abrir a Imagem caixa de diálogo.

    image1

  6. Navegue até a ContextHub na guia Imagem caixa de diálogo. Clique em Adicionar.

    note note
    NOTE
    Se você não definiu as configurações do ContextHub, essa opção está desativada para o seu projeto.
  7. Enter Valor no Espaço reservado campo. Selecione a linha na qual você deseja obter o valor da sua planilha do Google Variável do ContextHub. Nesse caso, o valor é recuperado da linha 2 e da coluna 1 das planilhas Google. Agora, insira o Valor padrão as 20, como mostrado na figura abaixo. Quando terminar, clique na marca de seleção.

    image1

    note note
    NOTE
    Para sua referência, a imagem a seguir mostra o valor recuperado das planilhas do Google:

    image1

  8. Volte para a Sobreposição de texto na caixa de diálogo Imagem e adicione o texto Temperatura Atual {Value}, conforme mostrado na figura abaixo.

    image1

  9. Clique em Visualizar para exibir a saída desejada.

    image1

recommendation-more-help
adce462a-f916-4dbe-9ab5-0b62cfb0f053