Comment faire des extensions

Ryan Mocke
18 août 2024
lecture minute

La libération de Mendix Studio Pro 10.12 a également été l'introduction des extensions. Si vous n'êtes pas sûr de ce que cela signifie, les extensions sont un moyen de modifier l'IDE Studio Pro lui-même et de créer des environnements de travail personnalisés adaptés à votre équipe de développement.

Ce blog se concentrera sur les aspects pratiques du développement d'une extension. Je vous montrerai comment configurer votre environnement de développement, ce qui inclut comment installer Visual Studio et comment accéder à l'extension. Mendix API d'extensions via NuGet. Enfin, je vous expliquerai comment créer votre première extension simple pour le menu de niveau supérieur et comment créer votre propre volet ancrable.

Installation de Visual Studio 2022

Les extensions sont créées à l'aide de C# (actuellement), nous vous recommandons donc d'utiliser Visual Studio 2022 pour cet exercice. Vous pouvez, bien sûr, utiliser d'autres IDE de votre choix. Mais j'utiliserai Visual Studio 2022 pour le côté C# de cette version.

Si vous n'avez jamais utilisé Visual Studio auparavant, ne vous inquiétez pas. Une fois que vous l'avez téléchargé gratuitement, il est assez facile à configurer. Vous pouvez le trouver sur le site de téléchargement officiel de Microsoft ici.

Une fois que vous êtes prêt à installer, il est important de configurer correctement le programme d'installation pour activer :

Développement de bureau .Net
Application multiplateforme .Net

Développement de l'interface utilisateur

Une fois l’installation de Visual Studio terminée, nous pouvons enfin commencer à créer un nouveau projet.

Dans Visual Studio, choisissez « Nouveau projet ». Recherchez ensuite « Bibliothèque de classes C# » et cliquez sur Suivant.

Ensuite, vous devrez entrer un nom. (N'importe quel nom fera l'affaire.)

Enfin, sélectionnez une version .Net. Vous devez choisir .Net 8.0. Une fois que vous avez terminé, confirmez vos choix et ouvrez le projet.

Obtenir le package NuGet

Mendix dispose d'outils pour développer des extensions, mais nous avons besoin du gestionnaire de packages NuGet pour les obtenir.

Dans Visual Studio, vous trouverez NuGet dans le menu de niveau supérieur du projet. S'il n'est pas là, ne vous inquiétez pas. Cliquez simplement sur « Obtenir des outils et des fonctionnalités » et recherchez NuGet. Vous devrez peut-être télécharger des fichiers d'installation. Une fois l'installation terminée, cliquez sur l'option « Gérer les packages Nuget » qui se trouve sous Projet.

Passez à l’onglet « Parcourir ». Ensuite, recherchez simplement Mendix. Vous devriez obtenir ce résultat : Mendix.StudioPro.ExtensionsAPI. Ce package est l'API d'extensions mise à disposition en téléchargement.

Si vous souhaitez lire la documentation de l'API et voir tout ce que l'API a à offrir, vous pouvez la trouver sur GithubVous pouvez également trouver quelques exemples pour l'accompagner si vous souhaitez télécharger des exemples de code pendant que vous y êtes.

Assurez-vous que l'API Extensions est installée. Vous saurez qu'elle est installée après avoir accepté le contrat de licence, car le bouton « Installer » indiquera désormais « Désinstaller ».

Activation de l'indicateur de fonctionnalité Extensions pour Studio Pro

Visual Studio est maintenant entièrement configuré. Il vous suffit de vous assurer que vous pouvez tester votre extension dans Studio Pro. Pour ce faire, vous devez activer l'indicateur de fonctionnalité. C'est assez simple. Tout ce dont vous avez besoin est un raccourci vers votre Mendix version. (La mienne est 10.12.1.)

Cliquez avec le bouton droit de la souris sur le raccourci sur votre bureau. Dans ce champ, nous devons aller jusqu'au bout et ajouter « –enable-extension-development ». Cela va indiquer à Studio Pro que nous développons des extensions. Cela activera cette fonctionnalité pour que nous puissions l'utiliser.

La première étape pour créer une extension consiste à créer un fichier manifeste. Pour cela, faites un clic droit sur le projet dans l'Explorateur de solutions. Cliquez sur Ajouter, puis sur Nouvel élément. Nommez le fichier « manifest.json », en minuscules.

Avant d'ajouter du code ici, vous devez modifier l'option dans la fenêtre des propriétés de « Copier dans le répertoire de sortie » à « Toujours copier ». Ceci est important car le fichier manifest.json indique à Studio Pro qu'il existe une extension et quels fichiers sont disponibles.

Après cela, vous pouvez ajouter une simple instruction JSON pour définir l’extension comme suit :

{
  "mx_extensions": [ "YourExtensionName.dll" ],
  "mx_build_extensions": []
}

Une fois que nous avons terminé de créer le fichier manifeste, nous pouvons passer à la création de l’élément de menu.

Faites un clic droit sur votre projet et ajoutez à nouveau un nouvel élément. Donnez un nom à votre nouveau fichier, par exemple « MyMenuExtension.cs », puis cliquez sur Ajouter.

Visual Studio préremplit le fichier avec un squelette de code. Vous devriez voir ce qui suit :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MyFirstExtension
{    internal class MyMenuExtension
    {
    }
}

Nous devons nous assurer que la classe est exportée en tant qu'extension de menu. Nous pouvons le faire avec un échafaudage de base :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MyFirstExtension
  [method:ImportingConstructor]    //Define the method  
  [Export(typeof(MenuExtension))]  //Export the class as type Menu Extension

  {    internal class MyMenuExtension
      {
      }
  }

Ensuite, nous devons définir le type de retour et appeler un service de boîte de message à l’aide de l’API d’extensibilité :

using Mendix.StudioPro.ExtensionsAPI.UI.Menu;
using Mendix.StudioPro.ExtensionsAPI.UI.Services;
using System;
using System.Collections.Generic;
using System.ComponentModel.Composition;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;

namespace MyFirstExtension
{
    [method:ImportingConstructor]
    [Export(typeof(MenuExtension))]
    public class MyMenuExtension(IMessageBoxService messageBoxService):MenuExtension //change from internal to public class and define this as a Menu Extension
    {
        public override IEnumerable<MenuViewModel> GetMenus()// allows you to return new Menu Items (Extensibility API)
        {
            yield return new MenuViewModel("Say Hello", () => messageBoxService.ShowInformation("Hello World!"));// MenuViewModel accepts 2 parameters, the first is the Menu Label which is the caption which will be displayed in studio pro. The second is the desired action which in this case is a inline function which calls a message box function

Après avoir ajouté ce code, vous aurez créé avec succès votre première extension ! Il ne vous reste plus qu'à le compiler dans un fichier « .dll » utilisable. Pour le compiler, allez dans le menu « Build » et cliquez sur build « votre nom de projet » ou appuyez sur Shift + f6 sur votre clavier.

Importer la nouvelle extension dans votre Mendix Projet

La dernière étape consiste à ajouter la nouvelle extension à votre projet dans Studio Pro. C'est assez simple. Il vous suffit de copier le code compilé de son dossier de sortie de build vers votre projet. Mendix répertoire d'applications.

Pour afficher les fichiers compilés, faites un clic droit sur votre projet dans Visual Studio et cliquez sur « ouvrir le dossier dans l’explorateur de fichiers ». Une fois là, vos fichiers seront dans « MyFirstExtension\MyFirstExtension\bin\Debug\net8.0 »

Vous verrez ici quatre fichiers. Nous devons les copier dans votre Mendix répertoire d'applications.

Dans votre Mendix Dans le répertoire app, créez un nouveau dossier appelé « extensions ». Dans ce dossier, créez un nouveau sous-dossier appelé « myExtensionsName ». Collez les quatre fichiers de votre projet C# compilé dans ce nouveau dossier.

Après avoir copié l'extension dans votre Mendix Répertoire d'applications, revenez à Studio Pro et cliquez sur « Synchroniser le répertoire d'applications » ou appuyez simplement sur f4. Si vous avez réussi votre création, vous verrez immédiatement un nouvel élément de menu « Extensions » dans Studio Pro. Si vous cliquez dessus, vous verrez votre extension de menu. Cliquer dessus devrait déclencher une boîte de message indiquant « Hello World ».

Création d'une extension de panneau ancrable

La dernière étape consiste à ajouter un volet ancrable. Les volets ancrables sont les fenêtres de Studio Pro qui fournissent diverses informations sur l'application. Cependant, vous pouvez créer un volet ancrable pour faire ce que vous voulez.

Dans ce cas, je vais créer un panneau ancrable qui utilise une vue Web pour charger un site Web ou une URL. Pour gagner du temps, je vais l'ajouter à l'extension existante, mais vous pouvez le faire en tant qu'extension autonome si vous le souhaitez.

Pour commencer, nous devons ajouter une nouvelle instruction « yield return » pour gérer la nouvelle fenêtre d’ancrage.

using Mendix.StudioPro.ExtensionsAPI.UI.Menu;
using Mendix.StudioPro.ExtensionsAPI.UI.Services;
using System;
using System.Collections.Generic;
using System.ComponentModel.Composition;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;

namespace MyFirstExtension
{
    [method:ImportingConstructor]
    [Export(typeof(MenuExtension))]
    internal class MyMenuExtension(IDockingWindowService dockingWindowService, IMessageBoxService messageBoxService):MenuExtension// add IDockingWindowService to the definition
    {
        public override IEnumerable<MenuViewModel> GetMenus()// allows you to return new Menu Items (Extensibility API)
        {
          
            yield return new MenuViewModel("Say Hello", () => messageBoxService.ShowInformation("Hello World!"));
            yield return new MenuViewModel("Open Pane", () => dockingWindowService.OpenPane(MyDockablePaneExtension.ID));// new yield to return the new pane

        }
    }
}

Pour que ce code fonctionne, nous devons créer une nouvelle extension MyDockablePaneExtension qui est renvoyée. Pour ce faire, faites un clic droit sur le projet une fois de plus dans l'explorateur de solutions, choisissez « Ajouter un élément » et ajoutez une nouvelle classe appelée « MyDockablePaneExtension ». Ouvrez le fichier de la même manière que pour la première extension.

using System.Collections.Generic;
using System.ComponentModel.Composition;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MyFirstExtension
{
    [Export(typeof(DockablePaneExtension))]//Export the file as a dockable pane

    public class MyDockablePaneExtension : DockablePaneExtension
    {
        public const string ID = "my-dockable-pane";//define and ID
        public override string Id => ID; //override ID with id
        public override DockablePaneViewModelBase Open() => new MyDockablePaneExtensionWebViewModel("https://www.youtube.com/@MendixCommunity");//Open a URL using a WebViewModel
    }
}
/code>

Vous aurez probablement une erreur maintenant, car la classe appelée dans la dernière ligne « MyDockablePaneExtensionWebViewModel » n’existe pas encore.

Créez un nouveau fichier comme précédemment. Donnez-lui le nom « MyDockablePaneExtensionWebViewModel.cs ». « La nouvelle classe nécessitera l'URL comme paramètre et l'affichera à l'aide de la méthode WebViewDockablePaneViewModel() de l'API Extensions.

using Mendix.StudioPro.ExtensionsAPI.UI.DockablePane;
using Mendix.StudioPro.ExtensionsAPI.UI.WebView;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MyFirstExtension
{
    internal class MyDockablePaneExtensionWebViewModel(string myURL) : WebViewDockablePaneViewModel//String myURL parameter passed in (your desired URL) + WebViewDockablePaneViewModel ->extensions API
    {
        public override void InitWebView(IWebView webView) => webView.Address = new Uri(myURL);//opens the url in the Webview
    }
}

Avec cela, le volet ancrable est terminé. Vous pouvez répéter le processus de génération dans Visual Studio, puis copier la sortie de génération mise à jour dans votre dossier d'extensions dans votre Mendix Répertoire d'applications. Assurez-vous de remplacer les anciens fichiers par les nouveaux et de synchroniser votre répertoire d'applications dans Mendix nouveau.

Votre volet ancrable devrait maintenant apparaître dans vos nouveaux éléments de menu sous le menu Extensions.

Conclusion

La possibilité de modifier directement Studio Pro est un véritable changement de jeu. Et la possibilité d'afficher un site Web avec un codage minimal signifie que vous pouvez réutiliser des sites Web existants, par exemple un Mendix app—en tant que nouvelle extension avec quelques définitions de classe simples en C#.

J'ai hâte de voir ce que l'ajout d'extensions apportera, et j'ai hâte de voir les créations étonnantes que notre communauté créera.

Pour une description complète du fonctionnement de tout cela, rendez-vous sur le Mendix Docs pages pour en savoir plus sur l'extensibilité, ou accédez au Documentation de l'API sur Github.com et explorer ce qui est possible.

Comment faire des extensions | Mendix

Recherche du site

Blog des développeurs