nécessite un équilibre réfléchi entre performances, maintenabilité et clarté.
Tout au long de ce document, nous explorerons les approches clés permettant d’atteindre cet équilibre, telles que :
Types d’approche
Cas d’utilisation des approches
Comment mettre en œuvre chaque approche efficacement
Ces concepts sont à l’origine issus du monde de la conception de sites Web et des applications multiplateformes, mais sont aujourd’hui incontournables dans les IHM industrielles, où une même application peut être affichée sur des dispositifs très différents.
Approche évolutive :
Une approche évolutive sur une interface consiste à redimensionner proportionnellement tout en conservant la disposition, le positionnement et la lisibilité, quelle que soit la résolution du dispositif.
Par exemple : Une disposition conçue pour des dimensions de 1920×1080 qui s’adapte également correctement à des dimensions de 1280×720 ou 3840×2160.
Approche adaptative :
Une approche adaptative sur une interface consiste à ajuster sa disposition en fonction du dispositif ou de la résolution, en chargeant différentes structures en conséquence.
Par exemple : Un tableau de bord qui s’affiche de manière compacte sur une tablette et de façon étendue sur un PC industriel (Panel PC).
Approche réactive :
Une approche réactive sur une interface réorganise son contenu en temps réel en fonction de l’espace disponible, sans changer de page.
Exemple : Une grille qui passe de 4 à 2 colonnes lorsque la fenêtre est redimensionnée.
Quand utiliser chaque approche
Le tableau ci-dessous présente l’approche recommandée pour chaque scénario d’interface :
Scénario
Approche recommandée
Procédure de mise en œuvre
Des résolutions différentes mais la même disposition
Par exemple, pour créer un en-tête, utilisez un objet
Panneau
et définissez son alignement horizontal sur
Étirer
. Cela garantit que, quelle que soit la résolution finale, l’objet occupe toute la largeur disponible.
IMPORTANT:
L’attribution de tailles fixes aux objets conteneur empêche l’interface d’être mise à l’échelle sur différentes résolutions d’écran. N’attribuez des tailles fixes que si nécessaire.
Taille
Résultat
800px
1280px
CONSEIL:
Définissez l’alignement du conteneur sur
Étirer
pour permettre une distribution automatique de l’espace en fonction de la résolution. Même si l’application est développée avec une résolution fixe, les éléments s’adaptent à leur conteneur à l’exécution.
Taille
Résultat
800px
1280px
Mettre en œuvre une approche adaptative
Lorsque vous concevez pour des résolutions très différentes (par exemple, 1920×1080 ou 480×272), vous devez créer des dispositions distinctes. Utilisez le
contrôle Chargeur de panneau
pour charger dynamiquement différentes dispositions en fonction de la résolution.
Pour déterminer la résolution de l’écran, utilisez les propriétés
Largeur
et
Hauteur
de
MainWindow
. Définissez la fonctionnalité
Modifier la règle de modélisation
de ces propriétés sur
Obligatoire
pour garantir que ces valeurs sont disponibles à l’exécution.
IMPORTANT:
L’utilisation de la fonctionnalité
Modifier la règle de modélisation
est réservée aux utilisateurs avancés. Vous pouvez afficher cette fonctionnalité uniquement si vous avez activé le
mode Avancé
dans le panneau
Options FactoryTalk Optix Studio
.
Limitez l’utilisation de cette fonctionnalité à cette étendue spécifique afin d’éviter tout comportement inattendu.
CONSEIL:
Il est recommandé de stocker les valeurs calculées dans des variables auxiliaires au sein du
MainWindow
, notamment si elles sont utilisées à plusieurs endroits. Cela évite de répéter des
liens dynamiques complexes
composés de plusieurs convertisseurs, ce qui réduit le nombre de nœuds et améliore les performances.
Mettre en œuvre une approche réactive
Outre l’utilisation du
Chargeur de panneau
, la visibilité conditionnelle est essentielle à la conception réactive. Par exemple, un menu latéral ne peut apparaître qu’au-dessus d’une certaine largeur d'écran, tandis qu’un bouton bascule apparaît en dessous de ce seuil.
Le
DispositionEnGrille
est essentiel pour organiser le contenu de façon dynamique. Il permet de définir le nombre de lignes et de colonnes.
Vous pouvez également utiliser les fonctionnalités
