Dynamic layouts
Les mises en page dynamiques (dynamic layouts) sont un type de mise en page qui organise les éléments que vous désignez (champs ou contrôles, par exemple), dans un format flexible qui s’ajuste automatiquement à la taille de l’écran. Les mises en page dynamiques prennent en charge le comportement adaptatif sur divers appareils tels que les ordinateurs, les tablettes et les téléphones. Quand la taille de l’écran change, les dynamic layouts modifient le contenu à l’écran en faisant passer des éléments à la ligne suivante. L’habillage élimine le besoin de défilement horizontal sur les petits écrans.
Note: Les dynamic layouts ne sont disponibles que pour les interfaces utilisateur rendues dans le type de document HTML5. Les applications créées avant Pega 7.0 pourraient ne pas utiliser les dernières fonctionnalités dynamiques de l’interface utilisateur Pega PlatformTM. Vous pouvez utiliser la page d'accueil HTML5 Application Readiness pour mettre à jour votre application. Pour obtenir plus d’informations sur la page d’accueil HTML5 Application Readiness, consultez la rubrique d’aide Page d’accueil HTML5 Application Readiness.
Vérifiez vos connaissances avec l’interaction suivante.
Modèles de conception pour les dynamic layouts
Les modèles de conception sont des mises en page préformatées. De nombreux modèles de conception offrent un formatage commun pour les dynamic layouts, comme l’organisation du contenu en une, deux ou trois colonnes. Chaque modèle de présentation divise une mise en page en une ou plusieurs zones. Un développeur peut placer des champs dans chaque zone pour organiser rapidement le contenu d’une vue. Lorsque le modèle de présentation est basé sur un dynamic layout, un changement de taille d’écran peut réorganiser le contenu de la vue.
Note: Un petit nombre de modèles de conception fournissent un formatage pour les mises en page autres que dynamiques.
L’image suivante contient quelques exemples de modèles de conception fournis par Pega.
Chaque vue peut contenir un modèle de présentation. Vous pouvez combiner des vues modulaires de petite taille en une vue plus grande pour imiter l’utilisation de plusieurs modèles dans une vue unique.
Par exemple, une vue des informations client contient des informations sur l’adresse du domicile et l’adresse de facturation. Le modèle par défaut pour la vue est 1 colonne, mais les parties prenantes disent qu’elles veulent voir deux colonnes, une pour l’adresse du domicile et l’autre pour l’adresse de facturation.
Ultérieurement, les parties prenantes décident que les informations client doivent être divisées pour éviter la nécessité de faire défiler l’écran afin d’accéder à tous les champs. Elles demandent un changement supplémentaire, à savoir regrouper l’affichage du département ou de la région ou le numéro de téléphone du client dans une colonne distincte, avec les autres informations relatives à l’adresse du domicile. Un développeur crée une vue pour l’adresse du domicile en utilisant le modèle à 2 colonnes, puis référence cette vue dans la première colonne de la vue d’origine, qui utilise également le modèle à 2 colonnes. Le résultat est un modèle dans un modèle.
Au centre de l’image suivante, faites glisser la ligne verticale pour visualiser la transition d'un modèle à 2 colonnes vers un modèle à 2 colonnes insérées dans la première colonne.
Vérifiez vos connaissances avec l’interaction suivante.
This Topic is available in the following Modules:
If you are having problems with your training, please review the Pega Academy Support FAQs.
Want to help us improve this content?