GIS Developer

웹 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 매서드를 사용하며 알파값에 대한 인자를 받습니다.

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

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

    
    

        
        
            
                인간은
                말이 아닌
                행위로
                정의된다.
            
        
    
    

        
        
            
                HUMAN
                IS DEFINED
                BY NOT WORD
                BUT ACT.
            
        
    
            
    

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

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

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

window.onload = () => {
    const onChange = (event) => {
        const radioGroup = event.target;
        label.content = `
             ${radioGroup.id}의 선택은 
             "${radioGroup.selectedTitle}"입니다.
        `;
     };

    radiogroup1.addEventListener("change", onChange);
    radiogroup2.addEventListener("change", onChange);

    button.addEventListener("click", () => {
        const txtRadioGroup1 = `${radiogroup1.selectedTitle}(${radiogroup1.selectedIndex})`;
        const txtRadioGroup2 = `${radiogroup2.selectedTitle}(${radiogroup2.selectedIndex})`;

        gwcMessage(`
            radiogroup1: ${txtRadioGroup1}

            radiogroup2: ${txtRadioGroup2}
        `);
    });
};

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