[Mendix] Pluggable Widget(1)

 

Mendix에 맞춤 UI기능을 추가하고 싶을 때 사용가능한 Pluggable Widget을 만드는 방법을 알아볼까 한다.

 

Pluggable이란?

RedWiki 단어 사전

 

위 설명과 같이 시스템을 크게 변경하지 않고 구성 요소를 추가할 수 있는 위젯을 만드는 방법.

 

멘딕스의 Pluggable Widget은 React 및 Java/TypeScript를 사용하여 구성요소를 만들 수 있어 기본지식은 따로 공부가 필요하다.

 

 

 

1. 참고 Academy 자료

https://academy.mendix.com/link/paths/142/Build-a-Pluggable-Widget

 

2. Node.js 설치

https://nodejs.org/en/download

Node.js — Download

LTS버전을 설치를 권장. Pluggable Widget을 뼈대를 만들기 위한 Node를 설치.

설치가 정상적으로 완료되었는지 CLI (command-line interface)화면에서 확인 필수!

 

3.Yeoman 와  Mendix Pluggable Widget Generator 설치.

Pluggable Widget의 뼈대를 만들기 위해서는 위 두개의 설치 작업이 필요하다.

 

CLI 화면에서 해당 명령어로 Yeoman설치가 가능하다.

npm install -g yo

 

Mendix pluggable Widget Generator도 아래 npm명령어로 설치.

npm install -g @mendix/generator-widget

 

 

4. Pluggable Widget 만들기

Mendix App을 생성한 뒤 App이 생성된 로걸 저장소로 이동한다.

 

이동한 로컬 저장소에 Pluggable Widget을 보관하기 위한 myPluggableWidgets 폴더 를 만든다.

mkdir myPluggableWidgets

 

해당 폴더 위치로 이동하여 Yeoman명령어를 입력.

yo @mendix/widget 위젯명

만약 위 명령어가 제대로 인식이 되지 않을 경우 CLI화면을 관리자권한 또는 아래 명령어로 권한 상태를 변경 해 준다.

 

get-ExecutionPolicy 명령어로 권한을 확인

• 'Restricted' 상태일 가능성이 높음

Set-ExecutionPolicy RemoteSigned 명령어 실행

• 권한 상태 종류
  - Restricted : default 값, 스크립트 파일을 실행할 수 없다.
  - AllSinged : 신뢰 가능한(서명된) 스크립트 파일만 실행할 수 있다.
  - RemoteSigned : 로컬 생성 스크립트, 서명된 스크립트 파일을 실행할 수 있다.
  - Unrestricted : 모든 스크립트를 실행할 수 있다.
  - ByPass : 경고/차단 없이 모든 것을 실행할 수 있다.
  - Undefined : 권한 설정을 하지 않는다.

4. Pluggable Widget Bulid

실행이 완료되면 위젯명으로 생성한 폴더가 만들어진다.

해당 폴더로 이동 후 npm run build 입력

 

빌드가 완료되면 해당 화면을 확인할 수 있고, Studio Pro에서 F4를 눌러 디렉토리의 싱크를 맞춰준다.

 

 

 View의 Toolbox로 이동하여 내려보면 Add-ons 셉터에 내가 만든 Pluggable Widget을 확인 할 수 있다.