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

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

<div class="vcenter">
    <gwc-label id="label" content="Tab 변경 이벤트"></gwc-label>
    <gwc-tab id="tab" selected-tab=4>
        <tabs>
            <tab title="텍스트">
                <div class="vcenter">
                    <h2>안녕하세요. GWC 라이브러리입니다.</h2>
                    <gwc-button id="button1" title="다운로드"></gwc-button>
                </div>
            </tab>
            <tab title="툴버튼">
                <div class="center">
                    <gwc-toolbutton class="toolbutton09" icon="images/icon2.png"></gwc-toolbutton>
                    <gwc-toolbutton icon="images/icon3.png"></gwc-toolbutton>
                    <gwc-toolbutton icon="images/icon1.png"></gwc-toolbutton>                            
                </div>
            </tab>
            <tab title="탭1">
                <div class="vcenter">
                    <div>
                        <gwc-checkbox title="사과"></gwc-checkbox>
                        <gwc-checkbox title="토마토"></gwc-checkbox>
                        <gwc-checkbox title="귤"></gwc-checkbox>
                        <gwc-checkbox title="당근"></gwc-checkbox>
                        <gwc-checkbox title="바나나"></gwc-checkbox>
                    </div>
                    <gwc-slider label="볼륨" unit="dB" to-fixed=1 min=0 max=100 value=45></gwc-slider>
                </div>
            </tab>
            <tab title="탭2">
                <div class="vcenter">
                    <gwc-radiogroup>
                        <items>
                            <item>CSS</item>
                            <item>JS</item>
                            <item>HTML</item>
                        </items>
                    </gwc-radiogroup>
                    <div>
                        <gwc-label content="DOWNLOADING" outline-type="concave"></gwc-label><gwc-progress auto="true"></gwc-progress>
                    </div>
                </div>
            </tab>                    
            <tab title="수직스크롤뷰">
                <div class="vcenter">
                    <gwc-vscrollview>
                        <content>
                            <p>01. 인간은 말이 아닌 행위로 정의된다.</p>
                            <p>02. 인간은 말이 아닌 행위로 정의된다.</p>
                            <p>03. 인간은 말이 아닌 행위로 정의된다.</p>
                            <p>04. 인간은 말이 아닌 행위로 정의된다.</p>
                            <p>05. 인간은 말이 아닌 행위로 정의된다.</p>
                            <p>06. 인간은 말이 아닌 행위로 정의된다.</p>
                            <p>07. 인간은 말이 아닌 행위로 정의된다.</p>
                            <p>08. 인간은 말이 아닌 행위로 정의된다.</p>
                            <p>09. 인간은 말이 아닌 행위로 정의된다.</p>
                            <p>10. 인간은 말이 아닌 행위로 정의된다.</p>
                            <p>11. 인간은 말이 아닌 행위로 정의된다.</p>
                            <p>12. 인간은 말이 아닌 행위로 정의된다.</p>
                            <p>13. 인간은 말이 아닌 행위로 정의된다.</p>
                            <p>14. 인간은 말이 아닌 행위로 정의된다.</p>
                            <p>15. 인간은 말이 아닌 행위로 정의된다.</p>
                            <p>16. 인간은 말이 아닌 행위로 정의된다.</p>
                            <p>17. 인간은 말이 아닌 행위로 정의된다.</p>
                            <p>18. 인간은 말이 아닌 행위로 정의된다.</p>
                            <p>19. 인간은 말이 아닌 행위로 정의된다.</p>
                            <p>20. 인간은 말이 아닌 행위로 정의된다.</p>
                        </content>
                    </gwc-vscrollview>
                </div>
            </tab>                    
        </tabs>
    </gwc-tab>
    <gwc-button id="button2" title="세번째 탭으로 변경"></gwc-button>
</div>

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

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

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

gwc-tab {
    width: 35em;
    height: 13em;
}

gwc-vscrollview {
    width: 25em;
    height: 9em;
}

gwc-slider {
    width: 18em;
}

gwc-progress {
    width: 20em;
}

gwc-label {
    margin-right: 0.5em;
}

div, h2 {
    color: white;
}

p:nth-child(2n) {
    color: greenyellow;
    font-size: 1.2em;
}

p:nth-child(2n+1) {
    color: yellow;
}

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

window.onload = () => {
    button1.onclick = () => {
        gwcMessage("GitHub에서 다운로드 가능합니다.");
    }

    tab.addEventListener("change", (event) => {
        label.content = `${event.detail.previousTab}번 탭에서 ${event.detail.currentTab}번 탭으로 변경 되었습니다.`; ;
    });

    button2.onclick = () => tab.selectedTab = 3;

    GeoServiceWebComponentManager.instance.update();
};

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

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

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

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

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

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

let hTimer;

window.onload = () => {
    button.onclick = event => { 
        const waiter = gwcWaiter("대기 중..", () => {
            clearInterval(hTimer);
            gwcMessage("사용자가 강제로 대기를 종료했습니다.");

            return true; // false를 반환하면 강제 종료가 취소됨
        });

        waiter.show();
        
        let i = 0;
        hTimer = setInterval(() => {
            waiter.message(`${i}초 대기 중...`);

            if(i == 5) {
                waiter.hide();
                clearInterval(hTimer);
                gwcMessage("대기 완료");
            }

            i++;
        }, 1000);

    };
};

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

noDelay 속성을 true로 저징하면 모래시계를 즉각 표시하도록 합니다.

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

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