DocumentationAEMGuide d’AEM Screens

Ajout de composants à un canal adding-components-to-a-channel

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Créé pour :

  • Intermédiaire
  • Administration
  • Développeur

Les composants sont des éléments fondamentaux de l’expérience AEM (Adobe Experience Manager). Vous pouvez utiliser un certain nombre de composants et les ajouter au canal d’un projet AEM Screens.

Composants dans AEM Screens components-in-aem-screens

AEM Screens fournit différents composants AEM qui peuvent être utilisés dans un projet Screens.

Affichage des composants AEM Screens viewing-aem-screens-components

Lorsque vous créez un projet AEM Screens, vous pouvez voir la liste des composants par défaut qui peuvent être ajoutés au projet.

Pour afficher les composants par défaut dans le projet Screens, procédez comme suit :

  1. Cliquez sur le canal. Par exemple : We.Retail In Store > Canaux > Canal inactif.

  2. Cliquez sur Modifier dans la barre d’actions.

  3. Dans l’éditeur AEM, cliquez sur l’icône + dans la barre latérale.

  4. Tous les composants fournis par défaut dans un projet AEM Screens s’affichent, comme illustré dans la figure ci-dessous.

screen_shot_2017-12-18at21350pm

Ajout d’un nouveau composant adding-a-new-component

AEM fournit plusieurs autres composants. Vous pouvez toujours ajouter d’autres composants (non fournis par défaut) au projet, à condition qu’ils soient compatibles avec AEM Screens.

L’exemple suivant illustre l’ajout d’un composant Livefyre à un projet AEM Screens :

  1. Cliquez sur le canal dans lequel vous souhaitez ajouter un composant. Par exemple : We.Retail In Store > Canaux > Canal inactif.

  2. Cliquez sur Modifier dans la barre d’actions.

  3. Cliquez sur le mode Conception.

  4. Cliquez sur l’ensemble de l’éditeur de conception à droite, puis sur le symbole des paramètres afin d’ouvrir la boîte de dialogue Conception parsys.

  5. Vous pouvez cliquer sur les composants que vous souhaitez importer dans le projet AEM Screens. L’exemple suivant montre l’ajout d’un composant Livefyre à un projet AEM Screens.

adding_components

NOTE
De la même façon, vous pouvez ajouter au projet autant de nouveaux composants que vous le souhaitez, s’ils sont compatibles avec AEM Screens.

Présentation des composants AEM Screens understanding-aem-screen-components

La section suivante décrit les composants AEM Screens que vous pouvez utiliser dans le projet.

NOTE
Pour afficher les propriétés d’un composant, cliquez dessus, puis sur l’icône en forme de marteau afin d’ouvrir/d’afficher les propriétés.

Application application

Le composant Application permet d’ajouter une application au canal.

Le composant d’application présente les propriétés suivantes :

Propriété
Description
Chemin de l’application
Cliquez sur le chemin absolu où se trouve l’application.
Durée (ms)
Cliquez sur la durée de l’application. Par défaut, la durée est définie sur -1, ce qui signifie que l’élément s’exécute indéfiniment (il s’agit par conséquent d’une application sur une seule page). Si vous définissez une valeur supérieure à 0 pour la durée, l’élément s’affiche pendant la durée spécifiée avant que l’élément suivant n’apparaisse.

L’exemple suivant illustre la manière dont un composant d’application doit être incorporé avec l’aperçu de ses propriétés :

adding_componentsapplication

NOTE
Reportez-vous à l’exemple ci-dessus pour afficher les propriétés de chacun des composants suivants.

Canal channel

Le composant Canal permet d’ajouter un canal entier au projet.

Le composant Canal présente les propriétés suivantes :

Propriété
Description
Chemin du canal
Sélectionnez le chemin absolu où se trouve l’application.
Durée (ms)
Sélectionnez la durée complète du canal. Si vous définissez la durée sur -1, cela signifie que le canal incorporé s’exécute pendant toute sa durée dans un canal donné.

Page incorporée embedded-page

Une page incorporée permet d’ajouter une page incorporée à un projet. Par exemple, il peut s’agir d’une application web ou d’un catalogue de produits.

La page incorporée présente les propriétés suivantes :

Propriété
Description
Chemin d’accès à la page
Sélectionnez le chemin absolu où se trouve le canal.
Durée (ms)
Sélectionnez la durée complète du canal. Si vous définissez la durée sur -1, cela signifie que le canal incorporé s’exécute pendant toute sa durée dans un canal donné.

Séquence incorporée embedded-sequence

NOTE
Pour en savoir plus sur les séquences incorporées, voir Séquences incorporées sous la section Création dans Screens.

Une séquence incorporée permet d’ajouter un canal de séquence incorporée dans le canal existant (avec d’autres ressources).

La séquence incorporée présente les propriétés de page suivantes :

Propriété
Description
Chemin du canal
Sélectionnez le chemin absolu de la séquence que vous souhaitez inclure dans le canal.
Durée (ms)
Sélectionnez la durée complète du canal. Si vous définissez la durée sur -1, cela signifie que le canal incorporé s’exécute pendant toute sa durée dans un canal donné.
Stratégie
Définissez-la sur original ou seul(e). La définition de cette valeur sur original implique que la séquence secondaire s’exécute entièrement à chaque cycle de la séquence parent. L’autre valeur possible est unique. Cette valeur n’affiche qu’un élément de la séquence secondaire à chaque exécution. Par exemple, le premier élément de la première boucle et le second élément de la deuxième boucle.

Séquence incorporée dynamique dynamic-embedded-sequence

Une séquence incorporée dynamique permet d’ajouter une séquence semblable à la séquence incorporée susvisée, mais via le rôle du canal.

Pour en savoir plus sur les séquences incorporées, voir Séquences incorporées sous la section Création dans Screens.

La séquence incorporée dynamique présente les propriétés suivantes :

Propriété
Description
Rôle d’attribution de canaux
Saisissez le rôle du canal.
Durée (ms)
Sélectionnez la durée complète du canal. Si vous définissez la durée sur -1, cela signifie que le canal incorporé s’exécute pendant toute sa durée dans un canal donné.
Stratégie
Définissez-la sur original ou seul(e). La définition de cette valeur sur original implique que la séquence secondaire s’exécute entièrement à chaque cycle de la séquence parent. L’autre valeur possible est unique. Une telle valeur n’afficherait qu’un seul élément de la séquence secondaire à chaque exécution. Par exemple, le premier élément de la première boucle et le second élément de la deuxième boucle.

Fragment d’expérience experience-fragment

Un fragment d’expérience permet d’ajouter un fragment d’expérience (groupe d’un ou de plusieurs composants, y compris le contenu et la disposition pouvant être référencés dans les pages) au canal AEM Screens. Glissez-déposez le composant vers l’éditeur AEM, puis cliquez sur le fragment d’expérience.

Pour en savoir plus sur la création d’un fragment d’expérience et son utilisation dans un projet AEM Screens, reportez-vous à Utilisation de fragments d’expérience.

exp

Propriété
Description
Fragment d’expérience
Fragment d’expérience
Sélectionnez le fragment d’expérience.
Durée
Sélectionnez la durée complète du fragment d’expérience lu dans le canal.
Configuration hors ligne
Bibliothèques côté client
Fichiers JavaScript et CSS.
Fichiers statiques
Fichiers statiques que vous pouvez ajouter en tant que configurations hors ligne au fragment d’expérience.
NOTE
Les bibliothèques côté client et les fichiers statiques que vous ajoutez depuis ce composant viennent s’ajouter aux bibliothèques côté client déjà configurées et aux fichiers statiques ajoutés à partir des propriétés du fragment d’expérience.

Image image

Une image permet d’ajouter une image à votre canal.

La ressource image comporte trois onglets, à savoir : Image, Accessibilité et Séquence  :

Propriété
Description
Image
Ressource image
Cliquez sur la ressource image.
Titre
Titre de l’image.
Lier à
Ajoutez un lien vers l’image.
Description
Brève description de l’image.
Taille
Taille de l’image.
Accessibilité
Texte de remplacement
Texte secondaire de l’image.
Séquence
Durée
Par défaut, la durée est définie sur 8 000 ms. Si vous souhaitez modifier la durée de lecture de l’image, mettez à jour le champ Durée.

Transition transition

Le composant Transition permet d’ajouter une transition au projet Screens.

L’illustration suivante représente le composant de transition (ajouté par glisser-déposer) dans l’éditeur.

screen_shot_2019-07-25at104237am

Cliquez sur l’icône de transition, puis sur Configurer (icône en forme de clé à molette) pour ouvrir la boîte de dialogue Transition. Cette boîte de dialogue comprend trois onglets :

  • Transition
  • Séquence
  • Activation
NOTE
Par défaut, la séquence est définie sur 600 ms. Vous pouvez mettre à jour la séquence de transition vers une autre valeur via l’onglet Séquence.

Transition

Le composant Transition présente les propriétés suivantes :

Propriété
Description
Transition
Type

Type de la transition entre l’élément précédent et le suivant. Le type de transition comprend les options suivantes :

  • Normal
  • Fondu
  • Glissement depuis la droite
  • Glissement depuis la gauche
  • Glissement depuis le haut
  • Glissement depuis le bas
Séquence
Durée
Sélectionnez la durée complète de la transition. Par défaut, elle est définie sur 600 ms.
Activation
Actif à partir de
Horodatage indiquant le moment à partir duquel la transition peut être active.
Actif jusqu’à
L’horodatage indique le moment jusqu’auquel la transition peut être active.
Planning
Ajoutez une planification prédéfinie.

Vidéo video

Le composant Vidéo permet d’ajouter une vidéo au projet Screens.

Le composant Vidéo présente les propriétés suivantes :

Propriété
Description
Contenu vidéo
Cliquez sur le lien vers la vidéo.
Durée
Sélectionnez la durée de la vidéo. Par défaut, la durée est définie sur -1, ce qui signifie que l’élément s’exécute indéfiniment. Si vous définissez une valeur supérieure à 0 pour la durée, l’élément s’affiche pendant la durée spécifiée avant que l’élément suivant n’apparaisse.
Création de rendu

Si le format de la vidéo ne correspond pas à l’écran, vous pouvez modifier le rendu à l’aide des options Contenir ou Couverture.

Contenir signifie que l’intégralité de la vidéo est affichée et que les zones manquantes sont remplies d’une bordure noire.

Couverture signifie que la vidéo couvre toute la fenêtre d’affichage, mais que certaines parties qui débordent sur les côtés sont masquées.

Taille
Taille de la vidéo.
recommendation-more-help
adce462a-f916-4dbe-9ab5-0b62cfb0f053