So erstellen Sie Erweiterungen

Ryan Mocke
August 18, 2024
Minute gelesen

Die Freigabe Mendix Mit Studio Pro 10.12 wurden auch Erweiterungen eingeführt. Wenn Sie nicht sicher sind, was das bedeutet: Erweiterungen sind eine Möglichkeit, die Studio Pro IDE selbst zu bearbeiten und benutzerdefinierte Arbeitsumgebungen zu erstellen, die auf Ihr Entwicklungsteam zugeschnitten sind.

In diesem Blog geht es um die praktischen Aspekte der Entwicklung einer Erweiterung. Ich zeige Ihnen, wie Sie Ihre Entwicklungsumgebung einrichten, einschließlich der Installation von Visual Studio und des Zugriffs auf die Mendix Erweiterungs-API über NuGet. Abschließend erkläre ich, wie Sie Ihre erste einfache Erweiterung für das Menü der obersten Ebene erstellen und wie Sie Ihren eigenen andockbaren Bereich erstellen.

Installieren von Visual Studio 2022

Erweiterungen werden (derzeit) mit C# erstellt, daher empfehlen wir für diese Übung die Verwendung von Visual Studio 2022. Sie können natürlich auch andere IDEs Ihrer Wahl verwenden. Aber ich werde Visual Studio 2022 für die C#-Seite dieses Builds verwenden.

Wenn Sie Visual Studio noch nie verwendet haben, machen Sie sich keine Sorgen. Sobald Sie es kostenlos heruntergeladen haben, ist es ganz einfach einzurichten. Sie finden es auf der offiziellen Download-Site von Microsoft werden auf dieser Seite erläutert.

Wenn Sie zur Installation bereit sind, müssen Sie das Installationsprogramm unbedingt richtig konfigurieren, um Folgendes zu aktivieren:

.Net Desktop-Entwicklung
.Net Multiplattform-App

UI-Entwicklung

Sobald die Installation von Visual Studio abgeschlossen ist, können wir endlich mit der Erstellung eines neuen Projekts beginnen.

Wählen Sie in Visual Studio „Neues Projekt“. Suchen Sie dann nach „C#-Klassenbibliothek“ und klicken Sie auf „Weiter“.

Als nächstes müssen Sie einen Namen eingeben. (Jeder Name ist in Ordnung.)

Wählen Sie abschließend eine .Net-Version aus. Sie müssen .Net 8.0 auswählen. Wenn Sie fertig sind, bestätigen Sie Ihre Auswahl und öffnen Sie das Projekt.

Abrufen des NuGet-Pakets

Mendix verfügt über Tools zum Entwickeln von Erweiterungen, aber wir benötigen den NuGet-Paket-Manager, um sie zu erhalten.

In Visual Studio finden Sie NuGet im obersten Menü von Project. Wenn es dort nicht zu finden ist, ist das kein Problem. Klicken Sie einfach auf „Tools und Features abrufen“ und suchen Sie nach NuGet. Möglicherweise müssen Sie einige Installationsdateien herunterladen. Klicken Sie nach der Installation auf die Option „Nuget-Pakete verwalten“, die Sie unter Project finden.

Wechseln Sie zur Registerkarte „Durchsuchen“. Suchen Sie dann einfach nach Mendix. Sie sollten dieses Ergebnis erhalten: Mendix.StudioPro.ExtensionsAPI. Dieses Paket ist die zum Download bereitgestellte Extensions-API.

Wenn Sie die API-Dokumente hierzu lesen und alles sehen möchten, was die API zu bieten hat, finden Sie sie unter Github. Sie finden auch einige passende Beispiele dazu, wenn Sie bei der Gelegenheit einige Codebeispiele herunterladen möchten.

Stellen Sie sicher, dass die Extensions API installiert ist. Sie erkennen die Installation daran, dass Sie die Lizenzvereinbarung akzeptieren, da auf der Schaltfläche „Installieren“ nun „Deinstallieren“ steht.

Aktivieren des Extensions Feature Flags für Studio Pro

Visual Studio ist nun vollständig eingerichtet. Sie müssen nur sicherstellen, dass Sie Ihre Erweiterung in Studio Pro testen können. Dazu müssen Sie das Feature-Flag aktivieren. Das ist ganz einfach. Sie benötigen lediglich eine Verknüpfung zu Ihrem Mendix Version. (Meine ist 10.12.1.)

Klicken Sie mit der rechten Maustaste auf die Verknüpfung auf Ihrem Desktop. In diesem Feld müssen wir bis zum Ende gehen und „–enable-extension-development“ hinzufügen. Dadurch wird Studio Pro mitgeteilt, dass wir einige Erweiterungen entwickeln. Dadurch wird diese Funktion für uns aktiviert.

Der erste Schritt zum Erstellen einer Erweiterung besteht darin, eine Manifestdatei zu erstellen. Klicken Sie dazu im „Solution Explorer“ mit der rechten Maustaste auf das Projekt. Klicken Sie auf „Hinzufügen“ und dann auf „Neues Element“. Nennen Sie die Datei „manifest.json“ (alles in Kleinbuchstaben).

Bevor Sie hier Code hinzufügen, müssen Sie die Option im Eigenschaftenfenster von „In Ausgabeverzeichnis kopieren“ auf „Immer kopieren“ ändern. Dies ist wichtig, da die Datei manifest.json Studio Pro mitteilt, dass eine Erweiterung vorhanden ist und welche Dateien verfügbar sind.

Anschließend können Sie eine einfache JSON-Anweisung hinzufügen, um die Erweiterung wie folgt zu definieren:

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

Sobald wir mit der Erstellung der Manifestdatei fertig sind, können wir mit der Erstellung des Menüelements fortfahren.

Klicken Sie mit der rechten Maustaste auf Ihr Projekt und fügen Sie erneut ein neues Element hinzu. Geben Sie Ihrer neuen Datei einen Namen, etwa „MyMenuExtension.cs“, und klicken Sie auf „Hinzufügen“.

Visual Studio füllt die Datei mit einem Skelettcode vorab auf. Sie sollten Folgendes sehen:

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

namespace MyFirstExtension
{    internal class MyMenuExtension
    {
    }
}

Wir müssen sicherstellen, dass die Klasse als Menüerweiterung exportiert wird. Dies können wir mit einigen grundlegenden Maßnahmen erreichen:

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
      {
      }
  }

Als Nächstes müssen wir den Rückgabetyp definieren und mithilfe der Erweiterbarkeits-API einen Messagebox-Dienst aufrufen:

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

Nach dem Hinzufügen dieses Codes haben Sie Ihre erste Erweiterung erfolgreich erstellt! Sie müssen diese dann nur noch in eine verwendbare „.dll“-Datei kompilieren. Um sie zu kompilieren, gehen Sie zum Menüpunkt „Build“ und klicken Sie auf „Build“ „Ihr Projektname“ oder drücken Sie Umschalt + F6 auf Ihrer Tastatur.

Importieren der neuen Erweiterung in Ihr Mendix Projekt

Der letzte Schritt besteht darin, die neue Erweiterung zu Ihrem Projekt in Studio Pro hinzuzufügen. Dies ist ganz einfach. Sie müssen lediglich den kompilierten Code aus seinem Build-Ausgabeordner in Ihren Mendix App-Verzeichnis.

Um die kompilierten Dateien anzuzeigen, klicken Sie mit der rechten Maustaste auf Ihr Projekt in Visual Studio und klicken Sie auf „Ordner im Datei-Explorer öffnen“. Dort befinden sich Ihre Dateien im Ordner „MyFirstExtension\MyFirstExtension\bin\Debug\net8.0“.

Hier sehen Sie vier Dateien. Wir müssen sie in Ihr Mendix App-Verzeichnis.

In Ihrem Mendix App-Verzeichnis, erstellen Sie einen neuen Ordner namens „Extensions“. Erstellen Sie in diesem Ordner einen neuen Unterordner namens „myExtensionsName“. Fügen Sie die vier Dateien aus Ihrem kompilierten C#-Projekt in diesen neuen Ordner ein.

Nach dem Kopieren der Erweiterung in Ihr Mendix Gehen Sie zum App-Verzeichnis zurück zu Studio Pro und klicken Sie auf „App-Verzeichnis synchronisieren“ oder drücken Sie einfach F4. Wenn Ihr Build erfolgreich war, wird in Studio Pro sofort ein neues Menüelement „Erweiterungen“ angezeigt. Wenn Sie darauf klicken, wird Ihre Menüerweiterung angezeigt. Wenn Sie darauf klicken, sollte ein Meldungsfeld mit der Meldung „Hallo Welt“ angezeigt werden.

Erstellen einer andockbaren Bereichserweiterung

Der letzte Schritt besteht darin, einen andockbaren Bereich hinzuzufügen. Andockbare Bereiche sind die Fenster in Studio Pro, die verschiedene Informationen zur App bereitstellen. Sie können jedoch einen andockbaren Bereich für beliebige Zwecke erstellen.

In diesem Fall werde ich einen andockbaren Bereich erstellen, der eine Webansicht zum Laden einer Website oder URL verwendet. Um Zeit zu sparen, werde ich dies in die vorhandene Erweiterung einfügen, aber Sie können dies auf Wunsch auch als eigenständige Erweiterung tun.

Zu Beginn müssen wir eine neue „yield return“-Anweisung hinzufügen, um das neue Dockingfenster zu handhaben.

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

        }
    }
}

Damit dieser Code funktioniert, müssen wir eine neue MyDockablePaneExtension erstellen, die zurückgegeben wird. Klicken Sie dazu im Solution Explorer erneut mit der rechten Maustaste auf das Projekt, wählen Sie „Element hinzufügen“ und fügen Sie eine neue Klasse namens „MyDockablePaneExtension“ hinzu. Öffnen Sie die Datei auf die gleiche Weise wie bei der ersten Erweiterung.

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>

Wahrscheinlich tritt jetzt ein Fehler auf, da die in der letzten Zeile aufgerufene Klasse „MyDockablePaneExtensionWebViewModel“ noch nicht existiert.

Erstellen Sie wie zuvor eine neue Datei. Geben Sie ihr den Namen „MyDockablePaneExtensionWebViewModel.cs“. „Die neue Klasse benötigt die URL als Parameter und zeigt sie mithilfe der Extensions-API-Methode WebViewDockablePaneViewModel() an.“

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
    }
}

Damit ist der andockbare Bereich fertig. Sie können den Build-Prozess in Visual Studio wiederholen und dann die aktualisierte Build-Ausgabe in Ihren Erweiterungsordner in Ihrem Mendix App-Verzeichnis. Stellen Sie sicher, dass Sie die alten Dateien durch die neuen ersetzen und Ihr App-Verzeichnis in Mendix erneut.

Ihr andockbarer Bereich sollte jetzt in Ihren neuen Menüelementen unter dem Menü „Erweiterungen“ angezeigt werden.

Fazit

Die Möglichkeit, Studio Pro direkt zu modifizieren, ist ein absoluter Game Changer. Und die Möglichkeit, eine Website mit minimalem Code anzuzeigen, bedeutet, dass Sie vorhandene Websites umfunktionieren können – zum Beispiel eine Mendix app – als neue Erweiterung mit einigen einfachen Klassendefinitionen in C#.

Ich bin gespannt, was die zusätzlichen Erweiterungen bringen werden und kann es kaum erwarten, die erstaunlichen Kreationen unserer Community zu sehen.

Eine vollständige Übersicht über die Funktionsweise finden Sie auf der Mendix Docs Seiten, um mehr über Erweiterbarkeit zu erfahren, oder gehen Sie zu den API-Dokumente auf Github.com und erkunden Sie, was möglich ist.

So machen Sie Erweiterungen | Mendix

Seitensuche

Entwickler-Blog