[카테고리:] GWC UI Library

웹 UI 라이브러리인 GWC에서 제공하는 Grid 컴포넌트에서 셀 내용을 사용자정의 형태로 표현하는 예제 코드입니다.

먼저 DOM 구성은 다음과 같습니다.

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

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

#grid {
    width: 500px;
    height: 250px;
}

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

window.onload = () => {
    grid.columns = [
        { name: "NO", width: "20px" },
        { name: "색상" },
        { name: "범위" },
    ];

    const columnIndex = 1
    grid.setCustomDrawMethod(columnIndex, (item, parentDom) => {
        const dom = document.createElement("div")
        dom.style.width = "100%"
        dom.style.height = "10px"
        dom.style.backgroundColor = item

        parentDom.style.width = "90px"

        return dom
    })

    grid.data = [
        { values: ["1", "#ff0000", "100-200"] },
        { values: ["2", "#ffff00", "200-300"] },
        { values: ["3", "#ff00ff", "300-400"] },
        { values: ["4", "#00ffff", "400-500"] },
        { values: ["5", "#9f9f9f", "500-600"] },
        { values: ["6", "#ff0000", "600-700"] },
        { values: ["7", "#ffff00", "800-900"] },
        { values: ["8", "#ff00ff", "1000-1100"] },
        { values: ["9", "#00ffff", "1100-1200"] },
        { values: ["10", "#9f9f9f", "1300-1400"] },
    ];

    // grid의 data를 먼저 지정하고 setCustomDrawMethod를 그 다음에 호출할 경우 아래의 코드가 필요함
    //grid.update() 

    grid.fixFirstColumn = true;

    grid.addEventListener("columnclick", (event) => {
        const v = grid.getColumn(event.detail.index).name;
        gwcMessage(`컬럼명: ${v}`);
    });

    grid.addEventListener("dataclick", (event) => {
        const v = grid.getData(event.detail.row, event.detail.column);
        gwcMessage(`데이터: ${v}`);
    });
};

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

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

먼저 DOM 구성은 다음과 같습니다.

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

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

#grid {
    width: 500px;
    height: 300px;
}

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

window.onload = () => {
    grid.columns = [
        { name: "NO" },
        { name: "이름" },
        { name: "나이" },
        { name: "주소" },
        { name: "회사" },
        { name: "기타" }
    ];

    grid.data = [
        { values: ["1", "김영희", "30", "경기도 양평군", "초록마을", "온화하며 삶에 대한 여운을 느낄줄 아는 사람"] },
        { values: ["2", "홍길동", "40", "전라남도 여수시", "혜민당", "실존 인물을 모델로하여 쓰여진 소설의 주인공"] },
        { values: ["3", "심청", "15", "제주도", "임당수", "아버지의 눈을 낫게하기 위해 희생을 하는 계획 있는 효녀"] },
        ....
    ];

    grid.fixFirstColumn = true;

    grid.addEventListener("columnclick", (event) => {
        const v = grid.getColumn(event.detail.index).name;
        gwcMessage(`컬럼명: ${v}`);
    });

    grid.addEventListener("dataclick", (event) => {
        const v = grid.getData(event.detail.row, event.detail.column);
        gwcMessage(`데이터: ${v}`);
    });
};

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

다음은 크기 조절과 이동이 가능한 Card 컴포넌트와 함께 사용된 예제입니다.

먼저 DOM 구성은 다음과 같습니다.

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

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

#grid {
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    margin: 3px;
}

gwc-card {
    left: 100px;
    top: 100px;
    width: 500px;
    height: 300px;
}

js 코드에 반드시 다음 코드를 추가해 줘야 합니다.

GeoServiceWebComponentManager.instance.update();

크기 조절이 가능한 gwc-resizable-panel 태그를 이용한 사이드 패널을 구성하기 위한 코드를 정리합니다. 아래의 이미지에서 우측의 초록색과 빨간색 외곽선을 내용으로 가지는 것이 이 글의 주인공입니다.

이제 웹 개발도 클래스 기반으로 개발을 하는게 당연한데요. 사이드 패널에 대한 JS 코드는 다음과 같습니다.

class SearchResultUI {
    constructor() {
        const domLayout = document.createElement("div");
        domLayout.classList.add("search-result-ui");

        domLayout.innerHTML = `
            
                
  
                
                

                
            
        `;

        document.body.appendChild(domLayout);

        GeoServiceWebComponentManager.instance.update();
    }
}

7번의 gwc-resizable-panel의 resizable-left와 min-width는 각각 패널의 왼쪽 모서리를 이용해 크기를 조절할 수 있고, 패널의 가로 크기는 최소 200px를 유지해야 한다는 것입니다. min-width 값의 단위는 px이며 값을 지정할 때는 단위를 지정하지 않습니다./p>

해당되는 CSS는 다음과 같습니다.

.search-result-ui > gwc-resizable-panel {
    box-shadow:  0 0 2px rgb(0 0 0 / 50%), 0 0 10px rgb(0 0 0 / 50%);;
    left: calc(100% - 20em);
    right: 0;
    top: 3em;
    width: 20em;
    height: calc(100vh - 3em);
}

.search-result-ui > gwc-resizable-panel > .search-result-header {
    border: 2px solid green;
    background-color: #202020;
    height: 2.6em;
    display: flex;
}

.search-result-ui > gwc-resizable-panel > .search-result-content {
    border: 2px solid red;
    min-height: calc(100% - 2.6em);
    display: flex;
    flex-direction: column;
    gap: 0.1em;
    background: #0f0f0f;
}

중요한 부분은 gwc-resizable-panel의 처음 크기를 지정하기 위해 width를 20em으로 지정했다면 left의 값을 지정할 때 초기 크기의 width 만큼 빼줘야 한다는 것입니다. 크기 조정을 위해 반드시 고려해야 할 부분입니다.