확장 프로그램을 만드는 방법

라이언 모크
2024 년 8 월 18 일
11분 읽기

의 릴리스 Mendix Studio Pro 10.12는 또한 확장 기능을 도입했습니다. 이것이 무슨 뜻인지 잘 모르겠다면, 확장 기능은 Studio Pro IDE 자체를 편집하고 개발 팀에 맞게 사용자 정의된 작업 환경을 만드는 방법입니다.

이 블로그에서는 확장 프로그램 개발의 실제적인 측면에 초점을 맞춥니다. Visual Studio를 설치하는 방법과 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. 이 패키지는 다운로드할 수 있는 확장 API입니다.

이에 대한 API 문서를 읽고 API가 제공하는 모든 내용을 보고 싶다면 다음에서 찾을 수 있습니다. 깃허브. 또한, 이 작업을 하는 동안 코드 샘플을 다운로드하고 싶다면, 사용할 수 있는 몇 가지 예제도 찾을 수 있습니다.

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

클래스가 Menu Extension으로 내보내졌는지 확인해야 합니다. 몇 가지 기본 스캐폴딩으로 이를 수행할 수 있습니다.

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"에 있습니다.

여기에는 네 개의 파일이 표시됩니다. 이를 귀하의 Mendix 앱 디렉토리.

당신의 Mendix app 디렉토리에서 "extensions"라는 새 폴더를 만듭니다. 이 폴더에 "myExtensionsName"이라는 새 하위 폴더를 만듭니다. 컴파일된 C# 프로젝트의 네 개 파일을 이 새 폴더에 붙여넣습니다.

확장 프로그램을 복사한 후 Mendix 앱 디렉토리, Studio Pro로 돌아가서 "앱 디렉토리 동기화"를 클릭하거나 간단히 f4를 누르세요. 빌드에 성공했다면 Studio Pro 내부에 새로운 "확장" 메뉴 항목이 즉시 표시됩니다. 클릭하면 메뉴 확장이 표시됩니다. 클릭하면 "hello world"라는 메시지 상자가 트리거됩니다.

도킹 가능한 창 확장 생성

마지막 부분은 Dockable pane을 추가하는 것입니다. Dockable pane은 앱에 대한 다양한 정보를 제공하는 Studio Pro의 창입니다. 그러나 무엇이든 할 수 있는 Dockable pane을 만들 수 있습니다.

이 경우, 웹뷰를 사용하여 웹사이트나 URL을 로드하는 도킹 가능한 창을 만들 것입니다. 시간을 절약하기 위해 기존 확장 프로그램에 추가하겠지만, 원하시면 독립 실행형 확장 프로그램으로 할 수 있습니다.

시작하려면 새 도킹 창을 처리하기 위해 새 "수익률 반환" 문을 추가해야 합니다.

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를 직접 수정할 수 있는 기능은 절대적인 게임 체인저입니다. 그리고 최소한의 코딩으로 웹사이트를 표시할 수 있는 기능은 기존 웹사이트를 재활용할 수 있다는 것을 의미합니다. 예를 들어, Mendix app—C#에서 몇 가지 간단한 클래스 정의를 포함한 새로운 확장 기능입니다.

확장 기능이 추가되면 어떤 일이 일어날지 기대하고 있으며, 우리 커뮤니티에서 어떤 놀라운 창작물이 나올지도 기대됩니다.

모든 것이 어떻게 작동하는지에 대한 전체 분석을 보려면 다음으로 이동하세요. Mendix 기술 문서 확장성에 대해 자세히 알아보려면 페이지로 이동하거나 Github.com의 API 문서 그리고 무엇이 가능한지 탐구하세요.

확장 프로그램 만드는 방법 | Mendix

사이트 검색

개발자 블로그