[카테고리:] GWC UI Library

웹 UI 라이브러리인 GWC에서 제공하는 Memo 컴포넌트에 대한 예제 코드입니다.

먼저 DOM 구성은 다음과 같습니다. gwc-resizable-panel 태그로 감싸서 크기 조정이 가능하도록 했습니다. 이는 옵션입니다.

그리고 CSS 구성은 다음과 같구요.

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.5em;
}

.vcenter {
    display: flex;
    align-items: center;
    gap: 0.3em;
}

.hcenter {
    flex-direction: column;
    display: flex;
    _align-items: center;
}

gwc-memo {
    width: 100%;
    height: 100%;
}

js 코드는 다음과 같습니다.

window.onload = () => {
    button1.onclick = () => {
        memo.value = "메모에 대한 내용은 코드로 변경할 수 있어요.\n줄 바꿈도 가능하답니다.";
    }

    button2.onclick = () => {
        gwcMessage(memo.value);
    }

    button3.onclick = () => {
        console.log(memo.disabled);
        memo.disabled = !memo.disabled;
    }

    button4.onclick = () => {
        console.log(memo.readonly);
        memo.readonly = !memo.readonly;
    }

    memo.addEventListener("change", (event) => {
        labelEvent.content = `${memo.value.length}자가 입력됨 (입력가능 문자수 ${memo.maxLength})`;
    })

    GeoServiceWebComponentManager.instance.update();
   
};

실행 결과는 다음과 같습니다.

gwc-memo 태그 선언을 통해 value 속성에 문자열을 지정할 때 문자열에 쌍따옴표가 있을 경우 변환이 필요합니다.

<gwc-memo value="${params.content.replaceAll("\"", "&quot;")}"></gwc-memo>

웹 UI 라이브러리인 GWC에서 제공하는 PopupMenu 컴포넌트에 대한 예제 코드입니다.

큰 의미는 없으나 DOM 구성은 다음과 같습니다.

그리고 CSS 구성은 다음과 같구요.

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

js 코드는 다음과 같습니다.

window.onload = () => {
    const popupMenu = gwcCreatePopupMenu();

    popupMenu.addMenuItem("menu1", {
        text: "녹음 시작",
        icon: "images/icon1.png",
        onClick: (menuId) => { 
            gwcMessage(`녹음 시작 클릭(${menuId})`);
            popupMenu.hide();                
        }
    });

    popupMenu.addMenuItem("menu2", {
        text: "WiFi 활성화",
        icon: "images/icon2.png",
        checked: false,
        onClick: (menuId) => { 
            const bChecked = popupMenu.getMenuChecked(menuId);
            popupMenu.setMenuChecked(menuId, !bChecked);

        }
    });

    popupMenu.addMenuItem("menu3", {
        text: "꿈꾸기",
        icon: "images/icon3.png",
        onClick: (menuId) => { 
            gwcMessage(`상세화하기(${menuId})`);
            popupMenu.hide();
        }
    });

    popupMenu.addMenuItem("menu4", {
        text: "구체화하기",
        icon: "images/icon4.png",
        onClick: (menuId) => { 
            gwcMessage(`구체화하기(${menuId})`);
            popupMenu.hide();
        }
    });

    popupMenu.addMenuItem("menu5", {
        text: "실현하기",
        icon: "images/icon5.png",
        onClick: (menuId) => { 
            gwcMessage(`실현하기(${menuId})`);
            popupMenu.hide();
        }
    });

    const popupMenuZone = document.querySelector(".center");
    popupMenuZone.addEventListener("click", (event) => {
        if(popupMenu.isShown()) {
            popupMenu.hide();
            return;
        }

        if(event.target === popupMenuZone) {
            // 팝업창의 표시를 위해 
            // event.currentTarget.getBoundingClientRect()의 결과값에 대한 left, top을 사용하는 것이 좋음
            popupMenu.show(event.offsetX, event.offsetY);
        }
    });
};

실행 결과는 다음과 같습니다.

PopupMenu를 표시하기 전에 어떤 메뉴 항목을 감추거나 다시 표시해야 할 필요가 있습니다. 이에 대한 이벤트는 showing인데요. 예제 코드는 다음과 같습니다.

popupMenu.addEventListener("showing", (event) => {
    popupMenu.setMenuVisible("menu1", true);
    popupMenu.setMenuVisible("menu2", false);

    // event.cancel = true; -> 이 코드가 작동하면 팝업 메뉴가 표시되지 않음
});

gwcCreatePopupMenu를 응용해서 일반적인 메뉴를 구성할 수 있는데, 이때 서브 메뉴에 대한 구성도 가능합니다. 아래는 코드 예시과 그 결과 이미지입니다.

const menu = gwcCreatePopupMenu();
const shpCsvMenu = gwcCreatePopupMenu();

shpCsvMenu.addMenuItem("menu-shp2csv", {
    text: "SHP 데이터를 CSV로 변환",
    icon: "images/change.svg",
    onClick: (menuId) => {}
});

shpCsvMenu.addMenuItem("menu-xycsv2shp", {
    text: "경위도 좌표 데이터(CSV)를 SHP으로 변환",
    icon: "images/change.svg",
    onClick: (menuId) => {}
});

menu.addSubMenu("menu-shpcsv", shpCsvMenu, { text: "SHP/CSV 변환" })