키보드 이벤트 탐색記

키보드 제어는 마우스 제어와는 달리 각기 국가마다 다른 형태의 키보드 레이아웃을 가지고 있다. 현재 나도 일본 관련 회사에서 일을 하다보니 일본어로 되어 있는 키보드를 약 5년간 계속해서 두드리고 있다.

 

가끔은 한글 레이아웃으로 된 자판을 사용할 때도 있는데 이 때 가장 혼동되는 부분이 싱글쿼테이션마크(')다. 일본어 자판의 경우는 이 문자가 Shift+7을 눌러야 한다. 하지만 한국어 자판은 오른쪽 새끼손가락에서 조금만 움직이면 눌러진다. 그리고 괄호를 열고 닫는 부분도 우리나라와 한칸의 차이를 보이고 있다. 한글 자판의 경우는 Shift+9이 괄호를 여는 것이지만 일본어 자판은 Shift+9가 닫는 것이다. 가령 괄호가 입력이 안되도록 하는 코드를 작성한다면 일본어와 한국어에 맞게끔 달리 작성을 해야하는 어려움이 있다.

 

자 그럼 실버라이트는 어떻게 지원을 할까?
이러한 차이점을 극복할 수 있도록 두가지 타입을 자바스크립트에서 지원을 한다.

A nonplatform-specific key code

    한 마디로 OS에 종속적이지 않다는 뜻인데 실버라이트 자체적으로 특수키등을

    제어하기 위해서 만들어 둔 키코드 값 체계
A platform-specific key code

    OS에 종속적이며 기본적으로 ASCII를 지원한다. 즉 일반 숫자나 영문자(대,소문자)를

    제어할 때 주로 사용한다.

일반적으로 platform-specific의 경우는 ASCII문자 코드와 일치하며, nonplatform의 경우는 특수문자를 입력할 때 유용하다.

이러한 특징을 잘 이해하고 실버라이트의 문자열 제어를 해 보도록 하자.

 

마우스의 경우도 이벤트 제어 함수(Event Handling Function)의 두번째 파라미터(내가 쓰고 있는 글에서는 주로 eventArgs - 특별한 의미는 없다. 그냥 아무렇게나 javascript의 변수 설정 문법에만 어긋나지 않으면 어떤 문자열이든 상관이 없다. 하지만, 나중을 생각해서라도 알아보기 쉬운 문자열 쓰는 것이 좋을껄~~ 헐~~) 에서 많은 값들을 얻을 수 있다.

 

key
    non platform specific key code(OS 비종속적인 코드)
platformKey
    platform specific key code(OS 종속적인 코드)
ctrl
    컨트롤 키가 눌러졌는지 안눌러 졌는지...
shift
    쉬프트 키가 눌러졌는지에 대해서...

 

또한 주목할 만한 특징중에 하나가 키보드 이벤트를 root, 즉 가장 바깥쪽에 있는 <Canvas>에서 캡쳐를 할 수 있다는 것이다. 아직까지 실버라이트 1.0까지는 문자열을 입력하기 위한 객체가 존재하지 않는다. (아마도 1.1 정식버젼에서는 지원을 할 것 같다. 현재 1.1 알파 버젼에서는 아직 지원하지 않는다.)

 

그리고 키보드 이벤트는 2가지가 있다.

 

    ㅇ KeyDown - 키보드를 눌렀을 때(아직 키보다가 올라오지 않은 상태)

    ㅇ KeyUp - 키보드에서 손을 떼었을 때(키보드가 올라올 때)

 

<Canvas xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                Width="640"
                Height="480"
                Background="White"
                KeyDown="keyPressed">
        <Rectangle Width="200" Height="75" Stroke="Orange" StrokeThickness="15" />
        <TextBlock FontFamily="Arial" FontSize="32" Canvas.Left="30" Canvas.Top="20"
                Foreground="Black" Text="" x:Name="InputBox" />
</Canvas>

 

문자열 입력이 가능한 객체를 만들어 보자. 아직 실버라이트에서 한글지원이 되는 문자열 입력 텍스트 박스 같은 것이 나오지 않았기 때문에 일단 여기서는 문자열 입력 이벤트에 대한 개념을 잡고자 영문으로만 입력이 가능한 형태로 작성을 해본다.

 

 ㅇ ASCII문자만
 ㅇ 영문자와 숫자 그리고 공백(Space) 문자
 ㅇ 문자를 지울 때는 backspace키

 

이와 같은 조건을 가지고 작성해 보자.

일단 각 영문자와 숫자 그리고 공백, 문자를 지울 때 사용할 backspace키의 ASCII값에 대해서 알아둘 필요가 있다. 이 부분은 다들 인터넷을 뒤지면 쉽게 찾을 수 있지만... 있지만... 여기에서 참조할 수 있도록 적어 둔다.

 

 ㅇ 공백(Space) 문자 - 32
 ㅇ 숫자 - 48~57
 ㅇ 대문자 - 65~90, 소문자 - 97~122

 

    if (eventArgs.Ctrl) {
        return;
    }
    var keyCode = eventArgs.platformKeyCode;
   
    if (keyCode == 32 || //space
        (keyCode >= 48 && keyCode <= 57 && !eventArgs.shift) || //numbers
        (keyCode >= 65 && keyCode <= 90))
    { //letters
        if ((keyCode >= 65 && keyCode <= 90) && !eventArgs.shift)
        {
            keyCode += 32;
        }
        sender.findName('InputBox').text += String.fromCharCode(keyCode);
    }

String.fromCharCode()함수를 이용해서 유용한 키값을 체크해서 값을 입력받도록 하는 것도 가능하다. 이렇게 검증된 값을 findName('InputBox')를 이용해서 값을 표시한다. 아쉽게도 커서가 깜빡거리는 기능이 없다(--')

 

나머지는 문자를 하나씩 지우는 BackSpace키에 대한 제어인데 가장 최상의 방법은 non-platform specific 키코드를 이용하는 것이다. BackSpace에 대한 non-platform specific키코드 값은 "1"이다. 더 많은 코드값은 도움말을 참조하기 바란다.

 

    if (eventArgs.key == 1)
    {
        var text = sender.findName('InputBox').text;
        sender.findName('InputBox').text = text.substring(0, text.length - 1);
    }

 

BackSpace키가 눌러지면 전체문자열의 길이를 구해서 마지막의 문자열을 제외하고 처음부터 다시 그려주는 형태를 취하고 있다. 더 좋은 방법이 있다면 취향에 맞게 알고리즘을 구현할 수 있다.

전체 소스는 아래와 같다.

 

function keyPressed(sender, eventArgs) {
    if (eventArgs.Ctrl) {
        return;
    }
    var keyCode = eventArgs.platformKeyCode;
   
    if (keyCode == 32 || //space
        (keyCode >= 48 && keyCode <= 57 && !eventArgs.shift) || //numbers
        (keyCode >= 65 && keyCode <= 90))
    { //letters
        if ((keyCode >= 65 && keyCode <= 90) && !eventArgs.shift)
        {
            keyCode += 32;
        }
        sender.findName('InputBox').text += String.fromCharCode(keyCode);
    }
    else if (eventArgs.key == 1)
    {
        var text = sender.findName('InputBox').text;
        sender.findName('InputBox').text = text.substring(0, text.length - 1);
    }
}

 

마지막으로 문자열이 입력되었을 때 TextBlock에 문자열의 속성과 각각의 값을 보여주는 자바스크립크 코드를 보여주면서 이 글을 마칠까 한다.

 

// Set the TextBlock to display the key values.
function onKeyDown(sender, keyEventArgs)
{       
    var textBlock = sender.findName("myTextBlock");

    // Concatenate the values of the KeyEventArgs parameter.
    var msg  = "key: " + keyEventArgs.key;
        msg += " platformKeycode: " + keyEventArgs.platformKeyCode;
        msg += " shift: " + keyEventArgs.shift;
        msg += " ctrl: " + keyEventArgs.ctrl;

    textBlock.text = msg;
}

 

참고도서 : Essential SilverLight (O'REILLY), SilverLight 1.0 - Development with JavaScript.chm