Quand j'ai commencé à travailler chez Mendix L’année dernière, j’ai rejoint deux départements en même temps. Au sein du département Expert Service (CSM – Customer Success Management), j’étais conseiller, enseignant et développeur de Custom Widgets. Au sein du département R&D, j’aidais à résoudre les problèmes liés au travail sur les Custom Widgets.

Ce poste unique m'a permis d'en apprendre beaucoup sur le développement de widgets personnalisés, notamment sur la manière dont nos partenaires et clients le font réellement. L'une de mes spécialités en tant que développeur et architecte de logiciels est de rassembler toutes les informations sur les différents processus utilisés par les utilisateurs et de proposer une méthode (de travail) nouvelle et améliorée.

Mendix a décidé d'ouvrir la source d'une sélection de widgets personnalisés que nous avons créés dans le passé pour le Mendix Nous pensons qu'une fois que vous partagez le code des widgets personnalisés, tout le monde peut contribuer et, au final, fournir de meilleurs produits qui complètent davantage d'histoires d'utilisateurs finaux. De plus, le développement de widgets personnalisés peut être réparti sur un groupe plus large de développeurs, créant ainsi une situation gagnant-gagnant pour tous ceux qui font partie du projet. Mendix communauté.

Créer un modèle de widget personnalisé

Ma première initiative a été de créer le « AppStoreWidgetBoilerplate ». En m'appuyant sur le Mendix API client et exemples de widgets existants J'ai développé un modèle de widget personnalisé, inspiré du Modèle HTML, maintenu par Mathias Bynens et Hans Christian Reinl. Ce nouveau modèle ne concernerait cependant qu'un widget personnalisé pour le Mendix

Mon objectif était de faire du nouveau modèle la base de chaque nouveau widget construit par Mendix. De plus, ce serait le modèle vers lequel les widgets personnalisés existants pourraient être portés, de sorte que chaque widget nouveau et porté disponible dans le Mendix GitHub serait d'une certaine qualité. Lorsque cet objectif a été atteint, j'ai commencé à examiner les autres processus qui devaient être effectués pour créer un widget personnalisé.

Création d'un plugin de développement de widget pour Brackets

Auparavant, obtenir un widget personnalisé dans un Mendix Le projet impliquait de nombreuses tâches qui devaient être répétées chaque fois qu'une modification était apportée au code source.

Pendant que je résolvais des tickets pour les widgets personnalisés, j'ai développé un atelier sur les widgets personnalisés pour partager ce que j'avais appris. Cela m'a donné l'occasion de développer une solution à ce modèle de travail récurrent : le plugin de développement de widgets pour Adobe Brackets, qui transforme Brackets en un IDE (environnement de développement intégré) pour créer des widgets personnalisés pour le Mendix Plateforme. Le plugin a transformé l'empaquetage d'un widget basé sur « AppStoreWidgetBoilerplate » en un processus en un clic dans Adobe Bracket.

Le « AppStoreWidgetBoilerplate » et le « Widget Development Plugin for Brackets » vous permettent de commencer rapidement à étendre Mendix avec de nouvelles expériences utilisateur intéressantes ! Encore une fois, si vous souhaitez créer des widgets personnalisés pour Mendix, visionnez ce webinaire à la demande. Je démontre ces deux outils en créant un « Hello World » Mendix Widget personnalisé.

Questions fréquemment posées

Q: Qui devrait créer des widgets personnalisés ?
R : On peut répondre à cette question par : quiconque vit et respire JavaScript / HTML et CSS ! Vous ne pouvez créer un widget personnalisé qu'à partir de ces langages de script. Apprenez-les donc par cœur avant de commencer à développer un widget personnalisé pour le Mendix plate-forme. Vous devez également avoir une solide connaissance de la Mendix plateforme et comment modéliser une application avec elle.

Q: Qu'est-ce qu'un widget personnalisé ?
R : Un widget personnalisé est un widget DIJIT avec Mendix Fonctions JavaScript de l'API client exécutées à l'intérieur d'un Mendix Environnement DOJO modifié. Pour écrire un widget DIJIT approprié, vous aurez besoin d'une bonne compréhension de JavaScript et des modèles de conception de JavaScript et DOJO / DIJIT. Commencez à utiliser un widget DIJIT en suivant ce tutoriel : https://dojotoolkit.org/reference-guide/1.10/quickstart/writingWidgets.html

A: Quand faut-il créer ou utiliser des widgets personnalisés ?
Q : Un widget personnalisé est destiné à fournir une fonctionnalité UX spécifique à votre Mendix application(s). Il vous offre une solution si vous avez besoin d'une UX (expérience utilisateur) spéciale qui Mendix ne fournit pas de « prêt à l'emploi ».

Voici quelques exemples de widgets personnalisés :

Assembler une voiture : Imaginons que vous ayez une application dans laquelle vous souhaitez pouvoir composer visuellement une voiture. À ce stade, vous devriez penser à créer un widget personnalisé.

Un menu qui change en fonction d'une valeur de filtre de recherche : Si vous souhaitez avoir un menu dynamique pour afficher les liens des pages en fonction d'un résultat de recherche.

Glisser déposer: Si vous souhaitez que les produits soient glissés et déposés dans un panier.

Q: Existe-t-il un atelier avancé sur les widgets personnalisés proposé dans le cadre du Mendix Académie?
R: Oui! Mendix propose un atelier avancé sur les widgets personnalisés intitulé « Maîtriser l'art de la création de widgets personnalisés ». Si vous souhaitez tirer le meilleur parti de la création de widgets personnalisés, vérifiez quand le prochain cours sera proposé dans votre coin du monde : https://academy.mendix.com/#1418913294132-2

Liens supplémentaires :

Formation de base de la Mendix Modeler
Développement de widgets personnalisés pour Mendix nécessite une connaissance de la Mendix Plateforme d'applications et Business Modeler. Vous pouvez commencer avec le Cours en ligne, ou inscrivez-vous à un cours d'introduction en personne ici : https://academy.mendix.com/#1418913294132-2

Où trouver l'AppStoreWidgetBoilerplate
Vous pouvez le trouver à l'endroit suivant : https://github.com/mendix/AppStoreWidgetBoilerplate

Mendix Dépôt GitHub avec widgets personnalisés
Des exemples de widgets peuvent être trouvés dans notre dépôt GitHub : https://github.com/mendix/

Modèles de conception pour JavaScript
Un excellent livre sur les modèles de conception JavaScript est le livre Open Source écrit par Addy Osmani. Vous pouvez le trouver ici : https://addyosmani.com/resources/essentialjsdesignpatterns/book/

Écrire votre premier widget dijit
Un excellent guide pour commencer à écrire des widgets dijit peut être trouvé ici : https://dojotoolkit.org/reference-guide/1.10/quickstart/writingWidgets.html

Mendix API cliente
Le Mendix L'API client se trouve ici : https://apidocs.mendix.com/5/client/