[카테고리:] GWC UI Library

작성일자

gwc-resizable-panel를 이용해 사이드 패널 구성

크기 조절이 가능한 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 만큼 빼줘야 한다는 것입니다. 크기 조정을 위해 반드시 고려해야 할 부분입니다.

작성일자

#GWC UI Library : Space

웹 UI 라이브러리인 GWC에서 제공하는 Space 컴포넌트에 대한 예제 코드입니다. 이 컴포넌트는 UI 간의 여백을 지정하기 위한 목적으로 사용됩니다.

먼저 DOM 구성을 위한 JS 코드는 다음과 같습니다.

const domLayout = document.createElement("div");
domLayout.classList.add("login");

domLayout.innerHTML = `
    
`;
document.body.appendChild(domLayout);

Space 컴포넌트는 gw-space라는 Tag로 구성될 수 있는데, 여백에 대한 크기를 10px 또는 20px,10px 등으로 나타낼 수 있습니다. 10px의 경우 가로와 세로 모두에 대한 여백의 크기이고 20px,10px은 가로와 세로에 대한 크기를 서로 다르게 지정합니다. 위의 코드에 대한 결과는 다음과 같습니다.

이 컴포넌트에 대한 CSS 코드는 필요치 않으나 위의 코드에서 사용된 CSS는 다음과 같습니다.
.login {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: black;
}

.login .login-form {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    flex-flow: column;
    gap: 0.5em;
    background: rgba(255,255,255,0.1);
    padding: 4em 4em 1.5em 4em;
    border-radius: 1em;
    box-shadow: -0.6px -0.6px 0.6px rgba(255,255,255,0.3);
}

.login .login-form gwc-textinput {
    width: 300px;
}

.login .login-form .login-title {
    font-family: Raleway;
    color: white;
    font-size: 2em;
}

.login .login-form .login-form-tools {
    display: flex;
    justify-content: center;
    align-items: center;
    zoom: 0.9;
}
작성일자

GWC 라이브러리, UI 구성 예 (gwcCreateModalDialog, Tree 등)

다음과 같은 UI 구성을 목표라고 할때…

대화상자 형태의 레이아웃이므로 gwcCreateModalDialog API를 이용한 클래스를 작성합니다.

class DownloadLayerList {
    constructor() {
        const dlg = gwcCreateModalDialog("레이어 목록 불러오기");
        dlg.content = `
            <div class="download-layer-list-dialog h-center content">
                <div class="vertical-linear-layout">
                    <div class="horizontal-linear-layout v-center">
                        <gwc-label content="필터" outline-type="none"></gwc-label>
                        <gwc-textinput hint="필터링할 값을 입력하세요."></gwc-textinput>
                        <gwc-toolbutton class="refresh" icon="../images/reset.svg"></gwc-toolbutton>
                    </div>
                    <gwc-vscrollview>
                        <content>
                            <gwc-tree></gwc-tree>
                        </content>
                    </gwc-vscrollview>
                    <div class="horizontal-linear-layout h-center v-space"> 
                        <gwc-button class="btnConfirm" title="불러오기" disabled=true></gwc-button>
                        <gwc-button class="btnCancel" title="취소"></gwc-button>
                    </div>
                </div>                    
            </div>
        `;

        dlg.show();
        GeoServiceWebComponentManager.instance.update();

        ....

대화상자의 크기 조정이 필요하다면 아래의 코드를 추가합니다.

        dlg.width = "30em"
        dlg.resizablePanel.resizableLeft = true;
        dlg.resizablePanel.resizableRight = true;
        dlg.resizablePanel.resizableTop = true;
        dlg.resizablePanel.resizableBottom = true;
        dlg.resizablePanel.minWidth = 350;
        dlg.resizablePanel.minHeight = 300;
        dlg.resizablePanel.addEventListener("change", (event) => {
            const { mode, oldHeight, newHeight } = event.detail;
            if(mode === "BOTTOM" || mode == "TOP") {
                const vscrollview = dlg.content.querySelector("gwc-vscrollview");
                const height = parseFloat(window.getComputedStyle(vscrollview).getPropertyValue("height"));
                vscrollview.style.height = `${height - (oldHeight - newHeight)}px`;
                vscrollview.refresh();
            }            
        });
    }

    ....

CSS에 대한 코드는 다음과 같습니다.


.download-layer-list-dialog {
    padding: 0.5em;
}

.download-layer-list-dialog gwc-textinput {
    flex: 1; /* 대화상자의 가로 크기를 재조정 했을 때 gwc-textinput의 크기도 재조정됨  */
}

.download-layer-list-dialog gwc-vscrollview {
    position: relative;
    height: 16em;
    background: rgba(0,0,0,0.8);
    border-radius: 0.5em;
    overflow: hidden;
}

.download-layer-list-dialog gwc-tree {
    width: 100%; /* tree의 항목의 크기를 대화상자의 폭을 가득 채우도록 조정함 */
    padding: 0.5em 0.5em 0.5em 0.5em;
}

.download-layer-list-dialog gwc-tree .gwc-tree-folder-files-file {
    width: 100%;
}

끝으로 gwc의 tree 컴포넌트는 동일한 계층에 동일한 이름을 가진 항목을 추가할 수 없습니다. 이때 label 속성을 이용해 이름은 다르지만 표시되는 제목은 중복되게 변경해 줄 수 있습니다. 코드 예시는 다음과 같습니다.

data.forEach(item => {
    const rootFolder = this.#tree.rootFolder;
    const file = rootFolder.addFile(item.id, "url(../images/layers.svg)");

    const date = new Date(item.used_time);
    file.tag = `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`;
    file.label = item.title;
});
작성일자

#GWC UI Library : Select의 Custom Draw (setCustomDrawingMethod)

웹 UI 라이브러리인 GWC에서 제공하는 Select 컴포넌트의 선택 항목을 사용자 정의 그리기로 정의하기 위한 예제 코드입니다.

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

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

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

.panel {
    display: flex;
    gap: 2em;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#select {
    width: 200px;
}

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

window.onload = () => {
    select.setCustomDrawingMethod([
        {v: "4 4"}, // 사용자 정의 아이템을 시각화하기 위한 임의의 데이터
        {v: "8 4"},
        {v: "8 8"},
        {v: "16 8"},
        {v: "16 4"}
    ], (item) => {
        const domSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        domSVG.setAttribute("width", "100px");
        domSVG.setAttribute("height", "20px");

        const svgLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
        svgLine.setAttribute("x1", 4);
        svgLine.setAttribute("y1", 10);
        svgLine.setAttribute("x2", 96);
        svgLine.setAttribute("y2", 10);
        svgLine.style = `stroke:white;stroke-width:4;stroke-dasharray:${item.v}`;

        domSVG.appendChild(svgLine);

        return domSVG;
    });

    select.selectedIndex = 1;

    select.addEventListener("change",  (event) => {
        const select = event.target;
        label.content = `"${select.value.v}"(으)로 변경되었습니다.`;
    });

    button.addEventListener("click", () => {
        gwcMessage(`select의 값: ${select.value.v}`);
    });

    GeoServiceWebComponentManager.instance.update();
};

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