Ajout de composants à un canal

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 utilisés dans AEM Screens

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

Affichage des composants AEM Screens

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. Sélectionnez le canal. Par exemple, We.Retail en magasin > Canaux > Canal inactif.

  2. Cliquez sur Modifier dans la barre d’actions pour ouvrir l’éditeur AEM.

  3. Cliquez sur l’icône + de la barre latérale pour ouvrir les composants.

  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

AEM propose un certain nombre d’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. Sélectionnez le canal dans lequel vous souhaitez ajouter un nouveau composant. Par exemple, We.Retail en magasin > Canaux > Canal inactif.

  2. Cliquez sur Modifier dans la barre d’actions pour ouvrir l’éditeur.

  3. Sélectionnez le mode Conception.

  4. Sélectionnez l’éditeur de conception complet à droite et cliquez sur le symbole de paramètres pour ouvrir la boîte de dialogue Conception ParSys.

  5. Vous pouvez sélectionner 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

REMARQUE

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

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

REMARQUE

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

Application

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

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

Propriété Description
Chemin de l’application Sélectionnez le chemin absolu où se trouve l’application.
Durée (ms) Sélectionnez 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

REMARQUE

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

Canal

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

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

REMARQUE

Reportez-vous à Séquences incorporées dans la section Création dans Screens pour en savoir plus sur les séquences incorporées.

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 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 seul(e) ; elle permet d’afficher un seul élément de la séquence secondaire à chaque exécution (par exemple, le premier élément de la première boucle, le deuxième élément de la deuxième boucle, etc.).

Séquence incorporée dynamique

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 de canal.

Reportez-vous à Séquences incorporées dans la section Création dans Screens pour en savoir plus sur les séquences incorporées.

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 seul(e) ; elle permet d’afficher un seul élément de la séquence secondaire à chaque exécution (par exemple, le premier élément de la première boucle, le deuxième élément de la deuxième boucle, etc.).

Fragment d’expérience

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éplacez le composant vers l’éditeur AEM, puis sélectionnez 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.
REMARQUE

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

Cette fonction permet d’ajouter une image au canal.

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

Propriété Description
Image
Ressource image Sélectionnez 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 de remplacement de l’image.
Séquence
Durée Par défaut, la Durée est définie sur 8000 ms. Si vous souhaitez modifier la durée de lecture de l’image, mettez à jour le champ Durée.

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éplacer) dans l’éditeur.

screen_shot_2019-07-25at104237am

Sélectionnez l’icône de transition et cliquez 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
REMARQUE

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’à Horodatage indiquant le moment jusqu’auquel la transition peut être active.
Planification Ajoutez une planification prédéfinie.

Vidéo

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 Sélectionnez 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 rapport d’aspect 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, mais que certaines parties dépassant sur les côtés sont masquées.
Taille Taille de la vidéo.

Sur cette page