Sobreposição de texto

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

  • Visão geral
  • Uso da sobreposição de texto
  • Como entender as propriedades de sobreposição de texto
  • Uso dos valores do ContextHub na sobreposição de texto
ATENÇÃO

O recurso Sobreposição de texto só estará disponível se você tiver instalado AEM Pacote de recursos 6.3 5 ou AEM 6.4 Feature Pack 3.

Visão geral

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 aproveitar 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 da sobreposição de texto

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,

  • Crie um projeto do AEM Screens (neste exemplo, TextOverlayDemo)

  • Crie um canal de sequência chamado TextSample na pasta Channels

  • Adicionar conteúdo ao seu canal TextSample

A imagem a seguir mostra o projeto TextOverlayDemo com o canal TextSample na pasta Channels.

screen_shot_2018-12-16at75908pm

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

  1. Navegue até TextOverlayDemo —> 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 a opção Sobreposição de texto na barra de navegação da caixa de diálogo, conforme mostrado na figura abaixo.

    screen_shot_2018-12-16at80424pm

Como entender as propriedades de sobreposição de texto

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:

text

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

Variante de corEssa 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 horizontal ou verticalmente ou, adicionalmente, usa ferramentas de granularidade fina para alinhamento do texto.

OBSERVAÇÃO

Para usar corretamente as ferramentas otimizadas, certifique-se de identificar a posição correta em pixels usando (px) como um sufixo, por exemplo, 200px. O resultado dessa expressão será 200 pixels a partir do ponto inicial.

Uso dos valores do ContextHub na sobreposição de texto

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

Você deve configurar as configurações do ContextHub para o 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:

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

  2. Selecione a guia Personalization para configurar as configurações do ContextHub.

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

    2. Selecione o Caminho de segmentos como conf > screens > definições > wcm > segmentos e clique em Selecionar<a1 3/>.

    3. Clique em Salvar e fechar.

      OBSERVAÇÃO

      Use o ContextHub e o caminho Segmentos, onde você salvou inicialmente suas configurações e segmentos do hub de contexto.

      image1

  3. Navegue até TextOverlayDemo —> 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 na seção Uso da sobreposição de texto desta página.

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

    image1

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

    OBSERVAÇÃO

    Se você não tiver configurado as configurações do ContextHub, essa opção será desativada para o seu projeto.

  7. Insira Value no campo Placeholder, selecione a linha que deseja obter o valor da planilha do google em Variável ContextHub (nesse caso, o valor é recuperado da linha 2 e da coluna 1 das planilhas do google) e insira o Valor padrão como 20, conforme mostrado na figura abaixo. Quando terminar, clique na marca de seleção.

    image1

    OBSERVAÇÃO

    Para sua referência, a imagem a seguir mostra o valor que é recuperado das planilhas do google:

    image1

  8. Navegue de volta à guia Sobreposição de texto da caixa de diálogo Imagem e adicione o texto Temperatura atual {Valor}, conforme mostrado na figura abaixo.

    image1

  9. Clique em Preview para visualizar a saída desejada.

    image1

Nesta página