GWC UI Library – 페이지 5

2022-02-182022-02-18

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

2022-02-162022-02-24

#GWC UI Library : gwcCreateModalDialog 함수 [DEPRECATED]

웹 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();
};

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

2022-02-062022-02-06

GWC 라이브러리 – Quick Start Page

GWC 라이브러리의 UI를 이용해 샘플 페이지를 개발할 때 사용하는 시작 코드입니다. 참조하세요.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <style>
            @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: 'Noto Sans KR';
            }

            body {
                padding: 0;
                margin: 0;
                width: 100%;
                height: 100vh;
                background-color: rgb(30,30,30);
            }

            #main-layout {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0.001;
                transition: 2s opacity;
            }

            #main-layout.show {
                opacity: 1;
            }
        </style>

        <link rel="stylesheet" href="../js/gwc/geoservice-web-components.css">
        <script src="../js/gwc/geoservice-web-components.js" defer>
        <title>GWC Library Quick Start Page</title>
    </head>
    <script>
        window.addEventListener("load", () => {
            document.querySelector("#main-layout").classList.add("show");
        });

        window.addEventListener("DOMContentLoaded", () => {
            GeoServiceWebComponentManager.instance.update();
        });
    </script>
    <body>
        <div id="main-layout">
        </div>
    </body>
</html>

Page에 대한 UI 구성이 모두 완료되면 서서히 나타나도록 하는 효과가 포함되어 있습니다. 만약 Page에 UI가 그렇게 많지 않다면 이 효과는 제거 시켜도 됩니다.

2022-01-242022-03-10

#GWC UI Library : ResizablePanel

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

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



    
        GWC Library
        

        GWC 라이브러리는 Geoservice Web Components로 웹 GIS 개발에 최적화된 Web UI를 제공합니다.
        

        
            이미지 컴포넌트 
            
        
        

        
            
            버튼 컴포넌트
        
        

        
            
                
                    라디오
                    옵션A
                    옵션B
                
            
        
        

        
            
            
            
        
        

        
            슬라이더
            
        
        

        등등..
        

        웹 소프트웨어 개발에 필요한 많은 컴포넌트들을 제공하며 사용자 경험 향상을 위해 계속 개선되고 추가됩니다.
    



    GWC
    GEOSERVICE WEB COMPONENTS

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

#panel {
    box-shadow: 0 0 2px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,1), 
        0 0 10px rgba(0,0,0,1), 0 0 24px rgba(0,0,0,1);
    left: calc(100% - 30em);
    right: 0;
    top: 0;
    width: 30em;
    height: 100vh;
    color: white;
    background: rgba(0,0,0,0.3);
}

#panel2 {
    left: 300px;
    top: 300px;
    width: 400px;
    height: 300px;
    border-radius: 8px;
    box-shadow: 0 0 2px white, 0 0 8px rgba(0,0,0,1), 
        0 0 10px rgba(0,0,0,1), 0 0 24px rgba(0,0,0,1);
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    font-size: 1em;
    color: white;
    justify-content: center;
    align-items: center;
}

.content {
    height: 100%;
    overflow: hidden;
    padding: 1em 2em;
    width: 100%;
    line-height: 1.5em;
}

gwc-image {
    width: 15em;
    height: 15em;
}

.vcenter {
    color: rgb(160,160,160);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    padding: 0.5em 0;
 }

 gwc-slider {
    width: 10em;
 }

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

window.onload = () => {
    document.querySelector("gwc-button").onclick = () => {
        gwcMessage("안녕하세요.");
    }

    panel.addEventListener("change", (event) => {
        console.log(event.detail);
        // event.cancel = true;
    });

    window.addEventListener("resize", () => {
        panel.style.right = 0;
        const width = panel.offsetWidth;
        panel.style.left = `calc(100% - ${width}px)`;
    });

    GeoServiceWebComponentManager.instance.update();
};

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

이 컴포넌트는 크기 제어를 제어하기 위해 다음과 같은 코드를 사용할 수 있습니다.

dlg.resizablePanel.resizableLeft = false; // 왼쪽 모서리로 크기 조정 불가능
dlg.resizablePanel.resizableRight = false; // 오른쪽 모서리로 크기 조정 불가능
dlg.resizablePanel.resizableTop = true; // 위 모서리로 크기 조정 가능
dlg.resizablePanel.resizableBottom = true; // 아래 모서리로 크기 조정 가능

이 컴포넌트는 resizing get 속성을 통해 마우스를 이용해 현재 크기 조절 중 인지를 파악할 수 있습니다.