요즘 한꺼번에 이것 저것 보느라고 좀 어렵긴 한데 실버라이트는 주워만 듣다가 처음 배우니까 전체 개념을 잡기가 쉽지 않았다. 이것저것 배우고 있기는 한데 전체 그림을 아직 못그리고 있으니까 헷갈리기도 하고 맞는건지 아닌건지 잘 모르겠고 포스팅을 하려면 좀 정리가 되어야 하는데 정리가 되지 않는 상황이다.
그래서 포스팅을 미루고 있긴 했는데 또 그러니까 배운것도 정리가 안되서 계속 다음수업나올때 마다 헷갈려서 배운거라도 좀 정리해서 내껄로 만들어야 겠다. 2차적으로 정보공유에 목적을 두고 내가 알게 된 지식은 공유한다는 원칙을 가지고 있지만 1차적인 블로그의 목적은 내가 배운걸 더 잘 기억하고 나중에 쉽게 찾아볼 수 있게 해서 삽질을 줄인다는데 그 목적이 있으니.... (잘못된 정보 전달을 하게 될까봐 좀 신경쓰이긴 하지만 그런 부분은 다른 고수분들이 지적해 주실꺼라고 생각하고.. ㅎㅎ)
그래서 포스팅을 미루고 있긴 했는데 또 그러니까 배운것도 정리가 안되서 계속 다음수업나올때 마다 헷갈려서 배운거라도 좀 정리해서 내껄로 만들어야 겠다. 2차적으로 정보공유에 목적을 두고 내가 알게 된 지식은 공유한다는 원칙을 가지고 있지만 1차적인 블로그의 목적은 내가 배운걸 더 잘 기억하고 나중에 쉽게 찾아볼 수 있게 해서 삽질을 줄인다는데 그 목적이 있으니.... (잘못된 정보 전달을 하게 될까봐 좀 신경쓰이긴 하지만 그런 부분은 다른 고수분들이 지적해 주실꺼라고 생각하고.. ㅎㅎ)
잡설이 길었으니 이제 자바스크립트로 핸들링을 해보자. 앞의 포스팅에서 얘기했듯이 1.0에서는 실버라이트를 자바스크립트로 핸들링한다. 이전 포스팅에 있던 XAML을 가져와보자.
Xml
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="silverlightOnLoad" >
<Ellipse Height="100" Width="100" Stroke="Black" StrokeThickness="10" Fill="SlateBlue" x:Name="ellipse1" />
</Canvas>
Canvas태그에 Loaded라는 속상을 추가했다. 이 속성을 추가하면 실버라이트가 로드된 후에 자바스크립트에서 Loaded속성에 지정한 이름의 함수를 찾아서 호출한다. 당연히 자바스크립트에 silverlightOnLoad라는 이름의 함수가 정의되어 있어야 한다. 기본적인 초기화(?)는 XAML파일에서 하지만 그외에 실버라이트가 로드된 다음에 처리해야 할 것 있다면 여기서 해주면 된다.
Ellipse의 속성으로 x:Name를 추가했다. 여기서는 x라는 네임스페이스를 사용했는데 네임스페이스는 최상위 Canvas태그 내에 지정되어 있다. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 의 코드가 네임스페이스를 지정하는 부분이고 Name를 사용하려면 이 부분이 지정되어 있어야 한다.
이제 자바스크립트로 핸들링을 해야 하는데 어느 것이나 마찬가지듯이 핸들링을 하려면 하기전에 일단 엘레먼트를 선택해야 한다. 어떤걸 가지고 핸들링 할건지 선택해야 머 핸들링하든지 말든지 할것 아닌가...
JavaScript
function silverlightOnLoad(sender, args) {
alert("sivlerlight has Loaded");
var element = document.getElementById("silverlightControl").content.root.Children.GetItem(0);
//var element = sender.gethost().content.root.Children.GetItem(0);
//var element = sender.findname("ellipse1");
alert(element);
}
위의 함수를 넣으면 실버라이트 객체가 로딩됨과 동시에 sivlerlight has Loaded라는 메시지가 출력된다. loaded함수는 2개의 object파라미터를 넘겨받는다. sender와 eventArgs인데 sender는 말 그대로 함수를 호출한 객체이고 eventArgs는 안써봐서 솔직히 잘 모르겠는데 MSDN에는 "This parameter is always set to null"라고 나타난다. ㅡ..ㅡ 위의 소스에서 sender는 Canvas가 된다.
그 다음에 XAML에 있는 Ellips 객체를 다루기 위해서 객체를 찾아야 한다. 4,5,6번줄은 모두 같은 결과가 나온다. 3가지 방법중(내가 알고 있는...) 편한 방법을 사용하면 된다.
실버라이트객체의 content에 root가 최상위 Canvas이다.(xaml파일에서 최상위에 볼수 있는 Canvas태그. 최상위 Canvas라고 한 것은 Canvas안에 또 Canvas가 들어갈 수 있기 때문이다.) 이 최상위 Canvas의 자식들(Children)중에서 GetItem을 통해서 원하는 객체를 찾아낼 수 있다.
4번 줄은 실버라이트객체를 통창적인 자바스크립트 코드를 이용해서 찾았다. 이전 포스팅의 html소스를 보면 실버라이트를 불러오는 object태그의 이름을 silverlightControl라고 준 것을볼수 있고 그냥 그 Object태그를 찾아온 것이다.
5번줄은 getHost() 메서드를 이용한 것이다. 실버라이트의 어떤 오브젝트에서도 getHost()를 사용하면 최상위 실버라이트객체를 얻어낼 수 있다. 솔직히 여기서는 sender가 Canvas이기 때문에 sender.gethost().content.root로 Canvas를 찾은 것은 다시 올라갔다가 원래 위치로 돌아온 좀 멍청한 짓이긴 한데 그냥 이런식으로 찾는다는 것을 알기 위해서...
6번줄은 제일 많이 사용하지 않을까 싶은데 sender의 객체로 findname()를 사용해서 해당이름의 엘레먼트를 찾아온 것이다. 자바스크립트의 document.getElementByID()처럼 직관적이다. GetItem()같은 경우는 위치가 바뀌면 소스도 바꾸어 주어야 하기 때문에.... findname()메서드는 어떤 Dependency Object에서라도(Dependency Object는 모든 실버라이트 Object의 최상위 객체이다.) 그 xaml의 엘리먼트를 찾아올 수 있다.
3가지중 어떤것을 쓰던지 간에 위코드에서는 alert메시지로 "Ellipse"가 튀어나온다.
그럼 이제 다룰 엘리먼트를 찾았으니까 먼가 해야지. Ellipse를 클릭하면 Rectangle가 생기도록 해보자. 위 함수의 마지막줄에 아래 코드를 추가하자.
element.AddEventListener("MouseLeftButtonDown", createRectangle);
MSDN에 보면 AddEventListener에 대한 정의가 다음과 같이 나온다.
object.AddEventListener(eventName, functionReference)
첫번째 파라미터는 이벤트이름이고 두번째가 해당이벤트에서 실행할 참조함수이다. 해당 object에서 eventName가 발생하면 functionReference()를 실행하는 것이다. eventName의 종류에 대해서는 해당 MSDN을 참고하면 된다. 즉 위의 코드는 Ellipse를 마우스 왼쪽클릭하면 createRectangle()를 실행하라는 뜻이다.
JavaScript
function createRectangle(sender, args) {
var obj = document.getElementById("silverlightControl");
var rect = obj.content.createFromXaml("<Rectangle />");
rect["Canvas.Left"] = 150;
rect["Canvas.Top"] = 10;
rect.Width = 100;
rect.Height = 100;
rect.Stroke = "red";
rect.Fill = "SlateBlue";
rect.StrokeThickness = "5";
obj.content.root.children.add(rect);
}
silverlightObject.content.CreateFromXaml(xamlContent)를 이용해서 XAML에 Rectangle엘레먼트를 추가하고 속성값을 할당한다. 그리고 add()함수를 이용해서 Rectangle엘리먼트를 추가하는데 여기서는 최상위 Canvas에 추가할 것이므로 document.getElementById("silverlightControl").content.root.children에다가 add를 해준다. 이렇게 해주면 Ellipse를 클릭했을때 Rectangle이 화면에 나타난다.
물론 이건 자바스크립트로 다루는 걸 익히기 위해서 이렇게 한것이지 동적으로 자바스크립트에서 다 생성할 필요없이 메타데이터의 역할인 XAML에서 생성하는 것이 훨씬 좋은 방법이다. 그게 메타의 역할이니까...
