Création de modèles personnalisés pour des dispositions multizones creating-custom-templates-multizone

Cette page explique comment créer un modèle personnalisé dans une disposition multizone.

Points importants considerations

Avant de créer un modèle personnalisé dans une disposition multizone, vous devez tenir compte de deux points importants :

  1. Taille fixe en pixels ou taille en pourcentages  :

    Décidez d’utiliser une taille fixe en pixels pour différentes zones d’une disposition personnalisée ou de la créer à l’aide de pourcentages.

    note note
    NOTE
    Les pourcentages employés pour définir les zones d’une disposition personnalisée vous permettent de réutiliser le modèle pour diverses tailles d’écran.
  2. Convention de nommage  :

    Elle permet de comprendre comment créer des modèles multizones personnalisés à utiliser dans un projet AEM Screens. Mais vous devez tout d’abord comprendre la terminologie des modèles que vous souhaitez créer.

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Nom de la disposition Description
    Left20-LandscapeHD3Zone Une disposition paysage à trois zones qui vous permet de créer trois zones :
    * Zone 1 qui couvre 20 % de l’écran horizontal et vertical à partir de la gauche.
    * Zone 2 qui couvre 80 % de l’écran horizontal et 20 % de l’écran vertical justifié à droite.
    * Zone 3 qui couvre 100 % de l’écran horizontal et 80 % de l’écran vertical. Le format est 16:9.
    Upper20-PortraitHD2Zone Un modèle portrait à deux zones qui couvre 20 % de l’écran à partir du haut, avec un format 16:9.
    Right20-LandscapeSD3Zone Un modèle à trois zones qui couvre 20 % de l’écran à partir de la droite, avec un format 4:3.
    note important
    IMPORTANT
    Les zones définies dans la disposition personnalisée ne correspondent pas nécessairement aux proportions globales de l’ensemble de la disposition. La convention d’affectation de noms appliquée dans ce document définit les proportions de l’ensemble de la disposition personnalisée.

Exemple de cas d’utilisation de disposition Left20-LandscapeHD3Zone custom-template-one

Appliquez la procédure décrite dans la section ci-dessous pour créer un modèle personnalisé Left20-LandscapeHD3Zone avec la configuration suivante :

  • Left20  : la zone supérieure sur la gauche qui couvre 20 % de l’écran horizontal et vertical.
  • Landscape  : l’orientation de l’écran.
  • HD  : le format 16:9.
  • 3Zone  : les trois zones de l’affichage.

Représentation visuelle de la disposition multizone multi-layout-visual-one

La disposition Left20-LandscapeHD3Zone vous permet de créer la disposition multizone suivante dans votre projet :

image

Création d’une disposition Left20-LandscapeHD3Zone landscape-layout-one

Appliquez la procédure suivante pour créer une disposition Left20-LandscapeHD3Zone pour un projet AEM Screens :

  1. Créez un projet AEM Screens intitulé customtemplate.

    image

  2. Accédez à CRXDE Lite à partir de votre instance AEM > Outils > CRXDE Lite.

  3. Créez un dossier sous apps intitulé customtemplate. De même, créez un autre dossier intitulé template sous customtemplate, comme illustré dans la figure ci-dessous.

    image

    note note
    NOTE
    Cliquez sur Enregistrer tout dans la barre d’actions de CRXDE Lite chaque fois que vous créez, modifiez ou copiez du contenu sur l’un des nœuds. Sinon, vous ne pouvez pas valider les mises à jour.
  4. Copiez le modèle de la barre de gauche depuis /libs/screens/core/templates/splitscreenchannel/lbar-left vers /apps/customtemplate/template.

  5. Renommez la barre de gauche copiée (/apps/customtemplate/template) en indiquant my-custom-layout.
    image

  6. Accédez à /apps/customtemplate/template/my-custom-layout et mettez à jour les propriétés jcr:description sur Modèle pourLeft20-LandscapeHD3Zone et jcr:title sur Left20-LandscapeHD3Zone.

    image

  7. Accédez au nœud offline-config à partir de /apps/customtemplate/template/my-custom-layout/jcr:content/offline-config et mettez à jour jcr:title sur Left20-LandscapeHD3Zone.

    image

  8. Accédez à la propriété jcr:content de my-custom-template à partir de /apps/customtemplate/template/my-custom-layout/jcr:content et mettez à jour la propriété cq:cssClass pour pouvoir utiliser aem-Layout my-custom-layout.

    image

  9. En vous référant à l’étape (4), au cours de laquelle vous avez copié le modèle de la barre de gauche, vous voyez apparaître trois grilles réactives sous my-custom-layout/jcr:content. Ajoutez la classe CSS personnalisée à chacune des grilles réactives dans la propriété cq:cssClass, par exemple my-custom-layout-top-left pour le nœud r1c1.

    Image

    De même, ajoutez my-custom-layout-top-right pour r1c2 et my-custom-layout-bottom pour le nœud r2c1.

    note note
    NOTE
    Ces classes personnalisées sont utilisées dans le CSS pour définir la largeur et la hauteur de ces grilles réactives.
    note note
    NOTE
    Vous pouvez ajouter ou supprimer les grilles réactives en fonction du nombre total de grilles souhaité. Dans cet exemple, deux grilles dans la première ligne et une grille dans la deuxième ligne sont présentées. Il y a donc un total de trois grilles réactives (r1c1, r1c2, r2c1).
  10. Copiez /libs/settings/wcm/designs/screens dans /apps/settings/wcm/designs/ et renommez la conception copiée custom-template-designs.

  11. Accédez à /apps/settings/wcm/designs/custom-template-designs et mettez à jour la propriété jcr:title de custom-template-designs sur customtemplate-design.

  12. Accédez à /apps/settings/wcm/designs/custom-template-designs et créez un fichier static.css.

  13. Copiez le contenu dans le fichier static.css :

    code language-shell
        /*my-custom-layout styles*/
       .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--top-left {
        width:20%;
        height: 36%;
       float: left !important;
       }
      .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--top-right {
       width:80%;
       height: 36%;
      float: left !important;
      }
      .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--bottom {
      width:100%;
      height: 64%;
      }
    
    note note
    NOTE
    Vous pouvez mettre à jour les pourcentages pour qu’ils répondent aux exigences de votre modèle personnalisé.
  14. Accédez à /apps/<project>/templates/my-custom-layout/jcr:content et mettez à jour la propriété cq:designPath sur /apps/settings/wcm/designs/customtemplate-designs afin de charger les styles configurés dans static.css.

    note note
    NOTE
    Saisissez tous les styles plutôt que de les copier ou coller, ce qui peut entraîner des espaces blancs et par conséquent des problèmes de styles CSS.

Afficher le résultat viewing-result

Suivez les étapes ci-dessous pour utiliser le modèle personnalisé ci-dessus dans votre projet AEM Screens :

  1. Accédez au projet Screens que vous avez créé à l’étape (1) et cliquez sur le dossier Canaux.

    Image

  2. Cliquez sur Créer dans la barre d’actions, puis sur le modèle Left20-LandscapeHD3Zone dans l’assistant Créer.

    image

  3. Après avoir créé un canal avec le modèle personnalisé, vous pouvez lui ajouter des ressources à partir de l’éditeur. L’aperçu ci-dessous montre les images dans un modèle personnalisé.

    image

Insertion d’une image en tant que calque d’arrière-plan inserting-image

Vous pouvez insérer une image en tant que calque d’arrière-plan dans la disposition :

Vous pouvez ajuster la règle CSS pour utiliser un « data-uri » et intégrer directement l’image (codée en Base64) dans le fichier CSS créé à l’étape 13, static.css.

Pour cet arrangement, procédez comme suit :
.cq-Screens-channel--multizone.my-CustomLayout { background: url('data:image/…;base64,…') no-repeat center center; }

Vous pouvez également suivre les étapes ci-dessous :

  1. Vérifiez que l’image est incluse d’une manière ou d’une autre dans la configuration hors ligne du canal.
  2. Utilisez un lien direct vers l’image dans le fichier CSS ci-dessus, au lieu de la variante « data-uri ».

Mise à jour de la couleur d’arrière-plan updating-color

Pour modifier la couleur d’arrière-plan, ajoutez le code suivant au fichier xml (étape 13), static.css.

.cq-Screens-channel--multizone.my-CustomLayout { background-color: …; }

recommendation-more-help
adce462a-f916-4dbe-9ab5-0b62cfb0f053