타이젠 Web Application 개발 팁

타이젠 Web Application을 개발할 때 유용하게 사용할 수 있는 팁을 소개해 본다. 사실, 타이젠에만 국한되는 것은 아니고, Web Browser에서 테스트 할 때 키 이벤트로 특정 이벤트를 발생 시키는 방법이다. 아주 평범하고, 데모나 테스트 할때 일반적으로 사용할 수 있는 내용!

보통은 Tizen Web Application을 개발할 때 일반 Web Application 개발하듯이 VS Code와 Chrome를 이용해서 개발을 한다. 디바이스에 올리기 직전까지 타이젠 스튜디오를 사용하지 않는다.ㅋㅋㅋㅋㅋ 일단, 너무 무겁고, 디버깅도 Chrome이 훨씬 편하고 강력하다. 지못미 타스ㅠㅠ

Chrome에 올려서 테스트할 때 가장 문제가 되는 것이 Tizen Device의 Rotate, 또는 Rotary, Back key 이벤트를 테스트 하는 것이다. 이런 이벤트에 대한 동작을 테스트 하기 위해서 아래와 같이 키보드의 특정 키 조합 이벤트에 각각의 이벤트를 바인딩 해두면 된다.

// 컨트롤키 + 화살표키로 로터리 이벤트 생성 
document.addEventListener('keydown', (event) => {
    const keyName = event.key;

    if (keyName === 'Control') {
        // do not alert when only Control key is pressed.
        return;
    }

    if (keyName === 'Backspace') {
        // 'tizenhwkey', e.keyName === "back" simulation
    }

    if (event.ctrlKey) {
        //'rotarydetent', e.detail.direction === "CW" simulation
        if (keyName === 'ArrowUp')
            inputRotaryEvent(true);

        //'rotarydetent', e.detail.direction === "CCW" simulation
        if (keyName === 'ArrowDown')
            inputRotaryEvent(false);

    // Even though event.key is not 'Control' (i.e. 'a' is pressed),
    // event.ctrlKey may be true if Ctrl key is pressed at the time.
    //   alert(`Combination of ctrlKey + ${keyName}`);
    } else {
    //   alert(`Key pressed ${keyName}`);
    }
}, false);

사실은, MDN의 키보드 이벤트 예제 코드를 조금 수정한 것이다! :)

KeyboardEvent