如何制作扩展

瑞安·莫克
2024 年 8 月 18 日
分钟阅读

释放 Mendix Studio Pro 10.12 还引入了扩展。如果您不确定这意味着什么，扩展是一种编辑 Studio Pro IDE 本身并为您的开发团队创建定制工作环境的方法。

本博客将重点介绍开发扩展的实际方面。我将向您展示如何设置开发环境，包括如何安装 Visual Studio 以及如何访问 Mendix 通过 NuGet 实现扩展 API。最后，我将介绍如何为顶级菜单制作第一个简单扩展以及如何制作自己的可停靠窗格。

安装 Visual Studio 2022

扩展是使用 C# 构建的（目前），因此我们建议使用 Visual Studio 2022 进行此练习。当然，您可以使用您选择的其他 IDE。但我将使用 Visual Studio 2022 作为此构建的 C# 端。

如果你以前从未使用过 Visual Studio，请不要担心。免费下载后，设置起来非常简单。你可以在 Microsoft 的官方下载网站上找到它此处.

准备好安装后，务必正确配置安装程序以启用以下功能：

.Net 桌面开发
.Net 多平台应用程序

用户界面开发

一旦 Visual Studio 完成安装，我们就可以开始创建一个新项目。

在 Visual Studio 中选择“新建项目”。然后搜索“C# 类库”并单击下一步。

接下来，您必须输入一个名字。（任何名字都可以。）

最后，选择 .Net 版本。您需要选择 .Net 8.0。完成后，确认您的选择并打开项目。

获取 NuGet 包

Mendix 有用于开发扩展的工具，但我们需要 NuGet 包管理器来获取它们。

在 Visual Studio 中，您会在 Project 顶层菜单下找到 NuGet。如果它不在那里，请不要担心。只需单击“获取工具和功能”，然后搜索 NuGet。您可能需要下载一些安装文件。安装后，单击 Project 下的“管理 Nuget 包”选项。

切换到“浏览”选项卡。然后只需搜索 Mendix.你应该得到这个结果： Mendix.StudioPro.ExtensionsAPI. 此包是可供下载的扩展 API。

如果你想阅读 API 文档并了解 API 提供的所有内容，你可以在 Github。如果您想在使用过程中下载一些代码示例，您还可以找到一些与之配合的示例。

确保已安装扩展 API。接受许可协议后，您就会知道它已安装，因为“安装”按钮现在会显示“卸载”。

启用 Studio Pro 的扩展功能标志

Visual Studio 现已全部设置完毕。您只需确保可以在 Studio Pro 中测试您的扩展。为此，您需要启用功能标志。这很简单。您只需要将快捷方式添加到您的 Mendix 版本。（我的是 10.12.1。）

右键单击桌面上的快捷方式。在此字段中，我们需要一直到最后并添加“–enable-extension-development”。这将告诉 Studio Pro 我们正在开发一些扩展。它将打开此功能供我们使用。

创建任何扩展的第一步是创建清单文件。为此，右键单击“解决方案资源管理器”中的项目。单击“添加”，然后单击“新项目”。将文件命名为“manifest.json”，全部小写

在这里添加任何代码之前，您需要将属性窗口中的选项从“复制到输出目录”更改为“始终复制”。这很重要，因为 manifest.json 文件会告诉 Studio Pro 有一个扩展以及哪些文件可用。

此后，您可以添加一个简单的 JSON 语句来定义扩展，如下所示：

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

一旦我们完成了清单文件的创建，我们就可以继续创建菜单项。

右键单击您的项目并再次添加新项目。为新文件命名，例如“MyMenuExtension.cs”，然后单击“添加”。

Visual Studio 将使用一些框架代码预填充文件。您应该看到以下内容：

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

namespace MyFirstExtension
{    internal class MyMenuExtension
    {
    }
}

我们需要确保该类被导出为菜单扩展。我们可以使用一些基本的脚手架来实现这一点：

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

接下来，我们需要定义返回类型并使用扩展 API 调用消息框服务：

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

添加此代码后，您就成功创建了第一个扩展！然后您只需将其编译为可用的“.dll”文件。要编译它，请转到“Build”菜单项，然后单击“build “your project name”或按键盘上的 Shift + f6。

将新扩展导入到您的 Mendix 项目

最后一步是将新扩展添加到 Studio Pro 中的项目中。这很简单。它只需要您将编译后的代码从其构建输出文件夹复制到您的 Mendix 应用程序目录。

要查看已编译的文件，请在 Visual Studio 中右键单击您的项目，然后单击“在文件资源管理器中打开文件夹”。之后，您的文件将位于“MyFirstExtension\MyFirstExtension\bin\Debug\net8.0”

您将在此处看到四个文件。我们需要将它们复制到您的 Mendix 应用程序目录。

在您的 Mendix app 目录中，创建一个名为“extensions”的新文件夹。在此文件夹中创建一个名为“myExtensionsName”的新子文件夹。将编译后的 C# 项目中的四个文件粘贴到此新文件夹中。

将扩展程序复制到您的 Mendix App 目录，返回 Studio Pro 并单击“同步 App 目录”或直接按 F4。如果您成功构建，您将立即在 Studio Pro 中看到一个新的“扩展”菜单项。如果您单击它，您将看到您的菜单扩展。单击它应该会触发一个消息框，显示“hello world”。

创建可停靠窗格扩展

最后一步是添加可停靠窗格。可停靠窗格是 Studio Pro 中的窗口，提供有关应用程序的各种信息。但是，您可以创建可停靠窗格来执行任何操作。

在本例中，我将创建一个可停靠窗格，使用 WebView 加载网站或 URL。为了节省时间，我将把它添加到现有扩展中，但如果您愿意，也可以将其作为独立扩展来执行。

首先，我们需要添加一个新的“yield return”语句来处理新的停靠窗口。

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

        }
    }
}

为了使此代码正常工作，我们需要创建一个返回的新 MyDockablePaneExtension。为此，请在解决方案资源管理器中再次右键单击该项目，选择“添加项目”，然后添加一个名为“MyDockablePaneExtension”的新类。按照与第一个扩展相同的方式打开该文件。

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>

您现在可能会遇到错误，因为最后一行“MyDockablePaneExtensionWebViewModel”中调用的类尚不存在。

像之前一样创建一个新文件。将其命名为“MyDockablePaneExtensionWebViewModel.cs”。“新类将需要 URL 作为参数，并使用扩展 API 方法 WebViewDockablePaneViewModel() 显示它。

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

这样，可停靠窗格就完成了。您可以在 Visual Studio 中重复构建过程，然后将更新的构建输出复制到您的扩展文件夹中 Mendix 应用程序目录。确保用新文件替换旧文件，并同步应用程序目录 Mendix 一次。

您的可停靠窗格现在应该出现在扩展菜单下的新菜单项中。

结语

能够直接修改 Studio Pro 绝对是一个改变游戏规则的功能。能够以最少的编码显示网站意味着您可以重新利用现有网站——例如， Mendix app—作为 C# 中的一个包含一些简单类定义的新扩展。

我期待看到添加的扩展会带来什么，并且我迫不及待地想看到我们的社区创造出什么令人惊叹的作品。

要全面了解一切工作原理，请前往 Mendix 文档页面以了解有关可扩展性的更多信息，或者转到 Github.com 上的 API 文档并探索其可能性。

如何制作扩展 | Mendix

站内搜索

开发者博客