[카테고리:] GWC UI Library

웹 UI 라이브러리인 GWC에서 제공하는 gwcCreateProgressDialog 함수에 대한 예제 코드입니다.

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

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

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

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

window.onload = () => {
    button.onclick = event => { 
        const dlg = gwcCreateProgressDialog({
            // onCancel 이벤트를 지정하지 않을 경우 "취소" 버튼 클릭시 remove 매서드가 자동으로 호출됨
            onCancel: () => {
                gwcMessage("사용자가 진행을 중단했습니다.", true);
                dlg.remove(); // onCancel 이벤트 지정했을 경우 의도적으로 remove 매서드를 호촐해야 함
            }
        });

        dlg.show();

        let p = 0;
        setInterval(() => {
            dlg.percent = p;
                if(p++ === 100) dlg.remove();
        }, 50);

        //dlg.label = "텍스트 메시지";
    };
};

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

cancel() 매서드를 호출하면 onCancel 이벤트가 호출됩니다.

웹 UI 라이브러리인 GWC에서 제공하는 gwcCreateModalDialog 함수에 대한 예제 코드입니다.

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

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

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

.hcenter {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 0.5em;
}
 
.content {
    padding: .5em;
}

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

gwc-textinput {
    width: 20em;
}

.something {
    width: 100%;
    height: 100px;
    background: rgba(0,0,0,0.4);
    border: 1px dashed rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: wheat;
    padding: 20px;
}

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

window.onload = () => {
    btn.addEventListener("click", () => {
        const dlg = gwcCreateModalDialog("모달 대화상자");
        dlg.content = `
            

                

                    
                    
                
                

                    앨든링(Elden Ring).. 
그대가 왕이될지.. 아니 어쩌면 신이될지..
                
                

                    
                
            
        `;

        dlg.resizablePanel.style.width = "30em"; // 대화상자의 크기 지정(대화상자 자체에 대한 크기 조절로는 안됨)
        dlg.resizablePanel.minWidth = 400; // 대화창의 크기 조절 시 가로 최소 크기
        dlg.resizablePanel.minHeight = 200; // 대화창의 크기 조절 시 세로 최소 크기

        // 대화 상자의 크기 조절에 따른 구성 UI의 크기 조절
        // CSS 만으로 제어할 수 없는 구성 UI는 크기 변경 이벤트를 통해 제어할 수 있음
        dlg.resizablePanel.addEventListener("change", (event) => {
            const { mode, oldHeight, newHeight } = event.detail;
            if(mode === "BOTTOM" || mode == "TOP") {
                const domSomething = dlg.content.querySelector(".something");
                const height = parseFloat(window.getComputedStyle(domSomething).getPropertyValue("height"));
                domSomething.style.height = `${height - (oldHeight - newHeight)}px`;
            }
        });

        dlg.content.querySelector("gwc-button").addEventListener("click", () => {
            dlg.remove();
        });
       
        dlg.show();
        GeoServiceWebComponentManager.instance.update();
    
    });    
};

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

대화창을 구성하는 UI의 상태(값)이 변경되면 변경에 대한 처리를 한곳에서 처리할 수 있는 state 관리가 가능합니다. 코드의 예는 다음과 같습니다.

dlg.setState((ui) => {
    console.log("변경통지", typeof ui);
});

setState로 상태 변경에 대한 이벤트를 등록할 수 있으며 변경 이벤트는 다음처럼 직접적으로 호출할 수도 있습니다.

this.#dialog.state.change(this.#selectedFile);

대화창이 닫힐때 수동이든 자동이든 remove 매서드가 호출되는데요. 이때 close 이벤트가 발생합니다. 이 이벤트를 통해 창이 닫힐때 무언가를 처리할 수 있고, 창을 정말로 닫을지 제어할 수 있습니다.

this.#dialog.addEventListener("close", (event) => {
    // cancel을 true로 설정하면 대화창이 닫히지 않습니다.
    event.cancel = true;
});

웹 UI 라이브러리인 GWC에서 제공하는 gwcInput 함수에 대한 예제 코드입니다.

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

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

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

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

window.onload = () => {
    button.onclick = event => { 
        gwcInput({
            message: "폴더 이름을 입력하세요",
            value: "이름", // optional
            onOkay: (value) => { // 확인 버튼 처리
                console.log(value);
                if(value.trim().length === 0) {
                    gwcMessage("값을 입력하세요.", true);
                    return false; // false를 반환하면 입력창이 닫히지 않음
                } else {
                    gwcMessage(`입력한 값은 ${value} 입니다.`);
                }
            },
            onCancel: (value) => { // 취소 버튼 처리
                // false를 반환하면 입력창이 닫히지 않음
                //return false; 
            }
        });
    };
};

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

gwcInput 함수는 표시되는 대화상자에 대한 객체를 반환합니다. 이 객체가 dlg라고 할때 내부에 표시되는 메세지를 1초마다 변경하다가 수초 경과 후 자동으로 닫히게 하는 코드는 다음과 같습니다.

let i = 0;
setInterval(() => {
    i++;
    dlg.message = i;

    if(i === 4) dlg.remove();
}, 1000);

GWC 라이브러리를 이용해 실제 프로젝트에 적용한 예입니다. 아래의 영상은 GWC 라이브러리만을 이용해 만든 UI입니다.

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

const dlg = gwcCreateModalDialog("SHP 파일을 레이어로 추가");
dlg.content = `
    

        

            
            
        
        

            
            
            
        
                                
        

            
            
이곳을 클릭하거나 
이곳에 파일을 드래그 하세요.
        
        

            
             
                
                    4326
                    5174
                    5178
                    5179
                    5181
                    3857
                
            
        
                                
        

            
            
                
            
        
        
                
            
            
        
    
`;

dlg.content.querySelector("gwc-button").addEventListener("click", () => {
    dlg.remove();
});

dlg.show();

GeoServiceWebComponentManager.instance.update();

위의 코드에서 사용한 css는 다음과 같습니다.

/* common */

.vertical-linear-layout {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}

.horizontal-linear-layout {
    display: flex;
    gap: 0.3em;
    flex-direction: row;
    padding: 0 1em;
}

.v-center {
    align-items: center;
}

.h-center {
    justify-content: center;
}

.v-space {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

gwc-toolbutton {
    zoom: 0.45;
}

gwc-button {
    zoom: 0.9;
}

gwc-select {
    zoom: 0.8;
}

/* AddSHPFileDialog */

.add-shp-file-dialog .file-zone {
    font-size: 1em;
    width: 20em;
    height: 10em;
    
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px dashed rgba(255,255,255,0.3);
    background-color: rgba(0,0,0,0.4);
    box-shadow: inset 1px 1px 20px black, 1px 1px 5px black;
    border-radius: 0.4em;
}

.add-shp-file-dialog gwc-label {
    width: 120px;
}

.add-shp-file-dialog gwc-select {
    width: 10em;
}

.add-shp-file-dialog .title {
    width: 20em;
}

.add-shp-file-dialog .folder {
    width: 17.3em;
}

.add-shp-file-dialog gwc-resizable-panel {
    position:relative;
    width: calc(20em + 7px);
    height: 10em
}

.add-shp-file-dialog gwc-resizable-panel gwc-memo {
    width: 100%;
    height: 100%;
}