--- title: "Conception d'interfaces utilisateur d'applications flexibles, utilisant des feuilles de style multi-niveaux" date: "2016-12-06" categories: - "applications" - "development" - "mobile" tags: - "app-design" - "app-development" - "app-ui" - "app-ux" - "mobiletogether" description: Découvrez comment les feuilles de style multi-niveaux dans MobileTogether améliorent la conception de l'interface utilisateur des applications, permettant une personnalisation dynamique sur différentes plateformes tout en conservant une apparence native. --- Status: #blog Tags: #app-design #app-development #app-ui #app-ux #mobiletogether Categories: [low-code+no-code](/blog/fr/category/low-codeno-code.md) | [mobile-development](/blog/fr/category/mobile-development.md) # Conception d'interfaces utilisateur d'applications flexibles, utilisant des feuilles de style multi-niveaux L'utilisation d'un framework de développement mobile multiplateforme comme MobileTogether est un excellent choix pour [créer des applications natives](https://www.altova.com/fr/mobiletogether.html), car l'environnement de conception assure un rendu correct de l'interface utilisateur de l'application, en utilisant l'apparence et le comportement propres à chaque système d'exploitation. Il suffit de créer une seule conception. Cela permet aux développeurs d'applications de créer rapidement des applications sophistiquées, axées sur les données, pour tous les utilisateurs. Pour faciliter ce processus, MobileTogether utilise une approche RMAD, ainsi que des options flexibles pour concevoir une expérience utilisateur (UX) attrayante. Pour aider spécifiquement dans ce dernier point, des feuilles de style multi-niveaux permettent de personnaliser et d'appliquer des styles, de manière statique ou dynamique, à différents niveaux de la conception de l'interface utilisateur de l'application, en quelques clics seulement. ![Visualisation d'une application mobile](/blog/images/shutterstock_2341179701.jpg) ## Concevez une interface utilisateur attrayante Introduites pour la première fois dans la version 3.0 de [MobileTogether](https://www.altova.com/fr/mobiletogether/new-features.asp), les feuilles de style multi-niveaux permettent aux développeurs d'applications de définir des styles globaux qui peuvent être appliqués aux niveaux du projet, de la page, du tableau et du contrôle. Cela offre un référentiel centralisé de styles que vous pouvez utiliser à différents niveaux tout au long du projet de développement de l'application. Pourquoi personnaliser les styles ? Tout d'abord, il est important de souligner que cette option est facultative. MobileTogether applique automatiquement les styles par défaut, l'apparence des boutons, etc., pour chaque système d'exploitation (iOS, Android, Windows, etc.), ce qui vous permet de créer une interface utilisateur claire et fonctionnelle sans avoir besoin de modifications. Cependant, il arrive parfois que des styles personnalisés soient nécessaires pour se conformer aux guides de style de l'entreprise, pour des fonctionnalités spécifiques ou pour des raisons de créativité. Les nouvelles feuilles de style multi-niveaux de MobileTogether sont conçues pour faciliter et accélérer ce processus. Pour commencer, ouvrez la fenêtre de dialogue des feuilles de style à partir du menu Projet. Cela vous permet de créer deux types de feuilles de style : feuilles de style de projet et feuilles de style créées par l'utilisateur. La feuille de style du projet est l'endroit où vous définissez vos personnalisations de niveau supérieur. Les styles que vous définissez ici seront appliqués automatiquement à l'ensemble du projet. C'est idéal si vous souhaitez apporter des modifications générales à l'apparence de tous les boutons, définir la taille de la police pour tous les éléments de texte, ou contrôler les couleurs de fond à l'échelle du projet.   ![Feuille de style globale au niveau du projet](/blog/images/app-project-stylesheet.png)   Le deuxième type correspond aux feuilles de style créées par l'utilisateur, qui sont nommées par le développeur et peuvent être appliquées selon les besoins à des pages, des tableaux et des éléments de contrôle individuels. En d'autres termes, ces styles ne sont pas appliqués à l'ensemble du projet. Dans la capture d'écran ci-dessous, vous pouvez voir une feuille de style créée par l'utilisateur que j'ai nommée "MesStyles", qui définit certains styles pour les boutons, les graphiques et les étiquettes. Lors de la définition des styles dans le volet de droite de la boîte de dialogue des feuilles de style, vous pouvez sélectionner ou saisir une valeur de propriété statique, ou vous pouvez saisir une [expression XPath](https://www.altova.com/fr/xpath-intro.html) qui renvoie une valeur de propriété. Un exemple d'affectation dynamique serait de rendre une valeur de propriété conditionnelle à un certain critère, comme la largeur de l'écran de l'appareil mobile de l'utilisateur final, ou en fonction des préférences de l'utilisateur, par exemple en permettant à l'utilisateur de modifier la taille de la police via une page de paramètres dans votre application, et en appliquant cette taille de police à tous les éléments de texte. Dans la feuille de style MyStyles ci-dessous, j'ai utilisé XPath pour ajuster dynamiquement la hauteur et la largeur des graphiques, de manière à ce qu'ils soient parfaitement adaptés à l'appareil utilisé par l'utilisateur.   ![Fiche de style d'application créée par l'utilisateur](/blog/images/app-stylesheet.png)   Vous pouvez définir autant de feuilles de style créées par l'utilisateur que vous le souhaitez, afin de proposer des options de formatage pour différents éléments. Lors du développement d'une application, l'application d'une feuille de style créée par l'utilisateur à un composant de conception est aussi simple que de sélectionner le nom de la feuille de style dans la fenêtre "Styles et propriétés".   ![Sélectionner la feuille de style pour les appareils mobiles](/blog/images/select-mobile-stylesheet.png) Vous pouvez également spécifier dynamiquement la sélection de la feuille de style en utilisant XPath, par exemple, pour faire dépendre le choix de la feuille de style du type de l'appareil mobile actuel. Un avantage majeur de l'utilisation d'une expression XPath pour sélectionner une feuille de style créée par l'utilisateur est que la sélection peut être conditionnée par des critères environnementaux dynamiques. Par exemple, si vous souhaitez spécifier une feuille de style pour les appareils iOS et une autre pour tous les autres appareils, vous pouvez utiliser l'expression XPath suivante : si ($MT_iOS=true()) alors 'iOSStyleSheet' sinon 'GeneralStyleSheet'. Lorsque vous avez défini une feuille de style personnalisée pour une page ou un élément, celle-ci remplace toutes les valeurs correspondantes dans la feuille de style du projet. Cela vous permet de faire des ajustements généraux ainsi que des modifications plus précises.   Les feuilles de style multi-niveaux permettent de gagner énormément de temps et offrent une flexibilité inégalée pour personnaliser l'apparence des applications sur toutes les plateformes. Par exemple, comme je l'ai mentionné dans l'introduction, si vous devez faire en sorte que tous les boutons de votre application aient la même apparence sur iOS, Android et Windows (c'est-à-dire, au lieu d'utiliser l'apparence native des boutons), vous pouvez désormais définir cela une seule fois par projet (ou à n'importe quel autre niveau, selon vos besoins). **Découvrez cette fonctionnalité en [créant une application](https://www.altova.com/fr/download/mobiletogether.html) grâce au logiciel MobileTogether Designer, qui est disponible gratuitement.**