Superposition de texte

Cette section couvre les sujets suivants :

  • Présentation
  • Utilisation de la superposition de texte
  • Présentation des propriétés de superposition de texte
  • Utilisation des valeurs ContextHub dans la superposition de texte
ATTENTION

La fonction Superposition de texte n’est disponible que si vous avez installé AEM 6.3 Feature Pack 5 ou AEM 6.4 Feature Pack 3.

Présentation

La superposition de texte est une fonctionnalité disponible dans AEM Screens qui vous permet de créer une expérience attrayante dans un canal de séquence en incluant un titre ou une description superposés à une image.

Pour savoir comment créer votre propre composant personnalisé, reportez-vous à la section Extension d’un composant AEM Screens.

Cette section explique uniquement comment utiliser et exploiter le composant poster dans un projet AEM Screens et l’utiliser comme superposition de texte dans l’un de vos canaux de séquence.

Utilisation de la superposition de texte

La section ci-dessous décrit l’utilisation de la superposition de texte dans un projet AEM Screens.

Conditions préalables

Avant de commencer à implémenter cette fonctionnalité, assurez-vous d’avoir configuré un projet, condition préalable pour commencer à implémenter la superposition de texte. Par exemple :

  • Créez un projet AEM Screens (dans cet exemple, TextOverlayDemo)

  • Créez un canal de séquence portant le titre TextSample sous le dossier Canaux.

  • Ajoutez du contenu à votre canal TextSample

L’image suivante montre le projet TextOverlayDemo avec le canal TextSample dans le dossier Channels (Canaux).

screen_shot_2018-12-16at75908pm

Pour utiliser la superposition de texte dans un canal AEM Screens, procédez comme suit :

  1. Accédez à TextOverlayDemo --> Canaux --> TextSample et cliquez sur Modifier dans la barre d’actions pour ouvrir l’éditeur.

    screen_shot_2018-12-16at80017pm

  2. Sélectionnez l’image et cliquez sur Configurer (icône en forme de clé) pour ouvrir la boîte de dialogue des propriétés.

    screen_shot_2018-12-16at80221pm

  3. Sélectionnez l’option Superposition de texte dans la barre de navigation de la boîte de dialogue, comme illustré dans la figure ci-dessous.

    screen_shot_2018-12-16at80424pm

Présentation des propriétés de superposition de texte

Les propriétés de superposition de texte vous permettent d’ajouter du texte à n’importe quel composant de votre projet Screens. La section suivante présente un aperçu des propriétés disponibles dans Superposition de texte :

texte

Vous pouvez ajouter du texte à la zone de texte et utiliser des styles typographiques tels que le gras, l’italique, le soulignement, etc.

Variante de couleur Cette option permet d’afficher le texte en foncé (texte en noir) ou clair (texte en blanc).

Dimensionnement et positionnement Cette option permet à l’utilisateur d’aligner le texte horizontalement ou verticalement, ou encore d’utiliser des outils d’ajustement précis pour l’alignement du texte.

Remarque

Pour utiliser correctement les outils d’ajustement précis, veillez à identifier la position correcte en pixels en utilisant (px) comme suffixe, par exemple 200 px. Le résultat de cette expression sera de 200 pixels à partir du point de départ.

Utilisation des valeurs ContextHub dans la superposition de texte

La section ci-après décrit l’utilisation des valeurs d’un magasin de données, par exemple, des feuilles de calcul Google Sheets dans le composant de superposition de texte.

Conditions préalables

Vous devez définir des configurations ContextHub pour votre projet AEM Screens.

Pour savoir comment configurer et gérer les modifications de ressources pilotées par les données à l’aide d’un magasin de données, voir Configuration de ContextHub dans AEM Screens.

Une fois que vous avez défini les configurations requises pour votre projet, suivez les étapes ci-dessous pour utiliser les valeurs d’une feuille de calcul Google Sheets :

  1. Accédez à TextOverlayDemo --> Canaux --> TextSample et cliquez sur Propriétés dans la barre d’actions.

  2. Sélectionnez l’onglet Personnalisation pour définir les configurations ContextHub.

    1. Sélectionnez le Chemin d’accès ContextHub libs > settings > cloudsettings > default > Configurations ContextHub et cliquez sur Sélectionner.

    2. Sélectionnez le Chemin d’accès aux segments conf > screens > settings > wcm > segments et cliquez sur Sélectionner.

    3. Cliquez sur Enregistrer et fermer.

      Remarque

      Utilisez le chemin ContextHub et le chemin des segments où vous avez initialement enregistré vos segments et configurations ContextHub.

      image1

  3. Accédez à TextOverlayDemo --> Canaux --> TextSample et cliquez sur Modifier dans la barre d’actions pour ouvrir l’éditeur.

    image1

  4. Ajoutez une image et ajoutez-lui un composant de superposition de texte, comme décrit dans la section Utilisation de la superposition de texte de cette page.

  5. Cliquez sur Configurer (icône de clé à molette) pour ouvrir la boîte de dialogue Image.

    image1

  6. Accédez à l’onglet ContextHub depuis la boîte de dialogue Image. Cliquez sur Ajouter.

    Remarque

    Si vous n’avez pas configuré vos configurations ContextHub, cette option sera désactivée pour votre projet.

  7. Saisissez Valeur dans le champ Espace réservé, sélectionnez la ligne à utiliser dans votre feuille de calcul Google Sheets au niveau de Variable ContextHub (dans ce cas, la valeur est récupérée à partir de la ligne 2 et de la colonne 1 de la feuille de calcul Google Sheets), puis saisissez la Valeur par défaut 20, comme illustré dans la figure ci-dessous. Une fois que vous avez terminé, cliquez sur la coche.

    image1

    Remarque

    À titre de référence, l’image suivante présente la valeur récupérée à partir de la feuille de calcul Google Sheets :

    image1

  8. Accédez à l’onglet Superposition de texte à partir de la boîte de dialogue Image et ajoutez le texte Température actuelle {Valeur}, comme illustré dans la figure ci-dessous.

    image1

  9. Cliquez sur Aperçu pour afficher la sortie souhaitée.

    image1

Sur cette page