Widgets : les éléments constitutifs de l'interface utilisateur
Dans un article précédent, J'ai passé en revue les 3 composants du modèle de domaine et comment construire les fondations d'une application. Je vais maintenant me concentrer sur les éléments constitutifs de l'interface utilisateur. L'interface utilisateur est composée de pages dans lesquelles les utilisateurs naviguent. Les pages d'application sont stylisé à l'aide de CSS et modélisé à l'aide de widgets construits sur JavaScript.
La majorité des widgets de notre App Store, tels que les grilles de données, le texte de saisie et les menus déroulants, sont prêts à l'emploi. Dans mon premier article, j'ai mis en avant certains de mes widgets préférés. Aujourd'hui, nous allons nous pencher plus en détail sur les principaux widgets qui contribuent à offrir une excellente interface utilisateur et montrer à quel point il est facile de les utiliser.
Les exemples que j'utiliserai dans cet article sont tirés de notre App Store application d'annuaire des employés.
Affichage des données et grille de données
La vue des données et la grille de données sont un Mendix Le pain et le beurre du développeur. Ils constituent la base de l'affichage des données dynamiques aux utilisateurs finaux. La vue des données montre un seul objet dans la base de données, tandis que la grille de données montre une liste d'objets dans la base de données.
Pensez à n'importe quelle page de présentation dont vous pourriez avoir besoin. La façon la plus simple de créer des pages de présentation est d'ajouter une grille de données dans une page et de sélectionner l'entité que vous souhaitez afficher. À partir de là, je remplis et génère automatiquement le reste des pages. Après avoir créé les pages principales, j'affiche uniquement les données pertinentes pour les utilisateurs et je répare l'interface en ajoutant des conteneurs, des zones de groupe ou des onglets.
En Mendix développeur, si vous allez sur la page Desktop_Employee_Directory, vous pouvez voir l'utilisation de groupbox et d'une dataview avec la grille d'écoute. Je vous invite à expérimenter tous les outils et widgets !
Figure 1 : Exemple de page avec GroupBox et vue de données
Figure 2 : Exemple de ce que voit l'utilisateur final
Entrée
Les widgets de saisie affichent les attributs d'une entité. Vous pouvez avoir différents champs de saisie en fonction du type de données. Dans l'exemple ci-dessous, il existe trois types de widgets de saisie.
- Le widget de saisie de texte est utilisé pour les chaînes et autres types de données alphanumériques.
- Le type de données de date indique la date à laquelle l'enregistrement de l'employé a été créé. Le même widget de saisie de date est également utilisé pour afficher la date de naissance.
- La liste de boutons radio est utilisée pour afficher le sexe de l'employé. Nous aurions également pu utiliser le widget de saisie déroulant, mais la liste de boutons radio de l'App Store offre une interface utilisateur plus attrayante.
Figure 3 : Exemple de widgets de saisie – montrant le Desktop_EmployeeSnippet
Figure 4 : Exemple de ce que verra l'utilisateur final
Snippets
Les extraits sont le meilleur ajout Mendix 5+ et l'un de mes outils préférés. Le widget d'extraits est utile lorsque vous souhaitez réutiliser des pages ou des composants de mise en page.
Dans l’application d’annuaire des employés, les informations sur les employés sont un extrait utilisé sur deux pages différentes (illustrées ci-dessous).
Figure 5 : Nombre de fois que les informations sur l'employé sont appelées – dans les détails de l'employé et lors de la création d'un nouvel employé
Au lieu de générer les mêmes informations sur plusieurs pages, vous pouvez créer un extrait une seule fois et l'appeler autant de fois que vous le souhaitez ! En utilisant les extraits, vous n'avez qu'à modifier la vue des données ou les informations de la grille de données à un seul endroit, ce qui rend le tout plus efficace. De plus, les pages se chargent plus rapidement !
J'ai récemment utilisé des extraits dans un projet et je les ai trouvés incroyablement utiles. Pour plus d'informations sur l'utilisation des extraits, lisez ceci. article utile ! Voir le application d'annuaire des employés et d'autres exemples d'applications dans notre App Store.
Mendix Les développeurs voient ce que voient les utilisateurs
Lorsqu'il est temps de créer l'interface utilisateur, les widgets sont indispensables. Ils facilitent grandement le développement de l'interface utilisateur car ils sont intuitifs. Mendix développeur, vous voyez plus ou moins ce que voit l'utilisateur. Et tandis que le Mendix L'App Store dispose d'une multitude de widgets et de composants prédéfinis, la communauté est toujours encouragée à contribuer davantage d'idées.




