Sovrapposizione testo

Questa sezione tratta i seguenti argomenti:

  • Panoramica
  • Utilizzo della sovrapposizione testo
  • Informazioni sulle proprietà della sovrapposizione testo
  • Utilizzo dei valori ContextHub nella sovrapposizione del testo
ATTENZIONE

La funzione Sovrapposizione testo è disponibile solo se è stato installato AEM Feature Pack 5 6.3 o AEM 6.4 Feature Pack 3.

Panoramica

Sovrapposizione testo è una funzione disponibile in AEM Screens che consente di creare un’esperienza avvincente in un Canale per sequenza fornendo un titolo o una descrizione sovrapposti a un’immagine.

Per informazioni su come creare un componente personalizzato, consulta Estensione di un componente AEM Screens.

Questa sezione mostra solo come utilizzare e sfruttare il componente poster in un progetto AEM Screens e utilizzarlo come sovrapposizione di testo in uno dei canali di sequenza.

Utilizzo della sovrapposizione testo

La sezione seguente descrive l’utilizzo della sovrapposizione testo in un progetto AEM Screens.

Prerequisiti

Prima di iniziare a implementare questa funzionalità, assicurati di aver impostato un progetto come prerequisito per iniziare a implementare la sovrapposizione di testo. Esempio,

  • Crea un progetto AEM Screens (in questo esempio, TextOverlayDemo)

  • Crea un canale di sequenza denominato TextSample nella cartella Canali

  • Aggiungi contenuto al tuo canale TextSample

L'immagine seguente mostra il progetto TextOverlayDemo con il canale TextSample nella cartella Canali .

screen_shot_2018-12-16at75908pm

Segui i passaggi seguenti per utilizzare la sovrapposizione di testo in un canale AEM Screens:

  1. Passa a TextOverlayDemo —> Canali —> TextSample e fai clic su Modifica dalla barra delle azioni per aprire l'editor.

    screen_shot_2018-12-16at80017pm

  2. Seleziona l'immagine e fai clic su Configura (icona chiave inglese) per aprire la finestra di dialogo delle proprietà.

    screen_shot_2018-12-16at80221pm

  3. Seleziona l’opzione Sovrapposizione testo dalla barra di navigazione della finestra di dialogo, come illustrato nella figura riportata di seguito.

    screen_shot_2018-12-16at80424pm

Informazioni sulle proprietà della sovrapposizione testo

Utilizzando le proprietà Sovrapposizione testo , puoi aggiungere testo a qualsiasi componente del progetto Screens. La sezione seguente fornisce una panoramica delle proprietà disponibili in Sovrapposizione testo:

Testo

È possibile aggiungere un testo alla casella di testo e l’enfasi tipografica, ad esempio grassetto, corsivo, sottolineato e così via.

Colore VariantQuesta opzione consente al testo di essere scuro (testo a colori neri) o chiaro (testo a colori bianchi).

Ridimensionamento e posizionamentoQuesta opzione consente all’utente di allineare il testo in orizzontale o verticale o di utilizzare strumenti a grana fine per l’allineamento del testo.

NOTA

Per utilizzare correttamente gli strumenti a grana fine, accertati di identificare la posizione corretta in pixel utilizzando (px) come suffisso, ad esempio 200px. Il risultato di questa espressione sarà di 200 pixel dal punto iniziale.

Utilizzo dei valori ContextHub nella sovrapposizione del testo

La sezione seguente descrive l'utilizzo dei valori da un archivio dati, ad esempio, google sheet nel componente sovrapposizione testo.

Prerequisiti

Devi configurare le configurazioni ContextHub per il progetto AEM Screens.

Per informazioni su come impostare e gestire le modifiche alle risorse basate su dati utilizzando un archivio dati, consulta Configurazione di ContextHub in AEM Screens.

Una volta configurate le configurazioni richieste per il progetto, segui i passaggi seguenti per utilizzare i valori dei fogli di Google:

  1. Passa a TextOverlayDemo —> Canali —> TextSample e fai clic su Proprietà dalla barra delle azioni.

  2. Seleziona la scheda Personalizzazione per impostare le configurazioni di ContextHub.

    1. Seleziona il Percorso ContextHub come libs > impostazioni > impostazioni cloud > predefinito > Configurazioni ContextHub e fai clic su Predefinito Seleziona.

    2. Seleziona il Percorso segmenti come conf > screens > impostazioni > wcm > segmenti e fai clic su Seleziona.

    3. Fai clic su Salva e chiudi.

      NOTA

      Utilizza ContextHub e il percorso Segmenti, in cui hai inizialmente salvato le configurazioni e i segmenti dell'hub di contesto.

      image1

  3. Passa a TextOverlayDemo —> Canali —> TextSample e fai clic su Modifica dalla barra delle azioni per aprire l'editor.

    image1

  4. Aggiungi un componente immagine e sovrapposizione testo all'immagine come descritto nella sezione Utilizzo della sovrapposizione testo di questa pagina.

  5. Fai clic su Configura (icona chiave inglese) per aprire la finestra di dialogo Immagine.

    image1

  6. Passa alla scheda ContextHub dalla finestra di dialogo Immagine. Fate clic su Aggiungi.

    NOTA

    Se non hai configurato le configurazioni di ContextHub, questa opzione sarà disabilitata per il progetto.

  7. Immetti Valore nel campo Segnaposto, seleziona la riga che desideri ottenere il valore dal tuo foglio google in Variabile ContextHub (in questo caso, il valore viene recuperato dalla riga 2 e dalla colonna 1 dai fogli google) e immetti il Valore predefinito come 20, come mostrato nella figura seguente. Una volta fatto, fai clic sul segno di spunta.

    image1

    NOTA

    Per riferimento, l'immagine seguente mostra il valore recuperato dai fogli di Google:

    image1

  8. Torna alla scheda Sovrapposizione testo dalla finestra di dialogo Immagine e aggiungi il testo Temperatura corrente {Value}, come illustrato nella figura riportata di seguito.

    image1

  9. Fai clic su Anteprima per visualizzare l'output desiderato.

    image1

In questa pagina