Connecting Mendix Data and Our Widget

학습 목표

이 모듈을 마치면 다음을 수행 할 수 있습니다.

• 위젯의 수명 주기 설명
• 위젯 개선

---

위젯의 수명 주기

한 걸음 물러서서 Mendix에서 데이터를 가져와 위젯에 표시하는 방법을 살펴보겠습니다.

Mendix는 위젯이 Mendix의 데이터를 사용하고 상호 작용할 수 있도록 많은 유용한 API를 노출합니다.
Micro 및 Nanoflows와 같은 작업을 트리거하는 API도 있습니다.
위젯을 Mendix에 "연결"하는 방법은 단순히 다음 항목에 속성을 추가하는 것입니다.

src/CharacterCounter.xml

 

바로 아래 예시는 따라 할 필요X  /  흐름만 파악하기

예시)

1. 다음에서 정의합니다. CharacterCounter.xml

<property key="myString" type="attribute">
    <caption>Add String</caption>
    <description></description>
    <attributeTypes>
        <attributeType name="String"/>
    </attributeTypes>
</property>

 

Mendix에서 실행하고 동기화한 후(Studio Pro에서 F4 누르기) 다음과 같이 표시됩니다.
여기서 위젯에 전달할 문자열을 정의할 수 있습니다. npm run build

[ 그림 1 ]

Select... DataView에서 모든 문자열 속성을 볼 수 있습니다.

[ 그림 2 ]

 

React Widget에서 다음과 같은 속성을 가진 유형의 객체를 얻을 수 있습니다. EditableValue<string>

  status: ValueStatus;
       readOnly: boolean;
       value: Option_2<T>;
       displayValue: string;
       setValue: (value: Option_2<T>) => void;
       setTextValue: (value: string) => void;
       validation: Option_2<string>;
       setValidator: (validator?: (value: Option_2<T>) => Option_2<string>) => void;
       formatter: ValueFormatter<T>;
       setFormatter: (formatter: Option_2<ValueFormatter<T>>) => void;
       universe?: T[];

따라서 사용할 수 있을 때까지 로딩 표시기를 표시하는 데 사용할 수 있습니다. 그런 다음 다음을 사용하여 값을 표시할 수 있습니다. props.myString.status     props.myString    props.myString.displayValue

 

 

 

 

 

우리가 해결하려는 문제

다시 앱으로 돌아가서 "Hello World" 위젯이 계속 표시됩니다. 입력하려고 하면 200자만 추가할 수 있지만 사용자가 볼 수 있는 방법은 없으므로 위젯을 사용하여 사용자에게 전달해 보겠습니다.

[ 그림 3 ]

 

구현

CharacterCounter.xml

propertyGroup안의 property 추가 or 수정

<property key="content" type="widgets" required="false">
    <caption>Content</caption>
    <description>Content of a box</description>
</property>

 

typings > CharacterCounterProps.d.ts

export interface CharacterCounterContainerProps {
    name: string;
    class: string;
    style?: CSSProperties;
    tabIndex?: number;
    sampleText: string;
    content?: ReactNode; // 추가
}

 

src > CharacterCounter.tsx

import { ReactElement, createElement, Fragment } from "react";
import { CharacterCounterContainerProps } from "../typings/CharacterCounterProps";

import "./ui/CharacterCounter.css";

export function CharacterCounter({ content }: CharacterCounterContainerProps): ReactElement {
    return (
        <Fragment>
            <div>{content}</div>
        </Fragment>
    );
}

 

 

CharacterCounter.editorPreview.tsx

Preview를 쓰지 않을 예정이므로 삭제

 

 

터미널 . npm run build

 

 

Mendix 프로젝트 업데이트로 이동합니다(F4 키를 누름).

[ 그림 4 ]

위젯을우클릭 후 Update widget 클릭

[ 그림 5 ]

 

이 드롭 영역은 우리가 드롭하는 모든 표준 Mendix 위젯을 렌더링하므로 이제 텍스트 상자를 드래그 앤 드롭하고 앱을 실행할 수 있습니다.

[ 그림 6 ]

앱을 실행하고 살펴보면 변경 사항이 😉 없어야 합니다. 다만 이제 위젯을 사용하여 Text Input을 렌더링하고 있다는 점을 제외하고는 말입니다.

 

 

로직 추가

이제 입력에서 현재 텍스트 입력을 가져오는 몇 가지 논리를 추가해 보겠습니다.

 

CharacterCounter.tsx

import { ReactElement, createElement, useRef, useEffect, useState } from "react";
import { CharacterCounterContainerProps } from "../typings/CharacterCounterProps";
import "./ui/CharacterCounter.css";

export function CharacterCounter({ content }: CharacterCounterPreviewProps): ReactElement {
    const [currentInput, setCurrentInput] = useState<string>("");
    const myContainerRef = useRef<HTMLDivElement>(null);

    const onInputChange = (e: Event): void => {
        if (e) {
         
  setCurrentInput((e.target as HTMLInputElement).value);
        }
    };

    useEffect(() => {
        let eventListener: Element;
        if (myContainerRef.current) {
            const inputElements = myContainerRef.current.querySelectorAll("input");
            if (inputElements.length) {
                eventListener = inputElements[0];
                eventListener.addEventListener("input", onInputChange);
            }
        }
        return () => {
            eventListener.removeEventListener("input", onInputChange);
        };
    }, [myContainerRef]);

    return (
        <div className="character_counter">
            <div ref={myContainerRef}>{content}</div>
            <span>
                {currentInput.length} / {200}
            </span>
        </div>
    );
		}

이 코드는 콘텐츠 블록에 드롭된 첫 번째 입력을 가져오고, 해당 입력에 이벤트 리스너를 추가하고 해당 입력의 현재 텍스트를 지정하도록 설정합니다. 그런 다음 최대 문자 수를 기준으로 문자열의 길이를 표시합니다.

 

다시

1. Studio Pro를 실행하고 업데이트합니다(F4 키를 누름).npm run build
2. 위젯을 마우스 오른쪽 버튼으로 클릭하고 Update Widget(위젯 업데이트)을 클릭합니다.
3. 앱을 보면 다음과 같은 내용이 표시되어야 하며 입력하면 최대 문자 수까지 계산됩니다.

[ 그림 7 ]

 

좀 더 개선해보자면

1. 글자 수 제한을 동적으로 변경할 수 있도록 

2. 글자 수에 따라 테두리와 글자 색 변경 

 

먼저 1번째부터 개선하자면

CharacterCounter.xml

<property key="characterLimit" type="integer" defaultValue="200">
    <caption>Character Limit</caption>
    <description></description>
</property>

 

CharacterCounterProps.d.ts

export interface CharacterCounterContainerProps {
    name: string;
    class: string;
    style?: CSSProperties;
    tabIndex?: number;
    content?: ReactNode;
    characterLimit: number;
}

 

CharacterCounter.tsx

return (
     <div className="character_counter">
         <div ref={myContainerRef}>{content}</div>
         <span>
            {currentInput.length} / {characterLimit}
         </span>
     </div>
);

 

 

다음으로 두번째를 개선하자면

CharacterCounter.tsx

const charLimitStyles = () => {
        const charLength = currentInput.length;
        const charLimit = characterLimit ? characterLimit : 0;
        if (charLength > charLimit * 0.8) {
            return "character_counter_80_percent";
        } else if (charLength > charLimit * 0.6) {
            return "character_counter_60_percent";
        }
        return "";
    };
    
    return (
        <div className={`${charLimitStyles()} character_counter`}>
            <div ref={myContainerRef}>{content}</div>
            <span>
                {currentInput.length} / {characterLimit}
            </span>
        </div>
    );

 

 

참고 : 속성 유형 | Mendix 문서

Property Types

출처 : Mendix Academy - Build a Pluggable Widget