빌드하는 방법 Mendix TypeScript를 사용한 비디오 플레이어 위젯

라이언 모크
2025 년 9 월 2 일
11분 읽기

주요 요점

만드는 법을 배우세요 Mendix TypeScript로 위젯을 처음부터 만듭니다.
XML로 위젯 속성을 정의하고 Studio Pro에서 구성합니다.
네이티브 HTML을 사용하여 비디오 플레이어 구현 <video> 요소
REST API 설정 및 테스트 Mendix 비디오 콘텐츠를 제공하려면

2025년 중반인데 아직 위젯을 만들지 못했어요. Mendix 11이 정식 출시되니까 갑자기 실력이 닳은 것 같아요. 좋아하는 기술에 대한 최신 정보를 얻는 건 항상 좋은 생각이죠. 그래서 제 실력을 시험하고 계속 발전시켜 볼 무언가를 만들어 보기로 했습니다.

난제

GitHub이나 다른 코드 공유 플랫폼의 저장소 없이 웹앱용 간단한 비디오 플레이어 위젯을 만들어 보겠습니다. 또한, TypeScript를 사용하여 작업할 예정입니다.

1. 준비

첫 번째 단계는 필요한 모든 도구를 설치하고 업데이트하는 것이었습니다. 따라오셨다면, 다음 도구를 다운로드하고 설치하세요.

마지막으로 나는 그것을 통해 일했습니다. 플러그형 위젯 튜토리얼 in Mendix 문서를 통해 기본 사항을 다시 살펴보세요.

2. 시작

개발을 시작하기 위해 Studio Pro에서 새로운 앱을 만들었습니다.

Studio Pro에서 Blank Web App 템플릿을 사용하여 새 앱을 만듭니다.
프로젝트 디렉토리로 이동합니다.
MyWidget이라는 이름의 새 폴더를 만듭니다.
터미널을 열고 폴더로 이동하세요

Yeoman 위젯 생성기를 사용하면 위젯 스캐폴드를 간단하게 생성할 수 있습니다. 시작하기 위해, 이미 열려 있는 터미널에서 다음 명령을 사용하여 생성기를 실행했습니다.

npx @mendix/generator-widget MyVideoPlayer

그런 다음 생성기는 몇 가지 간단한 질문을 통해 나머지 설정 과정을 안내해 주었습니다.


Widget name: MyVideoPlayer
Widget Description: My widget description
Organization Name: Mendix
Copyright: {Your copyright date}
License: {Your license}
Initial Version: {Your initial version number}
Author: {Your author name}
Mendix App path: ../../
Programming language: TypeScript
Which type of components do you want to use? Function Components
Widget type: For web and hybrid mobile apps
Widget template: Empty widget (recommended for more experienced developers)
Unit tests: No
End-to-end tests: No

모든 질문에 답한 후 위젯 생성기가 앱 디렉토리에 필요한 파일을 생성했습니다. 그런 다음 마이비디오플레이어 위젯 코딩을 시작하려면 Visual Studio Code에서 파일을 엽니다.

4. 위젯 속성 정의

이제 위젯 뼈대가 생성되었으므로 추가 작업을 시작할 수 있습니다. xml을 사용하여 위젯 속성을 업데이트했습니다. MyVideoPlayer.xml 파일.

<?xml version="1.0" encoding="utf-8"?>
<widget id="mendix.myvideoplayer.MyVideoPlayer" pluginWidget="true" needsEntityContext="true" offlineCapable="true" supportedPlatform="Web"
    xmlns="http://www.mendix.com/widget/1.0/"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../node_modules/mendix/custom_widget.xsd">
    <name>My Video Player</name>
    <description>My widget description</description>
    <icon/>
    <properties>
        <propertyGroup caption="General">
            <property key="videoUrl" type="attribute" required="true">
                <caption>Video URL</caption>
                <description>Direct URL to the video file (e.g. CDN/API)</description>
                <attributeTypes>
                        <attributeType name="String"/>
                    </attributeTypes>
            </property>
            <property key="controls" type="boolean" defaultValue="true">
                <caption>Show controls</caption>
                <description>Toggles controls on or off</description>
            </property>
            <property key="autoPlay" type="boolean" defaultValue="true">
                <caption>Autoplay</caption>
                <description>Autoplay on video load</description>
            </property>
            <property key="muted" type="boolean" defaultValue="true">
                <caption>Muted</caption>
                <description>Include sound with your video</description>
            </property>
            <property key="loop" type="boolean" defaultValue="true">
                <caption>Loop</caption>
                <description>Enable back to back playback</description>
            </property>
            <property key="width" type="integer" defaultValue="640">
                <caption>Width (px)</caption>
                <description>Width of the video player in pixels</description>
            </property>
            <property key="height" type="integer" defaultValue="360">
                <caption>Height (px)</caption>
                <description>Height of the video player in pixels</description>
            </property>
        </propertyGroup>
    </properties>
</widget>

이렇게 하면 위젯을 구성하는 데 사용되는 여러 가지 속성이 생성됩니다.

비디오 URL(문자열)
컨트롤 표시(부울)
자동 재생(부울)
음소거됨(부울)
루프(부울)
너비(정수)
높이(정수)

이는 Studio Pro에서 위젯 속성을 구성하는 몇 가지 기본 옵션입니다. URL은 문자열 속성인 VideoURL을 통해 전달되는데, 이 속성은 위젯 외부에서 설정하고 컨텍스트 엔터티를 통해 전달해야 합니다.

속성을 처리한 후 위젯 자체를 만드는 단계로 넘어갔습니다. MyVideoPlayer.tsx Visual Studio Code에서 진행했습니다. 제가 설정한 과제의 일환으로 위젯을 만드는 데 비디오 라이브러리를 사용할 수 없었습니다. 그래서 그냥 사용하기로 했습니다. 비디오를 재생합니다. 아래 코드는 비디오 플레이어를 만들고, 속성을 전달하고, 페이지에 비디오를 표시하는 방법입니다.

import {createElement, useRef} from "react";

import "./ui/MyVideoPlayer.css";

// The generator creates this file for you after editing the XML:
import type { MyVideoPlayerContainerProps } from "../typings/MyVideoPlayerProps";

export default function MyVideoPlayer(props: MyVideoPlayerContainerProps) {
  const videoUrl = props.videoUrl?.value ?? "";//assing video url to entity attribute in Studio Pro
  const {
    controls,
    autoPlay,
    muted,
    loop,
    width,
    height,
    class: className,
    style,
    tabIndex
  } = props;

  const videoRef = useRef(null);

  if (!videoUrl || videoUrl.length === 0) {//URL String validation
    return (
//Video Player error message
        No video URL provided


);
    }

  return (//return video player
     ); }

6. 갖고 싶은 것

위젯을 완성하기 전 마지막 단계는 다음을 업데이트하는 것입니다. MyVideoPlayer.editorPreview.tsx 파일입니다. 이 파일은 Studio Pro가 디자인 타임에 편집기 창에 표시하기 위해 사용하는 것입니다(브라우저가 아닌 Studio Pro에서 위젯이 어떻게 보이는지).
이는 몇 가지 간단한 스타일을 첨부한 div를 반환하여 위젯이 멋진 디자인 뷰로 보이도록 하는 것입니다.

import { createElement } from "react";

export function preview() {
  return (
    <div
      style={{
        width: 320,
        height: 180,
        border: "1px dashed #bbb",
        borderRadius: 12,
        display: "grid",
        placeItems: "center",
        fontSize: 12,
        color: "#666"
      }}
    >
      Video Player (bind Video URL)
    </div>
  );
}

export function getPreviewCss() {
  return "";
}

이제 작업이 완료되었으므로 터미널에서 build 명령을 사용하여 위젯을 컴파일했습니다.

npm run build //(You can also use npm start to have the widget autocompile after every change)

이 명령은 코드를 패키지로 컴파일하고 앱의 위젯 폴더에 복사합니다.

8. 스튜디오 프로에서

위젯을 성공적으로 빌드한 후에는 앱을 프로젝트 디렉토리와 동기화하고 모든 위젯을 업데이트하는 것이 중요합니다. 그렇지 않으면 도구 상자에 위젯이 표시되지 않을 수 있습니다.

도메인 모델에 지속 가능한 엔터티를 생성했습니다. Video. 엔터티는 일반화입니다. 파일문서 그리고 세 가지 속성이 있습니다: 제목(문자열), VideoID(자동번호)및 비디오URL(문자열).
위젯은 비디오를 재생하기 위해 URL을 필요로 합니다. 이를 위해 비디오를 REST API로 공개하고 비디오ID(자동번호) 키로서 키로 가져오기 엔드포인트. REST API의 URL은 비디오 플레이어의 URL로 작동할 수 있습니다.

비디오 엔터티를 마우스 오른쪽 버튼으로 클릭하고 이를 노출하도록 선택하여 도메인 모델에서 REST API를 생성하기로 했습니다. REST API. Studio Pro가 API를 생성하도록 하고 사용했습니다. 일련 번호 서비스의 키로 필드를 생성합니다. 겟올 그리고 GetByKey API에 대한 엔드포인트이지만 GetByKey 필요합니다). 나는 수정했습니다 GetByKey 응답을 처리하는 마이크로플로를 업데이트하여 엔드포인트를 생성합니다.