Le Mendix UI Framework est littéralement l'accroche-regard de notre annonce récente Mendix Sortie DX (disponible le 3 août)^rd). Ce nouveau framework fournit un ensemble complet de modèles d'interface utilisateur, de thèmes, de dispositions de navigation et de modèles de page qui permettent aux développeurs de créer plus facilement des applications attrayantes et réactives.

Il est intéressant de noter que le framework UI a commencé comme un projet pour nos journées de recherche en R&D. Mendix, nous organisons périodiquement ces journées pour travailler sur toute idée innovante que vous jugez intéressante à explorer ou à apporter à la plateforme. À la fin de la journée, les concepts ou prototypes sont présentés et les candidats ayant obtenu le plus de votes sont produits. Eh bien, cette idée a été accueillie avec beaucoup d'enthousiasme.

Comme nos clients et partenaires, nous voulions pouvoir facilement maintenir l'apparence et la convivialité d'un portefeuille croissant de produits. Mendix applications. Si vous ne le saviez pas, nous construisons beaucoup en interne sur Mendix, y compris le Dev Center, le Cloud Portal, l'App Store et de nombreuses applications internes.

Avec le framework UI, nous avons désormais plus de flexibilité pour conserver l'apparence souhaitée de ces applications à plusieurs niveaux. La simple mise à jour d'une bibliothèque nous permet de mettre à jour toutes les applications en une seule fois ou d'en sélectionner une individuellement. De plus, le framework permet à chaque application d'avoir facilement son propre style personnalisé. Si notre équipe marketing souhaitait renommer le Mendix Dans l'App Store, par exemple, nous pourrions créer un dossier personnalisé contenant un ensemble de variables personnalisées pour cette application particulière.

Le Mendix Cadre d'interface utilisateur

Nous avons créé le Mendix Framework d'interface utilisateur permettant aux développeurs sans compétences techniques et de conception approfondies de créer des applications multi-appareils attrayantes et réactives. Le framework fonctionne en vous permettant de définir l'apparence de votre application à plusieurs niveaux, y compris les thèmes, les mises en page de navigation, les modèles de page, les éléments de conception et un puissant framework CSS/Sass. Explorons chacun de ces éléments plus en détail.

Thèmes

Lorsque vous créez une nouvelle application, vous pouvez choisir entre une variété de thèmes qui sont tous basés sur le Mendix Framework d'interface utilisateur. Comme vous pouvez le constater dans la présentation ci-dessous, les thèmes peuvent être similaires, mais aussi complètement différents. Sans effort, vous pouvez rapidement personnaliser vos applications pour leur donner l'apparence souhaitée. Chaque thème est, bien sûr, responsive et compatible multi-appareils.

Dispositions de navigation

Afin de créer rapidement une navigation cohérente dans toute votre application, nous introduisons des dispositions de navigation. Les dispositions contrôlent la façon dont vous naviguez dans votre application, avec des menus principaux et secondaires dans la barre supérieure ou latérale. Un ensemble de dispositions de navigation pour chaque type d'appareil (téléphone, tablette ou ordinateur de bureau) est fourni avec les thèmes.

Page Templates

Nous avons constaté dans nos projets internes que l'on pouvait passer énormément de temps à concevoir la mise en page et l'interaction adéquates. Et honnêtement, sans impliquer un expert en interface utilisateur, le résultat n'est généralement pas si génial. Je pourrais facilement doubler la taille de mon équipe UX et continuer à avoir du mal à répondre à la demande d'experts en interface utilisateur.

Nous avons donc étudié les modèles d'interface utilisateur et décidé de les commercialiser en proposant des modèles de page. Il s'agit de modèles prédéfinis pour un ensemble complet de types de pages tels que Présentation, Page principale-détail, Tableau de bord, Emplacement et Assistant, pour n'en citer que quelques-uns. Tous sont réactifs et optimisés pour chaque type d'appareil.

Éléments de conception

Dernier point mais non le moindre, le Mendix UI Framework est fourni avec un ensemble complet d'éléments de conception. En utilisant des éléments de conception, la norme Mendix Les widgets peuvent être rapidement adaptés à vos préférences en matière de style, de couleur, de taille et d'alignement. Pour chaque élément de conception, nous avons créé un large ensemble de variations pour vous aider à créer une apparence et une convivialité différentes dans toute l'application, sans avoir à styliser chaque composant manuellement. Par exemple, l'élément de conception « onglets » peut être utilisé de sept manières différentes, simplement en utilisant les classes fournies dans le Mendix Cadre d'interface utilisateur.

La technologie derrière le framework

Jetons un œil dans les coulisses et voyons comment nous avons construit le framework et comment Mendix les membres de la communauté peuvent l'utiliser ou même l'étendre.

Le framework se compose de CSS et du préprocesseur Toupet (facultatif à utiliser, mais fortement recommandé). Vous connaissez peut-être le CSS et savez qu'il est assez facile d'apporter des modifications à l'apparence d'une application. Le CSS en lui-même peut être amusant, mais les feuilles de style deviennent plus volumineuses, plus complexes et plus difficiles à maintenir. C'est là qu'un préprocesseur comme Sass peut vous aider. Sass vous permet d'utiliser des fonctionnalités qui n'existent pas dans CSS, telles que les variables, l'importation en ligne, l'imbrication et bien plus encore. Avec Sass, nous sommes en mesure de créer des dossiers et une documentation appropriés. Une fois que vous aurez commencé à bricoler avec Sass, il prendra votre fichier Sass prétraité et l'exportera sous forme de fichier CSS normal que vous pourrez utiliser dans votre application.

Intégration Bootstrap

Mendix introduit l'utilisation de Bootstrap avec la sortie de Mendix 5.0. dans le Mendix UI Framework, nous avons veillé à suivre les normes Bootstrap et à apporter des améliorations supplémentaires au Business Modeler. Une grande amélioration avec le Mendix La version DX contient quelques nouveaux widgets créés pour le Modeler, notamment :

Grille de mise en page

Nous avons inclus le widget « Layout Grid » dans le Modeler afin que nos développeurs puissent facilement créer des systèmes de grille 100 % intégrés à Bootstrap. Les grilles de mise en page sont utilisées pour créer des mises en page via une série de lignes et de colonnes qui hébergent votre contenu.

Groupes de formes (horizontal / vertical)

Ce widget peut paraître minimaliste, mais il représente un grand changement par rapport au développement de widgets traditionnels. Il n'est plus nécessaire de placer des étiquettes ou des entrées séparées dans les formulaires. Le groupe de formulaires facilite grandement la création de formulaires appropriés avec l'intégration de Bootstrap. Choisissez de placer vos étiquettes et vos entrées verticalement ou horizontalement d'un simple clic de souris.

Glyphicônes

Les glyphicons font désormais partie du Modeler et peuvent être utilisés sur une grande variété de widgets. Pour en savoir plus, consultez ce blog.

Personnaliser

Créez votre propre thème personnalisé basé sur le Mendix UI Framework ou même contribuer au framework sur GithubNous avons créé un plan détaillé mais guide simple pour vous aider à démarrer avec la création de votre propre thème.

N'hésitez pas à nous aider à améliorer le cadre et à nous faire part de vos commentaires pour nous assurer qu'en tant que Mendix la communauté dispose de tous les outils nécessaires pour faire son travail.

Quelle est la prochaine étape pour le Mendix Cadre d'interface utilisateur ?

Cette version n'est qu'un début ! À l'avenir, nous intégrerons Bootstrap plus étroitement dans le Business Modeler. De plus, l'accessibilité, les standards Web et le WYSIWYG continueront de jouer un rôle important pour nous permettre d'aider les développeurs à fournir des applications de qualité encore plus rapidement.

Le Mendix La version DX sera disponible le 3 août^rd, alors restez à l'écoute. En attendant, nous apprécions vos commentaires !