拡張機能の作り方

ライアン・モック
2024 年 8 月 18 日
分読み

のリリース Mendix Studio Pro 10.12 では拡張機能も導入されました。これが何を意味するのかわからない方のために説明すると、拡張機能とは Studio Pro IDE 自体を編集し、開発チームに合わせてカスタマイズされた作業環境を作成する方法です。

このブログでは、拡張機能の開発の実際的な側面に焦点を当てます。Visual Studioのインストール方法や、 Mendix NuGet 経由の拡張 API。最後に、トップレベルメニューの最初のシンプルな拡張機能を作成する方法と、独自のドッキング可能なペインを作成する方法について説明します。

Visual Studio 2022 のインストール

拡張機能は (現在) C# を使用して構築されるため、この演習では Visual Studio 2022 を使用することをお勧めします。もちろん、他の IDE を使用することもできます。ただし、このビルドの C# 側では Visual Studio 2022 を使用します。

Visual Studioを初めて使用する場合でも心配はいりません。無料でダウンロードしてしまえば、セットアップは非常に簡単です。Microsoftの公式ダウンロードサイトから入手できます。こちら.

インストールの準備ができたら、次の機能を有効にするためにインストーラーを適切に構成することが重要です。

.Net デスクトップ開発
.Net マルチプラットフォームアプリ

UI開発

Visual Studio のインストールが完了したら、ようやく新しいプロジェクトの作成を開始できます。

Visual Studio で「新しいプロジェクト」を選択します。次に、「C# クラスライブラリ」を検索し、「次へ」をクリックします。

次に、名前を入力します。（どんな名前でも構いません。）

最後に、.Net バージョンを選択します。.Net 8.0 を選択する必要があります。完了したら、選択内容を確認してプロジェクトを開きます。

NuGet パッケージの取得

Mendix 拡張機能を開発するためのツールがありますが、それらを取得するには NuGet パッケージマネージャーが必要です。

Visual Studio では、プロジェクトのトップレベルメニューの下に NuGet があります。そこにない場合は心配しないでください。[ツールと機能を取得] をクリックして、NuGet を検索してください。インストールファイルをダウンロードする必要がある場合があります。インストールが完了したら、プロジェクトの下にある [Nuget パッケージの管理] オプションをクリックします。

「参照」タブに切り替えます。次に、 Mendix次のような結果が得られるはずです: Mendix.StudioPro.ExtensionsAPI。このパッケージは、ダウンロード可能な Extensions API です。

このAPIドキュメントを読んで、APIが提供するすべての機能を確認したい場合は、次のURLをご覧ください。 githubのついでにコードサンプルもダウンロードしたい場合は、それに付随する例もいくつか見つかります。

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

次に、戻り値の型を定義し、Extensibility 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」ファイルにコンパイルするだけです。コンパイルするには、「ビルド」メニュー項目に移動して「プロジェクト名」のビルドをクリックするか、キーボードで Shift + f6 を押します。

新しい拡張機能を Mendix プロジェクト

最後のステップは、Studio Proで新しい拡張機能をプロジェクトに追加することです。これは非常に簡単です。ビルド出力フォルダからコンパイルされたコードをコピーするだけです。 Mendix アプリディレクトリ。

コンパイルされたファイルを表示するには、Visual Studio でプロジェクトを右クリックし、「ファイルエクスプローラーでフォルダーを開く」をクリックします。すると、ファイルは「MyFirstExtension\MyFirstExtension\bin\Debug\net8.0」に保存されます。

ここに4つのファイルがあります。これをコピーする必要があります Mendix アプリディレクトリ。

あなたの中で Mendix app ディレクトリに、「extensions」という新しいフォルダーを作成します。このフォルダーに、「myExtensionsName」という新しいサブフォルダーを作成します。コンパイルされた C# プロジェクトの 4 つのファイルをこの新しいフォルダーに貼り付けます。

拡張機能を Mendix アプリディレクトリを同期するには、Studio Pro に戻り、[アプリディレクトリを同期] をクリックするか、単に f4 キーを押します。ビルドが成功すると、Studio Pro 内に新しい [拡張機能] メニュー項目がすぐに表示されます。それをクリックすると、メニュー拡張機能が表示されます。それをクリックすると、「hello world」というメッセージボックスが表示されます。

ドッキング可能なペイン拡張機能の作成

最後に、ドッキング可能なペインを追加します。ドッキング可能なペインは、アプリに関するさまざまな情報を提供する Studio Pro のウィンドウです。ただし、ドッキング可能なペインを作成して、何でも実行できます。

この場合、Web ビューを使用して Web サイトまたは 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 をパラメーターとして必要とし、Extensions 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を直接変更できる機能は、まさに画期的なものです。また、最小限のコーディングでWebサイトを表示できるため、既存のWebサイトを再利用することができます。たとえば、 Mendix app—C# でいくつかの簡単なクラス定義を含む新しい拡張機能として。

拡張機能の追加によって何が起こるのか楽しみにしています。また、私たちのコミュニティがどのような素晴らしい作品を生み出すのかを見るのが待ちきれません。

仕組みの詳細については、 Mendix ドキュメント拡張性の詳細については、 Github.com の API ドキュメントそして何が可能かを探ります。

拡張機能の作り方 | Mendix

サイト内検索

開発者ブログ