[카테고리:] GWC UI Library

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%;
}

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

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

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

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

.hcenter {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0.3em;
    gap: 0.6em;
 }

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

gwc-textinput {
    width: 20em;
}

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

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

                

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

        dlg.show();
    
    });

    //GeoServiceWebComponentManager.instance.update();
};

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