[카테고리:] GWC UI Library

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

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

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

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

그리고 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 checkbox = event.target;
        label.content = `
            ${checkbox.id} 상태가 
            ${checkbox.checked}로 변경되었습니다.`;
    };

    checkbox1.addEventListener("change", onChange);
    checkbox2.addEventListener("change", onChange);
    checkbox3.addEventListener("change", onChange);
    checkbox4.addEventListener("change", onChange);

    button.addEventListener("click", () => {
        const bChecked1 = checkbox1.checked;
        const bChecked2 = checkbox2.checked;
        const bChecked3 = checkbox3.checked;
        const bChecked4 = checkbox4.checked;

        const txtChecked = "CHECK";
        const txtNotChecked = "NOT CHECK";

        gwcMessage(`
            checkbox1: ${bChecked1?txtChecked:txtNotChecked}

            checkbox2: ${bChecked2?txtChecked:txtNotChecked}

            checkbox3: ${bChecked3?txtChecked:txtNotChecked}

            checkbox4: ${bChecked4?txtChecked:txtNotChecked}
        `);
    });
};

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