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

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

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

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

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

window.onload = () => {
    button.onclick = event => { 
        gwcConfirm("데이터를 서버에 저장할까요?", 
            () => { gwcMessage("완벽하게 저장했습니다.") }, 
            () => { gwcMessage("저장하지 않았습니다.", true) }, 
            () => { gwcMessage("취소했습니다.")} 
        );
    };
};

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

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

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

    
        
            

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

                    이미지 컴포넌트 
                    
                
                

                    
                    버튼 컴포넌트
                
                

                    
                        
                            라디오
                            옵션A
                            옵션B
                        
                    
                
                

                    
                    
                    
                
                

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

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

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

gwc-vscrollview {
    width: 25em;
    height: 10em;
    background-color: rgba(0,0,0,0.5);
}

.content {
    color: white;
    padding: 0.2em 1em 1em 1em;
}

p {
    margin-bottom: 0.5em;
}

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

.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("버튼 클릭");
    }

    GeoServiceWebComponentManager.instance.update();
};

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

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

먼저 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;
    gap: 0.2em;
    flex-direction: column;
    gap: 0.5em;
}

.vcenter {
    display: flex;
    align-items: center;
    gap: 0.2em;
    padding: 0.5em 0.5em 0 0.5em;
}

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

gwc-textinput {
    width: 20em;
}

gwc-select {
    width: 20em;
}

.card1 {
    width: 360px;
    height: 150px;
}

.card2 {
    width: 400px;
    height: 170px;
}

.card3 {
    width: 500px;
    height: 120px;
}

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

window.onload = () => {
    card.content = `
        

            

                
                
            
            
        
    `;

    GeoServiceWebComponentManager.instance.update();
};

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

이 컴포넌트에 modal이라는 속성이 추가되어 true 값으로 설정되면 모달 방식으로 처리됩니다.

이 컴포넌트의 타이틀 우측에 다양한 UI를 추가할 수 있습니다. 예를 들어 버튼을 추가하는 코드는 다음과 같습니다.

card.domHeadLeftSpace.innerHTML = `
    
`;

card.domHeadLeftSpace.querySelector("gwc-toolbutton").addEventListener("click", () => {
    alert("Hello!");
});