SilverLight

실버라이트가 지원하는 이벤트 처리기

손병환 2007. 12. 18. 01:11

크게 두가지를 지원하는데

  하나는 XAML에서 직접 처리하고자 하는 이벤트 종류를 적어서 처리하기

  예를 보면

http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  
           Canvas.Left="30" Canvas.Top="20" Foreground="LightGray”

       MouseEnter="high” MouseLeave="low”/>

MouseEnter나 MouseLeave처럼 직접적으로 오브젝트의 이벤트에 대해서 대행해 주고자 하는 자바스크립트 함수명을 적어주는 방식이 있다. 여기에 대한 자바스크립트를 html에 직접 적거나 js파일로 만들어서 html에서 불러주면 된다.

    function high(sender, eventArgs) {
        sender.Foreground = 'Black';
    }
    function low(sender, eventArgs) {
        sender.Foreground = 'LightGray';
    }

이렇게 해서 웹에서 실행시키면 마우스가 올라갔을 경우 글자색이 검정으로 변하고 마우스가 벗어났을 경우 연한 회색으로 변한다.

 

다른 하나는 addEventListener를 이용해서 활용하는 방법이다.

우선 XAML부터 보자. 아래의 예를 보면 TextBlock에 오브젝트 이름을 할당하고

캔버스(Canvas)의 Loaded 이벤트를 지정해 두었다.

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

 

자바스크립트 코드이다. CanvasLoaded라는 이벤트의 첫번째 파라미터에는 Canvas가 담고 있는 각 오브젝트에 대한 내용들을 담고 있으며 이러한 오브젝트를 찾을 수 있도록 findName이라는 함수를 지원해 준다. (VS 2008 Beta에서는 Intellisense를 지원하지 않는 것 같다. 그래서 외웠다!!~~) 이 함수를 사용해서 객체의 참조를 다른 하나의 객체에 할당하고 할당한 객체에 addEventListener 함수를 이용해서 이벤트리스너를 만들 수 있다.

function high(sender, eventArgs)
{
    sender.Foreground = 'Black';
}

function low(sender, eventArgs)
{
    sender.Foreground = 'LightGray';
}

function mouseClick(sender, eventArgs)
{
    alert('Ouch, says ' + sender.toString() + '"' + sender.name + '"');
}

function canvasLoaded(sender, eventArgs)
{
    var textBlock = sender.findName('ClickTarget');


    textBlock.addEventListener('MouseLeftButtonDown', mouseClick);
    textBlock.addEventListener('MouseLeave', high);
    textBlock.addEventListener('MouseEnter', low);
}

 

이렇게 하는 이유는 구현과 화면 디자인을 따로 구분할 수 있다는 장점이 있다. XAML내부에 이벤트를 할당할 경우 관리면에서 다분이 문제가 될 수 있으며 디자인과 구현이 적절하게 분리된 형태를 취하기 어렵기 때문이다. 앞으로 실버라이트가 점점 안정화 되어가면 일반 어플리케이션을 구현하듯이 폼과 각 이벤트를 구현하는 소스코드를 완전히 분리 시키는 것이 가능할 것으로 보인다. 1.1 alpha에서는 이러한 시도가 엿보인다.

 

끝으로 실버라이트가 지원하는 마우스 이벤트 5가지를 소개하겠다.

 

MouseEnter
     The mouse pointer entering the display area of an object
MouseLeave
     The mouse pointer leaving the display area of an object
MouseMove
     The mouse pointer moving
MouseLeftButtonDown
     The left mouse button being clicked down
MouseLeftButtonUp
     The left mouse button being clicked and released

 

참고도서 : Essential SilverLight (O'REILLY)