[Mendix]Pluggable-Widget 생성하기 01

1. 플러그형 위젯

React를 기반으로 하며 Dojo 기반의 이전 용자 정의 위젯과는 다른 아키텍처를 사용한다. 

플러그형 웹 위젯을 사용하면 간단하고 정확한 방법으로 강력한 도구 생성 가능하다.

 

플로그형 위젯은 Mendix 개발자가 Mendix Studio Pro에서 제공하는 입력 세트로부터 이 props를 수신하는 반응 구성 요소로 정의될 수 있다.

- 입력은 .xml 파일로 정의된다. Widget Properties = .xml 파일

- react 컴포넌트는 .jxs나 .tsx 파일에 정의되는데 이걸 Client Component 

 

2. Scaffolding 

빌드 도구가 기대하는 올바른 파일 및 폴더 구조를 생성한다.

CLI(명령줄 인터페이스) 도구를 제공한다. CLI는 올바른 파일과 폴더를 모두 생성 후 Pluggable-widgets-tools 빌드 또는 개발 모드용 위젯을 패키징하는 롤업 실행기라는 것을 제공한다.

 

2.1 Widget Scaffolding 

① Node.js를 다운받는다.

https://nodejs.org/en/download 

LTS 버전을 다운받는다.

설치수 cmd를 열고 노드 버전을 확인하여 제대로 설치되었는지 확인한다.

npm -v

node -v

 

② yarn을 설치한다.

npm install -g yo

 

③ Mendix pluggable 위젯 생성기를 설치한다.

npm install -g @mendix/generator-widget

 

 

2.2  Widget 생성

① 터미널을 열고 Mendix 프로젝트 루트 폴더로 이동합니다. (cd 사용)

② 플러그형 위젯용 폴더를 만듭니다.

mkdir mypwidget

해당 경로에 mypwidget 폴더가 생성됩니다.

③ 새로 생성한 폴더로 이동합니다.

yo @mendix/widget characterCounter

 

 

npm run build

 

 

.xml을 변경할 때 빌드 명령을 실행하고 Studio Pro를 새로 고치고 위젯을 업데이트해야 합니다. React 코드 변경만 수행하는 경우 npm run start를 실행하여 watch 모드에서 Pluggable-widgets-tools를 실행하면 위젯이 다시 빌드되고 변경 사항이 브라우저에 실시간으로 반영됩니다.

 

Mendix Studio Pro에서 App > Synchronize App Directory를 누르거나 F4를 누릅니다. 

Toolbox > widget에 character counter 가 생성된 걸 확인할 수 있습니다. 

 

 

 

 

 

 

 

 

 

 

 

출처: https://academy.mendix.com/link/modules/582/lectures/4549/2.2.1-Scaffolding-Your-Widget