[글쓴이:] 김 형준

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

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

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

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

#progress1 {
    width: 25em;
}

#progress2 {
    width: 20em;
}

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

window.onload = () => {
    button.addEventListener("click", () => {
        setInterval(() => {
            progress1.setAttribute("label", `완성율 ${parseInt(progress1.percent)}%`)
            progress1.percent += Math.random() * 10 - 3.5;
    
            if(progress1.percent == 100) progress1.percent = 0;
        }, 150);
    
        progress1.addEventListener("progress", (event) => {
            label.content = `progress1의 percent 속성값이 ${event.target.percent.toFixed(2)}로 변경되었습니다.`;
        });
    });
};

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

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

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

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

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

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

gwc-textinput {
    width: 20em;
}

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

window.onload = () => {
    const onChange = (event) => {
        label.content = `${event.target.id}의 값: ${event.target.value}`;
    };

    textinput1.addEventListener("change", onChange);
    textinput2.addEventListener("change", onChange);
    textinput3.addEventListener("change", onChange);
    textinput4.addEventListener("change", onChange);

    button.addEventListener("click", () => {
        const v1 = textinput1.value;
        const v2 = textinput2.value;
        const v3 = textinput3.value;
        const v4 = textinput4.value;

        gwcMessage(`
            textinput1: ${v1}

            textinput2: ${v2}

            textinput3: ${v3}

            textinput4: ${v4}
        `);
    });
};

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

keyup 이벤트에 대한 코드 사용예는 다음과 같습니다.

textinput.addEventListener("keyup", (event) => {
    if (event.detail.originalEvent.key === "Enter") {
        // ..
    }
});

추가적으로 focus와 blur 이벤트도 제공합니다.

gwc에서는 상위 이벤트 객체에 접근하기 위해서는 event.detail.originalEvent를 이용합니다.

비활성화는 아닌데, 편집만 막는 readonly 속성도 제공합니다. 사용 예는 다음과 같습니다.

웹 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 속성으로 간단한 툴팁을 표현할 수 있습니다.