GWC UI Library – 페이지 5

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 속성을 통해 마우스를 이용해 현재 크기 조절 중 인지를 파악할 수 있습니다.

2022-01-232022-09-20

#GWC UI Library : SearchInput

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

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

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

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

.input {
    width: 25em; /* 포커스를 받으면 커지는 크기 */
}

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

window.onload = () => {
    input.addEventListener("enter", () => {
        const v = input.value;

        gwcMessage(`"${v}"(으)로 검색을 수행합니다.`);
        
        input.addHistory(v);
    });

    GeoServiceWebComponentManager.instance.update();
};

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

이 컴포넌트는 사용자가 클릭할 때 입력이 활성화되는데요. 항상 활성화되도록 하기 위해서는 다음처럼 always-open 속성을 “true”로 지정하면 됩니다.

이 컴포넌트는 키워드를 입력하다가 포커스를 잃어버리면 입력창이 닫히게 되는데 이때 close 이벤트를 제공합니다. 상대적인 이벤트로 open 이벤트는 입력창이 열릴때 호출됩니다.