Conception d'interface utilisateur dans Mendix - Widgets, dispositions de navigation, modèles de pages

Comment puis-je concevoir des interfaces utilisateur riches ?

Les interfaces utilisateur sont construites via la combinaison d'une interface glisser-déposer avec un éditeur de page WYSIWYG. Mendix L'environnement Studio Pro peut être utilisé avec le Interface utilisateur Atlas framework, qui est entièrement réactif, open-sourceet un langage de conception extensible qui facilite une approche de réflexion conceptuelle pour la création d'interfaces utilisateur.

Des modèles de page courants tels que des listes consultables, des vues de données, des tableaux de bord et des assistants sont mis à disposition en tant que modèles de démarrage qui aident à accélérer le développement et à garantir une interface utilisateur standard et cohérente sur plusieurs appareils.

• Dispositions de navigation

  Lors de la construction d'un Mendix Pour créer une application, la première chose à faire est de choisir une disposition de navigation. Ces dispositions constituent le cadre dans lequel vos pages dynamiques sont hébergées et elles fournissent une structure cohérente dans toute votre application.

  Les mises en page de navigation sont créées à l'aide de l'éditeur de mise en page de la plateforme, qui vous permet de créer les modèles de mise en page nécessaires à vos pages.

  Les mises en page utilisent des contrôles spécifiques, tels que des grilles de mise en page, des espaces réservés au contenu, des conteneurs de défilement, des barres de menus coulissantes et des extraits, pour définir de manière centralisée les modèles de mise en page de page requis qui seront utilisés lors de la création de l'interface utilisateur de votre application.

• Page Templates

  Les modèles de page sont des collections prédéfinies de blocs de construction qui peuvent être utilisés tels quels ou améliorés avec des blocs de construction et des widgets personnalisés.

• Blocs de construction

  Les blocs de construction sont des éléments d'interface utilisateur à usage unique composés de plusieurs widgets et styles. Plusieurs blocs de construction sont généralement utilisés ensemble sur une même page. Vous pouvez faire glisser un bloc de construction dans l'une des pages mobiles, tablettes ou réactives respectives pour implémenter des modèles d'interface utilisateur courants, ce qui accélère considérablement le développement de pages personnalisées.

• Widgets

  Les widgets sont de petits éléments d'interface utilisateur (par exemple, des alertes, des boutons, des graphiques) utilisés pour améliorer les blocs de construction existants.

  Mendix fournit de nombreux widgets prêts à l'emploi, et il existe des centaines de widgets open source disponibles dans le Mendix Marketplace. Vous pouvez également créer vos propres widgets à l'aide de JavaScript, comme indiqué dans la section Comment puis-je prolonger le Mendix L'extrémité avant? of Front-End.

• Propriétés de conception

  Vous pouvez personnaliser davantage les widgets en modifiant leurs propriétés de conception. Les couleurs, le texte et de nombreuses autres variables peuvent être modifiés pour personnaliser les widgets au cas par cas si le style ou le placement ne sont pas tout à fait corrects. Les développeurs de thèmes peuvent implémenter leurs propres propriétés de conception (d'entreprise) afin que d'autres utilisateurs puissent facilement modifier l'apparence des widgets pour qu'ils correspondent à la marque de l'entreprise.

À quoi servent les éléments de l'interface utilisateur Mendix Fournir une solution prête à l'emploi ?

Mendix fournit une liste croissante de widgets prêts à l'emploi. Voici une sélection des plus courants :

• Widgets de menu – permet à l’utilisateur final de naviguer dans l’application (par exemple, barre de menu, arborescence de navigation)
  

• Widgets de données – au cœur des formes de construction dans Mendix afin que l'utilisateur final puisse visualiser et modifier les données dans l'application (par exemple, la vue des données, la grille de données, ainsi que les widgets de saisie courants comme la zone de texte et le bouton radio)
  

• Widgets de mise en page – constituent l’épine dorsale de l’interface et sont généralement utilisés dans les mises en page (par exemple, conteneur de mise en page, titre)
  

• Widgets communs – généralement présent sur n’importe quelle page, mise en page et extrait (par exemple, une étiquette, une image)

• Widgets de conteneurs – peut contenir d’autres widgets (par exemple, un tableau,
  boîte de groupe)
  

• Widgets d'entrée – permettre d’afficher et de modifier les valeurs des attributs et des associations (par exemple, zone de texte, sélecteur de date)
  

• Widgets de fichiers – vous permet de travailler avec des fichiers, y compris des images stockées dans des fichiers
  

• Widgets de boutons – ces boutons déclenchent des actions (par exemple, bouton enregistrer, bouton fermer la page, bouton microflow)
  

• Widgets de visualisation – plus de widgets graphiques (par exemple, graphique, carte)

De nouveaux widgets sont créés en permanence par le noyau Mendix équipe de développement et notre communauté de développeurs utilisant les outils standards disponibles. Vous pouvez trouver les widgets disponibles dans le Mendix Marketplace et téléchargez-les pour les utiliser dans votre application.

Comment puis-je personnaliser l’apparence de mes applications ?

L'espace Mendix Le front-end utilise le framework Atlas UI pour restituer des pages responsives ou des pages mobiles natives. Le framework est basé sur un thème par défaut qui peut être entièrement personnalisé. Avec l'outil Theme Customizer, vous pouvez facilement télécharger un logo qui est utilisé pour déterminer les couleurs de votre marque. Les différents paramètres de couleurs, de polices et de taille peuvent être rapidement configurés et prévisualisés.

A côté de ça, Mendix Usages Toupet pour définir le style. La plateforme contient un fichier de configuration avec de nombreuses variables qui peuvent être utilisées pour configurer et peaufiner le thème. La configuration est configurée de manière à pouvoir être facilement modifiée et étendue en fournissant des fichiers Sass personnalisés. Il est également possible d'étendre directement le style avec du CSS personnalisé. Le style peut également être partagé, comme indiqué dans la section suivante sur la création d'expériences utilisateur cohérentes.

Pour plus d'informations, consultez la collection de Procédures d'utilisation de l'interface utilisateur d'Atlas dans le Mendix Documentation.

Pour  applications mobiles natives, le style est basé sur JavaScript. Pour plus d'informations, voir Style natif.

Comment La Mendix Soutenez-vous la réutilisation des modèles et éléments de conception ?

Atlas UI favorise la réutilisation des éléments et des mises en page en facilitant une approche par couches et par composants de la conception d'applications. De plus, Atlas UI permet à vos concepteurs UX d'étendre les composants prêts à l'emploi, d'assembler leurs propres blocs de construction, de créer des widgets personnalisés et de remplacer les propriétés de conception par défaut.

Les éléments de conception nouveaux et améliorés sont automatiquement propagés dans toutes les applications dans lesquelles chaque élément est utilisé.

Les principaux types de réutilisation sont décrits ci-dessous.

Snippets

Les extraits sont des fragments de conception de page qui contiennent des éléments de conception, des widgets et des données. Les extraits sont créés et gérés de manière centralisée au niveau du modèle et peuvent être réutilisés sur plusieurs pages d'une application.

Cette vidéo montre comment utiliser un widget d'appel d'extrait dans votre projet d'application :

Mises en page, navigation et modèles de pages

Les mises en page sont des conceptions de pages filaires qui combinent des widgets, des espaces réservés à la navigation et des éléments de marque dans un référentiel centralisé de composants réutilisables. Les mises en page peuvent être conçues pour prendre en charge des facteurs de forme spécifiques afin de créer une expérience utilisateur commune sur tous les appareils. Une fois créées, les mises en page sont appliquées aux pages d'application au moment de la conception.