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

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.

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.

Créez un projet AEM Screens intitulé customtemplate.

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

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.

Copiez le modèle de la barre de gauche depuis /libs/screens/core/templates/splitscreenchannel/lbar-left vers /apps/customtemplate/template.

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

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.

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.

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.

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.

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

Copiez /libs/settings/wcm/designs/screens dans /apps/settings/wcm/designs/ et renommez la conception copiée custom-template-designs.

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

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

Copiez le contenu dans le fichier static.css :

    /*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%;
  }

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.

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

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

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é.