GWC UI Library – 페이지 9

2022-01-092024-01-22

#GWC UI Library : ToolButton

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

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

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

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

.center > div {
    display: flex;
    gap: 1em;
}

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

window.onload = () => {
    toolbutton1.addEventListener("click", () => { 
        gwcMessage("안녕하세요! GWC 라이브러리입니다.");
    });

    toolbutton2.addEventListener("statechange", (event) => {
        const tb = event.target;
        label.content = `${tb.id}가 ${tb.pressed?"DOWN":"UP"}된 상태입니다.`;
    });

    toolbutton2.addEventListener("click", () => {
        toolbutton2.pressed = !toolbutton2.pressed;
    });

    toolbutton3.addEventListener("click", () => {
        toolbutton3.disabled = true;
    });
};

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

title 속성으로 간단한 툴팁을 표현할 수 있습니다.

2022-01-092022-01-12

#GWC UI Library : Image

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

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

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

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

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

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

2022-01-082023-06-14

#GWC UI Library : ColorPicker

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

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

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

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

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

#rect {
    border: 1px solid black;
    width: 10em;
    height: 10em;
}

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

window.onload = () => {
    rect.style.backgroundColor = colorpicker.value;

    colorpicker.addEventListener("change", (event) => {
        rect.style.backgroundColor = event.target.value;
    });

    button1.addEventListener("click", () => {
        gwcMessage(`${colorpicker.value} or ${colorpicker.toRGB()}`);
    });

    button2.addEventListener("click", () => {
        colorpicker.fromRGB(255,255,0); // or colorpicker.value = "#ffff00";
    });
};

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

이 컴포넌트를 통해 색상값을 얻기 위해서는 value를 사용하며 반환값은 #으로 시작합니다. RGB 값으로 얻기 위해서는 toRGB 매서드를 사용합니다. RGBA 값으로 얻기 위해서는 toRGBA 매서드를 사용하며 알파값에 대한 인자를 받습니다.

2022-01-082022-01-12

#GWC UI Library : Select

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

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

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

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

.panel {
    display: flex;
    gap: 2em;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

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

#select1, #select2 {
    width: 20em;
}

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

window.onload = () => {
    select2.setItems(["인간은", "말이 아닌", "행위로 정의된다."]);
    select2.selectedIndex = 3;

    button.addEventListener("click", () => {
        gwcMessage(`
            select1: ${select1.value}

            select2: ${select2.value}
        `);
    });

    const onChange = (event) => {
        const select = event.target;
        label.content = `
            ${select.id} 값이 
            "${select.value}"(으)로 변경되었습니다.`;
    };

    select1.addEventListener("change", onChange);
    select2.addEventListener("change", onChange);

    GeoServiceWebComponentManager.instance.update();
};

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