Création dynamique

  • Rversion finale: Xanadu
  • Mis à jour 1 août 2024
  • 5 minutes de lecture
  • Utilisez la création dynamique pour créer des Générateur d'IU pages qui s’adaptent facilement à différents facteurs de forme (tailles), tels que les ordinateurs de bureau, les tablettes et les appareils mobiles.

    Création dynamique dans Générateur d'IU

    La création dynamique vous permet de créer des pages qui s’affichent bien et fonctionnent correctement à n’importe quel facteur de forme, ce qui facilite l’interaction des utilisateurs avec le contenu. Par exemple, une page contenant trois colonnes lorsqu’elle est affichée sur un ordinateur portable peut s’ajuster à une seule colonne pour les petits écrans.

    Générateur d'IU propose actuellement trois facteurs de forme par défaut :

    • Ordinateur de bureau (1281 pixels à l’infini)
    • Tablette (1280 pixels et moins)
    • Mobile (500 pixels à zéro)

    En plus de ces facteurs de forme, vous pouvez créer jusqu’à trois points d’arrêt personnalisés (largeurs) supplémentaires. Pour plus d'informations, consultez Créer un point d’arrêt pour la création dynamique.

    Il existe différentes techniques d’édition des pages, de sorte qu’elles peuvent être utilisées à différents facteurs de forme. Utilisez l’une des options suivantes :

    Création dynamique et redisposition

    À partir de la version 1 de Xanadu Store, la création dynamique n’est disponible que lors de la création Générateur d'IU de pages à partir de zéro. La création dynamique n’est pas disponible pour les pages existantes ou les pages créées avec un modèle. Ces types de pages continuent d’utiliser le modèle de redistribution existant par défaut pour ajuster les pages en fonction des différentes largeurs d’écran.

    La redistribution transforme automatiquement les mises en page en une vue verticale empilée, sans perte de contenu ou de fonctionnalité lorsque les utilisateurs augmentent le zoom du navigateur à 400 %. Cet ajustement aide les utilisateurs malvoyants ou qui ont des difficultés à voir le contenu Web dans un navigateur en raison de la taille de l’écran, du type d’appareil, d’un mauvais éclairage ou d’autres situations.

    Toutes les pages existantes qui ont été créées avec des modèles ou à partir de zéro utilisent la redisposition automatiquement. Désormais, lors de la création de pages à partir de zéro dans Générateur d'IU, une étape supplémentaire vous indique que la création dynamique est sélectionnée par défaut. Vous pouvez choisir d’utiliser la redisposition à la place en sélectionnant Utiliser les règles de redisposition automatique, cependant, l’utilisation de l’option de création dynamique vous donne plus de contrôle sur le fonctionnement des pages et sur les différents facteurs de forme. Pour plus d’informations sur la création de pages dans Générateur d'IU, voir Créer une page dans le générateur d’IU.

    Nouvelle étape affichant les options de création dynamique et de redisposition lors de la création d’une page à partir de zéro.

    Pour en savoir plus sur la redisposition, reportez-vous à la section Reflow for Configurable Workspace.

    Pour obtenir la liste des composants qui prennent en charge la Générateur d'IU redistribution, consultez la section Prise en charge de la redisposition des notes de publication des composants Next Experience.

    Application et cascade des changements

    Toutes les modifications apportées à un facteur de forme sont appliquées automatiquement à tous les facteurs de forme plus petits. Par exemple, toutes les modifications apportées à la tablette s’appliquent à la fois à la tablette et au mobile. Toutefois, si vous apportez ensuite des modifications au facteur de forme mobile, cela remplace les paramètres en cascade du facteur de forme tablette. Cette fonctionnalité en cascade vous permet d’apporter des modifications spécifiques pour chaque facteur de forme plus petit afin que la page ait une apparence et un bon fonctionnement.

    Remarque :
    Les modifications ne se répercutent pas sur des tailles plus grandes. Par exemple, les modifications apportées à la tablette ne sont pas appliquées au bureau.

    Création et contrôleurs réactifs

    Si vous ajoutez un contrôleur à une page, les propriétés du contrôleur sont globales et ne peuvent pas être définies par facteur de forme. Pour plus d’informations sur les contrôleurs, reportez-vous à la section Lier des données à des pages à Générateur d'IU l’aide de contrôleurs (fonctionnalité avancée).

    Utiliser la création dynamique lors de la création de pages

    Au fur et à mesure que vous créez des pages, créez des conceptions sur mesure pour contrôler l’aspect et la convivialité de différents facteurs de forme.

    Par défaut, sur l’étape, vous créez des pages pour le bureau (1281 pixels à l’infini). À tout moment, sélectionnez une autre icône pour afficher la page sur l’étape à un autre facteur de forme, par exemple tablette ou mobile. Si nécessaire, modifiez la page afin qu’elle s’affiche correctement au nouveau facteur de forme.

    Flèche noire pointant vers les icônes de facteur de forme pour ordinateur de bureau, tablette et mobile en haut d’une page du générateur d’IU en mode Éditeur.

    Voici à quoi ressemble un exemple de page au format de bureau.

    Exemple de page affiché à 1304 pixels de large pour représenter un écran de bureau ou d’ordinateur portable.

    Voici la même page personnalisée pour le facteur de forme de la tablette.

    Exemple de page affiché à 900 pixels de large pour représenter une tablette.

    Pour les tablettes, la taille de l’en-tête et des composants de l’image a été réduite. La configuration simple du composant de liste a été modifiée pour afficher quatre colonnes au lieu de six et le nombre maximal de lignes a été défini sur 5. Lors de la modification d’un composant pour un facteur de forme, les champs qui ont été modifiés sont marqués d’une icône en cascade pour ce facteur de forme (dans ce cas, tablette). L’icône vous permet de déterminer facilement les différences entre les facteurs de forme d’une page donnée.

    Panneau de configuration du composant de liste simple avec des flèches noires pointant vers l’icône de création dynamique en cascade de tablette en regard de deux champs.

    Voici la même page personnalisée pour le facteur de forme mobile.

    Exemple de page affiché sur une largeur de 320 pixels pour représenter un appareil mobile.

    Le nombre de mots dans l’en-tête a été réduit et le composant image a été masqué. La configuration du composant de liste simple a été modifiée pour afficher deux colonnes au lieu de quatre, et l’option permettant de masquer l’option de pied de page « afficher tout » a été sélectionnée. Les deux champs personnalisés spécifiquement pour Mobile sont accompagnés d’une icône en cascade mobile. Le champ Nombre maximal de lignes conserve toujours l’icône en cascade de tablette, car ce champ hérite du paramètre de tablette et n’a pas été personnalisé pour les appareils mobiles.

    Panneau de configuration du composant de liste simple avec des flèches noires pointant vers les deux icônes en cascade de mobiles et d’une tablette en regard des champs.

    En plus des facteurs de forme par défaut dans la vue de l’éditeur, vous pouvez à tout moment saisir manuellement un nombre dans le champ de pixels. L’étape s’ajuste au facteur de forme le plus proche en fonction de la plage. Par exemple, si vous entrez 850 pixels, la scène est ajustée au facteur de forme de la tablette, car sa plage est comprise entre 1 280 et 501 pixels.

    Flèches noires pointant vers l’icône du facteur de forme de la tablette et le champ de pixels.

    Remarque :
    Des facteurs de forme et la possibilité d’entrer une largeur de pixel sont également disponibles lors de l’aperçu d’une page. Pour plus d'informations, consultez Découvrez comment afficher et tester votre Générateur d'IU expérience.